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

(function (can) {
  'use strict';

  can.Component.extend('stateColorsMap', {
    tag: 'state-colors-map',
    template: '<span style="color: {{color}};">{{state}}</span>',
    viewModel: {
      define: {
        state: {
          type: String,
          value: 'Not Started'
        },
        color: {
          get: function () {
            return this.attr('colorsMap')[this.attr('state')];
          }
        },
        colorsMap: {
          type: '*',
          value: function () {
            return {
              'Not Started': '#bdbdbd',
              'In Progress': '#ffab40',
              'Ready for Review': '#1378bb',
              Verified: '#333',
              Completed: '#8bc34a'
            };
          }
        }
      }
    }
  });
})(window.can);

@@ -151,17 +151,196 @@
 trict';%0A
+  /* Default Sate for Assessment should be 'Not Started' */%0A  var defaultState = 'Not Started';%0A  /**%0A   * Simple Component to add color indication for Assessment State Name%0A   */
 %0A
-
   can.Co
@@ -560,29 +560,28 @@
  value: 
-'Not 
+default
 Sta
-r
 te
-d'
 %0A       
@@ -642,22 +642,27 @@
         
-return
+var color =
  this.at
@@ -698,16 +698,331 @@
 ate')%5D;%0A
+            if (!color) %7B%0A              console.warn('State of the Object is not defined in Color Map: ',%0A                this.attr('state'));%0A            %7D%0A            /* Set default 'Not Started' State Color in case incorrect state is provided */%0A            return color %7C%7C this.attr('colorsMap')%5BdefaultState%5D;%0A
         

Add default behavior for State Color Map Component in case State is not defined in ColorMap set