@ui5/webcomponents 2.0.0-rc.6 → 2.0.0

package/dist/ToolbarButton.js

@@ -7,9 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 ToolbarItem from "./ToolbarItem.js";
 import ToolbarButtonTemplate from "./generated/templates/ToolbarButtonTemplate.lit.js";
 import ToolbarPopoverButtonTemplate from "./generated/templates/ToolbarPopoverButtonTemplate.lit.js";
@@ -31,6 +29,41 @@ import { registerToolbarItem } from "./ToolbarRegistry.js";
  * @since 1.17.0
  */
 let ToolbarButton = class ToolbarButton extends ToolbarItem {
+    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 {
             width: this.width,
@@ -56,7 +89,7 @@ __decorate([
     property({ type: Boolean })
 ], ToolbarButton.prototype, "disabled", void 0);
 __decorate([
-    property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
+    property()
 ], ToolbarButton.prototype, "design", void 0);
 __decorate([
     property()
@@ -68,10 +101,10 @@ __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 })
@@ -80,7 +113,7 @@ __decorate([
     property()
 ], ToolbarButton.prototype, "text", void 0);
 __decorate([
-    property({ validator: CSSSize })
+    property()
 ], ToolbarButton.prototype, "width", void 0);
 ToolbarButton = __decorate([
     customElement({

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;AAgBH,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IA8GtC,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;AA7HA;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;AAgBd;IADC,QAAQ,EAAE;8CACM;AAUjB;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;AAoB3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DACoC;AAQ/D;IADC,QAAQ,EAAE;2CACG;AAUd;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;4CAClB;AA5GV,aAAa;IAflB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,YAAY,EAAE,CAAC,MAAM,CAAC;QACtB,MAAM,EAAE,uBAAuB;KAC/B,CAAC;IAEF;;;;;;;OAOG;;IACF,KAAK,CAAC,OAAO,CAAC;GACT,aAAa,CAsIlB;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 { 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 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\tdependencies: [Button],\n\tstyles: ToolbarButtonPopoverCss,\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 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 \"\"\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 \"\"\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 * 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 \"\"\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\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\tToolbarButtonAccessibilityAttributes,\n};\n"]}
+{"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,MAAM,MAAM,aAAa,CAAC;AAIjC,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;AAgBH,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;IA4CpE,CAAC;IAxBA,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;AA7HA;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;IAflB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,YAAY,EAAE,CAAC,MAAM,CAAC;QACtB,MAAM,EAAE,uBAAuB;KAC/B,CAAC;IAEF;;;;;;;OAOG;;IACF,KAAK,CAAC,OAAO,CAAC;GACT,aAAa,CAsIlB;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 Button from \"./Button.js\";\nimport type { ButtonAccessibilityAttributes } from \"./Button.js\";\nimport type 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 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\tdependencies: [Button],\n\tstyles: ToolbarButtonPopoverCss,\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 = 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\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\tToolbarButtonAccessibilityAttributes,\n};\n"]}

package/dist/ToolbarItem.d.ts

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { 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;
 };

package/dist/ToolbarItem.js

@@ -6,7 +6,6 @@ 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 ToolbarItemOverflowBehavior from "./types/ToolbarItemOverflowBehavior.js";
 /**
  * @class
  *
@@ -18,6 +17,23 @@ 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 width of the item should be ignored in calculating the whole width of the toolbar
     * @protected
@@ -83,7 +99,7 @@ class ToolbarItem extends UI5Element {
     }
 }
 __decorate([
-    property({ type: ToolbarItemOverflowBehavior, defaultValue: ToolbarItemOverflowBehavior.Default })
+    property()
 ], ToolbarItem.prototype, "overflowPriority", void 0);
 __decorate([
     property({ type: Boolean })

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;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 type { 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;AAEpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAQ3E;;;;;;;;;GASG;AACH,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACC;;;;;WAKG;QAEH,qBAAgB,GAAqC,SAAS,CAAC;QAE/D;;;;;WAKG;QAEH,2BAAsB,GAAG,KAAK,CAAC;IAyEhC,CAAC;IAvEA;;;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,EAAE;qDACoD;AAS/D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACG;AA4EhC,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\";\n\nimport type 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()\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\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"]}

package/dist/ToolbarSelect.d.ts

@@ -1,4 +1,4 @@
-import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import type 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 ToolbarItem from "./ToolbarItem.js";
@@ -58,15 +58,15 @@ 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;
+    accessibleNameRef?: string;
     _onEvent: EventListener;
     static get toolbarTemplate(): typeof ToolbarSelectTemplate;
     static get toolbarPopoverTemplate(): typeof ToolbarPopoverSelectTemplate;

package/dist/ToolbarSelect.js

@@ -8,8 +8,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 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.js";
-import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
 import { registerToolbarItem } from "./ToolbarRegistry.js";
 // Templates
 import ToolbarSelectTemplate from "./generated/templates/ToolbarSelectTemplate.lit.js";
@@ -51,6 +49,20 @@ let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
     }
     constructor() {
         super();
+        /**
+         * 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;
         this._onEvent = this._onEventHandler.bind(this);
     }
     onEnterDOM() {
@@ -91,13 +103,13 @@ let ToolbarSelect = class ToolbarSelect extends ToolbarItem {
     }
 };
 __decorate([
-    property({ validator: CSSSize })
+    property()
 ], ToolbarSelect.prototype, "width", void 0);
 __decorate([
     slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
 ], ToolbarSelect.prototype, "options", void 0);
 __decorate([
-    property({ type: ValueState, defaultValue: ValueState.None })
+    property()
 ], ToolbarSelect.prototype, "valueState", void 0);
 __decorate([
     property({ type: Boolean })

package/dist/ToolbarSelect.js.map

@@ -1 +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.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport CSSSize from \"@ui5/webcomponents-base/dist/types/CSSSize.js\";\n\nimport { registerToolbarItem } from \"./ToolbarRegistry.js\";\n\n// Templates\n\nimport ToolbarSelectTemplate from \"./generated/templates/ToolbarSelectTemplate.lit.js\";\nimport ToolbarPopoverSelectTemplate from \"./generated/templates/ToolbarPopoverSelectTemplate.lit.js\";\nimport ToolbarItem from \"./ToolbarItem.js\";\nimport Select from \"./Select.js\";\nimport Option from \"./Option.js\";\nimport type ToolbarSelectOption from \"./ToolbarSelectOption.js\";\nimport type { SelectChangeEventDetail } from \"./Select.js\";\n\ntype ToolbarSelectChangeEventDetail = 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\tdependencies: [Select, Option],\n})\n\n/**\n * Fired when the selected option changes.\n * @allowPreventDefault\n * @param {HTMLElement} selectedOption the selected option.\n * @public\n */\n@event<ToolbarSelectChangeEventDetail>(\"change\", {\n\tdetail: {\n\t\t/**\n\t\t* @public\n\t\t*/\n\t\tselectedOption: { type: HTMLElement },\n\t},\n})\n\n/**\n * Fired after the component's dropdown menu opens.\n * @public\n */\n@event(\"open\")\n/**\n * Fired after the component's dropdown menu closes.\n * @public\n */\n@event(\"close\")\n\nclass ToolbarSelect extends ToolbarItem {\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({ validator: CSSSize })\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({ type: ValueState, defaultValue: ValueState.None })\n\tvalueState!: `${ValueState}`;\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!: boolean;\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default \"\"\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 \"\"\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef!: string;\n\n\t_onEvent: EventListener\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSelectTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarPopoverSelectTemplate;\n\t}\n\n\tget subscribedEvents() {\n\t\tconst map = new Map();\n\n\t\tmap.set(\"click\", { preventClosing: true });\n\t\tmap.set(\"ui5-change\", { preventClosing: false });\n\t\tmap.set(\"ui5-open\", { preventClosing: true });\n\t\tmap.set(\"ui5-close\", { preventClosing: true });\n\n\t\treturn map;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._onEvent = this._onEventHandler.bind(this);\n\t}\n\n\tonEnterDOM(): void {\n\t\tthis.attachEventListeners();\n\t}\n\n\tonExitDOM(): void {\n\t\tthis.detachEventListeners();\n\t}\n\n\tattachEventListeners(): void {\n\t\t[...this.subscribedEvents.keys()].forEach(e => {\n\t\t\tthis.addEventListener(e, this._onEvent);\n\t\t});\n\t}\n\n\tdetachEventListeners(): void {\n\t\t[...this.subscribedEvents.keys()].forEach(e => {\n\t\t\tthis.removeEventListener(e, this._onEvent);\n\t\t});\n\t}\n\n\t_onEventHandler(e: Event): void {\n\t\tif (e.type === \"ui5-change\") {\n\t\t\t// update options\n\t\t\tconst selectedOption = (e as CustomEvent<ToolbarSelectChangeEventDetail>).detail.selectedOption;\n\t\t\tconst selectedOptionIndex = Number(selectedOption?.getAttribute(\"data-ui5-external-action-item-index\"));\n\t\t\tthis.options.forEach((option: ToolbarSelectOption, index: number) => {\n\t\t\t\tif (index === selectedOptionIndex) {\n\t\t\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\t\t} else {\n\t\t\t\t\toption.removeAttribute(\"selected\");\n\t\t\t\t}\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"]}
+{"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.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 \"./generated/templates/ToolbarSelectTemplate.lit.js\";\nimport ToolbarPopoverSelectTemplate from \"./generated/templates/ToolbarPopoverSelectTemplate.lit.js\";\nimport ToolbarItem from \"./ToolbarItem.js\";\nimport Select from \"./Select.js\";\nimport Option from \"./Option.js\";\nimport type ToolbarSelectOption from \"./ToolbarSelectOption.js\";\nimport type { SelectChangeEventDetail } from \"./Select.js\";\n\ntype ToolbarSelectChangeEventDetail = 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\tdependencies: [Select, Option],\n})\n\n/**\n * Fired when the selected option changes.\n * @allowPreventDefault\n * @param {HTMLElement} selectedOption the selected option.\n * @public\n */\n@event<ToolbarSelectChangeEventDetail>(\"change\", {\n\tdetail: {\n\t\t/**\n\t\t* @public\n\t\t*/\n\t\tselectedOption: { type: HTMLElement },\n\t},\n})\n\n/**\n * Fired after the component's dropdown menu opens.\n * @public\n */\n@event(\"open\")\n/**\n * Fired after the component's dropdown menu closes.\n * @public\n */\n@event(\"close\")\n\nclass ToolbarSelect extends ToolbarItem {\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\t_onEvent: EventListener\n\n\tstatic get toolbarTemplate() {\n\t\treturn ToolbarSelectTemplate;\n\t}\n\n\tstatic get toolbarPopoverTemplate() {\n\t\treturn ToolbarPopoverSelectTemplate;\n\t}\n\n\tget subscribedEvents() {\n\t\tconst map = new Map();\n\n\t\tmap.set(\"click\", { preventClosing: true });\n\t\tmap.set(\"ui5-change\", { preventClosing: false });\n\t\tmap.set(\"ui5-open\", { preventClosing: true });\n\t\tmap.set(\"ui5-close\", { preventClosing: true });\n\n\t\treturn map;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._onEvent = this._onEventHandler.bind(this);\n\t}\n\n\tonEnterDOM(): void {\n\t\tthis.attachEventListeners();\n\t}\n\n\tonExitDOM(): void {\n\t\tthis.detachEventListeners();\n\t}\n\n\tattachEventListeners(): void {\n\t\t[...this.subscribedEvents.keys()].forEach(e => {\n\t\t\tthis.addEventListener(e, this._onEvent);\n\t\t});\n\t}\n\n\tdetachEventListeners(): void {\n\t\t[...this.subscribedEvents.keys()].forEach(e => {\n\t\t\tthis.removeEventListener(e, this._onEvent);\n\t\t});\n\t}\n\n\t_onEventHandler(e: Event): void {\n\t\tif (e.type === \"ui5-change\") {\n\t\t\t// update options\n\t\t\tconst selectedOption = (e as CustomEvent<ToolbarSelectChangeEventDetail>).detail.selectedOption;\n\t\t\tconst selectedOptionIndex = Number(selectedOption?.getAttribute(\"data-ui5-external-action-item-index\"));\n\t\t\tthis.options.forEach((option: ToolbarSelectOption, index: number) => {\n\t\t\t\tif (index === selectedOptionIndex) {\n\t\t\t\t\toption.setAttribute(\"selected\", \"\");\n\t\t\t\t} else {\n\t\t\t\t\toption.removeAttribute(\"selected\");\n\t\t\t\t}\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.js

@@ -21,6 +21,15 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
  * @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 })

package/dist/ToolbarSelectOption.js.map

@@ -1 +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;CAiB3C,CAAA;AAVA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACT;AASnB;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!: boolean;\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"]}
+{"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/ToolbarSeparator.js

@@ -23,6 +23,10 @@ import ToolbarItem from "./ToolbarItem.js";
  * @public
  */
 let ToolbarSeparator = class ToolbarSeparator extends ToolbarItem {
+    constructor() {
+        super(...arguments);
+        this.visible = false;
+    }
     static get toolbarTemplate() {
         return ToolbarSeparatorTemplate;
     }

package/dist/ToolbarSeparator.js.map

@@ -1 +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,uDAAuD,CAAC;AAC7F,OAAO,+BAA+B,MAAM,8DAA8D,CAAC;AAE3G,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;;;;;GAWG;AAKH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,WAAW;IAIzC,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;iDACV;AAFb,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 \"./generated/templates/ToolbarSeparatorTemplate.lit.js\";\nimport ToolbarPopoverSeparatorTemplate from \"./generated/templates/ToolbarPopoverSeparatorTemplate.lit.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!: boolean;\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"]}
+{"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,uDAAuD,CAAC;AAC7F,OAAO,+BAA+B,MAAM,8DAA8D,CAAC;AAE3G,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 \"./generated/templates/ToolbarSeparatorTemplate.lit.js\";\nimport ToolbarPopoverSeparatorTemplate from \"./generated/templates/ToolbarPopoverSeparatorTemplate.lit.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/ToolbarSpacer.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
 import ToolbarSpacerTemplate from "./generated/templates/ToolbarSpacerTemplate.lit.js";
 import ToolbarItem from "./ToolbarItem.js";
 import { registerToolbarItem } from "./ToolbarRegistry.js";
@@ -43,7 +42,7 @@ let ToolbarSpacer = class ToolbarSpacer extends ToolbarItem {
     }
 };
 __decorate([
-    property({ validator: CSSSize })
+    property()
 ], ToolbarSpacer.prototype, "width", void 0);
 ToolbarSpacer = __decorate([
     customElement({

package/dist/ToolbarSpacer.js.map

@@ -1 +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,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AAEvF,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,CAAC;IAC1B,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;IAC1B,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,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;4CAClB;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 CSSSize from \"@ui5/webcomponents-base/dist/types/CSSSize.js\";\nimport ToolbarSpacerTemplate from \"./generated/templates/ToolbarSpacerTemplate.lit.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({ validator: CSSSize })\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 === \"\";\n\t}\n\n\tget hasFlexibleWidth() {\n\t\treturn this.width === \"\";\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"]}
+{"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,oDAAoD,CAAC;AAEvF,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,CAAC;IAC1B,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;IAC1B,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 \"./generated/templates/ToolbarSpacerTemplate.lit.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 === \"\";\n\t}\n\n\tget hasFlexibleWidth() {\n\t\treturn this.width === \"\";\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/Tree.d.ts

@@ -3,7 +3,7 @@ import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import DropIndicator from "./DropIndicator.js";
 import type TreeItemBase from "./TreeItemBase.js";
 import TreeList from "./TreeList.js";
-import ListSelectionMode from "./types/ListSelectionMode.js";
+import type ListSelectionMode from "./types/ListSelectionMode.js";
 import ListAccessibleRole from "./types/ListAccessibleRole.js";
 import type { TreeItemBaseToggleEventDetail, TreeItemBaseStepInEventDetail, TreeItemBaseStepOutEventDetail } from "./TreeItemBase.js";
 import type { ListItemClickEventDetail, ListItemDeleteEventDetail, ListItemFocusEventDetail, ListSelectionChangeEventDetail } from "./List.js";
@@ -81,41 +81,41 @@ declare class Tree extends UI5Element {
      * @public
      * @default "None"
      */
-    selectionMode: `${ListSelectionMode}`;
+    selectionMode?: `${ListSelectionMode}`;
     /**
      * Defines the text that is displayed when the component contains no items.
-     * @default ""
+     * @default undefined
      * @public
      */
-    noDataText: string;
+    noDataText?: string;
     /**
      * Defines the component header text.
      *
      * **Note:** If the `header` slot is set, this property is ignored.
-     * @default ""
+     * @default undefined
      * @public
      */
-    headerText: string;
+    headerText?: string;
     /**
      * Defines the component footer text.
-     * @default ""
+     * @default undefined
      * @public
      */
-    footerText: string;
+    footerText?: string;
     /**
      * Defines the accessible name of the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.8.0
      */
-    accessibleName: string;
+    accessibleName?: string;
     /**
      * Defines the IDs of the elements that label the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.8.0
      */
-    accessibleNameRef: string;
+    accessibleNameRef?: string;
     /**
      * Defines the items of the component. Tree items may have other tree items as children.
      *

package/dist/Tree.js

@@ -19,7 +19,6 @@ import DropIndicator from "./DropIndicator.js";
 import TreeItem from "./TreeItem.js";
 import TreeItemCustom from "./TreeItemCustom.js";
 import TreeList from "./TreeList.js";
-import ListSelectionMode from "./types/ListSelectionMode.js";
 import ListAccessibleRole from "./types/ListAccessibleRole.js";
 // Template
 import TreeTemplate from "./generated/templates/TreeTemplate.lit.js";
@@ -69,6 +68,16 @@ import TreeCss from "./generated/themes/Tree.css.js";
  * @since 1.0.0-rc.8
  */
 let Tree = class Tree extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the selection mode of the component. Since the tree uses a `ui5-list` to display its structure,
+         * the tree modes are exactly the same as the list modes, and are all applicable.
+         * @public
+         * @default "None"
+         */
+        this.selectionMode = "None";
+    }
     onEnterDOM() {
         DragRegistry.subscribe(this);
     }
@@ -280,7 +289,7 @@ let Tree = class Tree extends UI5Element {
     }
 };
 __decorate([
-    property({ type: ListSelectionMode, defaultValue: ListSelectionMode.None })
+    property()
 ], Tree.prototype, "selectionMode", void 0);
 __decorate([
     property()