@ui5/webcomponents 0.0.0-a3eca7ade → 0.0.0-a8a75c830

package/dist/ColorPalettePopover.js

@@ -1,105 +1,27 @@
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import CSSColor from "@ui5/webcomponents-base/dist/types/CSSColor.js";
-import ColorPalettePopoverTemplate from "./generated/templates/ColorPalettePopoverTemplate.lit.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-strict.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 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";
-
-import Button from "./Button.js";
-import Title from "./Title.js";
-import ResponsivePopover from "./ResponsivePopover.js";
-import ColorPalette from "./ColorPalette.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-color-palette-popover",
-	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.ColorPalettePopover.prototype */ {
-		/**
-		 * Defines whether the user can see the last used colors in the bottom of the component
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showRecentColors: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the user can choose a custom color from a component.
-		 * <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}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showMoreColors: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether the user can choose the default color from a button.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		showDefaultColor: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the default color of the component.
-		 * <b>Note:</b> The default color should be a part of the ColorPalette colors</code>
-		 * @type {CSSColor}
-		 * @public
-		 */
-		defaultColor: {
-			type: CSSColor,
-		},
-	},
-	slots: /** @lends sap.ui.webcomponents.main.ColorPalettePopover.prototype */ {
-		/**
-		 * Defines the content of the component.
-		 * @type {sap.ui.webcomponents.main.IColorPaletteItem[]}
-		 * @slot colors
-		 * @public
-		 */
-		"default": {
-			type: HTMLElement,
-			propertyName: "colors",
-			individualSlots: true,
-		},
-	},
-	events: /** @lends sap.ui.webcomponents.main.ColorPalettePopover.prototype */ {
-		/**
-		 * Fired when the user selects a color.
-		 *
-		 * @event sap.ui.webcomponents.main.ColorPalettePopover#item-click
-		 * @public
-		 * @param {string} color the selected color
-		 */
-		"item-click": {
-			details: {
-				color: {
-					type: String,
-				},
-			},
-		 },
-	},
-};
-
+import { COLORPALETTE_POPOVER_TITLE, COLOR_PALETTE_DIALOG_CANCEL_BUTTON, } from "./generated/i18n/i18n-defaults.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  * Represents a predefined range of colors for easier selection.
  *
  * Overview
@@ -108,137 +30,173 @@ const metadata = {
  * 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.
  *
- * <h3>Usage</h3>
+ * ### 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 <code>ui5-color-palette-popover</code>
- * <h3>ES6 Module Import</h3>
- *
- * <code>import @ui5/webcomponents/dist/ColorPalettePopover.js";</code>
+ * For the `ui5-color-palette-popover`
+ * ### ES6 Module Import
  *
+ * `import @ui5/webcomponents/dist/ColorPalettePopover.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.ColorPalettePopover
  * @extends UI5Element
- * @tagname ui5-color-palette-popover
  * @public
  * @since 1.0.0-rc.16
  */
-class ColorPalettePopover extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get styles() {
-		return [ResponsivePopoverCommonCss, ColorPalettePopoverCss];
-	}
-
-	static get template() {
-		return ColorPalettePopoverTemplate;
-	}
-
-	static get dependencies() {
-		return [
-			ResponsivePopover,
-			Button,
-			Title,
-			ColorPalette,
-		];
-	}
-
-	static async onDefine() {
-		ColorPalettePopover.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-
-	constructor() {
-		super();
-	}
-
-	_respPopover() {
-		this.responsivePopover = this.shadowRoot.querySelector("[ui5-responsive-popover]");
-
-		return this.responsivePopover;
-	}
-
-	_colorPalette() {
-		return this.responsivePopover.content[0].querySelector("[ui5-color-palette]");
-	}
-
-	/**
-	 * Shows the ColorPalettePopover.
-	 * @param {HTMLElement} opener the element that the popover is shown at
-	 * @public
-	 * @since 1.1.1
-	 */
-	showAt(opener) {
-		this._openPopover(opener);
-	}
-
-	/**
-	 * Shows the ColorPalettePopover.
-	 * <b>Note:</b> The method is deprecated and will be removed in future, use <code>showAt</code> instead.
-	 * @param {HTMLElement} opener the element that the popover is shown at
-	 * @public
-	 * @since 1.0.0-rc.16
-	 * @deprecated The method is deprecated in favour of <code>showAt</code>.
-	 */
-	openPopover(opener) {
-		console.warn("The method 'openPopover' is deprecated and will be removed in future, use 'showAt' instead."); // eslint-disable-line
-		this._openPopover(opener);
-	}
-
-	_openPopover(opener) {
-		this._respPopover();
-
-		this.responsivePopover.showAt(opener, true);
-
-		if (this.showDefaultColor) {
-			this._colorPalette().colorPaletteNavigationElements[0].focus();
-		} else {
-			this._colorPalette().focusColorElement(this._colorPalette().colorPaletteNavigationElements[0], this._colorPalette()._itemNavigation);
-		}
-	}
-
-	closePopover() {
-		this.responsivePopover.close();
-	}
-
-	onSelectedColor(event) {
-		this.closePopover();
-		this.fireEvent("item-click", event.detail);
-	}
-
-	/**
-	 * Returns if the component is opened.
-	 *
-	 * @protected
-	 * @since 1.0.0-rc.16
-	 * @returns {boolean}
-	 */
-	isOpen() {
-		this._respPopover();
-
-		return this.responsivePopover.opened;
-	}
-
-	get colorPaletteColors() {
-		return this.getSlottedNodes("colors");
-	}
-
-	get _colorPaletteTitle() {
-		return ColorPalettePopover.i18nBundle.getText(COLORPALETTE_POPOVER_TITLE);
-	}
-
-	get _cancelButtonLabel() {
-		return ColorPalettePopover.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);
-	}
-}
-
+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.
+         *
+         * @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;
+        /**
+         * Determines on which side the component is placed at.
+         * @default "Bottom"
+         * @public
+         * @since 2.19.0
+         */
+        this.placement = "Bottom";
+    }
+    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._defaultColorButton?.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("--_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()
+], ColorPalettePopover.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], ColorPalettePopover.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Boolean })
+], ColorPalettePopover.prototype, "open", void 0);
+__decorate([
+    property({ converter: DOMReferenceConverter })
+], ColorPalettePopover.prototype, "opener", void 0);
+__decorate([
+    property()
+], ColorPalettePopover.prototype, "placement", 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":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,qBAAqB,MAAM,yDAAyD,CAAC;AAC5F,OAAO,2BAA2B,MAAM,kCAAkC,CAAC;AAG3E,SAAS;AACT,OAAO,sBAAsB,MAAM,+CAA+C,CAAC;AACnF,OAAO,0BAA0B,MAAM,mDAAmD,CAAC;AAC3F,OAAO,EACN,0BAA0B,EAC1B,kCAAkC,GAClC,MAAM,mCAAmC,CAAC;AAS3C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAwBH,IAAM,mBAAmB,2BAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAkG3C;QACC,KAAK,EAAE,CAAC;QA7FT;;;;WAIG;QAEH,qBAAgB,GAAG,KAAK,CAAA;QAExB;;;;;WAKG;QAEH,mBAAc,GAAG,KAAK,CAAA;QAEtB;;;;WAIG;QAEH,qBAAgB,GAAG,KAAK,CAAA;QA8BxB;;;;;WAKG;QAEH,SAAI,GAAG,KAAK,CAAA;QAaZ;;;;;WAKG;QAEH,cAAS,GAA0B,QAAQ,CAAC;IAc5C,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAoB,0BAA0B,CAAE,CAAC;IACvF,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAoB,0BAA0B,CAAE,CAAC;IACvF,CAAC;IAED,YAAY;QACX,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACnB,CAAC;IAED,YAAY;QACX,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED,WAAW;QACV,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;QACxC,IAAI,YAAY,CAAC,kBAAkB,EAAE,CAAC;YACrC,YAAY,CAAC,kBAAkB,EAAE,KAAK,EAAE,CAAC;QAC1C,CAAC;aAAM,IAAI,YAAY,CAAC,gBAAgB,IAAI,YAAY,CAAC,oBAAoB,CAAC,MAAM,EAAE,CAAC;YACtF,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC9C,CAAC;aAAM,IAAI,YAAY,CAAC,gBAAgB,EAAE,CAAC;YAC1C,YAAY,CAAC,mBAAmB,EAAE,KAAK,EAAE,CAAC;QAC3C,CAAC;QAED,gEAAgE;QAChE,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAuB,EAAE,EAAE;YACnE,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,+CAA+C;YACzF,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,kCAAkC,EAAE,GAAG,UAAU,IAAI,CAAC,CAAC;QAC/E,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,eAAe,CAAC,CAAgD;QAC/D,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;IACjD,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,CAAe,qBAAqB,CAAE,CAAC;IAC9F,CAAC;IAED;;;;OAIG;IACH,MAAM;QACL,OAAO,IAAI,CAAC,IAAI,CAAC;IAClB,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,eAAe,CAAmB,QAAQ,CAAC,CAAC;IACzD,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,qBAAmB,CAAC,UAAU,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;IAC3E,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,qBAAmB,CAAC,UAAU,CAAC,OAAO,CAAC,kCAAkC,CAAC,CAAC;IACnF,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC;IAC/B,CAAC;CACD,CAAA;AA7JA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DACJ;AASxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACN;AAQtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DACJ;AAUxB;IADC,QAAQ,EAAE;yDACW;AAStB;IADC,QAAQ,EAAE;2DACa;AASxB;IADC,QAAQ,EAAE;8DACgB;AAS3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAChB;AAWZ;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;mDACV;AASrC;IADC,QAAQ,EAAE;sDACiC;AAO5C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAGjC;IADN,IAAI,CAAC,oBAAoB,CAAC;6CACG;AAhGzB,mBAAmB;IAvBxB,aAAa,CAAC;QACd,GAAG,EAAE,2BAA2B;QAChC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,0BAA0B,EAAE,sBAAsB,CAAC;QAC5D,QAAQ,EAAE,2BAA2B;KACrC,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,YAAY,EAAE;QACpB,OAAO,EAAE,IAAI;KACb,CAAC;IACF;;;;OAIG;;IACF,KAAK,CAAC,OAAO,EAAE;QACf,OAAO,EAAE,IAAI;KACb,CAAC;GACI,mBAAmB,CAyKxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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-strict.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 ColorPalettePopoverTemplate from \"./ColorPalettePopoverTemplate.js\";\nimport type PopoverPlacement from \"./types/PopoverPlacement.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 * @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 accessible name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 2.20.0\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t * @default undefined\n\t * @public\n\t * @since 2.20.0\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the 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 | null;\n\n\t/**\n\t * Determines on which side the component is placed at.\n\t * @default \"Bottom\"\n\t * @public\n\t * @since 2.19.0\n\t */\n\t@property()\n\tplacement: `${PopoverPlacement}` = \"Bottom\";\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!: DefaultSlot<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._defaultColorButton?.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(\"--_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: this.placement, opener: this.opener, open: this._open, onClose: this.onAfterClose, onOpen: this.onAfterOpen, accessibleName: this._colorPaletteTitle, 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, accessibleName: this.accessibleName, accessibleNameRef: this.accessibleNameRef, 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,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,cAAc,EAAE,IAAI,CAAC,kBAAkB,aAEvC,cAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,YACvC,KAAC,KAAK,IAAC,KAAK,EAAC,IAAI,EAAC,YAAY,EAAC,MAAM,YACnC,IAAI,CAAC,kBAAkB,GACjB,GACH,EAEN,wBACC,KAAC,YAAY,IACZ,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,eAAe,YAEhC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACpC,eAAM,IAAI,EAAE,KAAK,CAAC,eAAe,GAAS,CAC1C,GACa,GACV,EAEN,cAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,YACvC,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,YAEzB,IAAI,CAAC,kBAAkB,GAChB,GACJ,IACa,CACpB,CAAC;AACH,CAAC","sourcesContent":["import type ColorPalettePopover from \"./ColorPalettePopover.js\";\nimport Title from \"./Title.js\";\nimport Button from \"./Button.js\";\nimport ColorPalette from \"./ColorPalette.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\n\nexport default function ColorPalettePopoverTemplate(this: ColorPalettePopover) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\thideArrow={true}\n\t\t\tcontentOnlyOnDesktop={true}\n\t\t\tplacement={this.placement}\n\t\t\topener={this.opener}\n\t\t\topen={this._open}\n\t\t\tonClose={this.onAfterClose}\n\t\t\tonOpen={this.onAfterOpen}\n\t\t\taccessibleName={this._colorPaletteTitle}\n\t\t>\n\t\t\t<div slot=\"header\" class=\"ui5-cp-header\">\n\t\t\t\t<Title level=\"H1\" wrappingType=\"None\">\n\t\t\t\t\t{this._colorPaletteTitle}\n\t\t\t\t</Title>\n\t\t\t</div>\n\n\t\t\t<div>\n\t\t\t\t<ColorPalette\n\t\t\t\t\tshowMoreColors={this.showMoreColors}\n\t\t\t\t\tshowRecentColors={this.showRecentColors}\n\t\t\t\t\tshowDefaultColor={this.showDefaultColor}\n\t\t\t\t\tdefaultColor={this.defaultColor}\n\t\t\t\t\taccessibleName={this.accessibleName}\n\t\t\t\t\taccessibleNameRef={this.accessibleNameRef}\n\t\t\t\t\tpopupMode={true}\n\t\t\t\t\tonItemClick={this.onSelectedColor}\n\t\t\t\t>\n\t\t\t\t\t{this.colorPaletteColors.map(color =>\n\t\t\t\t\t\t<slot name={color._individualSlot}></slot>\n\t\t\t\t\t)}\n\t\t\t\t</ColorPalette>\n\t\t\t</div>\n\n\t\t\t<div slot=\"footer\" class=\"ui5-cp-footer\">\n\t\t\t\t<Button\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this.closePopover}\n\t\t\t\t>\n\t\t\t\t\t{this._cancelButtonLabel}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</ResponsivePopover>\n\t);\n}\n"]}

package/dist/ColorPaletteTemplate.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, onMouseDown: this._onmousedown, children: [this.showDefaultColor &&
+                        _jsxs("div", { class: "ui5-cp-default-color-button-wrapper", children: [_jsx(Button, { class: "ui5-cp-default-color-button", design: "Transparent", onClick: this._onDefaultColorClick, onKeyUp: this._onDefaultColorKeyUp, onKeyDown: this._onDefaultColorKeyDown, children: this.colorPaletteDefaultColorText }), _jsx("div", { class: "ui5-cp-separator" })] }), _jsx("div", { class: "ui5-cp-item-container", role: "group", "aria-label": this.colorContainerLabel, onKeyDown: this._onColorContainerKeyDown, children: this.displayedColors.map(color => _jsx("slot", { name: color._individualSlot })) }), this.showMoreColors &&
+                        _jsxs("div", { class: "ui5-cp-more-colors-wrapper", children: [_jsx("div", { class: "ui5-cp-separator" }), _jsx(Button, { design: "Transparent", class: "ui5-cp-more-colors", onClick: this._openMoreColorsDialog, onKeyDown: this._onMoreColorsKeyDown, children: this.colorPaletteMoreColorsText })] }), this.showRecentColors &&
+                        _jsxs("div", { class: "ui5-cp-recent-colors-wrapper", children: [_jsx("div", { class: "ui5-cp-separator" }), _jsx("div", { class: "ui5-cp-recent-colors-container", onKeyDown: this._onRecentColorsContainerKeyDown, children: this.recentColors.map(color => _jsx(ColorPaletteItem, { value: color })) })] })] }), this.showMoreColors && this.showMoreColorsTemplate?.call(this)] }));
+}
+//# 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,EAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,aAE7B,IAAI,CAAC,gBAAgB;wBACrB,eAAK,KAAK,EAAC,qCAAqC,aAC/C,KAAC,MAAM,IACN,KAAK,EAAC,6BAA6B,EACnC,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,sBAAsB,YAErC,IAAI,CAAC,4BAA4B,GAC1B,EACT,cAAK,KAAK,EAAC,kBAAkB,GAAO,IAC/B,EAEP,cAAK,KAAK,EAAC,uBAAuB,EACjC,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,mBAAmB,EACpC,SAAS,EAAE,IAAI,CAAC,wBAAwB,YAEvC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACjC,eAAM,IAAI,EAAE,KAAK,CAAC,eAAe,GAAS,CAC1C,GACI,EAEL,IAAI,CAAC,cAAc;wBACnB,eAAK,KAAK,EAAC,4BAA4B,aACtC,cAAK,KAAK,EAAC,kBAAkB,GAAO,EACpC,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,SAAS,EAAE,IAAI,CAAC,oBAAoB,YAEnC,IAAI,CAAC,0BAA0B,GACxB,IACJ,EAGN,IAAI,CAAC,gBAAgB;wBACrB,eAAK,KAAK,EAAC,8BAA8B,aACxC,cAAK,KAAK,EAAC,kBAAkB,GAAO,EACpC,cAAK,KAAK,EAAC,gCAAgC,EAAC,SAAS,EAAE,IAAI,CAAC,+BAA+B,YACzF,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAC9B,KAAC,gBAAgB,IAAC,KAAK,EAAE,KAAK,GAAG,CACjC,GACI,IACD,IAEF,EAEJ,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,IAAI,CAAC,IAC9D,CACH,CAAC;AACH,CAAC","sourcesContent":["import { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport type ColorPalette from \"./ColorPalette.js\";\nimport Button from \"./Button.js\";\nimport ColorPaletteItem from \"./ColorPaletteItem.js\";\n\nexport default function ColorPaletteTemplate(this: ColorPalette) {\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-cp-root\": true,\n\t\t\t\t\t\"ui5-cp-root-phone\": isPhone(),\n\t\t\t\t}}\n\t\t\t\tonClick={this._onclick}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t>\n\t\t\t\t{this.showDefaultColor &&\n\t\t\t\t\t<div class=\"ui5-cp-default-color-button-wrapper\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclass=\"ui5-cp-default-color-button\"\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\tonClick={this._onDefaultColorClick}\n\t\t\t\t\t\t\tonKeyUp={this._onDefaultColorKeyUp}\n\t\t\t\t\t\t\tonKeyDown={this._onDefaultColorKeyDown}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.colorPaletteDefaultColorText}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<div class=\"ui5-cp-separator\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<div class=\"ui5-cp-item-container\"\n\t\t\t\t\trole=\"group\"\n\t\t\t\t\taria-label={this.colorContainerLabel}\n\t\t\t\t\tonKeyDown={this._onColorContainerKeyDown}\n\t\t\t\t>\n\t\t\t\t\t{this.displayedColors.map(color =>\n\t\t\t\t\t\t<slot name={color._individualSlot}></slot>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{this.showMoreColors &&\n\t\t\t\t\t<div class=\"ui5-cp-more-colors-wrapper\">\n\t\t\t\t\t\t<div class=\"ui5-cp-separator\"></div>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\tclass=\"ui5-cp-more-colors\"\n\t\t\t\t\t\t\tonClick={this._openMoreColorsDialog}\n\t\t\t\t\t\t\tonKeyDown={this._onMoreColorsKeyDown}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.colorPaletteMoreColorsText}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{this.showRecentColors &&\n\t\t\t\t\t<div class=\"ui5-cp-recent-colors-wrapper\">\n\t\t\t\t\t\t<div class=\"ui5-cp-separator\"></div>\n\t\t\t\t\t\t<div class=\"ui5-cp-recent-colors-container\" onKeyDown={this._onRecentColorsContainerKeyDown}>\n\t\t\t\t\t\t\t{this.recentColors.map(color =>\n\t\t\t\t\t\t\t\t<ColorPaletteItem value={color}/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t{ this.showMoreColors && this.showMoreColorsTemplate?.call(this) }\n\t\t</>\n\t);\n}\n"]}