@sapudex/web-components 0.192.4 → 0.224.0

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

@@ -11,7 +11,7 @@ function block3 (this: Footer, context: UI5Element, tags: string[], suffix: stri
 function block4 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-footer__contact">${ this.contactNumbersArray.length ? block5.call(this, context, tags, suffix) : undefined }${ this.contactUsLink ? block8.call(this, context, tags, suffix) : undefined }${ this.chatWithUsLink ? block9.call(this, context, tags, suffix) : undefined }</div>`;}
 function block5 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-footer__numbers"><div class="udex-footer__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-footer__icon" name="headset"></${scopeTag("ui5-icon", tags, suffix)}></div><div><div class="udex-footer__numbers-wrapper">${ repeat(this.contactNumbersArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</div>${ this.localCountryNumbersLink ? block7.call(this, context, tags, suffix) : undefined }</div></div>` : html`<div class="udex-footer__numbers"><div class="udex-footer__icon-container"><ui5-icon class="udex-footer__icon" name="headset"></ui5-icon></div><div><div class="udex-footer__numbers-wrapper">${ repeat(this.contactNumbersArray, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</div>${ this.localCountryNumbersLink ? block7.call(this, context, tags, suffix) : undefined }</div></div>`;}
 function block6 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div><span class="hidden" aria-hidden id="udex-footer__${index}_phone-label">${ifDefined(this.phoneNumberAccessibleName)}${ifDefined(item.country)} : ${ifDefined(item.number)}</span><p class="udex-footer__country">${ifDefined(item.country)}</p><a href="tel:${ifDefined(item.number)}" class="udex-footer__number" @click="${this._onContactPhoneClick}" aria-labelledby="udex-footer__${index}_phone-label">${ifDefined(item.number)}</a></div>`;}
-function block7 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<p class="udex-footer__remark">${ifDefined(this.completeListTitle)}<a href="${ifDefined(this.localCountryNumbersLink)}" @click="${this._onContactPhoneLocalNumbersClick}">${ifDefined(this.localCountryTitle)}.</a></p>`;}
+function block7 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<p class="udex-footer__remark">${ifDefined(this.completeListTitle)}<${scopeTag("udex-link", tags, suffix)} class="udex-footer__remark-link" @click="${this._onContactPhoneLocalNumbersClick}" href="${ifDefined(this.localCountryNumbersLink)}" design="Subtle">${ifDefined(this.localCountryTitle)}.</${scopeTag("udex-link", tags, suffix)}></p>` : html`<p class="udex-footer__remark">${ifDefined(this.completeListTitle)}<udex-link class="udex-footer__remark-link" @click="${this._onContactPhoneLocalNumbersClick}" href="${ifDefined(this.localCountryNumbersLink)}" design="Subtle">${ifDefined(this.localCountryTitle)}.</udex-link></p>`;}
 function block8 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-footer__contact-us"><div class="udex-footer__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-footer__icon" name="email"></${scopeTag("ui5-icon", tags, suffix)}></div><span class="hidden" aria-hidden id="udex-footer__contact-us-label">${ifDefined(this.contactUsAccessibleLabel)}</span><a href="${ifDefined(this.contactUsLink)}" class="udex-footer__contact-us-link" aria-labelledby="udex-footer__contact-us-label" @click="${this._onContactEmailClick}">${ifDefined(this.contactUsAccessibleName)}</a></div>` : html`<div class="udex-footer__contact-us"><div class="udex-footer__icon-container"><ui5-icon class="udex-footer__icon" name="email"></ui5-icon></div><span class="hidden" aria-hidden id="udex-footer__contact-us-label">${ifDefined(this.contactUsAccessibleLabel)}</span><a href="${ifDefined(this.contactUsLink)}" class="udex-footer__contact-us-link" aria-labelledby="udex-footer__contact-us-label" @click="${this._onContactEmailClick}">${ifDefined(this.contactUsAccessibleName)}</a></div>`;}
 function block9 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-footer__chat-with-us"><div class="udex-footer__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-footer__icon" name="discussion-2"></${scopeTag("ui5-icon", tags, suffix)}></div><a href="${ifDefined(this.chatWithUsLink)}" class="udex-footer__chat-with-us-link" @click="${this._onContactChatClick}">${ifDefined(this.chatWithUsAccessibleName)}</a></div>` : html`<div class="udex-footer__chat-with-us"><div class="udex-footer__icon-container"><ui5-icon class="udex-footer__icon" name="discussion-2"></ui5-icon></div><a href="${ifDefined(this.chatWithUsLink)}" class="udex-footer__chat-with-us-link" @click="${this._onContactChatClick}">${ifDefined(this.chatWithUsAccessibleName)}</a></div>`;}
 function block10 (this: Footer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-divider", tags, suffix)} class="udex-footer__divider"></${scopeTag("udex-divider", tags, suffix)}>` : html`<udex-divider class="udex-footer__divider"></udex-divider>`;}

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

@@ -4,8 +4,8 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type HeroBanner from "../../HeroBanner.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.heroBannerClasses)}" part="wrapper" style="background-color: ${ifDefined(this.wrapperBackgroundColor)}">${ this.hasBackgroundVideo ? block1.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div> `;}
-function block1 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown=${this._handleKeydown}><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click=${this._toggleMediaButton}><${scopeTag("ui5-icon", tags, suffix)} name=${ifDefined(this.mediaButtonIconName)}></${scopeTag("ui5-icon", tags, suffix)}></button></div>` : html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown=${this._handleKeydown}><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click=${this._toggleMediaButton}><ui5-icon name=${ifDefined(this.mediaButtonIconName)}></ui5-icon></button></div>`;}
+function block0 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.heroBannerClasses)}" part="wrapper" style="background-color: ${ifDefined(this.wrapperBackgroundColor)}; ${ifDefined(this.wrapperBackgroundImage)}">${ this.hasBackgroundVideo ? block1.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div> `;}
+function block1 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="${this._handleKeydown}"><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="${this._toggleMediaButton}"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.mediaButtonIconName)}"></${scopeTag("ui5-icon", tags, suffix)}></button></div>` : html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="${this._handleKeydown}"><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="${this._toggleMediaButton}"><ui5-icon name="${ifDefined(this.mediaButtonIconName)}"></ui5-icon></button></div>`;}
 function block2 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<picture><img loading="${ifDefined(this.backgroundImageLoadingStrategy)}" src="${ifDefined(this.backgroundImage)}" part="background-image" class="udex-hero-banner__background-image" alt="${ifDefined(this.backgroundImageLabel)}" /></picture>`;}
 function block3 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-hero-banner__container">${ this.hasCustomBackgroundPicture ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot>${ this.hasAdditionalContent ? block7.call(this, context, tags, suffix) : undefined }</div></div>`;}
 function block4 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="backgroundPicture"></slot>`;}

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Link from "../../Link.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Link, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="ui5-link-root ${ifDefined(this.linkClass)}" role="${ifDefined(this.effectiveAccRole)}" href="${ifDefined(this.parsedRef)}" target="${ifDefined(this.target)}" rel="${ifDefined(this._rel)}" tabindex="${ifDefined(this.effectiveTabIndex)}" title="${ifDefined(this.title)}" ?disabled="${this.disabled}" aria-label="${ifDefined(this.ariaLabelText)}" aria-haspopup="${ifDefined(this._hasPopup)}" aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" @focusin=${this._onfocusin} @focusout=${this._onfocusout} @click=${this._onclick} @keydown=${this._onkeydown} @keyup=${this._onkeyup}>${ this.startIcon ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-link__content"><slot></slot></span>${ this.endIcon ? block2.call(this, context, tags, suffix) : undefined }${ this.hasLinkType ? block3.call(this, context, tags, suffix) : undefined }</a>`;}
+function block0 (this: Link, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="ui5-link-root ${ifDefined(this.linkClass)}" role="${ifDefined(this.effectiveAccRole)}" href="${ifDefined(this.parsedRef)}" target="${ifDefined(this.target)}" rel="${ifDefined(this._rel)}" tabindex="${ifDefined(this.effectiveTabIndex)}" title="${ifDefined(this.title)}" ?disabled="${this.disabled}" aria-label="${ifDefined(this.ariaLabelText)}" aria-haspopup="${ifDefined(this._hasPopup)}" aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" @focusin="${this._onfocusin}" @focusout="${this._onfocusout}" @click="${this._onclick}" @keydown="${this._onkeydown}" @keyup="${this._onkeyup}">${ this.hasStartIcon ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-link__content"><slot></slot></span>${ this.hasEndIcon ? block2.call(this, context, tags, suffix) : undefined }${ this.hasLinkType ? block3.call(this, context, tags, suffix) : undefined }</a>`;}
 function block1 (this: Link, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-link__icon udex-link__icon--icon-start" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-link__icon udex-link__icon--icon-start" name="${ifDefined(this.icon)}"></ui5-icon>`;}
 function block2 (this: Link, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-link__icon udex-link__icon--icon-end" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-link__icon udex-link__icon--icon-end" name="${ifDefined(this.icon)}"></ui5-icon>`;}
 function block3 (this: Link, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="ui5-hidden-text">${ifDefined(this.linkTypeText)}</span>`;}

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type ListGroupHeader from "../../ListGroupHeader.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" class="udex-list__group" role="group" aria-labelledby="group-heading"><ul class="udex-list__group-list" @ui5-item-press="${ifDefined(this.getHandleGroupItemsClick)}">${ this.modeMultiSelectOrRadioGroup ? block1.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }<slot></slot></ul></li> `;}
+function block0 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" class="udex-list__group" role="group" aria-labelledby="group-heading"><ul role="group" class="udex-list__group-list" @ui5-item-press="${ifDefined(this.getHandleGroupItemsClick)}">${ this.modeMultiSelectOrRadioGroup ? block1.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }<slot></slot></ul></li> `;}
 function block1 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNonActiveHeader ? block2.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }`;}
 function block2 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header id="group-heading" class="udex-list__inactive-header"><span class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block3.call(this, context, tags, suffix) : undefined }</header>`;}
 function block3 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ">${ifDefined(this.supportingText)}</span>`;}

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

@@ -4,7 +4,7 @@ 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 ? block16.call(this, context, tags, suffix) : undefined } `;}
+function block0 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.modeSelected ? block1.call(this, context, tags, suffix) : undefined }${ this.modeSingleContent ? block18.call(this, context, tags, suffix) : undefined } `;}
 function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" role="${ifDefined(this.roleItem)}" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" aria-selected="${ifDefined(this.selected)}" aria-current="${ifDefined(this.selected)}" ?divider="${this.divider}" _id="${ifDefined(this._id)}">${ 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.typeNumber ? block5.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block6.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block7.call(this, context, tags, suffix) : undefined }${ this.image ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block9.call(this, context, tags, suffix) : block11.call(this, context, tags, suffix) }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div></div></li>`;}
 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" ?aria-checked="${this.selected}" ?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" ?aria-checked="${this.selected}" ?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" ?aria-checked="${this.selected}" 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" ?aria-checked="${this.selected}" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-radio-button>`;}
@@ -15,24 +15,28 @@ function block7 (this: ListItem, context: UI5Element, tags: string[], suffix: st
 function block8 (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"><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"><img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
 function block9 (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 ? block10.call(this, context, tags, suffix) : undefined }<slot part="content"></slot></div>`;}
 function block10 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
-function block11 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block12.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block13.call(this, context, tags, suffix) : undefined }${ this.editIcon ? block14.call(this, context, tags, suffix) : undefined }${ this.deleteIcon ? block15.call(this, context, tags, suffix) : undefined }`;}
+function block11 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block12.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block13.call(this, context, tags, suffix) : undefined }${ this.editIcon ? block14.call(this, context, tags, suffix) : block15.call(this, context, tags, suffix) }${ this.deleteIcon ? block16.call(this, context, tags, suffix) : block17.call(this, context, tags, suffix) }`;}
 function block12 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
 function block13 (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 block14 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" size="Small"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" size="Small"></udex-button>`;}
-function block15 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></udex-button>`;}
-function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" role="${ifDefined(this.roleItem)}" 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 ? block17.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block18.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block19.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block20.call(this, context, tags, suffix) : undefined }${ this.image ? block21.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block22.call(this, context, tags, suffix) : block24.call(this, context, tags, suffix) }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div></div></li>`;}
-function block17 (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 block18 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
-function block19 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
-function block20 (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 block21 (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"><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"><img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
-function block22 (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 ? block23.call(this, context, tags, suffix) : undefined }<slot part="content"></slot></div>`;}
-function block23 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text" part="supporting">${ifDefined(this.supportingText)}</span>`;}
-function block24 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block25.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block26.call(this, context, tags, suffix) : undefined }${ this.editIcon ? block27.call(this, context, tags, suffix) : undefined }${ this.deleteIcon ? block28.call(this, context, tags, suffix) : undefined }`;}
+function block14 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" ?disabled="${this.disabled}" size="Small"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" ?disabled="${this.disabled}" size="Small"></udex-button>`;}
+function block15 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon"></slot>`;}
+function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}" ?disabled="${this.disabled}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}" ?disabled="${this.disabled}"></udex-button>`;}
+function block17 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon"></slot>`;}
+function block18 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" role="${ifDefined(this.roleItem)}" 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 ? block19.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block20.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block21.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block22.call(this, context, tags, suffix) : undefined }${ this.image ? block23.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block24.call(this, context, tags, suffix) : block26.call(this, context, tags, suffix) }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div></div></li>`;}
+function block19 (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 block20 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
+function block21 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
+function block22 (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 block23 (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"><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"><img src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}" /></udex-avatar>`;}
+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>`;}
 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 suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" size="Small"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" size="Small"></udex-button>`;}
-function block28 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}"></udex-button>`;}
+function block26 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__text-holder"><slot part="content"></slot>${ this.supportingText ? block27.call(this, context, tags, suffix) : undefined }</div>${ this.additionalText ? block28.call(this, context, tags, suffix) : undefined }${ this.editIcon ? block29.call(this, context, tags, suffix) : block30.call(this, context, tags, suffix) }${ this.deleteIcon ? block31.call(this, context, tags, suffix) : block32.call(this, context, tags, suffix) }`;}
+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 html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
+function block29 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" ?disabled="${this.disabled}" size="Small"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleEditClick}" @keydown="${this.handleKeyDownIcon}" part="edit-button" class="udex-list__edit-button" design="Tertiary" icon="${ifDefined(this.editIcon)}" accessible-name="${ifDefined(this.editButtonAccessibleName)}" toolTip="${ifDefined(this.editButtonAccessibleName)}" ?disabled="${this.disabled}" size="Small"></udex-button>`;}
+function block30 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon"></slot>`;}
+function block31 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}" ?disabled="${this.disabled}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleDeleteClick}" @keydown="${this.handleKeyDownIcon}" part="delete-button" class="udex-list__delete-button" design="Tertiary" size="Small" accessible-name="${ifDefined(this.deleteButtonAccessibleName)}" toolTip="${ifDefined(this.deleteButtonAccessibleName)}" icon="${ifDefined(this.deleteIcon)}" ?disabled="${this.disabled}"></udex-button>`;}
+function block32 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon"></slot>`;}
 
 
 export default block0;

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

@@ -5,9 +5,9 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.modeSelected ? block1.call(this, context, tags, suffix) : undefined }${ this.modeSingleContent ? block3.call(this, context, tags, suffix) : undefined } `;}
-function block1 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list-root" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleItemPress)}" @keydown="${this.handleKeyDown}" style="height: ${ifDefined(this.holderHeight)}"><div class="udex-list__scroll-container">${ this.headerText ? block2.call(this, context, tags, suffix) : undefined }<span id="${ifDefined(this._id)}-mode-label" class="udex-list__hidden-text">${ifDefined(this.ariaLabelModeText)}</span><ul id="udex-list" class="udex-list" role="${ifDefined(this.accessibleRole)}" aria-labelledby="${ifDefined(this.ariaLabelledBy)}" aria-label="${ifDefined(this.accessibleName)}"><slot></slot></ul></div></div>`;}
+function block1 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list-root" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleItemPress)}" @keydown="${this.handleKeyDown}" style="height: ${ifDefined(this.holderHeight)}"><div class="udex-list__scroll-container">${ this.headerText ? block2.call(this, context, tags, suffix) : undefined }<span id="${ifDefined(this._id)}-mode-label" class="udex-list__hidden-text">${ifDefined(this.ariaLabelModeText)}</span><ul id="udex-list" class="udex-list" role="${ifDefined(this.accessibleRole)}" aria-labelledby="${ifDefined(this.ariaLabelledBy)}" aria-label="${ifDefined(this.accessibleName)}" aria-busy="${ifDefined(this.ariaBusy)}"><slot></slot></ul></div></div>`;}
 function block2 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="udex-list__header-text" part="header" id="${ifDefined(this._id)}-mode-label">${ifDefined(this.headerText)}</header>`;}
-function block3 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.headerText ? block4.call(this, context, tags, suffix) : undefined }<ul id="udex-list" class="udex-list" role="${ifDefined(this.accessibleRole)}" aria-labelledby="${ifDefined(this.ariaLabelledBy)}" aria-label="${ifDefined(this.accessibleName)}"><slot></slot></ul>`;}
+function block3 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.headerText ? block4.call(this, context, tags, suffix) : undefined }<ul id="udex-list" class="udex-list" role="${ifDefined(this.accessibleRole)}" aria-labelledby="${ifDefined(this.ariaLabelledBy)}" aria-label="${ifDefined(this.accessibleName)}" aria-busy="${ifDefined(this.ariaBusy)}"><slot></slot></ul>`;}
 function block4 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="udex-list__header-text" part="header" id="${ifDefined(this._id)}-mode-label">${ifDefined(this.headerText)}</header>`;}
 
 

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

@@ -0,0 +1,15 @@
+/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+	import type MastheadCountrySelector from "../../MastheadCountrySelector.js";
+	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
+	
+function block0 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-country-selector" @keydown="${this.handleKeyDown}">${ this._isActiveRegionOpen ? block1.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }</div>`;}
+function block1 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-masthead-country-selector__title">${ifDefined(this.countryTitle)}</span>${ !this.isSingleMode ? block2.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-search", tags, suffix)} class="udex-masthead-country-selector__search" @ui5-handle-value-search="${ifDefined(this.handleSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleSearchReset)}" @ui5-submit-search-value="${ifDefined(this.handleSearch)}" language-voice="${ifDefined(this.languageVoice)}" label="${ifDefined(this.searchLabel)}" mode="${ifDefined(this.homeSearchMode)}" ?show-voice-button="${this.showSearchVoiceButton}" non-interactive-submit-button show-submit-button></${scopeTag("udex-search", tags, suffix)}><ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">${ repeat(this._activeCountries, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</ul>` : html`<span class="udex-masthead-country-selector__title">${ifDefined(this.countryTitle)}</span>${ !this.isSingleMode ? block2.call(this, context, tags, suffix) : undefined }<udex-search class="udex-masthead-country-selector__search" @ui5-handle-value-search="${ifDefined(this.handleSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleSearchReset)}" @ui5-submit-search-value="${ifDefined(this.handleSearch)}" language-voice="${ifDefined(this.languageVoice)}" label="${ifDefined(this.searchLabel)}" mode="${ifDefined(this.homeSearchMode)}" ?show-voice-button="${this.showSearchVoiceButton}" non-interactive-submit-button show-submit-button></udex-search><ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">${ repeat(this._activeCountries, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</ul>`;}
+function block2 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-country-selector__region-back-item" @click="${this.backToRegions}" label="${ifDefined(this._activeRegion?.title)}" type="Button" is-back icon-start></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item class="udex-masthead-country-selector__region-back-item" @click="${this.backToRegions}" label="${ifDefined(this._activeRegion?.title)}" type="Button" is-back icon-start></udex-masthead-menu-item>`;}
+function block3 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries" @click="${this.fireEventCountryItemClick}" _country-code="${ifDefined(item.countryCode)}" url="${ifDefined(item.url)}" label="${ifDefined(item.displayTitle)}" index="${index}" is-nav-item></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li role="menuitem"><udex-masthead-menu-item class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries" @click="${this.fireEventCountryItemClick}" _country-code="${ifDefined(item.countryCode)}" url="${ifDefined(item.url)}" label="${ifDefined(item.displayTitle)}" index="${index}" is-nav-item></udex-masthead-menu-item></li>`;}
+function block4 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-country-selector__title">${ifDefined(this.regionTitle)}</span><ul class="udex-masthead-country-selector__list" role="menu">${ repeat(this.regionsData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</ul>`;}
+function block5 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} id="${ifDefined(item._id)}" @click="${this.handleRegionClick}" index="${index}" class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region" aria-has-popup="true" accessible-role="button" type="Button" is-nav-item has-border icon-end label="${ifDefined(item.title)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li role="menuitem"><udex-masthead-menu-item id="${ifDefined(item._id)}" @click="${this.handleRegionClick}" index="${index}" class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region" aria-has-popup="true" accessible-role="button" type="Button" is-nav-item has-border icon-end label="${ifDefined(item.title)}"></udex-masthead-menu-item></li>`;}
+
+
+export default block0;

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

@@ -4,23 +4,29 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type MastheadItem from "../../MastheadItem.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasHref ? block1.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) } `;}
-function block1 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isTargetBlank ? block2.call(this, context, tags, suffix) : undefined }<a id="${ifDefined(this._id)}" class="${ifDefined(this.additionalClass)}" tabindex="0" role="${ifDefined(this.accessibleRoleName)}" target="${ifDefined(this.target)}" href="${ifDefined(this.href)}" aria-label="${ifDefined(this.accessibleLabel)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" @click="${this.handleItemClick}">${ this.icon ? block3.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }</a>`;}
-function block2 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="new-win-desc" class="udex-masthead-hidden-text">${ifDefined(this.openInNewWindowText)}</span>`;}
-function block3 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-masthead-item__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></${scopeTag("ui5-icon", tags, suffix)}></span>` : html`<span class="udex-masthead-item__icon-container"><ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></ui5-icon></span>`;}
-function block4 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block5.call(this, context, tags, suffix) : undefined }</span>`;}
-function block5 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></ui5-icon>`;}
-function block6 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isProfileBtn ? block7.call(this, context, tags, suffix) : block12.call(this, context, tags, suffix) }`;}
-function block7 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}" role="combobox" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}">${ this.icon ? block8.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }</span>${ this.showDropdown ? block11.call(this, context, tags, suffix) : undefined }`;}
-function block8 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-masthead-item__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></${scopeTag("ui5-icon", tags, suffix)}></span>` : html`<span class="udex-masthead-item__icon-container"><ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></ui5-icon></span>`;}
-function block9 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block10.call(this, context, tags, suffix) : undefined }</span>`;}
-function block10 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></ui5-icon>`;}
-function block11 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div id="${ifDefined(this._id)}_dropdown" class="udex-masthead-item__dropdown" @keydown="${this.handleKeyDown}" @focusout="${this.handleFocusout}"><div class="udex-masthead-item__dropdown-holder"><slot name="dropdown"></slot></div></div>`;}
-function block12 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button role="${ifDefined(this.accessibleRoleName)}" id="${ifDefined(this._id)}" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}">${ this.icon ? block13.call(this, context, tags, suffix) : block14.call(this, context, tags, suffix) }</button>${ this.showDropdown ? block16.call(this, context, tags, suffix) : undefined }`;}
-function block13 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-masthead-item__icon-container"><${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></${scopeTag("ui5-icon", tags, suffix)}></span>` : html`<span class="udex-masthead-item__icon-container"><ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></ui5-icon></span>`;}
-function block14 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block15.call(this, context, tags, suffix) : undefined }</span>`;}
-function block15 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></ui5-icon>`;}
-function block16 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div id="${ifDefined(this._id)}_dropdown" class="udex-masthead-item__dropdown" @keydown="${this.handleKeyDown}" @focusout="${this.handleFocusout}"><div class="udex-masthead-item__dropdown-holder"><slot name="dropdown"></slot></div></div>`;}
+function block0 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasHref ? block1.call(this, context, tags, suffix) : block8.call(this, context, tags, suffix) } `;}
+function block1 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="${ifDefined(this.additionalClass)}" tabindex="0" role="${ifDefined(this.accessibleRoleName)}" target="${ifDefined(this.target)}" href="${ifDefined(this.href)}" aria-label="${ifDefined(this.accessibleLabel)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" @click="${this.handleItemClick}">${ this.icon ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</a>${ this.isTargetBlank ? block7.call(this, context, tags, suffix) : undefined }`;}
+function block2 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></ui5-icon>`;}
+function block3 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }`;}
+function block4 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img class="udex-masthead-item__image" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/>`;}
+function block5 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block6.call(this, context, tags, suffix) : undefined }</span>`;}
+function block6 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></ui5-icon>`;}
+function block7 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="new-win-desc" class="udex-masthead-hidden-text">${ifDefined(this.openInNewWindowText)}</span>`;}
+function block8 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isProfileBtn ? block9.call(this, context, tags, suffix) : block16.call(this, context, tags, suffix) }`;}
+function block9 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}" role="combobox" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}">${ this.icon ? block10.call(this, context, tags, suffix) : block11.call(this, context, tags, suffix) }</span>${ this.showDropdown ? block15.call(this, context, tags, suffix) : undefined }`;}
+function block10 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></ui5-icon>`;}
+function block11 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block12.call(this, context, tags, suffix) : block13.call(this, context, tags, suffix) }`;}
+function block12 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img class="udex-masthead-item__image" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/>`;}
+function block13 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block14.call(this, context, tags, suffix) : undefined }</span>`;}
+function block14 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></ui5-icon>`;}
+function block15 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div id="${ifDefined(this._id)}_dropdown" class="udex-masthead-item__dropdown" @keydown="${this.handleKeyDown}" @focusout="${this.handleFocusout}"><div class="udex-masthead-item__dropdown-holder"><slot name="dropdown"></slot></div></div>`;}
+function block16 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button role="${ifDefined(this.accessibleRoleName)}" id="${ifDefined(this._id)}" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}">${ this.icon ? block17.call(this, context, tags, suffix) : block18.call(this, context, tags, suffix) }</button>${ this.showDropdown ? block22.call(this, context, tags, suffix) : undefined }`;}
+function block17 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAlt)}" accessible-name="${ifDefined(this.iconAlt)}"></ui5-icon>`;}
+function block18 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block19.call(this, context, tags, suffix) : block20.call(this, context, tags, suffix) }`;}
+function block19 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img class="udex-masthead-item__image" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/>`;}
+function block20 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block21.call(this, context, tags, suffix) : undefined }</span>`;}
+function block21 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down"></ui5-icon>`;}
+function block22 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div id="${ifDefined(this._id)}_dropdown" class="udex-masthead-item__dropdown" @keydown="${this.handleKeyDown}" @focusout="${this.handleFocusout}"><div class="udex-masthead-item__dropdown-holder"><slot name="dropdown"></slot></div></div>`;}
 
 
 export default block0;

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

@@ -5,15 +5,15 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isActive ? block1.call(this, context, tags, suffix) : block8.call(this, context, tags, suffix) } `;}
-function block1 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.externalLink ? block2.call(this, context, tags, suffix) : undefined }<a class="udex-masthead-menu-item ${ifDefined(this.rootClass)}" aria-describedby="${ifDefined(this.ariaDescribedby)}" role="${ifDefined(this.accessibleRoleText)}" href="${ifDefined(this.url)}" part="${ifDefined(this.partAttr)}" target="${ifDefined(this.target)}">${ this.iconStart ? block3.call(this, context, tags, suffix) : undefined }<span class=${ifDefined(this.labelClass)}>${ this.externalLink ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }</span>${ this.iconEnd ? block6.call(this, context, tags, suffix) : undefined }</a>${ this.badge ? block7.call(this, context, tags, suffix) : undefined }`;}
-function block2 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="new-win-desc" class="udex-masthead-hidden-text">${ifDefined(this.openInNewWindowText)}</span>`;}
-function block3 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left" name="slim-arrow-left" part="left"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left" name="slim-arrow-left" part="left"></ui5-icon>`;}
-function block4 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`${ifDefined(this.leadingWordsOfLabel)}<span class="udex-masthead-menu-item__text-with-icon">${ifDefined(this.lastWordOfLabel)}<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-action" name="action"></${scopeTag("ui5-icon", tags, suffix)}></span>` : html`${ifDefined(this.leadingWordsOfLabel)}<span class="udex-masthead-menu-item__text-with-icon">${ifDefined(this.lastWordOfLabel)}<ui5-icon class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-action" name="action"></ui5-icon></span>`;}
-function block5 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span>${ifDefined(this.label)}</span>`;}
-function block6 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right" name="slim-arrow-right" part="right"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right" name="slim-arrow-right" part="right"></ui5-icon>`;}
+function block1 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-masthead-menu-item ${ifDefined(this.rootClass)}" aria-describedby="${ifDefined(this.ariaDescribedby)}" role="${ifDefined(this.accessibleRoleText)}" href="${ifDefined(this.url)}" part="${ifDefined(this.partAttr)}" target="${ifDefined(this.targetLink)}" tabindex="${ifDefined(this._tabIndex)}">${ this.iconStart ? block2.call(this, context, tags, suffix) : undefined }<span class="${ifDefined(this.labelClass)}">${ this.externalLink ? block3.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }</span>${ this.iconEnd ? block5.call(this, context, tags, suffix) : undefined }</a>${ this.externalLink ? block6.call(this, context, tags, suffix) : undefined }${ this.badge ? block7.call(this, context, tags, suffix) : undefined }`;}
+function block2 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left" name="slim-arrow-left" part="left"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left" name="slim-arrow-left" part="left"></ui5-icon>`;}
+function block3 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`${ifDefined(this.leadingWordsOfLabel)}<span class="udex-masthead-menu-item__text-with-icon">${ifDefined(this.lastWordOfLabel)}<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-action" name="action"></${scopeTag("ui5-icon", tags, suffix)}></span>` : html`${ifDefined(this.leadingWordsOfLabel)}<span class="udex-masthead-menu-item__text-with-icon">${ifDefined(this.lastWordOfLabel)}<ui5-icon class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-action" name="action"></ui5-icon></span>`;}
+function block4 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span>${ifDefined(this.label)}</span>`;}
+function block5 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right" name="slim-arrow-right" part="right"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right" name="slim-arrow-right" part="right"></ui5-icon>`;}
+function block6 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="new-win-desc" class="udex-masthead-hidden-text">${ifDefined(this.openInNewWindowText)}</span>`;}
 function block7 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} part="badge" class="udex-masthead-menu-item-badge" type="Number" number-design="Blue" size="Small">${ifDefined(this.badge)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge part="badge" class="udex-masthead-menu-item-badge" type="Number" number-design="Blue" size="Small">${ifDefined(this.badge)}</udex-badge>`;}
 function block8 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isButtonType ? block9.call(this, context, tags, suffix) : block12.call(this, context, tags, suffix) }`;}
-function block9 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button _id="${ifDefined(this.id)}" class="udex-masthead-menu-item ${ifDefined(this.rootClass)}" part="menu-item-button" role="button">${ this.iconStart ? block10.call(this, context, tags, suffix) : undefined }${ifDefined(this.label)}${ this.iconEnd ? block11.call(this, context, tags, suffix) : undefined }</button>`;}
+function block9 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button _id="${ifDefined(this.id)}" class="udex-masthead-menu-item ${ifDefined(this.rootClass)}" part="menu-item-button" aria-haspopup="${ifDefined(this.ariaHasPopup)}" role="button" tabindex="${ifDefined(this._tabIndex)}">${ this.iconStart ? block10.call(this, context, tags, suffix) : undefined }${ifDefined(this.label)}${ this.iconEnd ? block11.call(this, context, tags, suffix) : undefined }</button>`;}
 function block10 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left" name="slim-arrow-left" part="left"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left" name="slim-arrow-left" part="left"></ui5-icon>`;}
 function block11 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right" name="slim-arrow-right" part="right"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right" name="slim-arrow-right" part="right"></ui5-icon>`;}
 function block12 (this: MastheadMenuItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-menu-item ${ifDefined(this.rootClass)}" part="menu-item">${ this.iconStart ? block13.call(this, context, tags, suffix) : undefined }${ifDefined(this.label)}${ this.iconEnd ? block14.call(this, context, tags, suffix) : undefined }</span>`;}

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

@@ -9,7 +9,9 @@ function block1 (this: MastheadMenu, context: UI5Element, tags: string[], suffix
 function block2 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-masthead-menu__row">${ repeat(item.subMenuLinkItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div>`;}
 function block3 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-masthead-menu__column" part="column">${ item.category ? block4.call(this, context, tags, suffix, item, index) : undefined }<ul class="udex-masthead-menu__list" aria-labelledby="category-${ifDefined(item.categoryId)}">${ repeat(item.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
 function block4 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<div class="udex-masthead-menu__header"><${scopeTag("udex-masthead-menu-item", tags, suffix)} id="category-${ifDefined(item.categoryId)}" @click="${this.handleMenuItemClick}" url="${ifDefined(item.url)}" label="${ifDefined(item.category)}" ?icon-end="${item.url}" type="Heading" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></div>` : html`<div class="udex-masthead-menu__header"><udex-masthead-menu-item id="category-${ifDefined(item.categoryId)}" @click="${this.handleMenuItemClick}" url="${ifDefined(item.url)}" label="${ifDefined(item.category)}" ?icon-end="${item.url}" type="Heading" has-border></udex-masthead-menu-item></div>`;}
-function block5 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li><${scopeTag("udex-masthead-menu-item", tags, suffix)} @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)}></li>` : html`<li><udex-masthead-menu-item @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}"></udex-masthead-menu-item></li>`;}
+function block5 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li>${ item.url ? block6.call(this, context, tags, suffix, item, index) : block7.call(this, context, tags, suffix, item, index) }</li>`;}
+function block6 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} @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 @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}"></udex-masthead-menu-item>`;}
+function block7 (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>`;}
 
 
 export default block0;

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

@@ -4,12 +4,12 @@ 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" @keydown="${this.handleKeyDown}"><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">${ this.showNavigation ? block2.call(this, context, tags, suffix) : undefined }${ this._showCategories ? block6.call(this, context, tags, suffix) : undefined }${ this._showCategoryItems ? block16.call(this, context, tags, suffix) : undefined }</ul></div>${ this.showExploreBtn ? block19.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 ? block16.call(this, context, tags, suffix) : undefined }</ul></div>${ this.showExploreBtn ? block20.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="menuitem">${ item.subItems ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }</li>`;}
-function block4 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" id="${ifDefined(item._id)}" type="Button" has-border icon-end first-level></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" id="${ifDefined(item._id)}" type="Button" has-border icon-end first-level></udex-masthead-menu-item>`;}
-function block5 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" has-border></udex-masthead-menu-item>`;}
+function block4 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" aria-has-popup="true" id="${ifDefined(item._id)}" type="Button" has-border icon-end first-level></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item @click="${this.handleMenuItemClick}" label="${ifDefined(item.innerText)}" aria-has-popup="true" id="${ifDefined(item._id)}" type="Button" has-border icon-end first-level></udex-masthead-menu-item>`;}
+function block5 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" target="${ifDefined(item.target)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item @click="${this.handleMobileItemEvent}" url="${ifDefined(item.href)}" label="${ifDefined(item.innerText)}" target="${ifDefined(item.target)}" has-border></udex-masthead-menu-item>`;}
 function block6 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem">${ this._hideExploreSapBtn ? block7.call(this, context, tags, suffix) : block8.call(this, context, tags, suffix) }</li>${ this._clickedItem.href ? block11.call(this, context, tags, suffix) : undefined }${ repeat(this._categories, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block12.call(this, context, tags, suffix, item, index)) }`;}
 function block7 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__back-item" @click="${this.handleExploreBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start is-explore-back></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item class="udex-masthead-mobile-menu__back-item" @click="${this.handleExploreBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start is-explore-back></udex-masthead-menu-item>`;}
 function block8 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNotMultipleMode ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }`;}
@@ -17,13 +17,14 @@ function block9 (this: MastheadMobileMenu, context: UI5Element, tags: string[],
 function block10 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start is-back-to-nav></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" type="Button" has-border icon-start is-back-to-nav></udex-masthead-menu-item>`;}
 function block11 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" has-border></udex-masthead-menu-item></li>`;}
 function block12 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.category ? block13.call(this, context, tags, suffix, item, index) : block14.call(this, context, tags, suffix, item, index) }`;}
-function block13 (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="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" type="Button" second-level has-border icon-end></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" type="Button" second-level has-border icon-end></udex-masthead-menu-item></li>`;}
+function block13 (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="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level has-border icon-end></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item @click="${this.handleMenuCategoryClick}" url="${ifDefined(item.url)}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level has-border icon-end></udex-masthead-menu-item></li>`;}
 function block14 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ repeat(item.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block15.call(this, context, tags, suffix, item, index)) }`;}
 function block15 (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="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" has-border></udex-masthead-menu-item></li>`;}
 function block16 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" has-border icon-start is-back-to-categories></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ this._category.url ? block17.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block18.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" has-border icon-start is-back-to-categories></udex-masthead-menu-item></li>${ this._category.url ? block17.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block18.call(this, context, tags, suffix, item, index)) }`;}
 function block17 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMobileItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item @click="${this.handleMobileItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" has-border></udex-masthead-menu-item></li>`;}
-function block18 (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="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMobileItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item @click="${this.handleMobileItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></udex-masthead-menu-item></li>`;}
-function block19 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" accessible-role="button" type="Button" first-level icon-end is-explore label=${ifDefined(this.exploreItem.innerText)}></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" accessible-role="button" type="Button" first-level icon-end is-explore label=${ifDefined(this.exploreItem.innerText)}></udex-masthead-menu-item>`;}
+function block18 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.url ? block19.call(this, context, tags, suffix, item, index) : undefined }`;}
+function block19 (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="menuitem"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleMobileItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="menuitem"><udex-masthead-menu-item @click="${this.handleMobileItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" has-border></udex-masthead-menu-item></li>`;}
+function block20 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role="button" type="Button" first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role="button" type="Button" first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></udex-masthead-menu-item>`;}
 
 
 export default block0;

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

@@ -4,11 +4,11 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type MastheadProfileMenu from "../../MastheadProfileMenu.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu"><div class="udex-masthead-profile-menu__header">${ this.userData ? block1.call(this, context, tags, suffix) : undefined }</div>${ this.messageAvailable ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__links"><${scopeTag("udex-masthead-menu", tags, suffix)} sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click=${ifDefined(this.handleProfileMenuItemClick)}></${scopeTag("udex-masthead-menu", tags, suffix)}>${ this.logoutLink ? block4.call(this, context, tags, suffix) : undefined }</div></div>` : html`<div class="udex-masthead-profile-menu"><div class="udex-masthead-profile-menu__header">${ this.userData ? block1.call(this, context, tags, suffix) : undefined }</div>${ this.messageAvailable ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__links"><udex-masthead-menu sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click=${ifDefined(this.handleProfileMenuItemClick)}></udex-masthead-menu>${ this.logoutLink ? block4.call(this, context, tags, suffix) : undefined }</div></div>`;}
+function block0 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu"><div class="udex-masthead-profile-menu__header">${ this.userData ? block1.call(this, context, tags, suffix) : undefined }</div>${ this.messageAvailable ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__links"><${scopeTag("udex-masthead-menu", tags, suffix)} sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click="${ifDefined(this.handleProfileMenuItemClick)}"></${scopeTag("udex-masthead-menu", tags, suffix)}>${ this.logoutLink ? block4.call(this, context, tags, suffix) : undefined }</div></div>` : html`<div class="udex-masthead-profile-menu"><div class="udex-masthead-profile-menu__header">${ this.userData ? block1.call(this, context, tags, suffix) : undefined }</div>${ this.messageAvailable ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__links"><udex-masthead-menu sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click="${ifDefined(this.handleProfileMenuItemClick)}"></udex-masthead-menu>${ this.logoutLink ? block4.call(this, context, tags, suffix) : undefined }</div></div>`;}
 function block1 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-avatar", tags, suffix)} aria-hidden="true" size="L" initials="${ifDefined(this.userData.avatarInitials)}">${ this.userData.avatarUrl ? block2.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-avatar", tags, suffix)}><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p></div>` : html`<udex-avatar aria-hidden="true" size="L" initials="${ifDefined(this.userData.avatarInitials)}">${ this.userData.avatarUrl ? block2.call(this, context, tags, suffix) : undefined }</udex-avatar><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p></div>`;}
 function block2 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img src="${ifDefined(this.userData.avatarUrl)}" alt="avatar"/>`;}
 function block3 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-profile-menu__message"><slot name="message"></slot></div>`;}
-function block4 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__actions"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click=${this.handleUserLogoutItemClick} url="${ifDefined(this.logoutUrl)}" label="${ifDefined(this.logoutText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}></div>` : html`<div class="udex-masthead-profile-menu__actions"><udex-masthead-menu-item @click=${this.handleUserLogoutItemClick} url="${ifDefined(this.logoutUrl)}" label="${ifDefined(this.logoutText)}"></udex-masthead-menu-item></div>`;}
+function block4 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__actions"><${scopeTag("udex-masthead-menu-item", tags, suffix)} @click="${this.handleUserLogoutItemClick}" url="${ifDefined(this.logoutUrl)}" label="${ifDefined(this.logoutText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}></div>` : html`<div class="udex-masthead-profile-menu__actions"><udex-masthead-menu-item @click="${this.handleUserLogoutItemClick}" url="${ifDefined(this.logoutUrl)}" label="${ifDefined(this.logoutText)}"></udex-masthead-menu-item></div>`;}
 
 
 export default block0;

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type MastheadShell from "../../MastheadShell.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="udex-masthead-shell" @keydown="${this.handleKeyDown}"><div class="udex-masthead-shell__main-content"><div class="udex-masthead-shell__landing-wrap">${ this.logoUrl ? block1.call(this, context, tags, suffix) : undefined }${ this.siteLabel ? block4.call(this, context, tags, suffix) : undefined }</div>${ this.isMainMenuVisible ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.isSearchVisible ? block9.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-shell__right-menu">${ this.hasMobileMenuButtons ? block11.call(this, context, tags, suffix) : undefined }${ this.hasExploreSAP ? block12.call(this, context, tags, suffix) : undefined }${ this.hasSearch ? block13.call(this, context, tags, suffix) : undefined }${ this.hasCart ? block14.call(this, context, tags, suffix) : undefined }${ this.hasProfile ? block15.call(this, context, tags, suffix) : undefined }${ this.hasMobileMenuButtons ? block16.call(this, context, tags, suffix) : undefined }</div></header> `;}
+function block0 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="udex-masthead-shell" @keydown="${this.handleKeyDown}"><div class="udex-masthead-shell__main-content"><div class="udex-masthead-shell__landing-wrap">${ this.logoUrl ? block1.call(this, context, tags, suffix) : undefined }${ this.siteLabel ? block4.call(this, context, tags, suffix) : undefined }</div>${ this.isMainMenuVisible ? block7.call(this, context, tags, suffix) : undefined }</div>${ this.isSearchVisible ? block9.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-shell__right-menu">${ this.hasMobileMenuButtons ? block11.call(this, context, tags, suffix) : undefined }${ this.hasExploreSAP ? block12.call(this, context, tags, suffix) : undefined }${ this.hasSearch ? block13.call(this, context, tags, suffix) : undefined }${ this.hasCart ? block14.call(this, context, tags, suffix) : undefined }${ this.hasProfile ? block15.call(this, context, tags, suffix) : undefined }${ this.hasCountrySelector ? block16.call(this, context, tags, suffix) : undefined }${ this.hasMobileMenuButtons ? block17.call(this, context, tags, suffix) : undefined }</div></header> `;}
 function block1 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.homeUrl ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }`;}
 function block2 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a @click="${this.handleLogoClick}" role="link" href="${ifDefined(this.homeUrl)}" title="${ifDefined(this.logoTitle)}" target="_self" aria-label="${ifDefined(this.homepageAriaLabel)}" class="udex-masthead-shell__logo udex-masthead-shell__logo--link"><img src="${ifDefined(this.logoUrl)}" class="udex-masthead-shell__logo-image" alt="${ifDefined(this.logoAlt)}" /></a>`;}
 function block3 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__logo"><img src="${ifDefined(this.logoUrl)}" class="udex-masthead-shell__logo-image" alt="${ifDefined(this.logoAlt)}" /></div>`;}
@@ -14,13 +14,14 @@ function block6 (this: MastheadShell, context: UI5Element, tags: string[], suffi
 function block7 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-shell__nav" aria-label="${ifDefined(this.mainNavigationAriaLabel)}"><ul class="udex-masthead-shell__main-menu" aria-label="${ifDefined(this.mainNavigationAriaLabel)}">${ repeat(this.menuItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block8.call(this, context, tags, suffix, item, index)) }</ul></nav>`;}
 function block8 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-shell__item" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="${ifDefined(item._individualSlot)}"></slot></li>`;}
 function block9 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__search-container"><slot name="search"></slot></div>${ this._isSearchOpened ? block10.call(this, context, tags, suffix) : undefined }`;}
-function block10 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__btn-holder"><${scopeTag("udex-control-button", tags, suffix)} class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click=${this.hideSearch}></${scopeTag("udex-control-button", tags, suffix)}></div>` : html`<div class="udex-masthead-shell__btn-holder"><udex-control-button class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click=${this.hideSearch}></udex-control-button></div>`;}
-function block11 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @ui5-item-click="${ifDefined(this.handleMobileMenuClick)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @ui5-item-click="${ifDefined(this.handleMobileMenuClick)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></udex-masthead-item>`;}
+function block10 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__btn-holder"><${scopeTag("udex-control-button", tags, suffix)} class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click="${this.handleCloseSearch}"></${scopeTag("udex-control-button", tags, suffix)}></div>` : html`<div class="udex-masthead-shell__btn-holder"><udex-control-button class="udex-masthead-shell__close-search-btn" size="Small" icon="decline" tooltip="${ifDefined(this.closeButtonAccessibleName)}" accessible-name="${ifDefined(this.closeButtonAccessibleName)}" @click="${this.handleCloseSearch}"></udex-control-button></div>`;}
+function block11 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></udex-masthead-item>`;}
 function block12 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__explore" @ui5-item-click="${ifDefined(this.setSelectedItem)}"><slot name="exploreSAP"></slot></div>`;}
 function block13 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon"><${scopeTag("udex-masthead-item", tags, suffix)} class="udex-masthead-shell__search-btn" icon="search" @click="${this.handleSearchClick}" accessible-name="search"></${scopeTag("udex-masthead-item", tags, suffix)}></div>` : html`<div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon"><udex-masthead-item class="udex-masthead-shell__search-btn" icon="search" @click="${this.handleSearchClick}" accessible-name="search"></udex-masthead-item></div>`;}
 function block14 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__cart udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCartClick}"><slot name="cart"></slot></div>`;}
 function block15 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__profile udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleProfileClick}"><slot name="profile"></slot></div>`;}
-function block16 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.handleMobileCloseClick)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.handleMobileCloseClick)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></udex-masthead-item>`;}
+function block16 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCountrySelectorClick}"><slot name="countrySelector"></slot></div>`;}
+function block17 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="close" part="menu-close-btn" hide-active-border></udex-masthead-item>`;}
 
 
 export default block0;