@ui5/webcomponents 0.0.0-4e00e5559 → 0.0.0-4e88b8243

package/dist/ColorPaletteItem.js

@@ -0,0 +1,129 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ColorPaletteItem_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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
+import ColorPaletteItemTemplate from "./ColorPaletteItemTemplate.js";
+import { COLORPALETTE_COLOR_LABEL, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import ColorPaletteItemCss from "./generated/themes/ColorPaletteItem.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.
+ * @constructor
+ * @extends UI5Element
+ * @since 1.0.0-rc.12
+ * @implements { IColorPaletteItem }
+ * @public
+ */
+let ColorPaletteItem = ColorPaletteItem_1 = class ColorPaletteItem extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the colour of the component.
+         *
+         * **Note:** The value should be a valid CSS color.
+         * @default ""
+         * @public
+         */
+        this.value = "";
+        /**
+         * Defines if the component is selected.
+         *
+         * **Note:** Only one item must be selected per <code>ui5-color-palette</code>.
+         * If more than one item is defined as selected, the last one would be considered as the selected one.
+         *
+         * @public
+         * @default false
+         * @since 2.0.0
+         */
+        this.selected = false;
+        /**
+         * Defines the tab-index of the element, helper information for the ItemNavigation.
+         * @private
+         */
+        this.forcedTabIndex = "-1";
+        /**
+         * Defines if the ColorPalette is on phone mode.
+         * @private
+         */
+        this.onPhone = false;
+        /**
+         * @private
+         * @since 1.0.0-rc.15
+         */
+        this._disabled = false;
+    }
+    onBeforeRendering() {
+        this._disabled = !this.value;
+        this.onPhone = isPhone();
+        this.setAttribute("style", `background-color: ${this.value}`);
+        // since height is dynamically determined by padding-block-start
+        const itemHeight = this.offsetHeight + 4; // adding 4px for the offsets on top and bottom
+        this.style.setProperty(getScopedVarName("--_ui5_color_palette_item_height"), `${itemHeight}px`);
+    }
+    get colorLabel() {
+        return ColorPaletteItem_1.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);
+    }
+    get styles() {
+        // Remove after deleting the hbs template, it's added in the jsx template
+        return {
+            root: {
+                "background-color": this.value,
+            },
+        };
+    }
+    get classes() {
+        // Remove after deleting the hbs template, it's added in the jsx template
+        return {
+            root: {
+                "ui5-cp-item": true,
+            },
+        };
+    }
+};
+__decorate([
+    property()
+], ColorPaletteItem.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPaletteItem.prototype, "selected", void 0);
+__decorate([
+    property({ noAttribute: true })
+], ColorPaletteItem.prototype, "forcedTabIndex", void 0);
+__decorate([
+    property({ type: Number })
+], ColorPaletteItem.prototype, "index", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPaletteItem.prototype, "onPhone", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPaletteItem.prototype, "_disabled", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], ColorPaletteItem, "i18nBundle", void 0);
+ColorPaletteItem = ColorPaletteItem_1 = __decorate([
+    customElement({
+        tag: "ui5-color-palette-item",
+        renderer: jsxRenderer,
+        styles: ColorPaletteItemCss,
+        template: ColorPaletteItemTemplate,
+        shadowRootOptions: { delegatesFocus: true },
+    })
+], ColorPaletteItem);
+ColorPaletteItem.define();
+export default ColorPaletteItem;
+//# sourceMappingURL=ColorPaletteItem.js.map

package/dist/ColorPaletteItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPaletteItem.js","sourceRoot":"","sources":["../src/ColorPaletteItem.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,EAAE,OAAO,EAAE,MAAM,wCAAwC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAE5F,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AACrE,OAAO,EACN,wBAAwB,GACxB,MAAM,mCAAmC,CAAC;AAE3C,SAAS;AACT,OAAO,mBAAmB,MAAM,4CAA4C,CAAC;AAE7E;;;;;;;;;;;GAWG;AAQH,IAAM,gBAAgB,wBAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAuDxC;QACC,KAAK,EAAE,CAAC;QAvDT;;;;;;WAMG;QAEH,UAAK,GAAG,EAAE,CAAA;QAEV;;;;;;;;;WASG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;WAGG;QAEH,mBAAc,GAAG,IAAI,CAAC;QAStB;;;WAGG;QAEH,YAAO,GAAG,KAAK,CAAC;QAEhB;;;WAGG;QAEH,cAAS,GAAG,KAAK,CAAC;IAOlB,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,OAAO,EAAE,CAAC;QACzB,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,qBAAqB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAE9D,gEAAgE;QAChE,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,+CAA+C;QACzF,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,kCAAkC,CAAC,EAAE,GAAG,UAAU,IAAI,CAAC,CAAC;IACjG,CAAC;IAED,IAAI,UAAU;QACb,OAAO,kBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;IACtE,CAAC;IAED,IAAI,MAAM;QACT,yEAAyE;QACzE,OAAO;YACN,IAAI,EAAE;gBACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;aAC9B;SACD,CAAC;IACH,CAAC;IAED,IAAI,OAAO;QACV,yEAAyE;QACzE,OAAO;YACN,IAAI,EAAE;gBACL,aAAa,EAAE,IAAI;aACnB;SACD,CAAC;IACH,CAAC;CACD,CAAA;AAjFA;IADC,QAAQ,EAAE;+CACD;AAaV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACX;AAOjB;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;wDACV;AAOtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACZ;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACZ;AAOhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACV;AAGX;IADN,IAAI,CAAC,oBAAoB,CAAC;0CACG;AArDzB,gBAAgB;IAPrB,aAAa,CAAC;QACd,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,mBAAmB;QAC3B,QAAQ,EAAE,wBAAwB;QAClC,iBAAiB,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE;KAC3C,CAAC;GACI,gBAAgB,CA0FrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","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 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 { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js\";\nimport type { IColorPaletteItem } from \"./ColorPalette.js\";\nimport ColorPaletteItemTemplate from \"./ColorPaletteItemTemplate.js\";\nimport {\n\tCOLORPALETTE_COLOR_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport ColorPaletteItemCss from \"./generated/themes/ColorPaletteItem.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-color-palette-item` component represents a color in the the `ui5-color-palette`.\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.12\n * @implements { IColorPaletteItem }\n * @public\n */\n@customElement({\n\ttag: \"ui5-color-palette-item\",\n\trenderer: jsxRenderer,\n\tstyles: ColorPaletteItemCss,\n\ttemplate: ColorPaletteItemTemplate,\n\tshadowRootOptions: { delegatesFocus: true },\n})\nclass ColorPaletteItem extends UI5Element implements IColorPaletteItem {\n\t/**\n\t * Defines the colour of the component.\n\t *\n\t * **Note:** The value should be a valid CSS color.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tvalue = \"\"\n\n\t/**\n\t * Defines if the component is selected.\n\t *\n\t * **Note:** Only one item must be selected per <code>ui5-color-palette</code>.\n\t * If more than one item is defined as selected, the last one would be considered as the selected one.\n\t *\n\t * @public\n\t * @default false\n\t * @since 2.0.0\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines the tab-index of the element, helper information for the ItemNavigation.\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tforcedTabIndex = \"-1\";\n\n\t/**\n\t * Defines the index of the item inside of the ColorPalette.\n\t * @private\n\t */\n\t@property({ type: Number })\n\tindex?: number;\n\n\t/**\n\t * Defines if the ColorPalette is on phone mode.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tonPhone = false;\n\n\t/**\n\t * @private\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ type: Boolean })\n\t_disabled = false;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._disabled = !this.value;\n\t\tthis.onPhone = isPhone();\n\t\tthis.setAttribute(\"style\", `background-color: ${this.value}`);\n\n\t\t// since height is dynamically determined by padding-block-start\n\t\tconst itemHeight = this.offsetHeight + 4; // adding 4px for the offsets on top and bottom\n\t\tthis.style.setProperty(getScopedVarName(\"--_ui5_color_palette_item_height\"), `${itemHeight}px`);\n\t}\n\n\tget colorLabel() {\n\t\treturn ColorPaletteItem.i18nBundle.getText(COLORPALETTE_COLOR_LABEL);\n\t}\n\n\tget styles() {\n\t\t// Remove after deleting the hbs template, it's added in the jsx template\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"background-color\": this.value,\n\t\t\t},\n\t\t};\n\t}\n\n\tget classes() {\n\t\t// Remove after deleting the hbs template, it's added in the jsx template\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-cp-item\": true,\n\t\t\t},\n\t\t};\n\t}\n}\n\nColorPaletteItem.define();\n\nexport default ColorPaletteItem;\n"]}

package/dist/ColorPaletteItemTemplate.d.ts

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

package/dist/ColorPaletteItemTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function ColorPaletteItemTemplate() {
+    return (_jsx("div", { class: "ui5-cp-item", style: {
+            "background-color": this.value,
+        }, tabindex: parseInt(this.forcedTabIndex), role: "button", "aria-label": `${this.colorLabel} - ${this.index}: ${this.value}`, title: `${this.colorLabel} - ${this.index}: ${this.value}` }));
+}
+//# sourceMappingURL=ColorPaletteItemTemplate.js.map

package/dist/ColorPaletteItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPaletteItemTemplate.js","sourceRoot":"","sources":["../src/ColorPaletteItemTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CACN,cACC,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE;YACN,kBAAkB,EAAE,IAAI,CAAC,KAAK;SAC9B,EACD,QAAQ,EAAE,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,EACvC,IAAI,EAAC,QAAQ,gBACD,GAAG,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,EAC/D,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,MAAM,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,GACpD,CACP,CAAC;AACH,CAAC","sourcesContent":["import type ColorPaletteItem from \"./ColorPaletteItem.js\";\n\nexport default function ColorPaletteItemTemplate(this: ColorPaletteItem) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-cp-item\"\n\t\t\tstyle={{\n\t\t\t\t\"background-color\": this.value,\n\t\t\t}}\n\t\t\ttabindex={parseInt(this.forcedTabIndex)}\n\t\t\trole=\"button\"\n\t\t\taria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}\n\t\t\ttitle={`${this.colorLabel} - ${this.index}: ${this.value}`}\n\t\t></div>\n\t);\n}\n"]}

package/dist/ColorPalettePopover.d.ts

@@ -0,0 +1,108 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type ResponsivePopover from "./ResponsivePopover.js";
+import type ColorPalette from "./ColorPalette.js";
+import type { ColorPaletteItemClickEventDetail, IColorPaletteItem } from "./ColorPalette.js";
+import type ColorPaletteItem from "./ColorPaletteItem.js";
+type ColorPalettePopoverItemClickEventDetail = ColorPaletteItemClickEventDetail;
+/**
+ * @class
+ *
+ * ### Overview
+ * Represents a predefined range of colors for easier selection.
+ *
+ * Overview
+ * The ColorPalettePopover provides the users with a slot to predefine colors.
+ *
+ * You can customize them with the use of the colors property. You can specify a defaultColor and display a "Default color" button for the user to choose directly.
+ * You can display a "More colors..." button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.
+ *
+ * ### Usage
+ *
+ * The palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.
+ *
+ * For the `ui5-color-palette-popover`
+ * ### ES6 Module Import
+ *
+ * `import @ui5/webcomponents/dist/ColorPalettePopover.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.0.0-rc.16
+ */
+declare class ColorPalettePopover extends UI5Element {
+    eventDetails: {
+        "item-click": ColorPalettePopoverItemClickEventDetail;
+        "close": void;
+    };
+    /**
+     * Defines whether the user can see the last used colors in the bottom of the component
+     * @default false
+     * @public
+     */
+    showRecentColors: boolean;
+    /**
+     * Defines whether the user can choose a custom color from a component.
+     *
+     * **Note:** In order to use this property you need to import the following module: `"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"`
+     * @default false
+     * @public
+     */
+    showMoreColors: boolean;
+    /**
+     * Defines whether the user can choose the default color from a button.
+     * @default false
+     * @public
+     */
+    showDefaultColor: boolean;
+    /**
+     * Defines the default color of the component.
+     *
+     * **Note:** The default color should be a part of the ColorPalette colors`
+     * @default undefined
+     * @public
+     */
+    defaultColor?: string;
+    /**
+     * Defines the open | closed state of the popover.
+     * @public
+     * @default false
+     * @since 1.21.0
+     */
+    open: boolean;
+    /**
+     * Defines the ID or DOM Reference of the element that the popover is shown at.
+     * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.
+     * You can only set the `opener` attribute to a DOM Reference when using JavaScript.
+     * @public
+     * @default undefined
+     * @since 1.21.0
+     */
+    opener?: HTMLElement | string;
+    /**
+     * Defines the content of the component.
+     * @public
+     */
+    colors: Array<IColorPaletteItem>;
+    static i18nBundle: I18nBundle;
+    constructor();
+    get responsivePopover(): ResponsivePopover;
+    get respPopover(): ResponsivePopover;
+    closePopover(): void;
+    onAfterClose(): void;
+    onAfterOpen(): void;
+    onSelectedColor(e: CustomEvent<ColorPaletteItemClickEventDetail>): void;
+    get _colorPalette(): ColorPalette;
+    /**
+     * Returns if the component is opened.
+     * @protected
+     * @since 1.0.0-rc.16
+     */
+    isOpen(): boolean;
+    get colorPaletteColors(): ColorPaletteItem[];
+    get _colorPaletteTitle(): string;
+    get _cancelButtonLabel(): string;
+    get _open(): true | undefined;
+}
+export default ColorPalettePopover;
+export type { ColorPalettePopoverItemClickEventDetail };

package/dist/ColorPalettePopover.js

@@ -0,0 +1,188 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ColorPalettePopover_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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
+import ColorPalettePopoverTemplate from "./ColorPalettePopoverTemplate.js";
+// Styles
+import ColorPalettePopoverCss from "./generated/themes/ColorPalettePopover.css.js";
+import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
+import { COLORPALETTE_POPOVER_TITLE, COLOR_PALETTE_DIALOG_CANCEL_BUTTON, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * Represents a predefined range of colors for easier selection.
+ *
+ * Overview
+ * The ColorPalettePopover provides the users with a slot to predefine colors.
+ *
+ * You can customize them with the use of the colors property. You can specify a defaultColor and display a "Default color" button for the user to choose directly.
+ * You can display a "More colors..." button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.
+ *
+ * ### Usage
+ *
+ * The palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.
+ *
+ * For the `ui5-color-palette-popover`
+ * ### ES6 Module Import
+ *
+ * `import @ui5/webcomponents/dist/ColorPalettePopover.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.0.0-rc.16
+ */
+let ColorPalettePopover = ColorPalettePopover_1 = class ColorPalettePopover extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines whether the user can see the last used colors in the bottom of the component
+         * @default false
+         * @public
+         */
+        this.showRecentColors = false;
+        /**
+         * Defines whether the user can choose a custom color from a component.
+         *
+         * **Note:** In order to use this property you need to import the following module: `"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"`
+         * @default false
+         * @public
+         */
+        this.showMoreColors = false;
+        /**
+         * Defines whether the user can choose the default color from a button.
+         * @default false
+         * @public
+         */
+        this.showDefaultColor = false;
+        /**
+         * Defines the open | closed state of the popover.
+         * @public
+         * @default false
+         * @since 1.21.0
+         */
+        this.open = false;
+    }
+    get responsivePopover() {
+        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
+    }
+    get respPopover() {
+        return this.shadowRoot.querySelector("[ui5-responsive-popover]");
+    }
+    closePopover() {
+        this.open = false;
+    }
+    onAfterClose() {
+        this.closePopover();
+        this.fireDecoratorEvent("close");
+    }
+    onAfterOpen() {
+        const colorPalette = this._colorPalette;
+        if (colorPalette._currentlySelected) {
+            colorPalette._currentlySelected?.focus();
+        }
+        else if (colorPalette.showRecentColors && colorPalette.recentColorsElements.length) {
+            colorPalette.recentColorsElements[0].focus();
+        }
+        else if (colorPalette.showDefaultColor) {
+            colorPalette.colorPaletteNavigationElements[0].focus();
+        }
+        // since height is dynamically determined by padding-block-start
+        colorPalette.allColorsInPalette.forEach((item) => {
+            const itemHeight = item.offsetHeight + 4; // adding 4px for the offsets on top and bottom
+            item.style.setProperty(getScopedVarName("--_ui5_color_palette_item_height"), `${itemHeight}px`);
+        });
+    }
+    onSelectedColor(e) {
+        this.closePopover();
+        this.fireDecoratorEvent("item-click", e.detail);
+    }
+    get _colorPalette() {
+        return this.responsivePopover.content[0].querySelector("[ui5-color-palette]");
+    }
+    /**
+     * Returns if the component is opened.
+     * @protected
+     * @since 1.0.0-rc.16
+     */
+    isOpen() {
+        return this.open;
+    }
+    get colorPaletteColors() {
+        return this.getSlottedNodes("colors");
+    }
+    get _colorPaletteTitle() {
+        return ColorPalettePopover_1.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);
+    }
+    get _cancelButtonLabel() {
+        return ColorPalettePopover_1.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
+    }
+    get _open() {
+        return this.open || undefined;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ColorPalettePopover.prototype, "showRecentColors", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalettePopover.prototype, "showMoreColors", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalettePopover.prototype, "showDefaultColor", void 0);
+__decorate([
+    property()
+], ColorPalettePopover.prototype, "defaultColor", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalettePopover.prototype, "open", void 0);
+__decorate([
+    property({ converter: DOMReferenceConverter })
+], ColorPalettePopover.prototype, "opener", void 0);
+__decorate([
+    slot({ "default": true, type: HTMLElement, individualSlots: true })
+], ColorPalettePopover.prototype, "colors", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], ColorPalettePopover, "i18nBundle", void 0);
+ColorPalettePopover = ColorPalettePopover_1 = __decorate([
+    customElement({
+        tag: "ui5-color-palette-popover",
+        renderer: jsxRenderer,
+        styles: [ResponsivePopoverCommonCss, ColorPalettePopoverCss],
+        template: ColorPalettePopoverTemplate,
+    })
+    /**
+     * Fired when the user selects a color.
+     * @public
+     * @param {string} color the selected color
+     */
+    ,
+    event("item-click", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the `ui5-color-palette-popover` is closed due to user interaction.
+     * @since 1.21.0
+     * @public
+     */
+    ,
+    event("close", {
+        bubbles: true,
+    })
+], ColorPalettePopover);
+ColorPalettePopover.define();
+export default ColorPalettePopover;
+//# sourceMappingURL=ColorPalettePopover.js.map

package/dist/ColorPalettePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPalettePopover.js","sourceRoot":"","sources":["../src/ColorPalettePopover.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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.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 DOMReferenceConverter from \"@ui5/webcomponents-base/dist/converters/DOMReference.js\";\nimport { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js\";\nimport ColorPalettePopoverTemplate from \"./ColorPalettePopoverTemplate.js\";\n\n// Styles\nimport ColorPalettePopoverCss from \"./generated/themes/ColorPalettePopover.css.js\";\nimport ResponsivePopoverCommonCss from \"./generated/themes/ResponsivePopoverCommon.css.js\";\nimport {\n\tCOLORPALETTE_POPOVER_TITLE,\n\tCOLOR_PALETTE_DIALOG_CANCEL_BUTTON,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport type ResponsivePopover from \"./ResponsivePopover.js\";\nimport type ColorPalette from \"./ColorPalette.js\";\nimport type { ColorPaletteItemClickEventDetail, IColorPaletteItem } from \"./ColorPalette.js\";\nimport type ColorPaletteItem from \"./ColorPaletteItem.js\";\n\ntype ColorPalettePopoverItemClickEventDetail = ColorPaletteItemClickEventDetail;\n\n/**\n * @class\n *\n * ### Overview\n * Represents a predefined range of colors for easier selection.\n *\n * Overview\n * The ColorPalettePopover provides the users with a slot to predefine colors.\n *\n * You can customize them with the use of the colors property. You can specify a defaultColor and display a \"Default color\" button for the user to choose directly.\n * You can display a \"More colors...\" button that opens an additional color picker for the user to choose specific colors that are not present in the predefined range.\n *\n * ### Usage\n *\n * The palette is intended for users, who don't want to check and remember the different values of the colors and spend large amount of time to configure the right color through the color picker.\n *\n * For the `ui5-color-palette-popover`\n * ### ES6 Module Import\n *\n * `import @ui5/webcomponents/dist/ColorPalettePopover.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.16\n */\n@customElement({\n\ttag: \"ui5-color-palette-popover\",\n\trenderer: jsxRenderer,\n\tstyles: [ResponsivePopoverCommonCss, ColorPalettePopoverCss],\n\ttemplate: ColorPalettePopoverTemplate,\n})\n\n/**\n * Fired when the user selects a color.\n * @public\n * @param {string} color the selected color\n */\n@event(\"item-click\", {\n\tbubbles: true,\n})\n/**\n * Fired when the `ui5-color-palette-popover` is closed due to user interaction.\n * @since 1.21.0\n * @public\n */\n@event(\"close\", {\n\tbubbles: true,\n})\nclass ColorPalettePopover extends UI5Element {\n\teventDetails!: {\n\t\t\"item-click\": ColorPalettePopoverItemClickEventDetail,\n\t\t\"close\": void,\n\t}\n\n\t/**\n\t * Defines whether the user can see the last used colors in the bottom of the component\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowRecentColors = false\n\n\t/**\n\t * Defines whether the user can choose a custom color from a component.\n\t *\n\t * **Note:** In order to use this property you need to import the following module: `\"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"`\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowMoreColors = false\n\n\t/**\n\t * Defines whether the user can choose the default color from a button.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowDefaultColor = false\n\n\t/**\n\t * Defines the default color of the component.\n\t *\n\t * **Note:** The default color should be a part of the ColorPalette colors`\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tdefaultColor?: string;\n\n\t/**\n\t * Defines the open | closed state of the popover.\n\t * @public\n\t * @default false\n\t * @since 1.21.0\n\t */\n\t@property({ type: Boolean })\n\topen = false\n\n\t/**\n\t * Defines the ID or DOM Reference of the element that the popover is shown at.\n\t * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\n\t * You can only set the `opener` attribute to a DOM Reference when using JavaScript.\n\t * @public\n\t * @default undefined\n\t * @since 1.21.0\n\t */\n\t@property({ converter: DOMReferenceConverter })\n\topener?: HTMLElement | string;\n\n\t/**\n\t * Defines the content of the component.\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n\tcolors!: Array<IColorPaletteItem>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tget responsivePopover() {\n\t\treturn this.shadowRoot!.querySelector<ResponsivePopover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\tget respPopover() {\n\t\treturn this.shadowRoot!.querySelector<ResponsivePopover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\tclosePopover() {\n\t\tthis.open = false;\n\t}\n\n\tonAfterClose() {\n\t\tthis.closePopover();\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\tonAfterOpen() {\n\t\tconst colorPalette = this._colorPalette;\n\t\tif (colorPalette._currentlySelected) {\n\t\t\tcolorPalette._currentlySelected?.focus();\n\t\t} else if (colorPalette.showRecentColors && colorPalette.recentColorsElements.length) {\n\t\t\tcolorPalette.recentColorsElements[0].focus();\n\t\t} else if (colorPalette.showDefaultColor) {\n\t\t\tcolorPalette.colorPaletteNavigationElements[0].focus();\n\t\t}\n\n\t\t// since height is dynamically determined by padding-block-start\n\t\tcolorPalette.allColorsInPalette.forEach((item: IColorPaletteItem) => {\n\t\t\tconst itemHeight = item.offsetHeight + 4; // adding 4px for the offsets on top and bottom\n\t\t\titem.style.setProperty(getScopedVarName(\"--_ui5_color_palette_item_height\"), `${itemHeight}px`);\n\t\t});\n\t}\n\n\tonSelectedColor(e: CustomEvent<ColorPaletteItemClickEventDetail>) {\n\t\tthis.closePopover();\n\t\tthis.fireDecoratorEvent(\"item-click\", e.detail);\n\t}\n\n\tget _colorPalette() {\n\t\treturn this.responsivePopover.content[0].querySelector<ColorPalette>(\"[ui5-color-palette]\")!;\n\t}\n\n\t/**\n\t * Returns if the component is opened.\n\t * @protected\n\t * @since 1.0.0-rc.16\n\t */\n\tisOpen() {\n\t\treturn this.open;\n\t}\n\n\tget colorPaletteColors() {\n\t\treturn this.getSlottedNodes<ColorPaletteItem>(\"colors\");\n\t}\n\n\tget _colorPaletteTitle() {\n\t\treturn ColorPalettePopover.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);\n\t}\n\n\tget _cancelButtonLabel() {\n\t\treturn ColorPalettePopover.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);\n\t}\n\n\tget _open() {\n\t\treturn this.open || undefined;\n\t}\n}\n\nColorPalettePopover.define();\n\nexport default ColorPalettePopover;\nexport type { ColorPalettePopoverItemClickEventDetail };\n"]}

package/dist/ColorPalettePopoverTemplate.d.ts

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

package/dist/ColorPalettePopoverTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Title from "./Title.js";
+import Button from "./Button.js";
+import ColorPalette from "./ColorPalette.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+export default function ColorPalettePopoverTemplate() {
+    return (_jsxs(ResponsivePopover, { hideArrow: true, contentOnlyOnDesktop: true, placement: "Bottom", opener: this.opener, open: this._open, onClose: this.onAfterClose, onOpen: this.onAfterOpen, children: [_jsx("div", { slot: "header", class: "ui5-cp-header", children: _jsx(Title, { level: "H1", wrappingType: "None", children: this._colorPaletteTitle }) }), _jsx("div", { children: _jsx(ColorPalette, { showMoreColors: this.showMoreColors, showRecentColors: this.showRecentColors, showDefaultColor: this.showDefaultColor, defaultColor: this.defaultColor, popupMode: true, onItemClick: this.onSelectedColor, children: this.colorPaletteColors.map(color => _jsx("slot", { name: color._individualSlot })) }) }), _jsx("div", { slot: "footer", class: "ui5-cp-footer", children: _jsx(Button, { design: "Transparent", onClick: this.closePopover, children: this._cancelButtonLabel }) })] }));
+}
+//# sourceMappingURL=ColorPalettePopoverTemplate.js.map

package/dist/ColorPalettePopoverTemplate.js.map

@@ -0,0 +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"]}

package/dist/ColorPaletteTemplate.d.ts

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

package/dist/ColorPaletteTemplate.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import Button from "./Button.js";
+import ColorPaletteItem from "./ColorPaletteItem.js";
+export default function ColorPaletteTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: {
+                    "ui5-cp-root": true,
+                    "ui5-cp-root-phone": isPhone(),
+                }, onClick: this._onclick, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, 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-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._effectiveShowMoreColors && this.moreColorsFeature?.template.call(this)] }));
+}
+//# sourceMappingURL=ColorPaletteTemplate.js.map

package/dist/ColorPaletteTemplate.js.map

@@ -0,0 +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,aAEzB,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,eAAe;wBACpB,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,wBAAwB,IAAI,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAC5E,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>\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._effectiveShowMoreColors && this.moreColorsFeature?.template.call(this) }\n\t\t</>\n\t);\n}\n"]}