text: ///////////////////////////////////////////////////////////////////////////
  // Copyright © Esri. All Rights Reserved.
  //
  // Licensed under the Apache License Version 2.0 (the "License");
  // you may not use this file except in compliance with the License.
  // You may obtain a copy of the License at
  //
  //    http://www.apache.org/licenses/LICENSE-2.0
  //
  // Unless required by applicable law or agreed to in writing, software
  // distributed under the License is distributed on an "AS IS" BASIS,
  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  // See the License for the specific language governing permissions and
  // limitations under the License.
  ///////////////////////////////////////////////////////////////////////////
  
  define(['dojo/Evented',
    'dojo/_base/declare',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'dijit/_WidgetsInTemplateMixin',
    'dojo/_base/lang',
    'dojo/_base/html',
    'dojo/on',
    'dojo/_base/Color',
    'dojo/query',
    "jimu/dijit/ColorChooser",
    'jimu/dijit/CustomColorPicker',
    'jimu/dijit/ColorRecords',
    'dijit/popup',
    'jimu/utils',
    "dijit/a11yclick"
  ],
    function (Evented, declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin,
      lang, html, on, Color, query,
      ColorChooser, CustomColorPicker, ColorRecords, dojoPopup, jimuUtils, a11yclick) {
      return declare([_WidgetBase, _WidgetsInTemplateMixin, _TemplatedMixin, Evented], {
        templateString: "<div></div>",
        baseClass: 'jimu-color-palette',
        declaredClass: 'jimu.dijit.ColorPalette',
        _TRANSPARENT_STR: "rgba(0, 0, 0, 0)",
  
        value: "",//typeof dojoColor
        _defaultAppearance: {
          showTransparent: true,
          showColorPalette: true,
          showCoustom: true,
          showColorPickerOK: false,//ok btn
          showColorPickerApply: true,//apply btn
          showCoustomRecord: true,
          closeDialogWhenChange: false//close colorPalette dialog, when color changed
        },
        recordUID: "",//uid for colorRecords
  
        postMixInProperties: function () {
          this.nls = window.jimuNls.colorPalette;
        },
  
        postCreate: function () {
          this.inherited(arguments);
  
          //default color
          if (this.value) {
            this.value = new Color(this.value);
          } else {
            this.value = new Color('#fff');
          }
  
          this._createContent();
        },
  
        initUI: function () {
          //restore init ui
          var isTirggerEvent = false;
          this._toggleCustomColorPicker("init", isTirggerEvent);
        },
  
        _createContent: function () {
          this.appearance = lang.mixin(this._defaultAppearance, this.appearance);
  
          var tooltipDialogContent = html.create("div", { "class": "jimu-colorpalette" }, this.domNode);
  
          this.initPanel = html.create("div", { "class": "init-panel" }, tooltipDialogContent);
          this.customPanel = html.create("div", { "class": "custom-panel hide" }, tooltipDialogContent);
  
          if (this.appearance.showTransparent) {
            this._createSpecialColors( this.initPanel);
          }
          if (this.appearance.showColorPalette) {
            this._createColorChooser( this.initPanel);
          }
          if (this.appearance.showCoustom) {
            this._createCustomColorPicker( this.initPanel);
          }
          if (this.appearance.showCoustom && this.appearance.showCoustomRecord) {
            this._createCoustomRecord( this.initPanel);
          }
        },
        setColor: function (newColor) {
          if (!this._isColorEqual(newColor)) {
            this.value = new Color(newColor);
  
            this._setSpatialColor(this.value);
            if ("undefined" !== typeof this.value.a && 0 === this.value.a) {
              //"transparent"
              this.colorChooser.setColor(new Color('transparent'), false);
              this.picker.setColor(new Color("#fff"), false);//set white color for picker, as "transparent"
            } else {
              //not "transparent"
              this.colorChooser.setColor(this.value.toHex(), false);//hex work,only
              this.picker.setColor(this.value, false);
            }
  
            if (this.colorRecords) {
              this.colorRecords.selecteColor(this.value);
            }
          }
        },
        getColor: function () {
          return this.value;
        },
        changeColor: function(isClose){
          if ("undefined" !== typeof this.value.a && 0 === this.value.a) {
            this.onChange(this.value);
          } else {
            this.onChange(this.value.toHex());
          }
  
          this.emit("change", this.value);
  
          if (true === this.appearance.closeDialogWhenChange &&
            isClose !== false//DO NOT close dialog, when apply click
          ) {
            this._closeDialog();
          }
        },
        refreshRecords: function () {
          if (this.colorRecords) {
            this.colorRecords.refresh();
          }
        },
        destroy: function () {
          dojoPopup.close(this.tooltipDialog);
          this.picker.destroy();
          this.inherited(arguments);
        },
  
        //1.SpecialColors
        _createSpecialColors: function (tooltipDialogContent) {
          var specialColorDom = html.create("div", {
            "class": "special-color"
          }, tooltipDialogContent);
  
          this.transparentBtn = html.create("div", {
            "class": "transparent btn",
            innerHTML: '<div class="btn-wapper"><div class="transparent icon jimu-float-leading"></div>' +
            '<div class="transparent text jimu-float-leading">' + this.nls.transparent + '</div></div>'
          }, specialColorDom);
  
          this.own(on(this.transparentBtn, a11yclick, lang.hitch(this, this._onTransparentClick)));
        },
        _onTransparentClick: function () {
          this.setColor(new Color("transparent"));
          this.changeColor();
        },
        _setSpatialColor: function (color) {
          if (this.transparentBtn) {
            var wapper = query(".btn-wapper",this.transparentBtn)[0];
            html.removeClass(wapper, "selected");
            if (color && color.toString) {
              var isTransparent = (color.toString() === this._TRANSPARENT_STR);
              if (isTransparent) {
                html.addClass(wapper, "selected");
              }
            }
          }
        },
  
        //2. DojoColorPalette
        _createColorChooser: function (tooltipDialogContent) {
          this.colorChooser = new ColorChooser({});
          this.colorChooser.placeAt(tooltipDialogContent);
          this.own(on(this.colorChooser, 'change', lang.hitch(this, function (colorStr) {
            var color = new Color(colorStr);
            this.setColor(color);
            this.changeColor();
          })));
        },
  
        //3. customColorPicker
        _createCustomColorPicker: function () {
          this.coustomtBtn = html.create("div", {
            "class": "coustom btn",
            "innerHTML": '<div class="btn-wapper"><div class="custom icon jimu-float-leading"></div>' +
            '<div class="custom text jimu-float-leading">' + this.nls.custom + '</div></div>'
          }, this.initPanel);
  
          this.own(on(this.coustomtBtn, 'click', lang.hitch(this, function () {
            this._toggleCustomColorPicker("custom");
          })));
  
          this.picker = new CustomColorPicker({
            showOk: this.appearance.showColorPickerOK,
            showApply: this.appearance.showColorPickerApply,
            value: this.value.toHex()
          });
  
          this.picker.placeAt(this.customPanel);
          this.picker.setColor(this.value);
  
          this.own(on(this.picker, 'ok', lang.hitch(this, function (color) {
            this.setColor(new Color(color));
            this.changeColor();
  
            this._addAColorRecord(color);
  
            this._toggleCustomColorPicker("init");
            this._closeDialog();
          })));
          this.own(on(this.picker, 'apply', lang.hitch(this, function (color) {
            this.setColor(new Color(color));
            var isClose = false;
            this.changeColor(isClose);
  
            this._addAColorRecord(color);
          })));
          this.own(on(this.picker, 'cancel', lang.hitch(this, function () {
            this._toggleCustomColorPicker("init");
            this._closeDialog();
          })));
        },
  
        _toggleCustomColorPicker: function (mode, isTirgger) {
          if ("custom" === mode) {
            html.removeClass(this.customPanel, "hide");
            html.addClass(this.initPanel, "hide");
          } else {
            html.addClass(this.customPanel, "hide");
            html.removeClass(this.initPanel, "hide");
          }
  
          if ("undefined" !== typeof isTirgger && false === isTirgger) {
  
          } else {
            this.emit("change-style");
          }
        },
  
        //4. CoustomRecord
        _createCoustomRecord: function (tooltipDialogContent) {
          this.colorRecords = new ColorRecords({
            recordsLength: 10,
            uid: this.recordUID || ""
          });
          this.colorRecords.placeAt(tooltipDialogContent);
  
          this.own(on(this.colorRecords, 'choose', lang.hitch(this, function (color) {
            this.setColor(new Color(color));
            this.changeColor();
          })));
        },
        _addAColorRecord: function(color){
          if (this.colorRecords && this.colorRecords.push) {
            this.colorRecords.push(color);//update colorRecord
          }
        },
  
        ///////////////////////////////////////////////////////////////////////////////
        _isColorEqual: function (newColor) {
          if (this.value.toString() === new Color(newColor).toString()) {
            return true;
          } else {
            return false;
          }
        },
        _changeLabel: function (newColor) {
          html.empty(this.domNode);
          html.create('span', {
            innerHTML: newColor.toHex(),
            className: "color-label",
            style: {
              color: jimuUtils.invertColor(newColor.toHex())
            }
          }, this.domNode);
        },
        // onChange: function (newColor) {
        //   this.emit("change", newColor);
        // },
        onOpen: function(){
          this.openDialog();
        },
        openDialog: function(){
          this.initUI();
        },
        _closeDialog: function(){
          this.emit("close");
        },
        onClose: function () {
          this._closeDialog();//for parent call, like EditorBackgroundColor.js
        }
      });
    });