@sapudex/web-components 0.192.4 → 0.224.0

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

@@ -5,11 +5,11 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: MessageStrip, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${classMap(this.classes.root as ClassMapValue)} udex-message-strip" id="${ifDefined(this._id)}" role="note" aria-labelledby="${ifDefined(this._id)}">${ !this.shouldHideIcon ? block1.call(this, context, tags, suffix) : undefined }<span class="ui5-hidden-text">${ifDefined(this.hiddenText)}</span><span class="ui5-message-strip-text message-strip__text">${ !this.hideTextStatus ? block4.call(this, context, tags, suffix) : undefined }<slot></slot></span>${ !this.hideCloseButton ? block5.call(this, context, tags, suffix) : undefined }</div>`;}
-function block1 (this: MessageStrip, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="ui5-message-strip-icon-wrapper udex-message-strip" aria-hidden="true">${ this.iconProvided ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div>`;}
+function block1 (this: MessageStrip, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="ui5-message-strip-icon-wrapper udex-message-strip" aria-hidden="true">${ this.hasIcon ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div>`;}
 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)}" ?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)}" ?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;

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

@@ -4,16 +4,18 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Search from "../../Search.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search__root ${ifDefined(this.searchClasses)}">${ this.isShowSearchHomePrefix ? block1.call(this, context, tags, suffix) : undefined }<form role="search" class="udex-search__container ${ifDefined(this.focusClasses)}${ifDefined(this.isNotEmptyClass)}">${ this.labelAnimationDisabled ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }<div class="udex-search__icons">${ this.isShowResetButton ? block5.call(this, context, tags, suffix) : undefined }${ this.isVoiceButton ? block6.call(this, context, tags, suffix) : undefined }${ this.showSubmitButton ? block7.call(this, context, tags, suffix) : undefined }</div></form></div>`;}
-function block1 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-search__prefix ${ifDefined(this.prefixWrapperClasses)}"><button type="button" role="combobox" aria-expanded="${ifDefined(this._prefixDropdownExpanded)}" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__prefix-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}></button><${scopeTag("ui5-popover", tags, suffix)} id="udex-search-prefix" class="${ifDefined(this.prefixPopoverClasses)}" hide-arrow placement-type="Bottom" horizontal-align="Left" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-search__prefix ${ifDefined(this.prefixWrapperClasses)}"><button type="button" role="combobox" aria-expanded="${ifDefined(this._prefixDropdownExpanded)}" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down"></ui5-icon></button><ui5-popover id="udex-search-prefix" class="${ifDefined(this.prefixPopoverClasses)}" hide-arrow placement-type="Bottom" horizontal-align="Left" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></ui5-popover></div>`;}
-function block2 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<input id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" aria-autocomplete="list" aria-haspopup="${ifDefined(this.getAriaHasPopup)}" aria-label="Search" placeholder="${ifDefined(this.label)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
-function block3 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.label ? block4.call(this, context, tags, suffix) : undefined }<input id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" aria-autocomplete="list" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-haspopup="${ifDefined(this.getAriaHasPopup)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
+function block0 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search__root ${ifDefined(this.searchClasses)}">${ this.isShowSearchHomePrefix ? block1.call(this, context, tags, suffix) : undefined }<form role="search" class="udex-search__container ${ifDefined(this.focusClasses)}${ifDefined(this.isNotEmptyClass)}">${ this.labelAnimationDisabled ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }${ this.accInfo.ariaDescription ? block5.call(this, context, tags, suffix) : undefined }<div class="udex-search__icons">${ this.isShowHomeResetButton ? block6.call(this, context, tags, suffix) : undefined }${ this.isShowResetButton ? block7.call(this, context, tags, suffix) : undefined }${ this.isVoiceButton ? block8.call(this, context, tags, suffix) : undefined }${ this.showNonInteractiveButton ? block9.call(this, context, tags, suffix) : undefined }${ this.showSubmitHomeButton ? block10.call(this, context, tags, suffix) : undefined }${ this.showSubmitStandardButton ? block11.call(this, context, tags, suffix) : undefined }</div></form></div>`;}
+function block1 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-search__prefix ${ifDefined(this.prefixWrapperClasses)}"><button type="button" role="combobox" aria-expanded="${ifDefined(this._prefixDropdownExpanded)}" aria-label="${ifDefined(this.labelPrefix)}" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__prefix-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}></button><${scopeTag("ui5-popover", tags, suffix)} id="udex-search-prefix" class="${ifDefined(this.prefixPopoverClasses)}" hide-arrow placement-type="Bottom" horizontal-align="Left" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-search__prefix ${ifDefined(this.prefixWrapperClasses)}"><button type="button" role="combobox" aria-expanded="${ifDefined(this._prefixDropdownExpanded)}" aria-label="${ifDefined(this.labelPrefix)}" aria-haspopup="true" aria-controls="udex-search-prefix" class="udex-search__prefix-button" @click="${this.handleDropdownClick}"><span class="udex-search__prefix-label">${ifDefined(this.labelPrefix)}</span><ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down"></ui5-icon></button><ui5-popover id="udex-search-prefix" class="${ifDefined(this.prefixPopoverClasses)}" hide-arrow placement-type="Bottom" horizontal-align="Left" style="${styleMap(this.prefixPopoverStyles)}" @after-close="${this.handleAfterClosePrefixPopover}"><slot></slot></ui5-popover></div>`;}
+function block2 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<input role="searchbox" id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" aria-autocomplete="list" aria-haspopup="${ifDefined(this.getAriaHasPopup)}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-describedby="search-description" placeholder="${ifDefined(this.effectivePlaceholder)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
+function block3 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.label ? block4.call(this, context, tags, suffix) : undefined }<input role="searchbox" id="search-input" type="search" name="search" class="udex-search__field" autocomplete="off" aria-autocomplete="list" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-describedby="search-description" aria-haspopup="${ifDefined(this.getAriaHasPopup)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
 function block4 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label for="search-input" class="${ifDefined(this.labelClasses)}">${ifDefined(this.label)}</label>`;}
-function block5 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__button-icon" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" accessible-role="presentation" name="decline"></${scopeTag("ui5-icon", tags, suffix)}></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"><ui5-icon class="udex-search__button-icon" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" accessible-role="presentation" name="decline"></ui5-icon></ui5-button>`;}
-function block6 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="${ifDefined(this.tooltipInfo.tooltipVoiceButton)}" @click="${this.onVoice}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="${ifDefined(this.tooltipInfo.tooltipVoiceButton)}" @click="${this.onVoice}"></ui5-button>`;}
-function block7 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.nonInteractiveSubmitButton ? block8.call(this, context, tags, suffix) : block9.call(this, context, tags, suffix) }`;}
-function block8 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-search__icon" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" name="search"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-search__icon" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" name="search"></ui5-icon>`;}
-function block9 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></ui5-button>`;}
+function block5 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span role="status" id="search-description" class="hidden" aria-hidden="true">${ifDefined(this.accInfo.ariaDescription)}</span>`;}
+function block6 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"><${scopeTag("ui5-icon", tags, suffix)} class="udex-search__button-icon" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" accessible-role="presentation" name="decline"></${scopeTag("ui5-icon", tags, suffix)}></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"><ui5-icon class="udex-search__button-icon" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" accessible-role="presentation" name="decline"></ui5-icon></ui5-button>`;}
+function block7 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} id="reset-button" class="udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" icon="decline" size="Large" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button id="reset-button" class="udex-search__reset-button" design="Default" tooltip="${ifDefined(this.tooltipInfo.tooltipResetButton)}" icon="decline" size="Large" accessible-name="${ifDefined(this.accInfo.accessibleNameResetIcon)}" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></udex-control-button>`;}
+function block8 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="${ifDefined(this.tooltipInfo.tooltipVoiceButton)}" @click="${this.onVoice}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="voice-button" class="udex-search__button udex-search__voice-button ${ifDefined(this.voiceActiveClass)}" design="Default" icon="microphone" tooltip="${ifDefined(this.tooltipInfo.tooltipVoiceButton)}" @click="${this.onVoice}"></ui5-button>`;}
+function block9 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-search__icon" aria-hidden="true" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" name="search"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-search__icon" aria-hidden="true" accessible-name="${ifDefined(this.accInfo.accessibleNameSearchIcon)}" name="search"></ui5-icon>`;}
+function block10 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-button", tags, suffix)} id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="submit-button" class="udex-search__button udex-search__submit-button ${ifDefined(this.searchButtonActiveClass)}" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></ui5-button>`;}
+function block11 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} id="submit-button" class="udex-search__submit-button" size="Large" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button id="submit-button" class="udex-search__submit-button" size="Large" design="Default" icon="search" tooltip="${ifDefined(this.tooltipInfo.tooltipSubmitButton)}" @click="${this.onSubmit}"></udex-control-button>`;}
 
 
 export default block0;

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

@@ -7,14 +7,16 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 function block0 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.showSearch ? block1.call(this, context, tags, suffix) : undefined }${ this.isListEmpty ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) } `;}
 function block1 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-search", tags, suffix)} slot="header" mode="Standard" class="udex-filter-menu__search" label="${ifDefined(this.searchPlaceholder)}" label-animation-disabled non-interactive-submit-button show-submit-button></${scopeTag("udex-search", tags, suffix)}>` : html`<udex-search slot="header" mode="Standard" class="udex-filter-menu__search" label="${ifDefined(this.searchPlaceholder)}" label-animation-disabled non-interactive-submit-button show-submit-button></udex-search>`;}
 function block2 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-no-result"><span>${ifDefined(this.getNoResultText)}&lrm;</span></div>`;}
-function block3 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list", tags, suffix)} id="udex-list" role="${ifDefined(this.roleForGroupList)}" accessible-role="${ifDefined(this.accessibleRoleForList)}" class="udex-filter-menu__list" ?controlled="${this.isControlled}" mode="${ifDefined(this.mode)}">${ repeat(this._filteredItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block4.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list", tags, suffix)}>` : html`<udex-list id="udex-list" role="${ifDefined(this.roleForGroupList)}" accessible-role="${ifDefined(this.accessibleRoleForList)}" class="udex-filter-menu__list" ?controlled="${this.isControlled}" mode="${ifDefined(this.mode)}">${ repeat(this._filteredItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block4.call(this, context, tags, suffix, item, index)) }</udex-list>`;}
-function block4 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.isGroup ? block5.call(this, context, tags, suffix, item, index) : block10.call(this, context, tags, suffix, item, index) }`;}
-function block5 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.item.isSelectAllHeader ? block6.call(this, context, tags, suffix, item, index) : block8.call(this, context, tags, suffix, item, index) }`;}
-function block6 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-select-all", tags, suffix)} _additional-class-name="${ifDefined(this.additionalClassName)}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" ?controlled="${item.item.controlled}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list-select-all", tags, suffix)}>` : html`<udex-list-select-all _additional-class-name="${ifDefined(this.additionalClassName)}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" ?controlled="${item.item.controlled}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</udex-list-select-all>`;}
-function block7 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
-function block8 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-group-header", tags, suffix)} role="group" _additional-class-name="udex-searchable-list__header" class="${ifDefined(this.groupClassName)}" ?non-interactive="${item.item.nonInteractive}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" supporting-text="${ifDefined(item.item.supportingText)}" ?controlled="${item.item.controlled}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list-group-header", tags, suffix)}>` : html`<udex-list-group-header role="group" _additional-class-name="udex-searchable-list__header" class="${ifDefined(this.groupClassName)}" ?non-interactive="${item.item.nonInteractive}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" supporting-text="${ifDefined(item.item.supportingText)}" ?controlled="${item.item.controlled}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</udex-list-group-header>`;}
-function block9 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
-function block10 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" label="${ifDefined(item.item.label)}">${unsafeHTML(item.item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" label="${ifDefined(item.item.label)}">${unsafeHTML(item.item.innerHTML)}</udex-list-item>`;}
+function block3 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.busy ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }`;}
+function block4 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-busy-indicator", tags, suffix)} class="udex-busy-indicator" size="Medium" delay="${ifDefined(this.busyDelay)}" active></${scopeTag("ui5-busy-indicator", tags, suffix)}>` : html`<ui5-busy-indicator class="udex-busy-indicator" size="Medium" delay="${ifDefined(this.busyDelay)}" active></ui5-busy-indicator>`;}
+function block5 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list", tags, suffix)} id="udex-list" role="${ifDefined(this.roleForGroupList)}" accessible-role="${ifDefined(this.accessibleRoleForList)}" class="udex-filter-menu__list" ?controlled="${this.isControlled}" mode="${ifDefined(this.mode)}">${ repeat(this._filteredItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list", tags, suffix)}>` : html`<udex-list id="udex-list" role="${ifDefined(this.roleForGroupList)}" accessible-role="${ifDefined(this.accessibleRoleForList)}" class="udex-filter-menu__list" ?controlled="${this.isControlled}" mode="${ifDefined(this.mode)}">${ repeat(this._filteredItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</udex-list>`;}
+function block6 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.isGroup ? block7.call(this, context, tags, suffix, item, index) : block12.call(this, context, tags, suffix, item, index) }`;}
+function block7 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.item.isSelectAllHeader ? block8.call(this, context, tags, suffix, item, index) : block10.call(this, context, tags, suffix, item, index) }`;}
+function block8 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-select-all", tags, suffix)} _additional-class-name="${ifDefined(this.additionalClassName)}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" ?controlled="${item.item.controlled}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list-select-all", tags, suffix)}>` : html`<udex-list-select-all _additional-class-name="${ifDefined(this.additionalClassName)}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" ?controlled="${item.item.controlled}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block9.call(this, context, tags, suffix, item, index)) }</udex-list-select-all>`;}
+function block9 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
+function block10 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-group-header", tags, suffix)} role="group" _additional-class-name="udex-searchable-list__header" class="${ifDefined(this.groupClassName)}" ?non-interactive="${item.item.nonInteractive}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" supporting-text="${ifDefined(item.item.supportingText)}" ?controlled="${item.item.controlled}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list-group-header", tags, suffix)}>` : html`<udex-list-group-header role="group" _additional-class-name="udex-searchable-list__header" class="${ifDefined(this.groupClassName)}" ?non-interactive="${item.item.nonInteractive}" data-token-id="${ifDefined(item.item._id)}" label="${ifDefined(item.item.label)}" supporting-text="${ifDefined(item.item.supportingText)}" ?controlled="${item.item.controlled}" ?disabled="${item.item.disabled}" ?selected="${item.item.selected}" ?indeterminate="${item.item.indeterminate}">${ repeat(item.groupItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block11.call(this, context, tags, suffix, item, index)) }</udex-list-group-header>`;}
+function block11 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item role="none" data-token-id="${ifDefined(item._id)}" ?controlled="${item.controlled}" mode="${ifDefined(item.mode)}" supporting-text="${ifDefined(item.supportingText)}" ?divider="${item.divider}" ?disabled="${item.disabled}" ?selected="${item.selected}" label="${ifDefined(item.label)}">${unsafeHTML(item.innerHTML)}</udex-list-item>`;}
+function block12 (this: SearchableListBase, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" label="${ifDefined(item.item.label)}">${unsafeHTML(item.item.innerHTML)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item data-token-id="${ifDefined(item.item._id)}" supporting-text="${ifDefined(item.item.supportingText)}" ?disabled="${item.item.disabled}" ?controlled="${item.controlled}" ?divider="${item.divider}" ?selected="${item.item.selected}" label="${ifDefined(item.item.label)}">${unsafeHTML(item.item.innerHTML)}</udex-list-item>`;}
 
 
 export default block0;

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

@@ -5,12 +5,12 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isLink ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) } `;}
-function block1 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-secondary-navigation__item" role="${ifDefined(this.menuItemRole)}" ?active="${this.isActive}" href="${ifDefined(this.path)}" target="${ifDefined(this.target)}" @keydown="${this.handleItemLinkKeyDown}" @click="${this.fireNavItemClickEvent}">${ifDefined(this.itemLabel)}</a>`;}
+function block1 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-secondary-navigation__item" role="${ifDefined(this.menuItemRole)}" ?active="${this.isActive}" href="${ifDefined(this.path)}" target="${ifDefined(this.target)}" aria-current="${ifDefined(this.ariaCurrent)}" @keydown="${this.handleItemLinkKeyDown}" @click="${this.fireNavItemClickEvent}">${ifDefined(this.itemLabel)}</a>`;}
 function block2 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button class="udex-secondary-navigation__item" role="${ifDefined(this.itemRole)}" tabindex="0" ?active="${this.isActive}" aria-haspopup="${ifDefined(this.hasNestedItems)}" aria-expanded="${ifDefined(this.isOpen)}" aria-label="${ifDefined(this.ariaLabel)}" @keydown="${this.handleItemEnterOrSpaceKeys}" @click="${this.openDropdown}"><span class="udex-secondary-navigation__item-text-wrap">${ifDefined(this.itemLabel)}${ this._subTitle ? block3.call(this, context, tags, suffix) : undefined }${ this.hasNestedItems ? block4.call(this, context, tags, suffix) : undefined }</span></button>${ this.isOpen ? block5.call(this, context, tags, suffix) : undefined }`;}
 function block3 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-secondary-navigation__item-sub-title">${ifDefined(this._subTitle)}</span>`;}
 function block4 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-secondary-navigation__item-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-secondary-navigation__item-icon" name="slim-arrow-down"></ui5-icon>`;}
 function block5 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__dropdown"><ul role="menu" class="udex-secondary-navigation__dropdown-list" @keydown="${this.handleSubItemKeyDown}">${ repeat(this._processedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</ul><div @keydown="${this.handleButtonsEscKey}"><slot></slot></div></div>`;}
-function block6 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="none"><${scopeTag("udex-secondary-navigation-sub-item", tags, suffix)} index="${index}" @ui5-sub-item-click="${ifDefined(this.onSubItemClick)}" @ui5-back-item-click="${ifDefined(this.onBackClick)}" is-back="${ifDefined(item.isBack)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" .nestedItems="${ifDefined(item.items)}" path="${ifDefined(item.path)}" target="${ifDefined(item.target)}" ?is-active="${item.active}"></${scopeTag("udex-secondary-navigation-sub-item", tags, suffix)}></li>` : html`<li role="none"><udex-secondary-navigation-sub-item index="${index}" @ui5-sub-item-click="${ifDefined(this.onSubItemClick)}" @ui5-back-item-click="${ifDefined(this.onBackClick)}" is-back="${ifDefined(item.isBack)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" .nestedItems="${ifDefined(item.items)}" path="${ifDefined(item.path)}" target="${ifDefined(item.target)}" ?is-active="${item.active}"></udex-secondary-navigation-sub-item></li>`;}
+function block6 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="none"><${scopeTag("udex-secondary-navigation-sub-item", tags, suffix)} index="${index}" @ui5-sub-item-click="${ifDefined(this.onSubItemClick)}" @ui5-back-item-click="${ifDefined(this.onBackClick)}" is-back="${ifDefined(item.isBack)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" .nestedItems="${ifDefined(item.items)}" path="${ifDefined(item.path)}" target="${ifDefined(item.target)}" ?active="${item.active}"></${scopeTag("udex-secondary-navigation-sub-item", tags, suffix)}></li>` : html`<li role="none"><udex-secondary-navigation-sub-item index="${index}" @ui5-sub-item-click="${ifDefined(this.onSubItemClick)}" @ui5-back-item-click="${ifDefined(this.onBackClick)}" is-back="${ifDefined(item.isBack)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" .nestedItems="${ifDefined(item.items)}" path="${ifDefined(item.path)}" target="${ifDefined(item.target)}" ?active="${item.active}"></udex-secondary-navigation-sub-item></li>`;}
 
 
 export default block0;

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

@@ -7,9 +7,9 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 function block0 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isBack ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) } `;}
 function block1 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button tabindex="${ifDefined(this._tabIndex)}" @click="${this.onBackItemClick}" role="menuitem" aria-label="${ifDefined(this.backButtonAriaLabel)}" aria-haspopup="true" is-back class="udex-secondary-navigation__dropdown-item"><${scopeTag("ui5-icon", tags, suffix)} class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back" name="slim-arrow-left"></${scopeTag("ui5-icon", tags, suffix)}>${ifDefined(this.itemLabel)}</button>` : html`<button tabindex="${ifDefined(this._tabIndex)}" @click="${this.onBackItemClick}" role="menuitem" aria-label="${ifDefined(this.backButtonAriaLabel)}" aria-haspopup="true" is-back class="udex-secondary-navigation__dropdown-item"><ui5-icon class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back" name="slim-arrow-left"></ui5-icon>${ifDefined(this.itemLabel)}</button>`;}
 function block2 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isButton ? block3.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }`;}
-function block3 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button tabindex="${ifDefined(this._tabIndex)}" @click="${this.onItemClick}" role="menuitem" aria-haspopup="${ifDefined(this.hasItems)}" ?sub-active="${this.isSubItemActive}" aria-label="${ifDefined(this.label)}" ?active="${this.isActive}" class="udex-secondary-navigation__dropdown-item">${ifDefined(this.itemLabel)}${ this.hasItems ? block4.call(this, context, tags, suffix) : undefined }</button>`;}
+function block3 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button tabindex="${ifDefined(this._tabIndex)}" @click="${this.onItemClick}" role="menuitem" aria-haspopup="${ifDefined(this.hasItems)}" ?sub-active="${this.isSubItemActive}" aria-label="${ifDefined(this.label)}" ?active="${this.active}" aria-current="${ifDefined(this.ariaCurrent)}" class="udex-secondary-navigation__dropdown-item">${ifDefined(this.itemLabel)}${ this.hasItems ? block4.call(this, context, tags, suffix) : undefined }</button>`;}
 function block4 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-secondary-navigation__dropdown-icon" name="slim-arrow-right"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-secondary-navigation__dropdown-icon" name="slim-arrow-right"></ui5-icon>`;}
-function block5 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a tabindex="${ifDefined(this._tabIndex)}" @click="${this.onItemClick}" role="menuitem" href="${ifDefined(this.path)}" target="${ifDefined(this.target)}" ?active="${this.isActive}" class="udex-secondary-navigation__dropdown-item">${ifDefined(this.itemLabel)}</a>`;}
+function block5 (this: SecondaryNavigationSubItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a tabindex="${ifDefined(this._tabIndex)}" @click="${this.onItemClick}" role="menuitem" href="${ifDefined(this.path)}" target="${ifDefined(this.target)}" ?active="${this.active}" aria-current="${ifDefined(this.ariaCurrent)}" class="udex-secondary-navigation__dropdown-item">${ifDefined(this.itemLabel)}</a>`;}
 
 
 export default block0;

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type SecondaryNavigation from "../../SecondaryNavigation.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.title.length ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block6.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</div></div><${scopeTag("udex-secondary-navigation-item", tags, suffix)} @keydown="${this.handleKeyDown}" class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.title)}" mobile-link-title="${ifDefined(this.title)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block8.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-secondary-navigation-item", tags, suffix)}></div> ` : html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.title.length ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block6.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</div></div><udex-secondary-navigation-item @keydown="${this.handleKeyDown}" class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.title)}" mobile-link-title="${ifDefined(this.title)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block8.call(this, context, tags, suffix) : undefined }</udex-secondary-navigation-item></div> `;}
+function block0 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.title.length ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block6.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</div></div><${scopeTag("udex-secondary-navigation-item", tags, suffix)} @keydown="${this.handleKeyDown}" _max-height="${ifDefined(this.maxDropdownHeight)}" class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.title)}" mobile-link-title="${ifDefined(this.title)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block8.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-secondary-navigation-item", tags, suffix)}></div> ` : html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder">${ this.title.length ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.visibleItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block6.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block7.call(this, context, tags, suffix) : undefined }</div></div><udex-secondary-navigation-item @keydown="${this.handleKeyDown}" _max-height="${ifDefined(this.maxDropdownHeight)}" class="udex-secondary-navigation__mobile-nav" role="button" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" label="${ifDefined(this.title)}" mobile-link-title="${ifDefined(this.title)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" .subItems="${ifDefined(this.parsedItems)}">${ this.hasMobileButtonsSlot ? block8.call(this, context, tags, suffix) : undefined }</udex-secondary-navigation-item></div> `;}
 function block1 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__breadcrumbs"><slot name="breadcrumbs"></slot></div>`;}
 function block2 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__heading">${ this.titleHref.length ? block3.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }</div>`;}
 function block3 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-secondary-navigation__title" href="${ifDefined(this.titleHref)}">${ifDefined(this.title)}</a>`;}

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

@@ -4,14 +4,14 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type SelectBox from "../../SelectBox.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div class="udex-text-field__wrap"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-tag-icon-click="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="listbox" aria-controls="udex-select-box__dropdown" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div></div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><${scopeTag("ui5-popover", tags, suffix)} hide-arrow id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?allow-target-overlap="${this.allowTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-before-open="${ifDefined(this.handleDropdownBeforeOpen)}" @ui5-after-close="${ifDefined(this.handleDropdownAfterClose)}" @search-keydown="${this.handleKeyDownSearch}" horizontal-align="Left" placement-type="Bottom">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div class="udex-text-field__wrap"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-tag-icon-click="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="listbox" aria-controls="udex-select-box__dropdown" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div></div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><ui5-popover hide-arrow id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?allow-target-overlap="${this.allowTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-before-open="${ifDefined(this.handleDropdownBeforeOpen)}" @ui5-after-close="${ifDefined(this.handleDropdownAfterClose)}" @search-keydown="${this.handleKeyDownSearch}" horizontal-align="Left" placement-type="Bottom">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</ui5-popover></div>`;}
-function block1 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="${ifDefined(this.labelClass)}">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</span>`;}
+function block0 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div class="udex-text-field__wrap"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-tag-icon-click="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="${ifDefined(this.listboxRole)}" aria-controls="${ifDefined(this.popoverId)}" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div></div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><${scopeTag("ui5-popover", tags, suffix)} hide-arrow id="${ifDefined(this.popoverId)}" class="udex-select-box__dropdown" ?allow-target-overlap="${this.allowTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-before-open="${ifDefined(this.handleDropdownBeforeOpen)}" @ui5-after-close="${ifDefined(this.handleDropdownAfterClose)}" @search-keydown="${this.handleKeyDownSearch}" horizontal-align="Left" placement-type="Bottom">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</${scopeTag("ui5-popover", tags, suffix)}></div>` : html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div class="udex-text-field__wrap"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-tag-icon-click="${ifDefined(this.handleRemoveTag)}" @keydown="${this.handleKeyDownTrigger}" ?open="${this._open}" tabindex="${ifDefined(this.effectiveTabIndex)}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?disabled="${this.disabled}" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" aria-readonly="${ifDefined(this.isReadOrDisplayOnly)}" aria-disabled="${ifDefined(this.disabled)}" aria-haspopup="${ifDefined(this.listboxRole)}" aria-controls="${ifDefined(this.popoverId)}" aria-expanded="${ifDefined(this.tokenizerExpanded)}" aria-activedescendant>${ this.label ? block1.call(this, context, tags, suffix) : undefined }${ this.showSingleSelectedOption ? block3.call(this, context, tags, suffix) : undefined }${ this.showMultiSelectedOptions ? block4.call(this, context, tags, suffix) : undefined }${ this.showTrigger ? block7.call(this, context, tags, suffix) : undefined }</div></div>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><ui5-popover hide-arrow id="${ifDefined(this.popoverId)}" class="udex-select-box__dropdown" ?allow-target-overlap="${this.allowTargetOverlap}" @keydown="${this.handleKeyDownDropdown}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}" @ui5-before-open="${ifDefined(this.handleDropdownBeforeOpen)}" @ui5-after-close="${ifDefined(this.handleDropdownAfterClose)}" @search-keydown="${this.handleKeyDownSearch}" horizontal-align="Left" placement-type="Bottom">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</ui5-popover></div>`;}
+function block1 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}-single-label" class="${ifDefined(this.labelClass)}">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</span>`;}
 function block2 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html` * `;}
 function block3 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-text-field__text-holder"><span class="udex-text-field__single-label">${unsafeHTML(this._singleSelectedOption)}</span></div>`;}
 function block4 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-tag-group", tags, suffix)} class="udex-tag-group" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" tooltip-placement="${ifDefined(this.tooltipPlacement)}" @ui5-tag-click="${ifDefined(this.handleTagPress)}" @ui5-show-more-tags="${ifDefined(this.getHandlerShowMoreItems)}" @ui5-tag-keydown="${ifDefined(this.handleKeyDownTag)}" ?expanded="${this.tokenizerExpanded}">${ repeat(this.selectedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-tag-group", tags, suffix)}>` : html`<udex-tag-group class="udex-tag-group" ?displayonly="${this.displayonly}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" tooltip-placement="${ifDefined(this.tooltipPlacement)}" @ui5-tag-click="${ifDefined(this.handleTagPress)}" @ui5-show-more-tags="${ifDefined(this.getHandlerShowMoreItems)}" @ui5-tag-keydown="${ifDefined(this.handleKeyDownTag)}" ?expanded="${this.tokenizerExpanded}">${ repeat(this.selectedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</udex-tag-group>`;}
 function block5 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ !item.isGroup ? block6.call(this, context, tags, suffix, item, index) : undefined }`;}
 function block6 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-tag", tags, suffix)} text="${ifDefined(item.label)}" id="${ifDefined(item._id)}" icon="decline"></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag text="${ifDefined(item.label)}" id="${ifDefined(item._id)}" icon="decline"></udex-tag>`;}
-function block7 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} tabindex="${ifDefined(this.triggerTabIndex)}" class="udex-text-field__trigger" role="combobox" size="Large" icon="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}" aria-label="${ifDefined(this.iconAccessibleNameText)}" aria-haspopup="listbox" aria-expanded="${ifDefined(this._open)}" aria-controls="${ifDefined(this.accInfo.ariaControls)}" @click="${this.getHandleMultiSelectOpen}" aria-activedescendant></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button tabindex="${ifDefined(this.triggerTabIndex)}" class="udex-text-field__trigger" role="combobox" size="Large" icon="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}" aria-label="${ifDefined(this.iconAccessibleNameText)}" aria-haspopup="listbox" aria-expanded="${ifDefined(this._open)}" aria-controls="${ifDefined(this.accInfo.ariaControls)}" @click="${this.getHandleMultiSelectOpen}" aria-activedescendant></udex-control-button>`;}
+function block7 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button role="combobox" aria-labelledby="${ifDefined(this._id)}-single-label" aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" aria-controls="${ifDefined(this.accessibilityAttributes.controls)}" aria-haspopup="${ifDefined(this.accessibilityAttributes.hasPopup)}" aria-label="${ifDefined(this.accessibilityAttributes.ariaLabel)}" class="udex-text-field__trigger" tabindex="${ifDefined(this.triggerTabIndex)}" @keydown="${this.handleKeyDownTrigger}" @click="${this.getHandleMultiSelectOpen}"><${scopeTag("ui5-icon", tags, suffix)} name="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></button>` : html`<button role="combobox" aria-labelledby="${ifDefined(this._id)}-single-label" aria-expanded="${ifDefined(this.accessibilityAttributes.expanded)}" aria-controls="${ifDefined(this.accessibilityAttributes.controls)}" aria-haspopup="${ifDefined(this.accessibilityAttributes.hasPopup)}" aria-label="${ifDefined(this.accessibilityAttributes.ariaLabel)}" class="udex-text-field__trigger" tabindex="${ifDefined(this.triggerTabIndex)}" @keydown="${this.handleKeyDownTrigger}" @click="${this.getHandleMultiSelectOpen}"><ui5-icon name="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}"></ui5-icon></button>`;}
 function block8 (this: SelectBox, 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.valueState)}"></${scopeTag("udex-status-message", tags, suffix)}>` : html`<udex-status-message ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></udex-status-message>`;}
 function block9 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-truncatable-tag-content"><span class="udex-truncatable-tag-content__label">${ifDefined(this.truncatableTagLabel)}</span><${scopeTag("ui5-icon", tags, suffix)} @click="${this.handleRemoveTruncatableTag}" class="udex-truncatable-tag-content__icon" name="decline"></${scopeTag("ui5-icon", tags, suffix)}></div>` : html`<div class="udex-truncatable-tag-content"><span class="udex-truncatable-tag-content__label">${ifDefined(this.truncatableTagLabel)}</span><ui5-icon @click="${this.handleRemoveTruncatableTag}" class="udex-truncatable-tag-content__icon" name="decline"></ui5-icon></div>`;}
 function block10 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ifDefined(this.searchableList)}`;}

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type StepInput from "../../StepInput.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: StepInput, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-step-input__root" @keydown="${this._onkeydown}"><${scopeTag("udex-text-field", tags, suffix)} type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" supporting-text="${ifDefined(this.supportingText)}" value="${ifDefined(this._valuePrecisioned)}" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" @focusin="${this._onInputFocusIn}" @focusout="${this._onInputFocusOut}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?displayonly="${this.displayonly}" value-state="${ifDefined(this.valueState)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}"></${scopeTag("udex-text-field", tags, suffix)}>${ !this.displayonly ? block1.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-step-input__root" @keydown="${this._onkeydown}"><udex-text-field type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" supporting-text="${ifDefined(this.supportingText)}" value="${ifDefined(this._valuePrecisioned)}" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" @focusin="${this._onInputFocusIn}" @focusout="${this._onInputFocusOut}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?displayonly="${this.displayonly}" value-state="${ifDefined(this.valueState)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}"></udex-text-field>${ !this.displayonly ? block1.call(this, context, tags, suffix) : undefined }</div>`;}
+function block0 (this: StepInput, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-step-input__root"><${scopeTag("udex-text-field", tags, suffix)} type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" supporting-text="${ifDefined(this.supportingText)}" value="${ifDefined(this._valuePrecisioned)}" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" @focusin="${this._onInputFocusIn}" @focusout="${this._onInputFocusOut}" @ui5-keydown="${ifDefined(this._onkeydown)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?displayonly="${this.displayonly}" value-state="${ifDefined(this.valueState)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}"></${scopeTag("udex-text-field", tags, suffix)}>${ !this.displayonly ? block1.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-step-input__root"><udex-text-field type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" supporting-text="${ifDefined(this.supportingText)}" value="${ifDefined(this._valuePrecisioned)}" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" @focusin="${this._onInputFocusIn}" @focusout="${this._onInputFocusOut}" @ui5-keydown="${ifDefined(this._onkeydown)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?displayonly="${this.displayonly}" value-state="${ifDefined(this.valueState)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}"></udex-text-field>${ !this.displayonly ? block1.call(this, context, tags, suffix) : undefined }</div>`;}
 function block1 (this: StepInput, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} class="udex-step-input__button udex-step-input__button_dec" title="${ifDefined(this.decIconTitle)}" accessible-name="${ifDefined(this.decIconTitle)}" icon="less" size="Large" design="${ifDefined(this.valueState)}" @click="${this._decValue}" @mousedown="${this._decSpin}" @mouseup="${this._resetSpin}" @mouseout="${this._resetSpinOut}" ?disabled="${this._decIconInactive}" ?active="${this.decIconActive}" ?readonly="${this.readonly}"></${scopeTag("udex-control-button", tags, suffix)}><${scopeTag("udex-control-button", tags, suffix)} class="udex-step-input__button udex-step-input__button_inc" title="${ifDefined(this.incIconTitle)}" accessible-name="${ifDefined(this.incIconTitle)}" icon="add" size="Large" design="${ifDefined(this.valueState)}" @click="${this._incValue}" @mousedown="${this._incSpin}" @mouseup="${this._resetSpin}" @mouseout="${this._resetSpinOut}" ?disabled="${this._incIconInactive}" ?active="${this.incIconActive}" ?readonly="${this.readonly}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button class="udex-step-input__button udex-step-input__button_dec" title="${ifDefined(this.decIconTitle)}" accessible-name="${ifDefined(this.decIconTitle)}" icon="less" size="Large" design="${ifDefined(this.valueState)}" @click="${this._decValue}" @mousedown="${this._decSpin}" @mouseup="${this._resetSpin}" @mouseout="${this._resetSpinOut}" ?disabled="${this._decIconInactive}" ?active="${this.decIconActive}" ?readonly="${this.readonly}"></udex-control-button><udex-control-button class="udex-step-input__button udex-step-input__button_inc" title="${ifDefined(this.incIconTitle)}" accessible-name="${ifDefined(this.incIconTitle)}" icon="add" size="Large" design="${ifDefined(this.valueState)}" @click="${this._incValue}" @mousedown="${this._incSpin}" @mouseup="${this._resetSpin}" @mouseout="${this._resetSpinOut}" ?disabled="${this._incIconInactive}" ?active="${this.incIconActive}" ?readonly="${this.readonly}"></udex-control-button>`;}
 
 

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

@@ -5,9 +5,9 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: TagGroup, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div id="${ifDefined(this._id)}-tag-group" @ui5-selectionChange="${ifDefined(this.tagClickHandler)}" role="group"><${scopeTag("ui5-tokenizer", tags, suffix)} part="tokenizer" show-more prevent-popover-open ?disabled="${this.disabled}" id="${ifDefined(this._id)}-tag-group-tokenizer" class="udex-tag-group__tokenizer" @ui5-show-more-items-press="${ifDefined(this.showMoreItems)}" ?expanded="${this.tokenizerExpanded}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</${scopeTag("ui5-tokenizer", tags, suffix)}>${ this._isHiddenTags ? block2.call(this, context, tags, suffix) : undefined }</div> ` : html`<div id="${ifDefined(this._id)}-tag-group" @ui5-selectionChange="${ifDefined(this.tagClickHandler)}" role="group"><ui5-tokenizer part="tokenizer" show-more prevent-popover-open ?disabled="${this.disabled}" id="${ifDefined(this._id)}-tag-group-tokenizer" class="udex-tag-group__tokenizer" @ui5-show-more-items-press="${ifDefined(this.showMoreItems)}" ?expanded="${this.tokenizerExpanded}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ui5-tokenizer>${ this._isHiddenTags ? block2.call(this, context, tags, suffix) : undefined }</div> `;}
-function block1 (this: TagGroup, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-tag", tags, suffix)} role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @ui5-iconClick="${ifDefined(this.tagIconClickHandler)}">></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @ui5-iconClick="${ifDefined(this.tagIconClickHandler)}">></udex-tag>`;}
+function block1 (this: TagGroup, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-tag", tags, suffix)} role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @ui5-iconClick="${ifDefined(this.tagIconClickHandler)}"></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @ui5-iconClick="${ifDefined(this.tagIconClickHandler)}"></udex-tag>`;}
 function block2 (this: TagGroup, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-tooltip", tags, suffix)} @keydown="${this.handleShowMoreButtonKeydown}" id="${ifDefined(this._id)}-tag-group-tooltip" placement="${ifDefined(this.tooltipPlacement)}"><div role="group" class="udex-tag-group-tooltip__content">${ repeat(this.hiddenTags, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-tooltip", tags, suffix)}>` : html`<udex-tooltip @keydown="${this.handleShowMoreButtonKeydown}" id="${ifDefined(this._id)}-tag-group-tooltip" placement="${ifDefined(this.tooltipPlacement)}"><div role="group" class="udex-tag-group-tooltip__content">${ repeat(this.hiddenTags, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></udex-tooltip>`;}
-function block3 (this: TagGroup, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-tag", tags, suffix)} role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @ui5-iconClick="${ifDefined(this.tagIconClickHandler)}">></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @ui5-iconClick="${ifDefined(this.tagIconClickHandler)}">></udex-tag>`;}
+function block3 (this: TagGroup, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-tag", tags, suffix)} role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @ui5-iconClick="${ifDefined(this.tagIconClickHandler)}"></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag role="${ifDefined(this.tagRole)}" accessible-role="option" class="udex-tag-group__tag" data-id="${ifDefined(item.id)}" part="token-${index}" ?read-only="${this.isReadOrDisplayOnly}" tabindex="${ifDefined(this.tagTabIndex)}" id="${ifDefined(item._id)}-tag-group-tag" text="${ifDefined(item.text)}" icon="${ifDefined(item.icon)}" href="${ifDefined(item.href)}" design="${ifDefined(item.design)}" size="${ifDefined(item.size)}" icon-placement="${ifDefined(item.iconPlacement)}" accessible-name="${ifDefined(item.accessibleName)}" ?non-selectable="${item.nonSelectable}" ?data-overflows="${item.overflows}" @keydown="${this.handleTagKeyDown}" @ui5-iconClick="${ifDefined(this.tagIconClickHandler)}"></udex-tag>`;}
 
 
 export default block0;

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

@@ -4,10 +4,10 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type TextField from "../../TextField.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-text-field__container">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-text-field__wrap"><input id="${ifDefined(this._id)}-input" class="udex-text-field__input" type="${ifDefined(this.type)}" .value="${ifDefined(this.value)}" @change="${this.handleChange}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}" maxlength="${ifDefined(this.maxlength)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" ?aria-disabled="${this.readonlyNotDisabled}" aria-invalid="${ifDefined(this.accInfo.ariaInvalid)}" aria-describedby="${ifDefined(this.accInfo.ariaDescribedBy)}" aria-haspopup="${ifDefined(this.accInfo.ariaHasPopup)}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" part="textfield-input" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" />${ this.icon ? block3.call(this, context, tags, suffix) : undefined }</div>${ this.supportingText ? block4.call(this, context, tags, suffix) : undefined }${ this.supportingText ? block5.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block6.call(this, context, tags, suffix) : undefined }${ this.readonly ? block7.call(this, context, tags, suffix) : undefined }</div>`;}
+function block0 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-text-field__container">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-text-field__wrap"><input id="${ifDefined(this._id)}-input" class="udex-text-field__input" type="${ifDefined(this.type)}" .value="${ifDefined(this.value)}" @change="${this.handleChange}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${this.handleClick}" @keydown="${this.handleKeydown}" maxlength="${ifDefined(this.maxlength)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" ?aria-disabled="${this.readonlyNotDisabled}" aria-invalid="${ifDefined(this.accInfo.ariaInvalid)}" aria-describedby="${ifDefined(this.accInfo.ariaDescribedBy)}" aria-haspopup="${ifDefined(this.accInfo.ariaHasPopup)}" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-labelledby="${ifDefined(this.accInfo.ariaLabelledBy)}" part="textfield-input" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" />${ this.icon ? block3.call(this, context, tags, suffix) : undefined }</div>${ this.supportingText ? block4.call(this, context, tags, suffix) : undefined }${ this.supportingText ? block5.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block6.call(this, context, tags, suffix) : undefined }${ this.readonly ? block7.call(this, context, tags, suffix) : undefined }</div>`;}
 function block1 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label for="${ifDefined(this._id)}-input" class="${ifDefined(this.labelClasses)}" part="label">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</label>`;}
 function block2 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html` * `;}
-function block3 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} accessible-name="${ifDefined(this.accessibleIconName)}" tooltip=${ifDefined(this.showButtonTooltip)} ?active="${this.active}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?non-interactive="${this.readonly}" design="${ifDefined(this.valueState)}" icon="${ifDefined(this.icon)}" @click="${this.handleIconClick}" part="textfield-control-btn" size="Large" class="udex-text-field_icon-container"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button accessible-name="${ifDefined(this.accessibleIconName)}" tooltip=${ifDefined(this.showButtonTooltip)} ?active="${this.active}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?non-interactive="${this.readonly}" design="${ifDefined(this.valueState)}" icon="${ifDefined(this.icon)}" @click="${this.handleIconClick}" part="textfield-control-btn" size="Large" class="udex-text-field_icon-container"></udex-control-button>`;}
+function block3 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} accessible-name="${ifDefined(this.accessibleIconName)}" tooltip="${ifDefined(this.showButtonTooltip)}" ?active="${this.active}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?non-interactive="${this.readonly}" design="${ifDefined(this.valueState)}" icon="${ifDefined(this.icon)}" @click="${this.handleIconClick}" part="textfield-control-btn" size="Large" class="udex-text-field_icon-container"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button accessible-name="${ifDefined(this.accessibleIconName)}" tooltip="${ifDefined(this.showButtonTooltip)}" ?active="${this.active}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?non-interactive="${this.readonly}" design="${ifDefined(this.valueState)}" icon="${ifDefined(this.icon)}" @click="${this.handleIconClick}" part="textfield-control-btn" size="Large" class="udex-text-field_icon-container"></udex-control-button>`;}
 function block4 (this: TextField, 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.valueState)}"></${scopeTag("udex-status-message", tags, suffix)}>` : html`<udex-status-message ?disabled="${this.disabled}" supporting-text="${ifDefined(this.supportingText)}" value-state="${ifDefined(this.valueState)}"></udex-status-message>`;}
 function block5 (this: TextField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}-supportingTextDesc" class="hidden-text">${ifDefined(this.supportingText)}</span>`;}
 function block6 (this: TextField, 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/TileTemplate.lit.ts

@@ -4,9 +4,9 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Tile from "../../Tile.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.interactive ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) } `;}
-function block1 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a class="udex-tile" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" aria-label="${ifDefined(this.accessibleName)}" @keydown=${this._onkeydown} @click=${this._onclick}><slot></slot></a>`;}
-function block2 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tile" @click=${this._onclick}><slot></slot></div>`;}
+function block0 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.interactive ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }`;}
+function block1 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="hidden" id="tileDescription">${ifDefined(this.accessibleName)}</span><a class="udex-tile" part="tile" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" role="link" aria-describedby="tileDescription" @keydown="${this._onkeydown}" @click="${this._onclick}"><slot></slot></a>`;}
+function block2 (this: Tile, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-tile" part="tile" @click="${this._onclick}"><slot></slot></div>`;}
 
 
 export default block0;

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

@@ -7,7 +7,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 function block0 (this: Toast, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.open ? block1.call(this, context, tags, suffix) : undefined } `;}
 function block1 (this: Toast, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="ui5-toast-root udex-toast" role="alert" tabindex="0">${ this.withIcon ? block2.call(this, context, tags, suffix) : undefined }<bdi><slot></slot></bdi>${ this.showCloseIcon ? block3.call(this, context, tags, suffix) : undefined }</div>`;}
 function block2 (this: Toast, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-toast__icon" name="${ifDefined(this.iconName)}" design="${ifDefined(this.iconDesign)}" ui5-icon=""></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-toast__icon" name="${ifDefined(this.iconName)}" design="${ifDefined(this.iconDesign)}" ui5-icon=""></ui5-icon>`;}
-function block3 (this: Toast, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} class="udex-toast__button" size="Small" icon="decline" design="Tertiary" accessible-name="close" @click=${this.closeToast}></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button class="udex-toast__button" size="Small" icon="decline" design="Tertiary" accessible-name="close" @click=${this.closeToast}></udex-button>`;}
+function block3 (this: Toast, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} class="udex-toast__button" size="Small" icon="decline" design="Tertiary" accessible-name="close" @click="${this.closeToast}"></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button class="udex-toast__button" size="Small" icon="decline" design="Tertiary" accessible-name="close" @click="${this.closeToast}"></udex-button>`;}
 
 
 export default block0;