@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

package/dist/ToolbarSelect.js

@@ -0,0 +1,153 @@
+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;
+};
+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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+// Templates
+import ToolbarSelectTemplate from "./ToolbarSelectTemplate.js";
+import ToolbarPopoverSelectTemplate from "./ToolbarPopoverSelectTemplate.js";
+import ToolbarItem from "./ToolbarItem.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-toolbar-select` component is used to create a toolbar drop-down list.
+ * The items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents/dist/ToolbarSelect.js";`
+ *
+ * `import "@ui5/webcomponents/dist/ToolbarSelectOption.js";` (comes with `ui5-toolbar-select`)
+ * @constructor
+ * @abstract
+ * @extends ToolbarItem
+ * @public
+ * @since 1.17.0
+ */
+let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the value state of the component.
+         * @default "None"
+         * @public
+         */
+        this.valueState = "None";
+        /**
+         * Defines whether the component is in disabled state.
+         *
+         * **Note:** A disabled component is noninteractive.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+    }
+    static get toolbarTemplate() {
+        return ToolbarSelectTemplate;
+    }
+    static get toolbarPopoverTemplate() {
+        return ToolbarPopoverSelectTemplate;
+    }
+    onClick(e) {
+        e.stopImmediatePropagation();
+        const prevented = !this.fireDecoratorEvent("click", { targetRef: e.target });
+        if (prevented && !this.preventOverflowClosing) {
+            this.fireDecoratorEvent("close-overflow");
+        }
+    }
+    onOpen(e) {
+        e.stopImmediatePropagation();
+        const prevented = !this.fireDecoratorEvent("open", { targetRef: e.target });
+        if (prevented) {
+            this.fireDecoratorEvent("close-overflow");
+        }
+    }
+    onClose(e) {
+        e.stopImmediatePropagation();
+        const prevented = !this.fireDecoratorEvent("close", { targetRef: e.target });
+        if (prevented) {
+            this.fireDecoratorEvent("close-overflow");
+        }
+    }
+    onChange(e) {
+        e.stopImmediatePropagation();
+        const prevented = !this.fireDecoratorEvent("change", { ...e.detail, targetRef: e.target });
+        if (!prevented) {
+            this.fireDecoratorEvent("close-overflow");
+        }
+        this._syncOptions(e.detail.selectedOption);
+    }
+    _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");
+            }
+        });
+    }
+    get styles() {
+        return {
+            width: this.width,
+        };
+    }
+};
+__decorate([
+    property()
+], ToolbarSelect.prototype, "width", void 0);
+__decorate([
+    slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
+], ToolbarSelect.prototype, "options", void 0);
+__decorate([
+    property()
+], ToolbarSelect.prototype, "valueState", void 0);
+__decorate([
+    property({ type: Boolean })
+], ToolbarSelect.prototype, "disabled", void 0);
+__decorate([
+    property()
+], ToolbarSelect.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], ToolbarSelect.prototype, "accessibleNameRef", void 0);
+ToolbarSelect = __decorate([
+    customElement({
+        tag: "ui5-toolbar-select",
+    })
+    /**
+     * Fired when the selected option changes.
+     * @param {HTMLElement} selectedOption the selected option.
+     * @public
+     */
+    ,
+    event("change", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired after the component's dropdown menu opens.
+     * @public
+     */
+    ,
+    event("open", {
+        bubbles: true,
+    })
+    /**
+     * Fired after the component's dropdown menu closes.
+     * @public
+     */
+    ,
+    event("close")
+], ToolbarSelect);
+registerToolbarItem(ToolbarSelect);
+ToolbarSelect.define();
+export default ToolbarSelect;
+//# sourceMappingURL=ToolbarSelect.js.map

package/dist/ToolbarSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSelect.js","sourceRoot":"","sources":["../src/ToolbarSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\n// Templates\n\nimport ToolbarSelectTemplate from \"./ToolbarSelectTemplate.js\";\nimport ToolbarPopoverSelectTemplate from \"./ToolbarPopoverSelectTemplate.js\";\nimport ToolbarItem from \"./ToolbarItem.js\";\nimport type { ToolbarItemEventDetail } from \"./ToolbarItem.js\";\nimport type ToolbarSelectOption from \"./ToolbarSelectOption.js\";\nimport type { SelectChangeEventDetail } from \"./Select.js\";\n\ntype ToolbarSelectChangeEventDetail = ToolbarItemEventDetail & SelectChangeEventDetail;\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-select` component is used to create a toolbar drop-down list.\n * The items inside the `ui5-toolbar-select` define the available options by using the `ui5-toolbar-select-option` component.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/ToolbarSelect.js\";`\n *\n * `import \"@ui5/webcomponents/dist/ToolbarSelectOption.js\";` (comes with `ui5-toolbar-select`)\n * @constructor\n * @abstract\n * @extends ToolbarItem\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-toolbar-select\",\n})\n\n/**\n * Fired when the selected option changes.\n * @param {HTMLElement} selectedOption the selected option.\n * @public\n */\n@event(\"change\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired after the component's dropdown menu opens.\n * @public\n */\n@event(\"open\", {\n\tbubbles: true,\n})\n\n/**\n * Fired after the component's dropdown menu closes.\n * @public\n */\n@event(\"close\")\nclass ToolbarSelect extends ToolbarItem {\n\teventDetails!: ToolbarItem[\"eventDetails\"] & {\n\t\tchange: ToolbarSelectChangeEventDetail;\n\t\topen: ToolbarItemEventDetail;\n\t\tclose: ToolbarItemEventDetail;\n\t}\n\t/**\n\t * Defines the width of the select.\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\t/**\n\t * Defines the component options.\n\t *\n\t * **Note:** Only one selected option is allowed.\n\t * If more than one option is defined as selected, the last one would be considered as the selected one.\n\t *\n\t * **Note:** Use the `ui5-toolbar-select-option` component to define the desired options.\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, invalidateOnChildChange: true })\n\toptions!: Array<ToolbarSelectOption>;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tvalueState: `${ValueState}` = \"None\";\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t *\n\t * **Note:** A disabled component is noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\taccessibleName?: string\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the select.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSelectTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarPopoverSelectTemplate;\n\t}\n\n\tonClick(e: Event): void {\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\tonOpen(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"open\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonClose(e: Event): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"close\", { targetRef: e.target as HTMLElement });\n\t\tif (prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\t}\n\n\tonChange(e: CustomEvent<SelectChangeEventDetail>): void {\n\t\te.stopImmediatePropagation();\n\t\tconst prevented = !this.fireDecoratorEvent(\"change\", { ...e.detail, targetRef: e.target as HTMLElement });\n\t\tif (!prevented) {\n\t\t\tthis.fireDecoratorEvent(\"close-overflow\");\n\t\t}\n\n\t\tthis._syncOptions(e.detail.selectedOption);\n\t}\n\n\t_syncOptions(selectedOption: HTMLElement): void {\n\t\tconst selectedOptionIndex = Number(selectedOption?.getAttribute(\"data-ui5-external-action-item-index\"));\n\t\tthis.options.forEach((option: ToolbarSelectOption, index: number) => {\n\t\t\tif (index === selectedOptionIndex) {\n\t\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\t} else {\n\t\t\t\toption.removeAttribute(\"selected\");\n\t\t\t}\n\t\t});\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twidth: this.width,\n\t\t};\n\t}\n}\n\nregisterToolbarItem(ToolbarSelect);\n\nToolbarSelect.define();\n\nexport default ToolbarSelect;\n\nexport type {\n\tToolbarSelectChangeEventDetail,\n};\n"]}

package/dist/ToolbarSelectOption.d.ts

@@ -0,0 +1,29 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-toolbar-select-option` component defines the content of an option in the `ui5-toolbar-select`.
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @public
+ * @since 1.17.0
+ */
+declare class ToolbarSelectOption extends UI5Element {
+    /**
+     * Defines the selected state of the component.
+     * @default false
+     * @public
+     */
+    selected: boolean;
+    /**
+     * Defines the text of the component.
+     *
+     * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+     * @public
+     */
+    text: Array<Node>;
+}
+export default ToolbarSelectOption;

package/dist/ToolbarSelectOption.js

@@ -0,0 +1,45 @@
+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;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-toolbar-select-option` component defines the content of an option in the `ui5-toolbar-select`.
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @public
+ * @since 1.17.0
+ */
+let ToolbarSelectOption = class ToolbarSelectOption extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the selected state of the component.
+         * @default false
+         * @public
+         */
+        this.selected = false;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ToolbarSelectOption.prototype, "selected", void 0);
+__decorate([
+    slot({ type: Node, "default": true, invalidateOnChildChange: true })
+], ToolbarSelectOption.prototype, "text", void 0);
+ToolbarSelectOption = __decorate([
+    customElement("ui5-toolbar-select-option")
+], ToolbarSelectOption);
+ToolbarSelectOption.define();
+export default ToolbarSelectOption;
+//# sourceMappingURL=ToolbarSelectOption.js.map

package/dist/ToolbarSelectOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSelectOption.js","sourceRoot":"","sources":["../src/ToolbarSelectOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E;;;;;;;;;;;GAWG;AAEH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QACC;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;IAUlB,CAAC;CAAA,CAAA;AAVA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACX;AASjB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;iDAClD;AAhBd,mBAAmB;IADxB,aAAa,CAAC,2BAA2B,CAAC;GACrC,mBAAmB,CAiBxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-toolbar-select-option` component defines the content of an option in the `ui5-toolbar-select`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n * @since 1.17.0\n */\n@customElement(\"ui5-toolbar-select-option\")\nclass ToolbarSelectOption extends UI5Element {\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines the text of the component.\n\t *\n\t * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\ttext!: Array<Node>;\n}\n\nToolbarSelectOption.define();\n\nexport default ToolbarSelectOption;\n"]}

package/dist/ToolbarSelectTemplate.d.ts

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

package/dist/ToolbarSelectTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import Select from "./Select.js";
+import Option from "./Option.js";
+export default function ToolbarSelectTemplate() {
+    return (_jsx(Select, { class: "ui5-tb-item", style: this.styles, "data-ui5-external-action-item-id": this._id, valueState: this.valueState, disabled: this.disabled, accessibleName: this.accessibleName, accessibleNameRef: this.accessibleNameRef, onClick: (...args) => this.onClick(...args), onClose: (...args) => this.onClose(...args), onOpen: (...args) => this.onOpen(...args), onChange: (...args) => this.onChange(...args), children: this.options.map((option, index) => (_jsx(Option, { selected: option.selected, "data-ui5-external-action-item-index": index, children: option.textContent }))) }));
+}
+//# sourceMappingURL=ToolbarSelectTemplate.js.map

package/dist/ToolbarSelectTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSelectTemplate.js","sourceRoot":"","sources":["../src/ToolbarSelectTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,KAAC,MAAM,IACN,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,IAAI,CAAC,MAAM,sCACgB,IAAI,CAAC,GAAG,EAC1C,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAC3C,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,EAC3C,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,EACzC,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,YAE5C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACpC,KAAC,MAAM,IACN,QAAQ,EAAE,MAAM,CAAC,QAAQ,yCACY,KAAK,YAEzC,MAAM,CAAC,WAAW,GACX,CACT,CAAC,GACM,CACT,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarSelect from \"./ToolbarSelect.js\";\nimport Select from \"./Select.js\";\nimport Option from \"./Option.js\";\n\nexport default function ToolbarSelectTemplate(this: ToolbarSelect) {\n\treturn (\n\t\t<Select\n\t\t\tclass=\"ui5-tb-item\"\n\t\t\tstyle={this.styles}\n\t\t\tdata-ui5-external-action-item-id={this._id}\n\t\t\tvalueState={this.valueState}\n\t\t\tdisabled={this.disabled}\n\t\t\taccessibleName={this.accessibleName}\n\t\t\taccessibleNameRef={this.accessibleNameRef}\n\t\t\tonClick={(...args) => this.onClick(...args)}\n\t\t\tonClose={(...args) => this.onClose(...args)}\n\t\t\tonOpen={(...args) => this.onOpen(...args)}\n\t\t\tonChange={(...args) => this.onChange(...args)}\n\t\t>\n\t\t\t{this.options.map((option, index) => (\n\t\t\t\t<Option\n\t\t\t\t\tselected={option.selected}\n\t\t\t\t\tdata-ui5-external-action-item-index={index}\n\t\t\t\t>\n\t\t\t\t\t{option.textContent}\n\t\t\t\t</Option>\n\t\t\t))}\n\t\t</Select>\n\t);\n}\n"]}

package/dist/ToolbarSeparator.d.ts

@@ -0,0 +1,23 @@
+import ToolbarSeparatorTemplate from "./ToolbarSeparatorTemplate.js";
+import ToolbarPopoverSeparatorTemplate from "./ToolbarPopoverSeparatorTemplate.js";
+import ToolbarItem from "./ToolbarItem.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-toolbar-separator` is an element, used for visual separation between two elements.
+ * It takes no space in calculating toolbar items width.
+ * @constructor
+ * @extends ToolbarItem
+ * @since 1.17.0
+ * @abstract
+ * @public
+ */
+declare class ToolbarSeparator extends ToolbarItem {
+    visible: boolean;
+    static get toolbarTemplate(): typeof ToolbarSeparatorTemplate;
+    static get toolbarPopoverTemplate(): typeof ToolbarPopoverSeparatorTemplate;
+    get isSeparator(): boolean;
+    get isInteractive(): boolean;
+}
+export default ToolbarSeparator;

package/dist/ToolbarSeparator.js

@@ -0,0 +1,54 @@
+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;
+};
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import ToolbarSeparatorTemplate from "./ToolbarSeparatorTemplate.js";
+import ToolbarPopoverSeparatorTemplate from "./ToolbarPopoverSeparatorTemplate.js";
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+import ToolbarItem from "./ToolbarItem.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-toolbar-separator` is an element, used for visual separation between two elements.
+ * It takes no space in calculating toolbar items width.
+ * @constructor
+ * @extends ToolbarItem
+ * @since 1.17.0
+ * @abstract
+ * @public
+ */
+let ToolbarSeparator = class ToolbarSeparator extends ToolbarItem {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+    }
+    static get toolbarTemplate() {
+        return ToolbarSeparatorTemplate;
+    }
+    static get toolbarPopoverTemplate() {
+        return ToolbarPopoverSeparatorTemplate;
+    }
+    get isSeparator() {
+        return true;
+    }
+    get isInteractive() {
+        return false;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ToolbarSeparator.prototype, "visible", void 0);
+ToolbarSeparator = __decorate([
+    customElement({
+        tag: "ui5-toolbar-separator",
+    })
+], ToolbarSeparator);
+registerToolbarItem(ToolbarSeparator);
+ToolbarSeparator.define();
+export default ToolbarSeparator;
+//# sourceMappingURL=ToolbarSeparator.js.map

package/dist/ToolbarSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSeparator.js","sourceRoot":"","sources":["../src/ToolbarSeparator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AACrE,OAAO,+BAA+B,MAAM,sCAAsC,CAAC;AAEnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;;;;;GAWG;AAKH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAA1C;;QAEC,YAAO,GAAG,KAAK,CAAC;IAiBjB,CAAC;IAfA,MAAM,KAAK,eAAe;QACzB,OAAO,wBAAwB,CAAC;IACjC,CAAC;IAED,MAAM,KAAK,sBAAsB;QAChC,OAAO,+BAA+B,CAAC;IACxC,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAjBA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACZ;AAFX,gBAAgB;IAJrB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;KAC5B,CAAC;GAEI,gBAAgB,CAmBrB;AAED,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEtC,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport ToolbarSeparatorTemplate from \"./ToolbarSeparatorTemplate.js\";\nimport ToolbarPopoverSeparatorTemplate from \"./ToolbarPopoverSeparatorTemplate.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\nimport ToolbarItem from \"./ToolbarItem.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-separator` is an element, used for visual separation between two elements.\n * It takes no space in calculating toolbar items width.\n * @constructor\n * @extends ToolbarItem\n * @since 1.17.0\n * @abstract\n * @public\n */\n@customElement({\n\ttag: \"ui5-toolbar-separator\",\n})\n\nclass ToolbarSeparator extends ToolbarItem {\n\t@property({ type: Boolean })\n\tvisible = false;\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSeparatorTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarPopoverSeparatorTemplate;\n\t}\n\n\tget isSeparator() {\n\t\treturn true;\n\t}\n\n\tget isInteractive() {\n\t\treturn false;\n\t}\n}\n\nregisterToolbarItem(ToolbarSeparator);\n\nToolbarSeparator.define();\n\nexport default ToolbarSeparator;\n"]}

package/dist/ToolbarSeparatorTemplate.d.ts

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

package/dist/ToolbarSeparatorTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function ToolbarSeparatorTemplate() {
+    return (_jsx("div", { class: "ui5-tb-separator ui5-tb-item", "data-ui5-external-action-item-id": this._id }));
+}
+//# sourceMappingURL=ToolbarSeparatorTemplate.js.map

package/dist/ToolbarSeparatorTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSeparatorTemplate.js","sourceRoot":"","sources":["../src/ToolbarSeparatorTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CACN,cACC,KAAK,EAAC,8BAA8B,sCACF,IAAI,CAAC,GAAG,GACpC,CACP,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarSeparator from \"./ToolbarSeparator.js\";\n\nexport default function ToolbarSeparatorTemplate(this: ToolbarSeparator) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-tb-separator ui5-tb-item\"\n\t\t\tdata-ui5-external-action-item-id={this._id}\n\t\t></div>\n\t);\n}\n"]}

package/dist/ToolbarSpacer.d.ts

@@ -0,0 +1,37 @@
+import ToolbarSpacerTemplate from "./ToolbarSpacerTemplate.js";
+import ToolbarItem from "./ToolbarItem.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.
+ * It takes no space in calculating toolbar items width.
+ * @constructor
+ * @extends ToolbarItem
+ * @abstract
+ * @since 1.17.0
+ * @public
+ */
+declare class ToolbarSpacer extends ToolbarItem {
+    /**
+     * Defines the width of the spacer.
+     *
+     * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.
+     * @public
+     * @default undefined
+     */
+    width?: string;
+    get styles(): {
+        width: string;
+        flex?: undefined;
+    } | {
+        flex: string;
+        width?: undefined;
+    };
+    get ignoreSpace(): boolean;
+    get hasFlexibleWidth(): boolean;
+    static get toolbarTemplate(): typeof ToolbarSpacerTemplate;
+    static get toolbarPopoverTemplate(): typeof ToolbarSpacerTemplate;
+    get isInteractive(): boolean;
+}
+export default ToolbarSpacer;

package/dist/ToolbarSpacer.js

@@ -0,0 +1,55 @@
+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;
+};
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import ToolbarSpacerTemplate from "./ToolbarSpacerTemplate.js";
+import ToolbarItem from "./ToolbarItem.js";
+import { registerToolbarItem } from "./ToolbarRegistry.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.
+ * It takes no space in calculating toolbar items width.
+ * @constructor
+ * @extends ToolbarItem
+ * @abstract
+ * @since 1.17.0
+ * @public
+ */
+let ToolbarSpacer = class ToolbarSpacer extends ToolbarItem {
+    get styles() {
+        return this.width ? { width: this.width } : { flex: "auto" };
+    }
+    get ignoreSpace() {
+        return this.width === "" || this.width === undefined || this.width === "auto";
+    }
+    get hasFlexibleWidth() {
+        return this.width === "" || this.width === undefined || this.width === "auto";
+    }
+    static get toolbarTemplate() {
+        return ToolbarSpacerTemplate;
+    }
+    static get toolbarPopoverTemplate() {
+        return ToolbarSpacerTemplate;
+    }
+    get isInteractive() {
+        return false;
+    }
+};
+__decorate([
+    property()
+], ToolbarSpacer.prototype, "width", void 0);
+ToolbarSpacer = __decorate([
+    customElement({
+        tag: "ui5-toolbar-spacer",
+    })
+], ToolbarSpacer);
+registerToolbarItem(ToolbarSpacer);
+ToolbarSpacer.define();
+export default ToolbarSpacer;
+//# sourceMappingURL=ToolbarSpacer.js.map

package/dist/ToolbarSpacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSpacer.js","sourceRoot":"","sources":["../src/ToolbarSpacer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAE/D,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;;;;;;;;;GAWG;AAKH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAWtC,IAAI,MAAM;QACT,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IAC9D,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;IAC/E,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;IAC/E,CAAC;IAED,MAAM,KAAK,eAAe;QACzB,OAAO,qBAAqB,CAAC;IAC9B,CAAC;IAED,MAAM,KAAK,sBAAsB;QAChC,OAAO,qBAAqB,CAAC;IAC9B,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,KAAK,CAAC;IACd,CAAC;CACD,CAAA;AAzBA;IADC,QAAQ,EAAE;4CACI;AATV,aAAa;IAJlB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;KACzB,CAAC;GAEI,aAAa,CAkClB;AAED,mBAAmB,CAAC,aAAa,CAAC,CAAC;AAEnC,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport ToolbarSpacerTemplate from \"./ToolbarSpacerTemplate.js\";\n\nimport ToolbarItem from \"./ToolbarItem.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-toolbar-spacer` is an element, used for taking needed space for toolbar items to take 100% width.\n * It takes no space in calculating toolbar items width.\n * @constructor\n * @extends ToolbarItem\n * @abstract\n * @since 1.17.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-toolbar-spacer\",\n})\n\nclass ToolbarSpacer extends ToolbarItem {\n\t/**\n\t * Defines the width of the spacer.\n\t *\n\t * **Note:** all CSS sizes are supported - 'percentage', 'px', 'rem', 'auto', etc.\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\twidth?: string;\n\n\tget styles() {\n\t\treturn this.width ? { width: this.width } : { flex: \"auto\" };\n\t}\n\n\tget ignoreSpace() {\n\t\treturn this.width === \"\" || this.width === undefined || this.width === \"auto\";\n\t}\n\n\tget hasFlexibleWidth() {\n\t\treturn this.width === \"\" || this.width === undefined || this.width === \"auto\";\n\t}\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSpacerTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarSpacerTemplate;\n\t}\n\n\tget isInteractive() {\n\t\treturn false;\n\t}\n}\n\nregisterToolbarItem(ToolbarSpacer);\n\nToolbarSpacer.define();\n\nexport default ToolbarSpacer;\n"]}

package/dist/ToolbarSpacerTemplate.d.ts

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

package/dist/ToolbarSpacerTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function ToolbarSpacerTemplate() {
+    return (_jsx("div", { class: "ui5-tb-spacer ui5-tb-item", style: this.styles, role: "separator", "data-ui5-external-action-item-id": this._id }));
+}
+//# sourceMappingURL=ToolbarSpacerTemplate.js.map

package/dist/ToolbarSpacerTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarSpacerTemplate.js","sourceRoot":"","sources":["../src/ToolbarSpacerTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,cACC,KAAK,EAAC,2BAA2B,EACjC,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,IAAI,EAAC,WAAW,sCACkB,IAAI,CAAC,GAAG,GACpC,CACP,CAAC;AACH,CAAC","sourcesContent":["import type ToolbarSpacer from \"./ToolbarSpacer.js\";\n\nexport default function ToolbarSpacerTemplate(this: ToolbarSpacer) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-tb-spacer ui5-tb-item\"\n\t\t\tstyle={this.styles}\n\t\t\trole=\"separator\"\n\t\t\tdata-ui5-external-action-item-id={this._id}\n\t\t></div>\n\t);\n}\n"]}

package/dist/ToolbarTemplate.d.ts

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

package/dist/ToolbarTemplate.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "./Button.js";
+import toolbarPopoverTemplate from "./ToolbarPopoverTemplate.js";
+import overflowIcon from "@ui5/webcomponents-icons/dist/overflow.js";
+export default function ToolbarTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: {
+                    "ui5-tb-items": true,
+                    "ui5-tb-items-full-width": this.hasFlexibleSpacers,
+                }, role: this.accInfo.root.role, "aria-label": this.accInfo.root.accessibleName, children: [this.standardItems.map(item => (item.toolbarTemplate.call(item.context))), _jsx(Button, { "aria-hidden": this.hideOverflowButton, icon: overflowIcon, design: "Transparent", onClick: this.toggleOverflow, class: {
+                            "ui5-tb-item": true,
+                            "ui5-tb-overflow-btn": true,
+                            "ui5-tb-overflow-btn-hidden": this.hideOverflowButton,
+                        }, tooltip: this.accInfo.overflowButton.tooltip, accessibleName: this.accInfo.overflowButton.accessibleName, accessibilityAttributes: this.accInfo.overflowButton.accessibilityAttributes })] }), toolbarPopoverTemplate.call(this)] }));
+}
+//# sourceMappingURL=ToolbarTemplate.js.map

package/dist/ToolbarTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTemplate.js","sourceRoot":"","sources":["../src/ToolbarTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AACjE,OAAO,YAAY,MAAM,2CAA2C,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,eAAe;IACtC,OAAO,CAAC,8BACP,eACC,KAAK,EAAE;oBACN,cAAc,EAAE,IAAI;oBACpB,yBAAyB,EAAE,IAAI,CAAC,kBAAkB;iBAClD,EACD,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,gBAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,aAE3C,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACvC,CAAC,EAEF,KAAC,MAAM,mBACO,IAAI,CAAC,kBAAkB,EACpC,IAAI,EAAE,YAAY,EAClB,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,KAAK,EAAE;4BACN,aAAa,EAAE,IAAI;4BACnB,qBAAqB,EAAE,IAAI;4BAC3B,4BAA4B,EAAE,IAAI,CAAC,kBAAkB;yBACrD,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,OAAO,EAC5C,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,cAAc,EAC1D,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,uBAAuB,GAC3E,IACG,EAEL,sBAAsB,CAAC,IAAI,CAAC,IAAI,CAAC,IAChC,CAAC,CAAC;AACN,CAAC","sourcesContent":["import Button from \"./Button.js\";\nimport type Toolbar from \"./Toolbar.js\";\nimport toolbarPopoverTemplate from \"./ToolbarPopoverTemplate.js\";\nimport overflowIcon from \"@ui5/webcomponents-icons/dist/overflow.js\";\n\nexport default function ToolbarTemplate(this: Toolbar) {\n\treturn (<>\n\t\t<div\n\t\t\tclass={{\n\t\t\t\t\"ui5-tb-items\": true,\n\t\t\t\t\"ui5-tb-items-full-width\": this.hasFlexibleSpacers,\n\t\t\t}}\n\t\t\trole={this.accInfo.root.role}\n\t\t\taria-label={this.accInfo.root.accessibleName}\n\t\t>\n\t\t\t{this.standardItems.map(item => (\n\t\t\t\titem.toolbarTemplate.call(item.context)\n\t\t\t))}\n\n\t\t\t<Button\n\t\t\t\taria-hidden={this.hideOverflowButton}\n\t\t\t\ticon={overflowIcon}\n\t\t\t\tdesign=\"Transparent\"\n\t\t\t\tonClick={this.toggleOverflow}\n\t\t\t\tclass={{\n\t\t\t\t\t\"ui5-tb-item\": true,\n\t\t\t\t\t\"ui5-tb-overflow-btn\": true,\n\t\t\t\t\t\"ui5-tb-overflow-btn-hidden\": this.hideOverflowButton,\n\t\t\t\t}}\n\t\t\t\ttooltip={this.accInfo.overflowButton.tooltip}\n\t\t\t\taccessibleName={this.accInfo.overflowButton.accessibleName}\n\t\t\t\taccessibilityAttributes={this.accInfo.overflowButton.accessibilityAttributes}\n\t\t\t/>\n\t\t</div>\n\n\t\t{toolbarPopoverTemplate.call(this)}\n\t</>);\n}\n"]}