@ui5/webcomponents 2.5.0-rc.3 → 2.6.0-rc.0

package/dist/ColorPicker.js

@@ -10,15 +10,14 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { getRGBColor, HSLToRGB, HEXToRGB, RGBToHSL, } from "@ui5/webcomponents-base/dist/util/ColorConversion.js";
-import ColorPickerTemplate from "./generated/templates/ColorPickerTemplate.lit.js";
+import ColorPickerTemplate from "./ColorPickerTemplate.js";
 import Input from "./Input.js";
 import Slider from "./Slider.js";
 import Label from "./Label.js";
-import ColorPickerDisplayMode from "./types/ColorPickerDisplayMode.js";
 import { COLORPICKER_ALPHA_SLIDER, COLORPICKER_HUE_SLIDER, COLORPICKER_HEX, COLORPICKER_RED, COLORPICKER_GREEN, COLORPICKER_BLUE, COLORPICKER_ALPHA, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import ColorPickerCss from "./generated/themes/ColorPicker.css.js";
@@ -66,12 +65,12 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
          */
         this.value = "rgba(255,255,255,1)";
         /**
-         * Defines the display mode of the component.
-         * @default "Default"
+         * When set to `true`, the alpha slider and inputs for RGB values will not be displayed.
+         * @default false
          * @public
          * @since 2.5.0
          */
-        this.displayMode = "Default";
+        this.simplified = false;
         /**
          * Defines the HEX code of the currently selected color
          *
@@ -177,7 +176,7 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
         }
         this._changeSelectedColor(e.offsetX, e.offsetY);
     }
-    _handleAlphaInput(e) {
+    _handleAlphaInputFromSlider(e) {
         const aphaInputValue = e.target.value;
         this._alpha = parseFloat(aphaInputValue);
         if (Number.isNaN(this._alpha)) {
@@ -244,37 +243,38 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
         this._setColor(tempColor);
     }
     _setMainColor(hueValue) {
-        if (hueValue <= 255) {
+        const hueValueMod = hueValue * 4.251;
+        if (hueValueMod <= 255) {
             this._mainValue = {
                 r: 255,
-                g: hueValue,
+                g: hueValueMod,
                 b: 0,
             };
         }
-        else if (hueValue <= 510) {
+        else if (hueValueMod <= 510) {
             this._mainValue = {
-                r: 255 - (hueValue - 255),
+                r: 255 - (hueValueMod - 255),
                 g: 255,
                 b: 0,
             };
         }
-        else if (hueValue <= 765) {
+        else if (hueValueMod <= 765) {
             this._mainValue = {
                 r: 0,
                 g: 255,
-                b: hueValue - 510,
+                b: hueValueMod - 510,
             };
         }
-        else if (hueValue <= 1020) {
+        else if (hueValueMod <= 1020) {
             this._mainValue = {
                 r: 0,
-                g: 765 - (hueValue - 255),
+                g: 765 - (hueValueMod - 255),
                 b: 255,
             };
         }
-        else if (hueValue <= 1275) {
+        else if (hueValueMod <= 1275) {
             this._mainValue = {
-                r: hueValue - 1020,
+                r: hueValueMod - 1020,
                 g: 0,
                 b: 255,
             };
@@ -283,11 +283,12 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
             this._mainValue = {
                 r: 255,
                 g: 0,
-                b: 1275 - (hueValue - 255),
+                b: 1275 - (hueValueMod - 255),
             };
         }
     }
-    _handleAlphaChange() {
+    _handleAlphaChange(e) {
+        this._handleAlphaInputFromSlider(e);
         this._alpha = this._alpha < 0 ? 0 : this._alpha;
         this._alpha = this._alpha > 1 ? 1 : this._alpha;
     }
@@ -313,7 +314,7 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
         // and HSL format, the color will be parsed to RGB
         // 0 ≤ H < 360
         // 4.251 because with 4.25 we get out of the colors range.
-        const h = this._hue / 4.251;
+        const h = this._hue;
         // 0 ≤ S ≤ 1
         const s = 1 - +(Math.round(parseFloat((y / 256) + "e+2")) + "e-2"); // eslint-disable-line
         // 0 ≤ V ≤ 1
@@ -363,7 +364,7 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
             this._hue = this.selectedHue ? this.selectedHue : this._hue;
         }
         else {
-            this._hue = Math.round(hslColours.h * 4.25);
+            this._hue = Math.round(hslColours.h);
         }
         this._setMainColor(this._hue);
     }
@@ -392,12 +393,13 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
         return this._wrongHEX ? true : undefined;
     }
     get hexInputErrorState() {
-        return this._wrongHEX ? "Error" : undefined;
+        return this._wrongHEX ? "Negative" : "None";
     }
     get _isDefaultPickerMode() {
-        return this.displayMode === ColorPickerDisplayMode.Default;
+        return !this.simplified;
     }
     get styles() {
+        // Remove after deleting the hbs template as the styles are added via the jsx template
         return {
             mainColor: {
                 "background-color": `rgb(${this._mainValue.r}, ${this._mainValue.g}, ${this._mainValue.b})`,
@@ -419,8 +421,8 @@ __decorate([
     property()
 ], ColorPicker.prototype, "name", void 0);
 __decorate([
-    property()
-], ColorPicker.prototype, "displayMode", void 0);
+    property({ type: Boolean })
+], ColorPicker.prototype, "simplified", void 0);
 __decorate([
     property({ noAttribute: true })
 ], ColorPicker.prototype, "hex", void 0);
@@ -454,7 +456,7 @@ __decorate([
 ColorPicker = ColorPicker_1 = __decorate([
     customElement({
         tag: "ui5-color-picker",
-        renderer: litRender,
+        renderer: jsxRenderer,
         formAssociated: true,
         styles: ColorPickerCss,
         template: ColorPickerTemplate,

package/dist/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../src/ColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport {\n\tgetRGBColor,\n\tHSLToRGB,\n\tHEXToRGB,\n\tRGBToHSL,\n} from \"@ui5/webcomponents-base/dist/util/ColorConversion.js\";\nimport type {\n\tColorHSL,\n\tColorRGB,\n} from \"@ui5/webcomponents-base/dist/util/ColorConversion.js\";\nimport ColorPickerTemplate from \"./generated/templates/ColorPickerTemplate.lit.js\";\nimport Input from \"./Input.js\";\nimport Slider from \"./Slider.js\";\nimport Label from \"./Label.js\";\nimport ColorPickerDisplayMode from \"./types/ColorPickerDisplayMode.js\";\n\nimport {\n\tCOLORPICKER_ALPHA_SLIDER,\n\tCOLORPICKER_HUE_SLIDER,\n\tCOLORPICKER_HEX,\n\tCOLORPICKER_RED,\n\tCOLORPICKER_GREEN,\n\tCOLORPICKER_BLUE,\n\tCOLORPICKER_ALPHA,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport ColorPickerCss from \"./generated/themes/ColorPicker.css.js\";\n\nconst PICKER_POINTER_WIDTH = 6.5;\n\ntype ColorCoordinates = {\n\tx: number,\n\ty: number,\n}\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-color-picker` allows users to choose any color and provides different input options for selecting colors.\n *\n * ### Usage\n *\n * #### When to use\n * Use the color picker if:\n *\n * -  users need to select any color freely.\n *\n * #### When not to use\n *\n * -  Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/ColorPicker.js\";`\n * @constructor\n * @since 1.0.0-rc.12\n * @extends UI5Element\n * @public\n */\n\n@customElement({\n\ttag: \"ui5-color-picker\",\n\trenderer: litRender,\n\tformAssociated: true,\n\tstyles: ColorPickerCss,\n\ttemplate: ColorPickerTemplate,\n\tdependencies: [\n\t\tInput,\n\t\tSlider,\n\t\tLabel,\n\t],\n\tshadowRootOptions: { delegatesFocus: true },\n})\n/**\n * Fired when the the selected color is changed\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n})\nclass ColorPicker extends UI5Element implements IFormInputElement {\n\teventDetails!: {\n\t\tchange: void;\n\t}\n\t/**\n\t * Defines the currently selected color of the component.\n\t *\n\t * **Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.\n\t * @default \"rgba(255,255,255,1)\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"rgba(255,255,255,1)\";\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default undefined\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * Defines the display mode of the component.\n\t * @default \"Default\"\n\t * @public\n\t * @since 2.5.0\n\t */\n\t@property()\n\tdisplayMode: `${ColorPickerDisplayMode}` = \"Default\";\n\n\t/**\n\t * Defines the HEX code of the currently selected color\n\t *\n\t * **Note**: If Alpha(transperancy) is set it is not included in this property. Use `color` property.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\thex = \"ffffff\";\n\n\t/**\n\t * Defines the current main color which is selected via the hue slider and is shown in the main color square.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_mainValue: ColorRGB;\n\n\t/**\n\t * Defines the currenty selected color from the main color section.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_value: ColorRGB = getRGBColor(this.value);\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_selectedCoordinates: ColorCoordinates;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\t_alpha = 1;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\t_hue = 0;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isSelectedColorChanged = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isHueValueChanged = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_wrongHEX = false;\n\n\tselectedHue: number;\n\n\tmouseDown: boolean;\n\n\tmouseIn: boolean;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tasync formElementAnchor() {\n\t\treturn this.getFocusDomRefAsync();\n\t}\n\n\tget formFormattedValue() {\n\t\treturn this.value;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Bottom Right corner\n\t\tthis._selectedCoordinates = {\n\t\t\tx: 256 - PICKER_POINTER_WIDTH,\n\t\t\ty: 256 - PICKER_POINTER_WIDTH,\n\t\t};\n\n\t\t// Default main color is red\n\t\tthis._mainValue = {\n\t\t\tr: 255,\n\t\t\tg: 0,\n\t\t\tb: 0,\n\t\t};\n\n\t\tthis.selectedHue = 0;\n\n\t\tthis.mouseDown = false;\n\t\tthis.mouseIn = false;\n\t}\n\n\tonBeforeRendering() {\n\t\t// we have the color & ._mainValue properties here\n\t\tthis._value = getRGBColor(this.value);\n\t\tconst tempColor = `rgba(${this._value.r},${this._value.g},${this._value.b},1)`;\n\t\tthis._setHex();\n\t\tthis._setValues();\n\t\tthis.style.setProperty(getScopedVarName(\"--ui5_Color_Picker_Progress_Container_Color\"), tempColor);\n\t}\n\n\t_handleMouseDown(e: MouseEvent) {\n\t\tthis.mouseDown = true;\n\t\tthis.mouseIn = true;\n\t\tthis._changeSelectedColor(e.offsetX, e.offsetY);\n\t}\n\n\t_handleMouseUp() {\n\t\tthis.mouseDown = false;\n\t}\n\n\t_handleMouseOut(e: MouseEvent) {\n\t\tif (!this.mouseIn || !this.mouseDown) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst target = e.target as HTMLElement;\n\t\tconst offsetHeight: number = target.offsetHeight;\n\t\tconst offsetWidth: number = target.offsetWidth;\n\t\tconst isLeft: boolean = e.offsetX <= 0;\n\t\tconst isUp: boolean = e.offsetY <= 0;\n\t\tconst isDown: boolean = e.offsetY >= target.offsetHeight;\n\t\tconst isRight: boolean = e.offsetX >= target.offsetWidth;\n\n\t\tlet x: number,\n\t\t\ty: number;\n\n\t\tif (isLeft) {\n\t\t\tx = 0;\n\t\t} else if (isRight) {\n\t\t\t// Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object\n\t\t\tx = offsetWidth;\n\t\t} else {\n\t\t\tx = e.offsetX;\n\t\t}\n\n\t\tif (isUp) {\n\t\t\ty = 0;\n\t\t} else if (isDown) {\n\t\t\t// Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object\n\t\t\ty = offsetHeight;\n\t\t} else {\n\t\t\ty = e.offsetY;\n\t\t}\n\n\t\tthis._changeSelectedColor(x, y);\n\t\tthis.mouseIn = false;\n\t\tthis.mouseDown = false;\n\t}\n\n\t_handleMouseMove(e: MouseEvent) {\n\t\tif (!this.mouseDown || !this.mouseIn) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._changeSelectedColor(e.offsetX, e.offsetY);\n\t}\n\n\t_handleAlphaInput(e: CustomEvent) {\n\t\tconst aphaInputValue: string = (e.target as Input).value;\n\t\tthis._alpha = parseFloat(aphaInputValue);\n\t\tif (Number.isNaN(this._alpha)) {\n\t\t\tthis._alpha = 1;\n\t\t}\n\t\tthis._isHueValueChanged = true;\n\t\tthis._setColor(this._value);\n\t}\n\n\t_handleHueInput(e: CustomEvent) {\n\t\tthis.selectedHue = (e.target as Slider).value;\n\t\tthis._hue = this.selectedHue;\n\t\tthis._setMainColor(this._hue);\n\t\t// Idication that changes to the hue value triggered as a result of user pressing over the hue slider.\n\t\tthis._isHueValueChanged = true;\n\n\t\tconst x: number = this._selectedCoordinates.x + PICKER_POINTER_WIDTH;\n\t\tconst y: number = this._selectedCoordinates.y + PICKER_POINTER_WIDTH;\n\t\tconst tempColor = this._calculateColorFromCoordinates(x, y);\n\n\t\tif (tempColor) {\n\t\t\tthis._setColor(HSLToRGB(tempColor));\n\t\t}\n\t}\n\n\t_handleHEXChange(e: CustomEvent | KeyboardEvent) {\n\t\tconst hexRegex = new RegExp(\"^[<0-9 abcdef]+$\");\n\t\tconst input: Input = (e.target as Input);\n\t\tlet inputValueLowerCase = input.value.toLowerCase();\n\n\t\t// Shorthand Syntax\n\t\tif (inputValueLowerCase.length === 3) {\n\t\t\tinputValueLowerCase = `${inputValueLowerCase[0]}${inputValueLowerCase[0]}${inputValueLowerCase[1]}${inputValueLowerCase[1]}${inputValueLowerCase[2]}${inputValueLowerCase[2]}`;\n\t\t}\n\n\t\tconst isNewValueValid = inputValueLowerCase.length === 6 && hexRegex.test(inputValueLowerCase);\n\n\t\tif (isNewValueValid && input.value !== inputValueLowerCase) {\n\t\t\tthis._wrongHEX = false;\n\t\t\tinput.value = inputValueLowerCase;\n\t\t}\n\n\t\tif (inputValueLowerCase === this.hex) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.hex = inputValueLowerCase;\n\n\t\tif (!isNewValueValid) {\n\t\t\tthis._wrongHEX = true;\n\t\t} else {\n\t\t\tthis._wrongHEX = false;\n\t\t\tthis._setColor(HEXToRGB(this.hex));\n\t\t}\n\t}\n\n\t_handleRGBInputsChange(e: CustomEvent) {\n\t\tconst target = e.target as Input;\n\t\tconst targetValue = parseInt(target.value) || 0;\n\t\tlet tempColor;\n\t\tswitch (target.id) {\n\t\tcase \"red\":\n\t\t\ttempColor = { ...this._value, r: targetValue };\n\t\t\tbreak;\n\n\t\tcase \"green\":\n\t\t\ttempColor = { ...this._value, g: targetValue };\n\t\t\tbreak;\n\n\t\tcase \"blue\":\n\t\t\ttempColor = { ...this._value, b: targetValue };\n\t\t\tbreak;\n\t\tdefault:\n\t\t\ttempColor = { ...this._value };\n\t\t}\n\n\t\tthis._setColor(tempColor);\n\t}\n\n\t_setMainColor(hueValue: number) {\n\t\tif (hueValue <= 255) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 255,\n\t\t\t\tg: hueValue,\n\t\t\t\tb: 0,\n\t\t\t};\n\t\t} else if (hueValue <= 510) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 255 - (hueValue - 255),\n\t\t\t\tg: 255,\n\t\t\t\tb: 0,\n\t\t\t};\n\t\t} else if (hueValue <= 765) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 0,\n\t\t\t\tg: 255,\n\t\t\t\tb: hueValue - 510,\n\t\t\t};\n\t\t} else if (hueValue <= 1020) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 0,\n\t\t\t\tg: 765 - (hueValue - 255),\n\t\t\t\tb: 255,\n\t\t\t};\n\t\t} else if (hueValue <= 1275) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: hueValue - 1020,\n\t\t\t\tg: 0,\n\t\t\t\tb: 255,\n\t\t\t};\n\t\t} else {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 255,\n\t\t\t\tg: 0,\n\t\t\t\tb: 1275 - (hueValue - 255),\n\t\t\t};\n\t\t}\n\t}\n\n\t_handleAlphaChange() {\n\t\tthis._alpha = this._alpha < 0 ? 0 : this._alpha;\n\t\tthis._alpha = this._alpha > 1 ? 1 : this._alpha;\n\t}\n\n\t_changeSelectedColor(x: number, y: number) {\n\t\tthis._selectedCoordinates = {\n\t\t\tx: x - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle\n\t\t\ty: y - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle\n\t\t};\n\n\t\t// Idication that changes to the color settings are triggered as a result of user pressing over the main color section.\n\t\tthis._isSelectedColorChanged = true;\n\n\t\tconst tempColor = this._calculateColorFromCoordinates(x, y);\n\t\tif (tempColor) {\n\t\t\tthis._setColor(HSLToRGB(tempColor));\n\t\t}\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\tthis._handleHEXChange(e);\n\t\t}\n\t}\n\n\t_calculateColorFromCoordinates(x: number, y: number) {\n\t\t// By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)\n\t\t// and HSL format, the color will be parsed to RGB\n\t\t// 0 ≤ H < 360\n\t\t// 4.251 because with 4.25 we get out of the colors range.\n\t\tconst h = this._hue / 4.251;\n\n\t\t// 0 ≤ S ≤ 1\n\t\tconst s = 1 - +(Math.round(parseFloat((y / 256) + \"e+2\")) + \"e-2\"); // eslint-disable-line\n\n\t\t// 0 ≤ V ≤ 1\n\t\tconst l = +(Math.round(parseFloat((x / 256) + \"e+2\")) + \"e-2\"); // eslint-disable-line\n\n\t\tif (!s || !l) {\n\t\t\t// The event is finished out of the main color section\n\t\t\treturn;\n\t\t}\n\n\t\treturn {\n\t\t\th,\n\t\t\ts,\n\t\t\tl,\n\t\t};\n\t}\n\n\t_setColor(color: ColorRGB = { r: 0, g: 0, b: 0 }) {\n\t\tthis.value = `rgba(${color.r}, ${color.g}, ${color.b}, ${this._alpha})`;\n\t\tthis._wrongHEX = !this.isValidRGBColor(color);\n\t\tthis.fireDecoratorEvent(\"change\");\n\t}\n\n\tisValidRGBColor(color: ColorRGB) {\n\t\treturn color.r >= 0 && color.r <= 255 && color.g >= 0 && color.g <= 255 && color.b >= 0 && color.b <= 255;\n\t}\n\n\t_setHex() {\n\t\tlet red = this._value.r.toString(16),\n\t\t\tgreen = this._value.g.toString(16),\n\t\t\tblue = this._value.b.toString(16);\n\n\t\tif (red.length === 1) {\n\t\t\tred = `0${red}`;\n\t\t}\n\t\tif (green.length === 1) {\n\t\t\tgreen = `0${green}`;\n\t\t}\n\t\tif (blue.length === 1) {\n\t\t\tblue = `0${blue}`;\n\t\t}\n\n\t\tthis.hex = red + green + blue;\n\t}\n\n\t_setValues() {\n\t\tconst hslColours: ColorHSL = RGBToHSL(this._value);\n\t\tthis._selectedCoordinates = {\n\t\t\tx: ((Math.round(hslColours.l * 100) * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle\n\t\t\ty: (256 - (Math.round(hslColours.s * 100) * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle\n\t\t};\n\n\t\tif (this._isSelectedColorChanged) { // We shouldn't update the hue value when user presses over the main color section.\n\t\t\tthis._isSelectedColorChanged = false;\n\t\t} else if (this._isHueValueChanged) { // We shouldn't recalculate the hue value when user changes the hue slider.\n\t\t\tthis._isHueValueChanged = false;\n\t\t\tthis._hue = this.selectedHue ? this.selectedHue : this._hue;\n\t\t} else {\n\t\t\tthis._hue = Math.round(hslColours.h * 4.25);\n\t\t}\n\n\t\tthis._setMainColor(this._hue);\n\t}\n\n\tget hueSliderLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_HUE_SLIDER);\n\t}\n\n\tget alphaSliderLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA_SLIDER);\n\t}\n\n\tget hexInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_HEX);\n\t}\n\n\tget redInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_RED);\n\t}\n\n\tget greenInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_GREEN);\n\t}\n\n\tget blueInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_BLUE);\n\t}\n\n\tget alphaInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA);\n\t}\n\n\tget inputsDisabled() {\n\t\treturn this._wrongHEX ? true : undefined;\n\t}\n\n\tget hexInputErrorState() {\n\t\treturn this._wrongHEX ? \"Error\" : undefined;\n\t}\n\n\tget _isDefaultPickerMode() {\n\t\treturn this.displayMode === ColorPickerDisplayMode.Default;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tmainColor: {\n\t\t\t\t\"background-color\": `rgb(${this._mainValue.r}, ${this._mainValue.g}, ${this._mainValue.b})`,\n\t\t\t},\n\t\t\tcircle: {\n\t\t\t\tleft: `${this._selectedCoordinates.x}px`,\n\t\t\t\ttop: `${this._selectedCoordinates.y}px`,\n\t\t\t},\n\t\t\tcolorSpan: {\n\t\t\t\t\"background-color\": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})`,\n\t\t\t},\n\t\t};\n\t}\n}\n\nColorPicker.define();\n\nexport default ColorPicker;\n"]}
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../src/ColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport {\n\tgetRGBColor,\n\tHSLToRGB,\n\tHEXToRGB,\n\tRGBToHSL,\n} from \"@ui5/webcomponents-base/dist/util/ColorConversion.js\";\nimport type {\n\tColorHSL,\n\tColorRGB,\n} from \"@ui5/webcomponents-base/dist/util/ColorConversion.js\";\nimport ColorPickerTemplate from \"./ColorPickerTemplate.js\";\nimport Input from \"./Input.js\";\nimport Slider from \"./Slider.js\";\nimport Label from \"./Label.js\";\n\nimport {\n\tCOLORPICKER_ALPHA_SLIDER,\n\tCOLORPICKER_HUE_SLIDER,\n\tCOLORPICKER_HEX,\n\tCOLORPICKER_RED,\n\tCOLORPICKER_GREEN,\n\tCOLORPICKER_BLUE,\n\tCOLORPICKER_ALPHA,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport ColorPickerCss from \"./generated/themes/ColorPicker.css.js\";\n\nconst PICKER_POINTER_WIDTH = 6.5;\n\ntype ColorCoordinates = {\n\tx: number,\n\ty: number,\n}\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-color-picker` allows users to choose any color and provides different input options for selecting colors.\n *\n * ### Usage\n *\n * #### When to use\n * Use the color picker if:\n *\n * -  users need to select any color freely.\n *\n * #### When not to use\n *\n * -  Users need to select one color from a predefined set of colors. Use the ColorPalette component instead.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/ColorPicker.js\";`\n * @constructor\n * @since 1.0.0-rc.12\n * @extends UI5Element\n * @public\n */\n\n@customElement({\n\ttag: \"ui5-color-picker\",\n\trenderer: jsxRenderer,\n\tformAssociated: true,\n\tstyles: ColorPickerCss,\n\ttemplate: ColorPickerTemplate,\n\tdependencies: [\n\t\tInput,\n\t\tSlider,\n\t\tLabel,\n\t],\n\tshadowRootOptions: { delegatesFocus: true },\n})\n/**\n * Fired when the the selected color is changed\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n})\nclass ColorPicker extends UI5Element implements IFormInputElement {\n\teventDetails!: {\n\t\tchange: void;\n\t}\n\t/**\n\t * Defines the currently selected color of the component.\n\t *\n\t * **Note**: use HEX, RGB, RGBA, HSV formats or a CSS color name when modifying this property.\n\t * @default \"rgba(255,255,255,1)\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"rgba(255,255,255,1)\";\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default undefined\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\tname?: string;\n\n\t/**\n\t * When set to `true`, the alpha slider and inputs for RGB values will not be displayed.\n\t * @default false\n\t * @public\n\t * @since 2.5.0\n\t */\n\t@property({ type: Boolean })\n\tsimplified = false;\n\n\t/**\n\t * Defines the HEX code of the currently selected color\n\t *\n\t * **Note**: If Alpha(transperancy) is set it is not included in this property. Use `color` property.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\thex = \"ffffff\";\n\n\t/**\n\t * Defines the current main color which is selected via the hue slider and is shown in the main color square.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_mainValue: ColorRGB;\n\n\t/**\n\t * Defines the currenty selected color from the main color section.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_value: ColorRGB = getRGBColor(this.value);\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_selectedCoordinates: ColorCoordinates;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\t_alpha = 1;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\t_hue = 0;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isSelectedColorChanged = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_isHueValueChanged = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_wrongHEX = false;\n\n\tselectedHue: number;\n\n\tmouseDown: boolean;\n\n\tmouseIn: boolean;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tasync formElementAnchor() {\n\t\treturn this.getFocusDomRefAsync();\n\t}\n\n\tget formFormattedValue() {\n\t\treturn this.value;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Bottom Right corner\n\t\tthis._selectedCoordinates = {\n\t\t\tx: 256 - PICKER_POINTER_WIDTH,\n\t\t\ty: 256 - PICKER_POINTER_WIDTH,\n\t\t};\n\n\t\t// Default main color is red\n\t\tthis._mainValue = {\n\t\t\tr: 255,\n\t\t\tg: 0,\n\t\t\tb: 0,\n\t\t};\n\n\t\tthis.selectedHue = 0;\n\n\t\tthis.mouseDown = false;\n\t\tthis.mouseIn = false;\n\t}\n\n\tonBeforeRendering() {\n\t\t// we have the color & ._mainValue properties here\n\t\tthis._value = getRGBColor(this.value);\n\t\tconst tempColor = `rgba(${this._value.r},${this._value.g},${this._value.b},1)`;\n\t\tthis._setHex();\n\t\tthis._setValues();\n\t\tthis.style.setProperty(getScopedVarName(\"--ui5_Color_Picker_Progress_Container_Color\"), tempColor);\n\t}\n\n\t_handleMouseDown(e: MouseEvent) {\n\t\tthis.mouseDown = true;\n\t\tthis.mouseIn = true;\n\t\tthis._changeSelectedColor(e.offsetX, e.offsetY);\n\t}\n\n\t_handleMouseUp() {\n\t\tthis.mouseDown = false;\n\t}\n\n\t_handleMouseOut(e: MouseEvent) {\n\t\tif (!this.mouseIn || !this.mouseDown) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst target = e.target as HTMLElement;\n\t\tconst offsetHeight: number = target.offsetHeight;\n\t\tconst offsetWidth: number = target.offsetWidth;\n\t\tconst isLeft: boolean = e.offsetX <= 0;\n\t\tconst isUp: boolean = e.offsetY <= 0;\n\t\tconst isDown: boolean = e.offsetY >= target.offsetHeight;\n\t\tconst isRight: boolean = e.offsetX >= target.offsetWidth;\n\n\t\tlet x: number,\n\t\t\ty: number;\n\n\t\tif (isLeft) {\n\t\t\tx = 0;\n\t\t} else if (isRight) {\n\t\t\t// Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object\n\t\t\tx = offsetWidth;\n\t\t} else {\n\t\t\tx = e.offsetX;\n\t\t}\n\n\t\tif (isUp) {\n\t\t\ty = 0;\n\t\t} else if (isDown) {\n\t\t\t// Note: - e.offsetWidth has been changed to e.target.offsetWidth as offsetWidth does not exist on the event object\n\t\t\ty = offsetHeight;\n\t\t} else {\n\t\t\ty = e.offsetY;\n\t\t}\n\n\t\tthis._changeSelectedColor(x, y);\n\t\tthis.mouseIn = false;\n\t\tthis.mouseDown = false;\n\t}\n\n\t_handleMouseMove(e: MouseEvent) {\n\t\tif (!this.mouseDown || !this.mouseIn) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._changeSelectedColor(e.offsetX, e.offsetY);\n\t}\n\n\t_handleAlphaInputFromSlider(e: CustomEvent) {\n\t\tconst aphaInputValue: string = (e.target as Input).value;\n\t\tthis._alpha = parseFloat(aphaInputValue);\n\t\tif (Number.isNaN(this._alpha)) {\n\t\t\tthis._alpha = 1;\n\t\t}\n\t\tthis._isHueValueChanged = true;\n\t\tthis._setColor(this._value);\n\t}\n\n\t_handleHueInput(e: CustomEvent) {\n\t\tthis.selectedHue = (e.target as Slider).value;\n\t\tthis._hue = this.selectedHue;\n\t\tthis._setMainColor(this._hue);\n\t\t// Idication that changes to the hue value triggered as a result of user pressing over the hue slider.\n\t\tthis._isHueValueChanged = true;\n\n\t\tconst x: number = this._selectedCoordinates.x + PICKER_POINTER_WIDTH;\n\t\tconst y: number = this._selectedCoordinates.y + PICKER_POINTER_WIDTH;\n\t\tconst tempColor = this._calculateColorFromCoordinates(x, y);\n\n\t\tif (tempColor) {\n\t\t\tthis._setColor(HSLToRGB(tempColor));\n\t\t}\n\t}\n\n\t_handleHEXChange(e: CustomEvent | KeyboardEvent) {\n\t\tconst hexRegex = new RegExp(\"^[<0-9 abcdef]+$\");\n\t\tconst input: Input = (e.target as Input);\n\t\tlet inputValueLowerCase = input.value.toLowerCase();\n\n\t\t// Shorthand Syntax\n\t\tif (inputValueLowerCase.length === 3) {\n\t\t\tinputValueLowerCase = `${inputValueLowerCase[0]}${inputValueLowerCase[0]}${inputValueLowerCase[1]}${inputValueLowerCase[1]}${inputValueLowerCase[2]}${inputValueLowerCase[2]}`;\n\t\t}\n\n\t\tconst isNewValueValid = inputValueLowerCase.length === 6 && hexRegex.test(inputValueLowerCase);\n\n\t\tif (isNewValueValid && input.value !== inputValueLowerCase) {\n\t\t\tthis._wrongHEX = false;\n\t\t\tinput.value = inputValueLowerCase;\n\t\t}\n\n\t\tif (inputValueLowerCase === this.hex) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.hex = inputValueLowerCase;\n\n\t\tif (!isNewValueValid) {\n\t\t\tthis._wrongHEX = true;\n\t\t} else {\n\t\t\tthis._wrongHEX = false;\n\t\t\tthis._setColor(HEXToRGB(this.hex));\n\t\t}\n\t}\n\n\t_handleRGBInputsChange(e: Event) {\n\t\tconst target = e.target as Input;\n\t\tconst targetValue = parseInt(target.value) || 0;\n\t\tlet tempColor;\n\t\tswitch (target.id) {\n\t\tcase \"red\":\n\t\t\ttempColor = { ...this._value, r: targetValue };\n\t\t\tbreak;\n\n\t\tcase \"green\":\n\t\t\ttempColor = { ...this._value, g: targetValue };\n\t\t\tbreak;\n\n\t\tcase \"blue\":\n\t\t\ttempColor = { ...this._value, b: targetValue };\n\t\t\tbreak;\n\t\tdefault:\n\t\t\ttempColor = { ...this._value };\n\t\t}\n\n\t\tthis._setColor(tempColor);\n\t}\n\n\t_setMainColor(hueValue: number) {\n\t\tconst hueValueMod = hueValue * 4.251;\n\n\t\tif (hueValueMod <= 255) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 255,\n\t\t\t\tg: hueValueMod,\n\t\t\t\tb: 0,\n\t\t\t};\n\t\t} else if (hueValueMod <= 510) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 255 - (hueValueMod - 255),\n\t\t\t\tg: 255,\n\t\t\t\tb: 0,\n\t\t\t};\n\t\t} else if (hueValueMod <= 765) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 0,\n\t\t\t\tg: 255,\n\t\t\t\tb: hueValueMod - 510,\n\t\t\t};\n\t\t} else if (hueValueMod <= 1020) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 0,\n\t\t\t\tg: 765 - (hueValueMod - 255),\n\t\t\t\tb: 255,\n\t\t\t};\n\t\t} else if (hueValueMod <= 1275) {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: hueValueMod - 1020,\n\t\t\t\tg: 0,\n\t\t\t\tb: 255,\n\t\t\t};\n\t\t} else {\n\t\t\tthis._mainValue = {\n\t\t\t\tr: 255,\n\t\t\t\tg: 0,\n\t\t\t\tb: 1275 - (hueValueMod - 255),\n\t\t\t};\n\t\t}\n\t}\n\n\t_handleAlphaChange(e: CustomEvent) {\n\t\tthis._handleAlphaInputFromSlider(e);\n\n\t\tthis._alpha = this._alpha < 0 ? 0 : this._alpha;\n\t\tthis._alpha = this._alpha > 1 ? 1 : this._alpha;\n\t}\n\n\t_changeSelectedColor(x: number, y: number) {\n\t\tthis._selectedCoordinates = {\n\t\t\tx: x - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle\n\t\t\ty: y - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle\n\t\t};\n\n\t\t// Idication that changes to the color settings are triggered as a result of user pressing over the main color section.\n\t\tthis._isSelectedColorChanged = true;\n\n\t\tconst tempColor = this._calculateColorFromCoordinates(x, y);\n\t\tif (tempColor) {\n\t\t\tthis._setColor(HSLToRGB(tempColor));\n\t\t}\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\tthis._handleHEXChange(e);\n\t\t}\n\t}\n\n\t_calculateColorFromCoordinates(x: number, y: number) {\n\t\t// By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider)\n\t\t// and HSL format, the color will be parsed to RGB\n\t\t// 0 ≤ H < 360\n\t\t// 4.251 because with 4.25 we get out of the colors range.\n\t\tconst h = this._hue;\n\n\t\t// 0 ≤ S ≤ 1\n\t\tconst s = 1 - +(Math.round(parseFloat((y / 256) + \"e+2\")) + \"e-2\"); // eslint-disable-line\n\n\t\t// 0 ≤ V ≤ 1\n\t\tconst l = +(Math.round(parseFloat((x / 256) + \"e+2\")) + \"e-2\"); // eslint-disable-line\n\n\t\tif (!s || !l) {\n\t\t\t// The event is finished out of the main color section\n\t\t\treturn;\n\t\t}\n\n\t\treturn {\n\t\t\th,\n\t\t\ts,\n\t\t\tl,\n\t\t};\n\t}\n\n\t_setColor(color: ColorRGB = { r: 0, g: 0, b: 0 }) {\n\t\tthis.value = `rgba(${color.r}, ${color.g}, ${color.b}, ${this._alpha})`;\n\t\tthis._wrongHEX = !this.isValidRGBColor(color);\n\t\tthis.fireDecoratorEvent(\"change\");\n\t}\n\n\tisValidRGBColor(color: ColorRGB) {\n\t\treturn color.r >= 0 && color.r <= 255 && color.g >= 0 && color.g <= 255 && color.b >= 0 && color.b <= 255;\n\t}\n\n\t_setHex() {\n\t\tlet red = this._value.r.toString(16),\n\t\t\tgreen = this._value.g.toString(16),\n\t\t\tblue = this._value.b.toString(16);\n\n\t\tif (red.length === 1) {\n\t\t\tred = `0${red}`;\n\t\t}\n\t\tif (green.length === 1) {\n\t\t\tgreen = `0${green}`;\n\t\t}\n\t\tif (blue.length === 1) {\n\t\t\tblue = `0${blue}`;\n\t\t}\n\n\t\tthis.hex = red + green + blue;\n\t}\n\n\t_setValues() {\n\t\tconst hslColours: ColorHSL = RGBToHSL(this._value);\n\t\tthis._selectedCoordinates = {\n\t\t\tx: ((Math.round(hslColours.l * 100) * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle\n\t\t\ty: (256 - (Math.round(hslColours.s * 100) * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle\n\t\t};\n\n\t\tif (this._isSelectedColorChanged) { // We shouldn't update the hue value when user presses over the main color section.\n\t\t\tthis._isSelectedColorChanged = false;\n\t\t} else if (this._isHueValueChanged) { // We shouldn't recalculate the hue value when user changes the hue slider.\n\t\t\tthis._isHueValueChanged = false;\n\t\t\tthis._hue = this.selectedHue ? this.selectedHue : this._hue;\n\t\t} else {\n\t\t\tthis._hue = Math.round(hslColours.h);\n\t\t}\n\n\t\tthis._setMainColor(this._hue);\n\t}\n\n\tget hueSliderLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_HUE_SLIDER);\n\t}\n\n\tget alphaSliderLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA_SLIDER);\n\t}\n\n\tget hexInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_HEX);\n\t}\n\n\tget redInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_RED);\n\t}\n\n\tget greenInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_GREEN);\n\t}\n\n\tget blueInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_BLUE);\n\t}\n\n\tget alphaInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA);\n\t}\n\n\tget inputsDisabled() {\n\t\treturn this._wrongHEX ? true : undefined;\n\t}\n\n\tget hexInputErrorState(): `${ValueState}` {\n\t\treturn this._wrongHEX ? \"Negative\" : \"None\";\n\t}\n\n\tget _isDefaultPickerMode() {\n\t\treturn !this.simplified;\n\t}\n\n\tget styles() {\n\t\t// Remove after deleting the hbs template as the styles are added via the jsx template\n\t\treturn {\n\t\t\tmainColor: {\n\t\t\t\t\"background-color\": `rgb(${this._mainValue.r}, ${this._mainValue.g}, ${this._mainValue.b})`,\n\t\t\t},\n\t\t\tcircle: {\n\t\t\t\tleft: `${this._selectedCoordinates.x}px`,\n\t\t\t\ttop: `${this._selectedCoordinates.y}px`,\n\t\t\t},\n\t\t\tcolorSpan: {\n\t\t\t\t\"background-color\": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})`,\n\t\t\t},\n\t\t};\n\t}\n}\n\nColorPicker.define();\n\nexport default ColorPicker;\n"]}

package/dist/ColorPickerTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ColorPicker from "./ColorPicker.js";
+export default function ColorPickerTemplate(this: ColorPicker): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ColorPickerTemplate.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Label from "./Label.js";
+import Slider from "./Slider.js";
+import Input from "./Input.js";
+export default function ColorPickerTemplate() {
+    return (_jsxs("section", { class: "ui5-color-picker-root", children: [_jsx("div", { class: "ui5-color-picker-main-color", style: { "background-color": `rgb(${this._mainValue.r}, ${this._mainValue.g}, ${this._mainValue.b})` }, onMouseDown: this._handleMouseDown, onMouseUp: this._handleMouseUp, onMouseMove: this._handleMouseMove, onMouseOut: this._handleMouseOut, children: _jsx("div", { class: "ui5-color-picker-circle", style: {
+                        left: `${this._selectedCoordinates.x}px`,
+                        top: `${this._selectedCoordinates.y}px`,
+                    } }) }), _jsxs("div", { class: "ui5-color-picker-sliders-wrapper", children: [_jsx(Slider, { disabled: this.inputsDisabled, class: "ui5-color-picker-hue-slider", min: 0, max: 360, step: 1, value: this._hue, accessibleName: this.hueSliderLabel, showTooltip: true, onInput: this._handleHueInput }), this._isDefaultPickerMode &&
+                        _jsx(Slider, { disabled: this.inputsDisabled, class: "ui5-color-picker-alpha-slider", min: 0, max: 1, step: 0.01, value: this._alpha, accessibleName: this.alphaSliderLabel, showTooltip: true, onInput: this._handleAlphaInputFromSlider })] }), _jsxs("div", { class: "ui5-color-picker-current-color", children: [_jsxs("div", { class: "ui5-color-picker-colors-wrapper", children: [_jsx("span", { class: "ui5-color-picker-white" }), _jsx("span", { class: "ui5-color-picker-color", children: _jsx("div", { class: "ui5-color-picker-color-inner", style: { "background-color": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})` } }) })] }), _jsxs("div", { class: "ui5-color-picker-hex-input-wrapper", children: [_jsx(Label, { children: "Hex" }), _jsx(Input, { class: "ui5-color-picker-hex-input", value: this.hex, onKeyDown: this._onkeydown, accessibleName: this.hexInputLabel, onChange: this._handleHEXChange, valueState: this.hexInputErrorState })] })] }), this._isDefaultPickerMode &&
+                _jsxs("div", { class: "ui5-color-picker-rgb-wrapper", "onui5-change": this._handleRGBInputsChange, children: [_jsxs("div", { class: "ui5-color-picker-rgb", children: [_jsx(Input, { id: "red", class: "ui5-color-picker-rgb-input", disabled: this.inputsDisabled, accessibleName: this.redInputLabel, value: String(this._value.r) }), _jsx(Label, { children: "R" })] }), _jsxs("div", { class: "ui5-color-picker-rgb", children: [_jsx(Input, { id: "green", class: "ui5-color-picker-rgb-input", disabled: this.inputsDisabled, accessibleName: this.greenInputLabel, value: String(this._value.g) }), _jsx(Label, { children: "G" })] }), _jsxs("div", { class: "ui5-color-picker-rgb", children: [_jsx(Input, { id: "blue", class: "ui5-color-picker-rgb-input", disabled: this.inputsDisabled, accessibleName: this.blueInputLabel, value: String(this._value.b) }), _jsx(Label, { children: "B" })] }), _jsxs("div", { class: "ui5-color-picker-rgb", children: [_jsx(Input, { id: "alpha", disabled: this.inputsDisabled, class: "ui5-color-picker-rgb-input", value: String(this._alpha), accessibleName: this.alphaInputLabel, onChange: this._handleAlphaChange }), _jsx(Label, { children: "A" })] })] })] }));
+}
+//# sourceMappingURL=ColorPickerTemplate.js.map

package/dist/ColorPickerTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerTemplate.js","sourceRoot":"","sources":["../src/ColorPickerTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type ColorPicker from \"./ColorPicker.js\";\nimport Label from \"./Label.js\";\nimport Slider from \"./Slider.js\";\nimport Input from \"./Input.js\";\n\nexport default function ColorPickerTemplate(this: ColorPicker) {\n\treturn (\n\t\t<section class=\"ui5-color-picker-root\">\n\t\t\t<div\n\t\t\t\tclass=\"ui5-color-picker-main-color\"\n\t\t\t\tstyle={{ \"background-color\": `rgb(${this._mainValue.r}, ${this._mainValue.g}, ${this._mainValue.b})` }}\n\t\t\t\tonMouseDown={this._handleMouseDown}\n\t\t\t\tonMouseUp={this._handleMouseUp}\n\t\t\t\tonMouseMove={this._handleMouseMove}\n\t\t\t\tonMouseOut={this._handleMouseOut}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ui5-color-picker-circle\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tleft: `${this._selectedCoordinates.x}px`,\n\t\t\t\t\t\ttop: `${this._selectedCoordinates.y}px`,\n\t\t\t\t\t}}\n\t\t\t\t></div>\n\t\t\t</div>\n\n\t\t\t<div class=\"ui5-color-picker-sliders-wrapper\">\n\t\t\t\t<Slider\n\t\t\t\t\tdisabled={this.inputsDisabled}\n\t\t\t\t\tclass=\"ui5-color-picker-hue-slider\"\n\t\t\t\t\tmin={0}\n\t\t\t\t\tmax={360}\n\t\t\t\t\tstep={1}\n\t\t\t\t\tvalue={this._hue}\n\t\t\t\t\taccessibleName={this.hueSliderLabel}\n\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\tonInput={this._handleHueInput}\n\t\t\t\t/>\n\n\t\t\t\t{this._isDefaultPickerMode &&\n\t\t\t\t\t<Slider\n\t\t\t\t\t\tdisabled={this.inputsDisabled}\n\t\t\t\t\t\tclass=\"ui5-color-picker-alpha-slider\"\n\t\t\t\t\t\tmin={0}\n\t\t\t\t\t\tmax={1}\n\t\t\t\t\t\tstep={0.01}\n\t\t\t\t\t\tvalue={this._alpha}\n\t\t\t\t\t\taccessibleName={this.alphaSliderLabel}\n\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\tonInput={this._handleAlphaInputFromSlider}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div class=\"ui5-color-picker-current-color\">\n\t\t\t\t<div class=\"ui5-color-picker-colors-wrapper\">\n\t\t\t\t\t<span class=\"ui5-color-picker-white\"></span>\n\t\t\t\t\t<span class=\"ui5-color-picker-color\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"ui5-color-picker-color-inner\"\n\t\t\t\t\t\t\tstyle={{ \"background-color\": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})` }}\n\t\t\t\t\t\t></div>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"ui5-color-picker-hex-input-wrapper\">\n\t\t\t\t\t<Label>Hex</Label>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tclass=\"ui5-color-picker-hex-input\"\n\t\t\t\t\t\tvalue={this.hex}\n\t\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\t\taccessibleName={this.hexInputLabel}\n\t\t\t\t\t\tonChange={this._handleHEXChange}\n\t\t\t\t\t\tvalueState={this.hexInputErrorState}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{this._isDefaultPickerMode &&\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ui5-color-picker-rgb-wrapper\"\n\t\t\t\t\tonui5-change={this._handleRGBInputsChange}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"ui5-color-picker-rgb\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tid=\"red\"\n\t\t\t\t\t\t\tclass=\"ui5-color-picker-rgb-input\"\n\t\t\t\t\t\t\tdisabled={this.inputsDisabled}\n\t\t\t\t\t\t\taccessibleName={this.redInputLabel}\n\t\t\t\t\t\t\tvalue={String(this._value.r)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Label>R</Label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"ui5-color-picker-rgb\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tid=\"green\"\n\t\t\t\t\t\t\tclass=\"ui5-color-picker-rgb-input\"\n\t\t\t\t\t\t\tdisabled={this.inputsDisabled}\n\t\t\t\t\t\t\taccessibleName={this.greenInputLabel}\n\t\t\t\t\t\t\tvalue={String(this._value.g)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Label>G</Label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"ui5-color-picker-rgb\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tid=\"blue\"\n\t\t\t\t\t\t\tclass=\"ui5-color-picker-rgb-input\"\n\t\t\t\t\t\t\tdisabled={this.inputsDisabled}\n\t\t\t\t\t\t\taccessibleName={this.blueInputLabel}\n\t\t\t\t\t\t\tvalue={String(this._value.b)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Label>B</Label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"ui5-color-picker-rgb\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tid=\"alpha\"\n\t\t\t\t\t\t\tdisabled={this.inputsDisabled}\n\t\t\t\t\t\t\tclass=\"ui5-color-picker-rgb-input\"\n\t\t\t\t\t\t\tvalue={String(this._alpha)}\n\t\t\t\t\t\t\taccessibleName={this.alphaInputLabel}\n\t\t\t\t\t\t\tonChange={this._handleAlphaChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Label>A</Label>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</section>\n\t);\n}\n"]}

package/dist/ComboBox.js

@@ -10,7 +10,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isPhone, isAndroid } from "@ui5/webcomponents-base/dist/Device.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
@@ -30,7 +30,7 @@ import { isBackSpace, isDelete, isShow, isUp, isDown, isEnter, isEscape, isTabNe
 import * as Filters from "./Filters.js";
 import { VALUE_STATE_SUCCESS, VALUE_STATE_ERROR, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_INFORMATION, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_WARNING, INPUT_SUGGESTIONS_TITLE, COMBOBOX_AVAILABLE_OPTIONS, SELECT_OPTIONS, LIST_ITEM_POSITION, LIST_ITEM_GROUP_HEADER, INPUT_CLEAR_ICON_ACC_NAME, FORM_TEXTFIELD_REQUIRED, } from "./generated/i18n/i18n-defaults.js";
 // Templates
-import ComboBoxTemplate from "./generated/templates/ComboBoxTemplate.lit.js";
+import ComboBoxTemplate from "./ComboBoxTemplate.js";
 // Styles
 import ComboBoxCss from "./generated/themes/ComboBox.css.js";
 import ComboBoxPopoverCss from "./generated/themes/ComboBoxPopover.css.js";
@@ -1057,7 +1057,7 @@ ComboBox = ComboBox_1 = __decorate([
         tag: "ui5-combobox",
         languageAware: true,
         formAssociated: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [
             ComboBoxCss,
             ResponsivePopoverCommonCss,