@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/ToolbarButton.d.ts

@@ -1,10 +1,7 @@
-import type { AccessibilityAttributes as ButtonAccessibilityAttributes } from "./Button.js";
-import ButtonDesign from "./types/ButtonDesign.js";
+import type { ButtonAccessibilityAttributes } from "./Button.js";
+import type ButtonDesign from "./types/ButtonDesign.js";
 import ToolbarItem from "./ToolbarItem.js";
-import type { IEventOptions } from "./ToolbarItem.js";
-import ToolbarButtonTemplate from "./generated/templates/ToolbarButtonTemplate.lit.js";
-import ToolbarPopoverButtonTemplate from "./generated/templates/ToolbarPopoverButtonTemplate.lit.js";
-type AccessibilityAttributes = ButtonAccessibilityAttributes;
+type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;
 /**
  * @class
  *
@@ -40,24 +37,32 @@ declare class ToolbarButton extends ToolbarItem {
      *
      * **Note:** SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
      * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
-     * @default ""
+     * @default undefined
      * @public
      */
-    icon: string;
+    icon?: string;
     /**
-     * Defines whether the icon should be displayed after the component text.
-     * @default false
+     * Defines the icon, displayed as graphical element within the component after the button text.
+     *
+     * **Note:** It is highly recommended to use `endIcon` property only together with `icon` and/or `text` properties.
+     * Usage of `endIcon` only should be avoided.
+     *
+     * The SAP-icons font provides numerous options.
+     *
+     * Example:
+     * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default undefined
      * @public
      */
-    iconEnd: boolean;
+    endIcon?: string;
     /**
      * Defines the tooltip of the component.
      *
      * **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
-     * @default ""
+     * @default undefined
      * @public
      */
-    tooltip: string;
+    tooltip?: string;
     /**
      * Defines the accessible ARIA name of the component.
      * @default undefined
@@ -66,36 +71,34 @@ declare class ToolbarButton extends ToolbarItem {
     accessibleName?: string;
     /**
      * Receives id(or many ids) of the elements that label the component.
-     * @default ""
+     * @default undefined
      * @public
      */
-    accessibleNameRef: string;
+    accessibleNameRef?: string;
     /**
-     * An object of strings that defines several additional accessibility attribute values
-     * for customization depending on the use case.
+     * Defines the additional accessibility attributes that will be applied to the component.
      *
-     * It supports the following fields:
+     * The following fields are supported:
+     *
+     * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.
+     * Accepts the following string values: `true` or `false`
+     *
+     * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+     * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+     *
+     * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.
+     * Accepts a lowercase string value.
      *
-     * - `expanded`: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
-     * 	- `true`
-     * 	- `false`
-     * - `hasPopup`: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:
-     * 	- `Dialog`
-     * 	- `Grid`
-     * 	- `ListBox`
-     * 	- `Menu`
-     * 	- `Tree`
-     * - `controls`: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.
      * @default {}
      * @public
      */
-    accessibilityAttributes: AccessibilityAttributes;
+    accessibilityAttributes: ToolbarButtonAccessibilityAttributes;
     /**
      * Button text
      * @public
-     * @default ""
+     * @default undefined
      */
-    text: string;
+    text?: string;
     /**
      * Defines the width of the button.
      *
@@ -104,15 +107,21 @@ declare class ToolbarButton extends ToolbarItem {
      * @public
      */
     width?: string;
-    static get staticAreaStyles(): import("@ui5/webcomponents-base/dist/types.js").StyleData;
     get styles(): {
         width: string | undefined;
         display: string;
     };
-    get containsText(): boolean;
-    static get toolbarTemplate(): typeof ToolbarButtonTemplate;
-    static get toolbarPopoverTemplate(): typeof ToolbarPopoverButtonTemplate;
-    get subscribedEvents(): Map<string, IEventOptions>;
+    onClick(e: Event): void;
+    /**
+     * @override
+     */
+    get classes(): {
+        root: {
+            "ui5-tb-button": boolean;
+            "ui5-tb-popover-item": boolean;
+            "ui5-tb-item": boolean;
+        };
+    };
 }
 export default ToolbarButton;
-export type { AccessibilityAttributes, };
+export type { ToolbarButtonAccessibilityAttributes, };

package/dist/ToolbarButton.js

@@ -4,17 +4,13 @@ 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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
-import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
-import Button from "./Button.js";
-import ButtonDesign from "./types/ButtonDesign.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import ToolbarItem from "./ToolbarItem.js";
-import ToolbarButtonTemplate from "./generated/templates/ToolbarButtonTemplate.lit.js";
-import ToolbarPopoverButtonTemplate from "./generated/templates/ToolbarPopoverButtonTemplate.lit.js";
-import ToolbarButtonPopoverCss from "./generated/themes/ToolbarButtonPopover.css.js";
-import { registerToolbarItem } from "./ToolbarRegistry.js";
+import ToolbarButtonTemplate from "./ToolbarButtonTemplate.js";
+import ToolbarButtonCss from "./generated/themes/ToolbarButton.css.js";
 /**
  * @class
  *
@@ -31,8 +27,40 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
  * @since 1.17.0
  */
 let ToolbarButton = class ToolbarButton extends ToolbarItem {
-    static get staticAreaStyles() {
-        return ToolbarButtonPopoverCss;
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines if the action is disabled.
+         *
+         * **Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Defines the action design.
+         * @default "Default"
+         * @public
+         */
+        this.design = "Default";
+        /**
+         * Defines the additional accessibility attributes that will be applied to the component.
+         *
+         * The following fields are supported:
+         *
+         * - **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.
+         * Accepts the following string values: `true` or `false`
+         *
+         * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+         * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+         *
+         * - **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.
+         * Accepts a lowercase string value.
+         *
+         * @default {}
+         * @public
+         */
+        this.accessibilityAttributes = {};
     }
     get styles() {
         return {
@@ -40,41 +68,45 @@ let ToolbarButton = class ToolbarButton extends ToolbarItem {
             display: this.hidden ? "none" : "inline-block",
         };
     }
-    get containsText() {
-        return true;
+    onClick(e) {
+        e.stopImmediatePropagation();
+        const prevented = !this.fireDecoratorEvent("click", { targetRef: e.target });
+        if (!prevented && !this.preventOverflowClosing) {
+            this.fireDecoratorEvent("close-overflow");
+        }
     }
-    static get toolbarTemplate() {
-        return ToolbarButtonTemplate;
-    }
-    static get toolbarPopoverTemplate() {
-        return ToolbarPopoverButtonTemplate;
-    }
-    get subscribedEvents() {
-        const map = new Map();
-        map.set("click", { preventClosing: false });
-        return map;
+    /**
+     * @override
+     */
+    get classes() {
+        return {
+            root: {
+                ...super.classes.root,
+                "ui5-tb-button": true,
+            },
+        };
     }
 };
 __decorate([
     property({ type: Boolean })
 ], ToolbarButton.prototype, "disabled", void 0);
 __decorate([
-    property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
+    property()
 ], ToolbarButton.prototype, "design", void 0);
 __decorate([
     property()
 ], ToolbarButton.prototype, "icon", void 0);
 __decorate([
-    property({ type: Boolean })
-], ToolbarButton.prototype, "iconEnd", void 0);
+    property()
+], ToolbarButton.prototype, "endIcon", void 0);
 __decorate([
     property()
 ], ToolbarButton.prototype, "tooltip", void 0);
 __decorate([
-    property({ defaultValue: undefined })
+    property()
 ], ToolbarButton.prototype, "accessibleName", void 0);
 __decorate([
-    property({ defaultValue: "" })
+    property()
 ], ToolbarButton.prototype, "accessibleNameRef", void 0);
 __decorate([
     property({ type: Object })
@@ -83,12 +115,14 @@ __decorate([
     property()
 ], ToolbarButton.prototype, "text", void 0);
 __decorate([
-    property({ validator: CSSSize })
+    property()
 ], ToolbarButton.prototype, "width", void 0);
 ToolbarButton = __decorate([
     customElement({
         tag: "ui5-toolbar-button",
-        dependencies: [Button],
+        template: ToolbarButtonTemplate,
+        renderer: jsxRenderer,
+        styles: [ToolbarButtonCss],
     })
     /**
      * Fired when the component is activated either with a
@@ -99,9 +133,11 @@ ToolbarButton = __decorate([
      * @public
      */
     ,
-    event("click")
+    event("click", {
+        bubbles: true,
+        cancelable: true,
+    })
 ], ToolbarButton);
-registerToolbarItem(ToolbarButton);
 ToolbarButton.define();
 export default ToolbarButton;
 //# sourceMappingURL=ToolbarButton.js.map

package/dist/ToolbarButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../src/ToolbarButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AACvF,OAAO,4BAA4B,MAAM,2DAA2D,CAAC;AAErG,OAAO,uBAAuB,MAAM,gDAAgD,CAAC;AAErF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAI3D;;;;;;;;;;;;;;GAcG;AAeH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAwGtC,MAAM,KAAK,gBAAgB;QAC1B,OAAO,uBAAuB,CAAC;IAChC,CAAC;IAED,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,IAAI,YAAY;QACf,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,KAAK,eAAe;QACzB,OAAO,qBAAqB,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,sBAAsB;QAChC,OAAO,4BAA4B,CAAC;IACrC,CAAC;IAED,IAAI,gBAAgB;QACnB,MAAM,GAAG,GAAG,IAAI,GAAG,EAAE,CAAC;QACtB,GAAG,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;QAC5C,OAAO,GAAG,CAAC;IACZ,CAAC;CACD,CAAA;AA3HA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACT;AAQnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC;6CAC1C;AAW3B;IADC,QAAQ,EAAE;2CACG;AAQd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACV;AAUlB;IADC,QAAQ,EAAE;8CACM;AAQjB;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;qDACd;AAQxB;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;wDACJ;AAsB3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DACuB;AAQlD;IADC,QAAQ,EAAE;2CACG;AAUd;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;4CAClB;AAtGV,aAAa;IAdlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,YAAY,EAAE,CAAC,MAAM,CAAC;KACtB,CAAC;IAEF;;;;;;;OAOG;;IACF,KAAK,CAAC,OAAO,CAAC;GACT,aAAa,CAoIlB;AAED,mBAAmB,CAAC,aAAa,CAAC,CAAC;AAEnC,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import 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.js\";\nimport CSSSize from \"@ui5/webcomponents-base/dist/types/CSSSize.js\";\nimport Button from \"./Button.js\";\nimport type { AccessibilityAttributes as ButtonAccessibilityAttributes } from \"./Button.js\";\nimport ButtonDesign from \"./types/ButtonDesign.js\";\n\nimport ToolbarItem from \"./ToolbarItem.js\";\nimport type { IEventOptions } from \"./ToolbarItem.js\";\nimport ToolbarButtonTemplate from \"./generated/templates/ToolbarButtonTemplate.lit.js\";\nimport ToolbarPopoverButtonTemplate from \"./generated/templates/ToolbarPopoverButtonTemplate.lit.js\";\n\nimport ToolbarButtonPopoverCss from \"./generated/themes/ToolbarButtonPopover.css.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\ntype AccessibilityAttributes = 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\tdependencies: [Button],\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\")\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!: boolean;\n\n\t/**\n\t * Defines the action design.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })\n\tdesign!: `${ButtonDesign}`;\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 \"\"\n\t * @public\n\t */\n\t@property()\n\ticon!: string;\n\n\t/**\n\t * Defines whether the icon should be displayed after the component text.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\ticonEnd!: boolean;\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 \"\"\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({ defaultValue: undefined })\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the component.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property({ defaultValue: \"\" })\n\taccessibleNameRef!: string;\n\n\t/**\n\t * An object of strings that defines several additional accessibility attribute values\n\t * for customization depending on the use case.\n\t *\n\t * It supports the following fields:\n\t *\n\t * - `expanded`: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:\n\t * \t- `true`\n\t * \t- `false`\n\t * - `hasPopup`: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values:\n\t * \t- `Dialog`\n\t * \t- `Grid`\n\t * \t- `ListBox`\n\t * \t- `Menu`\n\t * \t- `Tree`\n\t * - `controls`: Identifies the element (or elements) whose contents or presence are controlled by the button element. Accepts a string value.\n\t * @default {}\n\t * @public\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes!: AccessibilityAttributes;\n\n\t/**\n\t * Button text\n\t * @public\n\t * @default \"\"\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({ validator: CSSSize })\n\twidth?: string;\n\n\tstatic get staticAreaStyles() {\n\t\treturn ToolbarButtonPopoverCss;\n\t}\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\tget containsText() {\n\t\treturn true;\n\t}\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarButtonTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarPopoverButtonTemplate;\n\t}\n\n\tget subscribedEvents(): Map<string, IEventOptions> {\n\t\tconst map = new Map();\n\t\tmap.set(\"click\", { preventClosing: false });\n\t\treturn map;\n\t}\n}\n\nregisterToolbarItem(ToolbarButton);\n\nToolbarButton.define();\n\nexport default ToolbarButton;\n\nexport type {\n\tAccessibilityAttributes,\n};\n"]}
+{"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"]}

package/dist/ToolbarButtonTemplate.d.ts

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

package/dist/ToolbarButtonTemplate.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+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 }));
+}
+//# sourceMappingURL=ToolbarButtonTemplate.js.map

package/dist/ToolbarButtonTemplate.js.map

@@ -0,0 +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"]}

package/dist/ToolbarItem.d.ts

@@ -1,20 +1,16 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { TemplateFunction } from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
+import type ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
 type IEventOptions = {
     preventClosing: boolean;
 };
-/**
- * @class
- *
- * Represents an abstract class for items, used in the `ui5-toolbar`.
- * @constructor
- * @extends UI5Element
- * @abstract
- * @public
- * @since 1.17.0
- */
+type ToolbarItemEventDetail = {
+    targetRef: HTMLElement;
+};
 declare class ToolbarItem extends UI5Element {
+    eventDetails: {
+        click: ToolbarItemEventDetail;
+        "close-overflow": void;
+    };
     /**
      * 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.
@@ -29,17 +25,18 @@ declare class ToolbarItem extends UI5Element {
      * @public
      */
     preventOverflowClosing: boolean;
+    /**
+     * Defines if the toolbar item is overflowed.
+     * @default false
+     * @protected
+     * @since 2.11.0
+     */
+    isOverflowed: boolean;
     /**
     * 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.
@@ -58,22 +55,13 @@ declare class ToolbarItem extends UI5Element {
      * @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;
-    /**
-     * Returns the events that the item is subscribed to.
-     * @protected
-     */
-    get subscribedEvents(): Map<string, IEventOptions>;
     get stableDomRef(): string;
+    get classes(): {
+        root: {
+            "ui5-tb-popover-item": boolean;
+            "ui5-tb-item": boolean;
+        };
+    };
 }
-export type { IEventOptions };
+export type { IEventOptions, ToolbarItemEventDetail, };
 export default ToolbarItem;

package/dist/ToolbarItem.js

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+let ToolbarItem = 
 /**
  * @class
  *
@@ -19,6 +19,30 @@ import ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js"
  * @since 1.17.0
  */
 class ToolbarItem extends UI5Element {
+    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 intereaction with the item.
+         * It will close by default.
+         * @default false
+         * @public
+         */
+        this.preventOverflowClosing = false;
+        /**
+         * Defines if the toolbar item is overflowed.
+         * @default false
+         * @protected
+         * @since 2.11.0
+         */
+        this.isOverflowed = false;
+    }
     /**
     * Defines if the width of the item should be ignored in calculating the whole width of the toolbar
     * @protected
@@ -26,14 +50,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.
@@ -58,36 +74,41 @@ 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");
-    }
-    /**
-     * Returns the events that the item is subscribed to.
-     * @protected
-     */
-    get subscribedEvents() {
-        return new Map();
-    }
     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({ type: ToolbarItemOverflowBehavior, defaultValue: ToolbarItemOverflowBehavior.Default })
+    property()
 ], ToolbarItem.prototype, "overflowPriority", void 0);
 __decorate([
     property({ type: Boolean })
 ], ToolbarItem.prototype, "preventOverflowClosing", void 0);
+__decorate([
+    property({ type: Boolean })
+], ToolbarItem.prototype, "isOverflowed", void 0);
+ToolbarItem = __decorate([
+    event("close-overflow", {
+        bubbles: true,
+    })
+    /**
+     * @class
+     *
+     * Represents an abstract class for items, used in the `ui5-toolbar`.
+     * @constructor
+     * @extends UI5Element
+     * @abstract
+     * @public
+     * @since 1.17.0
+     */
+], ToolbarItem);
 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;AACpE,OAAiC,0DAA0D,CAAC;AAC5F,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E,OAAO,2BAA2B,MAAM,wCAAwC,CAAC;AAMjF;;;;;;;;;GASG;AACH,MAAM,WAAY,SAAQ,UAAU;IAmBnC;;;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;;;OAGG;IACH,IAAI,gBAAgB;QACnB,OAAO,IAAI,GAAG,EAAE,CAAC;IAClB,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD;AAlFA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,2BAA2B,EAAE,YAAY,EAAE,2BAA2B,CAAC,OAAO,EAAE,CAAC;qDAC/C;AASpD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACK;AA4ElC,eAAe,WAAW,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { TemplateFunction } from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\nimport ToolbarItemOverflowBehavior from \"./types/ToolbarItemOverflowBehavior.js\";\n\ntype IEventOptions = {\n\tpreventClosing: boolean;\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/**\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({ type: ToolbarItemOverflowBehavior, defaultValue: ToolbarItemOverflowBehavior.Default })\n\toverflowPriority!: `${ToolbarItemOverflowBehavior}`;\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!: boolean;\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\t/**\n\t * Returns the events that the item is subscribed to.\n\t * @protected\n\t */\n\tget subscribedEvents(): Map<string, IEventOptions> {\n\t\treturn new Map();\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 { IEventOptions };\nexport default ToolbarItem;\n"]}
+{"version":3,"file":"ToolbarItem.js","sourceRoot":"","sources":["../src/ToolbarItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,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;QAE/B;;;;;WAKG;QAGH,iBAAY,GAAY,KAAK,CAAC;IAiD/B,CAAC;IA/CA;;;MAGE;IACF,IAAI,WAAW;QACd,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,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,IAAI,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,YAAY;gBACxC,aAAa,EAAE,IAAI;aACnB;SACD,CAAC;IACH,CAAC;CACD,CAAA;AApEA;IADC,QAAQ,EAAE;qDACoD;AAS/D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACG;AAU/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACE;AAhCzB,WAAW;IAdhB,KAAK,CAAC,gBAAgB,EAAE;QACxB,OAAO,EAAE,IAAI;KACb,CAAC;IAEF;;;;;;;;;OASG;GACG,WAAW,CAiFhB;AAMD,eAAe,WAAW,CAAC","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\";\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 toolbar item is overflowed.\n\t * @default false\n\t * @protected\n\t * @since 2.11.0\n\t */\n\n\t@property({ type: Boolean })\n\tisOverflowed: boolean = 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 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\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};\nexport default ToolbarItem;\n"]}

package/dist/ToolbarSelect.d.ts

@@ -1,10 +1,9 @@
-import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import ToolbarSelectTemplate from "./generated/templates/ToolbarSelectTemplate.lit.js";
-import ToolbarPopoverSelectTemplate from "./generated/templates/ToolbarPopoverSelectTemplate.lit.js";
+import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import ToolbarItem from "./ToolbarItem.js";
+import type { ToolbarItemEventDetail } from "./ToolbarItem.js";
 import type ToolbarSelectOption from "./ToolbarSelectOption.js";
 import type { SelectChangeEventDetail } from "./Select.js";
-type ToolbarSelectChangeEventDetail = SelectChangeEventDetail;
+type ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail;
 /**
  * @class
  *
@@ -23,6 +22,11 @@ type ToolbarSelectChangeEventDetail = SelectChangeEventDetail;
  * @since 1.17.0
  */
 declare class ToolbarSelect extends ToolbarItem {
+    eventDetails: ToolbarItem["eventDetails"] & {
+        change: ToolbarSelectChangeEventDetail;
+        open: ToolbarItemEventDetail;
+        close: ToolbarItemEventDetail;
+    };
     /**
      * Defines the width of the select.
      *
@@ -58,25 +62,20 @@ declare class ToolbarSelect extends ToolbarItem {
     /**
      * Defines the accessible ARIA name of the component.
      * @public
-     * @default ""
+     * @default undefined
      */
-    accessibleName: string;
+    accessibleName?: string;
     /**
      * Receives id(or many ids) of the elements that label the select.
-     * @default ""
+     * @default undefined
      * @public
      */
-    accessibleNameRef: string;
-    _onEvent: EventListener;
-    static get toolbarTemplate(): typeof ToolbarSelectTemplate;
-    static get toolbarPopoverTemplate(): typeof ToolbarPopoverSelectTemplate;
-    get subscribedEvents(): Map<any, any>;
-    constructor();
-    onEnterDOM(): void;
-    onExitDOM(): void;
-    attachEventListeners(): void;
-    detachEventListeners(): void;
-    _onEventHandler(e: Event): void;
+    accessibleNameRef?: string;
+    onClick(e: Event): void;
+    onOpen(e: Event): void;
+    onClose(e: Event): void;
+    onChange(e: CustomEvent<SelectChangeEventDetail>): void;
+    _syncOptions(selectedOption: HTMLElement): void;
     get styles(): {
         width: string | undefined;
     };