@sapudex/web-components 0.114.2 → 0.127.6

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

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
 function block0 (this: Pagination, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.pages ? block1.call(this, context, tags, suffix) : undefined } `;}
-function block1 (this: Pagination, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<nav aria-label="pagination" class="${ifDefined(this.paginationClass)}"><ul class="udex-pagination__list">${ this.absoluteNavigation ? block2.call(this, context, tags, suffix) : undefined }<li class="udex-pagination__item--prev udex-pagination__item"><${scopeTag("udex-button", tags, suffix)} ?disabled="${this.prevButtonDisbled}" accessible-name="${ifDefined(this.previousPageAccessibleName)}" size="Large" icon="nav-back" design="Tertiary" @click="${this.setPrevPage}"></${scopeTag("udex-button", tags, suffix)}></li>${ this.typeFull ? block3.call(this, context, tags, suffix) : undefined }${ this.typeShort ? block5.call(this, context, tags, suffix) : undefined }<li class="udex-pagination__item--next udex-pagination__item"><${scopeTag("udex-button", tags, suffix)} ?disabled="${this.nextButtonDisbled}" accessible-name="${ifDefined(this.nextPageAccessibleName)}" size="Large" icon="navigation-right-arrow" design="Tertiary" @click="${this.setNextPage}"></${scopeTag("udex-button", tags, suffix)}></li>${ this.absoluteNavigation ? block6.call(this, context, tags, suffix) : undefined }</ul></nav>` : html`<nav aria-label="pagination" class="${ifDefined(this.paginationClass)}"><ul class="udex-pagination__list">${ this.absoluteNavigation ? block2.call(this, context, tags, suffix) : undefined }<li class="udex-pagination__item--prev udex-pagination__item"><udex-button ?disabled="${this.prevButtonDisbled}" accessible-name="${ifDefined(this.previousPageAccessibleName)}" size="Large" icon="nav-back" design="Tertiary" @click="${this.setPrevPage}"></udex-button></li>${ this.typeFull ? block3.call(this, context, tags, suffix) : undefined }${ this.typeShort ? block5.call(this, context, tags, suffix) : undefined }<li class="udex-pagination__item--next udex-pagination__item"><udex-button ?disabled="${this.nextButtonDisbled}" accessible-name="${ifDefined(this.nextPageAccessibleName)}" size="Large" icon="navigation-right-arrow" design="Tertiary" @click="${this.setNextPage}"></udex-button></li>${ this.absoluteNavigation ? block6.call(this, context, tags, suffix) : undefined }</ul></nav>`;}
+function block1 (this: Pagination, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<nav aria-label="pagination" class="${ifDefined(this.paginationClass)}"><ul class="udex-pagination__list">${ this.absoluteNavigation ? block2.call(this, context, tags, suffix) : undefined }<li class="udex-pagination__item--prev udex-pagination__item"><${scopeTag("udex-button", tags, suffix)} ?disabled="${this.prevButtonDisbled}" accessible-name="${ifDefined(this.previousPageAccessibleName)}" tooltip="${ifDefined(this.previousBtnTooltip)}" size="Large" icon="navigation-left-arrow" design="Tertiary" @click="${this.setPrevPage}"></${scopeTag("udex-button", tags, suffix)}></li>${ this.typeFull ? block3.call(this, context, tags, suffix) : undefined }${ this.typeShort ? block5.call(this, context, tags, suffix) : undefined }<li class="udex-pagination__item--next udex-pagination__item"><${scopeTag("udex-button", tags, suffix)} ?disabled="${this.nextButtonDisbled}" tooltip="${ifDefined(this.nextBtnTooltip)}" accessible-name="${ifDefined(this.nextPageAccessibleName)}" size="Large" icon="navigation-right-arrow" design="Tertiary" @click="${this.setNextPage}"></${scopeTag("udex-button", tags, suffix)}></li>${ this.absoluteNavigation ? block6.call(this, context, tags, suffix) : undefined }</ul></nav>` : html`<nav aria-label="pagination" class="${ifDefined(this.paginationClass)}"><ul class="udex-pagination__list">${ this.absoluteNavigation ? block2.call(this, context, tags, suffix) : undefined }<li class="udex-pagination__item--prev udex-pagination__item"><udex-button ?disabled="${this.prevButtonDisbled}" accessible-name="${ifDefined(this.previousPageAccessibleName)}" tooltip="${ifDefined(this.previousBtnTooltip)}" size="Large" icon="navigation-left-arrow" design="Tertiary" @click="${this.setPrevPage}"></udex-button></li>${ this.typeFull ? block3.call(this, context, tags, suffix) : undefined }${ this.typeShort ? block5.call(this, context, tags, suffix) : undefined }<li class="udex-pagination__item--next udex-pagination__item"><udex-button ?disabled="${this.nextButtonDisbled}" tooltip="${ifDefined(this.nextBtnTooltip)}" accessible-name="${ifDefined(this.nextPageAccessibleName)}" size="Large" icon="navigation-right-arrow" design="Tertiary" @click="${this.setNextPage}"></udex-button></li>${ this.absoluteNavigation ? block6.call(this, context, tags, suffix) : undefined }</ul></nav>`;}
 function block2 (this: Pagination, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-pagination__item--first udex-pagination__item"><${scopeTag("udex-button", tags, suffix)} ?disabled="${this.prevButtonDisbled}" accessible-name="${ifDefined(this.firstPageAccessibleName)}" size="Large" icon="close-command-field" design="Tertiary" @click="${this.setFirstPage}"></${scopeTag("udex-button", tags, suffix)}></li>` : html`<li class="udex-pagination__item--first udex-pagination__item"><udex-button ?disabled="${this.prevButtonDisbled}" accessible-name="${ifDefined(this.firstPageAccessibleName)}" size="Large" icon="close-command-field" design="Tertiary" @click="${this.setFirstPage}"></udex-button></li>`;}
 function block3 (this: Pagination, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ repeat(this.pagination, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block4.call(this, context, tags, suffix, item, index)) }`;}
 function block4 (this: Pagination, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-pagination__item"><a class="udex-pagination__page" href="#" aria-label="${ifDefined(item.accessibleName)}" @click="${this.onPageClick}" ?active="${item.active}" index="${ifDefined(item.index)}"><span class="udex-pagination__page--value">${ifDefined(item.value)}</span></a></li>`;}

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

@@ -4,8 +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`<div class="udex-password-field"><${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)}"></${scopeTag("udex-text-field", tags, suffix)}>${ this.renderShowButton ? block1.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-password-field"><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)}"></udex-text-field>${ this.renderShowButton ? block1.call(this, context, tags, suffix) : undefined }</div>`;}
-function block1 (this: PasswordField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} ?disabled="${this.disabled}" id="show-button" design="Default" class="udex-password-field__button udex-password-field__button_show" icon=${ifDefined(this.icon)} size="Large" accessible-name="${ifDefined(this.showButtonTooltip)}" tooltip=${ifDefined(this.showButtonTooltip)} @click="${this.handleShowPassword}"></${scopeTag("udex-control-button", tags, suffix)}>` : html`<udex-control-button ?disabled="${this.disabled}" id="show-button" design="Default" class="udex-password-field__button udex-password-field__button_show" icon=${ifDefined(this.icon)} size="Large" accessible-name="${ifDefined(this.showButtonTooltip)}" tooltip=${ifDefined(this.showButtonTooltip)} @click="${this.handleShowPassword}"></udex-control-button>`;}
+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>`;}
 
 
 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="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="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.accessibleNameRef)}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.ariaInvalid)}" @input="${this.handleInput}" @change="${this.handleChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @keydown=${this.handleKeyDown} @keyup=${this.handleKeyUp}></div></div>${ this.supportingText ? block6.call(this, context, tags, suffix) : undefined } ` : 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="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="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.accessibleNameRef)}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.ariaInvalid)}" @input="${this.handleInput}" @change="${this.handleChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @keydown=${this.handleKeyDown} @keyup=${this.handleKeyUp}></div></div>${ this.supportingText ? block6.call(this, context, tags, suffix) : undefined } `;}
-function block1 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label class="udex-phone-number-field__label" for="phone">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</label>`;}
+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.accessibleNameRef)}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.ariaInvalid)}" @input="${this.handleInput}" @change="${this.handleChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @keydown=${this.handleKeyDown} @keyup=${this.handleKeyUp}></div></div>${ this.supportingText ? block6.call(this, context, tags, suffix) : undefined } ` : 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.accessibleNameRef)}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.ariaInvalid)}" @input="${this.handleInput}" @change="${this.handleChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @keydown=${this.handleKeyDown} @keyup=${this.handleKeyUp}></div></div>${ this.supportingText ? block6.call(this, context, tags, suffix) : undefined } `;}
+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-disabled="${ifDefined(this.isButtonDisabled)}" aria-haspopup="true" accessible-name="${ifDefined(this.countrySelectorAriaLabel)}" @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"><div class="udex-phone-number-field__flag" style="${styleMap(this.selectedFlagBackgroundPosition)}"></div></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-disabled="${ifDefined(this.isButtonDisabled)}" aria-haspopup="true" accessible-name="${ifDefined(this.countrySelectorAriaLabel)}" @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"><div class="udex-phone-number-field__flag" style="${styleMap(this.selectedFlagBackgroundPosition)}"></div></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-disabled="${ifDefined(this.isButtonDisabled)}" aria-haspopup="true" aria-label="${ifDefined(this.countrySelectorAriaLabel)}" accessible-name="${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"><div class="udex-phone-number-field__flag" style="${styleMap(this.selectedFlagBackgroundPosition)}"></div></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-disabled="${ifDefined(this.isButtonDisabled)}" aria-haspopup="true" aria-label="${ifDefined(this.countrySelectorAriaLabel)}" accessible-name="${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"><div class="udex-phone-number-field__flag" style="${styleMap(this.selectedFlagBackgroundPosition)}"></div></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>`;}
 
 

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

@@ -0,0 +1,11 @@
+/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+	import type RatingBar from "../../RatingBar.js";
+	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
+	
+function block0 (this: RatingBar, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-rating-bar__container"><div aria-hidden="true" class="udex-rating-bar__rating">${ifDefined(this.validatedRating)}</div><${scopeTag("ui5-icon", tags, suffix)} role="img" aria-labelledby="ratingDescription" name="favorite" class="udex-rating__icon"></${scopeTag("ui5-icon", tags, suffix)}><div class="udex-rating-bar__track"><div class="udex-rating-bar__progress"></div></div>${ this.showPercentage ? block1.call(this, context, tags, suffix) : undefined }<span id="ratingDescription" class="hidden-text">${ifDefined(this._ratingDescription)}</span></div>` : html`<div class="udex-rating-bar__container"><div aria-hidden="true" class="udex-rating-bar__rating">${ifDefined(this.validatedRating)}</div><ui5-icon role="img" aria-labelledby="ratingDescription" name="favorite" class="udex-rating__icon"></ui5-icon><div class="udex-rating-bar__track"><div class="udex-rating-bar__progress"></div></div>${ this.showPercentage ? block1.call(this, context, tags, suffix) : undefined }<span id="ratingDescription" class="hidden-text">${ifDefined(this._ratingDescription)}</span></div>`;}
+function block1 (this: RatingBar, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div role="note" class="udex-rating-bar__percentage">${ifDefined(this.validatedPercentage)}</div>`;}
+
+
+export default block0;

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

@@ -0,0 +1,15 @@
+/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+	import type Review from "../../Review.js";
+	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
+	
+function block0 (this: Review, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isEmpty ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }`;}
+function block1 (this: Review, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-review__empty-container"><slot class="udex-review__default-text" name="defaultText"></slot><slot name="reviewButton"></slot></div>`;}
+function block2 (this: Review, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.withoutBreakdown ? block3.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }`;}
+function block3 (this: Review, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-review__container-without-breakdown"><div class="udex-review__content-without-breakdown"><div aria-level="2" role="heading" aria-hidden="true" class="udex-review__rating">${ifDefined(this.validatedRating)}</div><div class="udex-review__rating-info-without-breakdown"><${scopeTag("udex-rating-indicator", tags, suffix)} readonly value="${ifDefined(this.validatedRating)}" max="${ifDefined(this._maxRating)}"></${scopeTag("udex-rating-indicator", tags, suffix)}><div class="udex-review__reviews-text">${ifDefined(this.reviewsText)}</div></div></div><div class="udex-review__additional-content-without-breakdown"><slot class="udex-review__default-text" name="defaultText"></slot><slot name="reviewButton"></slot></div></div>` : html`<div class="udex-review__container-without-breakdown"><div class="udex-review__content-without-breakdown"><div aria-level="2" role="heading" aria-hidden="true" class="udex-review__rating">${ifDefined(this.validatedRating)}</div><div class="udex-review__rating-info-without-breakdown"><udex-rating-indicator readonly value="${ifDefined(this.validatedRating)}" max="${ifDefined(this._maxRating)}"></udex-rating-indicator><div class="udex-review__reviews-text">${ifDefined(this.reviewsText)}</div></div></div><div class="udex-review__additional-content-without-breakdown"><slot class="udex-review__default-text" name="defaultText"></slot><slot name="reviewButton"></slot></div></div>`;}
+function block4 (this: Review, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-review__container"><div class="udex-review__content"><div class="udex-review__rating-info"><div aria-level="2" role="heading" aria-hidden="true" class="udex-review__rating">${ifDefined(this.validatedRating)}</div><${scopeTag("ui5-icon", tags, suffix)} aria-labelledby="ratingDescription" role="img" name="favorite" class="udex-review__icon"></${scopeTag("ui5-icon", tags, suffix)}></div><div class="udex-review__reviews-text">${ifDefined(this.reviewsText)}</div><slot name="reviewButton"></slot></div><div class="udex-review__additional-content">${ repeat(this.validatedRatingBars, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</div></div><span id="ratingDescription" class="hidden-text">${ifDefined(this._ratingDescription)}</span>` : html`<div class="udex-review__container"><div class="udex-review__content"><div class="udex-review__rating-info"><div aria-level="2" role="heading" aria-hidden="true" class="udex-review__rating">${ifDefined(this.validatedRating)}</div><ui5-icon aria-labelledby="ratingDescription" role="img" name="favorite" class="udex-review__icon"></ui5-icon></div><div class="udex-review__reviews-text">${ifDefined(this.reviewsText)}</div><slot name="reviewButton"></slot></div><div class="udex-review__additional-content">${ repeat(this.validatedRatingBars, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</div></div><span id="ratingDescription" class="hidden-text">${ifDefined(this._ratingDescription)}</span>`;}
+function block5 (this: Review, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<slot name="${ifDefined(item._individualSlot)}"></slot>`;}
+
+
+export default block0;

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type SearchSuggestions from "../../SearchSuggestions.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow _disable-initial-focus placement-type="Bottom" horizontal-align="Right" style="${styleMap(this.popoverStyles)}" id="suggestions-popover" aria-orientation="vertical" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.showNoResultMessage ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }</${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow _disable-initial-focus placement-type="Bottom" horizontal-align="Right" style="${styleMap(this.popoverStyles)}" id="suggestions-popover" aria-orientation="vertical" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.showNoResultMessage ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }</ui5-popover>`;}
+function block0 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow _disable-initial-focus placement-type="Bottom" horizontal-align="Right" style="${styleMap(this.popoverStyles)}" id="${ifDefined(this.getSuggestionsPopoverId)}" aria-orientation="vertical" accessible-role="Dialog" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.showNoResultMessage ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }</${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover class="udex-search-suggestions__root ${ifDefined(this.homeSearchPopoverClass)}" hide-arrow _disable-initial-focus placement-type="Bottom" horizontal-align="Right" style="${styleMap(this.popoverStyles)}" id="${ifDefined(this.getSuggestionsPopoverId)}" aria-orientation="vertical" accessible-role="Dialog" accessible-name="${ifDefined(this.suggestionsAccessibleName)}">${ this.showNoResultMessage ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) }</ui5-popover>`;}
 function block1 (this: SearchSuggestions, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-search-suggestions__message">${ifDefined(this.noResultMessage)}</span>`;}
 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>`;}

package/src/generated/templates/SearchTemplate.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: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-search__root ${ifDefined(this.classWithPrefix)}">${ 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"><button type="button" 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="udex-search__prefix-popover" 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"><button type="button" 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="udex-search__prefix-popover" 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" role="combobox" aria-controls="suggestions-popover" aria-expanded="false" aria-haspopup="${ifDefined(this.showSuggestedPopover)}" 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" role="combobox" aria-label="${ifDefined(this.accInfo.ariaLabel)}" aria-controls="suggestions-popover" aria-expanded="false" aria-haspopup="${ifDefined(this.showSuggestedPopover)}" .value="${ifDefined(this.value)}" @input="${this.handleSearchChange}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @focusout="${this.handleFocusout}" @blur="${this.handleBlur}" @click="${this.handleInputClick}" />`;}
+function block1 (this: Search, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-search__prefix"><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="udex-search__prefix-popover" 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"><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="udex-search__prefix-popover" 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 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" icon="decline" tooltip="Reset Button" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></${scopeTag("ui5-button", tags, suffix)}>` : html`<ui5-button id="reset-button" class="udex-search__button udex-search__reset-button" design="Default" icon="decline" tooltip="Reset Button" @click="${this.onReset}" @keydown="${this.handleKeyDownReset}"></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="Voice Button" @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="Voice Button" @click="${this.onVoice}"></ui5-button>`;}
+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" name="search"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-search__icon" 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="Submit Button" @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="Submit Button" @click="${this.onSubmit}"></ui5-button>`;}
+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>`;}
 
 
 export default block0;

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

@@ -12,8 +12,8 @@ function block4 (this: SearchableListBase, context: UI5Element, tags: string[],
 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)} _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 _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)} 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="list" _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="list" _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>`;}
 
 

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

@@ -0,0 +1,16 @@
+/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+	import type SecondaryNavigationItem from "../../SecondaryNavigationItem.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.onItemClick}">${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)}" ?active="${this.isActive}" aria-haspopup="${ifDefined(this.hasNestedItems)}" aria-expanded="${ifDefined(this.isOpen)}" aria-label="${ifDefined(this.ariaLabel)}" @keydown="${this.handleItemButtonKeyDown}" @click="${this.onItemClick}"><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" @keydown="${this.handleSubItemKeyDown}"><ul role="menu" class="udex-secondary-navigation__dropdown-list">${ 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><slot></slot></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>`;}
+
+
+export default block0;

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

@@ -0,0 +1,15 @@
+/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+	import type SecondaryNavigationSubItem from "../../SecondaryNavigationSubItem.js";
+	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.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 @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 @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 @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 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 @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>`;}
+
+
+export default block0;

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

@@ -4,17 +4,14 @@ 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"><div class="udex-secondary-navigation__heading"><div class="udex-secondary-navigation__text-wrap"><span class="udex-secondary-navigation__title">${ifDefined(this.title)}</span><span class="udex-secondary-navigation__active-title">${ifDefined(this.activeItemText)}</span></div><button class="udex-secondary-navigation__mobile-opener" role="button" aria-expanded="${ifDefined(this._mobileBtnExpanded)}" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" aria-haspopup="true" @click="${this.handleMobileOpen}"><${scopeTag("ui5-icon", tags, suffix)} class="udex-secondary-navigation__title-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}></button></div><div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block5.call(this, context, tags, suffix) : undefined }</ul>${ this.hasButtonsSlot ? block10.call(this, context, tags, suffix) : undefined }</div></div></div>` : html`<div class="${ifDefined(this.rootClass)}">${ this.hasBreadcrumbsSlot ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-secondary-navigation__holder"><div class="udex-secondary-navigation__heading"><div class="udex-secondary-navigation__text-wrap"><span class="udex-secondary-navigation__title">${ifDefined(this.title)}</span><span class="udex-secondary-navigation__active-title">${ifDefined(this.activeItemText)}</span></div><button class="udex-secondary-navigation__mobile-opener" role="button" aria-expanded="${ifDefined(this._mobileBtnExpanded)}" aria-label="${ifDefined(this.mobileMenuOpenerAriaLabel)}" aria-haspopup="true" @click="${this.handleMobileOpen}"><ui5-icon class="udex-secondary-navigation__title-icon" name="slim-arrow-down"></ui5-icon></button></div><div class="udex-secondary-navigation__wrap"><ul role="menubar" class="udex-secondary-navigation__list" @keydown="${this.handleKeyDown}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block5.call(this, context, tags, suffix) : undefined }</ul>${ this.hasButtonsSlot ? block10.call(this, context, tags, suffix) : undefined }</div></div></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"><div class="udex-secondary-navigation__heading">${ this.titleHref.length ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div><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) => block4.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block5.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block6.call(this, context, tags, suffix) : undefined }</div></div><${scopeTag("udex-secondary-navigation-item", tags, suffix)} 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 ? block7.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"><div class="udex-secondary-navigation__heading">${ this.titleHref.length ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div><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) => block4.call(this, context, tags, suffix, item, index)) }${ this._showMoreButton ? block5.call(this, context, tags, suffix) : undefined }</ul>${ this.hasDesktopButtonsSlot ? block6.call(this, context, tags, suffix) : undefined }</div></div><udex-secondary-navigation-item 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 ? block7.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, item: any, index: number) { return html`<li role="none" class="udex-secondary-navigation__list-item udex-secondary-navigation__link-btn-wrap" ?active="${item.active}">${ item.path ? block3.call(this, context, tags, suffix, item, index) : block4.call(this, context, tags, suffix, item, index) }</li>`;}
-function block3 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<a role="menuitem" class="udex-secondary-navigation__item udex-secondary-navigation__link-btn" href="${ifDefined(item.path)}" target="${ifDefined(item.target)}" @click="${this.handleNavigationClick}">${ifDefined(item.title)}</a>`;}
-function block4 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<button role="menuitem" class="udex-secondary-navigation__item udex-secondary-navigation__link-btn" @click="${this.handleNavigationClick}">${ifDefined(item.title)}</button>`;}
-function block5 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li role="none" class="${ifDefined(this.moreClass)} udex-secondary-navigation__link-btn-wrap" ?active="${this.moreIsActive}"><button role="menuitem" @click="${this.handleToggleDropdown}" aria-expanded="${ifDefined(this._dropdownMoreIsOpen)}" aria-label="${ifDefined(this.moreButtonText)}" aria-haspopup="true" class="udex-secondary-navigation__item udex-secondary-navigation__link-btn udex-secondary-navigation__link-btn-more">${ifDefined(this.moreButtonText)}<${scopeTag("ui5-icon", tags, suffix)} class="udex-secondary-navigation__item-icon" name="slim-arrow-down"></${scopeTag("ui5-icon", tags, suffix)}></button>${ this._dropdownMoreIsOpen ? block6.call(this, context, tags, suffix) : undefined }</li>` : html`<li role="none" class="${ifDefined(this.moreClass)} udex-secondary-navigation__link-btn-wrap" ?active="${this.moreIsActive}"><button role="menuitem" @click="${this.handleToggleDropdown}" aria-expanded="${ifDefined(this._dropdownMoreIsOpen)}" aria-label="${ifDefined(this.moreButtonText)}" aria-haspopup="true" class="udex-secondary-navigation__item udex-secondary-navigation__link-btn udex-secondary-navigation__link-btn-more">${ifDefined(this.moreButtonText)}<ui5-icon class="udex-secondary-navigation__item-icon" name="slim-arrow-down"></ui5-icon></button>${ this._dropdownMoreIsOpen ? block6.call(this, context, tags, suffix) : undefined }</li>`;}
-function block6 (this: SecondaryNavigation, 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.handleKeyDownDropdown}">${ repeat(this._overflowItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
-function block7 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li role="none" ?active="${item.active}" class="udex-secondary-navigation__link-btn-wrap">${ item.path ? block8.call(this, context, tags, suffix, item, index) : block9.call(this, context, tags, suffix, item, index) }</li>`;}
-function block8 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<a role="menuitem" href="${ifDefined(item.path)}" target="${ifDefined(item.target)}" class="udex-secondary-navigation__dropdown-item udex-secondary-navigation__link-btn" @click="${this.handleNavigationClick}">${ifDefined(item.title)}</a>`;}
-function block9 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<button role="menuitem" class="udex-secondary-navigation__dropdown-item" @click="${this.handleNavigationClick}">${ifDefined(item.title)}</button>`;}
-function block10 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__buttons"><slot name="buttons"></slot></div>`;}
+function block2 (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>`;}
+function block3 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-secondary-navigation__title">${ifDefined(this.title)}</span>`;}
+function block4 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="none" class="udex-secondary-navigation__list-item"><${scopeTag("udex-secondary-navigation-item", tags, suffix)} index="${index}" ?active="${item.active}" path="${ifDefined(item.path)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" target="${ifDefined(item.target)}" .subItems="${ifDefined(item.items)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}"></${scopeTag("udex-secondary-navigation-item", tags, suffix)}></li>` : html`<li role="none" class="udex-secondary-navigation__list-item"><udex-secondary-navigation-item index="${index}" ?active="${item.active}" path="${ifDefined(item.path)}" label="${ifDefined(item.title)}" mobile-link-title="${ifDefined(item.mobileLinkTitle)}" target="${ifDefined(item.target)}" .subItems="${ifDefined(item.items)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}"></udex-secondary-navigation-item></li>`;}
+function block5 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li role="none" class="udex-secondary-navigation__list-item"><${scopeTag("udex-secondary-navigation-item", tags, suffix)} index="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}" label="${ifDefined(this.moreButtonText)}" .subItems="${ifDefined(this._overflowItems)}"></${scopeTag("udex-secondary-navigation-item", tags, suffix)}></li>` : html`<li role="none" class="udex-secondary-navigation__list-item"><udex-secondary-navigation-item index="${ifDefined(this.visibleItems.length)}" @ui5-sub-item-click="${ifDefined(this.handleSubItemClick)}" @ui5-nav-item-click="${ifDefined(this.handleItemClick)}" label="${ifDefined(this.moreButtonText)}" .subItems="${ifDefined(this._overflowItems)}"></udex-secondary-navigation-item></li>`;}
+function block6 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__buttons"><slot name="buttons"></slot></div>`;}
+function block7 (this: SecondaryNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__buttons"><slot name="buttons"></slot></div>`;}
 
 
 export default block0;

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 @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-iconClick="${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>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><${scopeTag("udex-dropdown", tags, suffix)} id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?disable-target-overlap="${this.disableTargetOverlap}" @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)}" @before-open="${this.handleDropdownBeforeOpen}" @after-close="${this.handleDropdownAfterClose}" height="${ifDefined(this.height)}" accessible-role="Dialog" horizontal-align="Left">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</${scopeTag("udex-dropdown", tags, suffix)}>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</div>` : html`<div class="udex-select-box__root"><div class="udex-text-field__container"><div @click="${this.getHandleSingleSelectOpen}" class="udex-text-field__input" @ui5-iconClick="${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>${ this.supportingText ? block8.call(this, context, tags, suffix) : undefined }</div><udex-dropdown id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?disable-target-overlap="${this.disableTargetOverlap}" @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)}" @before-open="${this.handleDropdownBeforeOpen}" @after-close="${this.handleDropdownAfterClose}" height="${ifDefined(this.height)}" accessible-role="Dialog" horizontal-align="Left">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</udex-dropdown>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</div>`;}
+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-iconClick="${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("udex-dropdown", tags, suffix)} id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?disable-target-overlap="${this.disableTargetOverlap}" @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)}" @before-open="${this.handleDropdownBeforeOpen}" @after-close="${this.handleDropdownAfterClose}" @search-keydown="${this.handleKeyDownSearch}" height="${ifDefined(this.height)}" horizontal-align="Left">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</${scopeTag("udex-dropdown", tags, suffix)}>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</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-iconClick="${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><udex-dropdown id="udex-select-box__dropdown" class="udex-select-box__dropdown" ?disable-target-overlap="${this.disableTargetOverlap}" @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)}" @before-open="${this.handleDropdownBeforeOpen}" @after-close="${this.handleDropdownAfterClose}" @search-keydown="${this.handleKeyDownSearch}" height="${ifDefined(this.height)}" horizontal-align="Left">${ this._showTagsDropdownContent ? block9.call(this, context, tags, suffix) : block10.call(this, context, tags, suffix) }</udex-dropdown>${ this.displayonly ? block11.call(this, context, tags, suffix) : undefined }</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 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("ui5-tokenizer", tags, suffix)} part="tokenizer" show-more @ui5-selectionChange="${ifDefined(this.handleTagPress)}" @keydown="${this.handleKeydownTokenizer}" prevent-popover-open class="${ifDefined(this.tokenizerClass)}" ?disabled="${this.disabled}" @ui5-show-more-items-press="${ifDefined(this.getHandlerShowMoreItems)}" ?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("ui5-tokenizer", tags, suffix)}>` : html`<ui5-tokenizer part="tokenizer" show-more @ui5-selectionChange="${ifDefined(this.handleTagPress)}" @keydown="${this.handleKeydownTokenizer}" prevent-popover-open class="${ifDefined(this.tokenizerClass)}" ?disabled="${this.disabled}" @ui5-show-more-items-press="${ifDefined(this.getHandlerShowMoreItems)}" ?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)) }</ui5-tokenizer>`;}
 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)} accessible-role="option" class="udex-text-field__token" @keydown="${this.handleKeyDownTag}" ?read-only="${this.isReadOrDisplayOnly}" data-id="${ifDefined(item._id)}" part="token-${index}" text="${ifDefined(item.label)}" icon="decline"></${scopeTag("udex-tag", tags, suffix)}>` : html`<udex-tag accessible-role="option" class="udex-text-field__token" @keydown="${this.handleKeyDownTag}" ?read-only="${this.isReadOrDisplayOnly}" data-id="${ifDefined(item._id)}" part="token-${index}" text="${ifDefined(item.label)}" icon="decline"></udex-tag>`;}
-function block7 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-text-field__trigger" role="combobox" 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("ui5-icon", tags, suffix)} class="udex-text-field__icon" name="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></div>` : html`<div class="udex-text-field__trigger" role="combobox" aria-label="${ifDefined(this.iconAccessibleNameText)}" aria-haspopup="listbox" aria-expanded="${ifDefined(this._open)}" aria-controls="${ifDefined(this.accInfo.ariaControls)}" @click="${this.getHandleMultiSelectOpen}" aria-activedescendant><ui5-icon class="udex-text-field__icon" name="navigation-down-arrow" accessible-name="${ifDefined(this.iconAccessibleNameText)}"></ui5-icon></div>`;}
+function block7 (this: SelectBox, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-control-button", tags, suffix)} 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 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 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/StatusBadgeTemplate.lit.ts

@@ -0,0 +1,10 @@
+/* eslint no-unused-vars: 0 */
+import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+	import type StatusBadge from "../../StatusBadge.js";
+	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
+	
+function block0 (this: StatusBadge, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-status-badge" title="${ifDefined(this.ariaTitle)}"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.iconFieldName)}" class="udex-status-badge__icon" accessible-name="${ifDefined(this.badgeAccessibleName)}"></${scopeTag("ui5-icon", tags, suffix)}></div>` : html`<div class="udex-status-badge" title="${ifDefined(this.ariaTitle)}"><ui5-icon name="${ifDefined(this.iconFieldName)}" class="udex-status-badge__icon" accessible-name="${ifDefined(this.badgeAccessibleName)}"></ui5-icon></div>`;}
+
+
+export default block0;

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

@@ -4,8 +4,8 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Switch from "../../Switch.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-switch">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-switch__container" role="switch" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" aria-checked="${ifDefined(this.checked)}" aria-disabled="${ifDefined(this.disabled)}" tabindex="${ifDefined(this.switchTabIndex)}" title="${ifDefined(this.tooltip)}" @click="${this.handleSwitchClick}" @keydown="${this.handleSwitchKeyDown}"><div class="udex-switch__track ${ifDefined(this.isActiveTrackClass)}"><div class="udex-switch__handle">${ this.isSemanticColor ? block2.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }</div></div><input id="udex-switch__input" type="checkbox" ?checked="${this.checked}" class="udex-switch__input" /></div></div>`;}
-function block1 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label for="udex-switch__input" class="udex-switch__label">${ifDefined(this.label)}</label>`;}
+function block0 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-switch">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<div class="udex-switch__container" role="switch" aria-label="${ifDefined(this.accessibleName)}" aria-labelledby="${ifDefined(this.ariaLabeledBy)}" aria-checked="${ifDefined(this.checked)}" aria-disabled="${ifDefined(this.disabled)}" tabindex="${ifDefined(this.switchTabIndex)}" title="${ifDefined(this.tooltip)}" @click="${this.handleSwitchClick}" @keydown="${this.handleSwitchKeyDown}"><div class="udex-switch__track ${ifDefined(this.isActiveTrackClass)}"><div class="udex-switch__handle">${ this.isSemanticColor ? block2.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }</div></div><input id="${ifDefined(this._id)}-switch__input" type="checkbox" ?checked="${this.checked}" class="udex-switch__input" /></div></div>`;}
+function block1 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label id="${ifDefined(this._id)}-switch__label" for="${ifDefined(this._id)}-switch__input" class="udex-switch__label" part="label">${ifDefined(this.label)}</label>`;}
 function block2 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.checked ? block3.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }`;}
 function block3 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} name="accept" class="udex-switch__icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon name="accept" class="udex-switch__icon"></ui5-icon>`;}
 function block4 (this: Switch, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} name="decline" class="udex-switch__icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon name="decline" class="udex-switch__icon"></ui5-icon>`;}

package/src/generated/templates/TabInOverflowTemplate.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: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasNotHref ? block1.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) } `;}
-function block1 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-overflow__button" role="tab">${ this.hasIcon ? block2.call(this, context, tags, suffix) : undefined }${ifDefined(this.text)}${ this.hasNotIcon ? block4.call(this, context, tags, suffix) : undefined }</button>`;}
+function block1 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button id="${ifDefined(this._id)}" class="udex-tab-overflow__button" role="tab" tabindex="${ifDefined(this._tabIndex)}">${ this.hasIcon ? block2.call(this, context, tags, suffix) : undefined }${ifDefined(this.text)}${ this.hasNotIcon ? block4.call(this, context, tags, suffix) : undefined }</button>`;}
 function block2 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-overflow__button-icon"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-overflow__button-icon"><ui5-icon name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block3.call(this, context, tags, suffix) : undefined }</span>`;}
 function block3 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-overflow__button-badge"></span>`;}
 function block4 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-overflow__button-badge"></span>`;}
-function block5 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" class="udex-tab-overflow__button" role="tab">${ this.hasIcon ? block6.call(this, context, tags, suffix) : undefined }${ifDefined(this.text)}${ this.hasNotIcon ? block8.call(this, context, tags, suffix) : undefined }</a>`;}
+function block5 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" class="udex-tab-overflow__button" role="tab" tabindex="${ifDefined(this._tabIndex)}">${ this.hasIcon ? block6.call(this, context, tags, suffix) : undefined }${ifDefined(this.text)}${ this.hasNotIcon ? block8.call(this, context, tags, suffix) : undefined }</a>`;}
 function block6 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-tab-overflow__button-icon"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}>${ this.showAttentionBadge ? block7.call(this, context, tags, suffix) : undefined }</span>` : html`<span class="udex-tab-overflow__button-icon"><ui5-icon name="${ifDefined(this.icon)}"></ui5-icon>${ this.showAttentionBadge ? block7.call(this, context, tags, suffix) : undefined }</span>`;}
 function block7 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-overflow__button-badge"></span>`;}
 function block8 (this: TabInOverflow, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-tab-overflow__button-badge"></span>`;}

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	type TabNavigationPopover = any;
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TabNavigationPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} id="${ifDefined(this._id)}-overflow-popover" horizontal-align="Right" placement-type="Bottom" aria-orientation="vertical" hide-arrow _hideHeader><div class="tab-navigation-popover" @click="${this.handleOverflowItemClick}" @keydown="${this.handleFocusPopover}" role="tablist">${ repeat(this._overflowItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover id="${ifDefined(this._id)}-overflow-popover" horizontal-align="Right" placement-type="Bottom" aria-orientation="vertical" hide-arrow _hideHeader><div class="tab-navigation-popover" @click="${this.handleOverflowItemClick}" @keydown="${this.handleFocusPopover}" role="tablist">${ repeat(this._overflowItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></ui5-popover>`;}
+function block0 (this: TabNavigationPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-popover", tags, suffix)} id="${ifDefined(this._id)}-overflow-popover" horizontal-align="Right" placement-type="Bottom" aria-orientation="vertical" @ui5-after-open="${ifDefined(this.onFocusFirstItemPopover)}" hide-arrow _hideHeader><div class="tab-navigation-popover" @click="${this.handleOverflowItemClick}" @keydown="${this.handleFocusPopover}" role="tablist">${ repeat(this._overflowItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("ui5-popover", tags, suffix)}>` : html`<ui5-popover id="${ifDefined(this._id)}-overflow-popover" horizontal-align="Right" placement-type="Bottom" aria-orientation="vertical" @ui5-after-open="${ifDefined(this.onFocusFirstItemPopover)}" hide-arrow _hideHeader><div class="tab-navigation-popover" @click="${this.handleOverflowItemClick}" @keydown="${this.handleFocusPopover}" role="tablist">${ repeat(this._overflowItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></ui5-popover>`;}
 function block1 (this: TabNavigationPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ifDefined(item.tabInOverflow)}`;}
 
 

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

@@ -4,9 +4,9 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type TabNavigation from "../../TabNavigation.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="-1" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow"></${scopeTag("ui5-icon", tags, suffix)}></button></div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div></div>` : html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="-1" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<ui5-icon class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow"></ui5-icon></button></div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div></div>`;}
+function block0 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="0" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<${scopeTag("ui5-icon", tags, suffix)} class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow"></${scopeTag("ui5-icon", tags, suffix)}></button>${ifDefined(this.tabNavigationPopover)}</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div></div>` : html`<div class="udex-tab-navigation__root"><div id="${ifDefined(this._id)}-header" class="udex-tab-navigation__header" part="tab-navigation-header" @keydown="${this.handleKeyDown}"><div id="${ifDefined(this._id)}-header-tabs" class="udex-tab-navigation__header-tabs" role="tablist" aria-labelledby="tablist-${ifDefined(this._id)}" part="tab-navigation-header-tabs" @click="${this.onTabClick}">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div><button class="udex-tab-navigation__button-more" @click="${this.handleMoreButton}" @keydown="${this.handleFocusMoreButton}" tabindex="0" aria-haspopup="menu" aria-expanded="${ifDefined(this._isExpanded)}" tooltip="${ifDefined(this.moreButtonText)}" hidden>${ifDefined(this.moreButtonText)}<ui5-icon class="udex-tab-navigation__button-more-icon" name="navigation-down-arrow"></ui5-icon></button>${ifDefined(this.tabNavigationPopover)}</div><div class="udex-tab-navigation__content" id="udex-${ifDefined(this.__id)}-content" part="tab-navigation-content">${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div></div>`;}
 function block1 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ifDefined(item.tabNavigation)}`;}
-function block2 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-tab-navigation__content-item"><slot name="${ifDefined(item._slotName)}"></slot></div>`;}
+function block2 (this: TabNavigation, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-tab-navigation__content-item" id="${ifDefined(item._contentId)}" aria-labelledby="${ifDefined(item._id)}" tabindex="${ifDefined(item._contentTabIndex)}"><slot name="${ifDefined(item._slotName)}"></slot></div>`;}
 
 
 export default block0;

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

@@ -4,9 +4,15 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type Tag from "../../Tag.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div tabindex="${ifDefined(this._tabIndex)}" class="${ifDefined(this.tagClasses)}" @click="${this.tagClickHandler}" @focusin="${this._focusin}" @focusout="${this._focusout}" @keydown="${this.tagKeyDown}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.accessibleName)}" aria-pressed="${ifDefined(this.selected)}">${ this.startIcon ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-tag__text">${unsafeHTML(this.text)}</span>${ this.endIcon ? block2.call(this, context, tags, suffix) : undefined }</div>`;}
-function block1 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></ui5-icon>`;}
-function block2 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></ui5-icon>`;}
+function block0 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.readOnly ? block1.call(this, context, tags, suffix) : block2.call(this, context, tags, suffix) } `;}
+function block1 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.tagClasses)}"><span class="udex-tag__text">${unsafeHTML(this.text)}</span></div>`;}
+function block2 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.nonSelectable ? block3.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }`;}
+function block3 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.tagClasses)}">${ this.startIcon ? block4.call(this, context, tags, suffix) : undefined }<span class="udex-tag__text">${unsafeHTML(this.text)}</span>${ this.endIcon ? block5.call(this, context, tags, suffix) : undefined }</div>`;}
+function block4 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button class="udex-tag__btn-icon" @click="${this.iconClickHandler}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.iconAccessibleName)}"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}></button>` : html`<button class="udex-tag__btn-icon" @click="${this.iconClickHandler}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.iconAccessibleName)}"><ui5-icon class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}"></ui5-icon></button>`;}
+function block5 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<button class="udex-tag__btn-icon" @click="${this.iconClickHandler}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.iconAccessibleName)}"><${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}"></${scopeTag("ui5-icon", tags, suffix)}></button>` : html`<button class="udex-tag__btn-icon" @click="${this.iconClickHandler}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.iconAccessibleName)}"><ui5-icon class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}"></ui5-icon></button>`;}
+function block6 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div tabindex="${ifDefined(this._tabIndex)}" class="${ifDefined(this.tagClasses)}" @click="${this.tagClickHandler}" @focusin="${this._focusin}" @focusout="${this._focusout}" @keydown="${this.tagKeyDown}" role="${ifDefined(this.accessibleRole)}" aria-label="${ifDefined(this.accessibleName)}" aria-pressed="${ifDefined(this.selected)}">${ this.startIcon ? block7.call(this, context, tags, suffix) : undefined }<span class="udex-tag__text">${unsafeHTML(this.text)}</span>${ this.endIcon ? block8.call(this, context, tags, suffix) : undefined }</div>`;}
+function block7 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-tag__icon udex-tag__icon--start" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></ui5-icon>`;}
+function block8 (this: Tag, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-tag__icon udex-tag__icon--end" name="${ifDefined(this.icon)}" @click="${this.iconClickHandler}"></ui5-icon>`;}
 
 
 export default block0;

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

@@ -4,7 +4,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 	import type TextArea from "../../TextArea.js";
 	import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: TextArea, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-textarea">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<textarea id="textarea" class="udex-textarea__field" part="textarea" .value="${ifDefined(this.value)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" aria-label="${ifDefined(this.accessibleName)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-disabled="${ifDefined(this.disabled)}" aria-invalid="${ifDefined(this.ariaInvalid)}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @change="${this.handleChange}"></textarea>${ this._supportingText ? block3.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block4.call(this, context, tags, suffix) : undefined }${ this.readonly ? block5.call(this, context, tags, suffix) : undefined }</div>`;}
+function block0 (this: TextArea, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-textarea">${ this.label ? block1.call(this, context, tags, suffix) : undefined }<textarea id="textarea" class="udex-textarea__field" part="textarea" .value="${ifDefined(this.value)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" ?disabled="${this.disabled}" ?readonly="${this.isInputReadonly}" ?required="${this.required}" ?aria-label="${this.accessibleName}" ?aria-describedby="${this.ariaDescribedBy}" ?aria-labelledby="${this.accessibleNameRef}" aria-required="${ifDefined(this.required)}" aria-readonly="${ifDefined(this.isInputReadonly)}" aria-invalid="${ifDefined(this.ariaInvalid)}" @input="${this.handleInput}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @change="${this.handleChange}"></textarea>${ this._supportingText ? block3.call(this, context, tags, suffix) : undefined }${ this.hasValueState ? block4.call(this, context, tags, suffix) : undefined }${ this.readonly ? block5.call(this, context, tags, suffix) : undefined }</div>`;}
 function block1 (this: TextArea, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<label class="${ifDefined(this.labelClasses)}" for="textarea" part="label">${ifDefined(this.label)}${ this.required ? block2.call(this, context, tags, suffix) : undefined }</label>`;}
 function block2 (this: TextArea, context: UI5Element, tags: string[], suffix: string | undefined) { return html` * `;}
 function block3 (this: TextArea, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-status-message", tags, suffix)} supporting-text-alignment="Right" ?disabled="${this.disabled}" supporting-text="${ifDefined(this._supportingText)}" value-state="${ifDefined(this.fieldState)}"></${scopeTag("udex-status-message", tags, suffix)}><span id="${ifDefined(this._id)}-supportingTextDesc" class="hidden-text">${ifDefined(this._supportingText)}</span>` : html`<udex-status-message supporting-text-alignment="Right" ?disabled="${this.disabled}" supporting-text="${ifDefined(this._supportingText)}" value-state="${ifDefined(this.fieldState)}"></udex-status-message><span id="${ifDefined(this._id)}-supportingTextDesc" class="hidden-text">${ifDefined(this._supportingText)}</span>`;}