@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/CheckBoxTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBoxTemplate.js","sourceRoot":"","sources":["../src/CheckBoxTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport type CheckBox from \"./CheckBox.js\";\nimport Label from \"./Label.js\";\nimport Icon from \"./Icon.js\";\nimport accept from \"@ui5/webcomponents-icons/dist/accept.js\";\nimport complete from \"@ui5/webcomponents-icons/dist/complete.js\";\nimport border from \"@ui5/webcomponents-icons/dist/border.js\";\nimport triState from \"@ui5/webcomponents-icons/dist/tri-state.js\";\n\nexport default function CheckBoxTemplate(this: CheckBox) {\n\treturn (\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-checkbox-root\": true,\n\t\t\t\t\"ui5-checkbox--hoverable\": !this.disabled && !this.readonly && isDesktop(),\n\t\t\t}}\n\t\t\trole={this.accInfo.role}\n\t\t\tpart=\"root\"\n\t\t\taria-checked={this.accInfo.ariaChecked}\n\t\t\taria-readonly={this.accInfo.ariaReadonly}\n\t\t\taria-disabled={this.accInfo.ariaDisabled}\n\t\t\taria-label={this.ariaLabelText}\n\t\t\taria-labelledby={this.ariaLabelledBy}\n\t\t\taria-describedby={this.ariaDescribedBy}\n\t\t\taria-required={this.accInfo.ariaRequired}\n\t\t\ttabindex={this.accInfo.tabindex}\n\t\t\tonMouseDown={this._onmousedown}\n\t\t\tonMouseUp={this._onmouseup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonClick={this._onclick}\n\t\t\tonFocusOut={this._onfocusout}\n\t\t>\n\n\t\t\t{this.isDisplayOnly ?\n\t\t\t\t<div class=\"ui5-checkbox-display-only-icon-inner\">\n\t\t\t\t\t<Icon aria-hidden=\"true\" name={displayOnlyIcon.call(this)} class=\"ui5-checkbox-display-only-icon\" part=\"icon\"/>\n\t\t\t\t</div>\n\t\t\t\t:\n\t\t\t\t<div id={`${this._id}-CbBg`} class=\"ui5-checkbox-inner\">\n\t\t\t\t\t{this.isCompletelyChecked &&\n\t\t\t\t\t<Icon aria-hidden=\"true\" name={accept} class=\"ui5-checkbox-icon\" part=\"icon\"/>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{this.accInfo.role === \"checkbox\" &&\n\t\t\t<input\n\t\t\t\tid={`${this._id}-CB`}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={this.checked}\n\t\t\t\tvalue={this.value}\n\t\t\t\treadonly={this.readonly}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\ttabindex={-1}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tdata-sap-no-tab-ref\n\t\t\t/>\n\t\t\t}\n\n\t\t\t{this.text &&\n\t\t\t<Label\n\t\t\t\tid={`${this._id}-label`}\n\t\t\t\tpart=\"label\"\n\t\t\t\tclass=\"ui5-checkbox-label\"\n\t\t\t\twrappingType={this.wrappingType}\n\t\t\t\trequired={this.required}\n\t\t\t>\n\t\t\t\t{this.text}\n\t\t\t</Label>\n\t\t\t}\n\n\t\t\t{this.hasValueState &&\n\t\t\t<span id={`${this._id}-descr`} class=\"ui5-hidden-text\">{this.valueStateText}</span>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction displayOnlyIcon(this: CheckBox) {\n\tif (this.isCompletelyChecked) {\n\t\treturn complete;\n\t}\n\tif (this.checked && this.indeterminate) {\n\t\treturn triState;\n\t}\n\treturn border;\n}\n"]}

package/dist/ColorPalette.d.ts

@@ -2,18 +2,18 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import ColorPaletteItem from "./ColorPaletteItem.js";
-import Button from "./Button.js";
-import type Dialog from "./Dialog.js";
-import type ColorPaletteMoreColors from "./features/ColorPaletteMoreColors.js";
-import type ColorPicker from "./ColorPicker.js";
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
+import type ColorPaletteItem from "./ColorPaletteItem.js";
+import type Button from "./Button.js";
+import "./ColorPaletteItem.js";
 /**
  * Interface for components that may be used inside a `ui5-color-palette` or `ui5-color-palette-popover`
  * @public
  */
-interface IColorPaletteItem extends HTMLElement, ITabbable {
+interface IColorPaletteItem extends UI5Element, ITabbable {
     value?: string;
     index?: number;
+    selected?: boolean;
 }
 type ColorPaletteNavigationItem = IColorPaletteItem | Button;
 type ColorPaletteItemClickEventDetail = {
@@ -39,6 +39,9 @@ type ColorPaletteItemClickEventDetail = {
  * @public
  */
 declare class ColorPalette extends UI5Element {
+    eventDetails: {
+        "item-click": ColorPaletteItemClickEventDetail;
+    };
     /**
      * Defines whether the user can see the last used colors in the bottom of the component
      * @private
@@ -48,7 +51,6 @@ declare class ColorPalette extends UI5Element {
     /**
      * Defines whether the user can choose a custom color from a color picker
      *
-     * **Note:** In order to use this property you need to import the following module: `"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"`
      * @private
      * @since 1.0.0-rc.15
      */
@@ -61,7 +63,7 @@ declare class ColorPalette extends UI5Element {
      */
     showDefaultColor: boolean;
     /**
-     * Defines the default color of the color palette
+     * Defines the default color of the color palette, only valid CSS color values accepted
      *
      * **Note:** The default color should be a part of the ColorPalette colors`
      * @private
@@ -69,7 +71,7 @@ declare class ColorPalette extends UI5Element {
      */
     defaultColor?: string;
     /**
-     * Defines the selected color.
+     * Defines the selected color, only valid CSS color values accepted
      * @private
      */
     _selectedColor?: string;
@@ -83,6 +85,20 @@ declare class ColorPalette extends UI5Element {
      * @private
      */
     onPhone: boolean;
+    /**
+
+     * The showMoreColors template.
+     * @private
+     */
+    showMoreColorsTemplate?: JsxTemplate;
+    /**
+     * @private
+     */
+    dialogOpen: boolean;
+    /**
+     * @private
+     */
+    colorPickerValue: string;
     /**
      * Defines the `ui5-color-palette-item` elements.
      * @public
@@ -91,29 +107,48 @@ declare class ColorPalette extends UI5Element {
     _itemNavigation: ItemNavigation;
     _itemNavigationRecentColors: ItemNavigation;
     _recentColors: Array<string>;
-    moreColorsFeature?: ColorPaletteMoreColors;
+    _currentlySelected?: ColorPaletteItem;
+    _shouldFocusRecentColors: boolean;
     static i18nBundle: I18nBundle;
-    static onDefine(): Promise<void>;
     constructor();
     onBeforeRendering(): void;
     onAfterRendering(): void;
     selectColor(item: ColorPaletteItem): void;
     _setColor(color: string): void;
+    get effectiveColorItems(): IColorPaletteItem[];
+    /**
+     * Ensures that only one item is selected or only the last selected item remains active if more than one are explicitly set as 'selected'.
+     * @private
+     */
+    _ensureSingleSelectionOrDeselectAll(): void;
     _onclick(e: MouseEvent): void;
     _onkeyup(e: KeyboardEvent): void;
     _onkeydown(e: KeyboardEvent): void;
+    handleSelection(target: ColorPaletteItem): void;
+    getFocusDomRef(): HTMLElement | undefined;
+    _handleDefaultColorClick(e: KeyboardEvent): void;
+    _onDefaultColorKeyUp(e: KeyboardEvent): void;
     _onDefaultColorKeyDown(e: KeyboardEvent): void;
     _onMoreColorsKeyDown(e: KeyboardEvent): void;
+    _isUpOrDownNavigatableColorPaletteItem(e: KeyboardEvent): boolean | undefined;
     _onColorContainerKeyDown(e: KeyboardEvent): void;
     _onRecentColorsContainerKeyDown(e: KeyboardEvent): void;
     focusColorElement(element: ColorPaletteNavigationItem, itemNavigation: ItemNavigation): void;
-    focusFirstDisplayColorElement(): void;
-    focusFirstFocusableElement(): void;
     get firstFocusableElement(): ColorPaletteNavigationItem;
-    _chooseCustomColor(): Promise<void>;
-    _closeDialog(): Promise<void>;
-    _openMoreColorsDialog(): Promise<void>;
+    onColorPickerChange(e: Event): void;
+    _chooseCustomColor(): void;
+    _addRecentColor(color: string): void;
+    _closeDialog(): void;
+    _openMoreColorsDialog(): void;
     _onDefaultColorClick(): void;
+    /**
+     * Returns the selected item.
+     */
+    get selectedItem(): ColorPaletteItem | IColorPaletteItem | undefined;
+    get allColorsInPalette(): (ColorPaletteItem | IColorPaletteItem)[];
+    get colorPaletteDialogTitle(): string;
+    get colorPaletteDialogOKButton(): string;
+    get colorPaletteCancelButton(): string;
     /**
      * Returns the selected color.
      */
@@ -122,7 +157,6 @@ declare class ColorPalette extends UI5Element {
     get colorContainerLabel(): string;
     get colorPaletteMoreColorsText(): string;
     get colorPaletteDefaultColorText(): string;
-    get _showMoreColors(): false | ColorPaletteMoreColors | undefined;
     get rowSize(): number;
     get hasRecentColors(): string | false;
     get recentColors(): string[];
@@ -134,8 +168,7 @@ declare class ColorPalette extends UI5Element {
             "ui5-cp-root-phone": boolean;
         };
     };
-    _getDialog(): Promise<Dialog>;
-    getColorPicker(): Promise<ColorPicker>;
+    static ColorPaletteMoreColorsTemplate?: JsxTemplate;
 }
 export default ColorPalette;
 export type { ColorPaletteItemClickEventDetail, IColorPaletteItem, };

package/dist/ColorPalette.js

@@ -9,23 +9,19 @@ 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.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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 ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
 import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { isSpace, isEnter, isDown, isUp, isTabNext, } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
-import ColorPaletteDialogTemplate from "./generated/templates/ColorPaletteDialogTemplate.lit.js";
-import ColorPaletteItem from "./ColorPaletteItem.js";
-import Button from "./Button.js";
-import { COLORPALETTE_CONTAINER_LABEL, COLOR_PALETTE_MORE_COLORS_TEXT, COLOR_PALETTE_DEFAULT_COLOR_TEXT, } from "./generated/i18n/i18n-defaults.js";
+import ColorPaletteTemplate from "./ColorPaletteTemplate.js";
+import "./ColorPaletteItem.js";
+import { COLORPALETTE_CONTAINER_LABEL, COLOR_PALETTE_MORE_COLORS_TEXT, COLOR_PALETTE_DEFAULT_COLOR_TEXT, COLOR_PALETTE_DIALOG_CANCEL_BUTTON, COLOR_PALETTE_DIALOG_OK_BUTTON, COLOR_PALETTE_DIALOG_TITLE, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import ColorPaletteCss from "./generated/themes/ColorPalette.css.js";
-import ColorPaletteStaticAreaCss from "./generated/themes/ColorPaletteStaticArea.css.js";
+import ColorPaletteDialogCss from "./generated/themes/ColorPaletteDialog.css.js";
 /**
  * @class
  *
@@ -46,15 +42,47 @@ import ColorPaletteStaticAreaCss from "./generated/themes/ColorPaletteStaticArea
  * @public
  */
 let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
-    static async onDefine() {
-        const colorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
-        [ColorPalette_1.i18nBundle] = await Promise.all([
-            getI18nBundle("@ui5/webcomponents"),
-            colorPaletteMoreColors ? colorPaletteMoreColors.init() : Promise.resolve(),
-        ]);
-    }
     constructor() {
         super();
+        /**
+         * Defines whether the user can see the last used colors in the bottom of the component
+         * @private
+         * @since 1.0.0-rc.15
+         */
+        this.showRecentColors = false;
+        /**
+         * Defines whether the user can choose a custom color from a color picker
+         *
+         * @private
+         * @since 1.0.0-rc.15
+         */
+        this.showMoreColors = false;
+        /**
+         * Defines whether the user can choose the default color from a button.
+         * @default false
+         * @private
+         * @since 1.0.0-rc.16
+         */
+        this.showDefaultColor = false;
+        /**
+         * Defines if the palette is in Popup or Embeded mode.
+         * @private
+         */
+        this.popupMode = false;
+        /**
+         * Defines if the palette is rendered on phone.
+         * @private
+         */
+        this.onPhone = false;
+        /**
+         * @private
+         */
+        this.dialogOpen = false;
+        /**
+         * @private
+         */
+        this.colorPickerValue = "rgba(255,255,255,1)";
+        this._shouldFocusRecentColors = false;
         this._itemNavigation = new ItemNavigation(this, {
             getItemsCallback: () => this.displayedColors,
             rowSize: this.rowSize,
@@ -68,28 +96,38 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         this._recentColors = [];
     }
     onBeforeRendering() {
+        this._ensureSingleSelectionOrDeselectAll();
+        const selectedItem = this.selectedItem;
+        if (selectedItem && !this.showRecentColors) {
+            this._selectedColor = selectedItem.value;
+        }
         this.displayedColors.forEach((item, index) => {
             item.index = index + 1;
         });
         if (this.showMoreColors) {
-            const ColorPaletteMoreColorsClass = getFeature("ColorPaletteMoreColors");
-            if (ColorPaletteMoreColorsClass) {
-                this.moreColorsFeature = new ColorPaletteMoreColorsClass();
+            // If the feature is preloaded (the user manually imported ColorPaletteMoreColors.js), the teplate is already available on the constructor
+            if (ColorPalette_1.ColorPaletteMoreColorsTemplate) {
+                this.showMoreColorsTemplate = ColorPalette_1.ColorPaletteMoreColorsTemplate;
+                // If feature is not preloaded, load the template dynamically
             }
             else {
-                throw new Error(`You have to import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js" module to use the more-colors functionality.`);
+                import("./features/ColorPaletteMoreColorsTemplate.js").then(module => {
+                    this.showMoreColorsTemplate = module.default;
+                });
             }
         }
         this.onPhone = isPhone();
     }
     onAfterRendering() {
-        if (this.popupMode) {
-            if (this.showDefaultColor) {
-                this.focusFirstFocusableElement();
-            }
-            else {
-                this.focusFirstDisplayColorElement();
+        if (this.hasRecentColors && this._shouldFocusRecentColors) {
+            if (this.selectedItem) {
+                this.selectedItem.selected = false;
             }
+            const firstRecentColor = this.recentColorsElements[0];
+            firstRecentColor.selected = true;
+            this._currentlySelected = firstRecentColor;
+            this._currentlySelected.focus();
+            this._shouldFocusRecentColors = false;
         }
     }
     selectColor(item) {
@@ -109,36 +147,92 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
                 this._recentColors.unshift(this._recentColors.splice(this._recentColors.indexOf(this._selectedColor), 1)[0]);
             }
             else {
-                this._recentColors.unshift(this._selectedColor);
+                this._addRecentColor(this._selectedColor);
             }
         }
-        this.fireEvent("item-click", {
+        this.fireDecoratorEvent("item-click", {
             color: this._selectedColor,
         });
     }
-    _onclick(e) {
-        const target = e.target;
-        if (target.hasAttribute("ui5-color-palette-item")) {
-            this.selectColor(target);
+    get effectiveColorItems() {
+        let colorItems = this.colors;
+        if (this.popupMode) {
+            colorItems = this.getSlottedNodes("colors");
         }
+        return colorItems;
+    }
+    /**
+     * Ensures that only one item is selected or only the last selected item remains active if more than one are explicitly set as 'selected'.
+     * @private
+     */
+    _ensureSingleSelectionOrDeselectAll() {
+        let lastSelectedItem;
+        this.allColorsInPalette.forEach(item => {
+            if (item.selected) {
+                if (lastSelectedItem) {
+                    lastSelectedItem.selected = false;
+                }
+                lastSelectedItem = item;
+            }
+        });
+    }
+    _onclick(e) {
+        this.handleSelection(e.target);
     }
     _onkeyup(e) {
         const target = e.target;
-        if (isSpace(e) && target.hasAttribute("ui5-color-palette-item")) {
+        if (isSpace(e)) {
             e.preventDefault();
-            this.selectColor(target);
+            this.handleSelection(target);
         }
     }
     _onkeydown(e) {
         const target = e.target;
-        if (isEnter(e) && target.hasAttribute("ui5-color-palette-item")) {
-            this.selectColor(target);
+        if (isEnter(e)) {
+            this.handleSelection(target);
+        }
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+    }
+    handleSelection(target) {
+        if (!target.hasAttribute("ui5-color-palette-item") || !target.value) {
+            return;
+        }
+        this._shouldFocusRecentColors = false;
+        this.selectColor(target);
+        // Handle selection for items within the 'recentColorsElements'
+        if (this.recentColorsElements.includes(target)) {
+            this.recentColorsElements[0].selected = true;
+            this.recentColorsElements[0].focus();
+            this._currentlySelected = this.recentColorsElements[0];
+        }
+        else {
+            this.allColorsInPalette.forEach(item => {
+                item.selected = item === target;
+            });
+            this._currentlySelected = target;
+        }
+        this._ensureSingleSelectionOrDeselectAll();
+    }
+    getFocusDomRef() {
+        return this._itemNavigation._getCurrentItem();
+    }
+    _handleDefaultColorClick(e) {
+        e.preventDefault();
+        this._onDefaultColorClick();
+    }
+    _onDefaultColorKeyUp(e) {
+        if (isSpace(e)) {
+            this._handleDefaultColorClick(e);
         }
     }
     _onDefaultColorKeyDown(e) {
         if (isTabNext(e) && this.popupMode) {
-            e.preventDefault();
-            this._onDefaultColorClick();
+            this._handleDefaultColorClick(e);
+        }
+        if (isEnter(e)) {
+            this._handleDefaultColorClick(e);
         }
         if (isDown(e)) {
             e.stopPropagation();
@@ -180,9 +274,15 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
             }
         }
     }
+    _isUpOrDownNavigatableColorPaletteItem(e) {
+        return (isUp(e) || isDown(e)) && this._currentlySelected && this.colorPaletteNavigationElements.includes(this._currentlySelected);
+    }
     _onColorContainerKeyDown(e) {
         const target = e.target;
         const lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];
+        if (this._isUpOrDownNavigatableColorPaletteItem(e)) {
+            this._currentlySelected = undefined;
+        }
         if (isTabNext(e) && this.popupMode) {
             e.preventDefault();
             this.selectColor(target);
@@ -217,6 +317,9 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         }
     }
     _onRecentColorsContainerKeyDown(e) {
+        if (this._isUpOrDownNavigatableColorPaletteItem(e)) {
+            this._currentlySelected = undefined;
+        }
         if (isUp(e)) {
             if (this.showMoreColors) {
                 const navigationElementsIndex = this.showDefaultColor ? 2 : 1;
@@ -242,33 +345,63 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         itemNavigation.setCurrentItem(element);
         itemNavigation._focusCurrentItem();
     }
-    focusFirstDisplayColorElement() {
-        this.focusColorElement(this.displayedColors[0], this._itemNavigation);
-    }
-    focusFirstFocusableElement() {
-        this.firstFocusableElement.focus();
-    }
     get firstFocusableElement() {
         return this.colorPaletteNavigationElements[0];
     }
-    async _chooseCustomColor() {
-        const colorPicker = await this.getColorPicker();
-        this._setColor(colorPicker.color);
+    onColorPickerChange(e) {
+        this.colorPickerValue = e.target.value;
+    }
+    _chooseCustomColor() {
+        this._setColor(this.colorPickerValue);
         this._closeDialog();
+        this._shouldFocusRecentColors = true;
     }
-    async _closeDialog() {
-        const dialog = await this._getDialog();
-        dialog.close();
+    _addRecentColor(color) {
+        if (this.showRecentColors && !this._recentColors.includes(color)) {
+            this._recentColors.unshift(color);
+            if (this._recentColors.length > this.rowSize) {
+                this._recentColors.pop();
+            }
+        }
+    }
+    _closeDialog() {
+        this.dialogOpen = false;
     }
-    async _openMoreColorsDialog() {
-        const dialog = await this._getDialog();
-        dialog.show();
+    _openMoreColorsDialog() {
+        const value = this._currentlySelected ? this._currentlySelected.value : undefined;
+        if (value) {
+            this.colorPickerValue = value;
+        }
+        this.dialogOpen = true;
     }
     _onDefaultColorClick() {
         if (this.defaultColor) {
             this._setColor(this.defaultColor);
+            this._addRecentColor(this.defaultColor);
+            if (this.selectedItem) {
+                this.selectedItem.selected = false;
+                this._currentlySelected = undefined;
+            }
         }
     }
+    /**
+     * Returns the selected item.
+     */
+    get selectedItem() {
+        return this.allColorsInPalette.find(item => item.selected);
+    }
+    get allColorsInPalette() {
+        return [...this.effectiveColorItems, ...this.recentColorsElements];
+    }
+    get colorPaletteDialogTitle() {
+        return ColorPalette_1.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE);
+    }
+    get colorPaletteDialogOKButton() {
+        return ColorPalette_1.i18nBundle.getText(COLOR_PALETTE_DIALOG_OK_BUTTON);
+    }
+    get colorPaletteCancelButton() {
+        return ColorPalette_1.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
+    }
     /**
      * Returns the selected color.
      */
@@ -288,9 +421,6 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
     get colorPaletteDefaultColorText() {
         return ColorPalette_1.i18nBundle.getText(COLOR_PALETTE_DEFAULT_COLOR_TEXT);
     }
-    get _showMoreColors() {
-        return this.showMoreColors && this.moreColorsFeature;
-    }
     get rowSize() {
         return 5;
     }
@@ -316,6 +446,9 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
     get colorPaletteNavigationElements() {
         const navigationElements = [];
         const rootElement = this.shadowRoot.querySelector(".ui5-cp-root");
+        if (this._currentlySelected) {
+            navigationElements.push(this._currentlySelected);
+        }
         if (this.showDefaultColor) {
             navigationElements.push(rootElement.querySelector(".ui5-cp-default-color-button"));
         }
@@ -329,6 +462,7 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
         return navigationElements;
     }
     get classes() {
+        // Remove after deleting the hbs template, it's added in the jsx template
         return {
             colorPaletteRoot: {
                 "ui5-cp-root": true,
@@ -336,14 +470,6 @@ let ColorPalette = ColorPalette_1 = class ColorPalette extends UI5Element {
             },
         };
     }
-    async _getDialog() {
-        const staticAreaItem = await this.getStaticAreaItemDomRef();
-        return staticAreaItem.querySelector("[ui5-dialog]");
-    }
-    async getColorPicker() {
-        const dialog = await this._getDialog();
-        return dialog.content[0].querySelector("[ui5-color-picker]");
-    }
 };
 __decorate([
     property({ type: Boolean })
@@ -355,10 +481,10 @@ __decorate([
     property({ type: Boolean })
 ], ColorPalette.prototype, "showDefaultColor", void 0);
 __decorate([
-    property({ validator: CSSColor })
+    property()
 ], ColorPalette.prototype, "defaultColor", void 0);
 __decorate([
-    property({ validator: CSSColor })
+    property()
 ], ColorPalette.prototype, "_selectedColor", void 0);
 __decorate([
     property({ type: Boolean })
@@ -366,6 +492,15 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ColorPalette.prototype, "onPhone", void 0);
+__decorate([
+    property({ noAttribute: true })
+], ColorPalette.prototype, "showMoreColorsTemplate", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalette.prototype, "dialogOpen", void 0);
+__decorate([
+    property()
+], ColorPalette.prototype, "colorPickerValue", void 0);
 __decorate([
     slot({
         "default": true,
@@ -374,18 +509,15 @@ __decorate([
         individualSlots: true,
     })
 ], ColorPalette.prototype, "colors", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], ColorPalette, "i18nBundle", void 0);
 ColorPalette = ColorPalette_1 = __decorate([
     customElement({
         tag: "ui5-color-palette",
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: ColorPaletteTemplate,
-        staticAreaTemplate: ColorPaletteDialogTemplate,
-        styles: ColorPaletteCss,
-        staticAreaStyles: ColorPaletteStaticAreaCss,
-        get dependencies() {
-            const colorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
-            return [ColorPaletteItem, Button].concat(colorPaletteMoreColors ? colorPaletteMoreColors.dependencies : []);
-        },
+        styles: [ColorPaletteCss, ColorPaletteDialogCss],
     })
     /**
      * Fired when the user selects a color.
@@ -394,16 +526,7 @@ ColorPalette = ColorPalette_1 = __decorate([
      * @param {string} color the selected color
      */
     ,
-    event("item-click", {
-        detail: {
-            /**
-             * @public
-             */
-            color: {
-                type: String,
-            },
-        },
-    })
+    event("item-click")
 ], ColorPalette);
 ColorPalette.define();
 export default ColorPalette;