/*!
    Copyright (C) 2017 Google Inc.
    Licensed under http://www.apache.org/licenses/LICENSE-2.0 <see LICENSE file>
*/

(function (can) {
  'use strict';
  /* Default Sate for Assessment should be 'Not Started' */
  var defaultState = 'Not Started';
  /**
   * Simple Component to add color indication for Assessment State Name
   */
  can.Component.extend('stateColorsMap', {
    tag: 'state-colors-map',
    template: '<span style="color: {{color}};">{{state}}</span>',
    viewModel: {
      define: {
        state: {
          type: String,
          value: defaultState
        },
        color: {
          get: function () {
            var color = this.attr('colorsMap')[this.attr('state')];
            if (!color) {
              console.warn('State of the Object is not defined in Color Map: ',
                this.attr('state'));
            }
            /* Set default 'Not Started' State Color in case incorrect state is provided */
            return color || this.attr('colorsMap')[defaultState];
          }
        },
        colorsMap: {
          type: '*',
          value: function () {
            return {
              'Not Started': '#bdbdbd',
              'In Progress': '#ffab40',
              'Ready for Review': '#1378bb',
              Verified: '#333',
              Completed: '#8bc34a'
            };
          }
        }
      }
    }
  });
})(window.can);

@@ -131,16 +131,22 @@
 ion (can
+, GGRC
 ) %7B%0A  'u
@@ -259,119 +259,139 @@
 ;%0A  
-/**%0A   * Simple Component to add c
+var tpl = '%3Cspan style=%22color: %7B%7Bcolor%7D%7D;%22%3E%7B%7Bstate%7D%7D%3C/span%3E';%0A  /* Predefined C
 olor
- indication for Assessment State Name%0A   */%0A  can.Component.extend('state
+s Mapping Object for Assessment */%0A  var default
 Colo
@@ -399,127 +399,346 @@
 sMap
-',
+ =
  %7B%0A    
-tag: 's
+'Not S
 ta
+r
 te
--colors-map',%0A    templa
+d': '#bdbdbd',%0A    'In Progress': '#ffab40',%0A    'Ready for Review': '#1378bb',%0A    Verified: '#333',%0A    Comple
 te
+d
 : '
-%3Cspan style=%22color: %7B%7Bcolor%7D%7D;%22%3E%7B%7Bstate%7D%7D%3C/span%3E',%0A    viewModel: %7B%0A  
+#8bc34a'%0A  %7D;%0A  /**%0A   * can.Map(ViewModel) presenting behavior of State Colors Map Component%0A   * @type %7Bcan.Map%7D%0A   */%0A  var viewModel = GGRC.Components.ViewModels.StateColorsMap = can.Map.extend(%7B%0A
     
@@ -753,18 +753,16 @@
 %7B%0A      
-  
 state: %7B
@@ -774,22 +774,22 @@
     
-  
 type: 
-S
+'s
 tring
+'
 ,%0A  
@@ -790,26 +790,24 @@
 g',%0A        
-  
 value: defau
@@ -816,31 +816,27 @@
 State%0A      
-  
 %7D,%0A
-  
       color:
@@ -834,26 +834,24 @@
    color: %7B%0A
-  
         get:
@@ -875,18 +875,16 @@
         
-  
 var colo
@@ -884,16 +884,20 @@
 ar color
+sMap
  = this.
@@ -913,16 +913,69 @@
 orsMap')
+ %7C%7C defaultColorsMap;%0A          var color = colorsMap
 %5Bthis.at
@@ -998,18 +998,16 @@
         
-  
 if (!col
@@ -1024,18 +1024,16 @@
         
-  
 console.
@@ -1051,22 +1051,24 @@
  of the 
-Object
+Instance
  is not 
@@ -1083,16 +1083,17 @@
 in Color
+s
  Map: ',
@@ -1107,18 +1107,16 @@
         
-  
 this.att
@@ -1128,18 +1128,16 @@
 ate'));%0A
-  
         
@@ -1150,18 +1150,16 @@
         
-  
 /* Set d
@@ -1236,26 +1236,24 @@
 /%0A          
-  
 return color
@@ -1256,27 +1256,16 @@
 olor %7C%7C 
-this.attr('
 colorsMa
@@ -1265,18 +1265,16 @@
 olorsMap
-')
 %5Bdefault
@@ -1285,30 +1285,26 @@
 e%5D;%0A        
-  %7D%0A  
+%7D%0A
       %7D,%0A   
@@ -1302,26 +1302,24 @@
    %7D,%0A      
-  
 colorsMap: %7B
@@ -1315,26 +1315,24 @@
 olorsMap: %7B%0A
-  
         type
@@ -1342,26 +1342,24 @@
 *',%0A        
-  
 value: funct
@@ -1359,34 +1359,32 @@
 : function () %7B%0A
-  
           return
@@ -1384,17 +1384,33 @@
  return 
-%7B
+defaultColorsMap;
 %0A       
@@ -1414,242 +1414,229 @@
     
-  
+%7D%0A
     
-'Not Started': '#bdbdbd',%0A              'In Progress': '#ffab40',%0A              'Ready for Review': '#1378bb',%0A              Verified: '#333',%0A              Completed: '#8bc34a'%0A            %7D;%0A          %7D%0A        %7D%0A      %7D%0A    %7D
+  %7D%0A    %7D%0A  %7D);%0A  /**%0A   * Simple Component to add color indication for Assessment State Name%0A   */%0A  can.Component.extend('stateColorsMap', %7B%0A    tag: 'state-colors-map',%0A    template: tpl,%0A    viewModel: viewModel
 %0A  %7D
@@ -1651,11 +1651,24 @@
 ndow.can
+, window.GGRC
 );%0A

Modify State Colors Map Component to test it easily