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

package/dist/Toolbar.d.ts

@@ -1,12 +1,11 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+import type { ChangeInfo, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type ToolbarAlign from "./types/ToolbarAlign.js";
 import type ToolbarDesign from "./types/ToolbarDesign.js";
-import type ToolbarItem from "./ToolbarItem.js";
+import type ToolbarItemBase from "./ToolbarItemBase.js";
 import type Button from "./Button.js";
 import type Popover from "./Popover.js";
 type ToolbarMinWidthChangeEventDetail = {
@@ -73,6 +72,15 @@ declare class Toolbar extends UI5Element {
      * @public
      */
     accessibleNameRef?: string;
+    /**
+     * Defines the accessible ARIA name of the overflow button of the component.
+     *
+     * **Note:** When not set, the built-in translation for "Additional Options" is used.
+     * @default undefined
+     * @public
+     * @since 2.22.0
+     */
+    overflowButtonAccessibleName?: string;
     /**
      * Defines the toolbar design.
      * @public
@@ -87,10 +95,10 @@ declare class Toolbar extends UI5Element {
      * **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.
      * @public
      */
-    items: Array<ToolbarItem>;
+    items: DefaultSlot<ToolbarItemBase>;
     _onResize: ResizeObserverCallback;
     _onCloseOverflow: EventListener;
-    itemsToOverflow: Array<ToolbarItem>;
+    itemsToOverflow: Array<ToolbarItemBase>;
     itemsWidth: number;
     minContentWidth: number;
     ITEMS_WIDTH_MAP: Map<string, number>;
@@ -101,12 +109,12 @@ declare class Toolbar extends UI5Element {
      */
     get overflowButtonSize(): number;
     get padding(): number;
-    get alwaysOverflowItems(): ToolbarItem[];
-    get movableItems(): ToolbarItem[];
-    get overflowItems(): ToolbarItem[];
-    get standardItems(): ToolbarItem[];
+    get alwaysOverflowItems(): ToolbarItemBase[];
+    get movableItems(): ToolbarItemBase[];
+    get overflowItems(): ToolbarItemBase[];
+    get standardItems(): ToolbarItemBase[];
     get hideOverflowButton(): boolean;
-    get interactiveItems(): ToolbarItem[];
+    get interactiveItems(): ToolbarItemBase[];
     /**
      * Accessibility
      */
@@ -143,6 +151,7 @@ declare class Toolbar extends UI5Element {
     onInvalidation(changeInfo: ChangeInfo): void;
     onBeforeRendering(): void;
     onAfterRendering(): Promise<void>;
+    addItemsAdditionalProperties(item: ToolbarItemBase): void;
     /**
      * Returns if the overflow popup is open.
      * @public
@@ -160,12 +169,15 @@ declare class Toolbar extends UI5Element {
     distributeItems(overflowSpace?: number): void;
     distributeItemsThatAlwaysOverflow(): void;
     setSeperatorsVisibilityInOverflow(): void;
-    shouldShowSeparatorInOverflow(separatorIdx: number, overflowItems: Array<ToolbarItem>): boolean;
+    shouldShowSeparatorInOverflow(separatorIdx: number, overflowItems: Array<ToolbarItemBase>): boolean;
+    /**
+     * Adds AlwaysOverflow items to overflow to ensure they are never rendered outside overflow (and visual flash is prevented)
+     */
+    prePopulateAlwaysOverflowItems(): void;
     /**
      * Event Handlers
      */
     onOverflowPopoverClosed(): void;
-    onBeforeClose(e: UI5CustomEvent<Popover, "before-close">): void;
     onOverflowPopoverOpened(): void;
     onResize(): void;
     /**
@@ -174,7 +186,7 @@ declare class Toolbar extends UI5Element {
     attachListeners(): void;
     detachListeners(): void;
     onToolbarItemChange(): void;
-    getItemWidth(item: ToolbarItem): number;
+    getItemWidth(item: ToolbarItemBase): number;
     getCachedItemWidth(id: string): number | undefined;
 }
 export default Toolbar;

package/dist/Toolbar.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var Toolbar_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
@@ -16,7 +16,6 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL, TOOLBAR_POPOVER_AVAILABLE_VALUES, } from "./generated/i18n/i18n-defaults.js";
 import ToolbarTemplate from "./ToolbarTemplate.js";
 import ToolbarCss from "./generated/themes/Toolbar.css.js";
@@ -93,14 +92,14 @@ let Toolbar = Toolbar_1 = class Toolbar extends UI5Element {
     }
     get padding() {
         const toolbarComputedStyle = getComputedStyle(this.getDomRef());
-        return calculateCSSREMValue(toolbarComputedStyle, getScopedVarName("--_ui5-toolbar-padding-left"))
-            + calculateCSSREMValue(toolbarComputedStyle, getScopedVarName("--_ui5-toolbar-padding-right"));
+        return calculateCSSREMValue(toolbarComputedStyle, "--_ui5-toolbar-padding-left")
+            + calculateCSSREMValue(toolbarComputedStyle, "--_ui5-toolbar-padding-right");
     }
     get alwaysOverflowItems() {
-        return this.items.filter((item) => item.overflowPriority === ToolbarItemOverflowBehavior.AlwaysOverflow);
+        return this.items.filter(item => item.overflowPriority === ToolbarItemOverflowBehavior.AlwaysOverflow);
     }
     get movableItems() {
-        return this.items.filter((item) => item.overflowPriority !== ToolbarItemOverflowBehavior.AlwaysOverflow && item.overflowPriority !== ToolbarItemOverflowBehavior.NeverOverflow);
+        return this.items.filter(item => item.overflowPriority !== ToolbarItemOverflowBehavior.AlwaysOverflow && item.overflowPriority !== ToolbarItemOverflowBehavior.NeverOverflow);
     }
     get overflowItems() {
         // spacers are ignored
@@ -135,7 +134,7 @@ let Toolbar = Toolbar_1 = class Toolbar extends UI5Element {
                 accessibleName: this.ariaLabelText,
             },
             overflowButton: {
-                accessibleName: Toolbar_1.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),
+                accessibleName: this.overflowButtonAccessibleName || Toolbar_1.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),
                 tooltip: Toolbar_1.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),
                 accessibilityAttributes: {
                     expanded: this.popoverOpen,
@@ -180,15 +179,32 @@ let Toolbar = Toolbar_1 = class Toolbar extends UI5Element {
             const lastItem = this.interactiveItems.at(-1);
             lastItem?.focus();
         }
+        this.prePopulateAlwaysOverflowItems();
     }
     async onAfterRendering() {
         await renderFinished();
         this.storeItemsWidth();
         this.processOverflowLayout();
         this.items.forEach(item => {
-            item.isOverflowed = this.overflowItems.map(overflowItem => overflowItem).indexOf(item) !== -1;
+            this.addItemsAdditionalProperties(item);
         });
     }
+    addItemsAdditionalProperties(item) {
+        item.isOverflowed = this.overflowItems.indexOf(item) !== -1;
+        const itemWrapper = this.shadowRoot.querySelector(`#${item._individualSlot}`);
+        if (item.hasOverflow && !item.isOverflowed && itemWrapper) {
+            // We need to set the max-width to the self-overflow element in order ot prevent it from taking all the available space,
+            // since, unlike the other items, it is allowed to grow and shrink
+            // We need to set the max-width to none and its position to absolute to allow the item to grow and measure its width,
+            // then when set, the max-width will be cached and we will set its highest value to not cut it when the Toolbar shrinks it
+            // on rendering and then we resize it manually.
+            itemWrapper.style.maxWidth = `none`;
+            itemWrapper?.classList.add("ui5-tb-self-overflow-grow");
+            item._maxWidth = Math.max(this.getItemWidth(item), item._maxWidth);
+            itemWrapper.style.maxWidth = `${item._maxWidth}px`;
+            itemWrapper?.classList.remove("ui5-tb-self-overflow-grow");
+        }
+    }
     /**
      * Returns if the overflow popup is open.
      * @public
@@ -241,7 +257,7 @@ let Toolbar = Toolbar_1 = class Toolbar extends UI5Element {
     }
     storeItemsWidth() {
         let totalWidth = 0, minWidth = 0;
-        this.items.forEach((item) => {
+        this.items.forEach(item => {
             const itemWidth = this.getItemWidth(item);
             totalWidth += itemWidth;
             if (item.overflowPriority === ToolbarItemOverflowBehavior.NeverOverflow) {
@@ -308,20 +324,28 @@ let Toolbar = Toolbar_1 = class Toolbar extends UI5Element {
         });
         return foundPrevNonSeparatorItem && foundNextNonSeperatorItem;
     }
+    /**
+     * Adds AlwaysOverflow items to overflow to ensure they are never rendered outside overflow (and visual flash is prevented)
+     */
+    prePopulateAlwaysOverflowItems() {
+        this.alwaysOverflowItems.forEach(item => {
+            if (!this.itemsToOverflow.includes(item)) {
+                this.itemsToOverflow.push(item);
+            }
+        });
+    }
     /**
      * Event Handlers
      */
     onOverflowPopoverClosed() {
         this.popoverOpen = false;
     }
-    onBeforeClose(e) {
-        e.preventDefault();
-    }
     onOverflowPopoverOpened() {
         this.popoverOpen = true;
     }
     onResize() {
         this.closeOverflow();
+        this.storeItemsWidth();
         this.processOverflowLayout();
     }
     /**
@@ -345,7 +369,7 @@ let Toolbar = Toolbar_1 = class Toolbar extends UI5Element {
         }
         const id = item._id;
         // Measure rendered width for spacers with width, and for normal items
-        const renderedItem = this.shadowRoot.querySelector(`#${item.slot}`);
+        const renderedItem = this.shadowRoot.querySelector(`#${item._individualSlot}`);
         let itemWidth = 0;
         if (renderedItem && !renderedItem.classList.contains("ui5-tb-popover-item") && renderedItem.offsetWidth && item._isRendering === false) {
             const ItemCSSStyleSet = getComputedStyle(renderedItem);
@@ -379,6 +403,9 @@ __decorate([
 __decorate([
     property()
 ], Toolbar.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property()
+], Toolbar.prototype, "overflowButtonAccessibleName", void 0);
 __decorate([
     property()
 ], Toolbar.prototype, "design", void 0);

package/dist/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../src/Toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { ChangeInfo } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport \"@ui5/webcomponents-icons/dist/overflow.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\n\nimport {\n\tTOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL,\n\tTOOLBAR_POPOVER_AVAILABLE_VALUES,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport ToolbarTemplate from \"./ToolbarTemplate.js\";\nimport ToolbarCss from \"./generated/themes/Toolbar.css.js\";\n\nimport ToolbarPopoverCss from \"./generated/themes/ToolbarPopover.css.js\";\n\nimport type ToolbarAlign from \"./types/ToolbarAlign.js\";\nimport type ToolbarDesign from \"./types/ToolbarDesign.js\";\nimport ToolbarItemOverflowBehavior from \"./types/ToolbarItemOverflowBehavior.js\";\n\nimport type ToolbarItem from \"./ToolbarItem.js\";\nimport type ToolbarSeparator from \"./ToolbarSeparator.js\";\n\nimport type Button from \"./Button.js\";\nimport type Popover from \"./Popover.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\n\ntype ToolbarMinWidthChangeEventDetail = {\n\tminWidth: number,\n};\n\nfunction calculateCSSREMValue(styleSet: CSSStyleDeclaration, propertyName: string): number {\n\treturn Number(styleSet.getPropertyValue(propertyName).replace(\"rem\", \"\")) * parseInt(getComputedStyle(document.body).getPropertyValue(\"font-size\"));\n}\n\nfunction parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): number {\n\treturn Number(styleSet.getPropertyValue(propertyName).replace(\"px\", \"\"));\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-toolbar` component is used to create a horizontal layout with items.\n * The items can be overflowing in a popover, when the space is not enough to show all of them.\n *\n * ### Keyboard Handling\n * The `ui5-toolbar` provides advanced keyboard handling.\n *\n * - The control is not interactive, but can contain of interactive elements\n * - [Tab] - iterates through elements\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/Toolbar.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: ToolbarTemplate,\n})\n/**\n * @private\n*/\n@event(\"_min-content-width-change\", {\n\tbubbles: true,\n})\n\nclass Toolbar extends UI5Element {\n\teventDetails!: {\n\t\t\"_min-content-width-change\": ToolbarMinWidthChangeEventDetail\n\t}\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/**\n\t * Indicated the direction in which the Toolbar items will be aligned.\n\t * @public\n\t * @default \"End\"\n\t */\n\t@property()\n\talignContent: `${ToolbarAlign}` = \"End\";\n\n\t/**\n\t * Calculated width of the whole toolbar.\n\t * @private\n\t * @default undefined\n\t */\n\t@property({ type: Number })\n\twidth?: number;\n\n\t/**\n\t * Calculated width of the toolbar content.\n\t * @private\n\t * @default undefined\n\t */\n\t@property({ type: Number })\n\tcontentWidth?: number;\n\n\t/**\n\t * Notifies the toolbar if it should show the items in a reverse way if Toolbar Popover needs to be placed on \"Top\" position.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\treverseOverflow = false;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the input.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the toolbar design.\n\t * @public\n\t * @default \"Solid\"\n\t * @since 2.0.0\n\t */\n\t@property()\n\tdesign: `${ToolbarDesign}` = \"Solid\"\n\n\t@property({ type: Boolean })\n\tpopoverOpen = false;\n\n\t/**\n\t * Defines the items of the component.\n\t *\n\t * **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true, type: HTMLElement, invalidateOnChildChange: true, individualSlots: true,\n\t})\n\titems!: Array<ToolbarItem>\n\n\t_onResize!: ResizeObserverCallback;\n\t_onCloseOverflow!: EventListener;\n\titemsToOverflow: Array<ToolbarItem> = [];\n\titemsWidth = 0;\n\tminContentWidth = 0;\n\n\tITEMS_WIDTH_MAP: Map<string, number> = new Map();\n\n\tstatic get styles() {\n\t\treturn [\n\t\t\tToolbarCss,\n\t\t\tToolbarPopoverCss,\n\t\t];\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._onResize = this.onResize.bind(this);\n\t\tthis._onCloseOverflow = this.closeOverflow.bind(this);\n\t}\n\n\t/**\n\t * Read-only members\n\t */\n\n\tget overflowButtonSize(): number {\n\t\treturn this.overflowButtonDOM?.getBoundingClientRect().width || 0;\n\t}\n\n\tget padding(): number {\n\t\tconst toolbarComputedStyle = getComputedStyle(this.getDomRef()!);\n\t\treturn calculateCSSREMValue(toolbarComputedStyle, getScopedVarName(\"--_ui5-toolbar-padding-left\"))\n\t\t\t+ calculateCSSREMValue(toolbarComputedStyle, getScopedVarName(\"--_ui5-toolbar-padding-right\"));\n\t}\n\n\tget alwaysOverflowItems() {\n\t\treturn this.items.filter((item: ToolbarItem) => item.overflowPriority === ToolbarItemOverflowBehavior.AlwaysOverflow);\n\t}\n\n\tget movableItems() {\n\t\treturn this.items.filter((item: ToolbarItem) => item.overflowPriority !== ToolbarItemOverflowBehavior.AlwaysOverflow && item.overflowPriority !== ToolbarItemOverflowBehavior.NeverOverflow);\n\t}\n\n\tget overflowItems() {\n\t\t// spacers are ignored\n\t\tconst overflowItems = this.itemsToOverflow.filter(item => !item.ignoreSpace);\n\t\treturn this.reverseOverflow ? overflowItems.reverse() : overflowItems;\n\t}\n\n\tget standardItems() {\n\t\treturn this.items.filter(item => this.itemsToOverflow.indexOf(item) === -1);\n\t}\n\n\tget hideOverflowButton() {\n\t\treturn this.itemsToOverflow.filter(item => !(item.ignoreSpace || item.isSeparator)).length === 0;\n\t}\n\n\tget interactiveItems() {\n\t\treturn this.items.filter((item: ToolbarItem) => item.isInteractive);\n\t}\n\n\t/**\n\t * Accessibility\n\t */\n\n\tget hasAriaSemantics() {\n\t\treturn this.interactiveItems.length > 1;\n\t}\n\n\tget accessibleRole() {\n\t\treturn this.hasAriaSemantics ? \"toolbar\" as const : undefined;\n\t}\n\n\tget ariaLabelText() {\n\t\treturn this.hasAriaSemantics ? getEffectiveAriaLabelText(this) : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\trole: this.accessibleRole,\n\t\t\t\taccessibleName: this.ariaLabelText,\n\t\t\t},\n\t\t\toverflowButton: {\n\t\t\t\taccessibleName: Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),\n\t\t\t\ttooltip: Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),\n\t\t\t\taccessibilityAttributes: {\n\t\t\t\t\texpanded: this.popoverOpen,\n\t\t\t\t\thasPopup: \"menu\" as const,\n\t\t\t\t},\n\t\t\t},\n\t\t\tpopover: {\n\t\t\t\taccessibleName: Toolbar.i18nBundle.getText(TOOLBAR_POPOVER_AVAILABLE_VALUES),\n\t\t\t},\n\t\t};\n\t}\n\n\t/**\n\t * Toolbar Overflow Popover\n\t */\n\n\tget overflowButtonDOM(): Button | null {\n\t\treturn this.shadowRoot!.querySelector(\".ui5-tb-overflow-btn\");\n\t}\n\n\tget hasFlexibleSpacers() {\n\t\treturn this.items.some((item: ToolbarItem) => item.hasFlexibleWidth);\n\t}\n\n\t/**\n\t * Lifecycle methods\n\t */\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._onResize);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._onResize);\n\t}\n\n\tonInvalidation(changeInfo: ChangeInfo) {\n\t\tif (changeInfo.reason === \"childchange\") {\n\t\t\tconst currentItemsWidth = this.items.reduce((total, item) => total + this.getItemWidth(item), 0);\n\t\t\tif (currentItemsWidth !== this.itemsWidth) {\n\t\t\t\tthis.onToolbarItemChange();\n\t\t\t}\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.detachListeners();\n\t\tthis.attachListeners();\n\t\tif (getActiveElement() === this.overflowButtonDOM?.getFocusDomRef() && this.hideOverflowButton) {\n\t\t\tconst lastItem = this.interactiveItems.at(-1);\n\t\t\tlastItem?.focus();\n\t\t}\n\t}\n\n\tasync onAfterRendering() {\n\t\tawait renderFinished();\n\n\t\tthis.storeItemsWidth();\n\t\tthis.processOverflowLayout();\n\t\tthis.items.forEach(item => {\n\t\t\titem.isOverflowed = this.overflowItems.map(overflowItem => overflowItem).indexOf(item) !== -1;\n\t\t});\n\t}\n\n\t/**\n\t * Returns if the overflow popup is open.\n\t * @public\n\t */\n\tisOverflowOpen(): boolean {\n\t\tconst overflowPopover = this.getOverflowPopover();\n\t\treturn overflowPopover.open;\n\t}\n\n\topenOverflow(): void {\n\t\tconst overflowPopover = this.getOverflowPopover();\n\t\toverflowPopover.opener = this.overflowButtonDOM!;\n\t\toverflowPopover.open = true;\n\t\tthis.reverseOverflow = overflowPopover.actualPlacement === \"Top\";\n\t}\n\n\tcloseOverflow() {\n\t\tconst overflowPopover = this.getOverflowPopover();\n\t\toverflowPopover.open = false;\n\t}\n\n\ttoggleOverflow() {\n\t\tif (this.popoverOpen) {\n\t\t\tthis.closeOverflow();\n\t\t} else {\n\t\t\tthis.openOverflow();\n\t\t}\n\t}\n\n\tgetOverflowPopover(): Popover {\n\t\treturn this.shadowRoot!.querySelector<Popover>(\".ui5-overflow-popover\")!;\n\t}\n\n\t/**\n\t * Layout management\n\t */\n\n\tprocessOverflowLayout() {\n\t\tif (this.offsetWidth === 0) {\n\t\t\treturn;\n\t\t}\n\t\tconst containerWidth = this.offsetWidth - this.padding;\n\t\tconst contentWidth = this.itemsWidth;\n\t\tlet overflowSpace = contentWidth - containerWidth + this.overflowButtonSize;\n\n\t\tif (contentWidth <= containerWidth) {\n\t\t\toverflowSpace = 0;\n\t\t}\n\n\t\t// skip calculation if the width has not been changed or if the items width has not been changed\n\t\tif (this.width === containerWidth && this.contentWidth === contentWidth) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.distributeItems(overflowSpace);\n\t\tthis.width = containerWidth;\n\t\tthis.contentWidth = contentWidth;\n\t}\n\n\tstoreItemsWidth() {\n\t\tlet totalWidth = 0,\n\t\t\tminWidth = 0;\n\n\t\tthis.items.forEach((item: ToolbarItem) => {\n\t\t\tconst itemWidth = this.getItemWidth(item);\n\t\t\ttotalWidth += itemWidth;\n\t\t\tif (item.overflowPriority === ToolbarItemOverflowBehavior.NeverOverflow) {\n\t\t\t\tminWidth += itemWidth;\n\t\t\t}\n\t\t\tthis.ITEMS_WIDTH_MAP.set(item._id, itemWidth);\n\t\t});\n\n\t\tif (minWidth !== this.minContentWidth) {\n\t\t\tconst spaceAroundContent = this.offsetWidth - this.getDomRef()!.offsetWidth;\n\t\t\tthis.fireDecoratorEvent(\"_min-content-width-change\", {\n\t\t\t\tminWidth: minWidth + spaceAroundContent + this.overflowButtonSize,\n\t\t\t});\n\t\t}\n\n\t\tthis.itemsWidth = totalWidth;\n\t\tthis.minContentWidth = minWidth;\n\t}\n\n\tdistributeItems(overflowSpace = 0) {\n\t\tconst movableItems = this.movableItems.reverse();\n\t\tlet index = 0;\n\t\tlet currentItem = movableItems[index];\n\n\t\tthis.itemsToOverflow = [];\n\n\t\t// distribute items that always overflow\n\t\tthis.distributeItemsThatAlwaysOverflow();\n\n\t\twhile (overflowSpace > 0 && currentItem) {\n\t\t\tthis.itemsToOverflow.unshift(currentItem);\n\t\t\toverflowSpace -= this.getCachedItemWidth(currentItem?._id) || 0;\n\t\t\tindex++;\n\t\t\tcurrentItem = movableItems[index];\n\t\t}\n\n\t\t// If the last bar item is a spacer, force it to the overflow even if there is enough space for it\n\t\tif (index < movableItems.length) {\n\t\t\tlet lastItem = movableItems[index];\n\t\t\twhile (index <= movableItems.length - 1 && lastItem.isSeparator) {\n\t\t\t\tthis.itemsToOverflow.unshift(lastItem);\n\t\t\t\tindex++;\n\t\t\t\tlastItem = movableItems[index];\n\t\t\t}\n\t\t}\n\n\t\tthis.setSeperatorsVisibilityInOverflow();\n\t}\n\n\tdistributeItemsThatAlwaysOverflow() {\n\t\tthis.alwaysOverflowItems.forEach((item: ToolbarItem) => {\n\t\t\tthis.itemsToOverflow.push(item);\n\t\t});\n\t}\n\n\tsetSeperatorsVisibilityInOverflow() {\n\t\tthis.itemsToOverflow.forEach((item, idx, items) => {\n\t\t\tif (item.isSeparator) {\n\t\t\t\t(item as ToolbarSeparator).visible = this.shouldShowSeparatorInOverflow(idx, items);\n\t\t\t}\n\t\t});\n\t}\n\n\tshouldShowSeparatorInOverflow(separatorIdx: number, overflowItems: Array<ToolbarItem>) {\n\t\tlet foundPrevNonSeparatorItem = false;\n\t\tlet foundNextNonSeperatorItem = false;\n\n\t\t// search for non-separator item before and after the seperator\n\t\toverflowItems.forEach((item, idx) => {\n\t\t\tif (idx < separatorIdx && !item.isSeparator) {\n\t\t\t\tfoundPrevNonSeparatorItem = true;\n\t\t\t}\n\t\t\tif (idx > separatorIdx && !item.isSeparator) {\n\t\t\t\tfoundNextNonSeperatorItem = true;\n\t\t\t}\n\t\t});\n\n\t\treturn foundPrevNonSeparatorItem && foundNextNonSeperatorItem;\n\t}\n\n\t/**\n\t * Event Handlers\n\t */\n\n\tonOverflowPopoverClosed() {\n\t\tthis.popoverOpen = false;\n\t}\n\n\tonBeforeClose(e: UI5CustomEvent<Popover, \"before-close\">) {\n\t\te.preventDefault();\n\t}\n\n\tonOverflowPopoverOpened() {\n\t\tthis.popoverOpen = true;\n\t}\n\n\tonResize() {\n\t\tthis.closeOverflow();\n\t\tthis.processOverflowLayout();\n\t}\n\n\t/**\n\t * Private members\n\t */\n\n\tattachListeners() {\n\t\tthis.addEventListener(\"ui5-close-overflow\", this._onCloseOverflow);\n\t}\n\n\tdetachListeners() {\n\t\tthis.removeEventListener(\"ui5-close-overflow\", this._onCloseOverflow);\n\t}\n\n\tonToolbarItemChange() {\n\t\t// some items were updated reset the cache and trigger a re-render\n\t\tthis.itemsToOverflow = [];\n\t\tthis.contentWidth = 0; // re-render\n\t}\n\n\tgetItemWidth(item: ToolbarItem): number {\n\t\t// Spacer width - always 0 for flexible spacers, so that they shrink, otherwise - measure the width normally\n\t\tif (item.ignoreSpace || item.isSeparator) {\n\t\t\treturn 0;\n\t\t}\n\t\tconst id: string = item._id;\n\t\t// Measure rendered width for spacers with width, and for normal items\n\t\tconst renderedItem = this.shadowRoot!.querySelector<HTMLElement>(`#${item.slot}`);\n\n\t\tlet itemWidth = 0;\n\n\t\tif (renderedItem && !renderedItem.classList.contains(\"ui5-tb-popover-item\") && renderedItem.offsetWidth && item._isRendering === false) {\n\t\t\tconst ItemCSSStyleSet = getComputedStyle(renderedItem);\n\t\t\titemWidth = renderedItem.offsetWidth + parsePxValue(ItemCSSStyleSet, \"margin-inline-end\")\n\t\t\t\t+ parsePxValue(ItemCSSStyleSet, \"margin-inline-start\");\n\t\t} else {\n\t\t\titemWidth = this.getCachedItemWidth(id) || 0;\n\t\t}\n\n\t\treturn Math.ceil(itemWidth);\n\t}\n\n\tgetCachedItemWidth(id: string) {\n\t\treturn this.ITEMS_WIDTH_MAP.get(id);\n\t}\n}\n\nToolbar.define();\n\nexport default Toolbar;\nexport type {\n\tToolbarMinWidthChangeEventDetail,\n};\n"]}
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../src/Toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { ChangeInfo, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport \"@ui5/webcomponents-icons/dist/overflow.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\n\nimport {\n\tTOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL,\n\tTOOLBAR_POPOVER_AVAILABLE_VALUES,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport ToolbarTemplate from \"./ToolbarTemplate.js\";\nimport ToolbarCss from \"./generated/themes/Toolbar.css.js\";\n\nimport ToolbarPopoverCss from \"./generated/themes/ToolbarPopover.css.js\";\n\nimport type ToolbarAlign from \"./types/ToolbarAlign.js\";\nimport type ToolbarDesign from \"./types/ToolbarDesign.js\";\nimport ToolbarItemOverflowBehavior from \"./types/ToolbarItemOverflowBehavior.js\";\n\nimport type ToolbarItemBase from \"./ToolbarItemBase.js\";\nimport type ToolbarSeparator from \"./ToolbarSeparator.js\";\n\nimport type Button from \"./Button.js\";\nimport type Popover from \"./Popover.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\n\ntype ToolbarMinWidthChangeEventDetail = {\n\tminWidth: number,\n};\n\nfunction calculateCSSREMValue(styleSet: CSSStyleDeclaration, propertyName: string): number {\n\treturn Number(styleSet.getPropertyValue(propertyName).replace(\"rem\", \"\")) * parseInt(getComputedStyle(document.body).getPropertyValue(\"font-size\"));\n}\n\nfunction parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): number {\n\treturn Number(styleSet.getPropertyValue(propertyName).replace(\"px\", \"\"));\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-toolbar` component is used to create a horizontal layout with items.\n * The items can be overflowing in a popover, when the space is not enough to show all of them.\n *\n * ### Keyboard Handling\n * The `ui5-toolbar` provides advanced keyboard handling.\n *\n * - The control is not interactive, but can contain of interactive elements\n * - [Tab] - iterates through elements\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/Toolbar.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: ToolbarTemplate,\n})\n/**\n * @private\n*/\n@event(\"_min-content-width-change\", {\n\tbubbles: true,\n})\n\nclass Toolbar extends UI5Element {\n\teventDetails!: {\n\t\t\"_min-content-width-change\": ToolbarMinWidthChangeEventDetail\n\t}\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/**\n\t * Indicated the direction in which the Toolbar items will be aligned.\n\t * @public\n\t * @default \"End\"\n\t */\n\t@property()\n\talignContent: `${ToolbarAlign}` = \"End\";\n\n\t/**\n\t * Calculated width of the whole toolbar.\n\t * @private\n\t * @default undefined\n\t */\n\t@property({ type: Number })\n\twidth?: number;\n\n\t/**\n\t * Calculated width of the toolbar content.\n\t * @private\n\t * @default undefined\n\t */\n\t@property({ type: Number })\n\tcontentWidth?: number;\n\n\t/**\n\t * Notifies the toolbar if it should show the items in a reverse way if Toolbar Popover needs to be placed on \"Top\" position.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\treverseOverflow = false;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the input.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the accessible ARIA name of the overflow button of the component.\n\t *\n\t * **Note:** When not set, the built-in translation for \"Additional Options\" is used.\n\t * @default undefined\n\t * @public\n\t * @since 2.22.0\n\t */\n\t@property()\n\toverflowButtonAccessibleName?: string;\n\n\t/**\n\t * Defines the toolbar design.\n\t * @public\n\t * @default \"Solid\"\n\t * @since 2.0.0\n\t */\n\t@property()\n\tdesign: `${ToolbarDesign}` = \"Solid\"\n\n\t@property({ type: Boolean })\n\tpopoverOpen = false;\n\n\t/**\n\t * Defines the items of the component.\n\t *\n\t * **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true, type: HTMLElement, invalidateOnChildChange: true, individualSlots: true,\n\t})\n\titems!: DefaultSlot<ToolbarItemBase>\n\n\t_onResize!: ResizeObserverCallback;\n\t_onCloseOverflow!: EventListener;\n\titemsToOverflow: Array<ToolbarItemBase> = [];\n\titemsWidth = 0;\n\tminContentWidth = 0;\n\n\tITEMS_WIDTH_MAP: Map<string, number> = new Map();\n\n\tstatic get styles() {\n\t\treturn [\n\t\t\tToolbarCss,\n\t\t\tToolbarPopoverCss,\n\t\t];\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._onResize = this.onResize.bind(this);\n\t\tthis._onCloseOverflow = this.closeOverflow.bind(this);\n\t}\n\n\t/**\n\t * Read-only members\n\t */\n\n\tget overflowButtonSize(): number {\n\t\treturn this.overflowButtonDOM?.getBoundingClientRect().width || 0;\n\t}\n\n\tget padding(): number {\n\t\tconst toolbarComputedStyle = getComputedStyle(this.getDomRef()!);\n\t\treturn calculateCSSREMValue(toolbarComputedStyle, \"--_ui5-toolbar-padding-left\")\n\t\t\t+ calculateCSSREMValue(toolbarComputedStyle, \"--_ui5-toolbar-padding-right\");\n\t}\n\n\tget alwaysOverflowItems() {\n\t\treturn this.items.filter(item => item.overflowPriority === ToolbarItemOverflowBehavior.AlwaysOverflow);\n\t}\n\n\tget movableItems() {\n\t\treturn this.items.filter(item => item.overflowPriority !== ToolbarItemOverflowBehavior.AlwaysOverflow && item.overflowPriority !== ToolbarItemOverflowBehavior.NeverOverflow);\n\t}\n\n\tget overflowItems() {\n\t\t// spacers are ignored\n\t\tconst overflowItems = this.itemsToOverflow.filter(item => !item.ignoreSpace);\n\t\treturn this.reverseOverflow ? overflowItems.reverse() : overflowItems;\n\t}\n\n\tget standardItems() {\n\t\treturn this.items.filter(item => this.itemsToOverflow.indexOf(item) === -1);\n\t}\n\n\tget hideOverflowButton() {\n\t\treturn this.itemsToOverflow.filter(item => !(item.ignoreSpace || item.isSeparator)).length === 0;\n\t}\n\n\tget interactiveItems() {\n\t\treturn this.items.filter((item: ToolbarItemBase) => item.isInteractive);\n\t}\n\n\t/**\n\t * Accessibility\n\t */\n\n\tget hasAriaSemantics() {\n\t\treturn this.interactiveItems.length > 1;\n\t}\n\n\tget accessibleRole() {\n\t\treturn this.hasAriaSemantics ? \"toolbar\" as const : undefined;\n\t}\n\n\tget ariaLabelText() {\n\t\treturn this.hasAriaSemantics ? getEffectiveAriaLabelText(this) : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\trole: this.accessibleRole,\n\t\t\t\taccessibleName: this.ariaLabelText,\n\t\t\t},\n\t\t\toverflowButton: {\n\t\t\t\taccessibleName: this.overflowButtonAccessibleName || Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),\n\t\t\t\ttooltip: Toolbar.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),\n\t\t\t\taccessibilityAttributes: {\n\t\t\t\t\texpanded: this.popoverOpen,\n\t\t\t\t\thasPopup: \"menu\" as const,\n\t\t\t\t},\n\t\t\t},\n\t\t\tpopover: {\n\t\t\t\taccessibleName: Toolbar.i18nBundle.getText(TOOLBAR_POPOVER_AVAILABLE_VALUES),\n\t\t\t},\n\t\t};\n\t}\n\n\t/**\n\t * Toolbar Overflow Popover\n\t */\n\n\tget overflowButtonDOM(): Button | null {\n\t\treturn this.shadowRoot!.querySelector(\".ui5-tb-overflow-btn\");\n\t}\n\n\tget hasFlexibleSpacers() {\n\t\treturn this.items.some((item: ToolbarItemBase) => item.hasFlexibleWidth);\n\t}\n\n\t/**\n\t * Lifecycle methods\n\t */\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._onResize);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._onResize);\n\t}\n\n\tonInvalidation(changeInfo: ChangeInfo) {\n\t\tif (changeInfo.reason === \"childchange\") {\n\t\t\tconst currentItemsWidth = this.items.reduce((total, item) => total + this.getItemWidth(item), 0);\n\t\t\tif (currentItemsWidth !== this.itemsWidth) {\n\t\t\t\tthis.onToolbarItemChange();\n\t\t\t}\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tthis.detachListeners();\n\t\tthis.attachListeners();\n\t\tif (getActiveElement() === this.overflowButtonDOM?.getFocusDomRef() && this.hideOverflowButton) {\n\t\t\tconst lastItem = this.interactiveItems.at(-1);\n\t\t\tlastItem?.focus();\n\t\t}\n\t\tthis.prePopulateAlwaysOverflowItems();\n\t}\n\n\tasync onAfterRendering() {\n\t\tawait renderFinished();\n\t\tthis.storeItemsWidth();\n\t\tthis.processOverflowLayout();\n\t\tthis.items.forEach(item => {\n\t\t\tthis.addItemsAdditionalProperties(item);\n\t\t});\n\t}\n\n\taddItemsAdditionalProperties(item: ToolbarItemBase) {\n\t\titem.isOverflowed = this.overflowItems.indexOf(item) !== -1;\n\t\tconst itemWrapper = this.shadowRoot!.querySelector(`#${item._individualSlot}`) as HTMLElement;\n\t\tif (item.hasOverflow && !item.isOverflowed && itemWrapper) {\n\t\t\t// We need to set the max-width to the self-overflow element in order ot prevent it from taking all the available space,\n\t\t\t// since, unlike the other items, it is allowed to grow and shrink\n\t\t\t// We need to set the max-width to none and its position to absolute to allow the item to grow and measure its width,\n\t\t\t// then when set, the max-width will be cached and we will set its highest value to not cut it when the Toolbar shrinks it\n\t\t\t// on rendering and then we resize it manually.\n\t\t\titemWrapper.style.maxWidth = `none`;\n\t\t\titemWrapper?.classList.add(\"ui5-tb-self-overflow-grow\");\n\t\t\titem._maxWidth = Math.max(this.getItemWidth(item), item._maxWidth);\n\t\t\titemWrapper.style.maxWidth = `${item._maxWidth}px`;\n\t\t\titemWrapper?.classList.remove(\"ui5-tb-self-overflow-grow\");\n\t\t}\n\t}\n\n\t/**\n\t * Returns if the overflow popup is open.\n\t * @public\n\t */\n\tisOverflowOpen(): boolean {\n\t\tconst overflowPopover = this.getOverflowPopover();\n\t\treturn overflowPopover.open;\n\t}\n\n\topenOverflow(): void {\n\t\tconst overflowPopover = this.getOverflowPopover();\n\t\toverflowPopover.opener = this.overflowButtonDOM!;\n\t\toverflowPopover.open = true;\n\t\tthis.reverseOverflow = overflowPopover.actualPlacement === \"Top\";\n\t}\n\n\tcloseOverflow() {\n\t\tconst overflowPopover = this.getOverflowPopover();\n\t\toverflowPopover.open = false;\n\t}\n\n\ttoggleOverflow() {\n\t\tif (this.popoverOpen) {\n\t\t\tthis.closeOverflow();\n\t\t} else {\n\t\t\tthis.openOverflow();\n\t\t}\n\t}\n\n\tgetOverflowPopover(): Popover {\n\t\treturn this.shadowRoot!.querySelector<Popover>(\".ui5-overflow-popover\")!;\n\t}\n\n\t/**\n\t * Layout management\n\t */\n\n\tprocessOverflowLayout() {\n\t\tif (this.offsetWidth === 0) {\n\t\t\treturn;\n\t\t}\n\t\tconst containerWidth = this.offsetWidth - this.padding;\n\t\tconst contentWidth = this.itemsWidth;\n\t\tlet overflowSpace = contentWidth - containerWidth + this.overflowButtonSize;\n\n\t\tif (contentWidth <= containerWidth) {\n\t\t\toverflowSpace = 0;\n\t\t}\n\n\t\t// skip calculation if the width has not been changed or if the items width has not been changed\n\t\tif (this.width === containerWidth && this.contentWidth === contentWidth) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.distributeItems(overflowSpace);\n\t\tthis.width = containerWidth;\n\t\tthis.contentWidth = contentWidth;\n\t}\n\n\tstoreItemsWidth() {\n\t\tlet totalWidth = 0,\n\t\t\tminWidth = 0;\n\n\t\tthis.items.forEach(item => {\n\t\t\tconst itemWidth = this.getItemWidth(item);\n\t\t\ttotalWidth += itemWidth;\n\t\t\tif (item.overflowPriority === ToolbarItemOverflowBehavior.NeverOverflow) {\n\t\t\t\tminWidth += itemWidth;\n\t\t\t}\n\t\t\tthis.ITEMS_WIDTH_MAP.set(item._id, itemWidth);\n\t\t});\n\n\t\tif (minWidth !== this.minContentWidth) {\n\t\t\tconst spaceAroundContent = this.offsetWidth - this.getDomRef()!.offsetWidth;\n\t\t\tthis.fireDecoratorEvent(\"_min-content-width-change\", {\n\t\t\t\tminWidth: minWidth + spaceAroundContent + this.overflowButtonSize,\n\t\t\t});\n\t\t}\n\n\t\tthis.itemsWidth = totalWidth;\n\t\tthis.minContentWidth = minWidth;\n\t}\n\n\tdistributeItems(overflowSpace = 0) {\n\t\tconst movableItems = this.movableItems.reverse();\n\t\tlet index = 0;\n\t\tlet currentItem = movableItems[index];\n\n\t\tthis.itemsToOverflow = [];\n\n\t\t// distribute items that always overflow\n\t\tthis.distributeItemsThatAlwaysOverflow();\n\n\t\twhile (overflowSpace > 0 && currentItem) {\n\t\t\tthis.itemsToOverflow.unshift(currentItem);\n\t\t\toverflowSpace -= this.getCachedItemWidth(currentItem?._id) || 0;\n\t\t\tindex++;\n\t\t\tcurrentItem = movableItems[index];\n\t\t}\n\n\t\t// If the last bar item is a spacer, force it to the overflow even if there is enough space for it\n\t\tif (index < movableItems.length) {\n\t\t\tlet lastItem = movableItems[index];\n\t\t\twhile (index <= movableItems.length - 1 && lastItem.isSeparator) {\n\t\t\t\tthis.itemsToOverflow.unshift(lastItem);\n\t\t\t\tindex++;\n\t\t\t\tlastItem = movableItems[index];\n\t\t\t}\n\t\t}\n\n\t\tthis.setSeperatorsVisibilityInOverflow();\n\t}\n\n\tdistributeItemsThatAlwaysOverflow() {\n\t\tthis.alwaysOverflowItems.forEach((item: ToolbarItemBase) => {\n\t\t\tthis.itemsToOverflow.push(item);\n\t\t});\n\t}\n\n\tsetSeperatorsVisibilityInOverflow() {\n\t\tthis.itemsToOverflow.forEach((item, idx, items) => {\n\t\t\tif (item.isSeparator) {\n\t\t\t\t(item as ToolbarSeparator).visible = this.shouldShowSeparatorInOverflow(idx, items);\n\t\t\t}\n\t\t});\n\t}\n\n\tshouldShowSeparatorInOverflow(separatorIdx: number, overflowItems: Array<ToolbarItemBase>) {\n\t\tlet foundPrevNonSeparatorItem = false;\n\t\tlet foundNextNonSeperatorItem = false;\n\n\t\t// search for non-separator item before and after the seperator\n\t\toverflowItems.forEach((item, idx) => {\n\t\t\tif (idx < separatorIdx && !item.isSeparator) {\n\t\t\t\tfoundPrevNonSeparatorItem = true;\n\t\t\t}\n\t\t\tif (idx > separatorIdx && !item.isSeparator) {\n\t\t\t\tfoundNextNonSeperatorItem = true;\n\t\t\t}\n\t\t});\n\n\t\treturn foundPrevNonSeparatorItem && foundNextNonSeperatorItem;\n\t}\n\n\t/**\n\t * Adds AlwaysOverflow items to overflow to ensure they are never rendered outside overflow (and visual flash is prevented)\n\t */\n\tprePopulateAlwaysOverflowItems() {\n\t\tthis.alwaysOverflowItems.forEach(item => {\n\t\t\tif (!this.itemsToOverflow.includes(item)) {\n\t\t\t\tthis.itemsToOverflow.push(item);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * Event Handlers\n\t */\n\n\tonOverflowPopoverClosed() {\n\t\tthis.popoverOpen = false;\n\t}\n\n\tonOverflowPopoverOpened() {\n\t\tthis.popoverOpen = true;\n\t}\n\n\tonResize() {\n\t\tthis.closeOverflow();\n\t\tthis.storeItemsWidth();\n\t\tthis.processOverflowLayout();\n\t}\n\n\t/**\n\t * Private members\n\t */\n\n\tattachListeners() {\n\t\tthis.addEventListener(\"ui5-close-overflow\", this._onCloseOverflow);\n\t}\n\n\tdetachListeners() {\n\t\tthis.removeEventListener(\"ui5-close-overflow\", this._onCloseOverflow);\n\t}\n\n\tonToolbarItemChange() {\n\t\t// some items were updated reset the cache and trigger a re-render\n\t\tthis.itemsToOverflow = [];\n\t\tthis.contentWidth = 0; // re-render\n\t}\n\n\tgetItemWidth(item: ToolbarItemBase): number {\n\t\t// Spacer width - always 0 for flexible spacers, so that they shrink, otherwise - measure the width normally\n\t\tif (item.ignoreSpace || item.isSeparator) {\n\t\t\treturn 0;\n\t\t}\n\t\tconst id: string = item._id;\n\t\t// Measure rendered width for spacers with width, and for normal items\n\t\tconst renderedItem = this.shadowRoot!.querySelector<HTMLElement>(`#${item._individualSlot}`);\n\n\t\tlet itemWidth = 0;\n\n\t\tif (renderedItem && !renderedItem.classList.contains(\"ui5-tb-popover-item\") && renderedItem.offsetWidth && item._isRendering === false) {\n\t\t\tconst ItemCSSStyleSet = getComputedStyle(renderedItem);\n\t\t\titemWidth = renderedItem.offsetWidth + parsePxValue(ItemCSSStyleSet, \"margin-inline-end\")\n\t\t\t\t+ parsePxValue(ItemCSSStyleSet, \"margin-inline-start\");\n\t\t} else {\n\t\t\titemWidth = this.getCachedItemWidth(id) || 0;\n\t\t}\n\n\t\treturn Math.ceil(itemWidth);\n\t}\n\n\tgetCachedItemWidth(id: string) {\n\t\treturn this.ITEMS_WIDTH_MAP.get(id);\n\t}\n}\n\nToolbar.define();\n\nexport default Toolbar;\nexport type {\n\tToolbarMinWidthChangeEventDetail,\n};\n"]}

package/dist/ToolbarButton.d.ts

@@ -1,6 +1,8 @@
 import type { ButtonAccessibilityAttributes } from "./Button.js";
 import type ButtonDesign from "./types/ButtonDesign.js";
-import ToolbarItem from "./ToolbarItem.js";
+import type ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
+import ToolbarItemBase from "./ToolbarItemBase.js";
+import type { ToolbarItemEventDetail } from "./ToolbarItemBase.js";
 type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;
 /**
  * @class
@@ -13,11 +15,28 @@ type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;
  * `import "@ui5/webcomponents/dist/ToolbarButton.js";`
  * @constructor
  * @abstract
- * @extends ToolbarItem
+ * @extends ToolbarItemBase
  * @public
  * @since 1.17.0
  */
-declare class ToolbarButton extends ToolbarItem {
+declare class ToolbarButton extends ToolbarItemBase {
+    eventDetails: ToolbarItemBase["eventDetails"] & {
+        click: ToolbarItemEventDetail;
+    };
+    /**
+    * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
+    * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
+    * @public
+    * @default "Default"
+    */
+    overflowPriority: `${ToolbarItemOverflowBehavior}`;
+    /**
+     * Defines if the toolbar overflow popup should close upon interaction with the item.
+     * It will close by default.
+     * @default false
+     * @public
+     */
+    preventOverflowClosing: boolean;
     /**
      * Defines if the action is disabled.
      *
@@ -99,6 +118,19 @@ declare class ToolbarButton extends ToolbarItem {
      * @default undefined
      */
     text?: string;
+    /**
+     * Defines whether the button text should only be displayed in the overflow popover.
+     *
+     * When set to `true`, the button appears as icon-only in the main toolbar,
+     * but shows both icon and text when moved to the overflow popover.
+     *
+     * **Note:** This property only takes effect when the `text` property is also set.
+     *
+     * @default false
+     * @public
+     * @since 2.17.0
+     */
+    showOverflowText: boolean;
     /**
      * Defines the width of the button.
      *
@@ -111,6 +143,17 @@ declare class ToolbarButton extends ToolbarItem {
         width: string | undefined;
         display: string;
     };
+    /**
+     * Returns the effective text to display based on overflow state and showOverflowText property.
+     *
+     * When showOverflowText is true:
+     * - Normal state: returns empty string (icon-only)
+     * - Overflow state: returns text
+     *
+     * When showOverflowText is false:
+     * - Returns text in both states (normal behavior)
+     */
+    get effectiveText(): string | undefined;
     onClick(e: Event): void;
     /**
      * @override

package/dist/ToolbarButton.js

@@ -8,7 +8,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import ToolbarItem from "./ToolbarItem.js";
+import ToolbarItemBase from "./ToolbarItemBase.js";
 import ToolbarButtonTemplate from "./ToolbarButtonTemplate.js";
 import ToolbarButtonCss from "./generated/themes/ToolbarButton.css.js";
 /**
@@ -22,13 +22,27 @@ import ToolbarButtonCss from "./generated/themes/ToolbarButton.css.js";
  * `import "@ui5/webcomponents/dist/ToolbarButton.js";`
  * @constructor
  * @abstract
- * @extends ToolbarItem
+ * @extends ToolbarItemBase
  * @public
  * @since 1.17.0
  */
-let ToolbarButton = class ToolbarButton extends ToolbarItem {
+let ToolbarButton = class ToolbarButton extends ToolbarItemBase {
     constructor() {
         super(...arguments);
+        /**
+        * Property used to define the access of the item to the overflow Popover. If "NeverOverflow" option is set,
+        * the item never goes in the Popover, if "AlwaysOverflow" - it never comes out of it.
+        * @public
+        * @default "Default"
+        */
+        this.overflowPriority = "Default";
+        /**
+         * Defines if the toolbar overflow popup should close upon interaction with the item.
+         * It will close by default.
+         * @default false
+         * @public
+         */
+        this.preventOverflowClosing = false;
         /**
          * Defines if the action is disabled.
          *
@@ -61,6 +75,19 @@ let ToolbarButton = class ToolbarButton extends ToolbarItem {
          * @public
          */
         this.accessibilityAttributes = {};
+        /**
+         * Defines whether the button text should only be displayed in the overflow popover.
+         *
+         * When set to `true`, the button appears as icon-only in the main toolbar,
+         * but shows both icon and text when moved to the overflow popover.
+         *
+         * **Note:** This property only takes effect when the `text` property is also set.
+         *
+         * @default false
+         * @public
+         * @since 2.17.0
+         */
+        this.showOverflowText = false;
     }
     get styles() {
         return {
@@ -68,6 +95,22 @@ let ToolbarButton = class ToolbarButton extends ToolbarItem {
             display: this.hidden ? "none" : "inline-block",
         };
     }
+    /**
+     * Returns the effective text to display based on overflow state and showOverflowText property.
+     *
+     * When showOverflowText is true:
+     * - Normal state: returns empty string (icon-only)
+     * - Overflow state: returns text
+     *
+     * When showOverflowText is false:
+     * - Returns text in both states (normal behavior)
+     */
+    get effectiveText() {
+        if (this.showOverflowText) {
+            return this.isOverflowed ? this.text : "";
+        }
+        return this.text;
+    }
     onClick(e) {
         e.stopImmediatePropagation();
         const prevented = !this.fireDecoratorEvent("click", { targetRef: e.target });
@@ -87,6 +130,12 @@ let ToolbarButton = class ToolbarButton extends ToolbarItem {
         };
     }
 };
+__decorate([
+    property()
+], ToolbarButton.prototype, "overflowPriority", void 0);
+__decorate([
+    property({ type: Boolean })
+], ToolbarButton.prototype, "preventOverflowClosing", void 0);
 __decorate([
     property({ type: Boolean })
 ], ToolbarButton.prototype, "disabled", void 0);
@@ -114,6 +163,9 @@ __decorate([
 __decorate([
     property()
 ], ToolbarButton.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], ToolbarButton.prototype, "showOverflowText", void 0);
 __decorate([
     property()
 ], ToolbarButton.prototype, "width", void 0);

package/dist/ToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../src/ToolbarButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAI5E,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAIvE;;;;;;;;;;;;;;GAcG;AAoBH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;;QACC;;;;;;WAMG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;WAIG;QAEH,WAAM,GAAsB,SAAS,CAAC;QAuDtC;;;;;;;;;;;;;;;;WAgBG;QAEH,4BAAuB,GAAyC,EAAE,CAAC;IA8CpE,CAAC;IA1BA,IAAI,MAAM;QACT,OAAO;YACN,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc;SAC9C,CAAC;IACH,CAAC;IAED,OAAO,CAAC,CAAQ;QACf,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC7B,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAqB,EAAE,CAAC,CAAC;QAC5F,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAChD,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;QAC3C,CAAC;IACF,CAAC;IAED;;OAEG;IACH,IAAI,OAAO;QACV,OAAO;YACN,IAAI,EAAE;gBACL,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI;gBACrB,eAAe,EAAE,IAAI;aACrB;SACD,CAAC;IACH,CAAC;CACD,CAAA;AA/HA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACX;AAQjB;IADC,QAAQ,EAAE;6CAC2B;AAWtC;IADC,QAAQ,EAAE;2CACE;AAgBb;IADC,QAAQ,EAAE;8CACM;AAUjB;IADC,QAAQ,EAAE;8CACK;AAQhB;IADC,QAAQ,EAAE;qDACa;AAQxB;IADC,QAAQ,EAAE;wDACgB;AAoB3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DACwC;AAQnE;IADC,QAAQ,EAAE;2CACG;AAUd;IADC,QAAQ,EAAE;4CACI;AA5GV,aAAa;IAnBlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,QAAQ,EAAE,qBAAqB;QAC/B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,gBAAgB,CAAC;KAC1B,CAAC;IAEF;;;;;;;OAOG;;IACF,KAAK,CAAC,OAAO,EAAE;QACf,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KAChB,CAAC;GACI,aAAa,CAwIlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type { ButtonAccessibilityAttributes } from \"./Button.js\";\nimport type ButtonDesign from \"./types/ButtonDesign.js\";\n\nimport ToolbarItem from \"./ToolbarItem.js\";\nimport ToolbarButtonTemplate from \"./ToolbarButtonTemplate.js\";\nimport ToolbarButtonCss from \"./generated/themes/ToolbarButton.css.js\";\n\ntype ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-button` represents an abstract action,\n * used in the `ui5-toolbar`.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/ToolbarButton.js\";`\n * @constructor\n * @abstract\n * @extends ToolbarItem\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-button\",\n\ttemplate: ToolbarButtonTemplate,\n\trenderer: jsxRenderer,\n\tstyles: [ToolbarButtonCss],\n})\n\n/**\n * Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n *\n * **Note:** The event will not be fired if the `disabled`\n * property is set to `true`.\n * @public\n */\n@event(\"click\", {\n\tbubbles: true,\n\tcancelable: true,\n})\nclass ToolbarButton extends ToolbarItem {\n\t/**\n\t * Defines if the action is disabled.\n\t *\n\t * **Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the action design.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property()\n\tdesign: `${ButtonDesign}` = \"Default\";\n\n\t/**\n\t * Defines the `icon` source URI.\n\t *\n\t * **Note:** SAP-icons font provides numerous buil-in icons. To find all the available icons, see the\n\t * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string\n\n\t/**\n\t * Defines the icon, displayed as graphical element within the component after the button text.\n\t *\n\t * **Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\n\t * Usage of `endIcon` only should be avoided.\n\t *\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * Example:\n\t * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tendIcon?: string;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t *\n\t * **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttooltip?: string\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\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 */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t *\n\t * The following fields are supported:\n\t *\n\t * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\n\t * Accepts the following string values: `true` or `false`\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\n\t * Accepts a lowercase string value.\n\t *\n\t * @default {}\n\t * @public\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: ToolbarButtonAccessibilityAttributes = {};\n\n\t/**\n\t * Button text\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the width of the button.\n\t *\n\t * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\twidth?: string;\n\n\tget styles() {\n\t\treturn {\n\t\t\twidth: this.width,\n\t\t\tdisplay: this.hidden ? \"none\" : \"inline-block\",\n\t\t};\n\t}\n\n\tonClick(e: Event) {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"click\", { targetRef: e.target as HTMLElement });\n\t\tif (!prevented && !this.preventOverflowClosing) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\t/**\n\t * @override\n\t */\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t...super.classes.root,\n\t\t\t\t\"ui5-tb-button\": true,\n\t\t\t},\n\t\t};\n\t}\n}\n\nToolbarButton.define();\n\nexport default ToolbarButton;\n\nexport type {\n\tToolbarButtonAccessibilityAttributes,\n};\n"]}
+{"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../src/ToolbarButton.ts"],"names":[],"mappings":"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","sourcesContent":["import jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type { ButtonAccessibilityAttributes } from \"./Button.js\";\nimport type ButtonDesign from \"./types/ButtonDesign.js\";\nimport type ToolbarItemOverflowBehavior from \"./types/ToolbarItemOverflowBehavior.js\";\n\nimport ToolbarItemBase from \"./ToolbarItemBase.js\";\nimport type { ToolbarItemEventDetail } from \"./ToolbarItemBase.js\";\nimport ToolbarButtonTemplate from \"./ToolbarButtonTemplate.js\";\nimport ToolbarButtonCss from \"./generated/themes/ToolbarButton.css.js\";\n\ntype ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-button` represents an abstract action,\n * used in the `ui5-toolbar`.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/ToolbarButton.js\";`\n * @constructor\n * @abstract\n * @extends ToolbarItemBase\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-button\",\n\ttemplate: ToolbarButtonTemplate,\n\trenderer: jsxRenderer,\n\tstyles: [ToolbarButtonCss],\n})\n\n/**\n * Fired when the component is activated either with a\n * mouse/tap or by using the Enter or Space key.\n *\n * **Note:** The event will not be fired if the `disabled`\n * property is set to `true`.\n * @public\n */\n@event(\"click\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\nclass ToolbarButton extends ToolbarItemBase {\n\teventDetails!: ToolbarItemBase[\"eventDetails\"] & {\n\t\tclick: ToolbarItemEventDetail,\n\t}\n\n\t/**\n\t* Property used to define the access of the item to the overflow Popover. If \"NeverOverflow\" option is set,\n\t* the item never goes in the Popover, if \"AlwaysOverflow\" - it never comes out of it.\n\t* @public\n\t* @default \"Default\"\n\t*/\n\t@property()\n\toverflowPriority: `${ToolbarItemOverflowBehavior}` = \"Default\";\n\n\t/**\n\t * Defines if the toolbar overflow popup should close upon interaction with the item.\n\t * It will close by default.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tpreventOverflowClosing = false;\n\n\t/**\n\t * Defines if the action is disabled.\n\t *\n\t * **Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the action design.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property()\n\tdesign: `${ButtonDesign}` = \"Default\";\n\n\t/**\n\t * Defines the `icon` source URI.\n\t *\n\t * **Note:** SAP-icons font provides numerous buil-in icons. To find all the available icons, see the\n\t * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string\n\n\t/**\n\t * Defines the icon, displayed as graphical element within the component after the button text.\n\t *\n\t * **Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.\n\t * Usage of `endIcon` only should be avoided.\n\t *\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * Example:\n\t * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tendIcon?: string;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t *\n\t * **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttooltip?: string\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\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 */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t *\n\t * The following fields are supported:\n\t *\n\t * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\n\t * Accepts the following string values: `true` or `false`\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\n\t * Accepts a lowercase string value.\n\t *\n\t * @default {}\n\t * @public\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: ToolbarButtonAccessibilityAttributes = {};\n\n\t/**\n\t * Button text\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines whether the button text should only be displayed in the overflow popover.\n\t *\n\t * When set to `true`, the button appears as icon-only in the main toolbar,\n\t * but shows both icon and text when moved to the overflow popover.\n\t *\n\t * **Note:** This property only takes effect when the `text` property is also set.\n\t *\n\t * @default false\n\t * @public\n\t * @since 2.17.0\n\t */\n\t@property({ type: Boolean })\n\tshowOverflowText = false;\n\n\t/**\n\t * Defines the width of the button.\n\t *\n\t * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\twidth?: string;\n\n\tget styles() {\n\t\treturn {\n\t\t\twidth: this.width,\n\t\t\tdisplay: this.hidden ? \"none\" : \"inline-block\",\n\t\t};\n\t}\n\n\t/**\n\t * Returns the effective text to display based on overflow state and showOverflowText property.\n\t *\n\t * When showOverflowText is true:\n\t * - Normal state: returns empty string (icon-only)\n\t * - Overflow state: returns text\n\t *\n\t * When showOverflowText is false:\n\t * - Returns text in both states (normal behavior)\n\t */\n\tget effectiveText(): string | undefined {\n\t\tif (this.showOverflowText) {\n\t\t\treturn this.isOverflowed ? this.text : \"\";\n\t\t}\n\t\treturn this.text;\n\t}\n\n\tonClick(e: Event) {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"click\", { targetRef: e.target as HTMLElement });\n\t\tif (!prevented && !this.preventOverflowClosing) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\t/**\n\t * @override\n\t */\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t...super.classes.root,\n\t\t\t\t\"ui5-tb-button\": true,\n\t\t\t},\n\t\t};\n\t}\n}\n\nToolbarButton.define();\n\nexport default ToolbarButton;\n\nexport type {\n\tToolbarButtonAccessibilityAttributes,\n};\n"]}

package/dist/ToolbarButtonTemplate.js

@@ -3,6 +3,6 @@ import Button from "./Button.js";
 export default function ToolbarButtonTemplate() {
     return (_jsx(Button, { class: this.classes.root, id: this.id, style: {
             width: this.width || "100%",
-        }, icon: this.icon, endIcon: this.endIcon, tooltip: this.tooltip, accessibleName: this.accessibleName, accessibleNameRef: this.accessibleNameRef, accessibilityAttributes: this.accessibilityAttributes, design: this.design, disabled: this.disabled, hidden: this.hidden, "data-ui5-external-action-item-id": this._id, "data-ui5-stable": this.stableDomRef, onClick: (...args) => this.onClick(...args), children: this.text }));
+        }, icon: this.icon, endIcon: this.endIcon, tooltip: this.tooltip, accessibleName: this.accessibleName, accessibleNameRef: this.accessibleNameRef, accessibilityAttributes: this.accessibilityAttributes, design: this.design, disabled: this.disabled, hidden: this.hidden, "data-ui5-external-action-item-id": this._id, "data-ui5-stable": this.stableDomRef, onClick: (...args) => this.onClick(...args), children: this.effectiveText }));
 }
 //# sourceMappingURL=ToolbarButtonTemplate.js.map

package/dist/ToolbarButtonTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButtonTemplate.js","sourceRoot":"","sources":["../src/ToolbarButtonTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,KAAC,MAAM,IACN,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE;YACN,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM;SAC3B,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,sCACe,IAAI,CAAC,GAAG,qBACzB,IAAI,CAAC,YAAY,EAClC,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,YAE1C,IAAI,CAAC,IAAI,GACF,CACT,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarButton from \"./ToolbarButton.js\";\nimport Button from \"./Button.js\";\n\nexport default function ToolbarButtonTemplate(this: ToolbarButton) {\n\treturn (\n\t\t<Button\n\t\t\tclass={this.classes.root}\n\t\t\tid={this.id}\n\t\t\tstyle={{\n\t\t\t\twidth: this.width || \"100%\",\n\t\t\t}}\n\t\t\ticon={this.icon}\n\t\t\tendIcon={this.endIcon}\n\t\t\ttooltip={this.tooltip}\n\t\t\taccessibleName={this.accessibleName}\n\t\t\taccessibleNameRef={this.accessibleNameRef}\n\t\t\taccessibilityAttributes={this.accessibilityAttributes}\n\t\t\tdesign={this.design}\n\t\t\tdisabled={this.disabled}\n\t\t\thidden={this.hidden}\n\t\t\tdata-ui5-external-action-item-id={this._id}\n\t\t\tdata-ui5-stable={this.stableDomRef}\n\t\t\tonClick={(...args) => this.onClick(...args)}\n\t\t>\n\t\t\t{this.text}\n\t\t</Button>\n\t);\n}\n"]}
+{"version":3,"file":"ToolbarButtonTemplate.js","sourceRoot":"","sources":["../src/ToolbarButtonTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,KAAC,MAAM,IACN,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE;YACN,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM;SAC3B,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,sCACe,IAAI,CAAC,GAAG,qBACzB,IAAI,CAAC,YAAY,EAClC,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,YAE1C,IAAI,CAAC,aAAa,GACX,CACT,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarButton from \"./ToolbarButton.js\";\nimport Button from \"./Button.js\";\n\nexport default function ToolbarButtonTemplate(this: ToolbarButton) {\n\treturn (\n\t\t<Button\n\t\t\tclass={this.classes.root}\n\t\t\tid={this.id}\n\t\t\tstyle={{\n\t\t\t\twidth: this.width || \"100%\",\n\t\t\t}}\n\t\t\ticon={this.icon}\n\t\t\tendIcon={this.endIcon}\n\t\t\ttooltip={this.tooltip}\n\t\t\taccessibleName={this.accessibleName}\n\t\t\taccessibleNameRef={this.accessibleNameRef}\n\t\t\taccessibilityAttributes={this.accessibilityAttributes}\n\t\t\tdesign={this.design}\n\t\t\tdisabled={this.disabled}\n\t\t\thidden={this.hidden}\n\t\t\tdata-ui5-external-action-item-id={this._id}\n\t\t\tdata-ui5-stable={this.stableDomRef}\n\t\t\tonClick={(...args) => this.onClick(...args)}\n\t\t>\n\t\t\t{this.effectiveText}\n\t\t</Button>\n\t);\n}\n"]}