@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

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,EAAC,2BAA2B,EACjC,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAE;YACN,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc;SAC9C,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=\"ui5-tb-button ui5-tb-item\"\n\t\t\tid={this.id}\n\t\t\tstyle={{\n\t\t\t\twidth: this.width,\n\t\t\t\tdisplay: this.hidden ? \"none\" : \"inline-block\",\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"]}

package/dist/ToolbarItem.d.ts

@@ -1,5 +1,4 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import type ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
 type IEventOptions = {
     preventClosing: boolean;
@@ -7,6 +6,36 @@ type IEventOptions = {
 type ToolbarItemEventDetail = {
     targetRef: HTMLElement;
 };
+interface IOverflowToolbarItem extends HTMLElement {
+    overflowCloseEvents?: string[] | undefined;
+    hasOverflow?: boolean | undefined;
+}
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-toolbar-item` is a wrapper component used to integrate UI5 Web Components into the `ui5-toolbar`.
+ * It renders within the toolbar's shadow DOM and manages the lifecycle
+ * and overflow behavior of its child component.
+ *
+ * ### Structure
+ * The toolbar item wraps a single UI5 Web Component (such as CheckBox, Title, etc.) and handles:
+ * - Overflow management (determining if the item should be displayed in the main toolbar or overflow popover)
+ * - Automatic popover closing on interaction
+ * - CSS custom state exposure for styling based on overflow state
+ *
+ * ### Usage
+ * The `ui5-toolbar-item` is typically used implicitly when adding components to a toolbar,
+ * but specialized wrappers like `ui5-toolbar-button` provide
+ * component-specific functionality and should be preferred when available.
+ *
+ *
+ * @cssState overflowed - When the item is displayed in the overflow popover. Use this state to apply different styles when the item is overflowed. Available since 2.20.0.
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 1.17.0
+ */
 declare class ToolbarItem extends UI5Element {
     eventDetails: {
         click: ToolbarItemEventDetail;
@@ -20,23 +49,56 @@ declare class ToolbarItem extends UI5Element {
      */
     overflowPriority: `${ToolbarItemOverflowBehavior}`;
     /**
-     * Defines if the toolbar overflow popup should close upon intereaction with the item.
+     * Defines if the toolbar overflow popup should close upon interaction with the item.
      * It will close by default.
      * @default false
      * @public
      */
     preventOverflowClosing: boolean;
+    _isOverflowed: boolean;
+    get isOverflowed(): boolean;
+    /**
+     * Defines if the toolbar item is overflowed.
+     * @default false
+     * @protected
+     * @since 2.11.0
+     */
+    set isOverflowed(value: boolean);
+    _isRendering: boolean;
+    _maxWidth: number;
+    _wrapperChecked: boolean;
+    fireCloseOverflowRef: () => void;
+    closeOverflowSet: {
+        "ui5-button": string[];
+        "ui5-select": string[];
+        "ui5-combobox": string[];
+        "ui5-multi-combobox": string[];
+        "ui5-date-picker": string[];
+        "ui5-switch": string[];
+    };
+    predefinedWrapperSet: {
+        "ui5-button": string;
+        "ui5-select": string;
+    };
+    onBeforeRendering(): void;
+    onAfterRendering(): void;
+    onExitDOM(): void;
+    /**
+     * Wrapped component slot.
+     * @public
+     * @since 2.20.0
+     */
+    item: IOverflowToolbarItem[];
+    checkForWrapper(): void;
+    getClosingEvents(): string[];
+    attachCloseOverflowHandlers(): void;
+    detachCloseOverflowHandlers(): void;
+    fireCloseOverflow(): void;
     /**
     * Defines if the width of the item should be ignored in calculating the whole width of the toolbar
     * @protected
     */
     get ignoreSpace(): boolean;
-    /**
-     * Returns if the item contains text. Used to position the text properly inside the popover.
-     * Aligned left if the item has text, default aligned otherwise.
-     * @protected
-     */
-    get containsText(): boolean;
     /**
      * Returns if the item is flexible. An item that is returning true for this property will make
      * the toolbar expand to fill the 100% width of its container.
@@ -50,22 +112,20 @@ declare class ToolbarItem extends UI5Element {
      * @protected
      */
     get isInteractive(): boolean;
+    get itemTagName(): string;
+    get hasOverflow(): boolean;
     /**
      * Returns if the item is separator.
      * @protected
      */
     get isSeparator(): boolean;
-    /**
-     * Returns the template for the toolbar item.
-     * @protected
-     */
-    static get toolbarTemplate(): TemplateFunction;
-    /**
-     * Returns the template for the toolbar item popover.
-     * @protected
-     */
-    static get toolbarPopoverTemplate(): TemplateFunction;
     get stableDomRef(): string;
+    get classes(): {
+        root: {
+            "ui5-tb-popover-item": boolean;
+            "ui5-tb-item": boolean;
+        };
+    };
 }
-export type { IEventOptions, ToolbarItemEventDetail, };
+export type { IEventOptions, ToolbarItemEventDetail, IOverflowToolbarItem, };
 export default ToolbarItem;

package/dist/ToolbarItem.js

@@ -7,18 +7,38 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-let ToolbarItem = 
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import ToolbarItemTemplate from "./ToolbarItemTemplate.js";
+import ToolbarItemCss from "./generated/themes/ToolbarItem.css.js";
 /**
  * @class
  *
- * Represents an abstract class for items, used in the `ui5-toolbar`.
+ * ### Overview
+ * The `ui5-toolbar-item` is a wrapper component used to integrate UI5 Web Components into the `ui5-toolbar`.
+ * It renders within the toolbar's shadow DOM and manages the lifecycle
+ * and overflow behavior of its child component.
+ *
+ * ### Structure
+ * The toolbar item wraps a single UI5 Web Component (such as CheckBox, Title, etc.) and handles:
+ * - Overflow management (determining if the item should be displayed in the main toolbar or overflow popover)
+ * - Automatic popover closing on interaction
+ * - CSS custom state exposure for styling based on overflow state
+ *
+ * ### Usage
+ * The `ui5-toolbar-item` is typically used implicitly when adding components to a toolbar,
+ * but specialized wrappers like `ui5-toolbar-button` provide
+ * component-specific functionality and should be preferred when available.
+ *
+ *
+ * @cssState overflowed - When the item is displayed in the overflow popover. Use this state to apply different styles when the item is overflowed. Available since 2.20.0.
  * @constructor
  * @extends UI5Element
- * @abstract
  * @public
  * @since 1.17.0
  */
-class ToolbarItem extends UI5Element {
+let ToolbarItem = class ToolbarItem extends UI5Element {
     constructor() {
         super(...arguments);
         /**
@@ -29,12 +49,99 @@ class ToolbarItem extends UI5Element {
          */
         this.overflowPriority = "Default";
         /**
-         * Defines if the toolbar overflow popup should close upon intereaction with the item.
+         * Defines if the toolbar overflow popup should close upon interaction with the item.
          * It will close by default.
          * @default false
          * @public
          */
         this.preventOverflowClosing = false;
+        this._isOverflowed = false;
+        this._isRendering = true;
+        this._maxWidth = 0;
+        this._wrapperChecked = false;
+        this.fireCloseOverflowRef = this.fireCloseOverflow.bind(this);
+        this.closeOverflowSet = {
+            "ui5-button": ["click"],
+            "ui5-select": ["change"],
+            "ui5-combobox": ["change"],
+            "ui5-multi-combobox": ["selection-change"],
+            "ui5-date-picker": ["change"],
+            "ui5-switch": ["change"],
+        };
+        this.predefinedWrapperSet = {
+            "ui5-button": "ToolbarButton",
+            "ui5-select": "ToolbarSelect",
+        };
+    }
+    get isOverflowed() {
+        return this._isOverflowed;
+    }
+    /**
+     * Defines if the toolbar item is overflowed.
+     * @default false
+     * @protected
+     * @since 2.11.0
+     */
+    set isOverflowed(value) {
+        this._isOverflowed = value;
+        if (value) {
+            this._internals.states.add("overflowed");
+        }
+        else {
+            this._internals.states.delete("overflowed");
+        }
+    }
+    onBeforeRendering() {
+        this.checkForWrapper();
+        this.attachCloseOverflowHandlers();
+    }
+    onAfterRendering() {
+        this._isRendering = false;
+    }
+    onExitDOM() {
+        this.detachCloseOverflowHandlers();
+    }
+    // Method called by ui5-toolbar to inform about the existing toolbar wrapper
+    checkForWrapper() {
+        if (this._wrapperChecked) {
+            return;
+        }
+        this._wrapperChecked = true;
+        const tagName = this.itemTagName;
+        const ctor = this.constructor;
+        const wrapperName = ctor?.getMetadata ? ctor.getMetadata().getPureTag() : this.tagName;
+        if (wrapperName === "ui5-toolbar-item"
+            && this.predefinedWrapperSet[tagName]) {
+            // eslint-disable-next-line no-console
+            console.warn(`This UI5 web component has its predefined toolbar wrapper called ${this.predefinedWrapperSet[tagName]}.`);
+        }
+    }
+    // We want to close the overflow popover, when closing event is being executed
+    getClosingEvents() {
+        const item = Array.isArray(this.item) ? this.item[0] : this.item;
+        const closeEvents = this.closeOverflowSet[this.itemTagName] || [];
+        if (!item) {
+            return [...closeEvents];
+        }
+        const overflowCloseEvents = Array.isArray(item.overflowCloseEvents) ? item.overflowCloseEvents : [];
+        return [...closeEvents, ...overflowCloseEvents];
+    }
+    attachCloseOverflowHandlers() {
+        const closingEvents = this.getClosingEvents();
+        closingEvents.forEach(clEvent => {
+            if (!this.preventOverflowClosing) {
+                this.addEventListener(clEvent, this.fireCloseOverflowRef);
+            }
+        });
+    }
+    detachCloseOverflowHandlers() {
+        const closingEvents = this.getClosingEvents();
+        closingEvents.forEach(clEvent => {
+            this.removeEventListener(clEvent, this.fireCloseOverflowRef);
+        });
+    }
+    fireCloseOverflow() {
+        this.fireDecoratorEvent("close-overflow");
     }
     /**
     * Defines if the width of the item should be ignored in calculating the whole width of the toolbar
@@ -43,14 +150,6 @@ class ToolbarItem extends UI5Element {
     get ignoreSpace() {
         return false;
     }
-    /**
-     * Returns if the item contains text. Used to position the text properly inside the popover.
-     * Aligned left if the item has text, default aligned otherwise.
-     * @protected
-     */
-    get containsText() {
-        return false;
-    }
     /**
      * Returns if the item is flexible. An item that is returning true for this property will make
      * the toolbar expand to fill the 100% width of its container.
@@ -68,6 +167,13 @@ class ToolbarItem extends UI5Element {
     get isInteractive() {
         return true;
     }
+    get itemTagName() {
+        const ctor = this.getSlottedNodes("item")[0]?.constructor;
+        return ctor?.getMetadata ? ctor.getMetadata().getPureTag() : this.getSlottedNodes("item")[0]?.tagName;
+    }
+    get hasOverflow() {
+        return this.item[0]?.hasOverflow ?? false;
+    }
     /**
      * Returns if the item is separator.
      * @protected
@@ -75,23 +181,17 @@ class ToolbarItem extends UI5Element {
     get isSeparator() {
         return false;
     }
-    /**
-     * Returns the template for the toolbar item.
-     * @protected
-     */
-    static get toolbarTemplate() {
-        throw new Error("Template must be defined");
-    }
-    /**
-     * Returns the template for the toolbar item popover.
-     * @protected
-     */
-    static get toolbarPopoverTemplate() {
-        throw new Error("Popover template must be defined");
-    }
     get stableDomRef() {
         return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
     }
+    get classes() {
+        return {
+            root: {
+                "ui5-tb-popover-item": this.isOverflowed,
+                "ui5-tb-item": true,
+            },
+        };
+    }
 };
 __decorate([
     property()
@@ -99,20 +199,33 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], ToolbarItem.prototype, "preventOverflowClosing", void 0);
+__decorate([
+    property({ type: Boolean })
+], ToolbarItem.prototype, "isOverflowed", null);
+__decorate([
+    slot({
+        "default": true, type: HTMLElement, invalidateOnChildChange: true,
+    })
+], ToolbarItem.prototype, "item", void 0);
 ToolbarItem = __decorate([
-    event("close-overflow", {
-        bubbles: true,
+    customElement({
+        tag: "ui5-toolbar-item",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: ToolbarItemTemplate,
+        styles: ToolbarItemCss,
     })
     /**
-     * @class
-     *
-     * Represents an abstract class for items, used in the `ui5-toolbar`.
-     * @constructor
-     * @extends UI5Element
-     * @abstract
+     * Fired when the overflow popover is closed.
      * @public
      * @since 1.17.0
      */
+    ,
+    event("close-overflow", {
+        bubbles: true,
+        cancelable: true,
+    })
 ], ToolbarItem);
+ToolbarItem.define();
 export default ToolbarItem;
 //# sourceMappingURL=ToolbarItem.js.map

package/dist/ToolbarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarItem.js","sourceRoot":"","sources":["../src/ToolbarItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AA0B5E,IAAM,WAAW;AAVjB;;;;;;;;;GASG;AACH,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAMC;;;;;WAKG;QAEH,qBAAgB,GAAqC,SAAS,CAAC;QAE/D;;;;;WAKG;QAEH,2BAAsB,GAAG,KAAK,CAAC;IAiEhC,CAAC;IA/DA;;;MAGE;IACF,IAAI,WAAW;QACd,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,IAAI,YAAY;QACf,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,IAAI,gBAAgB;QACnB,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;;;OAKG;IACH,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;;OAGG;IACH,IAAI,WAAW;QACd,OAAO,KAAK,CAAC;IACd,CAAC;IAED;;;OAGG;IACH,MAAM,KAAK,eAAe;QACzB,MAAM,IAAI,KAAK,CAAC,0BAA0B,CAAC,CAAC;IAC7C,CAAC;IAED;;;OAGG;IACH,MAAM,KAAK,sBAAsB;QAChC,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AA1EA;IADC,QAAQ,EAAE;qDACoD;AAS/D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACG;AAtB1B,WAAW;IAdhB,KAAK,CAAC,gBAAgB,EAAE;QACxB,OAAO,EAAE,IAAI;KACb,CAAC;IAEF;;;;;;;;;OASG;GACG,WAAW,CAuFhB;AAMD,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { TemplateFunction } from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\n\nimport type ToolbarItemOverflowBehavior from \"./types/ToolbarItemOverflowBehavior.js\";\n\ntype IEventOptions = {\n\tpreventClosing: boolean;\n}\n\ntype ToolbarItemEventDetail = {\n\ttargetRef: HTMLElement;\n}\n\n@event(\"close-overflow\", {\n\tbubbles: true,\n})\n\n/**\n * @class\n *\n * Represents an abstract class for items, used in the `ui5-toolbar`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n * @since 1.17.0\n */\nclass ToolbarItem extends UI5Element {\n\t// strictEvents: needed for parent class\n\teventDetails!: {\n\t\tclick: ToolbarItemEventDetail,\n\t\t\"close-overflow\": void;\n\t}\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 intereaction 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 width of the item should be ignored in calculating the whole width of the toolbar\n\t* @protected\n\t*/\n\tget ignoreSpace(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item contains text. Used to position the text properly inside the popover.\n\t * Aligned left if the item has text, default aligned otherwise.\n\t * @protected\n\t */\n\tget containsText(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is flexible. An item that is returning true for this property will make\n\t * the toolbar expand to fill the 100% width of its container.\n\t * @protected\n\t */\n\tget hasFlexibleWidth(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is interactive.\n\t * This value is used to determinate if the toolbar should have its accessibility role and attributes set.\n\t * At least two interactive items are needed for the toolbar to have the role=\"toolbar\" attribute set.\n\t * @protected\n\t */\n\tget isInteractive(): boolean {\n\t\treturn true;\n\t}\n\n\t/**\n\t * Returns if the item is separator.\n\t * @protected\n\t */\n\tget isSeparator() {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns the template for the toolbar item.\n\t * @protected\n\t */\n\tstatic get toolbarTemplate(): TemplateFunction {\n\t\tthrow new Error(\"Template must be defined\");\n\t}\n\n\t/**\n\t * Returns the template for the toolbar item popover.\n\t * @protected\n\t */\n\tstatic get toolbarPopoverTemplate(): TemplateFunction {\n\t\tthrow new Error(\"Popover template must be defined\");\n\t}\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n}\n\nexport type {\n\tIEventOptions,\n\tToolbarItemEventDetail,\n};\nexport default ToolbarItem;\n"]}
+{"version":3,"file":"ToolbarItem.js","sourceRoot":"","sources":["../src/ToolbarItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ToolbarItemTemplate from \"./ToolbarItemTemplate.js\";\nimport ToolbarItemCss from \"./generated/themes/ToolbarItem.css.js\";\nimport type ToolbarItemOverflowBehavior from \"./types/ToolbarItemOverflowBehavior.js\";\n\ntype IEventOptions = {\n\tpreventClosing: boolean;\n}\n\ntype ToolbarItemEventDetail = {\n\ttargetRef: HTMLElement;\n}\n\ninterface IOverflowToolbarItem extends HTMLElement {\n\toverflowCloseEvents?: string[] | undefined;\n\thasOverflow?: boolean | undefined;\n}\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-item` is a wrapper component used to integrate UI5 Web Components into the `ui5-toolbar`.\n * It renders within the toolbar's shadow DOM and manages the lifecycle\n * and overflow behavior of its child component.\n *\n * ### Structure\n * The toolbar item wraps a single UI5 Web Component (such as CheckBox, Title, etc.) and handles:\n * - Overflow management (determining if the item should be displayed in the main toolbar or overflow popover)\n * - Automatic popover closing on interaction\n * - CSS custom state exposure for styling based on overflow state\n *\n * ### Usage\n * The `ui5-toolbar-item` is typically used implicitly when adding components to a toolbar,\n * but specialized wrappers like `ui5-toolbar-button` provide\n * component-specific functionality and should be preferred when available.\n *\n *\n * @cssState overflowed - When the item is displayed in the overflow popover. Use this state to apply different styles when the item is overflowed. Available since 2.20.0.\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-item\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: ToolbarItemTemplate,\n\tstyles: ToolbarItemCss,\n})\n/**\n * Fired when the overflow popover is closed.\n * @public\n * @since 1.17.0\n */\n@event(\"close-overflow\", {\n\tbubbles: true,\n\tcancelable: true,\n})\nclass ToolbarItem extends UI5Element {\n\t// strictEvents: needed for parent class\n\teventDetails!: {\n\t\tclick: ToolbarItemEventDetail,\n\t\t\"close-overflow\": void;\n\t}\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_isOverflowed: boolean = false;\n\n\tget isOverflowed(): boolean {\n\t\treturn this._isOverflowed;\n\t}\n\n\t/**\n\t * Defines if the toolbar item is overflowed.\n\t * @default false\n\t * @protected\n\t * @since 2.11.0\n\t */\n\t@property({ type: Boolean })\n\tset isOverflowed(value: boolean) {\n\t\tthis._isOverflowed = value;\n\n\t\tif (value) {\n\t\t\tthis._internals.states.add(\"overflowed\");\n\t\t} else {\n\t\t\tthis._internals.states.delete(\"overflowed\");\n\t\t}\n\t}\n\n\t_isRendering = true;\n\t_maxWidth = 0;\n\t_wrapperChecked = false;\n\tfireCloseOverflowRef = this.fireCloseOverflow.bind(this);\n\n\tcloseOverflowSet = {\n\t\t\"ui5-button\": [\"click\"],\n\t\t\"ui5-select\": [\"change\"],\n\t\t\"ui5-combobox\": [\"change\"],\n\t\t\"ui5-multi-combobox\": [\"selection-change\"],\n\t\t\"ui5-date-picker\": [\"change\"],\n\t\t\"ui5-switch\": [\"change\"],\n\t}\n\n\tpredefinedWrapperSet = {\n\t\t\"ui5-button\": \"ToolbarButton\",\n\t\t\"ui5-select\": \"ToolbarSelect\",\n\t}\n\n\tonBeforeRendering(): void {\n\t\tthis.checkForWrapper();\n\t\tthis.attachCloseOverflowHandlers();\n\t}\n\n\tonAfterRendering(): void {\n\t\tthis._isRendering = false;\n\t}\n\n\tonExitDOM(): void {\n\t\tthis.detachCloseOverflowHandlers();\n\t}\n\n\t/**\n\t * Wrapped component slot.\n\t * @public\n\t * @since 2.20.0\n\t */\n\n\t@slot({\n\t\t\"default\": true, type: HTMLElement, invalidateOnChildChange: true,\n\t})\n\titem!: IOverflowToolbarItem[];\n\n\t// Method called by ui5-toolbar to inform about the existing toolbar wrapper\n\tcheckForWrapper() {\n\t\tif (this._wrapperChecked) {\n\t\t\treturn;\n\t\t}\n\t\tthis._wrapperChecked = true;\n\n\t\tconst tagName = this.itemTagName as keyof typeof this.predefinedWrapperSet;\n\t\tconst ctor = this.constructor as typeof UI5Element;\n\t\tconst wrapperName = ctor?.getMetadata ? ctor.getMetadata().getPureTag() : this.tagName;\n\t\tif (wrapperName === \"ui5-toolbar-item\"\n\t\t\t&& this.predefinedWrapperSet[tagName]) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(`This UI5 web component has its predefined toolbar wrapper called ${this.predefinedWrapperSet[tagName]}.`);\n\t\t}\n\t}\n\n\t// We want to close the overflow popover, when closing event is being executed\n\tgetClosingEvents(): string[] {\n\t\tconst item = Array.isArray(this.item) ? this.item[0] : this.item;\n\n\t\tconst closeEvents = this.closeOverflowSet[this.itemTagName as keyof typeof this.closeOverflowSet] || [];\n\t\tif (!item) {\n\t\t\treturn [...closeEvents];\n\t\t}\n\t\tconst overflowCloseEvents = Array.isArray(item.overflowCloseEvents) ? item.overflowCloseEvents : [];\n\n\t\treturn [...closeEvents, ...overflowCloseEvents];\n\t}\n\n\tattachCloseOverflowHandlers() {\n\t\tconst closingEvents = this.getClosingEvents();\n\t\tclosingEvents.forEach(clEvent => {\n\t\t\tif (!this.preventOverflowClosing) {\n\t\t\t\tthis.addEventListener(clEvent, this.fireCloseOverflowRef);\n\t\t\t}\n\t\t});\n\t}\n\n\tdetachCloseOverflowHandlers() {\n\t\tconst closingEvents = this.getClosingEvents();\n\t\tclosingEvents.forEach(clEvent => {\n\t\t\tthis.removeEventListener(clEvent, this.fireCloseOverflowRef);\n\t\t});\n\t}\n\n\tfireCloseOverflow() {\n\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t}\n\t/**\n\t* Defines if the width of the item should be ignored in calculating the whole width of the toolbar\n\t* @protected\n\t*/\n\tget ignoreSpace(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is flexible. An item that is returning true for this property will make\n\t * the toolbar expand to fill the 100% width of its container.\n\t * @protected\n\t */\n\tget hasFlexibleWidth(): boolean {\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns if the item is interactive.\n\t * This value is used to determinate if the toolbar should have its accessibility role and attributes set.\n\t * At least two interactive items are needed for the toolbar to have the role=\"toolbar\" attribute set.\n\t * @protected\n\t */\n\tget isInteractive(): boolean {\n\t\treturn true;\n\t}\n\n\tget itemTagName() {\n\t\tconst ctor = this.getSlottedNodes<IOverflowToolbarItem>(\"item\")[0]?.constructor as typeof UI5Element;\n\t\treturn ctor?.getMetadata ? ctor.getMetadata().getPureTag() : this.getSlottedNodes<IOverflowToolbarItem>(\"item\")[0]?.tagName;\n\t}\n\n\tget hasOverflow(): boolean {\n\t\treturn this.item[0]?.hasOverflow ?? false;\n\t}\n\n\t/**\n\t * Returns if the item is separator.\n\t * @protected\n\t */\n\tget isSeparator() {\n\t\treturn false;\n\t}\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-tb-popover-item\": this.isOverflowed,\n\t\t\t\t\"ui5-tb-item\": true,\n\t\t\t},\n\t\t};\n\t}\n}\n\nexport type {\n\tIEventOptions,\n\tToolbarItemEventDetail,\n\tIOverflowToolbarItem,\n};\nToolbarItem.define();\n\nexport default ToolbarItem;\n"]}

package/dist/ToolbarItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ToolbarItem from "./ToolbarItem.js";
+export default function ToolbarItemTemplate(this: ToolbarItem): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/ToolbarItemTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function ToolbarItemTemplate() {
+    return (_jsx("slot", {}));
+}
+//# sourceMappingURL=ToolbarItemTemplate.js.map

package/dist/ToolbarItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarItemTemplate.js","sourceRoot":"","sources":["../src/ToolbarItemTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,gBAAa,CACb,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarItem from \"./ToolbarItem.js\";\n\nexport default function ToolbarItemTemplate(this: ToolbarItem) {\n\treturn (\n\t\t<slot></slot>\n\t);\n}\n"]}

package/dist/ToolbarSelect.d.ts

@@ -1,10 +1,10 @@
 import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import ToolbarSelectTemplate from "./ToolbarSelectTemplate.js";
-import ToolbarPopoverSelectTemplate from "./ToolbarPopoverSelectTemplate.js";
+import type Select from "./Select.js";
 import ToolbarItem from "./ToolbarItem.js";
 import type { ToolbarItemEventDetail } from "./ToolbarItem.js";
 import type ToolbarSelectOption from "./ToolbarSelectOption.js";
 import type { SelectChangeEventDetail } from "./Select.js";
+import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail;
 /**
  * @class
@@ -46,7 +46,14 @@ declare class ToolbarSelect extends ToolbarItem {
      * **Note:** Use the `ui5-toolbar-select-option` component to define the desired options.
      * @public
      */
-    options: Array<ToolbarSelectOption>;
+    options: DefaultSlot<ToolbarSelectOption>;
+    /**
+     * Defines the HTML element that will be displayed in the component input part,
+     * representing the selected option.
+     * @public
+     * @since 2.15.0
+    */
+    label: Slot<HTMLElement>;
     /**
      * Defines the value state of the component.
      * @default "None"
@@ -73,8 +80,17 @@ declare class ToolbarSelect extends ToolbarItem {
      * @public
      */
     accessibleNameRef?: string;
-    static get toolbarTemplate(): typeof ToolbarSelectTemplate;
-    static get toolbarPopoverTemplate(): typeof ToolbarPopoverSelectTemplate;
+    /**
+     * Defines the value of the component:
+     *
+     * @public
+     * @default ""
+     * @since 2.15.0
+     */
+    set value(newValue: string);
+    get value(): string | undefined;
+    get select(): Select | null;
+    _value: string;
     onClick(e: Event): void;
     onOpen(e: Event): void;
     onClose(e: Event): void;
@@ -83,6 +99,7 @@ declare class ToolbarSelect extends ToolbarItem {
     get styles(): {
         width: string | undefined;
     };
+    get hasCustomLabel(): boolean;
 }
 export default ToolbarSelect;
 export type { ToolbarSelectChangeEventDetail, };

package/dist/ToolbarSelect.js

@@ -4,14 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import { registerToolbarItem } from "./ToolbarRegistry.js";
+import ToolbarSelectCss from "./generated/themes/ToolbarSelect.css.js";
 // Templates
 import ToolbarSelectTemplate from "./ToolbarSelectTemplate.js";
-import ToolbarPopoverSelectTemplate from "./ToolbarPopoverSelectTemplate.js";
 import ToolbarItem from "./ToolbarItem.js";
 /**
  * @class
@@ -47,12 +47,27 @@ let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
          * @public
          */
         this.disabled = false;
+        // Internal value storage, in case the composite select is not rendered on the the assignment happens
+        this._value = "";
     }
-    static get toolbarTemplate() {
-        return ToolbarSelectTemplate;
+    /**
+     * Defines the value of the component:
+     *
+     * @public
+     * @default ""
+     * @since 2.15.0
+     */
+    set value(newValue) {
+        if (this.select && this.select.value !== newValue) {
+            this.select.value = newValue;
+        }
+        this._value = newValue;
+    }
+    get value() {
+        return this.select ? this.select.value : this._value;
     }
-    static get toolbarPopoverTemplate() {
-        return ToolbarPopoverSelectTemplate;
+    get select() {
+        return this.shadowRoot.querySelector("[ui5-select]");
     }
     onClick(e) {
         e.stopImmediatePropagation();
@@ -86,26 +101,31 @@ let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
     _syncOptions(selectedOption) {
         const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index"));
         this.options.forEach((option, index) => {
-            if (index === selectedOptionIndex) {
-                option.setAttribute("selected", "");
-            }
-            else {
-                option.removeAttribute("selected");
-            }
+            option.selected = index === selectedOptionIndex;
         });
     }
     get styles() {
         return {
-            width: this.width,
+            width: this.isOverflowed ? undefined : this.width,
         };
     }
+    get hasCustomLabel() {
+        return !!this.label.length;
+    }
 };
 __decorate([
     property()
 ], ToolbarSelect.prototype, "width", void 0);
 __decorate([
-    slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
+    slot({
+        "default": true,
+        type: HTMLElement,
+        invalidateOnChildChange: true,
+    })
 ], ToolbarSelect.prototype, "options", void 0);
+__decorate([
+    slot()
+], ToolbarSelect.prototype, "label", void 0);
 __decorate([
     property()
 ], ToolbarSelect.prototype, "valueState", void 0);
@@ -118,9 +138,15 @@ __decorate([
 __decorate([
     property()
 ], ToolbarSelect.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property()
+], ToolbarSelect.prototype, "value", null);
 ToolbarSelect = __decorate([
     customElement({
         tag: "ui5-toolbar-select",
+        template: ToolbarSelectTemplate,
+        renderer: jsxRenderer,
+        styles: ToolbarSelectCss,
     })
     /**
      * Fired when the selected option changes.
@@ -147,7 +173,6 @@ ToolbarSelect = __decorate([
     ,
     event("close")
 ], ToolbarSelect);
-registerToolbarItem(ToolbarSelect);
 ToolbarSelect.define();
 export default ToolbarSelect;
 //# sourceMappingURL=ToolbarSelect.js.map