@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/Option.js

@@ -4,10 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import 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";
+import ListItemBase from "./ListItemBase.js";
+// Template
+import OptionTemplate from "./OptionTemplate.js";
+// Styles
+import optionBaseCss from "./generated/themes/OptionBase.css.js";
+import listItemIconCss from "./generated/themes/ListItemIcon.css.js";
+import listItemAdditionalTextCss from "./generated/themes/ListItemAdditionalText.css.js";
 /**
  * @class
  *
@@ -19,42 +25,47 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
  *
  * `import "@ui5/webcomponents/dist/Option.js";`
  * @constructor
- * @extends UI5Element
+ * @extends ListItemBase
  * @implements {IOption}
  * @public
- * @abstract
  */
-let Option = class Option extends UI5Element {
-    get stableDomRef() {
-        return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+let Option = class Option extends ListItemBase {
+    get displayIconBegin() {
+        return !!this.icon;
+    }
+    get effectiveDisplayText() {
+        return this.textContent || "";
     }
 };
 __decorate([
-    property({ type: Boolean })
-], Option.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean })
-], Option.prototype, "disabled", void 0);
+    slot({ type: Node, "default": true, invalidateOnChildChange: true })
+], Option.prototype, "text", void 0);
 __decorate([
     property()
-], Option.prototype, "title", void 0);
+], Option.prototype, "value", void 0);
 __decorate([
-    property({ defaultValue: null })
+    property()
 ], Option.prototype, "icon", void 0);
 __decorate([
     property()
-], Option.prototype, "value", void 0);
+], Option.prototype, "additionalText", void 0);
 __decorate([
     property()
-], Option.prototype, "additionalText", void 0);
+], Option.prototype, "tooltip", void 0);
 __decorate([
     property({ type: Boolean })
-], Option.prototype, "focused", void 0);
-__decorate([
-    slot({ type: Node, "default": true, invalidateOnChildChange: true })
-], Option.prototype, "text", void 0);
+], Option.prototype, "selected", void 0);
 Option = __decorate([
-    customElement("ui5-option")
+    customElement({
+        tag: "ui5-option",
+        template: OptionTemplate,
+        styles: [
+            ListItemBase.styles,
+            listItemAdditionalTextCss,
+            listItemIconCss,
+            optionBaseCss,
+        ],
+    })
 ], Option);
 Option.define();
 export default Option;

package/dist/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sourceRoot":"","sources":["../src/Option.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;;;;;;;;;;;;;;;GAeG;AAEH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IA6E9B,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AAzEA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAWnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AASnB;IADC,QAAQ,EAAE;qCACI;AAYf;IADC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;oCACZ;AASrB;IADC,QAAQ,EAAE;qCACI;AASf;IADC,QAAQ,EAAE;8CACa;AASxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACV;AASlB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;oCAClD;AA3Ed,MAAM;IADX,aAAa,CAAC,YAAY,CAAC;GACtB,MAAM,CAgFX;AAED,MAAM,CAAC,MAAM,EAAE,CAAC;AAEhB,eAAe,MAAM,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\";\nimport type { IOption } from \"./Select.js\";\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-option` component defines the content of an option in the `ui5-select`.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Option.js\";`\n * @constructor\n * @extends UI5Element\n * @implements {IOption}\n * @public\n * @abstract\n */\n@customElement(\"ui5-option\")\nclass Option extends UI5Element implements IOption {\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 whether the component is in disabled state.\n\t *\n\t * **Note:** A disabled component is hidden.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.12\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the tooltip of the component.\n\t * @default \"\"\n\t * @private\n\t * @since 1.1.0\n\t */\n\t@property()\n\ttitle!: string;\n\n\t/**\n\t * Defines the `icon` source URI.\n\t *\n\t * **Note:**\n\t * SAP-icons font provides numerous built-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 null\n\t * @public\n\t */\n\t@property({ defaultValue: null })\n\ticon?: string | null;\n\n\t/**\n\t * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\n\t * For more information on HTML Form support, see the `name` property of `ui5-select`.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tvalue!: string;\n\n\t/**\n\t * Defines the additional text displayed at the end of the option element.\n\t * @default \"\"\n\t * @public\n\t * @since 1.3.0\n\t */\n\t@property()\n\tadditionalText!: string;\n\n\t/**\n\t * Defines the focused state of the component.\n\t * @default false\n\t * @since 1.0.0-rc.13\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: 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\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n}\n\nOption.define();\n\nexport default Option;\n"]}
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../src/Option.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,WAAW;AACX,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAEjD,SAAS;AACT,OAAO,aAAa,MAAM,sCAAsC,CAAC;AACjE,OAAO,eAAe,MAAM,wCAAwC,CAAC;AACrE,OAAO,yBAAyB,MAAM,kDAAkD,CAAC;AAEzF;;;;;;;;;;;;;;GAcG;AAWH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,YAAY;IA2DhC,IAAI,gBAAgB;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACpB,CAAC;IAED,IAAI,oBAAoB;QACvB,OAAO,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;IAC/B,CAAC;CACD,CAAA;AAxDA;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;oCAClD;AASnB;IADC,QAAQ,EAAE;qCACI;AAYf;IADC,QAAQ,EAAE;oCACG;AASd;IADC,QAAQ,EAAE;8CACa;AASxB;IADC,QAAQ,EAAE;uCACM;AAQT;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACF;AAzDrB,MAAM;IAVX,aAAa,CAAC;QACd,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,cAAc;QACxB,MAAM,EAAE;YACP,YAAY,CAAC,MAAM;YACnB,yBAAyB;YACzB,eAAe;YACf,aAAa;SACb;KACD,CAAC;GACI,MAAM,CAkEX;AAED,MAAM,CAAC,MAAM,EAAE,CAAC;AAEhB,eAAe,MAAM,CAAC","sourcesContent":["import 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\";\nimport type { IOption } from \"./Select.js\";\nimport ListItemBase from \"./ListItemBase.js\";\n\n// Template\nimport OptionTemplate from \"./OptionTemplate.js\";\n\n// Styles\nimport optionBaseCss from \"./generated/themes/OptionBase.css.js\";\nimport listItemIconCss from \"./generated/themes/ListItemIcon.css.js\";\nimport listItemAdditionalTextCss from \"./generated/themes/ListItemAdditionalText.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-option` component defines the content of an option in the `ui5-select`.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Option.js\";`\n * @constructor\n * @extends ListItemBase\n * @implements {IOption}\n * @public\n */\n@customElement({\n\ttag: \"ui5-option\",\n\ttemplate: OptionTemplate,\n\tstyles: [\n\t\tListItemBase.styles,\n\t\tlistItemAdditionalTextCss,\n\t\tlistItemIconCss,\n\t\toptionBaseCss,\n\t],\n})\nclass Option extends ListItemBase implements IOption {\n\teventDetails!: ListItemBase[\"eventDetails\"];\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\t/**\n\t * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\n\t * For more information on HTML Form support, see the `name` property of `ui5-select`.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tvalue?: string;\n\n\t/**\n\t * Defines the `icon` source URI.\n\t *\n\t * **Note:**\n\t * SAP-icons font provides numerous built-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 `additionalText`, displayed in the end of the option.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\tadditionalText?: string;\n\n\t/**\n\t * Defines the tooltip of the option.\n\t * @default undefined\n\t * @public\n\t * @since 2.0.0\n\t */\n\t@property()\n\ttooltip?: string;\n\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\tdeclare selected: boolean;\n\n\tget displayIconBegin(): boolean {\n\t\treturn !!this.icon;\n\t}\n\n\tget effectiveDisplayText() {\n\t\treturn this.textContent || \"\";\n\t}\n}\n\nOption.define();\n\nexport default Option;\n"]}

package/dist/OptionCustom.d.ts

@@ -0,0 +1,56 @@
+import type { IOption } from "./Select.js";
+import ListItemBase from "./ListItemBase.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-option-custom` component defines a custom content of an option in the `ui5-select`.
+ * A component to be the same way as the standard `ui5-option`.
+ * The component accepts arbitrary HTML content to allow full customization.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/OptionCustom.js";`
+ * @constructor
+ * @since 2.0.0
+ * @extends ListItemBase
+ * @implements {IOption}
+ * @public
+ */
+declare class OptionCustom extends ListItemBase implements IOption {
+    eventDetails: ListItemBase["eventDetails"];
+    /**
+     * Defines the text, displayed inside the `ui5-select` input filed
+     * when the option gets selected.
+     * @default undefined
+     * @public
+     */
+    displayText?: string;
+    /**
+     * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.
+     * For more information on HTML Form support, see the `name` property of `ui5-select`.
+     * @default undefined
+     * @public
+     */
+    value?: string;
+    /**
+     * Defines the content of the component.
+     * @public
+     */
+    content: Array<Node>;
+    /**
+     * Defines the tooltip of the option.
+     * @default undefined
+     * @public
+     */
+    tooltip?: string;
+    /**
+     * Defines the selected state of the component.
+     * @default false
+     * @public
+     */
+    selected: boolean;
+    get effectiveDisplayText(): string;
+}
+export default OptionCustom;

package/dist/OptionCustom.js

@@ -0,0 +1,65 @@
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import ListItemBase from "./ListItemBase.js";
+// Template
+import OptionCustomTemplate from "./OptionCustomTemplate.js";
+// Styles
+import optionBaseCss from "./generated/themes/OptionBase.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-option-custom` component defines a custom content of an option in the `ui5-select`.
+ * A component to be the same way as the standard `ui5-option`.
+ * The component accepts arbitrary HTML content to allow full customization.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/OptionCustom.js";`
+ * @constructor
+ * @since 2.0.0
+ * @extends ListItemBase
+ * @implements {IOption}
+ * @public
+ */
+let OptionCustom = class OptionCustom extends ListItemBase {
+    get effectiveDisplayText() {
+        return this.displayText || this.textContent || "";
+    }
+};
+__decorate([
+    property()
+], OptionCustom.prototype, "displayText", void 0);
+__decorate([
+    property()
+], OptionCustom.prototype, "value", void 0);
+__decorate([
+    slot({ type: Node, "default": true, invalidateOnChildChange: true })
+], OptionCustom.prototype, "content", void 0);
+__decorate([
+    property()
+], OptionCustom.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: Boolean })
+], OptionCustom.prototype, "selected", void 0);
+OptionCustom = __decorate([
+    customElement({
+        tag: "ui5-option-custom",
+        template: OptionCustomTemplate,
+        styles: [
+            ListItemBase.styles,
+            optionBaseCss,
+        ],
+    })
+], OptionCustom);
+OptionCustom.define();
+export default OptionCustom;
+//# sourceMappingURL=OptionCustom.js.map

package/dist/OptionCustom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionCustom.js","sourceRoot":"","sources":["../src/OptionCustom.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,WAAW;AACX,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAE7D,SAAS;AACT,OAAO,aAAa,MAAM,sCAAsC,CAAC;AAEjE;;;;;;;;;;;;;;;;;GAiBG;AASH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,YAAY;IA4CtC,IAAI,oBAAoB;QACvB,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;IACnD,CAAC;CACD,CAAA;AArCA;IADC,QAAQ,EAAE;iDACU;AASrB;IADC,QAAQ,EAAE;2CACI;AAOf;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;6CAC/C;AAQtB;IADC,QAAQ,EAAE;6CACM;AAQT;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACF;AA1CrB,YAAY;IARjB,aAAa,CAAC;QACd,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,oBAAoB;QAC9B,MAAM,EAAE;YACP,YAAY,CAAC,MAAM;YACnB,aAAa;SACb;KACD,CAAC;GACI,YAAY,CA+CjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import 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\";\nimport type { IOption } from \"./Select.js\";\nimport ListItemBase from \"./ListItemBase.js\";\n\n// Template\nimport OptionCustomTemplate from \"./OptionCustomTemplate.js\";\n\n// Styles\nimport optionBaseCss from \"./generated/themes/OptionBase.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-option-custom` component defines a custom content of an option in the `ui5-select`.\n * A component to be the same way as the standard `ui5-option`.\n * The component accepts arbitrary HTML content to allow full customization.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/OptionCustom.js\";`\n * @constructor\n * @since 2.0.0\n * @extends ListItemBase\n * @implements {IOption}\n * @public\n */\n@customElement({\n\ttag: \"ui5-option-custom\",\n\ttemplate: OptionCustomTemplate,\n\tstyles: [\n\t\tListItemBase.styles,\n\t\toptionBaseCss,\n\t],\n})\nclass OptionCustom extends ListItemBase implements IOption {\n\teventDetails!: ListItemBase[\"eventDetails\"];\n\n\t/**\n\t * Defines the text, displayed inside the `ui5-select` input filed\n\t * when the option gets selected.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tdisplayText?: string;\n\n\t/**\n\t * Defines the value of the `ui5-select` inside an HTML Form element when this component is selected.\n\t * For more information on HTML Form support, see the `name` property of `ui5-select`.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tvalue?: string;\n\n\t/**\n\t * Defines the content of the component.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true, invalidateOnChildChange: true })\n\tcontent!: Array<Node>;\n\n\t/**\n\t * Defines the tooltip of the option.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttooltip?: string;\n\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\tdeclare selected: boolean;\n\n\tget effectiveDisplayText() {\n\t\treturn this.displayText || this.textContent || \"\";\n\t}\n}\n\nOptionCustom.define();\n\nexport default OptionCustom;\n"]}

package/dist/OptionCustomTemplate.d.ts

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

package/dist/OptionCustomTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+export default function OptionCustomTemplate() {
+    return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option", title: this.tooltip });
+}
+function listItemContent() {
+    return _jsx("slot", {});
+}
+//# sourceMappingURL=OptionCustomTemplate.js.map

package/dist/OptionCustomTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionCustomTemplate.js","sourceRoot":"","sources":["../src/OptionCustomTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAG7D,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC3C,OAAO,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;AACtG,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,gBAAa,CAAC;AACtB,CAAC","sourcesContent":["import ListItemBaseTemplate from \"./ListItemBaseTemplate.js\";\nimport type OptionCustom from \"./OptionCustom.js\";\n\nexport default function OptionCustomTemplate(this: OptionCustom) {\n\treturn ListItemBaseTemplate.call(this, { listItemContent }, { role: \"option\", title: this.tooltip });\n}\n\nfunction listItemContent(this: OptionCustom) {\n\treturn <slot></slot>;\n}\n"]}

package/dist/OptionTemplate.d.ts

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

package/dist/OptionTemplate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "./Icon.js";
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+export default function OptionTemplate() {
+    return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option", title: this.tooltip });
+}
+function listItemContent() {
+    return (_jsxs("div", { part: "content", id: `${this._id}-content`, class: "ui5-li-content", children: [this.displayIconBegin &&
+                _jsx(Icon, { part: "icon", name: this.icon, class: "ui5-li-icon", mode: "Decorative" }), _jsxs("div", { class: "ui5-li-text-wrapper", children: [_jsx("span", { part: "title", class: "ui5-li-title", children: _jsx("slot", {}) }), this.additionalText &&
+                        _jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText })] })] }));
+}
+//# sourceMappingURL=OptionTemplate.js.map

package/dist/OptionTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionTemplate.js","sourceRoot":"","sources":["../src/OptionTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAG7D,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;AACtG,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,CACN,eAAK,IAAI,EAAC,SAAS,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EAAE,KAAK,EAAC,gBAAgB,aACnE,IAAI,CAAC,gBAAgB;gBACrB,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,YAAY,GAAG,EAE5E,eAAK,KAAK,EAAC,qBAAqB,aAC/B,eAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,cAAc,YAAC,gBAAa,GAAO,EAC3D,IAAI,CAAC,cAAc;wBACnB,eAAM,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,wBAAwB,YAAE,IAAI,CAAC,cAAc,GAAQ,IAEpF,IACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport ListItemBaseTemplate from \"./ListItemBaseTemplate.js\";\nimport type Option from \"./Option.js\";\n\nexport default function OptionTemplate(this: Option) {\n\treturn ListItemBaseTemplate.call(this, { listItemContent }, { role: \"option\", title: this.tooltip });\n}\n\nfunction listItemContent(this: Option) {\n\treturn (\n\t\t<div part=\"content\" id={`${this._id}-content`} class=\"ui5-li-content\">\n\t\t\t{this.displayIconBegin &&\n\t\t\t\t<Icon part=\"icon\" name={this.icon} class=\"ui5-li-icon\" mode=\"Decorative\" />\n\t\t\t}\n\t\t\t<div class=\"ui5-li-text-wrapper\">\n\t\t\t\t<span part=\"title\" class=\"ui5-li-title\"><slot></slot></span>\n\t\t\t\t{this.additionalText &&\n\t\t\t\t\t<span part=\"additional-text\" class=\"ui5-li-additional-text\">{this.additionalText}</span>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/Panel.d.ts

@@ -1,8 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import TitleLevel from "./types/TitleLevel.js";
-import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+import type TitleLevel from "./types/TitleLevel.js";
+import type Button from "./Button.js";
+import type PanelAccessibleRole from "./types/PanelAccessibleRole.js";
 /**
  * @class
  *
@@ -60,15 +61,18 @@ import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
  * @csspart content - Used to style the wrapper of the content.
  */
 declare class Panel extends UI5Element {
+    eventDetails: {
+        toggle: void;
+    };
     /**
      * This property is used to set the header text of the component.
      * The text is visible in both expanded and collapsed states.
      *
      * **Note:** This property is overridden by the `header` slot.
-     * @default ""
+     * @default undefined
      * @public
      */
-    headerText: string;
+    headerText?: string;
     /**
      * Determines whether the component is in a fixed state that is not
      * expandable/collapsible by user interaction.
@@ -106,11 +110,11 @@ declare class Panel extends UI5Element {
     headerLevel: `${TitleLevel}`;
     /**
      * Defines the accessible ARIA name of the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 1.0.0-rc.15
      */
-    accessibleName: string;
+    accessibleName?: string;
     /**
      * Indicates whether the Panel header is sticky or not.
      * If stickyHeader is set to true, then whenever you scroll the content or
@@ -145,24 +149,16 @@ declare class Panel extends UI5Element {
     static i18nBundle: I18nBundle;
     onBeforeRendering(): void;
     shouldToggle(element: HTMLElement): boolean;
-    shouldNotAnimate(): boolean;
+    get shouldNotAnimate(): boolean;
     _headerClick(e: MouseEvent): void;
-    _toggleButtonClick(e: MouseEvent): void;
+    _toggleButtonClick(e: UI5CustomEvent<Button, "click">): void;
     _headerKeyDown(e: KeyboardEvent): void;
     _headerKeyUp(e: KeyboardEvent): void;
     _toggleOpen(): void;
     _headerOnTarget(target: HTMLElement): boolean;
-    get classes(): {
-        headerBtn: {
-            "ui5-panel-header-button-animated": boolean;
-        };
-        stickyHeaderClass: {
-            "ui5-panel-heading-wrapper-sticky": boolean;
-        };
-    };
     get toggleButtonTitle(): string;
     get expanded(): boolean;
-    get accRole(): string;
+    get accRole(): Lowercase<PanelAccessibleRole>;
     get effectiveAccessibleName(): string | undefined;
     get accInfo(): {
         button: {
@@ -175,22 +171,16 @@ declare class Panel extends UI5Element {
         ariaExpanded: boolean | undefined;
         ariaControls: string | undefined;
         ariaLabelledby: string | undefined;
-        role: string | undefined;
+        role: "button" | undefined;
     };
     get ariaLabelledbyReference(): string | undefined;
     get fixedPanelAriaLabelledbyReference(): string | undefined;
-    get headerAriaLevel(): string;
-    get headerTabIndex(): "0" | "-1";
-    get headingWrapperAriaLevel(): string | undefined;
+    get headerAriaLevel(): number;
+    get headerTabIndex(): 0 | -1;
+    get headingWrapperAriaLevel(): number | undefined;
     get headingWrapperRole(): "heading" | undefined;
     get nonFixedInternalHeader(): boolean;
-    get hasHeaderOrHeaderText(): string | true;
+    get hasHeaderOrHeaderText(): string | true | undefined;
     get nonFocusableButton(): boolean;
-    get styles(): {
-        content: {
-            display: string;
-        };
-    };
-    static onDefine(): Promise<void>;
 }
 export default Panel;

package/dist/Panel.js

@@ -7,22 +7,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var Panel_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
 import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
-import Button from "./Button.js";
-import Icon from "./Icon.js";
-import TitleLevel from "./types/TitleLevel.js";
-import PanelAccessibleRole from "./types/PanelAccessibleRole.js";
-import PanelTemplate from "./generated/templates/PanelTemplate.lit.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import PanelTemplate from "./PanelTemplate.js";
 import { PANEL_ICON } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import panelCss from "./generated/themes/Panel.css.js";
@@ -83,6 +78,68 @@ import panelCss from "./generated/themes/Panel.css.js";
  * @csspart content - Used to style the wrapper of the content.
  */
 let Panel = Panel_1 = class Panel extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines whether the component is in a fixed state that is not
+         * expandable/collapsible by user interaction.
+         * @default false
+         * @public
+         */
+        this.fixed = false;
+        /**
+         * Indicates whether the component is collapsed and only the header is displayed.
+         * @default false
+         * @public
+         */
+        this.collapsed = false;
+        /**
+         * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.
+         * @default false
+         * @public
+         * @since 1.0.0-rc.16
+         */
+        this.noAnimation = false;
+        /**
+         * Sets the accessible ARIA role of the component.
+         * Depending on the usage, you can change the role from the default `Form`
+         * to `Region` or `Complementary`.
+         * @default "Form"
+         * @public
+         */
+        this.accessibleRole = "Form";
+        /**
+         * Defines the "aria-level" of component heading,
+         * set by the `headerText`.
+         * @default "H2"
+         * @public
+        */
+        this.headerLevel = "H2";
+        /**
+         * Indicates whether the Panel header is sticky or not.
+         * If stickyHeader is set to true, then whenever you scroll the content or
+         * the application, the header of the panel will be always visible and
+         * a solid color will be used for its design.
+         * @default false
+         * @public
+         * @since 1.16.0-rc.1
+         */
+        this.stickyHeader = false;
+        /**
+         * When set to `true`, the `accessibleName` property will be
+         * applied not only on the panel root itself, but on its toggle button too.
+         * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.
+         * @default false
+         * @private
+          */
+        this.useAccessibleNameForToggleButton = false;
+        /**
+         * @private
+         */
+        this._hasHeader = false;
+        this._contentExpanded = false;
+        this._animationRunning = false;
+    }
     onBeforeRendering() {
         // If the animation is running, it will set the content expanded state at the end
         if (!this._animationRunning) {
@@ -97,7 +154,7 @@ let Panel = Panel_1 = class Panel extends UI5Element {
         }
         return true;
     }
-    shouldNotAnimate() {
+    get shouldNotAnimate() {
         return this.noAnimation || getAnimationMode() === AnimationMode.None;
     }
     _headerClick(e) {
@@ -107,7 +164,7 @@ let Panel = Panel_1 = class Panel extends UI5Element {
         this._toggleOpen();
     }
     _toggleButtonClick(e) {
-        if (e.x === 0 && e.y === 0) {
+        if (e.detail.originalEvent.x === 0 && e.detail.originalEvent.y === 0) {
             e.stopImmediatePropagation();
         }
     }
@@ -138,8 +195,8 @@ let Panel = Panel_1 = class Panel extends UI5Element {
             return;
         }
         this.collapsed = !this.collapsed;
-        if (this.shouldNotAnimate()) {
-            this.fireEvent("toggle");
+        if (this.shouldNotAnimate) {
+            this.fireDecoratorEvent("toggle");
             return;
         }
         this._animationRunning = true;
@@ -156,22 +213,12 @@ let Panel = Panel_1 = class Panel extends UI5Element {
         Promise.all(animations).then(() => {
             this._animationRunning = false;
             this._contentExpanded = !this.collapsed;
-            this.fireEvent("toggle");
+            this.fireDecoratorEvent("toggle");
         });
     }
     _headerOnTarget(target) {
         return target.classList.contains("sapMPanelWrappingDiv");
     }
-    get classes() {
-        return {
-            headerBtn: {
-                "ui5-panel-header-button-animated": !this.shouldNotAnimate(),
-            },
-            stickyHeaderClass: {
-                "ui5-panel-heading-wrapper-sticky": this.stickyHeader,
-            },
-        };
-    }
     get toggleButtonTitle() {
         return Panel_1.i18nBundle.getText(PANEL_ICON);
     }
@@ -206,10 +253,10 @@ let Panel = Panel_1 = class Panel extends UI5Element {
         return this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;
     }
     get headerAriaLevel() {
-        return this.headerLevel.slice(1);
+        return Number.parseInt(this.headerLevel.slice(1));
     }
     get headerTabIndex() {
-        return (this.header.length || this.fixed) ? "-1" : "0";
+        return (this.header.length || this.fixed) ? -1 : 0;
     }
     get headingWrapperAriaLevel() {
         return !this._hasHeader ? this.headerAriaLevel : undefined;
@@ -226,16 +273,6 @@ let Panel = Panel_1 = class Panel extends UI5Element {
     get nonFocusableButton() {
         return !this.header.length;
     }
-    get styles() {
-        return {
-            content: {
-                display: this._contentExpanded ? "block" : "none",
-            },
-        };
-    }
-    static async onDefine() {
-        Panel_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-    }
 };
 __decorate([
     property()
@@ -250,10 +287,10 @@ __decorate([
     property({ type: Boolean })
 ], Panel.prototype, "noAnimation", void 0);
 __decorate([
-    property({ type: PanelAccessibleRole, defaultValue: PanelAccessibleRole.Form })
+    property()
 ], Panel.prototype, "accessibleRole", void 0);
 __decorate([
-    property({ type: TitleLevel, defaultValue: TitleLevel.H2 })
+    property()
 ], Panel.prototype, "headerLevel", void 0);
 __decorate([
     property()
@@ -276,22 +313,26 @@ __decorate([
 __decorate([
     slot()
 ], Panel.prototype, "header", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], Panel, "i18nBundle", void 0);
 Panel = Panel_1 = __decorate([
     customElement({
         tag: "ui5-panel",
         fastNavigation: true,
         languageAware: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: PanelTemplate,
         styles: panelCss,
-        dependencies: [Button, Icon],
     })
     /**
      * Fired when the component is expanded/collapsed by user interaction.
      * @public
      */
     ,
-    event("toggle")
+    event("toggle", {
+        bubbles: true,
+    })
 ], Panel);
 Panel.define();
 export default Panel;