@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/ColorPalettePopoverTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPalettePopoverTemplate.js","sourceRoot":"","sources":["../src/ColorPalettePopoverTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,2BAA2B;IAClD,OAAO,CACN,MAAC,iBAAiB,IACjB,SAAS,EAAE,IAAI,EACf,oBAAoB,EAAE,IAAI,EAC1B,SAAS,EAAC,QAAQ,EAClB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,MAAM,EAAE,IAAI,CAAC,WAAW,aAExB,cAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,YACvC,KAAC,KAAK,IAAC,KAAK,EAAC,IAAI,EAAC,YAAY,EAAC,MAAM,YACnC,IAAI,CAAC,kBAAkB,GACjB,GACH,EAEN,wBACC,KAAC,YAAY,IACZ,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,eAAe,YAEhC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACpC,eAAM,IAAI,EAAE,KAAK,CAAC,eAAe,GAAS,CAC1C,GACa,GACV,EAEN,cAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,YACvC,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,YAEzB,IAAI,CAAC,kBAAkB,GAChB,GACJ,IACa,CACpB,CAAC;AACH,CAAC","sourcesContent":["import type ColorPalettePopover from \"./ColorPalettePopover.js\";\nimport Title from \"./Title.js\";\nimport Button from \"./Button.js\";\nimport ColorPalette from \"./ColorPalette.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\n\nexport default function ColorPalettePopoverTemplate(this: ColorPalettePopover) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\thideArrow={true}\n\t\t\tcontentOnlyOnDesktop={true}\n\t\t\tplacement=\"Bottom\"\n\t\t\topener={this.opener}\n\t\t\topen={this._open}\n\t\t\tonClose={this.onAfterClose}\n\t\t\tonOpen={this.onAfterOpen}\n\t\t>\n\t\t\t<div slot=\"header\" class=\"ui5-cp-header\">\n\t\t\t\t<Title level=\"H1\" wrappingType=\"None\">\n\t\t\t\t\t{this._colorPaletteTitle}\n\t\t\t\t</Title>\n\t\t\t</div>\n\n\t\t\t<div>\n\t\t\t\t<ColorPalette\n\t\t\t\t\tshowMoreColors={this.showMoreColors}\n\t\t\t\t\tshowRecentColors={this.showRecentColors}\n\t\t\t\t\tshowDefaultColor={this.showDefaultColor}\n\t\t\t\t\tdefaultColor={this.defaultColor}\n\t\t\t\t\tpopupMode={true}\n\t\t\t\t\tonItemClick={this.onSelectedColor}\n\t\t\t\t>\n\t\t\t\t\t{this.colorPaletteColors.map(color =>\n\t\t\t\t\t\t<slot name={color._individualSlot}></slot>\n\t\t\t\t\t)}\n\t\t\t\t</ColorPalette>\n\t\t\t</div>\n\n\t\t\t<div slot=\"footer\" class=\"ui5-cp-footer\">\n\t\t\t\t<Button\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this.closePopover}\n\t\t\t\t>\n\t\t\t\t\t{this._cancelButtonLabel}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</ResponsivePopover>\n\t);\n}\n"]}
+{"version":3,"file":"ColorPalettePopoverTemplate.js","sourceRoot":"","sources":["../src/ColorPalettePopoverTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,2BAA2B;IAClD,OAAO,CACN,MAAC,iBAAiB,IACjB,SAAS,EAAE,IAAI,EACf,oBAAoB,EAAE,IAAI,EAC1B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,cAAc,EAAE,IAAI,CAAC,kBAAkB,aAEvC,cAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,YACvC,KAAC,KAAK,IAAC,KAAK,EAAC,IAAI,EAAC,YAAY,EAAC,MAAM,YACnC,IAAI,CAAC,kBAAkB,GACjB,GACH,EAEN,wBACC,KAAC,YAAY,IACZ,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,eAAe,YAEhC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACpC,eAAM,IAAI,EAAE,KAAK,CAAC,eAAe,GAAS,CAC1C,GACa,GACV,EAEN,cAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,YACvC,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,YAEzB,IAAI,CAAC,kBAAkB,GAChB,GACJ,IACa,CACpB,CAAC;AACH,CAAC","sourcesContent":["import type ColorPalettePopover from \"./ColorPalettePopover.js\";\nimport Title from \"./Title.js\";\nimport Button from \"./Button.js\";\nimport ColorPalette from \"./ColorPalette.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\n\nexport default function ColorPalettePopoverTemplate(this: ColorPalettePopover) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\thideArrow={true}\n\t\t\tcontentOnlyOnDesktop={true}\n\t\t\tplacement={this.placement}\n\t\t\topener={this.opener}\n\t\t\topen={this._open}\n\t\t\tonClose={this.onAfterClose}\n\t\t\tonOpen={this.onAfterOpen}\n\t\t\taccessibleName={this._colorPaletteTitle}\n\t\t>\n\t\t\t<div slot=\"header\" class=\"ui5-cp-header\">\n\t\t\t\t<Title level=\"H1\" wrappingType=\"None\">\n\t\t\t\t\t{this._colorPaletteTitle}\n\t\t\t\t</Title>\n\t\t\t</div>\n\n\t\t\t<div>\n\t\t\t\t<ColorPalette\n\t\t\t\t\tshowMoreColors={this.showMoreColors}\n\t\t\t\t\tshowRecentColors={this.showRecentColors}\n\t\t\t\t\tshowDefaultColor={this.showDefaultColor}\n\t\t\t\t\tdefaultColor={this.defaultColor}\n\t\t\t\t\taccessibleName={this.accessibleName}\n\t\t\t\t\taccessibleNameRef={this.accessibleNameRef}\n\t\t\t\t\tpopupMode={true}\n\t\t\t\t\tonItemClick={this.onSelectedColor}\n\t\t\t\t>\n\t\t\t\t\t{this.colorPaletteColors.map(color =>\n\t\t\t\t\t\t<slot name={color._individualSlot}></slot>\n\t\t\t\t\t)}\n\t\t\t\t</ColorPalette>\n\t\t\t</div>\n\n\t\t\t<div slot=\"footer\" class=\"ui5-cp-footer\">\n\t\t\t\t<Button\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this.closePopover}\n\t\t\t\t>\n\t\t\t\t\t{this._cancelButtonLabel}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</ResponsivePopover>\n\t);\n}\n"]}

package/dist/ColorPaletteTemplate.js

@@ -7,8 +7,8 @@ export default function ColorPaletteTemplate() {
                     "ui5-cp-root": true,
                     "ui5-cp-root-phone": isPhone(),
                 }, onClick: this._onclick, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, onMouseDown: this._onmousedown, children: [this.showDefaultColor &&
-                        _jsxs("div", { class: "ui5-cp-default-color-button-wrapper", children: [_jsx(Button, { class: "ui5-cp-default-color-button", design: "Transparent", onClick: this._onDefaultColorClick, onKeyUp: this._onDefaultColorKeyUp, onKeyDown: this._onDefaultColorKeyDown, children: this.colorPaletteDefaultColorText }), _jsx("div", { class: "ui5-cp-separator" })] }), _jsx("div", { class: "ui5-cp-item-container", role: "region", "aria-label": this.colorContainerLabel, onKeyDown: this._onColorContainerKeyDown, children: this.displayedColors.map(color => _jsx("slot", { name: color._individualSlot })) }), this.showMoreColors &&
+                        _jsxs("div", { class: "ui5-cp-default-color-button-wrapper", children: [_jsx(Button, { class: "ui5-cp-default-color-button", design: "Transparent", onClick: this._onDefaultColorClick, onKeyUp: this._onDefaultColorKeyUp, onKeyDown: this._onDefaultColorKeyDown, children: this.colorPaletteDefaultColorText }), _jsx("div", { class: "ui5-cp-separator" })] }), _jsx("div", { class: "ui5-cp-item-container", role: "group", "aria-label": this.colorContainerLabel, onKeyDown: this._onColorContainerKeyDown, children: this.displayedColors.map(color => _jsx("slot", { name: color._individualSlot })) }), this.showMoreColors &&
                         _jsxs("div", { class: "ui5-cp-more-colors-wrapper", children: [_jsx("div", { class: "ui5-cp-separator" }), _jsx(Button, { design: "Transparent", class: "ui5-cp-more-colors", onClick: this._openMoreColorsDialog, onKeyDown: this._onMoreColorsKeyDown, children: this.colorPaletteMoreColorsText })] }), this.showRecentColors &&
-                        _jsxs("div", { class: "ui5-cp-recent-colors-wrapper", children: [_jsx("div", { class: "ui5-cp-separator" }), _jsx("div", { class: "ui5-cp-recent-colors-container", onKeyDown: this._onRecentColorsContainerKeyDown, children: this.recentColors.map(color => _jsx(ColorPaletteItem, { value: color })) })] })] }), this.showMoreColors && this.showMoreColorsTemplate?.call(this)] }));
+                        _jsxs("div", { class: "ui5-cp-recent-colors-wrapper", children: [_jsx("div", { class: "ui5-cp-separator" }), _jsx("div", { class: "ui5-cp-recent-colors-container", onKeyDown: this._onRecentColorsContainerKeyDown, children: this.recentColors.map((color, index) => _jsx(ColorPaletteItem, { value: color, index: index + 1 })) })] })] }), this.showMoreColors && this.showMoreColorsTemplate?.call(this)] }));
 }
 //# sourceMappingURL=ColorPaletteTemplate.js.map

package/dist/ColorPaletteTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPaletteTemplate.js","sourceRoot":"","sources":["../src/ColorPaletteTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AAGjE,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,CACN,8BACC,eACC,KAAK,EAAE;oBACN,aAAa,EAAE,IAAI;oBACnB,mBAAmB,EAAE,OAAO,EAAE;iBAC9B,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,aAE7B,IAAI,CAAC,gBAAgB;wBACrB,eAAK,KAAK,EAAC,qCAAqC,aAC/C,KAAC,MAAM,IACN,KAAK,EAAC,6BAA6B,EACnC,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,sBAAsB,YAErC,IAAI,CAAC,4BAA4B,GAC1B,EACT,cAAK,KAAK,EAAC,kBAAkB,GAAO,IAC/B,EAEP,cAAK,KAAK,EAAC,uBAAuB,EACjC,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,mBAAmB,EACpC,SAAS,EAAE,IAAI,CAAC,wBAAwB,YAEvC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACjC,eAAM,IAAI,EAAE,KAAK,CAAC,eAAe,GAAS,CAC1C,GACI,EAEL,IAAI,CAAC,cAAc;wBACnB,eAAK,KAAK,EAAC,4BAA4B,aACtC,cAAK,KAAK,EAAC,kBAAkB,GAAO,EACpC,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,SAAS,EAAE,IAAI,CAAC,oBAAoB,YAEnC,IAAI,CAAC,0BAA0B,GACxB,IACJ,EAGN,IAAI,CAAC,gBAAgB;wBACrB,eAAK,KAAK,EAAC,8BAA8B,aACxC,cAAK,KAAK,EAAC,kBAAkB,GAAO,EACpC,cAAK,KAAK,EAAC,gCAAgC,EAAC,SAAS,EAAE,IAAI,CAAC,+BAA+B,YACzF,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAC9B,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,GAAG,CACjC,GACI,IACD,IAEF,EAEJ,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,IAAI,CAAC,IAC9D,CACH,CAAC;AACH,CAAC","sourcesContent":["import { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport type ColorPalette from \"./ColorPalette.js\";\nimport Button from \"./Button.js\";\nimport ColorPaletteItem from \"./ColorPaletteItem.js\";\n\nexport default function ColorPaletteTemplate(this: ColorPalette) {\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-cp-root\": true,\n\t\t\t\t\t\"ui5-cp-root-phone\": isPhone(),\n\t\t\t\t}}\n\t\t\t\tonClick={this._onclick}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t>\n\t\t\t\t{this.showDefaultColor &&\n\t\t\t\t\t<div class=\"ui5-cp-default-color-button-wrapper\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclass=\"ui5-cp-default-color-button\"\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\tonClick={this._onDefaultColorClick}\n\t\t\t\t\t\t\tonKeyUp={this._onDefaultColorKeyUp}\n\t\t\t\t\t\t\tonKeyDown={this._onDefaultColorKeyDown}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.colorPaletteDefaultColorText}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<div class=\"ui5-cp-separator\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"ui5-cp-item-container\"\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-label={this.colorContainerLabel}\n\t\t\t\t\tonKeyDown={this._onColorContainerKeyDown}\n\t\t\t\t>\n\t\t\t\t\t{this.displayedColors.map(color =>\n\t\t\t\t\t\t<slot name={color._individualSlot}></slot>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{this.showMoreColors &&\n\t\t\t\t\t<div class=\"ui5-cp-more-colors-wrapper\">\n\t\t\t\t\t\t<div class=\"ui5-cp-separator\"></div>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\tclass=\"ui5-cp-more-colors\"\n\t\t\t\t\t\t\tonClick={this._openMoreColorsDialog}\n\t\t\t\t\t\t\tonKeyDown={this._onMoreColorsKeyDown}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.colorPaletteMoreColorsText}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{this.showRecentColors &&\n\t\t\t\t\t<div class=\"ui5-cp-recent-colors-wrapper\">\n\t\t\t\t\t\t<div class=\"ui5-cp-separator\"></div>\n\t\t\t\t\t\t<div class=\"ui5-cp-recent-colors-container\" onKeyDown={this._onRecentColorsContainerKeyDown}>\n\t\t\t\t\t\t\t{this.recentColors.map(color =>\n\t\t\t\t\t\t\t\t<ColorPaletteItem value={color}/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t{ this.showMoreColors && this.showMoreColorsTemplate?.call(this) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"file":"ColorPaletteTemplate.js","sourceRoot":"","sources":["../src/ColorPaletteTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AAGjE,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,CACN,8BACC,eACC,KAAK,EAAE;oBACN,aAAa,EAAE,IAAI;oBACnB,mBAAmB,EAAE,OAAO,EAAE;iBAC9B,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,aAE7B,IAAI,CAAC,gBAAgB;wBACrB,eAAK,KAAK,EAAC,qCAAqC,aAC/C,KAAC,MAAM,IACN,KAAK,EAAC,6BAA6B,EACnC,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,sBAAsB,YAErC,IAAI,CAAC,4BAA4B,GAC1B,EACT,cAAK,KAAK,EAAC,kBAAkB,GAAO,IAC/B,EAEP,cAAK,KAAK,EAAC,uBAAuB,EACjC,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,mBAAmB,EACpC,SAAS,EAAE,IAAI,CAAC,wBAAwB,YAEvC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACjC,eAAM,IAAI,EAAE,KAAK,CAAC,eAAe,GAAS,CAC1C,GACI,EAEL,IAAI,CAAC,cAAc;wBACnB,eAAK,KAAK,EAAC,4BAA4B,aACtC,cAAK,KAAK,EAAC,kBAAkB,GAAO,EACpC,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,SAAS,EAAE,IAAI,CAAC,oBAAoB,YAEnC,IAAI,CAAC,0BAA0B,GACxB,IACJ,EAGN,IAAI,CAAC,gBAAgB;wBACrB,eAAK,KAAK,EAAC,8BAA8B,aACxC,cAAK,KAAK,EAAC,kBAAkB,GAAO,EACpC,cAAK,KAAK,EAAC,gCAAgC,EAAC,SAAS,EAAE,IAAI,CAAC,+BAA+B,YACzF,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CACvC,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,GAAG,CACnD,GACI,IACD,IAEF,EAEJ,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,IAAI,CAAC,IAC9D,CACH,CAAC;AACH,CAAC","sourcesContent":["import { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport type ColorPalette from \"./ColorPalette.js\";\nimport Button from \"./Button.js\";\nimport ColorPaletteItem from \"./ColorPaletteItem.js\";\n\nexport default function ColorPaletteTemplate(this: ColorPalette) {\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-cp-root\": true,\n\t\t\t\t\t\"ui5-cp-root-phone\": isPhone(),\n\t\t\t\t}}\n\t\t\t\tonClick={this._onclick}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t>\n\t\t\t\t{this.showDefaultColor &&\n\t\t\t\t\t<div class=\"ui5-cp-default-color-button-wrapper\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclass=\"ui5-cp-default-color-button\"\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\tonClick={this._onDefaultColorClick}\n\t\t\t\t\t\t\tonKeyUp={this._onDefaultColorKeyUp}\n\t\t\t\t\t\t\tonKeyDown={this._onDefaultColorKeyDown}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.colorPaletteDefaultColorText}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<div class=\"ui5-cp-separator\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"ui5-cp-item-container\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\taria-label={this.colorContainerLabel}\n\t\t\t\t\tonKeyDown={this._onColorContainerKeyDown}\n\t\t\t\t>\n\t\t\t\t\t{this.displayedColors.map(color =>\n\t\t\t\t\t\t<slot name={color._individualSlot}></slot>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{this.showMoreColors &&\n\t\t\t\t\t<div class=\"ui5-cp-more-colors-wrapper\">\n\t\t\t\t\t\t<div class=\"ui5-cp-separator\"></div>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\tclass=\"ui5-cp-more-colors\"\n\t\t\t\t\t\t\tonClick={this._openMoreColorsDialog}\n\t\t\t\t\t\t\tonKeyDown={this._onMoreColorsKeyDown}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.colorPaletteMoreColorsText}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{this.showRecentColors &&\n\t\t\t\t\t<div class=\"ui5-cp-recent-colors-wrapper\">\n\t\t\t\t\t\t<div class=\"ui5-cp-separator\"></div>\n\t\t\t\t\t\t<div class=\"ui5-cp-recent-colors-container\" onKeyDown={this._onRecentColorsContainerKeyDown}>\n\t\t\t\t\t\t\t{this.recentColors.map((color, index) =>\n\t\t\t\t\t\t\t\t<ColorPaletteItem value={color} index={index + 1}/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t{ this.showMoreColors && this.showMoreColorsTemplate?.call(this) }\n\t\t</>\n\t);\n}\n"]}

package/dist/ColorPicker.d.ts

@@ -72,6 +72,20 @@ declare class ColorPicker extends UI5Element implements IFormInputElement {
      * @since 2.5.0
      */
     simplified: boolean;
+    /**
+     * Defines the accessible name of the component.
+     * @default undefined
+     * @public
+     * @since 2.20.0
+     */
+    accessibleName?: string;
+    /**
+     * Receives id(or many ids) of the elements that label the component.
+     * @default undefined
+     * @public
+     * @since 2.20.0
+     */
+    accessibleNameRef?: string;
     /**
      * Defines the current main color which is selected via the hue slider and is shown in the main color square.
      * @private
@@ -90,6 +104,11 @@ declare class ColorPicker extends UI5Element implements IFormInputElement {
      * @private
      */
     _alpha: number;
+    /**
+     * this is the alpha value in the input only while editing, since it can container invalid/empty values temporarily
+     * @private
+     */
+    _alphaTemp?: string;
     /**
      * @private
      */
@@ -113,10 +132,12 @@ declare class ColorPicker extends UI5Element implements IFormInputElement {
     selectedHue: number;
     mouseDown: boolean;
     mouseIn: boolean;
+    _mainColorRef?: HTMLElement;
     static i18nBundle: I18nBundle;
     formElementAnchor(): Promise<HTMLElement | undefined>;
     get formFormattedValue(): string;
     constructor();
+    get _boxSize(): number;
     onBeforeRendering(): void;
     _handleMouseDown(e: MouseEvent): void;
     _handleMouseUp(): void;
@@ -139,6 +160,8 @@ declare class ColorPicker extends UI5Element implements IFormInputElement {
     _setValue(color: string): void;
     _updateColorGrid(): void;
     _isColorValueEqual(value: ColorRGB): boolean;
+    get colorPickerLabel(): string;
+    get sliderGroupLabel(): string;
     get hueSliderLabel(): string;
     get alphaSliderLabel(): string;
     get hexInputLabel(): string;
@@ -149,6 +172,8 @@ declare class ColorPicker extends UI5Element implements IFormInputElement {
     get saturationInputLabel(): string;
     get lightInputLabel(): string;
     get alphaInputLabel(): string;
+    get percentageLabel(): string;
+    get colorFieldsAnnouncementText(): string;
     get toggleModeTooltip(): string;
     get inputsDisabled(): true | undefined;
     get hexInputErrorState(): `${ValueState}`;

package/dist/ColorPicker.js

@@ -8,19 +8,23 @@ var ColorPicker_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.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 { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { getRGBColor, getAlpha, } from "@ui5/webcomponents-base/dist/util/ColorConversion.js";
 import "@ui5/webcomponents-icons/dist/expand.js";
 import ColorValue from "./colorpicker-utils/ColorValue.js";
 import ColorPickerTemplate from "./ColorPickerTemplate.js";
-import { COLORPICKER_ALPHA_SLIDER, COLORPICKER_HUE_SLIDER, COLORPICKER_HEX, COLORPICKER_RED, COLORPICKER_GREEN, COLORPICKER_BLUE, COLORPICKER_ALPHA, COLORPICKER_SATURATION, COLORPICKER_LIGHT, COLORPICKER_HUE, COLORPICKER_TOGGLE_MODE_TOOLTIP, } from "./generated/i18n/i18n-defaults.js";
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
+import { COLORPICKER_LABEL, COLORPICKER_SLIDER_GROUP, COLORPICKER_ALPHA_SLIDER, COLORPICKER_HUE_SLIDER, COLORPICKER_HEX, COLORPICKER_RED, COLORPICKER_GREEN, COLORPICKER_BLUE, COLORPICKER_ALPHA, COLORPICKER_SATURATION, COLORPICKER_LIGHT, COLORPICKER_HUE, COLORPICKER_TOGGLE_MODE_TOOLTIP, COLORPICKER_PERCENTAGE, COLORPICKER_COLOR_MODE_CHANGED, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import ColorPickerCss from "./generated/themes/ColorPicker.css.js";
-const PICKER_POINTER_WIDTH = 6.5;
+// Fallback box width in CSS pixels at 16px root font-size (16rem).
+const DEFAULT_BOX_SIZE = 256;
 /**
  * @class
  *
@@ -95,10 +99,11 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
          */
         this._displayHSL = false;
         this._colorValue = new ColorValue();
-        // Bottom Right corner
+        // Bottom-right corner of the picker box (white = l=100%, s=0%)
+        // Stored as percentages so positioning is independent of root font-size.
         this._selectedCoordinates = {
-            x: 256 - PICKER_POINTER_WIDTH,
-            y: 256 - PICKER_POINTER_WIDTH,
+            x: 100,
+            y: 100,
         };
         // Default main color is red
         this._mainValue = {
@@ -110,6 +115,11 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
         this.mouseDown = false;
         this.mouseIn = false;
     }
+    get _boxSize() {
+        // clientWidth excludes border, matching the coordinate space of MouseEvent.offsetX/Y
+        // which is measured from the element's padding edge.
+        return this._mainColorRef?.clientWidth || DEFAULT_BOX_SIZE;
+    }
     onBeforeRendering() {
         const valueAsRGB = getRGBColor(this.value);
         if (!this._isColorValueEqual(valueAsRGB)) {
@@ -122,7 +132,7 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
         }
         const tempColor = this._colorValue.toRGBString();
         this._updateColorGrid();
-        this.style.setProperty(getScopedVarName("--ui5_Color_Picker_Progress_Container_Color"), tempColor);
+        this.style.setProperty("--ui5_Color_Picker_Progress_Container_Color", tempColor);
     }
     _handleMouseDown(e) {
         this.mouseDown = true;
@@ -176,6 +186,7 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
     }
     _handleAlphaInput(e) {
         const aphaInputValue = String(e.currentTarget.value);
+        this._alphaTemp = aphaInputValue;
         this._alpha = parseFloat(aphaInputValue);
         if (Number.isNaN(this._alpha)) {
             this._alpha = 1;
@@ -222,6 +233,8 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
     }
     _togglePickerMode() {
         this._displayHSL = !this._displayHSL;
+        // Announce a message to screen readers
+        announce(this.colorFieldsAnnouncementText, InvisibleMessageMode.Polite);
     }
     _handleColorInputChange(e) {
         const target = e.target;
@@ -304,14 +317,24 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
         }
     }
     _handleAlphaChange() {
+        // parse the input value if valid or fallback to default
+        this._alpha = this._alphaTemp ? parseFloat(this._alphaTemp) : 1;
+        if (Number.isNaN(this._alpha)) {
+            this._alpha = 1;
+        }
+        // reset input value so _alpha is rendered
+        this._alphaTemp = undefined;
+        // normalize range
         this._alpha = this._alpha < 0 ? 0 : this._alpha;
         this._alpha = this._alpha > 1 ? 1 : this._alpha;
         this._colorValue.Alpha = this._alpha;
     }
     _changeSelectedColor(x, y) {
+        const boxSize = this._boxSize;
+        // Store coordinates as percentages of the picker box.
         this._selectedCoordinates = {
-            x: x - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle
-            y: y - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle
+            x: (x / boxSize) * 100,
+            y: (y / boxSize) * 100,
         };
         // Idication that changes to the color settings are triggered as a result of user pressing over the main color section.
         this._isSelectedColorChanged = true;
@@ -333,8 +356,9 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
         // 0 ≤ H < 360
         // 4.251 because with 4.25 we get out of the colors range.
         const h = this._hue;
-        let s = +(1 - (y / 256)).toFixed(2);
-        let l = +(x / 256).toFixed(2);
+        const boxSize = this._boxSize;
+        let s = +(1 - (y / boxSize)).toFixed(2);
+        let l = +(x / boxSize).toFixed(2);
         if (Number.isNaN(s) || Number.isNaN(l)) {
             // The event is finished out of the main color section
             return;
@@ -355,9 +379,11 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
     }
     _updateColorGrid() {
         const hslColours = this._colorValue.HSL;
+        // Coordinates are percentages: x = lightness, y = inverted saturation.
+        // The template applies them as `left: x%` / `top: y%` so the circle scales with the box.
         this._selectedCoordinates = {
-            x: ((hslColours.l * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle
-            y: (256 - (hslColours.s * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle
+            x: hslColours.l,
+            y: 100 - hslColours.s,
         };
         if (this._isSelectedColorChanged) { // We shouldn't update the hue value when user presses over the main color section.
             this._isSelectedColorChanged = false;
@@ -376,6 +402,15 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
             && this._colorValue.G === value.g
             && this._colorValue.B === value.b;
     }
+    get colorPickerLabel() {
+        const effectiveLabel = getEffectiveAriaLabelText(this);
+        return effectiveLabel
+            ? `${ColorPicker_1.i18nBundle.getText(COLORPICKER_LABEL)} ${effectiveLabel}`
+            : ColorPicker_1.i18nBundle.getText(COLORPICKER_LABEL);
+    }
+    get sliderGroupLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_SLIDER_GROUP);
+    }
     get hueSliderLabel() {
         return ColorPicker_1.i18nBundle.getText(COLORPICKER_HUE_SLIDER);
     }
@@ -406,6 +441,26 @@ let ColorPicker = ColorPicker_1 = class ColorPicker extends UI5Element {
     get alphaInputLabel() {
         return ColorPicker_1.i18nBundle.getText(COLORPICKER_ALPHA);
     }
+    get percentageLabel() {
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_PERCENTAGE);
+    }
+    get colorFieldsAnnouncementText() {
+        const mode = this._displayHSL ? "HSL" : "RGB";
+        let text = "";
+        if (mode === "RGB") {
+            text = `${this.redInputLabel} ${this._colorValue.R}, `
+                + `${this.greenInputLabel} ${this._colorValue.G}, `
+                + `${this.blueInputLabel} ${this._colorValue.B}, `
+                + `${this.alphaInputLabel} ${this._colorValue.Alpha}`;
+        }
+        else {
+            text = `${this.hueInputLabel} ${this._colorValue.H}, `
+                + `${this.saturationInputLabel} ${this._colorValue.S} ${this.percentageLabel}, `
+                + `${this.lightInputLabel} ${this._colorValue.L} ${this.percentageLabel}, `
+                + `${this.alphaInputLabel} ${this._colorValue.Alpha}`;
+        }
+        return ColorPicker_1.i18nBundle.getText(COLORPICKER_COLOR_MODE_CHANGED, mode, text);
+    }
     get toggleModeTooltip() {
         return ColorPicker_1.i18nBundle.getText(COLORPICKER_TOGGLE_MODE_TOOLTIP);
     }
@@ -478,6 +533,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ColorPicker.prototype, "simplified", void 0);
+__decorate([
+    property()
+], ColorPicker.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], ColorPicker.prototype, "accessibleNameRef", void 0);
 __decorate([
     property({ type: Object })
 ], ColorPicker.prototype, "_mainValue", void 0);
@@ -490,6 +551,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], ColorPicker.prototype, "_alpha", void 0);
+__decorate([
+    property()
+], ColorPicker.prototype, "_alphaTemp", void 0);
 __decorate([
     property({ type: Number })
 ], ColorPicker.prototype, "_hue", void 0);
@@ -505,6 +569,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ColorPicker.prototype, "_displayHSL", void 0);
+__decorate([
+    query(".ui5-color-picker-main-color")
+], ColorPicker.prototype, "_mainColorRef", void 0);
 __decorate([
     i18n("@ui5/webcomponents")
 ], ColorPicker, "i18nBundle", void 0);

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 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\tgetAlpha,\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 \"@ui5/webcomponents-icons/dist/expand.js\";\nimport ColorValue from \"./colorpicker-utils/ColorValue.js\";\nimport ColorPickerTemplate from \"./ColorPickerTemplate.js\";\nimport type Input from \"./Input.js\";\nimport type Slider from \"./Slider.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\tCOLORPICKER_SATURATION,\n\tCOLORPICKER_LIGHT,\n\tCOLORPICKER_HUE,\n\tCOLORPICKER_TOGGLE_MODE_TOOLTIP,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport ColorPickerCss from \"./generated/themes/ColorPicker.css.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base/dist/index.js\";\n\nconst PICKER_POINTER_WIDTH = 6.5;\n\ntype ColorCoordinates = {\n\tx: number,\n\ty: number,\n}\n\ntype ColorChannelInput = {\n\tid: string,\n\tvalue: number,\n\taccessibleName: string\n\tlabel: string,\n\tshowPercentSymbol?: boolean,\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\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 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.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_colorValue: ColorValue;\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\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_displayHSL = 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\t\tthis._colorValue = new ColorValue();\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\tconst valueAsRGB = getRGBColor(this.value);\n\t\tif (!this._isColorValueEqual(valueAsRGB)) {\n\t\t\tthis._colorValue.RGB = valueAsRGB;\n\t\t}\n\t\tconst alpha = getAlpha(this.value);\n\t\tif (alpha !== this._colorValue.Alpha) {\n\t\t\tthis._colorValue.Alpha = alpha;\n\t\t\tthis._alpha = this._colorValue.Alpha;\n\t\t}\n\t\tconst tempColor = this._colorValue.toRGBString();\n\t\tthis._updateColorGrid();\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: UI5CustomEvent<Input, \"input\"> | UI5CustomEvent<Slider, \"input\">) {\n\t\tconst aphaInputValue = String(e.currentTarget.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._colorValue.Alpha = this._alpha;\n\t\tthis._isHueValueChanged = true;\n\n\t\tconst color = this._colorValue.toRGBString();\n\t\tthis._setValue(color);\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\t\tthis._colorValue.H = this._hue;\n\n\t\tconst color = this._colorValue.toRGBString();\n\t\tthis._setValue(color);\n\t}\n\n\t_handleHEXChange(e: CustomEvent | KeyboardEvent) {\n\t\tconst input: Input = (e.target as Input);\n\t\tlet inputValueLowerCase = input.value.toLowerCase();\n\n\t\tif (inputValueLowerCase.startsWith(\"#\")) {\n\t\t\tinputValueLowerCase = inputValueLowerCase.slice(1);\n\t\t}\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\tthis._colorValue.HEX = inputValueLowerCase;\n\t\tconst isValidColor = this._colorValue.isColorValueValid();\n\n\t\tif (isValidColor && input.value !== inputValueLowerCase) {\n\t\t\tthis._wrongHEX = false;\n\t\t\tinput.value = inputValueLowerCase;\n\t\t}\n\n\t\tif (!isValidColor) {\n\t\t\tthis._wrongHEX = true;\n\t\t} else {\n\t\t\tthis._wrongHEX = false;\n\n\t\t\tconst color = this._colorValue.toRGBString();\n\t\t\tthis._setValue(color);\n\t\t}\n\t}\n\n\t_togglePickerMode() {\n\t\tthis._displayHSL = !this._displayHSL;\n\t}\n\n\t_handleColorInputChange(e: Event) {\n\t\tconst target = e.target as Input;\n\t\tconst targetValue = parseInt(target.value) || 0;\n\t\tlet normalizedValue = targetValue;\n\n\t\tswitch (target.id) {\n\t\tcase \"red\":\n\t\t\tthis._colorValue.R = targetValue;\n\t\t\tnormalizedValue = this._colorValue.R;\n\t\t\tbreak;\n\n\t\tcase \"green\":\n\t\t\tthis._colorValue.G = targetValue;\n\t\t\tnormalizedValue = this._colorValue.G;\n\t\t\tbreak;\n\n\t\tcase \"blue\":\n\t\t\tthis._colorValue.B = targetValue;\n\t\t\tnormalizedValue = this._colorValue.B;\n\t\t\tbreak;\n\n\t\tcase \"hue\":\n\t\t\tthis._colorValue.H = targetValue;\n\t\t\tnormalizedValue = this._colorValue.H;\n\t\t\tbreak;\n\n\t\tcase \"saturation\":\n\t\t\tthis._colorValue.S = targetValue;\n\t\t\tnormalizedValue = this._colorValue.S;\n\t\t\tbreak;\n\n\t\tcase \"light\":\n\t\t\tthis._colorValue.L = targetValue;\n\t\t\tnormalizedValue = this._colorValue.L;\n\t\t\tbreak;\n\t\t}\n\n\t\ttarget.value = String(normalizedValue);\n\t\tconst color = this._colorValue.toRGBString();\n\t\tthis._setValue(color);\n\t\tthis._updateColorGrid();\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() {\n\t\tthis._alpha = this._alpha < 0 ? 0 : this._alpha;\n\t\tthis._alpha = this._alpha > 1 ? 1 : this._alpha;\n\n\t\tthis._colorValue.Alpha = 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._colorValue.HSL = tempColor;\n\n\t\t\tconst color = this._colorValue.toRGBString();\n\t\t\tthis._setValue(color);\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\t\tlet s = +(1 - (y / 256)).toFixed(2);\n\t\tlet l = +(x / 256).toFixed(2);\n\n\t\tif (Number.isNaN(s) || Number.isNaN(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\t// Normalize values to be between 0 and 1 in case of rounding issues\n\t\ts = Math.max(0, Math.min(1, s));\n\t\tl = Math.max(0, Math.min(1, l));\n\n\t\treturn {\n\t\t\th: Math.round(h),\n\t\t\ts: Math.round(s * 100),\n\t\t\tl: Math.round(l * 100),\n\t\t};\n\t}\n\n\t_setValue(color: string) {\n\t\tthis.value = color;\n\t\tthis._wrongHEX = !this._colorValue.isColorValueValid();\n\t\tthis.fireDecoratorEvent(\"change\");\n\t}\n\n\t_updateColorGrid() {\n\t\tconst hslColours: ColorHSL = this._colorValue.HSL;\n\t\tthis._selectedCoordinates = {\n\t\t\tx: ((hslColours.l * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle\n\t\t\ty: (256 - (hslColours.s * 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 = hslColours.h;\n\t\t}\n\n\t\tthis._setMainColor(this._hue);\n\t}\n\n\t_isColorValueEqual(value: ColorRGB): boolean {\n\t\treturn this._colorValue.R === value.r\n\t\t\t&& this._colorValue.G === value.g\n\t\t\t&& this._colorValue.B === value.b;\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 hueInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_HUE);\n\t}\n\n\tget saturationInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_SATURATION);\n\t}\n\n\tget lightInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_LIGHT);\n\t}\n\n\tget alphaInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA);\n\t}\n\n\tget toggleModeTooltip() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_TOGGLE_MODE_TOOLTIP);\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 rgbInputs(): Array<ColorChannelInput> {\n\t\tconst redInput = {\n\t\t\tid: \"red\",\n\t\t\tvalue: this._colorValue.R,\n\t\t\tlabel: \"R\",\n\t\t\taccessibleName: this.redInputLabel,\n\t\t};\n\n\t\tconst greenInput = {\n\t\t\tid: \"green\",\n\t\t\tvalue: this._colorValue.G,\n\t\t\tlabel: \"G\",\n\t\t\taccessibleName: this.greenInputLabel,\n\t\t};\n\n\t\tconst blueInput = {\n\t\t\tid: \"blue\",\n\t\t\tvalue: this._colorValue.B,\n\t\t\tlabel: \"B\",\n\t\t\taccessibleName: this.blueInputLabel,\n\t\t};\n\n\t\treturn [redInput, greenInput, blueInput];\n\t}\n\n\tget hslInputs(): Array<ColorChannelInput> {\n\t\tconst hueInput = {\n\t\t\tid: \"hue\",\n\t\t\tvalue: this._colorValue.H,\n\t\t\tlabel: \"H\",\n\t\t\taccessibleName: this.hueInputLabel,\n\t\t};\n\n\t\tconst saturationInput = {\n\t\t\tid: \"saturation\",\n\t\t\tvalue: this._colorValue.S,\n\t\t\tlabel: \"S\",\n\t\t\taccessibleName: this.saturationInputLabel,\n\t\t\tshowPercentSymbol: true,\n\t\t};\n\n\t\tconst lightInput = {\n\t\t\tid: \"light\",\n\t\t\tvalue: this._colorValue.L,\n\t\t\tlabel: \"L\",\n\t\t\taccessibleName: this.lightInputLabel,\n\t\t\tshowPercentSymbol: true,\n\t\t};\n\n\t\treturn [hueInput, saturationInput, lightInput];\n\t}\n\n\tget HEX(): string {\n\t\treturn this._colorValue.HEX;\n\t}\n\n\tget colorChannelInputs() {\n\t\treturn this._displayHSL ? this.hslInputs : this.rgbInputs;\n\t}\n\n\tget _isDefaultPickerMode() {\n\t\treturn !this.simplified;\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 query from \"@ui5/webcomponents-base/dist/decorators/query.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 { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport {\n\tgetRGBColor,\n\tgetAlpha,\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 \"@ui5/webcomponents-icons/dist/expand.js\";\nimport ColorValue from \"./colorpicker-utils/ColorValue.js\";\nimport ColorPickerTemplate from \"./ColorPickerTemplate.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport type Input from \"./Input.js\";\nimport type Slider from \"./Slider.js\";\n\nimport {\n\tCOLORPICKER_LABEL,\n\tCOLORPICKER_SLIDER_GROUP,\n\tCOLORPICKER_ALPHA_SLIDER,\n\tCOLORPICKER_HUE_SLIDER,\n\tCOLORPICKER_HEX,\n\tCOLORPICKER_RED,\n\tCOLORPICKER_GREEN,\n\tCOLORPICKER_BLUE,\n\tCOLORPICKER_ALPHA,\n\tCOLORPICKER_SATURATION,\n\tCOLORPICKER_LIGHT,\n\tCOLORPICKER_HUE,\n\tCOLORPICKER_TOGGLE_MODE_TOOLTIP,\n\tCOLORPICKER_PERCENTAGE,\n\tCOLORPICKER_COLOR_MODE_CHANGED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport ColorPickerCss from \"./generated/themes/ColorPicker.css.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base/dist/index.js\";\n\n// Fallback box width in CSS pixels at 16px root font-size (16rem).\nconst DEFAULT_BOX_SIZE = 256;\n\ntype ColorCoordinates = {\n\tx: number,\n\ty: number,\n}\n\ntype ColorChannelInput = {\n\tid: string,\n\tvalue: number,\n\taccessibleName: string\n\tlabel: string,\n\tshowPercentSymbol?: boolean,\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\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 accessible name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 2.20.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t * @default undefined\n\t * @public\n\t * @since 2.20.0\n\t */\n\t@property()\n\taccessibleNameRef?: string;\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.\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_colorValue: ColorValue;\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 * this is the alpha value in the input only while editing, since it can container invalid/empty values temporarily\n\t * @private\n\t */\n\t@property()\n\t_alphaTemp?: string;\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\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_displayHSL = false;\n\n\tselectedHue: number;\n\n\tmouseDown: boolean;\n\n\tmouseIn: boolean;\n\n\t@query(\".ui5-color-picker-main-color\")\n\t_mainColorRef?: HTMLElement;\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\t\tthis._colorValue = new ColorValue();\n\n\t\t// Bottom-right corner of the picker box (white = l=100%, s=0%)\n\t\t// Stored as percentages so positioning is independent of root font-size.\n\t\tthis._selectedCoordinates = {\n\t\t\tx: 100,\n\t\t\ty: 100,\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\tget _boxSize(): number {\n\t\t// clientWidth excludes border, matching the coordinate space of MouseEvent.offsetX/Y\n\t\t// which is measured from the element's padding edge.\n\t\treturn this._mainColorRef?.clientWidth || DEFAULT_BOX_SIZE;\n\t}\n\n\tonBeforeRendering() {\n\t\tconst valueAsRGB = getRGBColor(this.value);\n\t\tif (!this._isColorValueEqual(valueAsRGB)) {\n\t\t\tthis._colorValue.RGB = valueAsRGB;\n\t\t}\n\t\tconst alpha = getAlpha(this.value);\n\t\tif (alpha !== this._colorValue.Alpha) {\n\t\t\tthis._colorValue.Alpha = alpha;\n\t\t\tthis._alpha = this._colorValue.Alpha;\n\t\t}\n\t\tconst tempColor = this._colorValue.toRGBString();\n\t\tthis._updateColorGrid();\n\t\tthis.style.setProperty(\"--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: UI5CustomEvent<Input, \"input\"> | UI5CustomEvent<Slider, \"input\">) {\n\t\tconst aphaInputValue = String(e.currentTarget.value);\n\t\tthis._alphaTemp = aphaInputValue;\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._colorValue.Alpha = this._alpha;\n\t\tthis._isHueValueChanged = true;\n\n\t\tconst color = this._colorValue.toRGBString();\n\t\tthis._setValue(color);\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\t\tthis._colorValue.H = this._hue;\n\n\t\tconst color = this._colorValue.toRGBString();\n\t\tthis._setValue(color);\n\t}\n\n\t_handleHEXChange(e: CustomEvent | KeyboardEvent) {\n\t\tconst input: Input = (e.target as Input);\n\t\tlet inputValueLowerCase = input.value.toLowerCase();\n\n\t\tif (inputValueLowerCase.startsWith(\"#\")) {\n\t\t\tinputValueLowerCase = inputValueLowerCase.slice(1);\n\t\t}\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\tthis._colorValue.HEX = inputValueLowerCase;\n\t\tconst isValidColor = this._colorValue.isColorValueValid();\n\n\t\tif (isValidColor && input.value !== inputValueLowerCase) {\n\t\t\tthis._wrongHEX = false;\n\t\t\tinput.value = inputValueLowerCase;\n\t\t}\n\n\t\tif (!isValidColor) {\n\t\t\tthis._wrongHEX = true;\n\t\t} else {\n\t\t\tthis._wrongHEX = false;\n\n\t\t\tconst color = this._colorValue.toRGBString();\n\t\t\tthis._setValue(color);\n\t\t}\n\t}\n\n\t_togglePickerMode() {\n\t\tthis._displayHSL = !this._displayHSL;\n\n\t\t// Announce a message to screen readers\n\t\tannounce(this.colorFieldsAnnouncementText, InvisibleMessageMode.Polite);\n\t}\n\n\t_handleColorInputChange(e: Event) {\n\t\tconst target = e.target as Input;\n\t\tconst targetValue = parseInt(target.value) || 0;\n\t\tlet normalizedValue = targetValue;\n\n\t\tswitch (target.id) {\n\t\tcase \"red\":\n\t\t\tthis._colorValue.R = targetValue;\n\t\t\tnormalizedValue = this._colorValue.R;\n\t\t\tbreak;\n\n\t\tcase \"green\":\n\t\t\tthis._colorValue.G = targetValue;\n\t\t\tnormalizedValue = this._colorValue.G;\n\t\t\tbreak;\n\n\t\tcase \"blue\":\n\t\t\tthis._colorValue.B = targetValue;\n\t\t\tnormalizedValue = this._colorValue.B;\n\t\t\tbreak;\n\n\t\tcase \"hue\":\n\t\t\tthis._colorValue.H = targetValue;\n\t\t\tnormalizedValue = this._colorValue.H;\n\t\t\tbreak;\n\n\t\tcase \"saturation\":\n\t\t\tthis._colorValue.S = targetValue;\n\t\t\tnormalizedValue = this._colorValue.S;\n\t\t\tbreak;\n\n\t\tcase \"light\":\n\t\t\tthis._colorValue.L = targetValue;\n\t\t\tnormalizedValue = this._colorValue.L;\n\t\t\tbreak;\n\t\t}\n\n\t\ttarget.value = String(normalizedValue);\n\t\tconst color = this._colorValue.toRGBString();\n\t\tthis._setValue(color);\n\t\tthis._updateColorGrid();\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() {\n\t\t// parse the input value if valid or fallback to default\n\t\tthis._alpha = this._alphaTemp ? parseFloat(this._alphaTemp) : 1;\n\t\tif (Number.isNaN(this._alpha)) {\n\t\t\tthis._alpha = 1;\n\t\t}\n\t\t// reset input value so _alpha is rendered\n\t\tthis._alphaTemp = undefined;\n\t\t// normalize range\n\t\tthis._alpha = this._alpha < 0 ? 0 : this._alpha;\n\t\tthis._alpha = this._alpha > 1 ? 1 : this._alpha;\n\n\t\tthis._colorValue.Alpha = this._alpha;\n\t}\n\n\t_changeSelectedColor(x: number, y: number) {\n\t\tconst boxSize = this._boxSize;\n\t\t// Store coordinates as percentages of the picker box.\n\t\tthis._selectedCoordinates = {\n\t\t\tx: (x / boxSize) * 100,\n\t\t\ty: (y / boxSize) * 100,\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._colorValue.HSL = tempColor;\n\n\t\t\tconst color = this._colorValue.toRGBString();\n\t\t\tthis._setValue(color);\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\t\tconst boxSize = this._boxSize;\n\t\tlet s = +(1 - (y / boxSize)).toFixed(2);\n\t\tlet l = +(x / boxSize).toFixed(2);\n\n\t\tif (Number.isNaN(s) || Number.isNaN(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\t// Normalize values to be between 0 and 1 in case of rounding issues\n\t\ts = Math.max(0, Math.min(1, s));\n\t\tl = Math.max(0, Math.min(1, l));\n\n\t\treturn {\n\t\t\th: Math.round(h),\n\t\t\ts: Math.round(s * 100),\n\t\t\tl: Math.round(l * 100),\n\t\t};\n\t}\n\n\t_setValue(color: string) {\n\t\tthis.value = color;\n\t\tthis._wrongHEX = !this._colorValue.isColorValueValid();\n\t\tthis.fireDecoratorEvent(\"change\");\n\t}\n\n\t_updateColorGrid() {\n\t\tconst hslColours: ColorHSL = this._colorValue.HSL;\n\t\t// Coordinates are percentages: x = lightness, y = inverted saturation.\n\t\t// The template applies them as `left: x%` / `top: y%` so the circle scales with the box.\n\t\tthis._selectedCoordinates = {\n\t\t\tx: hslColours.l,\n\t\t\ty: 100 - hslColours.s,\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 = hslColours.h;\n\t\t}\n\n\t\tthis._setMainColor(this._hue);\n\t}\n\n\t_isColorValueEqual(value: ColorRGB): boolean {\n\t\treturn this._colorValue.R === value.r\n\t\t\t&& this._colorValue.G === value.g\n\t\t\t&& this._colorValue.B === value.b;\n\t}\n\n\tget colorPickerLabel() {\n\t\tconst effectiveLabel = getEffectiveAriaLabelText(this);\n\t\treturn effectiveLabel\n\t\t\t? `${ColorPicker.i18nBundle.getText(COLORPICKER_LABEL)} ${effectiveLabel}`\n\t\t\t: ColorPicker.i18nBundle.getText(COLORPICKER_LABEL);\n\t}\n\n\tget sliderGroupLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_SLIDER_GROUP);\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 hueInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_HUE);\n\t}\n\n\tget saturationInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_SATURATION);\n\t}\n\n\tget lightInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_LIGHT);\n\t}\n\n\tget alphaInputLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_ALPHA);\n\t}\n\n\tget percentageLabel() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_PERCENTAGE);\n\t}\n\n\tget colorFieldsAnnouncementText() {\n\t\tconst mode = this._displayHSL ? \"HSL\" : \"RGB\";\n\t\tlet text = \"\";\n\n\t\tif (mode === \"RGB\") {\n\t\t\ttext = `${this.redInputLabel} ${this._colorValue.R}, `\n\t\t\t\t+ `${this.greenInputLabel} ${this._colorValue.G}, `\n\t\t\t\t+ `${this.blueInputLabel} ${this._colorValue.B}, `\n\t\t\t\t+ `${this.alphaInputLabel} ${this._colorValue.Alpha}`;\n\t\t} else {\n\t\t\ttext = `${this.hueInputLabel} ${this._colorValue.H}, `\n\t\t\t\t+ `${this.saturationInputLabel} ${this._colorValue.S} ${this.percentageLabel}, `\n\t\t\t\t+ `${this.lightInputLabel} ${this._colorValue.L} ${this.percentageLabel}, `\n\t\t\t\t+ `${this.alphaInputLabel} ${this._colorValue.Alpha}`;\n\t\t}\n\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_COLOR_MODE_CHANGED, mode, text);\n\t}\n\n\tget toggleModeTooltip() {\n\t\treturn ColorPicker.i18nBundle.getText(COLORPICKER_TOGGLE_MODE_TOOLTIP);\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 rgbInputs(): Array<ColorChannelInput> {\n\t\tconst redInput = {\n\t\t\tid: \"red\",\n\t\t\tvalue: this._colorValue.R,\n\t\t\tlabel: \"R\",\n\t\t\taccessibleName: this.redInputLabel,\n\t\t};\n\n\t\tconst greenInput = {\n\t\t\tid: \"green\",\n\t\t\tvalue: this._colorValue.G,\n\t\t\tlabel: \"G\",\n\t\t\taccessibleName: this.greenInputLabel,\n\t\t};\n\n\t\tconst blueInput = {\n\t\t\tid: \"blue\",\n\t\t\tvalue: this._colorValue.B,\n\t\t\tlabel: \"B\",\n\t\t\taccessibleName: this.blueInputLabel,\n\t\t};\n\n\t\treturn [redInput, greenInput, blueInput];\n\t}\n\n\tget hslInputs(): Array<ColorChannelInput> {\n\t\tconst hueInput = {\n\t\t\tid: \"hue\",\n\t\t\tvalue: this._colorValue.H,\n\t\t\tlabel: \"H\",\n\t\t\taccessibleName: this.hueInputLabel,\n\t\t};\n\n\t\tconst saturationInput = {\n\t\t\tid: \"saturation\",\n\t\t\tvalue: this._colorValue.S,\n\t\t\tlabel: \"S\",\n\t\t\taccessibleName: this.saturationInputLabel,\n\t\t\tshowPercentSymbol: true,\n\t\t};\n\n\t\tconst lightInput = {\n\t\t\tid: \"light\",\n\t\t\tvalue: this._colorValue.L,\n\t\t\tlabel: \"L\",\n\t\t\taccessibleName: this.lightInputLabel,\n\t\t\tshowPercentSymbol: true,\n\t\t};\n\n\t\treturn [hueInput, saturationInput, lightInput];\n\t}\n\n\tget HEX(): string {\n\t\treturn this._colorValue.HEX;\n\t}\n\n\tget colorChannelInputs() {\n\t\treturn this._displayHSL ? this.hslInputs : this.rgbInputs;\n\t}\n\n\tget _isDefaultPickerMode() {\n\t\treturn !this.simplified;\n\t}\n}\n\nColorPicker.define();\n\nexport default ColorPicker;\n"]}

package/dist/ColorPickerTemplate.js

@@ -4,12 +4,12 @@ import Slider from "./Slider.js";
 import Input from "./Input.js";
 import Button from "./Button.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 &&
+    return (_jsxs("div", { class: "ui5-color-picker-root", role: "group", "aria-label": this.colorPickerLabel, children: [_jsx("div", { class: "ui5-color-picker-main-color", role: "presentation", 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}%`,
+                        top: `${this._selectedCoordinates.y}%`,
+                    } }) }), _jsxs("div", { class: "ui5-color-picker-sliders-wrapper", role: "group", "aria-label": this.sliderGroupLabel, 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._handleAlphaInput })] }), _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": this._colorValue.toRGBString() } }) })] }), _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-channel-inputs-wrapper", "onui5-change": this._handleColorInputChange, children: [this.colorChannelInputs.map(input => _jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-color-channel", children: [_jsx(Input, { id: input.id, class: "ui5-color-channel-input", disabled: this.inputsDisabled, accessibleName: input.accessibleName, value: String(input.value) }), _jsx(Label, { children: input.label })] }), _jsx("div", { class: "ui5-color-channel-percentage-label", children: input.showPercentSymbol &&
-                                        _jsx(Label, { children: "%" }) })] })), _jsxs("div", { class: "ui5-color-channel", children: [_jsx(Input, { id: "alpha", disabled: this.inputsDisabled, class: "ui5-color-channel-input", value: String(this._alpha), accessibleName: this.alphaInputLabel, onChange: this._handleAlphaChange, onInput: this._handleAlphaInput }), _jsx(Label, { children: "A" })] }), _jsx("div", { children: _jsx(Button, { class: "ui5-color-channel-toggle", id: "toggle-picker-mode", icon: "expand", design: "Transparent", tooltip: this.toggleModeTooltip, onClick: this._togglePickerMode }) })] })] }));
+                                        _jsx(Label, { children: "%" }) })] })), _jsxs("div", { class: "ui5-color-channel", children: [_jsx(Input, { id: "alpha", disabled: this.inputsDisabled, class: "ui5-color-channel-input", value: this._alphaTemp ?? String(this._alpha), accessibleName: this.alphaInputLabel, onChange: this._handleAlphaChange, onInput: this._handleAlphaInput }), _jsx(Label, { children: "A" })] }), _jsx("div", { children: _jsx(Button, { class: "ui5-color-channel-toggle", id: "toggle-picker-mode", icon: "expand", design: "Transparent", tooltip: this.toggleModeTooltip, onClick: this._togglePickerMode }) })] })] }));
 }
 //# sourceMappingURL=ColorPickerTemplate.js.map

package/dist/ColorPickerTemplate.js.map

@@ -1 +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\";\nimport Button from \"./Button.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._handleAlphaInput}\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\": this._colorValue.toRGBString() }}\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-channel-inputs-wrapper\"\n\t\t\t\t\tonui5-change={this._handleColorInputChange}\n\t\t\t\t>\n\t\t\t\t\t{this.colorChannelInputs.map(input =>\n\t\t\t\t\t\t<><div class=\"ui5-color-channel\">\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={input.id}\n\t\t\t\t\t\t\t\tclass=\"ui5-color-channel-input\"\n\t\t\t\t\t\t\t\tdisabled={this.inputsDisabled}\n\t\t\t\t\t\t\t\taccessibleName={input.accessibleName}\n\t\t\t\t\t\t\t\tvalue={String(input.value)} />\n\t\t\t\t\t\t\t<Label>{input.label}</Label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"ui5-color-channel-percentage-label\">\n\t\t\t\t\t\t\t{input.showPercentSymbol &&\n\t\t\t\t\t\t\t\t<Label>%</Label>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div></>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class=\"ui5-color-channel\">\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-channel-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\tonInput={this._handleAlphaInput}\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\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclass=\"ui5-color-channel-toggle\"\n\t\t\t\t\t\t\tid=\"toggle-picker-mode\"\n\t\t\t\t\t\t\ticon=\"expand\"\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\ttooltip={this.toggleModeTooltip}\n\t\t\t\t\t\t\tonClick={this._togglePickerMode}\n\t\t\t\t\t\t/>\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"]}
+{"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\";\nimport Button from \"./Button.js\";\n\nexport default function ColorPickerTemplate(this: ColorPicker) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-color-picker-root\"\n\t\t\trole=\"group\"\n\t\t\taria-label={this.colorPickerLabel}\n\t\t>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-color-picker-main-color\"\n\t\t\t\trole=\"presentation\"\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}%`,\n\t\t\t\t\t\ttop: `${this._selectedCoordinates.y}%`,\n\t\t\t\t\t}}\n\t\t\t\t></div>\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclass=\"ui5-color-picker-sliders-wrapper\"\n\t\t\t\trole=\"group\"\n\t\t\t\taria-label={this.sliderGroupLabel}\n\t\t\t>\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._handleAlphaInput}\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\": this._colorValue.toRGBString() }}\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-channel-inputs-wrapper\"\n\t\t\t\t\tonui5-change={this._handleColorInputChange}\n\t\t\t\t>\n\t\t\t\t\t{this.colorChannelInputs.map(input =>\n\t\t\t\t\t\t<><div class=\"ui5-color-channel\">\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={input.id}\n\t\t\t\t\t\t\t\tclass=\"ui5-color-channel-input\"\n\t\t\t\t\t\t\t\tdisabled={this.inputsDisabled}\n\t\t\t\t\t\t\t\taccessibleName={input.accessibleName}\n\t\t\t\t\t\t\t\tvalue={String(input.value)} />\n\t\t\t\t\t\t\t<Label>{input.label}</Label>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"ui5-color-channel-percentage-label\">\n\t\t\t\t\t\t\t{input.showPercentSymbol &&\n\t\t\t\t\t\t\t\t<Label>%</Label>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</div></>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class=\"ui5-color-channel\">\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-channel-input\"\n\t\t\t\t\t\t\tvalue={this._alphaTemp ?? 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\tonInput={this._handleAlphaInput}\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\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclass=\"ui5-color-channel-toggle\"\n\t\t\t\t\t\t\tid=\"toggle-picker-mode\"\n\t\t\t\t\t\t\ticon=\"expand\"\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\ttooltip={this.toggleModeTooltip}\n\t\t\t\t\t\t\tonClick={this._togglePickerMode}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</div>\n\t);\n}\n"]}