@openui5/sap.ui.webc.main 1.115.0 → 1.116.0

package/src/sap/ui/webc/main/thirdparty/ColorPicker.js

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/types/CSSColor", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/Float", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/ColorConversion", "./generated/templates/ColorPickerTemplate.lit", "./Input", "./Slider", "./Label", "./generated/i18n/i18n-defaults", "./generated/themes/ColorPicker.css"], function (_exports, _UI5Element, _Keys, _CSSColor, _LitRenderer, _Integer, _Float, _i18nBundle, _ColorConversion, _ColorPickerTemplate, _Input, _Slider, _Label, _i18nDefaults, _ColorPicker) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/Keys", "sap/ui/webc/common/thirdparty/base/types/CSSColor", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/types/Integer", "sap/ui/webc/common/thirdparty/base/types/Float", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/util/ColorConversion", "./generated/templates/ColorPickerTemplate.lit", "./Input", "./Slider", "./Label", "./generated/i18n/i18n-defaults", "./generated/themes/ColorPicker.css"], function (_exports, _UI5Element, _customElement, _property, _event, _Keys, _CSSColor, _LitRenderer, _Integer, _Float, _i18nBundle, _ColorConversion, _ColorPickerTemplate, _Input, _Slider, _Label, _i18nDefaults, _ColorPicker) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -6,6 +6,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   });
   _exports.default = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
+  _event = _interopRequireDefault(_event);
   _CSSColor = _interopRequireDefault(_CSSColor);
   _LitRenderer = _interopRequireDefault(_LitRenderer);
   _Integer = _interopRequireDefault(_Integer);
@@ -16,101 +19,15 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _Label = _interopRequireDefault(_Label);
   _ColorPicker = _interopRequireDefault(_ColorPicker);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Styles
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-color-picker",
-    properties: /** @lends sap.ui.webcomponents.main.ColorPicker.prototype */{
-      /**
-       * Defines the currently selected color of the component.
-       * <br><br>
-       * <b>Note</b>: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.
-       * @type {CSSColor}
-       * @public
-       */
-      color: {
-        type: _CSSColor.default,
-        defaultValue: "rgba(255, 255, 255, 1)"
-      },
-      /**
-       * Defines the HEX code of the currently selected color
-       * *Note*: If Alpha(transperancy) is set it is not included in this property. Use <code>color</code> property.
-       * @type {string}
-       * @private
-       */
-      hex: {
-        type: String,
-        defaultValue: "ffffff",
-        noAttribute: true
-      },
-      /**
-       * Defines the current main color which is selected via the hue slider and is shown in the main color square.
-       * @type {string}
-       * @private
-       */
-      _mainColor: {
-        type: Object
-      },
-      // Defines the currenty selected color from the main color section.
-      _color: {
-        type: Object
-      },
-      /**
-       * @private
-       */
-      _selectedCoordinates: {
-        type: Object
-      },
-      /**
-       * @private
-       */
-      _alpha: {
-        type: _Float.default,
-        defaultValue: 1
-      },
-      /**
-       * @private
-       */
-      _hue: {
-        type: _Integer.default,
-        defaultValue: 0
-      },
-      /**
-       * @private
-       */
-      _isSelectedColorChanged: {
-        type: Boolean
-      },
-      /**
-       * @private
-       */
-      _isHueValueChanged: {
-        type: Boolean
-      },
-      /**
-       * @private
-       */
-      _wrongHEX: {
-        type: Boolean
-      }
-    },
-    slots: /** @lends sap.ui.webcomponents.main.ColorPicker.prototype */{
-      //
-    },
-    events: /** @lends sap.ui.webcomponents.main.ColorPicker.prototype */{
-      /**
-       * Fired when the the selected color is changed
-       *
-       * @event
-       * @public
-       */
-      change: {}
-    }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
-
+  var ColorPicker_1;
+  const PICKER_POINTER_WIDTH = 6.5;
   /**
    * @class
    *
@@ -137,39 +54,22 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    * @constructor
    * @author SAP SE
    * @since 1.0.0-rc.12
-   * @alias sap.ui.webcomponents.main.ColorPicker
-   * @extends UI5Element
+   * @alias sap.ui.webc.main.ColorPicker
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-color-picker
    * @public
    */
-  class ColorPicker extends _UI5Element.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get render() {
-      return _LitRenderer.default;
-    }
-    static get styles() {
-      return _ColorPicker.default;
-    }
-    static get template() {
-      return _ColorPickerTemplate.default;
-    }
-    static get dependencies() {
-      return [_Input.default, _Slider.default, _Label.default];
-    }
+  let ColorPicker = ColorPicker_1 = class ColorPicker extends _UI5Element.default {
     static async onDefine() {
-      ColorPicker.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
+      ColorPicker_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
     constructor() {
       super();
-
       // Bottom Right corner
       this._selectedCoordinates = {
-        x: 256 - 6.5,
-        y: 256 - 6.5
+        x: 256 - PICKER_POINTER_WIDTH,
+        y: 256 - PICKER_POINTER_WIDTH
       };
-
       // Default main color is red
       this._mainColor = {
         r: 255,
@@ -178,6 +78,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       };
       this.selectedHue = 0;
       this.mouseDown = false;
+      this.mouseIn = false;
     }
     onBeforeRendering() {
       // we have the color & _mainColor properties here
@@ -187,147 +88,99 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this._setValues();
       this.style.setProperty("--ui5_Color_Picker_Progress_Container_Color", tempColor);
     }
-    _applySliderStyles() {
-      const hueSlider = this.getDomRef().querySelector(".ui5-color-picker-hue-slider").shadowRoot,
-        alphaSlider = this.getDomRef().querySelector(".ui5-color-picker-alpha-slider").shadowRoot;
-      if (hueSlider.children.length === 0 || alphaSlider.children.length === 0) {
-        return;
-      }
-      const hueProgressSlider = hueSlider.querySelector(".ui5-slider-progress-container"),
-        hueHandle = hueSlider.querySelector(".ui5-slider-handle"),
-        alphaProgressSlider = alphaSlider.querySelector(".ui5-slider-progress-container"),
-        alphaHandle = alphaSlider.querySelector(".ui5-slider-handle"),
-        linearGradientDirection = this.effectiveDir === "rtl" ? "right" : "left",
-        hueProgressSliderBackgroundImage = `${linearGradientDirection}, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00`,
-        alphaProgressSliderBackgroundImage = `${linearGradientDirection}, #fff, #979797`;
-
-      // ui5-slider::part(slider-handle)
-      hueHandle.style.width = "11px";
-      hueHandle.style.height = "1.25rem";
-      hueHandle.style.background = "transparent";
-      hueHandle.style.marginLeft = "-2px";
-      hueHandle.style.marginTop = "1px";
-      alphaHandle.style.width = "11px";
-      alphaHandle.style.height = "1.25rem";
-      alphaHandle.style.background = "transparent";
-      alphaHandle.style.marginLeft = "-2px";
-      alphaHandle.style.marginTop = "1px";
-
-      // ui5-slider::part(slider-handle)::after
-      // Skipped because it is pseudo element
-
-      // ui5-slider::part(progress-container)
-      hueProgressSlider.style.width = "calc(100% + 11px)";
-      hueProgressSlider.style.height = "18px";
-      hueProgressSlider.style.position = "absolute";
-      hueProgressSlider.style.marginTop = "-10px";
-      hueProgressSlider.style.borderRadius = "0";
-      hueProgressSlider.style.border = "1px solid #89919a";
-      alphaProgressSlider.style.width = "calc(100% + 11px)";
-      alphaProgressSlider.style.height = "18px";
-      alphaProgressSlider.style.position = "absolute";
-      alphaProgressSlider.style.marginTop = "-10px";
-      alphaProgressSlider.style.borderRadius = "0";
-      alphaProgressSlider.style.border = "1px solid #89919a";
-
-      // ui5-slider.ui5-color-picker-hue-slider::part(progress-container)
-      hueProgressSlider.style.backgroundSize = "100%";
-      hueProgressSlider.style.backgroundImage = `-webkit-linear-gradient(${hueProgressSliderBackgroundImage}`;
-      hueProgressSlider.style.backgroundImage = `-moz-linear-gradient(${hueProgressSliderBackgroundImage}`;
-      hueProgressSlider.style.backgroundImage = `-ms-linear-gradient(${hueProgressSliderBackgroundImage}`;
-      hueProgressSlider.style.backgroundImage = `linear-gradient(${hueProgressSliderBackgroundImage}`;
-      hueProgressSlider.style.backgroundColor = "none";
-
-      // ui5-slider.ui5-color-picker-alpha-slider::part(progress-container)
-      alphaProgressSlider.style.backgroundImage = `-webkit-linear-gradient(${alphaProgressSliderBackgroundImage})`;
-      alphaProgressSlider.style.backgroundImage = `-moz-linear-gradient(${alphaProgressSliderBackgroundImage})`;
-      alphaProgressSlider.style.backgroundImage = `-ms-linear-gradient(${alphaProgressSliderBackgroundImage})`;
-      alphaProgressSlider.style.backgroundImage = `linear-gradient(${alphaProgressSliderBackgroundImage})`;
-      alphaProgressSlider.style.backgroundColor = "none";
-
-      // ui5-slider::part(slider-progress)
-      hueSlider.querySelector(".ui5-slider-progress").style.background = "Transparent";
-      alphaSlider.querySelector(".ui5-slider-progress").style.background = "Transparent";
-    }
-    _handleMouseDown(event) {
+    _handleMouseDown(e) {
       this.mouseDown = true;
       this.mouseIn = true;
-      this._changeSelectedColor(event.offsetX, event.offsetY);
+      this._changeSelectedColor(e.offsetX, e.offsetY);
     }
     _handleMouseUp() {
       this.mouseDown = false;
     }
-    _handleMouseOut(event) {
+    _handleMouseOut(e) {
       if (!this.mouseIn || !this.mouseDown) {
         return;
       }
-      const isLeft = event.offsetX <= 0;
-      const isUp = event.offsetY <= 0;
-      const isDown = event.offsetY >= event.target.offsetHeight;
-      const isRight = event.offsetX >= event.target.offsetWidth;
+      const target = e.target;
+      const offsetHeight = target.offsetHeight;
+      const offsetWidth = target.offsetWidth;
+      const isLeft = e.offsetX <= 0;
+      const isUp = e.offsetY <= 0;
+      const isDown = e.offsetY >= target.offsetHeight;
+      const isRight = e.offsetX >= target.offsetWidth;
       let x, y;
       if (isLeft) {
         x = 0;
       } else if (isRight) {
-        x = event.offsetWidth;
+        // Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object
+        x = offsetWidth;
       } else {
-        x = event.offsetX;
+        x = e.offsetX;
       }
       if (isUp) {
         y = 0;
       } else if (isDown) {
-        y = event.offsetHeight;
+        // Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object
+        y = offsetHeight;
       } else {
-        y = event.offsetY;
+        y = e.offsetY;
       }
       this._changeSelectedColor(x, y);
       this.mouseIn = false;
       this.mouseDown = false;
     }
-    _handleMouseMove(event) {
+    _handleMouseMove(e) {
       if (!this.mouseDown || !this.mouseIn) {
         return;
       }
-      this._changeSelectedColor(event.offsetX, event.offsetY);
+      this._changeSelectedColor(e.offsetX, e.offsetY);
     }
-    _handleAlphaInput(event) {
-      this._alpha = parseFloat(event.target.value);
+    _handleAlphaInput(e) {
+      const aphaInputValue = e.target.value;
+      this._alpha = parseFloat(aphaInputValue);
       this._setColor(this._color);
     }
-    _handleHueInput(event) {
-      this.selectedHue = event.target.value;
+    _handleHueInput(e) {
+      this.selectedHue = e.target.value;
       this._hue = this.selectedHue;
       this._setMainColor(this._hue);
       // Idication that changes to the hue value triggered as a result of user pressing over the hue slider.
       this._isHueValueChanged = true;
-      const tempColor = this._calculateColorFromCoordinates(this._selectedCoordinates.x + 6.5, this._selectedCoordinates.y + 6.5);
+      const x = this._selectedCoordinates.x + PICKER_POINTER_WIDTH;
+      const y = this._selectedCoordinates.y + PICKER_POINTER_WIDTH;
+      const tempColor = this._calculateColorFromCoordinates(x, y);
       if (tempColor) {
         this._setColor((0, _ColorConversion.HSLToRGB)(tempColor));
       }
     }
-    _handleHEXChange(event) {
-      let newValue = event.target.value.toLowerCase();
+    _handleHEXChange(e) {
       const hexRegex = new RegExp("^[<0-9 abcdef]+$");
-
+      const input = e.target;
+      let inputValueLowerCase = input.value.toLowerCase();
       // Shorthand Syntax
-      if (newValue.length === 3) {
-        newValue = `${newValue[0]}${newValue[0]}${newValue[1]}${newValue[1]}${newValue[2]}${newValue[2]}`;
+      if (inputValueLowerCase.length === 3) {
+        inputValueLowerCase = `${inputValueLowerCase[0]}${inputValueLowerCase[0]}${inputValueLowerCase[1]}${inputValueLowerCase[1]}${inputValueLowerCase[2]}${inputValueLowerCase[2]}`;
       }
-      if (newValue === this.hex) {
+      const isNewValueValid = inputValueLowerCase.length === 6 && hexRegex.test(inputValueLowerCase);
+      if (isNewValueValid && input.value !== inputValueLowerCase) {
+        this._wrongHEX = false;
+        input.value = inputValueLowerCase;
+      }
+      if (inputValueLowerCase === this.hex) {
         return;
       }
-      this.hex = newValue;
-      if (newValue.length !== 6 || !hexRegex.test(newValue)) {
+      this.hex = inputValueLowerCase;
+      if (!isNewValueValid) {
         this._wrongHEX = true;
       } else {
         this._wrongHEX = false;
         this._setColor((0, _ColorConversion.HEXToRGB)(this.hex));
       }
     }
-    _handleRGBInputsChange(event) {
-      const targetValue = parseInt(event.target.value) || 0;
+    _handleRGBInputsChange(e) {
+      const target = e.target;
+      const targetValue = parseInt(target.value) || 0;
       let tempColor;
-      switch (event.target.id) {
+      switch (target.id) {
         case "red":
           tempColor = {
             ...this._color,
@@ -392,17 +245,15 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         };
       }
     }
-    _handleAlphaChange(event) {
+    _handleAlphaChange() {
       this._alpha = this._alpha < 0 ? 0 : this._alpha;
       this._alpha = this._alpha > 1 ? 1 : this._alpha;
     }
     _changeSelectedColor(x, y) {
       this._selectedCoordinates = {
-        x: x - 6.5,
-        // Center the coordinates, because of the width of the circle
-        y: y - 6.5 // Center the coordinates, because of the height of the circle
+        x: x - PICKER_POINTER_WIDTH,
+        y: y - PICKER_POINTER_WIDTH // Center the coordinates, because of the height of the circle
       };
-
       // Idication that changes to the color settings are triggered as a result of user pressing over the main color section.
       this._isSelectedColorChanged = true;
       const tempColor = this._calculateColorFromCoordinates(x, y);
@@ -410,23 +261,20 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this._setColor((0, _ColorConversion.HSLToRGB)(tempColor));
       }
     }
-    _onkeydown(event) {
-      if ((0, _Keys.isEnter)(event)) {
-        this._handleHEXChange(event);
+    _onkeydown(e) {
+      if ((0, _Keys.isEnter)(e)) {
+        this._handleHEXChange(e);
       }
     }
     _calculateColorFromCoordinates(x, y) {
       // By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)
       // and HSL format, the color will be parsed to RGB
-
-      const h = this._hue / 4.25,
-        // 0 ≤ H < 360
-        // 0 ≤ S ≤ 1
-        s = 1 - +(Math.round(y / 256 + "e+2") + "e-2"),
-        // eslint-disable-line
-        // 0 ≤ V ≤ 1
-        l = +(Math.round(x / 256 + "e+2") + "e-2"); // eslint-disable-line
-
+      // 0 ≤ H < 360
+      const h = this._hue / 4.25;
+      // 0 ≤ S ≤ 1
+      const s = 1 - +(Math.round(parseFloat(y / 256 + "e+2")) + "e-2"); // eslint-disable-line
+      // 0 ≤ V ≤ 1
+      const l = +(Math.round(parseFloat(x / 256 + "e+2")) + "e-2"); // eslint-disable-line
       if (!s || !l) {
         // The event is finished out of the main color section
         return;
@@ -438,13 +286,17 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       };
     }
     _setColor(color = {
-      r: undefined,
-      g: undefined,
-      b: undefined
+      r: 0,
+      g: 0,
+      b: 0
     }) {
       this.color = `rgba(${color.r}, ${color.g}, ${color.b}, ${this._alpha})`;
+      this._wrongHEX = !this.isValidRGBColor(color);
       this.fireEvent("change");
     }
+    isValidRGBColor(color) {
+      return color.r >= 0 && color.r <= 255 && color.g >= 0 && color.g <= 255 && color.b >= 0 && color.b <= 255;
+    }
     _setHex() {
       let red = this._color.r.toString(16),
         green = this._color.g.toString(16),
@@ -463,9 +315,8 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _setValues() {
       const hslColours = (0, _ColorConversion.RGBToHSL)(this._color);
       this._selectedCoordinates = {
-        x: Math.round(hslColours.l * 100) * 2.56 - 6.5,
-        // Center the coordinates, because of the width of the circle
-        y: 256 - Math.round(hslColours.s * 100) * 2.56 - 6.5 // Center the coordinates, because of the height of the circle
+        x: Math.round(hslColours.l * 100) * 2.56 - PICKER_POINTER_WIDTH,
+        y: 256 - Math.round(hslColours.s * 100) * 2.56 - PICKER_POINTER_WIDTH // Center the coordinates, because of the height of the circle
       };
 
       if (this._isSelectedColorChanged) {
@@ -481,25 +332,25 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this._setMainColor(this._hue);
     }
     get hueSliderLabel() {
-      return ColorPicker.i18nBundle.getText(_i18nDefaults.COLORPICKER_HUE_SLIDER);
+      return ColorPicker_1.i18nBundle.getText(_i18nDefaults.COLORPICKER_HUE_SLIDER);
     }
     get alphaSliderLabel() {
-      return ColorPicker.i18nBundle.getText(_i18nDefaults.COLORPICKER_ALPHA_SLIDER);
+      return ColorPicker_1.i18nBundle.getText(_i18nDefaults.COLORPICKER_ALPHA_SLIDER);
     }
     get hexInputLabel() {
-      return ColorPicker.i18nBundle.getText(_i18nDefaults.COLORPICKER_HEX);
+      return ColorPicker_1.i18nBundle.getText(_i18nDefaults.COLORPICKER_HEX);
     }
     get redInputLabel() {
-      return ColorPicker.i18nBundle.getText(_i18nDefaults.COLORPICKER_RED);
+      return ColorPicker_1.i18nBundle.getText(_i18nDefaults.COLORPICKER_RED);
     }
     get greenInputLabel() {
-      return ColorPicker.i18nBundle.getText(_i18nDefaults.COLORPICKER_GREEN);
+      return ColorPicker_1.i18nBundle.getText(_i18nDefaults.COLORPICKER_GREEN);
     }
     get blueInputLabel() {
-      return ColorPicker.i18nBundle.getText(_i18nDefaults.COLORPICKER_BLUE);
+      return ColorPicker_1.i18nBundle.getText(_i18nDefaults.COLORPICKER_BLUE);
     }
     get alphaInputLabel() {
-      return ColorPicker.i18nBundle.getText(_i18nDefaults.COLORPICKER_ALPHA);
+      return ColorPicker_1.i18nBundle.getText(_i18nDefaults.COLORPICKER_ALPHA);
     }
     get inputsDisabled() {
       return this._wrongHEX ? true : undefined;
@@ -508,7 +359,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return this._wrongHEX ? "Error" : undefined;
     }
     get styles() {
-      const linearGradientDirection = this.effectiveDir === "rtl" ? "right" : "left";
       return {
         mainColor: {
           "background-color": `rgb(${this._mainColor.r}, ${this._mainColor.g}, ${this._mainColor.b})`
@@ -517,15 +367,59 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
           left: `${this._selectedCoordinates.x}px`,
           top: `${this._selectedCoordinates.y}px`
         },
-        progressContainer: {
-          "background-image": `-webkit-linear-gradient(${linearGradientDirection}, rgba(65, 120, 13, 0), ${this._mainColor}, url('data:image/png;base64,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')`
-        },
         colorSpan: {
           "background-color": `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${this._alpha})`
         }
       };
     }
-  }
+  };
+  __decorate([(0, _property.default)({
+    validator: _CSSColor.default,
+    defaultValue: "rgba(255, 255, 255, 1)"
+  })], ColorPicker.prototype, "color", void 0);
+  __decorate([(0, _property.default)({
+    defaultValue: "ffffff",
+    noAttribute: true
+  })], ColorPicker.prototype, "hex", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], ColorPicker.prototype, "_mainColor", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], ColorPicker.prototype, "_color", void 0);
+  __decorate([(0, _property.default)({
+    type: Object
+  })], ColorPicker.prototype, "_selectedCoordinates", void 0);
+  __decorate([(0, _property.default)({
+    validator: _Float.default,
+    defaultValue: 1
+  })], ColorPicker.prototype, "_alpha", void 0);
+  __decorate([(0, _property.default)({
+    validator: _Integer.default,
+    defaultValue: 0
+  })], ColorPicker.prototype, "_hue", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ColorPicker.prototype, "_isSelectedColorChanged", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ColorPicker.prototype, "_isHueValueChanged", void 0);
+  __decorate([(0, _property.default)({
+    type: Boolean
+  })], ColorPicker.prototype, "_wrongHEX", void 0);
+  ColorPicker = ColorPicker_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-color-picker",
+    renderer: _LitRenderer.default,
+    styles: _ColorPicker.default,
+    template: _ColorPickerTemplate.default,
+    dependencies: [_Input.default, _Slider.default, _Label.default]
+  })
+  /**
+   * Fired when the the selected color is changed
+   *
+   * @event sap.ui.webc.main.ColorPicker#change
+   * @public
+   */, (0, _event.default)("change")], ColorPicker);
   ColorPicker.define();
   var _default = ColorPicker;
   _exports.default = _default;