@sapudex/web-components 2.33.0 → 2.34.0

package/src/MastheadMenu.hbs

@@ -77,6 +77,41 @@
             <li>
                 {{#if this.isDivider}}
                     <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                {{else if this.subItems}}
+                    {{#if this.url}}
+                        <udex-masthead-menu-item
+                            part="menu-item"
+                            accessible-role="link"
+                            exportparts="menu-item"
+                            @click="{{../../../handleMenuItemClick}}"
+                            url="{{this.url}}"
+                            label="{{this.title}}"
+                            class="udex-masthead-menu__sub-category">
+                        </udex-masthead-menu-item>
+                    {{else}}
+                        <span class="udex-masthead-menu__sub-category">{{this.title}}</span>
+                    {{/if}}
+                    <ul class="udex-masthead-menu__sub-list" aria-label="{{this.title}}">
+                        {{#each this.subItems}}
+                            <li>
+                                {{#if this.isDivider}}
+                                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
+                                {{else}}
+                                    <udex-masthead-menu-item
+                                        part="menu-item"
+                                        accessible-role="link"
+                                        exportparts="menu-item"
+                                        exportparts="badge"
+                                        @click="{{../../../../handleMenuItemClick}}"
+                                        badge="{{this.badge}}"
+                                        ?external-link="{{this.externalLink}}"
+                                        url="{{this.url}}"
+                                        label="{{this.title}}">
+                                    </udex-masthead-menu-item>
+                                {{/if}}
+                            </li>
+                        {{/each}}
+                    </ul>
                 {{else}}
                     <udex-masthead-menu-item
                         part="menu-item"

package/src/MastheadMenu.ts

@@ -29,9 +29,10 @@ const rowClass = "udex-masthead-menu_with-one-column";
 
 export type Item = {
   title: string;
-  url: string;
+  url?: string;
   externalLink: boolean;
   isDivider?: boolean;
+  subItems?: Item[];
 };
 
 export type SubMenuLinkItem = {

package/src/MastheadMobileMenu.hbs

@@ -205,17 +205,48 @@
         </li>
     {{/if}}
     {{#each _category.items}}
-        {{#if this.url}}
+        {{#if this.subItems}}
             <li class="udex-masthead-mobile-menu__list-item" role="none">
-                <udex-masthead-menu-item
-                    part="menu-item"
-                    @click="{{../handleMobileCategoryItemEvent}}"
-                    label="{{this.title}}"
-                    url="{{this.url}}"
-                    third-level
-                    has-border>
-                </udex-masthead-menu-item>
+                {{#if this.url}}
+                    <udex-masthead-menu-item
+                        part="menu-item"
+                        @click="{{../handleMobileCategoryItemEvent}}"
+                        label="{{this.title}}"
+                        url="{{this.url}}"
+                        class="udex-masthead-mobile-menu__sub-category"
+                        third-level>
+                    </udex-masthead-menu-item>
+                {{else}}
+                    <span class="udex-masthead-mobile-menu__sub-category">{{this.title}}</span>
+                {{/if}}
+                <ul class="udex-masthead-mobile-menu__sub-list" aria-label="{{this.title}}">
+                    {{#each this.subItems}}
+                        {{#if this.url}}
+                            <li class="udex-masthead-mobile-menu__list-item" role="none">
+                                <udex-masthead-menu-item
+                                    part="menu-item"
+                                    @click="{{../../handleMobileCategoryItemEvent}}"
+                                    label="{{this.title}}"
+                                    url="{{this.url}}"
+                                    third-level>
+                                </udex-masthead-menu-item>
+                            </li>
+                        {{/if}}
+                    {{/each}}
+                </ul>
             </li>
+        {{else}}
+            {{#if this.url}}
+                <li class="udex-masthead-mobile-menu__list-item" role="none">
+                    <udex-masthead-menu-item
+                        part="menu-item"
+                        @click="{{../handleMobileCategoryItemEvent}}"
+                        label="{{this.title}}"
+                        url="{{this.url}}"
+                        third-level>
+                    </udex-masthead-menu-item>
+                </li>
+            {{/if}}
         {{/if}}
     {{/each}}
 {{/inline}}

package/src/SearchableListBase.hbs

@@ -62,6 +62,10 @@
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
+                                rating="{{this.rating}}"
+                                total-count="{{this.totalCount}}"
+                                rating-count="{{this.ratingCount}}"
+                                rating-max="{{this.ratingMax}}"
                                 label="{{this.label}}">
                                 {{{this.innerHTML}}}
                             </udex-list-item>
@@ -99,6 +103,10 @@
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
+                                rating="{{this.rating}}"
+                                total-count="{{this.totalCount}}"
+                                rating-count="{{this.ratingCount}}"
+                                rating-max="{{this.ratingMax}}"
                                 label="{{this.label}}">
                                 {{{this.innerHTML}}}
                             </udex-list-item>
@@ -118,6 +126,10 @@
                     ?controlled="{{this.controlled}}"
                     ?divider="{{this.divider}}"
                     ?selected="{{this.item.selected}}"
+                    rating="{{this.item.rating}}"
+                    total-count="{{this.item.totalCount}}"
+                    rating-count="{{this.item.ratingCount}}"
+                    rating-max="{{this.item.ratingMax}}"
                     label="{{this.item.label}}"
                     accessible-role="{{../listItemRole}}">
                     {{{this.item.innerHTML}}}

package/src/SearchableListBase.ts

@@ -14,8 +14,9 @@ import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import type UDExList from "./List.js";
 import type UDExListItem from "./ListItem.js";
 import type UDExFilterMenuItem from "./FilterMenuItem.js";
+import type UDExSelectBoxItem from "./SelectBoxItem.js";
 import { SHOW_SEARCH_AFTER_COUNT, UDExPopoverPart } from "./types/SearchableListBase.js";
-import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
+import { NO_MATCHES_FOUND, RESULT_RETURNED, STARS } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
 
 export type UDExItemFromList = UDExListItemBase | UDExListGroupHeaderBase | null | undefined;
@@ -403,6 +404,10 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   checkAndUpdateLabel(item: UDExListItemBase | UDExListGroupHeaderBase, str: string): boolean {
+    if (item.ratingCount) {
+      return this.isIncludes(item.ratingCount, str);
+    }
+
     if (!item.label) {
       console.warn("A label property is required for the item");
       return false;
@@ -597,7 +602,7 @@ class UDExSearchableListBase extends UI5Element {
     content.style.maxHeight = this.height || "";
   }
 
-  _setItemsModeAndControl(items: Array<UDExFilterMenuItem>) {
+  _setItemsModeAndControl(items: Array<UDExFilterMenuItem | UDExSelectBoxItem>) {
     items.forEach(item => {
       item.mode = this.mode;
       item.controlled = this.isControlled;
@@ -617,6 +622,10 @@ class UDExSearchableListBase extends UI5Element {
     return translate(UDExSearchableListBase, RESULT_RETURNED);
   }
 
+  get startsText(): string {
+    return translate(UDExSearchableListBase, STARS);
+  }
+
   get isListEmpty(): boolean {
     return this._filteredItems.length === 0;
   }

package/src/SelectBase.ts

@@ -11,7 +11,7 @@ import type UDExList from "./List.js";
 import type UDExSearch from "./Search.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
+import { COUNTRY_SELECT, STARS } from "./generated/i18n/i18n-defaults.js";
 import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
 import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
@@ -508,7 +508,9 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   setSelectOption() {
-    this._selectedOption = this.selectedItems[0]?.label || "";
+    const label = this.selectedItems[0]?.label;
+    const ratingLabel = `${this.selectedItems[0]?.ratingCount} ${translate(UDExSearchableListBase, STARS)}`;
+    this._selectedOption = label || ratingLabel || "";
   }
 
   updatePopoverWidth() {

package/src/SelectBox.hbs

@@ -18,11 +18,19 @@
                      _skip-more-button-focus>
                      {{#each selectedItems}}
                          {{#unless this.isGroup}}
-                             <udex-tag
-                               text="{{this.label}}"
-                               id="{{this._id}}"
-                               icon="decline">
-                             </udex-tag>
+                             {{#if label}}
+                                 <udex-tag
+                                     text="{{this.label}}"
+                                     id="{{this._id}}"
+                                     icon="decline">
+                                 </udex-tag>
+                             {{else}}
+                                 <udex-tag
+                                     text="{{this.rating}}&nbsp;{{../this.startsText}}"
+                                     id="{{this._id}}"
+                                     icon="decline">
+                                 </udex-tag>
+                             {{/if}}
                          {{/unless}}
                      {{/each}}
                  </udex-tag-group>

package/src/generated/templates/ListItemTemplate.lit.ts

@@ -5,41 +5,45 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type ListItem from "../../ListItem.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.modeSelected ? block1.call(this, context, tags, suffix) : undefined }${ this.modeSingleContent ? block19.call(this, context, tags, suffix) : undefined } `;}
-function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" role="${ifDefined(this.roleItem)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?divider="${this.divider}" _id="${ifDefined(this._id)}" data-selected="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.itemDescribedBy)}">${ this.modeMultiSelect ? block2.call(this, context, tags, suffix) : undefined }${ this.modeRadioGroup ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block4.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block5.call(this, context, tags, suffix) : undefined }${ this.image ? block6.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block8.call(this, context, tags, suffix) : block13.call(this, context, tags, suffix) }${ this.collapsible ? block18.call(this, context, tags, suffix) : undefined }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
+function block0 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.modeSelected ? block1.call(this, context, tags, suffix) : undefined }${ this.modeSingleContent ? block21.call(this, context, tags, suffix) : undefined } `;}
+function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" role="${ifDefined(this.roleItem)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?divider="${this.divider}" _id="${ifDefined(this._id)}" data-selected="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.itemDescribedBy)}">${ this.modeMultiSelect ? block2.call(this, context, tags, suffix) : undefined }${ this.modeRadioGroup ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block4.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block5.call(this, context, tags, suffix) : undefined }${ this.image ? block6.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block8.call(this, context, tags, suffix) : block14.call(this, context, tags, suffix) }${ this.collapsible ? block20.call(this, context, tags, suffix) : undefined }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
 function block2 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-checkbox", tags, suffix)} class="udex-list__checkbox" part="checkbox" tabindex="-1" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-checkbox", tags, suffix)}>` : html`<udex-checkbox class="udex-list__checkbox" part="checkbox" tabindex="-1" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-checkbox>`;}
 function block3 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-radio-button", tags, suffix)} class="udex-list__radio" part="radio" tabindex="-1" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-radio-button", tags, suffix)}>` : html`<udex-radio-button class="udex-list__radio" part="radio" tabindex="-1" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-radio-button>`;}
 function block4 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
 function block5 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></ui5-icon>`;}
 function block6 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-avatar", tags, suffix)} class="udex-list__avatar" shape="${ifDefined(this.imageShape)}" size="${ifDefined(this.imageSize)}" part="avatar">${ this.imageBadgeState ? block7.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></${scopeTag("udex-avatar", tags, suffix)}>` : html`<udex-avatar class="udex-list__avatar" shape="${ifDefined(this.imageShape)}" size="${ifDefined(this.imageSize)}" part="avatar">${ this.imageBadgeState ? block7.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
 function block7 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-badge", tags, suffix)} slot="badge" value-state="${ifDefined(this.imageBadgeState)}" size="${ifDefined(this.imageSize)}"></${scopeTag("udex-status-badge", tags, suffix)}>` : html`<udex-status-badge slot="badge" value-state="${ifDefined(this.imageBadgeState)}" size="${ifDefined(this.imageSize)}"></udex-status-badge>`;}
-function block8 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><span part="title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block9.call(this, context, tags, suffix) : undefined }<slot part="content"></slot></div>${ this.additionalText ? block10.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block11.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block12.call(this, context, tags, suffix) : undefined }</div>`;}
+function block8 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><span part="title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block9.call(this, context, tags, suffix) : undefined }<slot part="content"></slot>${ this.hasRating ? block10.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block11.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block12.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block13.call(this, context, tags, suffix) : undefined }</div>`;}
 function block9 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
-function block10 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
-function block11 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block12 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block13 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block14.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block15.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block16.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block17.call(this, context, tags, suffix) : undefined }</div>`;}
-function block14 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
-function block15 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
-function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block17 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block18 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div>` : html`<div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></udex-button></div>`;}
-function block19 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" role="${ifDefined(this.roleItem)}" aria-selected="${ifDefined(this.selected)}" class="${ifDefined(this.className)}"><div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block20.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block21.call(this, context, tags, suffix) : undefined }${ this.image ? block22.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block24.call(this, context, tags, suffix) : block29.call(this, context, tags, suffix) }${ this.collapsible ? block34.call(this, context, tags, suffix) : undefined }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
-function block20 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
-function block21 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></ui5-icon>`;}
-function block22 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-avatar", tags, suffix)} class="udex-list__avatar" shape="${ifDefined(this.imageShape)}" size="${ifDefined(this.imageSize)}" part="avatar">${ this.imageBadgeState ? block23.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></${scopeTag("udex-avatar", tags, suffix)}>` : html`<udex-avatar class="udex-list__avatar" shape="${ifDefined(this.imageShape)}" size="${ifDefined(this.imageSize)}" part="avatar">${ this.imageBadgeState ? block23.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
-function block23 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-badge", tags, suffix)} slot="badge" value-state="${ifDefined(this.imageBadgeState)}" size="${ifDefined(this.imageSize)}"></${scopeTag("udex-status-badge", tags, suffix)}>` : html`<udex-status-badge slot="badge" value-state="${ifDefined(this.imageBadgeState)}" size="${ifDefined(this.imageSize)}"></udex-status-badge>`;}
-function block24 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><span part="title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block25.call(this, context, tags, suffix) : undefined }<slot part="content"></slot></div>${ this.additionalText ? block26.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block27.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block28.call(this, context, tags, suffix) : undefined }</div>`;}
-function block25 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
-function block26 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
-function block27 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block28 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block29 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block30.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block31.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block32.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block33.call(this, context, tags, suffix) : undefined }</div>`;}
-function block30 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
-function block31 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
-function block32 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block33 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
-function block34 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div>` : html`<div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></udex-button></div>`;}
+function block10 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
+function block11 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
+function block12 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block13 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block14 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block15.call(this, context, tags, suffix) : undefined }${ this.hasRating ? block16.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block17.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block18.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block19.call(this, context, tags, suffix) : undefined }</div>`;}
+function block15 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
+function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
+function block17 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
+function block18 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block19 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block20 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div>` : html`<div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></udex-button></div>`;}
+function block21 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" role="${ifDefined(this.roleItem)}" aria-selected="${ifDefined(this.selected)}" class="${ifDefined(this.className)}"><div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block22.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block23.call(this, context, tags, suffix) : undefined }${ this.image ? block24.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block26.call(this, context, tags, suffix) : block32.call(this, context, tags, suffix) }${ this.collapsible ? block38.call(this, context, tags, suffix) : undefined }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
+function block22 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
+function block23 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></ui5-icon>`;}
+function block24 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-avatar", tags, suffix)} class="udex-list__avatar" shape="${ifDefined(this.imageShape)}" size="${ifDefined(this.imageSize)}" part="avatar">${ this.imageBadgeState ? block25.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></${scopeTag("udex-avatar", tags, suffix)}>` : html`<udex-avatar class="udex-list__avatar" shape="${ifDefined(this.imageShape)}" size="${ifDefined(this.imageSize)}" part="avatar">${ this.imageBadgeState ? block25.call(this, context, tags, suffix) : undefined }<img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
+function block25 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-badge", tags, suffix)} slot="badge" value-state="${ifDefined(this.imageBadgeState)}" size="${ifDefined(this.imageSize)}"></${scopeTag("udex-status-badge", tags, suffix)}>` : html`<udex-status-badge slot="badge" value-state="${ifDefined(this.imageBadgeState)}" size="${ifDefined(this.imageSize)}"></udex-status-badge>`;}
+function block26 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><span part="title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block27.call(this, context, tags, suffix) : undefined }<slot part="content"></slot>${ this.hasRating ? block28.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block29.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block30.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block31.call(this, context, tags, suffix) : undefined }</div>`;}
+function block27 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
+function block28 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
+function block29 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
+function block30 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block31 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block32 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block33.call(this, context, tags, suffix) : undefined }${ this.hasRating ? block34.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block35.call(this, context, tags, suffix) : undefined }<div class="udex-list__btn-wrap">${ this.hasFirstIcon ? block36.call(this, context, tags, suffix) : undefined }${ this.hasSecondIcon ? block37.call(this, context, tags, suffix) : undefined }</div>`;}
+function block33 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
+function block34 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-rating-indicator", tags, suffix)} aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></${scopeTag("udex-rating-indicator", tags, suffix)}>` : html`<udex-rating-indicator aria-label="${ifDefined(this.ratingAriaLabel)}" value="${ifDefined(this.rating)}" rating-count="${ifDefined(this.ratingCount)}" total-count="${ifDefined(this.totalCount)}" max="${ifDefined(this.ratingMax)}" display="${ifDefined(this._displayRating)}" disabled readonly></udex-rating-indicator>`;}
+function block35 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
+function block36 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block37 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon" @click=${this._fireIconClickEvent}></slot>`;}
+function block38 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div>` : html`<div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" @mousedown="${this.handleCollapseIconMouseDown}" @click="${this.handleCollapseIconClick}" mode="Interactive" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" class="udex-list__group-heading__icon" icon="slim-arrow-right"></udex-button></div>`;}
 
 function template(this: ListItem) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/MastheadMenuTemplate.lit.ts

@@ -16,7 +16,14 @@ function block7 (this: MastheadMenu, context: UI5Element, tags: string[], suffix
 function block8 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} id="category-${ifDefined(item.categoryId)}" type="Heading" part="menu-item" exportparts="menu-item" label="${ifDefined(item.category)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item id="category-${ifDefined(item.categoryId)}" type="Heading" part="menu-item" exportparts="menu-item" label="${ifDefined(item.category)}" has-border></udex-masthead-menu-item>`;}
 function block9 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li>${ item.isDivider ? block10.call(this, context, tags, suffix, item, index) : block11.call(this, context, tags, suffix, item, index) }</li>`;}
 function block10 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-divider", tags, suffix)} class="udex-masthead-menu__item-divider"></${scopeTag("udex-divider", tags, suffix)}>` : html`<udex-divider class="udex-masthead-menu__item-divider"></udex-divider>`;}
-function block11 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" accessible-role="link" exportparts="menu-item" exportparts="badge" @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" accessible-role="link" exportparts="menu-item" exportparts="badge" @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}"></udex-masthead-menu-item>`;}
+function block11 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.subItems ? block12.call(this, context, tags, suffix, item, index) : block18.call(this, context, tags, suffix, item, index) }`;}
+function block12 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.url ? block13.call(this, context, tags, suffix, item, index) : block14.call(this, context, tags, suffix, item, index) }<ul class="udex-masthead-menu__sub-list" aria-label="${ifDefined(item.title)}">${ repeat(item.subItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block15.call(this, context, tags, suffix, item, index)) }</ul>`;}
+function block13 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" accessible-role="link" exportparts="menu-item" @click="${this.handleMenuItemClick}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" class="udex-masthead-menu__sub-category"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" accessible-role="link" exportparts="menu-item" @click="${this.handleMenuItemClick}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" class="udex-masthead-menu__sub-category"></udex-masthead-menu-item>`;}
+function block14 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<span class="udex-masthead-menu__sub-category">${ifDefined(item.title)}</span>`;}
+function block15 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li>${ item.isDivider ? block16.call(this, context, tags, suffix, item, index) : block17.call(this, context, tags, suffix, item, index) }</li>`;}
+function block16 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-divider", tags, suffix)} class="udex-masthead-menu__item-divider"></${scopeTag("udex-divider", tags, suffix)}>` : html`<udex-divider class="udex-masthead-menu__item-divider"></udex-divider>`;}
+function block17 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" accessible-role="link" exportparts="menu-item" exportparts="badge" @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" accessible-role="link" exportparts="menu-item" exportparts="badge" @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}"></udex-masthead-menu-item>`;}
+function block18 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" accessible-role="link" exportparts="menu-item" exportparts="badge" @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" accessible-role="link" exportparts="menu-item" exportparts="badge" @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}"></udex-masthead-menu-item>`;}
 
 function template(this: MastheadMenu) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/MastheadMobileMenuTemplate.lit.ts

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type MastheadMobileMenu from "../../MastheadMobileMenu.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-mobile-menu"><div class="udex-masthead-mobile-menu__nav-holder">${ this.hasSearchSlot ? block1.call(this, context, tags, suffix) : undefined }<ul class="udex-masthead-mobile-menu__list" role="menu" @keydown="${this.handlePressKey}">${ this.showNavigation ? block2.call(this, context, tags, suffix) : undefined }${ this._showCategories ? block6.call(this, context, tags, suffix) : undefined }${ this._showCategoryItems ? block20.call(this, context, tags, suffix) : undefined }</ul></div>${ this.showExploreBtn ? block24.call(this, context, tags, suffix) : undefined }</nav> `;}
+function block0 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-mobile-menu"><div class="udex-masthead-mobile-menu__nav-holder">${ this.hasSearchSlot ? block1.call(this, context, tags, suffix) : undefined }<ul class="udex-masthead-mobile-menu__list" role="menu" @keydown="${this.handlePressKey}">${ this.showNavigation ? block2.call(this, context, tags, suffix) : undefined }${ this._showCategories ? block6.call(this, context, tags, suffix) : undefined }${ this._showCategoryItems ? block20.call(this, context, tags, suffix) : undefined }</ul></div>${ this.showExploreBtn ? block30.call(this, context, tags, suffix) : undefined }</nav> `;}
 function block1 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-mobile-menu__list-search"><slot name="search"></slot></div>`;}
 function block2 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }`;}
 function block3 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-mobile-menu__list-item" role="none">${ item.subItems ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }</li>`;}
@@ -27,9 +27,15 @@ function block18 (this: MastheadMobileMenu, context: UI5Element, tags: string[],
 function block19 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} id="${index}" @click="${this.handleMobileItemEvent}" label="${ifDefined(item.category)}" part="menu-item" type="Button" second-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item id="${index}" @click="${this.handleMobileItemEvent}" label="${ifDefined(item.category)}" part="menu-item" type="Button" second-level has-border></udex-masthead-menu-item>`;}
 function block20 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-haspopup="true" has-border icon-start is-back is-back-to-categories></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ this._category.url ? block21.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block22.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-haspopup="true" has-border icon-start is-back is-back-to-categories></udex-masthead-menu-item></li>${ this._category.url ? block21.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block22.call(this, context, tags, suffix, item, index)) }`;}
 function block21 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" third-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" third-level has-border></udex-masthead-menu-item></li>`;}
-function block22 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.url ? block23.call(this, context, tags, suffix, item, index) : undefined }`;}
-function block23 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level has-border></udex-masthead-menu-item></li>`;}
-function block24 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" accessible-role-text="button" aria-haspopup="true" type="Button" first-level-btn first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" accessible-role-text="button" aria-haspopup="true" type="Button" first-level-btn first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></udex-masthead-menu-item>`;}
+function block22 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.subItems ? block23.call(this, context, tags, suffix, item, index) : block28.call(this, context, tags, suffix, item, index) }`;}
+function block23 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-mobile-menu__list-item" role="none">${ item.url ? block24.call(this, context, tags, suffix, item, index) : block25.call(this, context, tags, suffix, item, index) }<ul class="udex-masthead-mobile-menu__sub-list" aria-label="${ifDefined(item.title)}">${ repeat(item.subItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block26.call(this, context, tags, suffix, item, index)) }</ul></li>`;}
+function block24 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" class="udex-masthead-mobile-menu__sub-category" third-level></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" class="udex-masthead-mobile-menu__sub-category" third-level></udex-masthead-menu-item>`;}
+function block25 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<span class="udex-masthead-mobile-menu__sub-category">${ifDefined(item.title)}</span>`;}
+function block26 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.url ? block27.call(this, context, tags, suffix, item, index) : undefined }`;}
+function block27 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level></udex-masthead-menu-item></li>`;}
+function block28 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.url ? block29.call(this, context, tags, suffix, item, index) : undefined }`;}
+function block29 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level></udex-masthead-menu-item></li>`;}
+function block30 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" accessible-role-text="button" aria-haspopup="true" type="Button" first-level-btn first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" accessible-role-text="button" aria-haspopup="true" type="Button" first-level-btn first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></udex-masthead-menu-item>`;}
 
 function template(this: MastheadMobileMenu) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/SearchableListBaseTemplate.lit.ts

@@ -14,10 +14,10 @@ function block5 (this: SearchableListBase, context: UI5Element, tags: string[],
 function block6 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.isGroup ? block7.call(this, context, tags, suffix, item, index) : block12.call(this, context, tags, suffix, item, index) }`;}
 function block7 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.item.isSelectAllHeader ? block8.call(this, context, tags, suffix, item, index) : block10.call(this, context, tags, suffix, item, index) }`;}
 function block8 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-select-all", tags, suffix)} _additional-class-name="${ifDefined(this.additionalClassName)}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" ?controlled="${item.item.controlled}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list-select-all", tags, suffix)}>` : html`<udex-list-select-all _additional-class-name="${ifDefined(this.additionalClassName)}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" ?controlled="${item.item.controlled}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</udex-list-select-all>`;}
-function block9 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} role="${ifDefined(this.listItemRole)}" data-role="${ifDefined(this.listItemRole)}" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}" supporting-text="${ifDefined(item.supportingText)}" additional-text="${ifDefined(item.additionalText)}" additional-text-state="${ifDefined(item.additionalTextState)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item role="${ifDefined(this.listItemRole)}" data-role="${ifDefined(this.listItemRole)}" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}" supporting-text="${ifDefined(item.supportingText)}" additional-text="${ifDefined(item.additionalText)}" additional-text-state="${ifDefined(item.additionalTextState)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
+function block9 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} role="${ifDefined(this.listItemRole)}" data-role="${ifDefined(this.listItemRole)}" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}" supporting-text="${ifDefined(item.supportingText)}" additional-text="${ifDefined(item.additionalText)}" additional-text-state="${ifDefined(item.additionalTextState)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" rating="${ifDefined(item.rating)}" total-count="${ifDefined(item.totalCount)}" rating-count="${ifDefined(item.ratingCount)}" rating-max="${ifDefined(item.ratingMax)}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item role="${ifDefined(this.listItemRole)}" data-role="${ifDefined(this.listItemRole)}" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}" supporting-text="${ifDefined(item.supportingText)}" additional-text="${ifDefined(item.additionalText)}" additional-text-state="${ifDefined(item.additionalTextState)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" rating="${ifDefined(item.rating)}" total-count="${ifDefined(item.totalCount)}" rating-count="${ifDefined(item.ratingCount)}" rating-max="${ifDefined(item.ratingMax)}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
 function block10 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-group-header", tags, suffix)} role="group" _additional-class-name="udex-searchable-list__header" class="${ifDefined(this.groupClassName)}" ?non-interactive="${item.item.nonInteractive}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" supporting-text="${ifDefined(item.item.supportingText)}" ?controlled="${item.item.controlled}" ?collapsible="${item.item.collapsible}" ?collapsed="${item.item.collapsed}" ?_filtered="${ifDefined(this._shouldFilterItems)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list-group-header", tags, suffix)}>` : html`<udex-list-group-header role="group" _additional-class-name="udex-searchable-list__header" class="${ifDefined(this.groupClassName)}" ?non-interactive="${item.item.nonInteractive}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" supporting-text="${ifDefined(item.item.supportingText)}" ?controlled="${item.item.controlled}" ?collapsible="${item.item.collapsible}" ?collapsed="${item.item.collapsed}" ?_filtered="${ifDefined(this._shouldFilterItems)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }</udex-list-group-header>`;}
-function block11 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" additional-text="${ifDefined(item.additionalText)}" additional-text-state="${ifDefined(item.additionalTextState)}" @ui5-first-icon-click="${ifDefined(item.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(item.fireSecondIconClickEvent)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" additional-text="${ifDefined(item.additionalText)}" additional-text-state="${ifDefined(item.additionalTextState)}" @ui5-first-icon-click="${ifDefined(item.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(item.fireSecondIconClickEvent)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
-function block12 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} role="none" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}" data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" additional-text="${ifDefined(item.item.additionalText)}" additional-text-state="${ifDefined(item.item.additionalTextState)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" label="${ifDefined(item.item.label)}" accessible-role="${ifDefined(this.listItemRole)}">${unsafeHTML(item.item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item role="none" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}" data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" additional-text="${ifDefined(item.item.additionalText)}" additional-text-state="${ifDefined(item.item.additionalTextState)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" label="${ifDefined(item.item.label)}" accessible-role="${ifDefined(this.listItemRole)}">${unsafeHTML(item.item.innerHTML)}</udex-list-item>`;}
+function block11 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" additional-text="${ifDefined(item.additionalText)}" additional-text-state="${ifDefined(item.additionalTextState)}" @ui5-first-icon-click="${ifDefined(item.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(item.fireSecondIconClickEvent)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" rating="${ifDefined(item.rating)}" total-count="${ifDefined(item.totalCount)}" rating-count="${ifDefined(item.ratingCount)}" rating-max="${ifDefined(item.ratingMax)}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" additional-text="${ifDefined(item.additionalText)}" additional-text-state="${ifDefined(item.additionalTextState)}" @ui5-first-icon-click="${ifDefined(item.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(item.fireSecondIconClickEvent)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" rating="${ifDefined(item.rating)}" total-count="${ifDefined(item.totalCount)}" rating-count="${ifDefined(item.ratingCount)}" rating-max="${ifDefined(item.ratingMax)}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
+function block12 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} role="none" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}" data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" additional-text="${ifDefined(item.item.additionalText)}" additional-text-state="${ifDefined(item.item.additionalTextState)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" rating="${ifDefined(item.item.rating)}" total-count="${ifDefined(item.item.totalCount)}" rating-count="${ifDefined(item.item.ratingCount)}" rating-max="${ifDefined(item.item.ratingMax)}" label="${ifDefined(item.item.label)}" accessible-role="${ifDefined(this.listItemRole)}">${unsafeHTML(item.item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item role="none" @ui5-first-icon-click="${ifDefined(this.fireFirstIconClickEvent)}" @ui5-second-icon-click="${ifDefined(this.fireSecondIconClickEvent)}" data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" additional-text="${ifDefined(item.item.additionalText)}" additional-text-state="${ifDefined(item.item.additionalTextState)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" rating="${ifDefined(item.item.rating)}" total-count="${ifDefined(item.item.totalCount)}" rating-count="${ifDefined(item.item.ratingCount)}" rating-max="${ifDefined(item.item.ratingMax)}" label="${ifDefined(item.item.label)}" accessible-role="${ifDefined(this.listItemRole)}">${unsafeHTML(item.item.innerHTML)}</udex-list-item>`;}
 
 function template(this: SearchableListBase) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;