@ui5/webcomponents 2.5.0 → 2.6.0-rc.0

package/dist/Option.js.map

@@ -1 +1 @@
-{"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;AAC7C,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,WAAW;AACX,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAEzE,SAAS;AACT,OAAO,aAAa,MAAM,sCAAsC,CAAC;AACjE,OAAO,eAAe,MAAM,wCAAwC,CAAC;AACrE,OAAO,yBAAyB,MAAM,kDAAkD,CAAC;AAEzF;;;;;;;;;;;;;;GAcG;AAcH,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,YAAY;IAyDhC,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;AAvDrB,MAAM;IAbX,aAAa,CAAC;QACd,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,cAAc;QACxB,MAAM,EAAE;YACP,YAAY,CAAC,MAAM;YACnB,yBAAyB;YACzB,eAAe;YACf,aAAa;SACb;QACD,YAAY,EAAE;YACb,IAAI;SACJ;KACD,CAAC;GACI,MAAM,CAgEX;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\";\nimport Icon from \"./Icon.js\";\n\n// Template\nimport OptionTemplate from \"./generated/templates/OptionTemplate.lit.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\tdependencies: [\n\t\tIcon,\n\t],\n})\nclass Option extends ListItemBase implements IOption {\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"]}
+{"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;AAC7C,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,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;AAcH,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;IAbX,aAAa,CAAC;QACd,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,cAAc;QACxB,MAAM,EAAE;YACP,YAAY,CAAC,MAAM;YACnB,yBAAyB;YACzB,eAAe;YACf,aAAa;SACb;QACD,YAAY,EAAE;YACb,IAAI;SACJ;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\";\nimport Icon from \"./Icon.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\tdependencies: [\n\t\tIcon,\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

@@ -19,6 +19,7 @@ import ListItemBase from "./ListItemBase.js";
  * @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.

package/dist/OptionCustom.js

@@ -9,7 +9,7 @@ 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 "./generated/templates/OptionCustomTemplate.lit.js";
+import OptionCustomTemplate from "./OptionCustomTemplate.js";
 // Styles
 import optionBaseCss from "./generated/themes/OptionBase.css.js";
 /**

package/dist/OptionCustom.js.map

@@ -1 +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,mDAAmD,CAAC;AAErF,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;AAvCA;IADC,QAAQ,EAAE;iDACU;AASrB;IADC,QAAQ,EAAE;2CACI;AASf;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 \"./generated/templates/OptionCustomTemplate.lit.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\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 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\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"]}
+{"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;IA8CtC,IAAI,oBAAoB;QACvB,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;IACnD,CAAC;CACD,CAAA;AAvCA;IADC,QAAQ,EAAE;iDACU;AASrB;IADC,QAAQ,EAAE;2CACI;AASf;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;AA5CrB,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,CAiDjB;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 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\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,6 +1,5 @@
 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 type TitleLevel from "./types/TitleLevel.js";
 import type PanelAccessibleRole from "./types/PanelAccessibleRole.js";
 /**
@@ -148,24 +147,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;
     _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: {
@@ -178,21 +169,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(): "-1" | "0";
-    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 | undefined;
     get nonFocusableButton(): boolean;
-    get styles(): {
-        content: {
-            display: string;
-        };
-    };
 }
 export default Panel;

package/dist/Panel.js

@@ -10,17 +10,16 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import Button from "./Button.js";
 import Icon from "./Icon.js";
-import PanelTemplate from "./generated/templates/PanelTemplate.lit.js";
+import PanelTemplate from "./PanelTemplate.js";
 import { PANEL_ICON } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import panelCss from "./generated/themes/Panel.css.js";
@@ -157,7 +156,7 @@ let Panel = Panel_1 = class Panel extends UI5Element {
         }
         return true;
     }
-    shouldNotAnimate() {
+    get shouldNotAnimate() {
         return this.noAnimation || getAnimationMode() === AnimationMode.None;
     }
     _headerClick(e) {
@@ -198,7 +197,7 @@ let Panel = Panel_1 = class Panel extends UI5Element {
             return;
         }
         this.collapsed = !this.collapsed;
-        if (this.shouldNotAnimate()) {
+        if (this.shouldNotAnimate) {
             this.fireDecoratorEvent("toggle");
             return;
         }
@@ -222,16 +221,6 @@ let Panel = Panel_1 = class Panel extends UI5Element {
     _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);
     }
@@ -266,10 +255,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;
@@ -286,13 +275,6 @@ let Panel = Panel_1 = class Panel extends UI5Element {
     get nonFocusableButton() {
         return !this.header.length;
     }
-    get styles() {
-        return {
-            content: {
-                display: this._contentExpanded ? "block" : "none",
-            },
-        };
-    }
 };
 __decorate([
     property()
@@ -341,7 +323,7 @@ Panel = Panel_1 = __decorate([
         tag: "ui5-panel",
         fastNavigation: true,
         languageAware: true,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: PanelTemplate,
         styles: panelCss,
         dependencies: [Button, Icon],

package/dist/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport slideDown from \"@ui5/webcomponents-base/dist/animations/slideDown.js\";\nimport slideUp from \"@ui5/webcomponents-base/dist/animations/slideUp.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\nimport type TitleLevel from \"./types/TitleLevel.js\";\nimport type PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./generated/templates/PanelTemplate.lit.js\";\n\nimport { PANEL_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport panelCss from \"./generated/themes/Panel.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-panel` component is a container which has a header and a\n * content area and is used\n * for grouping and displaying information. It can be collapsed to save space on the screen.\n *\n * ### Guidelines:\n *\n * - Nesting two or more panels is not recommended.\n * - Do not stack too many panels on one page.\n *\n * ### Structure\n * The panel's header area consists of a title bar with a header text or custom header.\n *\n * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n *\n * The custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n *\n * The content area can contain an arbitrary set of controls.\n *\n * **Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n *\n * ### Responsive Behavior\n *\n * - If the width of the panel is set to 100% (default), the panel and its children are\n * resized responsively,\n * depending on its parent container.\n * - If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.\n * - When the panel is expandable (the `fixed` property is set to `false`),\n * an arrow icon (pointing to the right) appears in front of the header.\n * - When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.\n * - When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Panel.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.\n * @csspart header - Used to style the wrapper of the header.\n * @csspart content - Used to style the wrapper of the content.\n */\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: litRender,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n\tdependencies: [Button, Icon],\n})\n/**\n * Fired when the component is expanded/collapsed by user interaction.\n * @public\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\nclass Panel extends UI5Element {\n\teventDetails!: {\n\t\ttoggle: void,\n\t}\n\t/**\n\t * This property is used to set the header text of the component.\n\t * The text is visible in both expanded and collapsed states.\n\t *\n\t * **Note:** This property is overridden by the `header` slot.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = false;\n\n\t/**\n\t * Indicates whether the component is collapsed and only the header is displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tnoAnimation = false;\n\n\t/**\n\t * Sets the accessible ARIA role of the component.\n\t * Depending on the usage, you can change the role from the default `Form`\n\t * to `Region` or `Complementary`.\n\t * @default \"Form\"\n\t * @public\n\t */\n\t@property()\n\taccessibleRole: `${PanelAccessibleRole}` = \"Form\";\n\n\t/**\n\t * Defines the \"aria-level\" of component heading,\n\t * set by the `headerText`.\n\t * @default \"H2\"\n\t * @public\n\t*/\n\t@property()\n\theaderLevel: `${TitleLevel}` = \"H2\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Indicates whether the Panel header is sticky or not.\n\t * If stickyHeader is set to true, then whenever you scroll the content or\n\t * the application, the header of the panel will be always visible and\n\t * a solid color will be used for its design.\n\t * @default false\n\t * @public\n\t * @since 1.16.0-rc.1\n\t */\n\t @property({ type: Boolean })\n\t stickyHeader = false;\n\n\t/**\n\t * When set to `true`, the `accessibleName` property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.\n\t * @default false\n\t * @private\n\t  */\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasHeader = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning = false;\n\n\t/**\n\t * Defines the component header area.\n\t *\n\t * **Note:** When a header is provided, the `headerText` property is ignored.\n\t * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\t// If the animation is running, it will set the content expanded state at the end\n\t\tif (!this._animationRunning) {\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t}\n\n\t\tthis._hasHeader = !!this.header.length;\n\t}\n\n\tshouldToggle(element: HTMLElement): boolean {\n\t\tconst customContent = this.header.length;\n\t\tif (customContent) {\n\t\t\treturn element.classList.contains(\"ui5-panel-header-button\");\n\t\t}\n\t\treturn true;\n\t}\n\n\tshouldNotAnimate() {\n\t\treturn this.noAnimation || getAnimationMode() === AnimationMode.None;\n\t}\n\n\t_headerClick(e: MouseEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleOpen();\n\t}\n\n\t_toggleButtonClick(e: MouseEvent) {\n\t\tif (e.x === 0 && e.y === 0) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t_headerKeyDown(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_headerKeyUp(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\t}\n\n\t_toggleOpen() {\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.collapsed = !this.collapsed;\n\n\t\tif (this.shouldNotAnimate()) {\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._animationRunning = true;\n\n\t\tconst elements = this.getDomRef()!.querySelectorAll(\".ui5-panel-content\");\n\t\tconst animations: Array<Promise<void | Error>> = [];\n\n\t\t[].forEach.call(elements, oElement => {\n\t\t\tif (this.collapsed) {\n\t\t\t\tanimations.push(slideUp(oElement).promise());\n\t\t\t} else {\n\t\t\t\tanimations.push(slideDown(oElement).promise());\n\t\t\t}\n\t\t});\n\n\t\tPromise.all(animations).then(() => {\n\t\t\tthis._animationRunning = false;\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\theaderBtn: {\n\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate(),\n\t\t\t},\n\t\t\tstickyHeaderClass: {\n\t\t\t\t\"ui5-panel-heading-wrapper-sticky\": this.stickyHeader,\n\t\t\t},\n\t\t};\n\t}\n\n\tget toggleButtonTitle() {\n\t\treturn Panel.i18nBundle.getText(PANEL_ICON);\n\t}\n\n\tget expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget accRole() {\n\t\treturn this.accessibleRole.toLowerCase();\n\t}\n\n\tget effectiveAccessibleName() {\n\t\treturn typeof this.accessibleName === \"string\" && this.accessibleName.length ? this.accessibleName : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"button\": {\n\t\t\t\t\"accessibilityAttributes\": {\n\t\t\t\t\t\"expanded\": this.expanded,\n\t\t\t\t},\n\t\t\t\t\"title\": this.toggleButtonTitle,\n\t\t\t\t\"ariaLabelButton\": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,\n\t\t\t},\n\t\t\t\"ariaExpanded\": this.nonFixedInternalHeader ? this.expanded : undefined,\n\t\t\t\"ariaControls\": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,\n\t\t\t\"ariaLabelledby\": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,\n\t\t\t\"role\": this.nonFixedInternalHeader ? \"button\" : undefined,\n\t\t};\n\t}\n\n\tget ariaLabelledbyReference() {\n\t\treturn (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget fixedPanelAriaLabelledbyReference() {\n\t\treturn this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget headerAriaLevel() {\n\t\treturn this.headerLevel.slice(1);\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this.header.length || this.fixed) ? \"-1\" : \"0\";\n\t}\n\n\tget headingWrapperAriaLevel() {\n\t\treturn !this._hasHeader ? this.headerAriaLevel : undefined;\n\t}\n\n\tget headingWrapperRole() {\n\t\treturn !this._hasHeader ? \"heading\" : undefined;\n\t}\n\n\tget nonFixedInternalHeader() {\n\t\treturn !this._hasHeader && !this.fixed;\n\t}\n\n\tget hasHeaderOrHeaderText() {\n\t\treturn this._hasHeader || this.headerText;\n\t}\n\n\tget nonFocusableButton() {\n\t\treturn !this.header.length;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tcontent: {\n\t\t\t\tdisplay: this._contentExpanded ? \"block\" : \"none\",\n\t\t\t},\n\t\t};\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../src/Panel.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slideDown from \"@ui5/webcomponents-base/dist/animations/slideDown.js\";\nimport slideUp from \"@ui5/webcomponents-base/dist/animations/slideUp.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AnimationMode from \"@ui5/webcomponents-base/dist/types/AnimationMode.js\";\nimport { getAnimationMode } from \"@ui5/webcomponents-base/dist/config/AnimationMode.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\nimport type TitleLevel from \"./types/TitleLevel.js\";\nimport type PanelAccessibleRole from \"./types/PanelAccessibleRole.js\";\nimport PanelTemplate from \"./PanelTemplate.js\";\nimport { PANEL_ICON } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport panelCss from \"./generated/themes/Panel.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-panel` component is a container which has a header and a\n * content area and is used\n * for grouping and displaying information. It can be collapsed to save space on the screen.\n *\n * ### Guidelines:\n *\n * - Nesting two or more panels is not recommended.\n * - Do not stack too many panels on one page.\n *\n * ### Structure\n * The panel's header area consists of a title bar with a header text or custom header.\n *\n * The header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n *\n * The custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n *\n * The content area can contain an arbitrary set of controls.\n *\n * **Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n *\n * ### Responsive Behavior\n *\n * - If the width of the panel is set to 100% (default), the panel and its children are\n * resized responsively,\n * depending on its parent container.\n * - If the panel has a fixed height, it will take up the space even if the panel is\n * collapsed.\n * - When the panel is expandable (the `fixed` property is set to `false`),\n * an arrow icon (pointing to the right) appears in front of the header.\n * - When the animation is activated, expand/collapse uses a smooth animation to open or\n * close the content area.\n * - When the panel expands/collapses, the arrow icon rotates 90 degrees\n * clockwise/counter-clockwise.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Panel.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @slot {Array<Node>} default - Defines the content of the component. The content is visible only when the component is expanded.\n * @csspart header - Used to style the wrapper of the header.\n * @csspart content - Used to style the wrapper of the content.\n */\n@customElement({\n\ttag: \"ui5-panel\",\n\tfastNavigation: true,\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: PanelTemplate,\n\tstyles: panelCss,\n\tdependencies: [Button, Icon],\n})\n/**\n * Fired when the component is expanded/collapsed by user interaction.\n * @public\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\nclass Panel extends UI5Element {\n\teventDetails!: {\n\t\ttoggle: void,\n\t}\n\t/**\n\t * This property is used to set the header text of the component.\n\t * The text is visible in both expanded and collapsed states.\n\t *\n\t * **Note:** This property is overridden by the `header` slot.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = false;\n\n\t/**\n\t * Indicates whether the component is collapsed and only the header is displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Indicates whether the transition between the expanded and the collapsed state of the component is animated. By default the animation is enabled.\n\t * @default false\n\t * @public\n\t * @since 1.0.0-rc.16\n\t */\n\t@property({ type: Boolean })\n\tnoAnimation = false;\n\n\t/**\n\t * Sets the accessible ARIA role of the component.\n\t * Depending on the usage, you can change the role from the default `Form`\n\t * to `Region` or `Complementary`.\n\t * @default \"Form\"\n\t * @public\n\t */\n\t@property()\n\taccessibleRole: `${PanelAccessibleRole}` = \"Form\";\n\n\t/**\n\t * Defines the \"aria-level\" of component heading,\n\t * set by the `headerText`.\n\t * @default \"H2\"\n\t * @public\n\t*/\n\t@property()\n\theaderLevel: `${TitleLevel}` = \"H2\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Indicates whether the Panel header is sticky or not.\n\t * If stickyHeader is set to true, then whenever you scroll the content or\n\t * the application, the header of the panel will be always visible and\n\t * a solid color will be used for its design.\n\t * @default false\n\t * @public\n\t * @since 1.16.0-rc.1\n\t */\n\t @property({ type: Boolean })\n\t stickyHeader = false;\n\n\t/**\n\t * When set to `true`, the `accessibleName` property will be\n\t * applied not only on the panel root itself, but on its toggle button too.\n\t * **Note:** This property only has effect if `accessibleName` is set and a header slot is provided.\n\t * @default false\n\t * @private\n\t  */\n\t@property({ type: Boolean })\n\tuseAccessibleNameForToggleButton = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasHeader = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_contentExpanded = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_animationRunning = false;\n\n\t/**\n\t * Defines the component header area.\n\t *\n\t * **Note:** When a header is provided, the `headerText` property is ignored.\n\t * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\t// If the animation is running, it will set the content expanded state at the end\n\t\tif (!this._animationRunning) {\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t}\n\n\t\tthis._hasHeader = !!this.header.length;\n\t}\n\n\tshouldToggle(element: HTMLElement): boolean {\n\t\tconst customContent = this.header.length;\n\t\tif (customContent) {\n\t\t\treturn element.classList.contains(\"ui5-panel-header-button\");\n\t\t}\n\t\treturn true;\n\t}\n\n\tget shouldNotAnimate() {\n\t\treturn this.noAnimation || getAnimationMode() === AnimationMode.None;\n\t}\n\n\t_headerClick(e: MouseEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleOpen();\n\t}\n\n\t_toggleButtonClick(e: MouseEvent) {\n\t\tif (e.x === 0 && e.y === 0) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n\n\t_headerKeyDown(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_headerKeyUp(e: KeyboardEvent) {\n\t\tif (!this.shouldToggle(e.target as HTMLElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\tthis._toggleOpen();\n\t\t}\n\t}\n\n\t_toggleOpen() {\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.collapsed = !this.collapsed;\n\n\t\tif (this.shouldNotAnimate) {\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t\treturn;\n\t\t}\n\n\t\tthis._animationRunning = true;\n\n\t\tconst elements = this.getDomRef()!.querySelectorAll(\".ui5-panel-content\");\n\t\tconst animations: Array<Promise<void | Error>> = [];\n\n\t\t[].forEach.call(elements, oElement => {\n\t\t\tif (this.collapsed) {\n\t\t\t\tanimations.push(slideUp(oElement).promise());\n\t\t\t} else {\n\t\t\t\tanimations.push(slideDown(oElement).promise());\n\t\t\t}\n\t\t});\n\n\t\tPromise.all(animations).then(() => {\n\t\t\tthis._animationRunning = false;\n\t\t\tthis._contentExpanded = !this.collapsed;\n\t\t\tthis.fireDecoratorEvent(\"toggle\");\n\t\t});\n\t}\n\n\t_headerOnTarget(target: HTMLElement) {\n\t\treturn target.classList.contains(\"sapMPanelWrappingDiv\");\n\t}\n\n\tget toggleButtonTitle() {\n\t\treturn Panel.i18nBundle.getText(PANEL_ICON);\n\t}\n\n\tget expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget accRole() {\n\t\treturn this.accessibleRole.toLowerCase() as Lowercase<PanelAccessibleRole>;\n\t}\n\n\tget effectiveAccessibleName() {\n\t\treturn typeof this.accessibleName === \"string\" && this.accessibleName.length ? this.accessibleName : undefined;\n\t}\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"button\": {\n\t\t\t\t\"accessibilityAttributes\": {\n\t\t\t\t\t\"expanded\": this.expanded,\n\t\t\t\t},\n\t\t\t\t\"title\": this.toggleButtonTitle,\n\t\t\t\t\"ariaLabelButton\": !this.nonFocusableButton && this.useAccessibleNameForToggleButton ? this.effectiveAccessibleName : undefined,\n\t\t\t},\n\t\t\t\"ariaExpanded\": this.nonFixedInternalHeader ? this.expanded : undefined,\n\t\t\t\"ariaControls\": this.nonFixedInternalHeader ? `${this._id}-content` : undefined,\n\t\t\t\"ariaLabelledby\": this.nonFocusableButton ? this.ariaLabelledbyReference : undefined,\n\t\t\t\"role\": this.nonFixedInternalHeader ? \"button\" : undefined as \"button\" | undefined,\n\t\t};\n\t}\n\n\tget ariaLabelledbyReference() {\n\t\treturn (this.nonFocusableButton && this.headerText && !this.fixed) ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget fixedPanelAriaLabelledbyReference() {\n\t\treturn this.fixed && !this.effectiveAccessibleName ? `${this._id}-header-title` : undefined;\n\t}\n\n\tget headerAriaLevel() {\n\t\treturn Number.parseInt(this.headerLevel.slice(1));\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this.header.length || this.fixed) ? -1 : 0;\n\t}\n\n\tget headingWrapperAriaLevel() {\n\t\treturn !this._hasHeader ? this.headerAriaLevel : undefined;\n\t}\n\n\tget headingWrapperRole() {\n\t\treturn !this._hasHeader ? \"heading\" : undefined;\n\t}\n\n\tget nonFixedInternalHeader() {\n\t\treturn !this._hasHeader && !this.fixed;\n\t}\n\n\tget hasHeaderOrHeaderText() {\n\t\treturn this._hasHeader || this.headerText;\n\t}\n\n\tget nonFocusableButton() {\n\t\treturn !this.header.length;\n\t}\n}\n\nPanel.define();\n\nexport default Panel;\n"]}

package/dist/PanelTemplate.d.ts

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

package/dist/PanelTemplate.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+export default function PanelTemplate() {
+    return (_jsx(_Fragment, { children: _jsxs("div", { class: "ui5-panel-root", role: this.accRole, "aria-label": this.effectiveAccessibleName, "aria-labelledby": this.fixedPanelAriaLabelledbyReference, children: [this.hasHeaderOrHeaderText &&
+                    // header: either header or h1 with header text
+                    _jsx("div", { class: {
+                            "ui5-panel-heading-wrapper": true,
+                            "ui5-panel-heading-wrapper-sticky": this.stickyHeader,
+                        }, role: this.headingWrapperRole, "aria-level": this.headingWrapperAriaLevel, children: _jsxs("div", { onClick: this._headerClick, onKeyDown: this._headerKeyDown, onKeyUp: this._headerKeyUp, class: "ui5-panel-header", tabindex: this.headerTabIndex, role: this.accInfo.role, "aria-expanded": this.accInfo.ariaExpanded, "aria-controls": this.accInfo.ariaControls, "aria-labelledby": this.accInfo.ariaLabelledby, part: "header", children: [!this.fixed &&
+                                    _jsx("div", { class: "ui5-panel-header-button-root", children: this._hasHeader ?
+                                            _jsx(Button, { design: "Transparent", class: "ui5-panel-header-button ui5-panel-header-button-with-icon", onClick: this._toggleButtonClick, accessibilityAttributes: this.accInfo.button.accessibilityAttributes, tooltip: this.accInfo.button.title, accessibleName: this.accInfo.button.ariaLabelButton, children: _jsx("div", { class: "ui5-panel-header-icon-wrapper", children: _jsx(Icon, { class: {
+                                                            "ui5-panel-header-icon": true,
+                                                            "ui5-panel-header-button-animated": !this.shouldNotAnimate,
+                                                        }, name: slimArrowRight }) }) })
+                                            : // else
+                                                _jsx(Icon, { class: {
+                                                        "ui5-panel-header-button": true,
+                                                        "ui5-panel-header-icon": true,
+                                                        "ui5-panel-header-button-animated": !this.shouldNotAnimate,
+                                                    }, name: slimArrowRight, showTooltip: true, accessibleName: this.toggleButtonTitle }) }), this._hasHeader ?
+                                    _jsx("slot", { name: "header" })
+                                    : // else
+                                        _jsx("div", { id: `${this._id}-header-title`, class: "ui5-panel-header-title", children: this.headerText })] }) }), _jsx("div", { class: "ui5-panel-content", id: `${this._id}-content`, tabindex: -1, style: {
+                        display: this._contentExpanded ? "block" : "none",
+                    }, part: "content", children: _jsx("slot", {}) })] }) }));
+}
+//# sourceMappingURL=PanelTemplate.js.map

package/dist/PanelTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelTemplate.js","sourceRoot":"","sources":["../src/PanelTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,aAAa;IACpC,OAAO,CAAC,4BACP,eACC,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,IAAI,CAAC,OAAO,gBACN,IAAI,CAAC,uBAAuB,qBACvB,IAAI,CAAC,iCAAiC,aAErD,IAAI,CAAC,qBAAqB;oBAC3B,+CAA+C;oBAC/C,cACC,KAAK,EAAE;4BACN,2BAA2B,EAAE,IAAI;4BACjC,kCAAkC,EAAE,IAAI,CAAC,YAAY;yBACrD,EACD,IAAI,EAAE,IAAI,CAAC,kBAAkB,gBACjB,IAAI,CAAC,uBAAuB,YAExC,eACC,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,mBACR,IAAI,CAAC,OAAO,CAAC,YAAY,mBACzB,IAAI,CAAC,OAAO,CAAC,YAAY,qBACvB,IAAI,CAAC,OAAO,CAAC,cAAc,EAC5C,IAAI,EAAC,QAAQ,aAEX,CAAC,IAAI,CAAC,KAAK;oCACZ,cAAK,KAAK,EAAC,8BAA8B,YACtC,IAAI,CAAC,UAAU,CAAC,CAAC;4CAClB,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,KAAK,EAAC,2DAA2D,EACjE,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,uBAAuB,EACpE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAClC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,YAEnD,cAAK,KAAK,EAAC,+BAA+B,YACzC,KAAC,IAAI,IACJ,KAAK,EAAE;4DACN,uBAAuB,EAAE,IAAI;4DAC7B,kCAAkC,EAAE,CAAC,IAAI,CAAC,gBAAgB;yDAC1D,EACD,IAAI,EAAE,cAAc,GAEd,GACF,GACE;4CACT,CAAC,CAAC,OAAO;gDACT,KAAC,IAAI,IACJ,KAAK,EAAE;wDACN,yBAAyB,EAAE,IAAI;wDAC/B,uBAAuB,EAAE,IAAI;wDAC7B,kCAAkC,EAAE,CAAC,IAAI,CAAC,gBAAgB;qDAC1D,EACD,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,IAAI,CAAC,iBAAiB,GACrC,GAEE,EAGL,IAAI,CAAC,UAAU,CAAC,CAAC;oCAClB,eAAM,IAAI,EAAC,QAAQ,GAAQ;oCAC3B,CAAC,CAAC,OAAO;wCACT,cACC,EAAE,EAAG,GAAG,IAAI,CAAC,GAAG,eAAe,EAC/B,KAAK,EAAC,wBAAwB,YAE5B,IAAI,CAAC,UAAU,GACZ,IAEF,GACD,EAIP,cACC,KAAK,EAAC,mBAAmB,EACzB,EAAE,EAAG,GAAG,IAAI,CAAC,GAAG,UAAU,EAC1B,QAAQ,EAAG,CAAC,CAAC,EACb,KAAK,EAAE;wBACN,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;qBACjD,EACD,IAAI,EAAC,SAAS,YAEd,gBAAa,GACR,IACD,GACJ,CAAC,CAAC;AACN,CAAC","sourcesContent":["import type Panel from \"./Panel.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\n\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function PanelTemplate(this: Panel) {\n\treturn (<>\n\t\t<div\n\t\t\tclass=\"ui5-panel-root\"\n\t\t\trole={this.accRole}\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-labelledby={this.fixedPanelAriaLabelledbyReference}\n\t\t>\n\t\t\t{ this.hasHeaderOrHeaderText &&\n\t\t\t\t// header: either header or h1 with header text\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-panel-heading-wrapper\": true,\n\t\t\t\t\t\t\"ui5-panel-heading-wrapper-sticky\": this.stickyHeader,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.headingWrapperRole}\n\t\t\t\t\taria-level={this.headingWrapperAriaLevel}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tonClick={this._headerClick}\n\t\t\t\t\t\tonKeyDown={this._headerKeyDown}\n\t\t\t\t\t\tonKeyUp={this._headerKeyUp}\n\t\t\t\t\t\tclass=\"ui5-panel-header\"\n\t\t\t\t\t\ttabindex={this.headerTabIndex}\n\t\t\t\t\t\trole={this.accInfo.role}\n\t\t\t\t\t\taria-expanded={this.accInfo.ariaExpanded}\n\t\t\t\t\t\taria-controls={this.accInfo.ariaControls}\n\t\t\t\t\t\taria-labelledby={this.accInfo.ariaLabelledby}\n\t\t\t\t\t\tpart=\"header\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ !this.fixed &&\n\t\t\t\t\t\t\t<div class=\"ui5-panel-header-button-root\">\n\t\t\t\t\t\t\t\t{ this._hasHeader ?\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-panel-header-button ui5-panel-header-button-with-icon\"\n\t\t\t\t\t\t\t\t\t\tonClick={this._toggleButtonClick}\n\t\t\t\t\t\t\t\t\t\taccessibilityAttributes={this.accInfo.button.accessibilityAttributes}\n\t\t\t\t\t\t\t\t\t\ttooltip={this.accInfo.button.title}\n\t\t\t\t\t\t\t\t\t\taccessibleName={this.accInfo.button.ariaLabelButton}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div class=\"ui5-panel-header-icon-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-icon\": true,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tname={slimArrowRight}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t</Icon>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t: // else\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button\": true,\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-icon\": true,\n\t\t\t\t\t\t\t\t\t\t\t\"ui5-panel-header-button-animated\": !this.shouldNotAnimate,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tname={slimArrowRight}\n\t\t\t\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\t\t\t\taccessibleName={this.toggleButtonTitle}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t{ this._hasHeader ?\n\t\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t\t\t: // else\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={ `${this._id}-header-title` }\n\t\t\t\t\t\t\t\tclass=\"ui5-panel-header-title\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ this.headerText }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{/* content area */}\n\t\t\t<div\n\t\t\t\tclass=\"ui5-panel-content\"\n\t\t\t\tid={ `${this._id}-content` }\n\t\t\t\ttabindex={ -1 }\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: this._contentExpanded ? \"block\" : \"none\",\n\t\t\t\t}}\n\t\t\t\tpart=\"content\"\n\t\t\t>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t</>);\n}\n"]}

package/dist/Popover.d.ts

@@ -1,6 +1,5 @@
 import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Popup from "./Popup.js";
-import type { PopupBeforeCloseEventDetail as PopoverBeforeCloseEventDetail } from "./Popup.js";
 import PopoverPlacement from "./types/PopoverPlacement.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
@@ -54,6 +53,7 @@ type CalculatedPlacement = {
  * @csspart footer - Used to style the footer of the component
  */
 declare class Popover extends Popup {
+    eventDetails: Popup["eventDetails"];
     /**
      * Defines the header text.
      *
@@ -185,10 +185,6 @@ declare class Popover extends Popup {
      * @returns The adjusted top in px.
      */
     _adjustForIOSKeyboard(top: number): number;
-    _getContainingBlockClientLocation(): DOMRect | {
-        left: number;
-        top: number;
-    };
     getPopoverSize(): PopoverSize;
     _showOutsideViewport(): void;
     _isUI5Element(el: HTMLElement): el is UI5Element;
@@ -244,4 +240,3 @@ declare class Popover extends Popup {
 declare const instanceOfPopover: (object: any) => object is Popover;
 export default Popover;
 export { instanceOfPopover };
-export type { PopoverBeforeCloseEventDetail, };

package/dist/Popover.js

@@ -11,9 +11,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
-import isElementContainingBlock from "@ui5/webcomponents-base/dist/util/isElementContainingBlock.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
-import getParentElement from "@ui5/webcomponents-base/dist/util/getParentElement.js";
 import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import Popup from "./Popup.js";
@@ -22,7 +20,7 @@ import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import { addOpenedPopover, removeOpenedPopover } from "./popup-utils/PopoverRegistry.js";
 // Template
-import PopoverTemplate from "./generated/templates/PopoverTemplate.lit.js";
+import PopoverTemplate from "./PopoverTemplate.js";
 // Styles
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import PopoverCss from "./generated/themes/Popover.css.js";
@@ -196,9 +194,9 @@ let Popover = Popover_1 = class Popover extends Popup {
         if (opener === undefined || opener instanceof HTMLElement) {
             return opener;
         }
-        const rootNode = this.getRootNode();
-        if (!(rootNode instanceof ShadowRoot || rootNode instanceof Document)) {
-            return;
+        let rootNode = this.getRootNode();
+        if (rootNode === this) {
+            rootNode = document;
         }
         let openerHTMLElement = rootNode.getElementById(opener);
         if (rootNode instanceof ShadowRoot && !openerHTMLElement) {
@@ -321,16 +319,6 @@ let Popover = Popover_1 = class Popover extends Popup {
         const actualTop = Math.ceil(this.getBoundingClientRect().top);
         return top + (Number.parseInt(this.style.top || "0") - actualTop);
     }
-    _getContainingBlockClientLocation() {
-        let parentElement = getParentElement(this);
-        while (parentElement) {
-            if (isElementContainingBlock(parentElement)) {
-                return parentElement.getBoundingClientRect();
-            }
-            parentElement = getParentElement(parentElement);
-        }
-        return { left: 0, top: 0 };
-    }
     getPopoverSize() {
         const rect = this.getBoundingClientRect(), width = rect.width, height = rect.height;
         return { width, height };