@ui5/webcomponents 0.0.0-aeb93167c → 0.0.0-b0b835975

package/dist/ColorPalette.d.ts

@@ -0,0 +1,134 @@
+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 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";
+type ColorPaletteNavigationItem = ColorPaletteItem | Button;
+type ColorPaletteItemClickEventDetail = {
+    color: string;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-color-palette</code> provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
+ *
+ * <h3>Usage</h3>
+ *
+ * The <code>ui5-color-palette</code> is meant for users that need to select a color from a predefined set.
+ * To define the colors, use the <code>ui5-color-palette-item</code> component inside the default slot of the <code>ui5-color-palette</code>.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/ColorPalette.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ColorPalette
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-color-palette
+ * @since 1.0.0-rc.12
+ * @appenddocs sap.ui.webc.main.ColorPaletteItem
+ * @public
+ */
+declare class ColorPalette extends UI5Element {
+    /**
+     * Defines whether the user can see the last used colors in the bottom of the component
+     * @type {boolean}
+     * @private
+     * @since 1.0.0-rc.15
+     */
+    showRecentColors: boolean;
+    /**
+     * Defines whether the user can choose a custom color from a color picker
+     * <b>Note:</b> In order to use this property you need to import the following module: <code>"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"</code>
+     * @type {boolean}
+     * @private
+     * @since 1.0.0-rc.15
+     */
+    showMoreColors: boolean;
+    /**
+     * Defines whether the user can choose the default color from a button.
+     * @type {boolean}
+     * @defaultvalue false
+     * @private
+     * @since 1.0.0-rc.16
+     */
+    showDefaultColor: boolean;
+    /**
+     * Defines the default color of the color palette
+     * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
+     * @type {sap.ui.webc.base.types.CSSColor}
+     * @private
+     * @since 1.0.0-rc.16
+     */
+    defaultColor?: string;
+    /**
+     * Defines the selected color.
+     * @type {sap.ui.webc.base.types.CSSColor}
+     * @private
+     */
+    _selectedColor?: string;
+    /**
+     * Defines if the palette is in Popup or Embeded mode.
+     * @type {sap.ui.webc.base.types.CSSColor}
+     * @private
+     */
+    popupMode: boolean;
+    /**
+     * Defines the <code>ui5-color-palette-item</code> elements.
+     * @type {sap.ui.webc.main.IColorPaletteItem[]}
+     * @name sap.ui.webc.main.ColorPalette.prototype.default
+     * @slot colors
+     * @public
+     */
+    colors: Array<ColorPaletteItem>;
+    _itemNavigation: ItemNavigation;
+    _itemNavigationRecentColors: ItemNavigation;
+    _recentColors: Array<string>;
+    moreColorsFeature?: ColorPaletteMoreColors;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    constructor();
+    onBeforeRendering(): void;
+    selectColor(item: ColorPaletteItem): void;
+    _setColor(color: string): void;
+    _onclick(e: MouseEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onDefaultColorKeyDown(e: KeyboardEvent): void;
+    _onMoreColorsKeyDown(e: KeyboardEvent): void;
+    _onColorContainerKeyDown(e: KeyboardEvent): void;
+    _onRecentColorsContainerKeyDown(e: KeyboardEvent): void;
+    focusColorElement(element: ColorPaletteNavigationItem, itemNavigation: ItemNavigation): void;
+    _chooseCustomColor(): Promise<void>;
+    _closeDialog(): Promise<void>;
+    _openMoreColorsDialog(): Promise<void>;
+    _onDefaultColorClick(): void;
+    /**
+     * Returns the selected color.
+     */
+    get selectedColor(): string | undefined;
+    get displayedColors(): ColorPaletteItem[];
+    get colorContainerLabel(): string;
+    get colorPaleteMoreColorsText(): string;
+    get _showMoreColors(): false | ColorPaletteMoreColors | undefined;
+    get rowSize(): number;
+    get hasRecentColors(): string | false;
+    get recentColors(): string[];
+    get recentColorsElements(): Array<ColorPaletteItem>;
+    get colorPaletteNavigationElements(): ColorPaletteNavigationItem[];
+    get classes(): {
+        colorPaletteRoot: {
+            "ui5-cp-root": boolean;
+            "ui5-cp-root-phone": boolean;
+        };
+    };
+    _getDialog(): Promise<Dialog>;
+    getColorPicker(): Promise<ColorPicker>;
+}
+export default ColorPalette;
+export type { ColorPaletteItemClickEventDetail };

package/dist/ColorPalette.js

@@ -0,0 +1,388 @@
+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 ColorPalette_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.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import ColorPaletteCss from "./generated/themes/ColorPalette.css.js";
+import ColorPaletteStaticAreaCss from "./generated/themes/ColorPaletteStaticArea.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-color-palette</code> provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.
+ *
+ * <h3>Usage</h3>
+ *
+ * The <code>ui5-color-palette</code> is meant for users that need to select a color from a predefined set.
+ * To define the colors, use the <code>ui5-color-palette-item</code> component inside the default slot of the <code>ui5-color-palette</code>.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/ColorPalette.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ColorPalette
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-color-palette
+ * @since 1.0.0-rc.12
+ * @appenddocs sap.ui.webc.main.ColorPaletteItem
+ * @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();
+        this._itemNavigation = new ItemNavigation(this, {
+            getItemsCallback: () => this.displayedColors,
+            rowSize: this.rowSize,
+            behavior: ItemNavigationBehavior.Cyclic,
+        });
+        this._itemNavigationRecentColors = new ItemNavigation(this, {
+            getItemsCallback: () => this.recentColorsElements,
+            rowSize: this.rowSize,
+            behavior: ItemNavigationBehavior.Static,
+        });
+        this._recentColors = [];
+    }
+    onBeforeRendering() {
+        this.displayedColors.forEach((item, index) => {
+            item.index = index + 1;
+        });
+        if (this.showMoreColors) {
+            const ColorPaletteMoreColorsClass = getFeature("ColorPaletteMoreColors");
+            if (ColorPaletteMoreColorsClass) {
+                this.moreColorsFeature = new ColorPaletteMoreColorsClass();
+            }
+            else {
+                throw new Error(`You have to import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js" module to use the more-colors functionality.`);
+            }
+        }
+    }
+    selectColor(item) {
+        if (!item.value) {
+            return;
+        }
+        item.focus();
+        if (this.displayedColors.includes(item)) {
+            this._itemNavigation.setCurrentItem(item);
+        }
+        this._setColor(item.value);
+    }
+    _setColor(color) {
+        this._selectedColor = color;
+        if (this._recentColors[0] !== this._selectedColor) {
+            if (this._recentColors.includes(this._selectedColor)) {
+                this._recentColors.unshift(this._recentColors.splice(this._recentColors.indexOf(this._selectedColor), 1)[0]);
+            }
+            else {
+                this._recentColors.unshift(this._selectedColor);
+            }
+        }
+        this.fireEvent("item-click", {
+            color: this._selectedColor,
+        });
+    }
+    _onclick(e) {
+        const target = e.target;
+        if (target.hasAttribute("ui5-color-palette-item")) {
+            this.selectColor(target);
+        }
+    }
+    _onkeyup(e) {
+        const target = e.target;
+        if (isSpace(e) && target.hasAttribute("ui5-color-palette-item")) {
+            e.preventDefault();
+            this.selectColor(target);
+        }
+    }
+    _onkeydown(e) {
+        const target = e.target;
+        if (isEnter(e) && target.hasAttribute("ui5-color-palette-item")) {
+            this.selectColor(target);
+        }
+    }
+    _onDefaultColorKeyDown(e) {
+        if (isTabNext(e) && this.popupMode) {
+            e.preventDefault();
+            this._onDefaultColorClick();
+        }
+        if (isDown(e)) {
+            e.stopPropagation();
+            this.focusColorElement(this.colorPaletteNavigationElements[1], this._itemNavigation);
+        }
+        else if (isUp(e)) {
+            e.stopPropagation();
+            const lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];
+            if (this.hasRecentColors) {
+                this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
+            }
+            else if (this.showMoreColors) {
+                lastElementInNavigation.focus();
+            }
+            else {
+                const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
+                this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
+            }
+        }
+    }
+    _onMoreColorsKeyDown(e) {
+        const target = e.target;
+        const index = this.colorPaletteNavigationElements.indexOf(target);
+        const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
+        if (isUp(e)) {
+            e.stopPropagation();
+            this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
+        }
+        else if (isDown(e)) {
+            e.stopPropagation();
+            if (this.hasRecentColors) {
+                this.focusColorElement(this.colorPaletteNavigationElements[index + 1], this._itemNavigationRecentColors);
+            }
+            else if (this.showDefaultColor) {
+                this.colorPaletteNavigationElements[0].focus();
+            }
+            else {
+                this.focusColorElement(this.displayedColors[0], this._itemNavigation);
+            }
+        }
+    }
+    _onColorContainerKeyDown(e) {
+        const target = e.target;
+        const lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];
+        if (isTabNext(e) && this.popupMode) {
+            e.preventDefault();
+            this.selectColor(target);
+        }
+        if (isUp(e) && target === this.displayedColors[0] && this.colorPaletteNavigationElements.length > 1) {
+            e.stopPropagation();
+            if (this.showDefaultColor) {
+                this.colorPaletteNavigationElements[0].focus();
+            }
+            else if (!this.showDefaultColor && this.hasRecentColors) {
+                this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
+            }
+            else if (!this.showDefaultColor && this.showMoreColors) {
+                lastElementInNavigation.focus();
+            }
+        }
+        else if (isDown(e) && target === this.displayedColors[this.displayedColors.length - 1] && this.colorPaletteNavigationElements.length > 1) {
+            e.stopPropagation();
+            const isRecentColorsNextElement = (this.showDefaultColor && !this.showMoreColors && this.hasRecentColors) || (!this.showDefaultColor && !this.showMoreColors && this.hasRecentColors);
+            if (this.showDefaultColor && this.showMoreColors) {
+                this.colorPaletteNavigationElements[2].focus();
+            }
+            else if (this.showDefaultColor && !this.showMoreColors && (!this.showRecentColors || !this.recentColors[0])) {
+                this.colorPaletteNavigationElements[0].focus();
+            }
+            else if (isRecentColorsNextElement) {
+                this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);
+            }
+            else if (!this.showDefaultColor && this.showMoreColors) {
+                this.colorPaletteNavigationElements[1].focus();
+            }
+        }
+    }
+    _onRecentColorsContainerKeyDown(e) {
+        if (isUp(e)) {
+            if (this.showMoreColors) {
+                const navigationElementsIndex = this.showDefaultColor ? 2 : 1;
+                this.colorPaletteNavigationElements[navigationElementsIndex].focus();
+            }
+            else if (!this.showMoreColors && this.colorPaletteNavigationElements.length > 1) {
+                const colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;
+                e.stopPropagation();
+                this.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);
+            }
+        }
+        else if (isDown(e)) {
+            if (this.showDefaultColor) {
+                this.colorPaletteNavigationElements[0].focus();
+            }
+            else {
+                e.stopPropagation();
+                this.focusColorElement(this.displayedColors[0], this._itemNavigation);
+            }
+        }
+    }
+    focusColorElement(element, itemNavigation) {
+        itemNavigation.setCurrentItem(element);
+        itemNavigation._focusCurrentItem();
+    }
+    async _chooseCustomColor() {
+        const colorPicker = await this.getColorPicker();
+        this._setColor(colorPicker.color);
+        this._closeDialog();
+    }
+    async _closeDialog() {
+        const dialog = await this._getDialog();
+        dialog.close();
+    }
+    async _openMoreColorsDialog() {
+        const dialog = await this._getDialog();
+        dialog.show();
+    }
+    _onDefaultColorClick() {
+        if (this.defaultColor) {
+            this._setColor(this.defaultColor);
+        }
+    }
+    /**
+     * Returns the selected color.
+     */
+    get selectedColor() {
+        return this._selectedColor;
+    }
+    get displayedColors() {
+        const colors = this.getSlottedNodes("colors");
+        return colors.filter(item => item.value).slice(0, 15);
+    }
+    get colorContainerLabel() {
+        return ColorPalette_1.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);
+    }
+    get colorPaleteMoreColorsText() {
+        return ColorPalette_1.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);
+    }
+    get _showMoreColors() {
+        return this.showMoreColors && this.moreColorsFeature;
+    }
+    get rowSize() {
+        return 5;
+    }
+    get hasRecentColors() {
+        return this.showRecentColors && this.recentColors[0];
+    }
+    get recentColors() {
+        if (this._recentColors.length > this.rowSize) {
+            this._recentColors = this._recentColors.slice(0, this.rowSize);
+        }
+        while (this._recentColors.length < this.rowSize) {
+            this._recentColors.push("");
+        }
+        return this._recentColors;
+    }
+    get recentColorsElements() {
+        const domRef = this.getDomRef();
+        if (domRef) {
+            return Array.from(domRef.querySelectorAll(".ui5-cp-recent-colors-wrapper [ui5-color-palette-item]")).filter(x => x.value !== "");
+        }
+        return [];
+    }
+    get colorPaletteNavigationElements() {
+        const navigationElements = [];
+        const rootElement = this.shadowRoot.querySelector(".ui5-cp-root");
+        if (this.showDefaultColor) {
+            navigationElements.push(rootElement.querySelector(".ui5-cp-default-color-button"));
+        }
+        navigationElements.push(this.displayedColors[0]);
+        if (this.showMoreColors) {
+            navigationElements.push(rootElement.querySelector(".ui5-cp-more-colors"));
+        }
+        if (this.showRecentColors && !!this.recentColorsElements.length) {
+            navigationElements.push(this.recentColorsElements[0]);
+        }
+        return navigationElements;
+    }
+    get classes() {
+        return {
+            colorPaletteRoot: {
+                "ui5-cp-root": true,
+                "ui5-cp-root-phone": isPhone(),
+            },
+        };
+    }
+    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 })
+], ColorPalette.prototype, "showRecentColors", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalette.prototype, "showMoreColors", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalette.prototype, "showDefaultColor", void 0);
+__decorate([
+    property({ validator: CSSColor })
+], ColorPalette.prototype, "defaultColor", void 0);
+__decorate([
+    property({ validator: CSSColor })
+], ColorPalette.prototype, "_selectedColor", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalette.prototype, "popupMode", void 0);
+__decorate([
+    slot({
+        "default": true,
+        type: HTMLElement,
+        invalidateOnChildChange: true,
+        individualSlots: true,
+    })
+], ColorPalette.prototype, "colors", void 0);
+ColorPalette = ColorPalette_1 = __decorate([
+    customElement({
+        tag: "ui5-color-palette",
+        renderer: litRender,
+        template: ColorPaletteTemplate,
+        staticAreaTemplate: ColorPaletteDialogTemplate,
+        styles: ColorPaletteCss,
+        staticAreaStyles: ColorPaletteStaticAreaCss,
+        get dependencies() {
+            const colorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
+            return [ColorPaletteItem, Button].concat(colorPaletteMoreColors ? colorPaletteMoreColors.dependencies : []);
+        },
+    })
+    /**
+     * Fired when the user selects a color.
+     *
+     * @event sap.ui.webc.main.ColorPalette#item-click
+     * @public
+     * @since 1.0.0-rc.15
+     * @param {string} color the selected color
+     */
+    ,
+    event("item-click", {
+        detail: {
+            color: {
+                type: String,
+            },
+        },
+    })
+], ColorPalette);
+ColorPalette.define();
+export default ColorPalette;
+//# sourceMappingURL=ColorPalette.js.map

package/dist/ColorPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPalette.js","sourceRoot":"","sources":["../src/ColorPalette.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.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport CSSColor from \"@ui5/webcomponents-base/dist/types/CSSColor.js\";\nimport ItemNavigationBehavior from \"@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport {\n\tisSpace,\n\tisEnter,\n\tisDown,\n\tisUp,\n\tisTabNext,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport ColorPaletteTemplate from \"./generated/templates/ColorPaletteTemplate.lit.js\";\nimport ColorPaletteDialogTemplate from \"./generated/templates/ColorPaletteDialogTemplate.lit.js\";\nimport ColorPaletteItem from \"./ColorPaletteItem.js\";\nimport Button from \"./Button.js\";\nimport type Dialog from \"./Dialog.js\";\nimport type ColorPaletteMoreColors from \"./features/ColorPaletteMoreColors.js\";\nimport type ColorPicker from \"./ColorPicker.js\";\n\nimport {\n\tCOLORPALETTE_CONTAINER_LABEL,\n\tCOLOR_PALETTE_MORE_COLORS_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport ColorPaletteCss from \"./generated/themes/ColorPalette.css.js\";\nimport ColorPaletteStaticAreaCss from \"./generated/themes/ColorPaletteStaticArea.css.js\";\n\ntype ColorPaletteNavigationItem = ColorPaletteItem | Button;\n\ntype ColorPaletteItemClickEventDetail = {\n\tcolor: string,\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-color-palette</code> provides the users with a range of predefined colors. The colors are fixed and do not change with the theme.\n *\n * <h3>Usage</h3>\n *\n * The <code>ui5-color-palette</code> is meant for users that need to select a color from a predefined set.\n * To define the colors, use the <code>ui5-color-palette-item</code> component inside the default slot of the <code>ui5-color-palette</code>.\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/ColorPalette.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.ColorPalette\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-color-palette\n * @since 1.0.0-rc.12\n * @appenddocs sap.ui.webc.main.ColorPaletteItem\n * @public\n */\n@customElement({\n\ttag: \"ui5-color-palette\",\n\trenderer: litRender,\n\ttemplate: ColorPaletteTemplate,\n\tstaticAreaTemplate: ColorPaletteDialogTemplate,\n\tstyles: ColorPaletteCss,\n\tstaticAreaStyles: ColorPaletteStaticAreaCss,\n\tget dependencies() {\n\t\tconst colorPaletteMoreColors = getFeature<typeof ColorPaletteMoreColors>(\"ColorPaletteMoreColors\");\n\t\treturn ([ColorPaletteItem, Button] as Array<typeof UI5Element>).concat(colorPaletteMoreColors ? colorPaletteMoreColors.dependencies : []);\n\t},\n})\n\n/**\n * Fired when the user selects a color.\n *\n * @event sap.ui.webc.main.ColorPalette#item-click\n * @public\n * @since 1.0.0-rc.15\n * @param {string} color the selected color\n */\n@event(\"item-click\", {\n\tdetail: {\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t},\n\t},\n})\nclass ColorPalette extends UI5Element {\n\t/**\n\t * Defines whether the user can see the last used colors in the bottom of the component\n\t * @type {boolean}\n\t * @private\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ type: Boolean })\n\tshowRecentColors!: boolean;\n\n\t/**\n\t * Defines whether the user can choose a custom color from a color picker\n\t * <b>Note:</b> In order to use this property you need to import the following module: <code>\"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"</code>\n\t * @type {boolean}\n\t * @private\n\t * @since 1.0.0-rc.15\n\t */\n\t@property({ type: Boolean })\n\tshowMoreColors!: boolean;\n\n\t/**\n\t * Defines whether the user can choose the default color from a button.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @private\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tshowDefaultColor!: boolean;\n\n\t/**\n\t * Defines the default color of the color palette\n\t * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>\n\t * @type {sap.ui.webc.base.types.CSSColor}\n\t * @private\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ validator: CSSColor })\n\tdefaultColor?: string;\n\n\t/**\n\t * Defines the selected color.\n\t * @type {sap.ui.webc.base.types.CSSColor}\n\t * @private\n\t */\n\t@property({ validator: CSSColor })\n\t_selectedColor?: string;\n\n\t/**\n\t * Defines if the palette is in Popup or Embeded mode.\n\t * @type {sap.ui.webc.base.types.CSSColor}\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tpopupMode!: boolean;\n\n\t/**\n\t * Defines the <code>ui5-color-palette-item</code> elements.\n\t * @type {sap.ui.webc.main.IColorPaletteItem[]}\n\t * @name sap.ui.webc.main.ColorPalette.prototype.default\n\t * @slot colors\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: true,\n\t\tindividualSlots: true,\n\t})\n\tcolors!: Array<ColorPaletteItem>;\n\n\t_itemNavigation: ItemNavigation;\n\t_itemNavigationRecentColors: ItemNavigation;\n\t_recentColors: Array<string>;\n\tmoreColorsFeature?: ColorPaletteMoreColors;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tconst colorPaletteMoreColors = getFeature<typeof ColorPaletteMoreColors>(\"ColorPaletteMoreColors\");\n\n\t\t[ColorPalette.i18nBundle] = await Promise.all([\n\t\t\tgetI18nBundle(\"@ui5/webcomponents\"),\n\t\t\tcolorPaletteMoreColors ? colorPaletteMoreColors.init() : Promise.resolve(),\n\t\t]);\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\tgetItemsCallback: () => this.displayedColors,\n\t\t\trowSize: this.rowSize,\n\t\t\tbehavior: ItemNavigationBehavior.Cyclic,\n\t\t});\n\n\t\tthis._itemNavigationRecentColors = new ItemNavigation(this, {\n\t\t\tgetItemsCallback: () => this.recentColorsElements,\n\t\t\trowSize: this.rowSize,\n\t\t\tbehavior: ItemNavigationBehavior.Static,\n\t\t});\n\n\t\tthis._recentColors = [];\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.displayedColors.forEach((item, index) => {\n\t\t\titem.index = index + 1;\n\t\t});\n\n\t\tif (this.showMoreColors) {\n\t\t\tconst ColorPaletteMoreColorsClass = getFeature<typeof ColorPaletteMoreColors>(\"ColorPaletteMoreColors\");\n\t\t\tif (ColorPaletteMoreColorsClass) {\n\t\t\t\tthis.moreColorsFeature = new ColorPaletteMoreColorsClass();\n\t\t\t} else {\n\t\t\t\tthrow new Error(`You have to import \"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\" module to use the more-colors functionality.`);\n\t\t\t}\n\t\t}\n\t}\n\n\tselectColor(item: ColorPaletteItem) {\n\t\tif (!item.value) {\n\t\t\treturn;\n\t\t}\n\n\t\titem.focus();\n\n\t\tif (this.displayedColors.includes(item)) {\n\t\t\tthis._itemNavigation.setCurrentItem(item);\n\t\t}\n\n\t\tthis._setColor(item.value);\n\t}\n\n\t_setColor(color: string) {\n\t\tthis._selectedColor = color;\n\t\tif (this._recentColors[0] !== this._selectedColor) {\n\t\t\tif (this._recentColors.includes(this._selectedColor)) {\n\t\t\t\tthis._recentColors.unshift(this._recentColors.splice(this._recentColors.indexOf(this._selectedColor), 1)[0]);\n\t\t\t} else {\n\t\t\t\tthis._recentColors.unshift(this._selectedColor);\n\t\t\t}\n\t\t}\n\n\t\tthis.fireEvent<ColorPaletteItemClickEventDetail>(\"item-click\", {\n\t\t\tcolor: this._selectedColor,\n\t\t});\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tconst target = e.target as ColorPaletteItem;\n\t\tif (target.hasAttribute(\"ui5-color-palette-item\")) {\n\t\t\tthis.selectColor(target);\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tconst target = e.target as ColorPaletteItem;\n\t\tif (isSpace(e) && target.hasAttribute(\"ui5-color-palette-item\")) {\n\t\t\te.preventDefault();\n\t\t\tthis.selectColor(target);\n\t\t}\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tconst target = e.target as ColorPaletteItem;\n\t\tif (isEnter(e) && target.hasAttribute(\"ui5-color-palette-item\")) {\n\t\t\tthis.selectColor(target);\n\t\t}\n\t}\n\n\t_onDefaultColorKeyDown(e: KeyboardEvent) {\n\t\tif (isTabNext(e) && this.popupMode) {\n\t\t\te.preventDefault();\n\t\t\tthis._onDefaultColorClick();\n\t\t}\n\n\t\tif (isDown(e)) {\n\t\t\te.stopPropagation();\n\n\t\t\tthis.focusColorElement(this.colorPaletteNavigationElements[1], this._itemNavigation);\n\t\t} else if (isUp(e)) {\n\t\t\te.stopPropagation();\n\t\t\tconst lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];\n\n\t\t\tif (this.hasRecentColors) {\n\t\t\t\tthis.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);\n\t\t\t} else if (this.showMoreColors) {\n\t\t\t\tlastElementInNavigation.focus();\n\t\t\t} else {\n\t\t\t\tconst colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;\n\n\t\t\t\tthis.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);\n\t\t\t}\n\t\t}\n\t}\n\n\t_onMoreColorsKeyDown(e: KeyboardEvent) {\n\t\tconst target = e.target as ColorPaletteItem;\n\t\tconst index = this.colorPaletteNavigationElements.indexOf(target);\n\t\tconst colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;\n\n\t\tif (isUp(e)) {\n\t\t\te.stopPropagation();\n\n\t\t\tthis.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);\n\t\t} else if (isDown(e)) {\n\t\t\te.stopPropagation();\n\n\t\t\tif (this.hasRecentColors) {\n\t\t\t\tthis.focusColorElement(this.colorPaletteNavigationElements[index + 1], this._itemNavigationRecentColors);\n\t\t\t} else if (this.showDefaultColor) {\n\t\t\t\tthis.colorPaletteNavigationElements[0].focus();\n\t\t\t} else {\n\t\t\t\tthis.focusColorElement(this.displayedColors[0], this._itemNavigation);\n\t\t\t}\n\t\t}\n\t}\n\n\t_onColorContainerKeyDown(e: KeyboardEvent) {\n\t\tconst target = e.target as ColorPaletteItem;\n\t\tconst lastElementInNavigation = this.colorPaletteNavigationElements[this.colorPaletteNavigationElements.length - 1];\n\t\tif (isTabNext(e) && this.popupMode) {\n\t\t\te.preventDefault();\n\t\t\tthis.selectColor(target);\n\t\t}\n\n\t\tif (isUp(e) && target === this.displayedColors[0] && this.colorPaletteNavigationElements.length > 1) {\n\t\t\te.stopPropagation();\n\t\t\tif (this.showDefaultColor) {\n\t\t\t\tthis.colorPaletteNavigationElements[0].focus();\n\t\t\t} else if (!this.showDefaultColor && this.hasRecentColors) {\n\t\t\t\tthis.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);\n\t\t\t} else if (!this.showDefaultColor && this.showMoreColors) {\n\t\t\t\tlastElementInNavigation.focus();\n\t\t\t}\n\t\t} else if (isDown(e) && target === this.displayedColors[this.displayedColors.length - 1] && this.colorPaletteNavigationElements.length > 1) {\n\t\t\te.stopPropagation();\n\t\t\tconst isRecentColorsNextElement = (this.showDefaultColor && !this.showMoreColors && this.hasRecentColors) || (!this.showDefaultColor && !this.showMoreColors && this.hasRecentColors);\n\n\t\t\tif (this.showDefaultColor && this.showMoreColors) {\n\t\t\t\tthis.colorPaletteNavigationElements[2].focus();\n\t\t\t} else if (this.showDefaultColor && !this.showMoreColors && (!this.showRecentColors || !this.recentColors[0])) {\n\t\t\t\tthis.colorPaletteNavigationElements[0].focus();\n\t\t\t} else if (isRecentColorsNextElement) {\n\t\t\t\tthis.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors);\n\t\t\t} else if (!this.showDefaultColor && this.showMoreColors) {\n\t\t\t\tthis.colorPaletteNavigationElements[1].focus();\n\t\t\t}\n\t\t}\n\t}\n\n\t_onRecentColorsContainerKeyDown(e: KeyboardEvent) {\n\t\tif (isUp(e)) {\n\t\t\tif (this.showMoreColors) {\n\t\t\t\tconst navigationElementsIndex = this.showDefaultColor ? 2 : 1;\n\t\t\t\tthis.colorPaletteNavigationElements[navigationElementsIndex].focus();\n\t\t\t} else if (!this.showMoreColors && this.colorPaletteNavigationElements.length > 1) {\n\t\t\t\tconst colorPaletteFocusIndex = (this.displayedColors.length % this.rowSize) * this.rowSize;\n\t\t\t\te.stopPropagation();\n\n\t\t\t\tthis.focusColorElement(this.displayedColors[colorPaletteFocusIndex], this._itemNavigation);\n\t\t\t}\n\t\t} else if (isDown(e)) {\n\t\t\tif (this.showDefaultColor) {\n\t\t\t\tthis.colorPaletteNavigationElements[0].focus();\n\t\t\t} else {\n\t\t\t\te.stopPropagation();\n\t\t\t\tthis.focusColorElement(this.displayedColors[0], this._itemNavigation);\n\t\t\t}\n\t\t}\n\t}\n\n\tfocusColorElement(element: ColorPaletteNavigationItem, itemNavigation: ItemNavigation) {\n\t\titemNavigation.setCurrentItem(element);\n\t\titemNavigation._focusCurrentItem();\n\t}\n\n\tasync _chooseCustomColor() {\n\t\tconst colorPicker = await this.getColorPicker();\n\t\tthis._setColor(colorPicker.color);\n\t\tthis._closeDialog();\n\t}\n\n\tasync _closeDialog() {\n\t\tconst dialog = await this._getDialog();\n\t\tdialog.close();\n\t}\n\n\tasync _openMoreColorsDialog() {\n\t\tconst dialog = await this._getDialog();\n\t\tdialog.show();\n\t}\n\n\t_onDefaultColorClick() {\n\t\tif (this.defaultColor) {\n\t\t\tthis._setColor(this.defaultColor);\n\t\t}\n\t}\n\n\t/**\n\t * Returns the selected color.\n\t */\n\tget selectedColor() {\n\t\treturn this._selectedColor;\n\t}\n\n\tget displayedColors() {\n\t\tconst colors = this.getSlottedNodes<ColorPaletteItem>(\"colors\");\n\t\treturn colors.filter(item => item.value).slice(0, 15);\n\t}\n\n\tget colorContainerLabel() {\n\t\treturn ColorPalette.i18nBundle.getText(COLORPALETTE_CONTAINER_LABEL);\n\t}\n\n\tget colorPaleteMoreColorsText() {\n\t\treturn ColorPalette.i18nBundle.getText(COLOR_PALETTE_MORE_COLORS_TEXT);\n\t}\n\n\tget _showMoreColors() {\n\t\treturn this.showMoreColors && this.moreColorsFeature;\n\t}\n\n\tget rowSize() {\n\t\treturn 5;\n\t}\n\n\tget hasRecentColors() {\n\t\treturn this.showRecentColors && this.recentColors[0];\n\t}\n\n\tget recentColors() {\n\t\tif (this._recentColors.length > this.rowSize) {\n\t\t\tthis._recentColors = this._recentColors.slice(0, this.rowSize);\n\t\t}\n\n\t\twhile (this._recentColors.length < this.rowSize) {\n\t\t\tthis._recentColors.push(\"\");\n\t\t}\n\n\t\treturn this._recentColors;\n\t}\n\n\tget recentColorsElements(): Array<ColorPaletteItem> {\n\t\tconst domRef = this.getDomRef();\n\t\tif (domRef) {\n\t\t\treturn Array.from(domRef.querySelectorAll<ColorPaletteItem>(\".ui5-cp-recent-colors-wrapper [ui5-color-palette-item]\")).filter(x => x.value !== \"\");\n\t\t}\n\n\t\treturn [];\n\t}\n\n\tget colorPaletteNavigationElements() {\n\t\tconst navigationElements: Array<ColorPaletteNavigationItem> = [];\n\t\tconst rootElement = this.shadowRoot!.querySelector(\".ui5-cp-root\")!;\n\n\t\tif (this.showDefaultColor) {\n\t\t\tnavigationElements.push(rootElement.querySelector<Button>(\".ui5-cp-default-color-button\")!);\n\t\t}\n\n\t\tnavigationElements.push(this.displayedColors[0]);\n\n\t\tif (this.showMoreColors) {\n\t\t\tnavigationElements.push(rootElement.querySelector<Button>(\".ui5-cp-more-colors\")!);\n\t\t}\n\n\t\tif (this.showRecentColors && !!this.recentColorsElements.length) {\n\t\t\tnavigationElements.push(this.recentColorsElements[0]);\n\t\t}\n\n\t\treturn navigationElements;\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tcolorPaletteRoot: {\n\t\t\t\t\"ui5-cp-root\": true,\n\t\t\t\t\"ui5-cp-root-phone\": isPhone(),\n\t\t\t},\n\t\t};\n\t}\n\n\tasync _getDialog() {\n\t\tconst staticAreaItem = await this.getStaticAreaItemDomRef();\n\t\treturn staticAreaItem!.querySelector<Dialog>(\"[ui5-dialog]\")!;\n\t}\n\n\tasync getColorPicker() {\n\t\tconst dialog = await this._getDialog();\n\t\treturn dialog.content[0].querySelector<ColorPicker>(\"[ui5-color-picker]\")!;\n\t}\n}\n\nColorPalette.define();\n\nexport default ColorPalette;\nexport type { ColorPaletteItemClickEventDetail };\n"]}

package/dist/ColorPaletteItem.d.ts

@@ -0,0 +1,66 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-color-palette-item</code> component represents a color in the the <code>ui5-color-palette</code>.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ColorPaletteItem
+ * @extends sap.ui.webc.base.UI5Element
+ * @abstract
+ * @tagname ui5-color-palette-item
+ * @since 1.0.0-rc.12
+ * @implements sap.ui.webc.main.IColorPaletteItem
+ * @public
+ */
+declare class ColorPaletteItem extends UI5Element implements ITabbable {
+    /**
+     * Defines the colour of the component.
+     * <br><br>
+     * <b>Note:</b> The value should be a valid CSS color.
+     *
+     * @type {sap.ui.webc.base.types.CSSColor}
+     * @name sap.ui.webc.main.ColorPaletteItem.prototype.value
+     * @public
+     */
+    value: string;
+    /**
+     * Defines the tab-index of the element, helper information for the ItemNavigation.
+     * @private
+     */
+    _tabIndex: string;
+    /**
+     * Defines the index of the item inside of the ColorPalette.
+     * @private
+     * @type {Integer}
+     */
+    index?: number;
+    /**
+     * Defines if the ColorPalette is on phone mode.
+     * @private
+     * @type {boolean}
+     */
+    phone: boolean;
+    /**
+     * @private
+     * @type {boolean}
+     * @since 1.0.0-rc.15
+     */
+    _disabled: boolean;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    constructor();
+    onBeforeRendering(): void;
+    get colorLabel(): string;
+    get styles(): {
+        root: {
+            "background-color": string;
+        };
+    };
+}
+export default ColorPaletteItem;