@sapudex/web-components 0.199.3 → 0.225.0

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.isDropdownOpened ? 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.isDropdownOpened ? 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.targetLink)}">${ 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

@@ -7,9 +7,11 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 function block0 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-menu ${ifDefined(this.oneRowClass)}" part="menu" @keydown="${this.handleKeyDown}">${ this.menuTitle ? block1.call(this, context, tags, suffix) : undefined }${ repeat(this.itemsList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div> `;}
 function block1 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-menu__title">${ifDefined(this.menuTitle)}</div>`;}
 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 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)}" category="${ifDefined(item.category)}">${ 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,11 +4,11 @@ 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 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>`;}
@@ -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 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.handleMobileCategoryItemEvent}" 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.handleMobileCategoryItemEvent}" 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 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.handleMobileCategoryItemEvent}" 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.handleMobileCategoryItemEvent}" 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>`;}
@@ -13,14 +13,15 @@ function block5 (this: MastheadShell, context: UI5Element, tags: string[], suffi
 function block6 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__site-label">${ifDefined(this.siteLabel)}</div>`;}
 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 block9 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__search-container" @ui5-search-keydown="${ifDefined(this.handleSearchKeyDown)}"><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.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;

package/src/generated/templates/MediaPlayerTemplate.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: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.audioOnly ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) } `;}
-function block1 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<audio id="${ifDefined(this.playerElementId)}" class="udex-media-player__video  video-js ${ifDefined(this.aspectRatioClass)}" preload="auto"><source src="${ifDefined(this.source)}" type="${ifDefined(this.type)}" /></audio>`;}
+function block1 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<audio id="${ifDefined(this.playerElementId)}" class="udex-media-player__video  video-js ${ifDefined(this.aspectRatioClass)}" preload="auto"><source src="${ifDefined(this.source)}" type="${ifDefined(this.type)}"/></audio>`;}
 function block2 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this._iframeLoad ? block3.call(this, context, tags, suffix) : block8.call(this, context, tags, suffix) }`;}
 function block3 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this._iframePosterPreload ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }`;}
-function block4 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="video-js udex-media-player__iframe-poster ${ifDefined(this.aspectRatioClass)}"><div class="udex-media-player__vjs-poster" aria-disabled="false"><picture tabindex="-1"><img loading="lazy" alt="" src="${ifDefined(this.poster)}" width="${ifDefined(this.width)}" height="${ifDefined(this.height)}"></picture><button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" @click=${this.handleEmbedPlay}><${scopeTag("ui5-icon", tags, suffix)} aria-label="Play Video" name="play" ui5-icon=""></${scopeTag("ui5-icon", tags, suffix)}></button></div></div>` : html`<div class="video-js udex-media-player__iframe-poster ${ifDefined(this.aspectRatioClass)}"><div class="udex-media-player__vjs-poster" aria-disabled="false"><picture tabindex="-1"><img loading="lazy" alt="" src="${ifDefined(this.poster)}" width="${ifDefined(this.width)}" height="${ifDefined(this.height)}"></picture><button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" @click=${this.handleEmbedPlay}><ui5-icon aria-label="Play Video" name="play" ui5-icon=""></ui5-icon></button></div></div>`;}
+function block4 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="video-js udex-media-player__iframe-poster ${ifDefined(this.aspectRatioClass)}"><div class="udex-media-player__vjs-poster" aria-disabled="false"><picture tabindex="-1"><img loading="lazy" alt="" src="${ifDefined(this.poster)}" width="${ifDefined(this.width)}" height="${ifDefined(this.height)}"></picture><button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" @click="${this.handleEmbedPlay}"><${scopeTag("ui5-icon", tags, suffix)} aria-label="Play Video" name="play" ui5-icon=""></${scopeTag("ui5-icon", tags, suffix)}></button></div></div>` : html`<div class="video-js udex-media-player__iframe-poster ${ifDefined(this.aspectRatioClass)}"><div class="udex-media-player__vjs-poster" aria-disabled="false"><picture tabindex="-1"><img loading="lazy" alt="" src="${ifDefined(this.poster)}" width="${ifDefined(this.width)}" height="${ifDefined(this.height)}"></picture><button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" @click="${this.handleEmbedPlay}"><ui5-icon aria-label="Play Video" name="play" ui5-icon=""></ui5-icon></button></div></div>`;}
 function block5 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this._youtubeSrc ? block6.call(this, context, tags, suffix) : undefined }${ this._vimeoSrc ? block7.call(this, context, tags, suffix) : undefined }`;}
 function block6 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-media-player-youtube", tags, suffix)} source="${ifDefined(this.source)}" width="${ifDefined(this.width)}" height="${ifDefined(this.height)}" class="video-js ${ifDefined(this.aspectRatioClass)}" ?fluid-mode="${this.embedVideoFluidClass}" @playing="${this.handleEmbedVideoPlaying}" @ended="${this.handleEmbedVideoEnded}" @ready="${this.handleEmbedVideoReady}" @pause="${this.handleEmbedVideoPause}"></${scopeTag("udex-media-player-youtube", tags, suffix)}>` : html`<udex-media-player-youtube source="${ifDefined(this.source)}" width="${ifDefined(this.width)}" height="${ifDefined(this.height)}" class="video-js ${ifDefined(this.aspectRatioClass)}" ?fluid-mode="${this.embedVideoFluidClass}" @playing="${this.handleEmbedVideoPlaying}" @ended="${this.handleEmbedVideoEnded}" @ready="${this.handleEmbedVideoReady}" @pause="${this.handleEmbedVideoPause}"></udex-media-player-youtube>`;}
 function block7 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-media-player-vimeo", tags, suffix)} source="${ifDefined(this.source)}" width="${ifDefined(this.width)}" height="${ifDefined(this.height)}" title="${ifDefined(this.title)}" aspect-ratio-class="${ifDefined(this.aspectRatioClass)}" ?fluid-mode="${this.embedVideoFluidClass}" @playing="${this.handleEmbedVideoPlaying}" @ended="${this.handleEmbedVideoEnded}" @ready="${this.handleEmbedVideoReady}" @pause="${this.handleEmbedVideoPause}"></${scopeTag("udex-media-player-vimeo", tags, suffix)}>` : html`<udex-media-player-vimeo source="${ifDefined(this.source)}" width="${ifDefined(this.width)}" height="${ifDefined(this.height)}" title="${ifDefined(this.title)}" aspect-ratio-class="${ifDefined(this.aspectRatioClass)}" ?fluid-mode="${this.embedVideoFluidClass}" @playing="${this.handleEmbedVideoPlaying}" @ended="${this.handleEmbedVideoEnded}" @ready="${this.handleEmbedVideoReady}" @pause="${this.handleEmbedVideoPause}"></udex-media-player-vimeo>`;}
-function block8 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<video id="${ifDefined(this.playerElementId)}" class="udex-media-player__video video-js ${ifDefined(this.aspectRatioClass)}"><source src="${ifDefined(this.source)}" type="${ifDefined(this.type)}">${ repeat(this._tracks, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</video>`;}
-function block9 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<track kind=${ifDefined(item.kind)} src='${ifDefined(item.src)}' srclang='${ifDefined(item.srclang)}' label='${ifDefined(item.label)}' ?default="${item.default}"/>`;}
+function block8 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("video-js", tags, suffix)} id="${ifDefined(this.playerElementId)}" class="udex-media-player__video video-js ${ifDefined(this.aspectRatioClass)}"><source src="${ifDefined(this.source)}" type="${ifDefined(this.type)}">${ repeat(this._tracks, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</${scopeTag("video-js", tags, suffix)}>` : html`<video-js id="${ifDefined(this.playerElementId)}" class="udex-media-player__video video-js ${ifDefined(this.aspectRatioClass)}"><source src="${ifDefined(this.source)}" type="${ifDefined(this.type)}">${ repeat(this._tracks, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</video-js>`;}
+function block9 (this: MediaPlayer, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<track kind="${ifDefined(item.kind)}" src="${ifDefined(item.src)}" srclang="${ifDefined(item.srclang)}" label="${ifDefined(item.label)}" ?default="${item.default}" />`;}
 
 
 export default block0;

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

@@ -9,7 +9,7 @@ function block1 (this: MessageStrip, context: UI5Element, tags: string[], suffix
 function block2 (this: MessageStrip, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="icon"></slot>`;}
 function block3 (this: MessageStrip, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.standardIconName)}" class="ui5-message-strip-icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon name="${ifDefined(this.standardIconName)}" class="ui5-message-strip-icon"></ui5-icon>`;}
 function block4 (this: MessageStrip, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<strong class="message-strip__text-status">${ifDefined(this.textStatus)}:</strong>`;}
-function block5 (this: MessageStrip, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} size="Small" icon="decline" design="Tertiary" @click=${this._closeClick} tooltip="${ifDefined(this._closeButtonText)}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button size="Small" icon="decline" design="Tertiary" @click=${this._closeClick} tooltip="${ifDefined(this._closeButtonText)}"></udex-button>`;}
+function block5 (this: MessageStrip, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} size="Small" icon="decline" design="Tertiary" @click="${this._closeClick}" tooltip="${ifDefined(this._closeButtonText)}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button size="Small" icon="decline" design="Tertiary" @click="${this._closeClick}" tooltip="${ifDefined(this._closeButtonText)}"></udex-button>`;}
 
 
 export default block0;

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type PasswordField from "../../PasswordField.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: PasswordField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-text-field", tags, suffix)} type=${ifDefined(this.type)} value="${ifDefined(this.value)}" label="${ifDefined(this.passwordLabel)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" maxlength="${ifDefined(this.maxlength)}" value-state="${ifDefined(this.valueState)}" supporting-text="${ifDefined(this.supportingText)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.showButtonTooltip)}" show-button-tooltip="${ifDefined(this.showButtonTooltip)}" @ui5-click-icon="${ifDefined(this.handleShowPassword)}" icon="${ifDefined(this.iconButton)}"></${scopeTag("udex-text-field", tags, suffix)}>` : html`<udex-text-field type=${ifDefined(this.type)} value="${ifDefined(this.value)}" label="${ifDefined(this.passwordLabel)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" maxlength="${ifDefined(this.maxlength)}" value-state="${ifDefined(this.valueState)}" supporting-text="${ifDefined(this.supportingText)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.showButtonTooltip)}" show-button-tooltip="${ifDefined(this.showButtonTooltip)}" @ui5-click-icon="${ifDefined(this.handleShowPassword)}" icon="${ifDefined(this.iconButton)}"></udex-text-field>`;}
+function block0 (this: PasswordField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-text-field", tags, suffix)} type="${ifDefined(this.type)}" value="${ifDefined(this.value)}" label="${ifDefined(this.passwordLabel)}" autocomplete="${ifDefined(this.autocomplete)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" maxlength="${ifDefined(this.maxlength)}" value-state="${ifDefined(this.valueState)}" supporting-text="${ifDefined(this.supportingText)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.showButtonTooltip)}" show-button-tooltip="${ifDefined(this.showButtonTooltip)}" @click-icon="${this.handleShowPassword}" icon="${ifDefined(this.iconButton)}"></${scopeTag("udex-text-field", tags, suffix)}>` : html`<udex-text-field type="${ifDefined(this.type)}" value="${ifDefined(this.value)}" label="${ifDefined(this.passwordLabel)}" autocomplete="${ifDefined(this.autocomplete)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?displayonly="${this.displayonly}" maxlength="${ifDefined(this.maxlength)}" value-state="${ifDefined(this.valueState)}" supporting-text="${ifDefined(this.supportingText)}" accessible-name="${ifDefined(this.accessibleName)}" accessible-name-ref="${ifDefined(this.accessibleNameRef)}" accessible-icon-name="${ifDefined(this.showButtonTooltip)}" show-button-tooltip="${ifDefined(this.showButtonTooltip)}" @click-icon="${this.handleShowPassword}" icon="${ifDefined(this.iconButton)}"></udex-text-field>`;}
 
 
 export default block0;

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

@@ -4,12 +4,12 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type PhoneNumberField from "../../PhoneNumberField.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-phone-number-field" @ui5-selection-change="${ifDefined(this.handleSelect)}" @ui5-before-open="${ifDefined(this.handleDropdownOpen)}" @ui5-before-close="${ifDefined(this.handleDropdownClose)}">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-dropdown", tags, suffix)} class="udex-phone-number-field__dropdown" id="${ifDefined(this._id)}_dropdown-menu" horizontal-align="Left" height="${ifDefined(this.height)}"><${scopeTag("udex-list", tags, suffix)}>${ repeat(this.countriesList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list", tags, suffix)}></${scopeTag("udex-dropdown", tags, suffix)}><div class="udex-phone-number-field__input-wrapper">${ !this.displayonly ? block5.call(this, context, tags, suffix) : undefined }<input class="udex-phone-number-field__input" id="${ifDefined(this._id)}-phone" type="tel" .value="${ifDefined(this.value)}" placeholder="${ifDefined(this.phoneFormat)}" maxlength="${ifDefined(this.maxlength)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" autocomplete="tel" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleName)}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.ariaInvalid)}" aria-describedby="${ifDefined(this.ariaDescribedById)}" @input="${this.handleInput}" @change="${this.handleChange}" @click="${this.handleClick}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @keydown="${this.handleKeyDown}" @keyup="${this.handleKeyUp}"></div></div>${ this.supportingText ? block6.call(this, context, tags, suffix) : undefined }${ this.supportingText ? block7.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block8.call(this, context, tags, suffix) : undefined }${ this.readonly ? block9.call(this, context, tags, suffix) : undefined }<span id="${ifDefined(this._id)}-countrySelectorAriaLabel" class="hidden-text">${ifDefined(this.countrySelectorAriaLabel)}</span>` : html`<div class="udex-phone-number-field" @ui5-selection-change="${ifDefined(this.handleSelect)}" @ui5-before-open="${ifDefined(this.handleDropdownOpen)}" @ui5-before-close="${ifDefined(this.handleDropdownClose)}">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<udex-dropdown class="udex-phone-number-field__dropdown" id="${ifDefined(this._id)}_dropdown-menu" horizontal-align="Left" height="${ifDefined(this.height)}"><udex-list>${ repeat(this.countriesList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</udex-list></udex-dropdown><div class="udex-phone-number-field__input-wrapper">${ !this.displayonly ? block5.call(this, context, tags, suffix) : undefined }<input class="udex-phone-number-field__input" id="${ifDefined(this._id)}-phone" type="tel" .value="${ifDefined(this.value)}" placeholder="${ifDefined(this.phoneFormat)}" maxlength="${ifDefined(this.maxlength)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" autocomplete="tel" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleName)}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.ariaInvalid)}" aria-describedby="${ifDefined(this.ariaDescribedById)}" @input="${this.handleInput}" @change="${this.handleChange}" @click="${this.handleClick}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @keydown="${this.handleKeyDown}" @keyup="${this.handleKeyUp}"></div></div>${ this.supportingText ? block6.call(this, context, tags, suffix) : undefined }${ this.supportingText ? block7.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block8.call(this, context, tags, suffix) : undefined }${ this.readonly ? block9.call(this, context, tags, suffix) : undefined }<span id="${ifDefined(this._id)}-countrySelectorAriaLabel" class="hidden-text">${ifDefined(this.countrySelectorAriaLabel)}</span>`;}
+function block0 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-phone-number-field" @ui5-selection-change="${ifDefined(this.handleSelect)}" @ui5-before-open="${ifDefined(this.handleDropdownOpen)}" @ui5-before-close="${ifDefined(this.handleDropdownClose)}">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<${scopeTag("udex-dropdown", tags, suffix)} class="udex-phone-number-field__dropdown" id="${ifDefined(this._id)}_dropdown-menu" horizontal-align="Left" height="${ifDefined(this.height)}"><${scopeTag("udex-list", tags, suffix)}>${ repeat(this.countriesList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list", tags, suffix)}></${scopeTag("udex-dropdown", tags, suffix)}><div class="udex-phone-number-field__input-wrapper">${ !this.displayonly ? block5.call(this, context, tags, suffix) : undefined }<input class="udex-phone-number-field__input" id="${ifDefined(this._id)}-phone" type="tel" .value="${ifDefined(this.value)}" placeholder="${ifDefined(this.phoneFormat)}" maxlength="${ifDefined(this.maxlength)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" autocomplete="tel" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleName)}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.ariaInvalid)}" aria-describedby="${ifDefined(this.ariaDescribedById)}" @input="${this.handleInput}" @change="${this.handleChange}" @click="${this.handleClick}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @keydown="${this.handleKeyDown}" @keyup="${this.handleKeyUp}" tabindex="${ifDefined(this.inputTabIndex)}"></div></div>${ this.supportingText ? block6.call(this, context, tags, suffix) : undefined }${ this.supportingText ? block7.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block8.call(this, context, tags, suffix) : undefined }${ this.readonly ? block9.call(this, context, tags, suffix) : undefined }<span id="${ifDefined(this._id)}-countrySelectorAriaLabel" class="hidden-text">${ifDefined(this.countrySelectorAriaLabel)}</span>` : html`<div class="udex-phone-number-field" @ui5-selection-change="${ifDefined(this.handleSelect)}" @ui5-before-open="${ifDefined(this.handleDropdownOpen)}" @ui5-before-close="${ifDefined(this.handleDropdownClose)}">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<udex-dropdown class="udex-phone-number-field__dropdown" id="${ifDefined(this._id)}_dropdown-menu" horizontal-align="Left" height="${ifDefined(this.height)}"><udex-list>${ repeat(this.countriesList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</udex-list></udex-dropdown><div class="udex-phone-number-field__input-wrapper">${ !this.displayonly ? block5.call(this, context, tags, suffix) : undefined }<input class="udex-phone-number-field__input" id="${ifDefined(this._id)}-phone" type="tel" .value="${ifDefined(this.value)}" placeholder="${ifDefined(this.phoneFormat)}" maxlength="${ifDefined(this.maxlength)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" autocomplete="tel" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleName)}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.ariaInvalid)}" aria-describedby="${ifDefined(this.ariaDescribedById)}" @input="${this.handleInput}" @change="${this.handleChange}" @click="${this.handleClick}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @keydown="${this.handleKeyDown}" @keyup="${this.handleKeyUp}" tabindex="${ifDefined(this.inputTabIndex)}"></div></div>${ this.supportingText ? block6.call(this, context, tags, suffix) : undefined }${ this.supportingText ? block7.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block8.call(this, context, tags, suffix) : undefined }${ this.readonly ? block9.call(this, context, tags, suffix) : undefined }<span id="${ifDefined(this._id)}-countrySelectorAriaLabel" class="hidden-text">${ifDefined(this.countrySelectorAriaLabel)}</span>`;}
 function block1 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label id="udex-phone-number-field__label" class="udex-phone-number-field__label" for="${ifDefined(this._id)}-phone">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</label>`;}
 function block2 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return html` * `;}
 function block3 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} id="${ifDefined(item.iso)}" ?selected="${item.selected}"><div class="udex-phone-number-field__dropdown-list-item"><div class="udex-phone-number-field__flag" style="background-position-x: ${ifDefined(item.flagX)}; background-position-y: ${ifDefined(item.flagY)}"></div><span class="udex-phone-number-field__country-name">${ifDefined(item.countryName)}${ item.localName ? block4.call(this, context, tags, suffix, item, index) : undefined }${ifDefined(item.phonePrefix)}</span></div></${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item id="${ifDefined(item.iso)}" ?selected="${item.selected}"><div class="udex-phone-number-field__dropdown-list-item"><div class="udex-phone-number-field__flag" style="background-position-x: ${ifDefined(item.flagX)}; background-position-y: ${ifDefined(item.flagY)}"></div><span class="udex-phone-number-field__country-name">${ifDefined(item.countryName)}${ item.localName ? block4.call(this, context, tags, suffix, item, index) : undefined }${ifDefined(item.phonePrefix)}</span></div></udex-list-item>`;}
 function block4 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html` (${ifDefined(item.localName)}) `;}
-function block5 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} class="udex-phone-number-field__open-button" size="Large" icon="${ifDefined(this.buttonIcon)}" design="Tertiary" icon-end ?disabled="${this.isButtonDisabled}" aria-haspopup="true" accessible-name-ref="${ifDefined(this._id)}-countrySelectorAriaLabel ${ifDefined(this.ariaDescribedById)}" aria-label="${ifDefined(this.countrySelectorAriaLabel)}" aria-expanded="${ifDefined(this._dropdownExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown-menu" role="combobox" @click="${this.onClick}"><div class="udex-phone-number-field__open-button-text">${ifDefined(this.selectedCountryName)}${ifDefined(this.selectedPhonePrefix)}</div><div class="udex-phone-number-field__button-content"><img class="udex-phone-number-field__flag" aria-label=${ifDefined(this.selectedCountryName)} style="${styleMap(this.selectedFlagBackgroundPosition)}"></div></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button class="udex-phone-number-field__open-button" size="Large" icon="${ifDefined(this.buttonIcon)}" design="Tertiary" icon-end ?disabled="${this.isButtonDisabled}" aria-haspopup="true" accessible-name-ref="${ifDefined(this._id)}-countrySelectorAriaLabel ${ifDefined(this.ariaDescribedById)}" aria-label="${ifDefined(this.countrySelectorAriaLabel)}" aria-expanded="${ifDefined(this._dropdownExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown-menu" role="combobox" @click="${this.onClick}"><div class="udex-phone-number-field__open-button-text">${ifDefined(this.selectedCountryName)}${ifDefined(this.selectedPhonePrefix)}</div><div class="udex-phone-number-field__button-content"><img class="udex-phone-number-field__flag" aria-label=${ifDefined(this.selectedCountryName)} style="${styleMap(this.selectedFlagBackgroundPosition)}"></div></udex-button>`;}
+function block5 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} class="udex-phone-number-field__open-button" size="Large" icon="${ifDefined(this.buttonIcon)}" design="Tertiary" icon-end ?disabled="${this.isButtonDisabled}" aria-haspopup="true" accessible-name-ref="${ifDefined(this._id)}-countrySelectorAriaLabel ${ifDefined(this.ariaDescribedById)}" aria-label="${ifDefined(this.countrySelectorAriaLabel)}" aria-expanded="${ifDefined(this._dropdownExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown-menu" role="combobox" @click="${this.onClick}"><div class="udex-phone-number-field__open-button-text">${ifDefined(this.selectedCountryName)}${ifDefined(this.selectedPhonePrefix)}</div><div class="udex-phone-number-field__button-content"><img class="udex-phone-number-field__flag" aria-label="${ifDefined(this.selectedCountryName)}" style="${styleMap(this.selectedFlagBackgroundPosition)}"></div></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button class="udex-phone-number-field__open-button" size="Large" icon="${ifDefined(this.buttonIcon)}" design="Tertiary" icon-end ?disabled="${this.isButtonDisabled}" aria-haspopup="true" accessible-name-ref="${ifDefined(this._id)}-countrySelectorAriaLabel ${ifDefined(this.ariaDescribedById)}" aria-label="${ifDefined(this.countrySelectorAriaLabel)}" aria-expanded="${ifDefined(this._dropdownExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown-menu" role="combobox" @click="${this.onClick}"><div class="udex-phone-number-field__open-button-text">${ifDefined(this.selectedCountryName)}${ifDefined(this.selectedPhonePrefix)}</div><div class="udex-phone-number-field__button-content"><img class="udex-phone-number-field__flag" aria-label="${ifDefined(this.selectedCountryName)}" style="${styleMap(this.selectedFlagBackgroundPosition)}"></div></udex-button>`;}
 function block6 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-message", tags, suffix)} ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.fieldState)}"></${scopeTag("udex-status-message", tags, suffix)}>` : html`<udex-status-message ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.fieldState)}"></udex-status-message>`;}
 function block7 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}-supportingTextDesc" class="hidden-text">${ifDefined(this.supportingText)}</span>`;}
 function block8 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}-valueStateDesc" class="hidden-text">${ifDefined(this.valueStateText)}</span>`;}

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

@@ -9,12 +9,12 @@ function block1 (this: SearchSuggestions, context: UI5Element, tags: string[], s
 function block2 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div role="tree">${ this.isShowSuggestedList ? block3.call(this, context, tags, suffix) : undefined }${ this.isShowRecommendedList ? block6.call(this, context, tags, suffix) : undefined }</div>`;}
 function block3 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search-suggestions__block" role="treeitem">${ this.suggestedHeading ? block4.call(this, context, tags, suffix) : undefined }<div class="udex-search-suggestions__list" role="listbox" aria-labelledby="suggested-heading" tabindex="0" @keydown="${this.handleKeyDownPopover}">${ repeat(this.suggestedList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</div></div>`;}
 function block4 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-search-suggestions__heading" id="suggested-heading">${ifDefined(this.suggestedHeading)}</span>`;}
-function block5 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
+function block5 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" accessible-name="${ifDefined(item.suggestionDescription)}" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" accessible-name="${ifDefined(item.suggestionDescription)}" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
 function block6 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search-suggestions__block" role="treeitem">${ this.recommendedHeading ? block7.call(this, context, tags, suffix) : undefined }<div class="udex-search-suggestions__list" role="listbox" aria-labelledby="recommended-heading" tabindex="0" @keydown="${this.handleKeyDownPopover}">${ repeat(this.recommendedList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block8.call(this, context, tags, suffix, item, index)) }</div></div>`;}
 function block7 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-search-suggestions__heading" id="recommended-heading">${ifDefined(this.recommendedHeading)}</span>`;}
 function block8 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.hasCustomIcon ? block9.call(this, context, tags, suffix, item, index) : block10.call(this, context, tags, suffix, item, index) }`;}
-function block9 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
-function block10 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="${ifDefined(item.id)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="${ifDefined(item.id)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
+function block9 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" accessible-name="${ifDefined(item.suggestionDescription)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="${ifDefined(item.id)}" icon="${ifDefined(item.icon)}" type="Button" design="Default" class="udex-search-suggestions__item-button" title="${ifDefined(item.title)}" accessible-name="${ifDefined(item.suggestionDescription)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
+function block10 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="${ifDefined(item.id)}" type="Button" design="Default" class="udex-search-suggestions__item-button" accessible-name="${ifDefined(item.suggestionDescription)}" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="${ifDefined(item.id)}" type="Button" design="Default" class="udex-search-suggestions__item-button" accessible-name="${ifDefined(item.suggestionDescription)}" title="${ifDefined(item.title)}" tabindex="-1" role="option" @click="${item.handleSelectItem}">${unsafeHTML(item.text)}</ui5-button>`;}
 
 
 export default block0;