@ui5/webcomponents 1.17.0-rc.2 → 1.17.1

package/dist/Toolbar.d.ts

@@ -0,0 +1,223 @@
+import UI5Element, { ChangeInfo } 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 ToolbarAlign from "./types/ToolbarAlign.js";
+import HasPopup from "./types/HasPopup.js";
+import type ToolbarItem from "./ToolbarItem.js";
+import Button from "./Button.js";
+import Popover from "./Popover.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-toolbar</code> component is used to create a horizontal layout with items.
+ * The items can be overflowing in a popover, when the space is not enough to show all of them.
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-toolbar</code> provides advanced keyboard handling.
+ * <br>
+ * <ul>
+ * <li>The control is not interactive, but can contain of interactive elements </li>
+ * <li>[TAB] - iterates through elements</li>
+ * </ul>
+ * <br>
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/Toolbar";</code>
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Toolbar
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-toolbar
+ * @appenddocs sap.ui.webc.main.ToolbarButton sap.ui.webc.main.ToolbarSelect sap.ui.webc.main.ToolbarSelectOption sap.ui.webc.main.ToolbarSeparator sap.ui.webc.main.ToolbarSpacer
+ * @public
+ * @since 1.17.0
+ */
+declare class Toolbar extends UI5Element {
+    static i18nBundle: I18nBundle;
+    /**
+     * Indicated the direction in which the Toolbar items will be aligned.
+     * Available options are:
+     * <ul>
+     * <li><code>End</code></li>
+     * <li><code>Start</code></li>
+     * </ul>
+     * @type {sap.ui.webc.main.types.ToolbarAlign}
+     * @public
+     * @defaultvalue: "End"
+     * @name sap.ui.webc.main.Toolbar.prototype.alignContent
+     */
+    alignContent: `${ToolbarAlign}`;
+    /**
+     * Calculated width of the whole toolbar.
+     * @private
+     * @name sap.ui.webc.main.Toolbar.prototype.width
+     * @type {sap.ui.webc.base.types.Integer}
+     * @defaultvalue false
+     */
+    width?: number;
+    /**
+     * Calculated width of the toolbar content.
+     * @private
+     * @name sap.ui.webc.main.Toolbar.prototype.contentWidth
+     * @type {sap.ui.webc.base.types.Integer}
+     * @defaultvalue 0
+     */
+    contentWidth?: number;
+    /**
+     * Notifies the toolbar if it should show the items in a reverse way if Toolbar Popover needs to be placed on "Top" position.
+     * @private
+     * @type {Boolean}
+     */
+    reverseOverflow: boolean;
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.Toolbar.prototype.accessibleName
+     * @defaultvalue: ""
+     * @public
+     */
+    accessibleName: string;
+    /**
+     * Receives id(or many ids) of the elements that label the input.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.Toolbar.prototype.accessibleNameRef
+     * @defaultvalue ""
+     * @public
+     */
+    accessibleNameRef: string;
+    /**
+     * Defines the items of the component.
+     *
+     * @type {sap.ui.webc.main.IToolbarItem[]}
+     * @name sap.ui.webc.main.Toolbar.prototype.default
+     * @slot items
+     * @public
+     */
+    items: Array<ToolbarItem>;
+    _onResize: ResizeObserverCallback;
+    _onInteract: EventListener;
+    itemsToOverflow: Array<ToolbarItem>;
+    itemsWidth: number;
+    popoverOpen: boolean;
+    itemsWidthMeasured: boolean;
+    ITEMS_WIDTH_MAP: Map<string, number>;
+    static get styles(): (string | import("@ui5/webcomponents-base/dist/types.js").StyleDataCSP | import("@ui5/webcomponents-base/dist/types.js").ComponentStylesData[])[];
+    static get staticAreaStyles(): (string | import("@ui5/webcomponents-base/dist/types.js").StyleDataCSP | import("@ui5/webcomponents-base/dist/types.js").ComponentStylesData[])[];
+    static get dependencies(): (typeof UI5Element)[];
+    static onDefine(): Promise<void>;
+    constructor();
+    /**
+     * Read-only members
+     */
+    get overflowButtonSize(): number;
+    get padding(): number;
+    get subscribedEvents(): string[];
+    get alwaysOverflowItems(): ToolbarItem[];
+    get movableItems(): ToolbarItem[];
+    get overflowItems(): ({
+        toolbarTemplate: object;
+        toolbarPopoverTemplate: object;
+    } | null)[];
+    get standardItems(): ({
+        toolbarTemplate: object;
+        toolbarPopoverTemplate: object;
+    } | null)[];
+    get hideOverflowButton(): boolean;
+    get classes(): {
+        items: {
+            "ui5-tb-items": boolean;
+            "ui5-tb-items-full-width": boolean;
+        };
+        overflow: {
+            "ui5-overflow-list--alignleft": boolean;
+        };
+        overflowButton: {
+            "ui5-tb-item": boolean;
+            "ui5-tb-overflow-btn": boolean;
+            "ui5-tb-overflow-btn-hidden": boolean;
+        };
+    };
+    get interactiveItemsCount(): number;
+    /**
+     * Accessibility
+     */
+    get hasAriaSemantics(): boolean;
+    get accessibleRole(): "toolbar" | undefined;
+    get ariaLabelText(): string | undefined;
+    get accInfo(): {
+        root: {
+            role: string | undefined;
+            accessibleName: string | undefined;
+        };
+        overflowButton: {
+            accessibleName: string;
+            tooltip: string;
+            accessibilityAttributes: {
+                expanded: "true" | "false" | undefined;
+                hasPopup: HasPopup;
+            };
+        };
+    };
+    /**
+     * Toolbar Overflow Popover
+     */
+    get overflowButtonDOM(): Button | null;
+    get itemsDOM(): Element | null;
+    get hasItemWithText(): boolean;
+    get hasFlexibleSpacers(): boolean;
+    /**
+     * Lifecycle methods
+     */
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onInvalidation(changeInfo: ChangeInfo): void;
+    onBeforeRendering(): void;
+    onAfterRendering(): Promise<void>;
+    /**
+     * Returns if the overflow popup is open.
+     *
+     * @public
+     * @return { Promise<Boolean> }
+     */
+    isOverflowOpen(): Promise<boolean>;
+    openOverflow(): Promise<void>;
+    closeOverflow(): Promise<void>;
+    toggleOverflow(): void;
+    getOverflowPopover(): Promise<Popover | null>;
+    /**
+     * Layout management
+     */
+    processOverflowLayout(): void;
+    storeItemsWidth(): void;
+    distributeItems(overflowSpace?: number): void;
+    distributeItemsThatAlwaysOverflow(): void;
+    setSeperatorsVisibilityInOverflow(): void;
+    shouldShowSeparatorInOverflow(separatorIdx: number, overflowItems: Array<ToolbarItem>): boolean;
+    /**
+     * Event Handlers
+     */
+    onOverflowPopoverClosed(): void;
+    onOverflowPopoverOpened(): void;
+    onResize(): void;
+    onInteract(e: CustomEvent): void;
+    /**
+     * Private members
+     */
+    attachListeners(): Promise<void>;
+    detachListeners(): Promise<void>;
+    onToolbarItemChange(): void;
+    getItemsInfo(items: Array<ToolbarItem>): ({
+        toolbarTemplate: object;
+        toolbarPopoverTemplate: object;
+    } | null)[];
+    getItemWidth(item: ToolbarItem): number;
+    getCachedItemWidth(id: string): number | undefined;
+    getItemByID(id: string): ToolbarItem | undefined;
+    getRegisteredToolbarItemByID(id: string): HTMLElement | null;
+}
+export default Toolbar;

package/dist/Toolbar.js

@@ -0,0 +1,467 @@
+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 Toolbar_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import "@ui5/webcomponents-icons/dist/overflow.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+import { TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL, } from "./generated/i18n/i18n-defaults.js";
+import ToolbarTemplate from "./generated/templates/ToolbarTemplate.lit.js";
+import ToolbarCss from "./generated/themes/Toolbar.css.js";
+import ToolbarPopoverTemplate from "./generated/templates/ToolbarPopoverTemplate.lit.js";
+import ToolbarPopoverCss from "./generated/themes/ToolbarPopover.css.js";
+import ToolbarAlign from "./types/ToolbarAlign.js";
+import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
+import HasPopup from "./types/HasPopup.js";
+import { getRegisteredToolbarItem, getRegisteredStyles, getRegisteredStaticAreaStyles, getRegisteredDependencies, } from "./ToolbarRegistry.js";
+import Button from "./Button.js";
+import Popover from "./Popover.js";
+function calculateCSSREMValue(styleSet, propertyName) {
+    return Number(styleSet.getPropertyValue(propertyName).replace("rem", "")) * parseInt(getComputedStyle(document.body).getPropertyValue("font-size"));
+}
+function parsePxValue(styleSet, propertyName) {
+    return Number(styleSet.getPropertyValue(propertyName).replace("px", ""));
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-toolbar</code> component is used to create a horizontal layout with items.
+ * The items can be overflowing in a popover, when the space is not enough to show all of them.
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-toolbar</code> provides advanced keyboard handling.
+ * <br>
+ * <ul>
+ * <li>The control is not interactive, but can contain of interactive elements </li>
+ * <li>[TAB] - iterates through elements</li>
+ * </ul>
+ * <br>
+ *
+ * <h3>ES6 Module Import</h3>
+ * <code>import "@ui5/webcomponents/dist/Toolbar";</code>
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.Toolbar
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-toolbar
+ * @appenddocs sap.ui.webc.main.ToolbarButton sap.ui.webc.main.ToolbarSelect sap.ui.webc.main.ToolbarSelectOption sap.ui.webc.main.ToolbarSeparator sap.ui.webc.main.ToolbarSpacer
+ * @public
+ * @since 1.17.0
+ */
+let Toolbar = Toolbar_1 = class Toolbar extends UI5Element {
+    static get styles() {
+        const styles = getRegisteredStyles();
+        return [
+            ToolbarCss,
+            ...styles,
+        ];
+    }
+    static get staticAreaStyles() {
+        const styles = getRegisteredStaticAreaStyles();
+        return [
+            ToolbarPopoverCss,
+            ...styles,
+        ];
+    }
+    static get dependencies() {
+        const deps = getRegisteredDependencies();
+        return [
+            Popover,
+            Button,
+            ...deps,
+        ];
+    }
+    static async onDefine() {
+        Toolbar_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    constructor() {
+        super();
+        this.itemsToOverflow = [];
+        this.itemsWidth = 0;
+        this.popoverOpen = false;
+        this.itemsWidthMeasured = false;
+        this.ITEMS_WIDTH_MAP = new Map();
+        this._onResize = this.onResize.bind(this);
+        this._onInteract = (e) => this.onInteract(e);
+    }
+    /**
+     * Read-only members
+     */
+    get overflowButtonSize() {
+        return this.overflowButtonDOM?.getBoundingClientRect().width || 0;
+    }
+    get padding() {
+        const toolbarComputedStyle = getComputedStyle(this.getDomRef());
+        return calculateCSSREMValue(toolbarComputedStyle, getScopedVarName("--_ui5-toolbar-padding-left"))
+            + calculateCSSREMValue(toolbarComputedStyle, getScopedVarName("--_ui5-toolbar-padding-right"));
+    }
+    get subscribedEvents() {
+        return this.items
+            .map((item) => Array.from(item.subscribedEvents.keys()))
+            .flat()
+            // remove duplicates
+            .filter((value, index, self) => self.indexOf(value) === index);
+    }
+    get alwaysOverflowItems() {
+        return this.items.filter((item) => item.overflowPriority === ToolbarItemOverflowBehavior.AlwaysOverflow);
+    }
+    get movableItems() {
+        return this.items.filter((item) => item.overflowPriority !== ToolbarItemOverflowBehavior.AlwaysOverflow && item.overflowPriority !== ToolbarItemOverflowBehavior.NeverOverflow);
+    }
+    get overflowItems() {
+        // spacers are ignored
+        const overflowItems = this.getItemsInfo(this.itemsToOverflow.filter(item => !item.ignoreSpace));
+        return this.reverseOverflow ? overflowItems.reverse() : overflowItems;
+    }
+    get standardItems() {
+        return this.getItemsInfo(this.items.filter(item => this.itemsToOverflow.indexOf(item) === -1));
+    }
+    get hideOverflowButton() {
+        return this.itemsToOverflow.filter(item => !(item.ignoreSpace || item.isSeparator)).length === 0;
+    }
+    get classes() {
+        return {
+            items: {
+                "ui5-tb-items": true,
+                "ui5-tb-items-full-width": this.hasFlexibleSpacers,
+            },
+            overflow: {
+                "ui5-overflow-list--alignleft": this.hasItemWithText,
+            },
+            overflowButton: {
+                "ui5-tb-item": true,
+                "ui5-tb-overflow-btn": true,
+                "ui5-tb-overflow-btn-hidden": this.hideOverflowButton,
+            },
+        };
+    }
+    get interactiveItemsCount() {
+        return this.items.filter((item) => item.isInteractive).length;
+    }
+    /**
+     * Accessibility
+     */
+    get hasAriaSemantics() {
+        return this.interactiveItemsCount > 1;
+    }
+    get accessibleRole() {
+        return this.hasAriaSemantics ? "toolbar" : undefined;
+    }
+    get ariaLabelText() {
+        return this.hasAriaSemantics ? getEffectiveAriaLabelText(this) : undefined;
+    }
+    get accInfo() {
+        return {
+            root: {
+                role: this.accessibleRole,
+                accessibleName: this.ariaLabelText,
+            },
+            overflowButton: {
+                accessibleName: Toolbar_1.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),
+                tooltip: Toolbar_1.i18nBundle.getText(TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL),
+                accessibilityAttributes: {
+                    expanded: this.overflowButtonDOM?.accessibilityAttributes.expanded,
+                    hasPopup: HasPopup.Menu,
+                },
+            },
+        };
+    }
+    /**
+     * Toolbar Overflow Popover
+     */
+    get overflowButtonDOM() {
+        return this.shadowRoot.querySelector(".ui5-tb-overflow-btn");
+    }
+    get itemsDOM() {
+        return this.shadowRoot.querySelector(".ui5-tb-items");
+    }
+    get hasItemWithText() {
+        return this.itemsToOverflow.some((item) => item.containsText);
+    }
+    get hasFlexibleSpacers() {
+        return this.items.some((item) => item.hasFlexibleWidth);
+    }
+    /**
+     * Lifecycle methods
+     */
+    onEnterDOM() {
+        ResizeHandler.register(this, this._onResize);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._onResize);
+    }
+    onInvalidation(changeInfo) {
+        if (changeInfo.reason === "childchange" && changeInfo.child === this.itemsToOverflow[0]) {
+            this.onToolbarItemChange();
+        }
+    }
+    onBeforeRendering() {
+        this.detachListeners();
+        this.attachListeners();
+    }
+    async onAfterRendering() {
+        await renderFinished();
+        this.storeItemsWidth();
+        this.processOverflowLayout();
+    }
+    /**
+     * Returns if the overflow popup is open.
+     *
+     * @public
+     * @return { Promise<Boolean> }
+     */
+    async isOverflowOpen() {
+        const overflowPopover = await this.getOverflowPopover();
+        return overflowPopover.isOpen();
+    }
+    async openOverflow() {
+        const overflowPopover = await this.getOverflowPopover();
+        overflowPopover.showAt(this.overflowButtonDOM);
+        this.reverseOverflow = overflowPopover.actualPlacementType === "Top";
+    }
+    async closeOverflow() {
+        const overflowPopover = await this.getOverflowPopover();
+        overflowPopover.close();
+    }
+    toggleOverflow() {
+        if (this.popoverOpen) {
+            this.closeOverflow();
+        }
+        else {
+            this.openOverflow();
+        }
+    }
+    async getOverflowPopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector(".ui5-overflow-popover");
+    }
+    /**
+     * Layout management
+     */
+    processOverflowLayout() {
+        const containerWidth = this.offsetWidth - this.padding;
+        const contentWidth = this.itemsWidth;
+        const overflowSpace = contentWidth - containerWidth + this.overflowButtonSize;
+        // skip calculation if the width has not been changed or if the items width has not been changed
+        if (this.width === containerWidth && this.contentWidth === contentWidth) {
+            return;
+        }
+        this.distributeItems(overflowSpace);
+        this.width = containerWidth;
+        this.contentWidth = contentWidth;
+    }
+    storeItemsWidth() {
+        let totalWidth = 0;
+        this.items.forEach((item) => {
+            const itemWidth = this.getItemWidth(item);
+            totalWidth += itemWidth;
+            this.ITEMS_WIDTH_MAP.set(item._id, itemWidth);
+        });
+        this.itemsWidth = totalWidth;
+    }
+    distributeItems(overflowSpace = 0) {
+        const movableItems = this.movableItems.reverse();
+        let index = 0;
+        let currentItem = movableItems[index];
+        this.itemsToOverflow = [];
+        // distribute items that always overflow
+        this.distributeItemsThatAlwaysOverflow();
+        while (overflowSpace > 0 && currentItem) {
+            this.itemsToOverflow.unshift(currentItem);
+            overflowSpace -= this.getCachedItemWidth(currentItem?._id) || 0;
+            index++;
+            currentItem = movableItems[index];
+        }
+        // If the last bar item is a spacer, force it to the overflow even if there is enough space for it
+        if (index < movableItems.length) {
+            let lastItem = movableItems[index];
+            while (index <= movableItems.length - 1 && lastItem.isSeparator) {
+                this.itemsToOverflow.unshift(lastItem);
+                index++;
+                lastItem = movableItems[index];
+            }
+        }
+        this.setSeperatorsVisibilityInOverflow();
+    }
+    distributeItemsThatAlwaysOverflow() {
+        this.alwaysOverflowItems.forEach((item) => {
+            this.itemsToOverflow.push(item);
+        });
+    }
+    setSeperatorsVisibilityInOverflow() {
+        this.itemsToOverflow.forEach((item, idx, items) => {
+            if (item.isSeparator) {
+                item.visible = this.shouldShowSeparatorInOverflow(idx, items);
+            }
+        });
+    }
+    shouldShowSeparatorInOverflow(separatorIdx, overflowItems) {
+        let foundPrevNonSeparatorItem = false;
+        let foundNextNonSeperatorItem = false;
+        // search for non-separator item before and after the seperator
+        overflowItems.forEach((item, idx) => {
+            if (idx < separatorIdx && !item.isSeparator) {
+                foundPrevNonSeparatorItem = true;
+            }
+            if (idx > separatorIdx && !item.isSeparator) {
+                foundNextNonSeperatorItem = true;
+            }
+        });
+        return foundPrevNonSeparatorItem && foundNextNonSeperatorItem;
+    }
+    /**
+     * Event Handlers
+     */
+    onOverflowPopoverClosed() {
+        this.popoverOpen = false;
+        if (this.overflowButtonDOM) {
+            this.overflowButtonDOM.accessibilityAttributes.expanded = "false";
+        }
+    }
+    onOverflowPopoverOpened() {
+        this.popoverOpen = true;
+        if (this.overflowButtonDOM) {
+            this.overflowButtonDOM.accessibilityAttributes.expanded = "true";
+        }
+    }
+    onResize() {
+        if (!this.itemsWidth) {
+            return;
+        }
+        this.closeOverflow();
+        this.processOverflowLayout();
+    }
+    onInteract(e) {
+        const target = e.target;
+        const item = target.closest(".ui5-tb-item") || target.closest(".ui5-tb-popover-item");
+        const eventType = e.type;
+        if (target === this.overflowButtonDOM) {
+            this.toggleOverflow();
+            return;
+        }
+        if (!item) {
+            return;
+        }
+        const refItemId = target.getAttribute("data-ui5-external-action-item-id");
+        if (refItemId) {
+            const abstractItem = this.getItemByID(refItemId);
+            const prevented = !abstractItem?.fireEvent(eventType, e.detail, true);
+            const eventOptions = abstractItem?.subscribedEvents.get(eventType);
+            if (prevented || abstractItem?.preventOverflowClosing || eventOptions?.preventClosing) {
+                return;
+            }
+            this.closeOverflow();
+        }
+    }
+    /**
+     * Private members
+     */
+    async attachListeners() {
+        const popover = await this.getOverflowPopover();
+        this.subscribedEvents.forEach((e) => {
+            this.itemsDOM?.addEventListener(e, this._onInteract);
+            popover?.addEventListener(e, this._onInteract);
+        });
+    }
+    async detachListeners() {
+        const popover = await this.getOverflowPopover();
+        this.subscribedEvents.forEach((e) => {
+            this.itemsDOM?.removeEventListener(e, this._onInteract);
+            popover?.removeEventListener(e, this._onInteract);
+        });
+    }
+    onToolbarItemChange() {
+        // some items were updated reset the cache and trigger a re-render
+        this.itemsToOverflow = [];
+        this.contentWidth = 0; // re-render
+    }
+    getItemsInfo(items) {
+        return items.map((item) => {
+            const ElementClass = getRegisteredToolbarItem(item.constructor.name);
+            if (!ElementClass) {
+                return null;
+            }
+            const toolbarItem = {
+                toolbarTemplate: executeTemplate(ElementClass.toolbarTemplate, item),
+                toolbarPopoverTemplate: executeTemplate(ElementClass.toolbarPopoverTemplate, item),
+            };
+            return toolbarItem;
+        });
+    }
+    getItemWidth(item) {
+        // Spacer width - always 0 for flexible spacers, so that they shrink, otherwise - measure the width normally
+        if (item.ignoreSpace || item.isSeparator) {
+            return 0;
+        }
+        const id = item._id;
+        // Measure rendered width for spacers with width, and for normal items
+        const renderedItem = this.getRegisteredToolbarItemByID(id);
+        let itemWidth = 0;
+        if (renderedItem) {
+            const ItemCSSStyleSet = getComputedStyle(renderedItem);
+            itemWidth = renderedItem.offsetWidth + parsePxValue(ItemCSSStyleSet, "margin-inline-end")
+                + parsePxValue(ItemCSSStyleSet, "margin-inline-start");
+        }
+        else {
+            itemWidth = this.getCachedItemWidth(id) || 0;
+        }
+        return Math.ceil(itemWidth);
+    }
+    getCachedItemWidth(id) {
+        return this.ITEMS_WIDTH_MAP.get(id);
+    }
+    getItemByID(id) {
+        return this.items.find(item => item._id === id);
+    }
+    getRegisteredToolbarItemByID(id) {
+        return this.itemsDOM.querySelector(`[data-ui5-external-action-item-id="${id}"]`);
+    }
+};
+__decorate([
+    property({ type: ToolbarAlign, defaultValue: ToolbarAlign.End })
+], Toolbar.prototype, "alignContent", void 0);
+__decorate([
+    property({ type: Integer })
+], Toolbar.prototype, "width", void 0);
+__decorate([
+    property({ type: Integer })
+], Toolbar.prototype, "contentWidth", void 0);
+__decorate([
+    property({ type: Boolean })
+], Toolbar.prototype, "reverseOverflow", void 0);
+__decorate([
+    property()
+], Toolbar.prototype, "accessibleName", void 0);
+__decorate([
+    property({ defaultValue: "" })
+], Toolbar.prototype, "accessibleNameRef", void 0);
+__decorate([
+    slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
+], Toolbar.prototype, "items", void 0);
+Toolbar = Toolbar_1 = __decorate([
+    customElement({
+        tag: "ui5-toolbar",
+        languageAware: true,
+        renderer: litRender,
+        template: ToolbarTemplate,
+        staticAreaTemplate: ToolbarPopoverTemplate,
+    })
+], Toolbar);
+Toolbar.define();
+export default Toolbar;
+//# sourceMappingURL=Toolbar.js.map