@sapudex/web-components 2.54.0 → 2.56.0

package/dist/ListItemBase.js

@@ -9,7 +9,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { UDExListItemSize, UDExListMode, UDExListStyleType } from "./types/List.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -90,16 +90,20 @@ let UDExListItemBase = UDExListItemBase_1 = class UDExListItemBase extends UI5El
         this._resizeHandler = this._onResize.bind(this);
         this.contentElement = null;
     }
-    onEnterDOM() {
+    onAfterRendering() {
         if (!this.collapsible) {
             return;
         }
         this.contentElement = this.shadowRoot?.querySelector(".udex-list__group-list__content");
         if (this.contentElement) {
-            ResizeHandler.register(this.contentElement, this._resizeHandler);
             this.setContentHeight();
         }
     }
+    onEnterDOM() {
+        if (this.contentElement && this.collapsible) {
+            ResizeHandler.register(this.contentElement, this._resizeHandler);
+        }
+    }
     onExitDOM() {
         if (this.contentElement && this.collapsible) {
             ResizeHandler.deregister(this.contentElement, this._resizeHandler);
@@ -248,7 +252,7 @@ __decorate([
 ], UDExListItemBase, "i18nBundle", void 0);
 UDExListItemBase = UDExListItemBase_1 = __decorate([
     customElement({
-        renderer: litRender,
+        renderer: jsxRenderer,
     })
     /**
      * Fired event when the user click on a first icon.

package/dist/ListItemBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemBase.js","sourceRoot":"","sources":["../src/ListItemBase.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { UDExListItemSize, UDExListMode, UDExListStyleType } from \"./types/List.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport translate from \"./utils/translate.js\";\nimport { COLLAPSE, EXPAND } from \"./generated/i18n/i18n-defaults.js\";\n\nexport type UDExListItemBaseEvents = {\n  \"first-icon-click\": UDExListItemBaseEventDetail,\n  \"second-icon-click\": UDExListItemBaseEventDetail,\n  \"accordion-icon-click\": UDExListItemBaseAccordionClickEventDetail,\n}\n\ntype UDExListItemBaseEventDetail = {\n  originalEvent: PointerEvent,\n  item: HTMLElement,\n}\n\ntype UDExListItemBaseAccordionClickEventDetail = {\n  collapsed: boolean;\n}\n\n/**\n * @class\n *\n * A class to serve as a foundation\n * for the <code>UDExListItem</code>,<code>UDExFilterMenuItem</code> and <code>UDExGroupHeaderBase</code> classes.\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @public\n */\n@customElement({\n  renderer: litRender,\n})\n\n/**\n * Fired event when the user click on a first icon.\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n * @public\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n */\n@event(\"first-icon-click\", { bubbles: true })\n/**\n * Fired event when the user click on a second icon.\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n * @public\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n */\n@event(\"second-icon-click\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n * @param { string } name\n * @param { boolean } expanded\n */\n@event(\"accordion-icon-click\", { bubbles: true })\n\nclass UDExListItemBase extends UI5Element {\n  eventDetails!: UDExListItemBaseEvents;\n\n  /**\n   * Defines the number of displayed rating symbols.\n   *\n   * @default 5\n   * @public\n   */\n  @property({ type: Number })\n    ratingMax: number = 5;\n\n  /**\n   * Defines the value of the rating.\n   * Use for rating indicator to represent aggregated review scores within list items\n   *\n   * @public\n   */\n  @property({ type: String })\n    rating?: string;\n\n  /**\n   * Defines the number of the rating.\n   * Use for the rating indicator\n   *\n   * @public\n   */\n  @property({ type: String })\n    ratingCount?: string;\n\n  /**\n   * The number of total votes.\n   * Use for the rating indicator\n   *\n   * @public\n   */\n  @property({ type: String })\n    totalCount?: string;\n\n  /**\n   * Defines the <code>label</code> for the item.\n   *\n   * @public\n   */\n  @property()\n    label!: string;\n\n  /**\n   * Defines whether a visual separator should be rendered after the item.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    divider!: boolean;\n\n  /**\n   * Defines whether <code> list item</code> is in disabled state.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the supportingText, displayed in the end of the item.\n   *\n   * @public\n   */\n  @property()\n    supportingText!: string;\n\n  /**\n   * Defines the selected state of the item.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    selected: boolean = false;\n\n  /**\n   * Defines whether the selection of a  list is displayed as partially selected.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    indeterminate?: boolean;\n\n  /**\n   * Defines the controlled state of the item.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    controlled?: boolean;\n\n  /**\n   * Defines the mode of the item.\n   *\n   * @default \"SingleSelect\"\n   * @public\n   */\n  @property()\n    mode: `${UDExListMode}` = UDExListMode.SingleSelect;\n\n  /**\n   * Defines the size of the item.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    size: `${UDExListItemSize}` = UDExListItemSize.Standard;\n\n  /**\n   * Defines the type of the item.\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n    type: `${UDExListStyleType}` = UDExListStyleType.None;\n\n  /**\n   * Defines the icon of the component.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String })\n    _icon: string = \"\";\n\n  /**\n   * Defines if grouping header can collapse/expand child elements.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    collapsible!: boolean;\n\n  /**\n   * Defines if collapsible grouping header is collapsed or expanded\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: Boolean })\n    collapsed!: boolean;\n\n  /**\n   * Defines if item is part of filtered list\n   *\n   * @default undefined\n   * @private\n   */\n  @property({ type: Boolean })\n    _filtered!: boolean;\n\n  /**\n   * When true, the host element carries role + ARIA state attributes directly\n   * (set by the outer template) so that aria-activedescendant works across shadow DOM.\n   * The inner [part=item] div is then rendered as role=\"presentation\".\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _useHostAriaRole: boolean = false;\n\n  /**\n   * Defines the tab index of the component.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String })\n    _tabIndex: string = \"\";\n\n  _resizeHandler: () => void;\n  contentElement: HTMLElement | null | undefined;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n    this.contentElement = null;\n  }\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onEnterDOM() {\n    if (!this.collapsible) {\n      return;\n    }\n    this.contentElement = this.shadowRoot?.querySelector<HTMLElement>(\".udex-list__group-list__content\");\n    if (this.contentElement) {\n      ResizeHandler.register(this.contentElement, this._resizeHandler);\n      this.setContentHeight();\n    }\n  }\n\n  onExitDOM(): void {\n    if (this.contentElement && this.collapsible) {\n      ResizeHandler.deregister(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  setContentHeight() {\n    this.style.setProperty(\"--udex-list-content-max-height\", `${this.contentElement?.scrollHeight || 0}px`);\n  }\n\n  _onResize(): void {\n    if (this.contentElement && this.collapsible && this.contentElement.scrollHeight > 0) {\n      this.setContentHeight();\n    }\n  }\n\n  _fireIconClickEvent(e: PointerEvent): void {\n    const target = e.target as HTMLElement;\n    const slot = target.getAttribute(\"slot\");\n    if (slot === \"firstIcon\") {\n      this.fireDecoratorEvent(\"first-icon-click\", {\n        originalEvent: e,\n        item: this,\n      });\n    } else if (slot === \"secondIcon\") {\n      this.fireDecoratorEvent(\"second-icon-click\", {\n        originalEvent: e,\n        item: this,\n      });\n    }\n  }\n\n  handleCollapseIconMouseDown(e: MouseEvent) {\n    e.stopPropagation();\n  }\n\n  handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.fireDecoratorEvent(\"accordion-icon-click\", { collapsed: this.collapsed });\n  }\n\n  get _effectiveTabIndex(): string {\n    if (this.disabled) {\n      return \"-1\";\n    }\n    return this._tabIndex;\n  }\n\n  get numberOfItem(): number {\n    return [...this.parentNode!.children].indexOf(this) + 1;\n  }\n\n  get isGroup(): boolean {\n    return false;\n  }\n\n  get modeRadioGroup(): boolean {\n    return this.mode === UDExListMode.RadioGroup;\n  }\n\n  get modeMultiSelect(): boolean {\n    return this.mode === UDExListMode.MultiSelect;\n  }\n\n  get modeSingleSelect(): boolean {\n    return this.mode === UDExListMode.SingleSelect;\n  }\n\n  get modeMultiSelectOrRadioGroup(): boolean {\n    return this.modeMultiSelect || this.modeRadioGroup;\n  }\n\n  get typeNumber(): boolean {\n    return this.type === UDExListStyleType.Number;\n  }\n\n  get typeCircle(): boolean {\n    return this.type === UDExListStyleType.Circle;\n  }\n\n  get typeIcon(): boolean {\n    return this.type === UDExListStyleType.Icon;\n  }\n\n  get ariaControlsId(): string {\n    return `udex-list-${this._id}__group-content`;\n  }\n\n  get expandButtonAccessibleName(): string {\n    return this.collapsed ? translate(UDExListItemBase, EXPAND) : translate(UDExListItemBase, COLLAPSE);\n  }\n\n  get expanded(): boolean {\n    return !this.collapsed;\n  }\n\n  get hasRating(): boolean {\n    return !!this.rating;\n  }\n}\n\nexport default UDExListItemBase;\nexport type { UDExListItemBaseEventDetail, UDExListItemBaseAccordionClickEventDetail };\n"]}
+{"version":3,"file":"ListItemBase.js","sourceRoot":"","sources":["../src/ListItemBase.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { UDExListItemSize, UDExListMode, UDExListStyleType } from \"./types/List.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport translate from \"./utils/translate.js\";\nimport { COLLAPSE, EXPAND } from \"./generated/i18n/i18n-defaults.js\";\n\nexport type UDExListItemBaseEvents = {\n  \"first-icon-click\": UDExListItemBaseEventDetail,\n  \"second-icon-click\": UDExListItemBaseEventDetail,\n  \"accordion-icon-click\": UDExListItemBaseAccordionClickEventDetail,\n}\n\ntype UDExListItemBaseEventDetail = {\n  originalEvent: PointerEvent,\n  item: HTMLElement,\n}\n\ntype UDExListItemBaseAccordionClickEventDetail = {\n  collapsed: boolean;\n}\n\n/**\n * @class\n *\n * A class to serve as a foundation\n * for the <code>UDExListItem</code>,<code>UDExFilterMenuItem</code> and <code>UDExGroupHeaderBase</code> classes.\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @public\n */\n@customElement({\n  renderer: jsxRenderer,\n})\n\n/**\n * Fired event when the user click on a first icon.\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n * @public\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n */\n@event(\"first-icon-click\", { bubbles: true })\n/**\n * Fired event when the user click on a second icon.\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n * @public\n * @param { PointerEvent } originalEvent The original event object\n * @param { HTMLElement } item The list item\n */\n@event(\"second-icon-click\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n * @param { string } name\n * @param { boolean } expanded\n */\n@event(\"accordion-icon-click\", { bubbles: true })\n\nclass UDExListItemBase extends UI5Element {\n  eventDetails!: UDExListItemBaseEvents;\n\n  /**\n   * Defines the number of displayed rating symbols.\n   *\n   * @default 5\n   * @public\n   */\n  @property({ type: Number })\n    ratingMax: number = 5;\n\n  /**\n   * Defines the value of the rating.\n   * Use for rating indicator to represent aggregated review scores within list items\n   *\n   * @public\n   */\n  @property({ type: String })\n    rating?: string;\n\n  /**\n   * Defines the number of the rating.\n   * Use for the rating indicator\n   *\n   * @public\n   */\n  @property({ type: String })\n    ratingCount?: string;\n\n  /**\n   * The number of total votes.\n   * Use for the rating indicator\n   *\n   * @public\n   */\n  @property({ type: String })\n    totalCount?: string;\n\n  /**\n   * Defines the <code>label</code> for the item.\n   *\n   * @public\n   */\n  @property()\n    label!: string;\n\n  /**\n   * Defines whether a visual separator should be rendered after the item.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    divider!: boolean;\n\n  /**\n   * Defines whether <code> list item</code> is in disabled state.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the supportingText, displayed in the end of the item.\n   *\n   * @public\n   */\n  @property()\n    supportingText!: string;\n\n  /**\n   * Defines the selected state of the item.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    selected: boolean = false;\n\n  /**\n   * Defines whether the selection of a  list is displayed as partially selected.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    indeterminate?: boolean;\n\n  /**\n   * Defines the controlled state of the item.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    controlled?: boolean;\n\n  /**\n   * Defines the mode of the item.\n   *\n   * @default \"SingleSelect\"\n   * @public\n   */\n  @property()\n    mode: `${UDExListMode}` = UDExListMode.SingleSelect;\n\n  /**\n   * Defines the size of the item.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    size: `${UDExListItemSize}` = UDExListItemSize.Standard;\n\n  /**\n   * Defines the type of the item.\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n    type: `${UDExListStyleType}` = UDExListStyleType.None;\n\n  /**\n   * Defines the icon of the component.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String })\n    _icon: string = \"\";\n\n  /**\n   * Defines if grouping header can collapse/expand child elements.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    collapsible!: boolean;\n\n  /**\n   * Defines if collapsible grouping header is collapsed or expanded\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: Boolean })\n    collapsed!: boolean;\n\n  /**\n   * Defines if item is part of filtered list\n   *\n   * @default undefined\n   * @private\n   */\n  @property({ type: Boolean })\n    _filtered!: boolean;\n\n  /**\n   * When true, the host element carries role + ARIA state attributes directly\n   * (set by the outer template) so that aria-activedescendant works across shadow DOM.\n   * The inner [part=item] div is then rendered as role=\"presentation\".\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _useHostAriaRole: boolean = false;\n\n  /**\n   * Defines the tab index of the component.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String })\n    _tabIndex: string = \"\";\n\n  _resizeHandler: () => void;\n  contentElement: HTMLElement | null | undefined;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n    this.contentElement = null;\n  }\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onAfterRendering() {\n    if (!this.collapsible) {\n      return;\n    }\n    this.contentElement = this.shadowRoot?.querySelector<HTMLElement>(\".udex-list__group-list__content\");\n    if (this.contentElement) {\n      this.setContentHeight();\n    }\n  }\n\n  onEnterDOM() {\n    if (this.contentElement && this.collapsible) {\n      ResizeHandler.register(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  onExitDOM(): void {\n    if (this.contentElement && this.collapsible) {\n      ResizeHandler.deregister(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  setContentHeight() {\n    this.style.setProperty(\"--udex-list-content-max-height\", `${this.contentElement?.scrollHeight || 0}px`);\n  }\n\n  _onResize(): void {\n    if (this.contentElement && this.collapsible && this.contentElement.scrollHeight > 0) {\n      this.setContentHeight();\n    }\n  }\n\n  _fireIconClickEvent(e: PointerEvent): void {\n    const target = e.target as HTMLElement;\n    const slot = target.getAttribute(\"slot\");\n    if (slot === \"firstIcon\") {\n      this.fireDecoratorEvent(\"first-icon-click\", {\n        originalEvent: e,\n        item: this,\n      });\n    } else if (slot === \"secondIcon\") {\n      this.fireDecoratorEvent(\"second-icon-click\", {\n        originalEvent: e,\n        item: this,\n      });\n    }\n  }\n\n  handleCollapseIconMouseDown(e: MouseEvent) {\n    e.stopPropagation();\n  }\n\n  handleCollapseIconClick(e: MouseEvent | KeyboardEvent) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.fireDecoratorEvent(\"accordion-icon-click\", { collapsed: this.collapsed });\n  }\n\n  get _effectiveTabIndex(): string {\n    if (this.disabled) {\n      return \"-1\";\n    }\n    return this._tabIndex;\n  }\n\n  get numberOfItem(): number {\n    return [...this.parentNode!.children].indexOf(this) + 1;\n  }\n\n  get isGroup(): boolean {\n    return false;\n  }\n\n  get modeRadioGroup(): boolean {\n    return this.mode === UDExListMode.RadioGroup;\n  }\n\n  get modeMultiSelect(): boolean {\n    return this.mode === UDExListMode.MultiSelect;\n  }\n\n  get modeSingleSelect(): boolean {\n    return this.mode === UDExListMode.SingleSelect;\n  }\n\n  get modeMultiSelectOrRadioGroup(): boolean {\n    return this.modeMultiSelect || this.modeRadioGroup;\n  }\n\n  get typeNumber(): boolean {\n    return this.type === UDExListStyleType.Number;\n  }\n\n  get typeCircle(): boolean {\n    return this.type === UDExListStyleType.Circle;\n  }\n\n  get typeIcon(): boolean {\n    return this.type === UDExListStyleType.Icon;\n  }\n\n  get ariaControlsId(): string {\n    return `udex-list-${this._id}__group-content`;\n  }\n\n  get expandButtonAccessibleName(): string {\n    return this.collapsed ? translate(UDExListItemBase, EXPAND) : translate(UDExListItemBase, COLLAPSE);\n  }\n\n  get expanded(): boolean {\n    return !this.collapsed;\n  }\n\n  get hasRating(): boolean {\n    return !!this.rating;\n  }\n}\n\nexport default UDExListItemBase;\nexport type { UDExListItemBaseEventDetail, UDExListItemBaseAccordionClickEventDetail };\n"]}

package/dist/ListItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExListItem from "./ListItem.js";
+export default function ListItemTemplate(this: UDExListItem): import("@ui5/webcomponents-base").JSX.Element;

package/dist/ListItemTemplate.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import UDExCheckbox from "./Checkbox.js";
+import UDExRadioButton from "./RadioButton.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExAvatar from "./Avatar.js";
+import UDExStatusBadge from "./StatusBadge.js";
+import UDExRatingIndicator from "./RatingIndicator.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+function ContentList() {
+    return (_jsxs("div", { class: "udex-list__content-wrap", ...{ "_id": this._id }, "aria-labelledby": `${this._id}-invisibleText`, "aria-label": this.accessibleListItemName, children: [this.flag && (_jsx("div", { class: "udex-list__flag-wrap", children: _jsx("span", { class: "udex-list__flag", style: { backgroundPosition: this.flagPosition } }) })), this.typeNumber && _jsxs("span", { class: "udex-list__number", children: [this.numberOfItem, "."] }), this.typeCircle && _jsx("span", { class: "udex-list__circle", children: "\u2022" }), this.typeIcon && (_jsx(Icon, { name: this._icon, class: "udex-list__icon", "accessible-role": "presentation", "aria-hidden": "true", part: "icon" })), this.image && (_jsxs(UDExAvatar, { class: "udex-list__avatar", part: "avatar", shape: this.imageShape, size: this.imageSize, children: [this.imageBadgeState && (_jsx(UDExStatusBadge, { slot: "badge", "value-state": this.imageBadgeState, size: this.imageSize })), _jsx("img", { src: this.image, alt: this.imageAlt })] })), _jsxs("div", { class: "udex-list__content", part: "content", children: [this.label ? (_jsxs(_Fragment, { children: [_jsxs("div", { class: "udex-list__text-holder", children: [_jsx("span", { part: "title", ...{ innerHTML: this.label } }), this.supportingText && (_jsx("span", { class: "udex-list__supporting-text", part: "supporting", children: this.supportingText })), _jsx("slot", { part: "content" }), this.hasRating && (_jsx(UDExRatingIndicator, { "aria-label": this.ratingAriaLabel, value: this.rating !== undefined ? Number(this.rating) : undefined, "rating-count": this.ratingCount, "total-count": this.totalCount, max: this.ratingMax, display: this._displayRating, disabled: true, readonly: true }))] }), this.additionalText && (_jsx("div", { class: "udex-list__add-text", part: "additional-text", children: this.additionalText })), _jsxs("div", { class: "udex-list__btn-wrap", children: [this.hasFirstIcon && _jsx("slot", { name: "firstIcon", onClick: this._fireIconClickEvent }), this.hasSecondIcon && _jsx("slot", { name: "secondIcon", onClick: this._fireIconClickEvent })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { class: "udex-list__text-holder", children: [_jsx("slot", { part: "content" }), this.supportingText && (_jsx("span", { class: "udex-list__supporting-text", part: "supporting", children: this.supportingText })), this.hasRating && (_jsx(UDExRatingIndicator, { "aria-label": this.ratingAriaLabel, value: this.rating !== undefined ? Number(this.rating) : undefined, "rating-count": this.ratingCount, "total-count": this.totalCount, max: this.ratingMax, display: this._displayRating, disabled: true, readonly: true }))] }), this.additionalText && (_jsx("div", { class: "udex-list__add-text", part: "additional-text", children: this.additionalText })), _jsxs("div", { class: "udex-list__btn-wrap", children: [this.hasFirstIcon && _jsx("slot", { name: "firstIcon", onClick: this._fireIconClickEvent }), this.hasSecondIcon && _jsx("slot", { name: "secondIcon", onClick: this._fireIconClickEvent })] })] })), this.collapsible && (_jsx("div", { class: "udex-list__group-heading__icon-wrapper", children: _jsx(UDExButton, { class: "udex-list__group-heading__icon", size: UDExButtonSize.Small, design: UDExButtonDesign.Tertiary, onMouseDown: this.handleCollapseIconMouseDown, onClick: this.handleCollapseIconClick, tabindex: -1, "accessible-name": this.expandButtonAccessibleName, ...{ "mode": "Interactive" }, icon: slimArrowRight }) }))] }), _jsx("div", { class: "hidden", id: `${this._id}-invisibleText`, children: this.accessibleListItemName }), _jsx("div", { class: "hidden", id: `${this._id}-invisibleText-describedby`, children: this.itemState })] }));
+}
+export default function ListItemTemplate() {
+    return (_jsxs(_Fragment, { children: [this.modeSelected && (_jsxs("div", { part: "item", tabIndex: Number(this._effectiveTabIndex), "aria-disabled": this._ariaDisabled, class: this.className, role: this.roleItem, "aria-checked": this.ariaCheckedValue, "aria-selected": this.ariaSelectedValue, "aria-expanded": this.ariaExpandedValue, onFocusIn: this.handleFocusIn, onFocusOut: this.handleFocusOut, onClick: this.handleItemClick, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, ...{ divider: this.divider, "_id": this._id }, "data-selected": this.selected, "aria-describedby": this.itemDescribedBy, children: [this.modeMultiSelect && (_jsx(UDExCheckbox, { class: "udex-list__checkbox", part: "checkbox", tabindex: -1, indeterminate: this.indeterminate, "accessible-name": `checkbox ${this.stateAccessibleName}`, checked: this.selected, disabled: this.disabled, "aria-hidden": this.checkboxAriaHidden ? "true" : undefined })), this.modeRadioGroup && (_jsx(UDExRadioButton, { class: "udex-list__radio", part: "radio", tabindex: -1, "accessible-name": `radio ${this.stateAccessibleName}`, checked: this.selected, disabled: this.disabled })), ContentList.call(this)] })), this.modeSingleContent && (_jsx("div", { part: "item", role: this.roleItem, "aria-selected": this.selected, class: this.className, children: ContentList.call(this) }))] }));
+}
+//# sourceMappingURL=ListItemTemplate.js.map

package/dist/ListItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemTemplate.js","sourceRoot":"","sources":["../src/ListItemTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type UDExListItem from \"./ListItem.js\";\nimport UDExCheckbox from \"./Checkbox.js\";\nimport UDExRadioButton from \"./RadioButton.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExAvatar from \"./Avatar.js\";\nimport UDExStatusBadge from \"./StatusBadge.js\";\nimport UDExRatingIndicator from \"./RatingIndicator.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nfunction ContentList(this: UDExListItem) {\n  return (\n    <div\n      class=\"udex-list__content-wrap\"\n      {...({ \"_id\": this._id } as object)}\n      aria-labelledby={`${this._id}-invisibleText`}\n      aria-label={this.accessibleListItemName}>\n      {this.flag && (\n        <div class=\"udex-list__flag-wrap\">\n          <span class=\"udex-list__flag\" style={{ backgroundPosition: this.flagPosition }}></span>\n        </div>\n      )}\n      {this.typeNumber && <span class=\"udex-list__number\">{this.numberOfItem}.</span>}\n      {this.typeCircle && <span class=\"udex-list__circle\">&#x2022;</span>}\n      {this.typeIcon && (\n        <Icon\n          name={this._icon}\n          class=\"udex-list__icon\"\n          accessible-role=\"presentation\"\n          aria-hidden=\"true\"\n          part=\"icon\"\n        />\n      )}\n      {this.image && (\n        <UDExAvatar\n          class=\"udex-list__avatar\"\n          part=\"avatar\"\n          shape={this.imageShape}\n          size={this.imageSize}>\n          {this.imageBadgeState && (\n            <UDExStatusBadge\n              slot=\"badge\"\n              value-state={this.imageBadgeState}\n              size={this.imageSize}\n            />\n          )}\n          <img src={this.image} alt={this.imageAlt} />\n        </UDExAvatar>\n      )}\n      <div class=\"udex-list__content\" part=\"content\">\n        {this.label ? (\n          <>\n            <div class=\"udex-list__text-holder\">\n              <span part=\"title\" {...({ innerHTML: this.label } as object)}></span>\n              {this.supportingText && (\n                <span class=\"udex-list__supporting-text\" part=\"supporting\">{this.supportingText}</span>\n              )}\n              <slot part=\"content\"></slot>\n              {this.hasRating && (\n                <UDExRatingIndicator\n                  aria-label={this.ratingAriaLabel}\n                  value={this.rating !== undefined ? Number(this.rating) : undefined}\n                  rating-count={this.ratingCount}\n                  total-count={this.totalCount}\n                  max={this.ratingMax}\n                  display={this._displayRating}\n                  disabled\n                  readonly\n                />\n              )}\n            </div>\n            {this.additionalText && (\n              <div class=\"udex-list__add-text\" part=\"additional-text\">{this.additionalText}</div>\n            )}\n            <div class=\"udex-list__btn-wrap\">\n              {this.hasFirstIcon && <slot name=\"firstIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n              {this.hasSecondIcon && <slot name=\"secondIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n            </div>\n          </>\n        ) : (\n          <>\n            <div class=\"udex-list__text-holder\">\n              <slot part=\"content\"></slot>\n              {this.supportingText && (\n                <span class=\"udex-list__supporting-text\" part=\"supporting\">{this.supportingText}</span>\n              )}\n              {this.hasRating && (\n                <UDExRatingIndicator\n                  aria-label={this.ratingAriaLabel}\n                  value={this.rating !== undefined ? Number(this.rating) : undefined}\n                  rating-count={this.ratingCount}\n                  total-count={this.totalCount}\n                  max={this.ratingMax}\n                  display={this._displayRating}\n                  disabled\n                  readonly\n                />\n              )}\n            </div>\n            {this.additionalText && (\n              <div class=\"udex-list__add-text\" part=\"additional-text\">{this.additionalText}</div>\n            )}\n            <div class=\"udex-list__btn-wrap\">\n              {this.hasFirstIcon && <slot name=\"firstIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n              {this.hasSecondIcon && <slot name=\"secondIcon\" onClick={this._fireIconClickEvent as EventListener}></slot>}\n            </div>\n          </>\n        )}\n        {this.collapsible && (\n          <div class=\"udex-list__group-heading__icon-wrapper\">\n            <UDExButton\n              class=\"udex-list__group-heading__icon\"\n              size={UDExButtonSize.Small}\n              design={UDExButtonDesign.Tertiary}\n              onMouseDown={this.handleCollapseIconMouseDown}\n              onClick={this.handleCollapseIconClick as EventListener}\n              tabindex={-1}\n              accessible-name={this.expandButtonAccessibleName}\n              {...({ \"mode\": \"Interactive\" } as object)}\n              icon={slimArrowRight}\n            />\n          </div>\n        )}\n      </div>\n      <div class=\"hidden\" id={`${this._id}-invisibleText`}>{this.accessibleListItemName}</div>\n      <div class=\"hidden\" id={`${this._id}-invisibleText-describedby`}>{this.itemState}</div>\n    </div>\n  );\n}\n\nexport default function ListItemTemplate(this: UDExListItem) {\n  return (\n    <>\n      {this.modeSelected && (\n        <div\n          part=\"item\"\n          tabIndex={Number(this._effectiveTabIndex)}\n          aria-disabled={this._ariaDisabled}\n          class={this.className}\n          role={this.roleItem as AriaRole}\n          aria-checked={this.ariaCheckedValue}\n          aria-selected={this.ariaSelectedValue}\n          aria-expanded={this.ariaExpandedValue}\n          onFocusIn={this.handleFocusIn}\n          onFocusOut={this.handleFocusOut}\n          onClick={this.handleItemClick}\n          onMouseDown={this.handleMouseDown}\n          onMouseUp={this.handleMouseUp}\n          onKeyUp={this.handleKeyUp}\n          onKeyDown={this.handleKeyDown}\n          {...({ divider: this.divider, \"_id\": this._id } as object)}\n          data-selected={this.selected}\n          aria-describedby={this.itemDescribedBy}>\n          {this.modeMultiSelect && (\n            <UDExCheckbox\n              class=\"udex-list__checkbox\"\n              part=\"checkbox\"\n              tabindex={-1}\n              indeterminate={this.indeterminate}\n              accessible-name={`checkbox ${this.stateAccessibleName}`}\n              checked={this.selected}\n              disabled={this.disabled}\n              aria-hidden={this.checkboxAriaHidden ? \"true\" : undefined}\n            />\n          )}\n          {this.modeRadioGroup && (\n            <UDExRadioButton\n              class=\"udex-list__radio\"\n              part=\"radio\"\n              tabindex={-1}\n              accessible-name={`radio ${this.stateAccessibleName}`}\n              checked={this.selected}\n              disabled={this.disabled}\n            />\n          )}\n          {ContentList.call(this)}\n        </div>\n      )}\n      {this.modeSingleContent && (\n        <div\n          part=\"item\"\n          role={this.roleItem as AriaRole}\n          aria-selected={this.selected}\n          class={this.className}>\n          {ContentList.call(this)}\n        </div>\n      )}\n    </>\n  );\n}\n"]}

package/dist/ListSelectAll.js

@@ -7,14 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var UDExListSelectAll_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import { UDExListMode } from "./types/List.js";
 import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
-import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit.js";
-import UDExListItem from "./ListItem.js";
+import ListSelectAllTemplate from "./ListSelectAllTemplate.js";
 import translate from "./utils/translate.js";
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
@@ -82,10 +81,10 @@ __decorate([
 UDExListSelectAll = UDExListSelectAll_1 = __decorate([
     customElement({
         tag: "udex-list-select-all",
-        renderer: litRender,
+        renderer: jsxRenderer,
+        languageAware: true,
         styles: ListGroupHeaderCss,
         template: ListSelectAllTemplate,
-        dependencies: [UDExListItem],
     })
     /**
        * Fired when the user clicks on the Select All header.

package/dist/ListSelectAll.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListSelectAll.js","sourceRoot":"","sources":["../src/ListSelectAll.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,uBAAuB,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AACvF,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAE3E,MAAM,cAAc,GAAW,8BAA8B,CAAC;AAC9D,MAAM,cAAc,GAAW,uBAAuB,CAAC;AAMvD;;;;;;;;;;;;;;;;GAgBG;AAgBH,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,uBAAuB;IAQrD,oBAAoB;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACnC,CAAC;QACD,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;YACpC,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;IACL,CAAC;IAED,8BAA8B;QAC5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,kBAAkB,CAAC,CAAgB;QACjC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;QACD,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,YAAY,CAAC,WAAW,CAAC;IAClC,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;QACtE,OAAO,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,mBAAiB,EAAE,UAAU,CAAC,CAAC;IAC1E,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,GAAG,cAAc,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC1D,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,cAAc,CAAC;IACxB,CAAC;CACF,CAAA;AA9CQ;IADN,IAAI,CAAC,yBAAyB,CAAC;2CACF;AAN1B,iBAAiB;IAftB,aAAa,CAAC;QACb,GAAG,EAAE,sBAAsB;QAC3B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,kBAAkB;QAC1B,QAAQ,EAAE,qBAAqB;QAC/B,YAAY,EAAE,CAAC,YAAY,CAAC;KAC7B,CAAC;IACF;;;;;SAKK;;IACJ,KAAK,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAEjC,iBAAiB,CAoDtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport { UDExListMode } from \"./types/List.js\";\nimport { SELECT_ALL } from \"./generated/i18n/i18n-defaults.js\";\nimport ListSelectAllTemplate from \"./generated/templates/ListSelectAllTemplate.lit.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport type { UDExListItemBaseEvents } from \"./ListItemBase.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport ListGroupHeaderCss from \"./generated/themes/ListGroupHeader.css.js\";\n\nconst selectAllClass: string = \"udex-list__header-select-all\";\nconst groupListClass: string = \"udex-list__group-list\";\n\ntype UDExListSelectAllSelectAllEventDetail = {\n  item: HTMLElement\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-list-select-all</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ListSelectAll.js\";</code>\n *\n * @constructor\n * @extends UDExListGroupHeaderBase\n * @public\n */\n@customElement({\n  tag: \"udex-list-select-all\",\n  renderer: litRender,\n  styles: ListGroupHeaderCss,\n  template: ListSelectAllTemplate,\n  dependencies: [UDExListItem],\n})\n/**\n   * Fired when the user clicks on the Select All header.\n   *\n   * @public\n   * @param {HTMLElement} item The select all item\n   */\n@event(\"select-all\", { bubbles: true })\n\nclass UDExListSelectAll extends UDExListGroupHeaderBase {\n  eventDetails!: {\n    \"select-all\": UDExListSelectAllSelectAllEventDetail,\n  } & UDExListItemBaseEvents;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  handleSelectAllPress() {\n    if (!this.controlled) {\n      this.handleSelectionGroupState();\n    }\n    this.fireDecoratorEvent(\"select-all\", {\n      item: this,\n    });\n  }\n\n  handleSelectAllGroupItemsPress() {\n    if (!this.controlled) {\n      this.handleHeaderState();\n    }\n  }\n\n  handleKeyDownPress(e: KeyboardEvent) {\n    if (isSpace(e)) {\n      e.preventDefault();\n    }\n    if (isSpace(e) || isEnter(e)) {\n      this.handleSelectAllPress();\n    }\n  }\n\n  get isSelectAllHeader() {\n    return true;\n  }\n\n  get multiselectMode(): UDExListMode {\n    return UDExListMode.MultiSelect;\n  }\n\n  get selectAllLabel(): string {\n    const hasLabel = this.label !== \"undefined\" && this.label?.length > 0;\n    return hasLabel ? this.label : translate(UDExListSelectAll, SELECT_ALL);\n  }\n\n  get additionalClassName(): string {\n    return `${selectAllClass} ${this._additionalClassName}`;\n  }\n\n  get groupListClassName(): string {\n    return groupListClass;\n  }\n}\n\nUDExListSelectAll.define();\n\nexport default UDExListSelectAll;\nexport type { UDExListSelectAllSelectAllEventDetail };\n"]}
+{"version":3,"file":"ListSelectAll.js","sourceRoot":"","sources":["../src/ListSelectAll.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,uBAAuB,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAE/D,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,SAAS;AACT,OAAO,kBAAkB,MAAM,2CAA2C,CAAC;AAE3E,MAAM,cAAc,GAAW,8BAA8B,CAAC;AAC9D,MAAM,cAAc,GAAW,uBAAuB,CAAC;AAMvD;;;;;;;;;;;;;;;;GAgBG;AAgBH,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,uBAAuB;IAQrD,oBAAoB;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACnC,CAAC;QACD,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;YACpC,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;IACL,CAAC;IAED,8BAA8B;QAC5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,kBAAkB,CAAC,CAAgB;QACjC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;QACD,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,YAAY,CAAC,WAAW,CAAC;IAClC,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;QACtE,OAAO,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,mBAAiB,EAAE,UAAU,CAAC,CAAC;IAC1E,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,GAAG,cAAc,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC1D,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,cAAc,CAAC;IACxB,CAAC;CACF,CAAA;AA9CQ;IADN,IAAI,CAAC,yBAAyB,CAAC;2CACF;AAN1B,iBAAiB;IAftB,aAAa,CAAC;QACb,GAAG,EAAE,sBAAsB;QAC3B,QAAQ,EAAE,WAAW;QACrB,aAAa,EAAE,IAAI;QACnB,MAAM,EAAE,kBAAkB;QAC1B,QAAQ,EAAE,qBAAqB;KAChC,CAAC;IACF;;;;;SAKK;;IACJ,KAAK,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAEjC,iBAAiB,CAoDtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport { UDExListMode } from \"./types/List.js\";\nimport { SELECT_ALL } from \"./generated/i18n/i18n-defaults.js\";\nimport ListSelectAllTemplate from \"./ListSelectAllTemplate.js\";\nimport type { UDExListItemBaseEvents } from \"./ListItemBase.js\";\nimport translate from \"./utils/translate.js\";\n\n// Styles\nimport ListGroupHeaderCss from \"./generated/themes/ListGroupHeader.css.js\";\n\nconst selectAllClass: string = \"udex-list__header-select-all\";\nconst groupListClass: string = \"udex-list__group-list\";\n\ntype UDExListSelectAllSelectAllEventDetail = {\n  item: HTMLElement\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-list-select-all</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ListSelectAll.js\";</code>\n *\n * @constructor\n * @extends UDExListGroupHeaderBase\n * @public\n */\n@customElement({\n  tag: \"udex-list-select-all\",\n  renderer: jsxRenderer,\n  languageAware: true,\n  styles: ListGroupHeaderCss,\n  template: ListSelectAllTemplate,\n})\n/**\n   * Fired when the user clicks on the Select All header.\n   *\n   * @public\n   * @param {HTMLElement} item The select all item\n   */\n@event(\"select-all\", { bubbles: true })\n\nclass UDExListSelectAll extends UDExListGroupHeaderBase {\n  eventDetails!: {\n    \"select-all\": UDExListSelectAllSelectAllEventDetail,\n  } & UDExListItemBaseEvents;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  handleSelectAllPress() {\n    if (!this.controlled) {\n      this.handleSelectionGroupState();\n    }\n    this.fireDecoratorEvent(\"select-all\", {\n      item: this,\n    });\n  }\n\n  handleSelectAllGroupItemsPress() {\n    if (!this.controlled) {\n      this.handleHeaderState();\n    }\n  }\n\n  handleKeyDownPress(e: KeyboardEvent) {\n    if (isSpace(e)) {\n      e.preventDefault();\n    }\n    if (isSpace(e) || isEnter(e)) {\n      this.handleSelectAllPress();\n    }\n  }\n\n  get isSelectAllHeader() {\n    return true;\n  }\n\n  get multiselectMode(): UDExListMode {\n    return UDExListMode.MultiSelect;\n  }\n\n  get selectAllLabel(): string {\n    const hasLabel = this.label !== \"undefined\" && this.label?.length > 0;\n    return hasLabel ? this.label : translate(UDExListSelectAll, SELECT_ALL);\n  }\n\n  get additionalClassName(): string {\n    return `${selectAllClass} ${this._additionalClassName}`;\n  }\n\n  get groupListClassName(): string {\n    return groupListClass;\n  }\n}\n\nUDExListSelectAll.define();\n\nexport default UDExListSelectAll;\nexport type { UDExListSelectAllSelectAllEventDetail };\n"]}

package/dist/ListSelectAllTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExListSelectAll from "./ListSelectAll.js";
+export default function ListSelectAllTemplate(this: UDExListSelectAll): import("@ui5/webcomponents-base").JSX.Element;

package/dist/ListSelectAllTemplate.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UDExListItem from "./ListItem.js";
+export default function ListSelectAllTemplate() {
+    return (_jsx("div", { part: "item", class: "udex-list__group", role: "group", "aria-labelledby": "group-select-all", children: _jsxs("div", { role: "listbox", "aria-label": "select-all-group", class: this.groupListClassName, "onui5-item-press": this.handleSelectAllGroupItemsPress, children: [_jsx(UDExListItem, { role: "group", part: "group-item", "accessible-role": "option", mode: this.multiselectMode, onClick: this.handleSelectAllPress, class: this.className, selected: this.selected, "aria-current": this.selected, indeterminate: this.indeterminate, controlled: this.controlled, onKeyDown: this.handleKeyDownPress, "_tab-index": Number(this._effectiveTabIndex), "_additional-class-name": this.additionalClassName, supportingText: this.supportingText, divider: true, children: this.selectAllLabel }), _jsx("slot", {})] }) }));
+}
+//# sourceMappingURL=ListSelectAllTemplate.js.map

package/dist/ListSelectAllTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSelectAllTemplate.js","sourceRoot":"","sources":["../src/ListSelectAllTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,YAAY,MAAM,eAAe,CAAC;AAEzC,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC3C,OAAO,CACL,cACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,OAAO,qBACI,kBAAkB,YAClC,eACE,IAAI,EAAC,SAAS,gBACH,kBAAkB,EAC7B,KAAK,EAAE,IAAI,CAAC,kBAAkB,sBACZ,IAAI,CAAC,8BAA8B,aACrD,KAAC,YAAY,IACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,YAAY,qBACD,QAAQ,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,IAAI,CAAC,QAAQ,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,kBAAkB,gBACtB,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,4BACnB,IAAI,CAAC,mBAAmB,EAChD,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,OAAO,kBACN,IAAI,CAAC,cAAc,GACP,EACf,gBAAa,IACT,GACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type UDExListSelectAll from \"./ListSelectAll.js\";\nimport UDExListItem from \"./ListItem.js\";\n\nexport default function ListSelectAllTemplate(this: UDExListSelectAll) {\n  return (\n    <div\n      part=\"item\"\n      class=\"udex-list__group\"\n      role=\"group\"\n      aria-labelledby=\"group-select-all\">\n      <div\n        role=\"listbox\"\n        aria-label=\"select-all-group\"\n        class={this.groupListClassName}\n        onui5-item-press={this.handleSelectAllGroupItemsPress}>\n        <UDExListItem\n          role=\"group\"\n          part=\"group-item\"\n          accessible-role=\"option\"\n          mode={this.multiselectMode}\n          onClick={this.handleSelectAllPress}\n          class={this.className}\n          selected={this.selected}\n          aria-current={this.selected}\n          indeterminate={this.indeterminate}\n          controlled={this.controlled}\n          onKeyDown={this.handleKeyDownPress}\n          _tab-index={Number(this._effectiveTabIndex)}\n          _additional-class-name={this.additionalClassName}\n          supportingText={this.supportingText}\n          divider>\n          {this.selectAllLabel}\n        </UDExListItem>\n        <slot></slot>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/ListTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExList from "./List.js";
+export default function ListTemplate(this: UDExList): import("@ui5/webcomponents-base").JSX.Element;

package/dist/ListTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+export default function ListTemplate() {
+    return (_jsxs(_Fragment, { children: [this.modeSelected && (_jsx("div", { class: "udex-list-root", onKeyDown: this.handleKeyDown, style: { height: this.holderHeight }, "onui5-item-press": this.handleItemPress, "onui5-header-press": this.handleItemPress, children: _jsxs("div", { class: "udex-list__scroll-container", children: [HeaderText.call(this), _jsx("span", { id: `${this._id}-mode-label`, class: "udex-list__hidden-text", children: this.ariaLabelModeText }), _jsx("div", { id: "udex-list", class: "udex-list", role: this.effectiveAccessibleRole, "aria-labelledby": this.ariaLabelledBy, "aria-multiselectable": this._listAriaMultiSelectable, "aria-busy": (this.ariaBusy ?? undefined), children: _jsx("slot", {}) })] }) })), this.modeSingleContent && (_jsxs(_Fragment, { children: [HeaderText.call(this), _jsx("div", { id: "udex-list", class: "udex-list", role: this.singleContentRole, "aria-label": this.singleContentAriaLabel, "aria-busy": (this.ariaBusy ?? undefined), children: _jsx("slot", {}) })] }))] }));
+}
+function HeaderText() {
+    if (!this.headerText) {
+        return null;
+    }
+    return (_jsx("header", { id: `${this._id}-mode-label`, class: "udex-list__header-text", part: "header", children: this.headerText }));
+}
+//# sourceMappingURL=ListTemplate.js.map

package/dist/ListTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListTemplate.js","sourceRoot":"","sources":["../src/ListTemplate.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,YAAY;IAClC,OAAO,CACL,8BACG,IAAI,CAAC,YAAY,IAAI,CACpB,cACE,KAAK,EAAC,gBAAgB,EACtB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,sBAClB,IAAI,CAAC,eAAe,wBAClB,IAAI,CAAC,eAAe,YACxC,eAAK,KAAK,EAAC,6BAA6B,aACrC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACtB,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,aAAa,EAAE,KAAK,EAAC,wBAAwB,YAC/D,IAAI,CAAC,iBAAiB,GAClB,EACP,cACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,IAAI,CAAC,uBAAmC,qBAC7B,IAAI,CAAC,cAAc,0BACd,IAAI,CAAC,wBAA8C,eAC9D,CAAC,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAiC,YACvE,gBAAa,GACT,IACF,GACF,CACP,EACA,IAAI,CAAC,iBAAiB,IAAI,CACzB,8BACG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACtB,cACE,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,IAAI,CAAC,iBAA6B,gBAC5B,IAAI,CAAC,sBAAsB,eAC5B,CAAC,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAiC,YACvE,gBAAa,GACT,IACL,CACJ,IACA,CACJ,CAAC;AACJ,CAAC;AAED,SAAS,UAAU;IACjB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,CACL,iBACE,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,aAAa,EAC5B,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,QAAQ,YACZ,IAAI,CAAC,UAAU,GACT,CACV,CAAC;AACJ,CAAC","sourcesContent":["import type UDExList from \"./List.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/types.js\";\n\nexport default function ListTemplate(this: UDExList) {\n  return (\n    <>\n      {this.modeSelected && (\n        <div\n          class=\"udex-list-root\"\n          onKeyDown={this.handleKeyDown}\n          style={{ height: this.holderHeight }}\n          onui5-item-press={this.handleItemPress}\n          onui5-header-press={this.handleItemPress}>\n          <div class=\"udex-list__scroll-container\">\n            {HeaderText.call(this)}\n            <span id={`${this._id}-mode-label`} class=\"udex-list__hidden-text\">\n              {this.ariaLabelModeText}\n            </span>\n            <div\n              id=\"udex-list\"\n              class=\"udex-list\"\n              role={this.effectiveAccessibleRole as AriaRole}\n              aria-labelledby={this.ariaLabelledBy}\n              aria-multiselectable={this._listAriaMultiSelectable as \"true\" | undefined}\n              aria-busy={(this.ariaBusy ?? undefined) as \"true\" | \"false\" | undefined}>\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      )}\n      {this.modeSingleContent && (\n        <>\n          {HeaderText.call(this)}\n          <div\n            id=\"udex-list\"\n            class=\"udex-list\"\n            role={this.singleContentRole as AriaRole}\n            aria-label={this.singleContentAriaLabel}\n            aria-busy={(this.ariaBusy ?? undefined) as \"true\" | \"false\" | undefined}>\n            <slot></slot>\n          </div>\n        </>\n      )}\n    </>\n  );\n}\n\nfunction HeaderText(this: UDExList) {\n  if (!this.headerText) {\n    return null;\n  }\n  return (\n    <header\n      id={`${this._id}-mode-label`}\n      class=\"udex-list__header-text\"\n      part=\"header\">\n      {this.headerText}\n    </header>\n  );\n}\n"]}

package/dist/MastheadShell.d.ts

@@ -297,6 +297,9 @@ declare class UDExMastheadShell extends UI5Element {
     _rootHolder: HTMLElement | null | undefined;
     _shouldHandleResize: boolean;
     _isVisible: boolean;
+    _handleSuggestionOpenedBound: () => void;
+    _handleSuggestionClosedBound: () => void;
+    _bodyBackdropEl: HTMLElement | null;
     constructor();
     onBeforeRendering(): void;
     onAfterRendering(): void;
@@ -360,6 +363,10 @@ declare class UDExMastheadShell extends UI5Element {
      * @public
      */
     openSearch(): void;
+    private _getBackdropEl;
+    private _showSearchBackdrop;
+    private _hideSearchBackdrop;
+    handleBackdropClick(): void;
     /**
      * Open the mobile menu panel.
      * @public

package/dist/MastheadShell.js

@@ -28,6 +28,7 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
 import translate from "./utils/translate.js";
+import ensureSearchBackdropStyles from "./utils/searchBackdrop.js";
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 const canvasContentFont = "14px '72 Brand Variable'";
@@ -63,8 +64,11 @@ export var UDExMastheadVariable;
 let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI5Element {
     constructor() {
         super();
+        this._bodyBackdropEl = null;
         this._handleResizeBound = this._handleResize.bind(this);
         this._handleWindowResizeBound = this._handleWindowResize.bind(this);
+        this._handleSuggestionOpenedBound = this._showSearchBackdrop.bind(this);
+        this._handleSuggestionClosedBound = this._hideSearchBackdrop.bind(this);
     }
     onBeforeRendering() {
         if (this.isMobileMenuMode) {
@@ -89,6 +93,8 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
     onEnterDOM() {
         ResizeHandler.register(this, this._handleResizeBound);
         window.addEventListener("resize", this._handleWindowResizeBound);
+        this.addEventListener("suggestion-popover-opened", this._handleSuggestionOpenedBound);
+        this.addEventListener("suggestion-popover-closed", this._handleSuggestionClosedBound);
         if (isDesktop()) {
             this.setAttribute("desktop", "");
         }
@@ -96,6 +102,10 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
     onExitDOM() {
         ResizeHandler.deregister(this, this._handleResizeBound);
         window.removeEventListener("resize", this._handleWindowResizeBound);
+        this.removeEventListener("suggestion-popover-opened", this._handleSuggestionOpenedBound);
+        this.removeEventListener("suggestion-popover-closed", this._handleSuggestionClosedBound);
+        this._bodyBackdropEl?.remove();
+        this._bodyBackdropEl = null;
     }
     _handleWindowResize() {
         if (this.isMobileMenuMode) {
@@ -421,6 +431,34 @@ let UDExMastheadShell = UDExMastheadShell_1 = class UDExMastheadShell extends UI
         }
         this.fireMastheadEvent("search-opened");
     }
+    _getBackdropEl() {
+        if (!this._bodyBackdropEl) {
+            ensureSearchBackdropStyles(this.ownerDocument);
+            const el = this.ownerDocument.createElement("div");
+            el.className = "udex-search-backdrop";
+            el.addEventListener("click", () => this.handleBackdropClick());
+            this.ownerDocument.body.appendChild(el);
+            this._bodyBackdropEl = el;
+        }
+        return this._bodyBackdropEl;
+    }
+    _showSearchBackdrop() {
+        if (!this.showSearchByDefault && this.isMobileMenuMode) {
+            return;
+        }
+        const backdrop = this._getBackdropEl();
+        const top = this.getBoundingClientRect().bottom;
+        backdrop.style.top = `${top}px`;
+        backdrop.style.display = "block";
+    }
+    _hideSearchBackdrop() {
+        if (this._bodyBackdropEl) {
+            this._bodyBackdropEl.style.display = "none";
+        }
+    }
+    handleBackdropClick() {
+        this._desktopSearch?.onClosePopover();
+    }
     /**
      * Open the mobile menu panel.
      * @public