@sapudex/web-components 2.1.0 → 2.2.0

package/src/TextArea.ts

@@ -22,7 +22,7 @@ import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 
 import UDExStatusMessage from "./StatusMessage.js";
-import ValueState from "./types/common.js";
+import UDExValueState from "./types/common.js";
 import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
 
 // Styles
@@ -129,7 +129,7 @@ class UDExTextArea extends UI5Element {
    * @public
    */
   @property()
-    valueState: `${ValueState}` = ValueState.Standard;
+    valueState: UDExValueState = UDExValueState.Standard;
 
   /**
    * Defines whether the component is required.
@@ -314,19 +314,19 @@ class UDExTextArea extends UI5Element {
   };
 
   get ariaInvalid(): string | null {
-    return this.valueState === ValueState.Error ? "true" : null;
+    return this.valueState === UDExValueState.Error ? "true" : null;
   }
 
   get hasValueState(): boolean {
-    return this.valueState === ValueState.Error || this.valueState === ValueState.Warning || this.valueState === ValueState.Success;
+    return this.valueState === UDExValueState.Error || this.valueState === UDExValueState.Warning || this.valueState === UDExValueState.Success;
   }
 
   get valueStateTypeMappings() {
     return {
-      [ValueState.Success]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
-      [ValueState.Standard]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),
-      [ValueState.Error]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-      [ValueState.Warning]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+      [UDExValueState.Success]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+      [UDExValueState.Standard]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),
+      [UDExValueState.Error]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+      [UDExValueState.Warning]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
     };
   }
 
@@ -335,7 +335,7 @@ class UDExTextArea extends UI5Element {
       return;
     }
 
-    if (this.valueState === ValueState.Standard) {
+    if (this.valueState === UDExValueState.Standard) {
       return;
     }
 

package/src/TextField.hbs

@@ -24,6 +24,8 @@
          ?required="{{required}}"
          aria-required="{{required}}"
          aria-readonly="{{isInputReadonly}}"
+         autocomplete="{{autocomplete}}"
+         role="{{inputRole}}"
          ?aria-disabled="{{readonlyNotDisabled}}"
          aria-invalid="{{accInfo.ariaInvalid}}"
          aria-describedby="{{accInfo.ariaDescribedBy}}"

package/src/TextField.ts

@@ -15,7 +15,7 @@ import {
   READ_ONLY,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExControlButton from "./ControlButton.js";
-import ValueState from "./types/common.js";
+import UDExValueState from "./types/common.js";
 import UDExStatusMessage from "./StatusMessage.js";
 
 // Template
@@ -195,7 +195,7 @@ class UDExTextField extends UI5Element {
    * @public
    */
   @property()
-    valueState: `${ValueState}` = ValueState.Standard;
+    valueState: `${UDExValueState}` = UDExValueState.Standard;
 
   /**
    * Defines supporting text under the input field.
@@ -224,6 +224,14 @@ class UDExTextField extends UI5Element {
   @property({ type: Boolean })
     active!: boolean;
 
+  /**
+   * Defines the behaviour of autocomplete.
+   * @default "off"
+   * @public
+   */
+  @property({ type: String })
+    autocomplete: string = "off";
+
   /**
    * Defines the inner stored show password button tooltip.
    *
@@ -334,11 +342,11 @@ class UDExTextField extends UI5Element {
   }
 
   get hasValueState(): boolean {
-    return this.valueState !== ValueState.Standard;
+    return this.valueState !== UDExValueState.Standard;
   }
 
   get valueStateText(): string | undefined {
-    return this.valueState !== ValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;
+    return this.valueState !== UDExValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;
   }
 
   get readOnlyStateText(): string {
@@ -363,7 +371,7 @@ class UDExTextField extends UI5Element {
 
   get accInfo(): AccInfo {
     return {
-      "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
+      "ariaInvalid": this.valueState === UDExValueState.Error ? "true" : undefined,
       "ariaDescribedBy": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,
       "ariaLabelledBy": this.accessibleNameRef || undefined,
       "ariaLabel": this.accessibleName || undefined,
@@ -371,6 +379,14 @@ class UDExTextField extends UI5Element {
     };
   }
 
+  get inputRole(): string | undefined {
+    return this.isAutoCompleteDisabled ? "presentation" : undefined;
+  }
+
+  get isAutoCompleteDisabled(): boolean {
+    return this.autocomplete === "off" || this.autocomplete === "new-password";
+  }
+
   handleKeydown(e: KeyboardEvent): void {
     e.stopPropagation();
     this.fireDecoratorEvent("keydown", { keyboardEvent: e });

package/src/Toast.ts

@@ -62,7 +62,7 @@ class UDExToast extends Toast {
   * @public
   * @default false
   */
-  @property()
+  @property({ type: Boolean })
     showCloseIcon!: boolean;
 
   /**

package/src/Tooltip.ts

@@ -136,6 +136,25 @@ class UDExTooltip extends UI5Element {
    */
   @property({ type: Boolean })
     preventFocusRestore!: boolean;
+
+  _onClose!: EventListener;
+
+  constructor() {
+    super();
+    this._onClose = this.syncClose.bind(this);
+  }
+
+  syncClose() {
+    this.open = false;
+  }
+
+  onEnterDOM(): void {
+    this.shadowRoot?.querySelector("[ui5-popover]")?.addEventListener("close", this._onClose);
+  }
+
+  onExitDOM(): void {
+    this.removeEventListener("close", this._onClose);
+  }
 }
 
 UDExTooltip.define();

package/src/Upload.ts

@@ -13,7 +13,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { UPLOAD_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
 import UDExButton from "./Button.js";
-import { UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 import UDExList from "./List.js";
 import UDExUploadItem from "./UploadItem.js";
 import UploadTemplate from "./generated/templates/UploadTemplate.lit.js";

package/src/UploadItem.ts

@@ -17,12 +17,12 @@ import UDExListItem from "./ListItem.js";
 import UDExProgressBar from "./ProgressBar.js";
 import UDExLink from "./Link.js";
 import UDExButton from "./Button.js";
-import { UDExButtonSize } from "./types/Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 import UploadItemTemplate from "./generated/templates/UploadItemTemplate.lit.js";
 
 // Styles
 import UploadItemCss from "./generated/themes/UploadItem.css.js";
-import FileUploadState from "./types/FileUploadState.js";
+import UDExFileUploadState from "./types/FileUploadState.js";
 
 const BreakpointSizeS: number = 979;
 const BreakpointSizeM: number = 1279;
@@ -97,7 +97,7 @@ class UDExUploadItem extends UDExListItem {
    * @public
    */
   @property()
-    uploadState: `${FileUploadState}` = FileUploadState.Uploaded;
+    uploadState: `${UDExFileUploadState}` = UDExFileUploadState.Uploaded;
 
   /**
    * Slot for information about the uploaded file.
@@ -178,7 +178,7 @@ class UDExUploadItem extends UDExListItem {
   _handleResize() {
     this._buttonSize = window.innerWidth <= BreakpointSizeS ? UDExButtonSize.Medium : UDExButtonSize.Large;
     this._breakpointL = window.innerWidth > BreakpointSizeM;
-    this._breakpointM = !this._breakpointL ? true : !this._breakpointL && this.uploadState === FileUploadState.Uploaded;
+    this._breakpointM = !this._breakpointL ? true : !this._breakpointL && this.uploadState === UDExFileUploadState.Uploaded;
   }
 
   get fileLinkComponent(): UDExLink {
@@ -190,11 +190,11 @@ class UDExUploadItem extends UDExListItem {
   }
 
   get showUploadProgress(): boolean {
-    return this.uploadState === FileUploadState.Error || this.uploadState === FileUploadState.Uploading;
+    return this.uploadState === UDExFileUploadState.Error || this.uploadState === UDExFileUploadState.Uploading;
   }
 
   get uploadProgressState(): ValueState {
-    if (this.uploadState === FileUploadState.Uploading) {
+    if (this.uploadState === UDExFileUploadState.Uploading) {
       return ValueState.Information;
     }
 
@@ -202,7 +202,7 @@ class UDExUploadItem extends UDExListItem {
   }
 
   get uploadStatus(): string {
-    if (this.uploadState === FileUploadState.Uploading) {
+    if (this.uploadState === UDExFileUploadState.Uploading) {
       return `${UDExUploadItem.i18nBundle.getText(UPLOADING_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;
     }
 
@@ -210,11 +210,11 @@ class UDExUploadItem extends UDExListItem {
   }
 
   get fileInteractive(): boolean {
-    return this.uploadState === FileUploadState.Uploaded;
+    return this.uploadState === UDExFileUploadState.Uploaded;
   }
 
   get additionalInfoClasses(): string {
-    return `udex-upload-item__info ${this.uploadState === FileUploadState.Error ? "udex-upload-item__error" : ""}`;
+    return `udex-upload-item__info ${this.uploadState === UDExFileUploadState.Error ? "udex-upload-item__error" : ""}`;
   }
 
   get uploadItemClasses(): string {

package/src/generated/json-imports/Themes-node.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+const loadThemeProperties = async (themeName) => {
+	switch (themeName) {
+		case "sap_fiori_3": return (await import(/* webpackChunkName: "sapudex-web-components-sap-fiori_3-parameters-bundle" */"../assets/themes/sap_fiori_3/parameters-bundle.css.json", {with: { type: 'json'}})).default;
+		case "sap_horizon": return (await import(/* webpackChunkName: "sapudex-web-components-sap-horizon-parameters-bundle" */"../assets/themes/sap_horizon/parameters-bundle.css.json", {with: { type: 'json'}})).default;
+		default: throw "unknown theme"
+	}
+};
+
+const loadAndCheck = async (themeName) => {
+	const data = await loadThemeProperties(themeName);
+	if (typeof data === "string" && data.endsWith(".json")) {
+		throw new Error(`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the "Assets" documentation for more information.`);
+	}
+	return data;
+};
+
+["sap_fiori_3", "sap_horizon"]
+  .forEach(themeName => registerThemePropertiesLoader("@sapudex/web-components", themeName, loadAndCheck));

package/src/generated/json-imports/i18n-node.ts

@@ -0,0 +1,85 @@
+// @ts-nocheck
+import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+
+const importMessageBundle = async (localeId) => {
+	switch (localeId) {
+				case "ar": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-ar" */ "../assets/i18n/messagebundle_ar.json", {with: { type: 'json'}})).default;
+		case "bg": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-bg" */ "../assets/i18n/messagebundle_bg.json", {with: { type: 'json'}})).default;
+		case "cs": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-cs" */ "../assets/i18n/messagebundle_cs.json", {with: { type: 'json'}})).default;
+		case "da": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-da" */ "../assets/i18n/messagebundle_da.json", {with: { type: 'json'}})).default;
+		case "de": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-de" */ "../assets/i18n/messagebundle_de.json", {with: { type: 'json'}})).default;
+		case "el": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-el" */ "../assets/i18n/messagebundle_el.json", {with: { type: 'json'}})).default;
+		case "en": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-en" */ "../assets/i18n/messagebundle_en.json", {with: { type: 'json'}})).default;
+		case "es": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-es" */ "../assets/i18n/messagebundle_es.json", {with: { type: 'json'}})).default;
+		case "et": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-et" */ "../assets/i18n/messagebundle_et.json", {with: { type: 'json'}})).default;
+		case "fi": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-fi" */ "../assets/i18n/messagebundle_fi.json", {with: { type: 'json'}})).default;
+		case "fr": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-fr" */ "../assets/i18n/messagebundle_fr.json", {with: { type: 'json'}})).default;
+		case "hr": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-hr" */ "../assets/i18n/messagebundle_hr.json", {with: { type: 'json'}})).default;
+		case "hu": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-hu" */ "../assets/i18n/messagebundle_hu.json", {with: { type: 'json'}})).default;
+		case "it": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-it" */ "../assets/i18n/messagebundle_it.json", {with: { type: 'json'}})).default;
+		case "iw": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-iw" */ "../assets/i18n/messagebundle_iw.json", {with: { type: 'json'}})).default;
+		case "ko": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-ko" */ "../assets/i18n/messagebundle_ko.json", {with: { type: 'json'}})).default;
+		case "lt": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-lt" */ "../assets/i18n/messagebundle_lt.json", {with: { type: 'json'}})).default;
+		case "lv": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-lv" */ "../assets/i18n/messagebundle_lv.json", {with: { type: 'json'}})).default;
+		case "nl": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-nl" */ "../assets/i18n/messagebundle_nl.json", {with: { type: 'json'}})).default;
+		case "no": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-no" */ "../assets/i18n/messagebundle_no.json", {with: { type: 'json'}})).default;
+		case "pl": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-pl" */ "../assets/i18n/messagebundle_pl.json", {with: { type: 'json'}})).default;
+		case "pt": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-pt" */ "../assets/i18n/messagebundle_pt.json", {with: { type: 'json'}})).default;
+		case "ro": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-ro" */ "../assets/i18n/messagebundle_ro.json", {with: { type: 'json'}})).default;
+		case "ru": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-ru" */ "../assets/i18n/messagebundle_ru.json", {with: { type: 'json'}})).default;
+		case "sk": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-sk" */ "../assets/i18n/messagebundle_sk.json", {with: { type: 'json'}})).default;
+		case "sl": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-sl" */ "../assets/i18n/messagebundle_sl.json", {with: { type: 'json'}})).default;
+		case "sr": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-sr" */ "../assets/i18n/messagebundle_sr.json", {with: { type: 'json'}})).default;
+		case "sv": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-sv" */ "../assets/i18n/messagebundle_sv.json", {with: { type: 'json'}})).default;
+		case "tr": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-tr" */ "../assets/i18n/messagebundle_tr.json", {with: { type: 'json'}})).default;
+		case "uk": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-uk" */ "../assets/i18n/messagebundle_uk.json", {with: { type: 'json'}})).default;
+		case "zh_CN": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-zh_CN" */ "../assets/i18n/messagebundle_zh_CN.json", {with: { type: 'json'}})).default;
+		case "zh_TW": return (await import(/* webpackChunkName: "sapudex-web-components-messagebundle-zh_TW" */ "../assets/i18n/messagebundle_zh_TW.json", {with: { type: 'json'}})).default;
+		default: throw "unknown locale"
+	}
+}
+
+const importAndCheck = async (localeId) => {
+	const data = await importMessageBundle(localeId);
+	if (typeof data === "string" && data.endsWith(".json")) {
+		throw new Error(`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the "Assets" documentation for more information.`);
+	}
+	return data;
+}
+
+const localeIds = ["ar",
+	"bg",
+	"cs",
+	"da",
+	"de",
+	"el",
+	"en",
+	"es",
+	"et",
+	"fi",
+	"fr",
+	"hr",
+	"hu",
+	"it",
+	"iw",
+	"ko",
+	"lt",
+	"lv",
+	"nl",
+	"no",
+	"pl",
+	"pt",
+	"ro",
+	"ru",
+	"sk",
+	"sl",
+	"sr",
+	"sv",
+	"tr",
+	"uk",
+	"zh_CN",
+	"zh_TW",];
+
+localeIds.forEach(localeId => {
+	registerI18nLoader("@sapudex/web-components", localeId, importAndCheck);
+});

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

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 type BreadcrumbsPopover = any;
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<udex-dropdown id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></udex-dropdown>`;}
+function block0 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}" @close="${this._afterDropdownClose}" @open="${this._afterDropdownOpen}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<udex-dropdown id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}" @close="${this._afterDropdownClose}" @open="${this._afterDropdownOpen}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</div></udex-dropdown>`;}
 function block1 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.icon ? block2.call(this, context, tags, suffix, item, index) : block3.call(this, context, tags, suffix, item, index) }`;}
 function block2 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-link", tags, suffix)} index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--with-icon udex-breadcrumbs__item--hidden udex-breadcrumbs__item--${index}" icon="${ifDefined(item.icon)}" accessible-name="${ifDefined(item.textContent)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</${scopeTag("udex-link", tags, suffix)}>` : html`<udex-link index="${index}" id="${ifDefined(item._id)}-li" @ui5-click="${ifDefined(this._onDropdownLinkPress)}" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--with-icon udex-breadcrumbs__item--hidden udex-breadcrumbs__item--${index}" icon="${ifDefined(item.icon)}" accessible-name="${ifDefined(item.textContent)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.textContent)}</udex-link>`;}
 function block3 (this: BreadcrumbsPopover, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item._isCurrentPageItem ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }`;}

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

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type Breadcrumbs from "../../Breadcrumbs.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper"><button id="udex-${ifDefined(this._id)}-breadcrumbs__opener" @click="${this._toggleDropdown}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" aria-haspopup="true"><${scopeTag("ui5-icon", tags, suffix)} name="slim-arrow-down" mode="Decorative" title="${ifDefined(this._dropdownArrowAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></button></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav><${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper"><button id="udex-${ifDefined(this._id)}-breadcrumbs__opener" @click="${this._toggleDropdown}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" aria-haspopup="true"><ui5-icon name="slim-arrow-down" mode="Decorative" title="${ifDefined(this._dropdownArrowAccessibleNameText)}"></ui5-icon></button></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav><udex-dropdown id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></udex-dropdown>`;}
+function block0 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper"><${scopeTag("udex-link", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__opener" @click="${this._toggleDropdown}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" icon="slim-arrow-down" icon-placement="Start" aria-haspopup="true"></${scopeTag("udex-link", tags, suffix)}></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav><${scopeTag("udex-dropdown", tags, suffix)} id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}" @close="${this._afterDropdownClose}" @open="${this._afterDropdownOpen}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></${scopeTag("udex-dropdown", tags, suffix)}>` : html`<nav class="udex-breadcrumbs ui5-breadcrumbs-root" aria-label="${ifDefined(this._accessibleNameText)}"><ol @focusin="${this._onfocusin}"><li class="udex-breadcrumbs__arrow-wrapper ui5-breadcrumbs-dropdown-arrow-link-wrapper"><udex-link id="udex-${ifDefined(this._id)}-breadcrumbs__opener" @click="${this._toggleDropdown}" class="udex-breadcrumbs__trigger ${ifDefined(this._triggerClass)}" accessible-role="button" aria-label="${ifDefined(this._dropdownArrowAccessibleNameText)}" icon="slim-arrow-down" icon-placement="Start" aria-haspopup="true"></udex-link></li>${ repeat(this._linksData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block1.call(this, context, tags, suffix, item, index)) }</ol></nav><udex-dropdown id="udex-${ifDefined(this._id)}-breadcrumbs__popover" opener="udex-${ifDefined(this._id)}-breadcrumbs__opener" class="udex-breadcrumbs__popover ui5-breadcrumbs-popover" placement="Bottom" horizontal-align="Start" @keydown="${this._handleKeydown}" @close="${this._afterDropdownClose}" @open="${this._afterDropdownOpen}"><div class="udex-breadcrumbs__popover-content">${ repeat(this._dropdownItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div></udex-dropdown>`;}
 function block1 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-breadcrumbs__link-wrapper ui5-breadcrumbs-link-wrapper" id="${ifDefined(item._id)}-link-wrapper">${ !item._isCurrentPageItem ? block2.call(this, context, tags, suffix, item, index) : undefined }</li>`;}
 function block2 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<span class="udex-breadcrumbs__separator" aria-hidden="true"></span><${scopeTag("udex-link", tags, suffix)} @ui5-click="${ifDefined(this._onLinkPress)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--visible" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" id="${ifDefined(item._id)}-link" accessible-name="${ifDefined(item._accessibleNameText)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.innerText)}</${scopeTag("udex-link", tags, suffix)}>` : html`<span class="udex-breadcrumbs__separator" aria-hidden="true"></span><udex-link @ui5-click="${ifDefined(this._onLinkPress)}" class="udex-breadcrumbs__item udex-breadcrumbs__item--visible" href="${ifDefined(item.href)}" target="${ifDefined(item.target)}" id="${ifDefined(item._id)}-link" accessible-name="${ifDefined(item._accessibleNameText)}" data-ui5-stable="${ifDefined(item.stableDomRef)}">${ifDefined(item.innerText)}</udex-link>`;}
 function block3 (this: Breadcrumbs, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.icon ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }`;}

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

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type FilterMenu from "../../FilterMenu.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: FilterMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div><button id="filterMenuTrigger" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeydown}" aria-label="${ifDefined(this.triggerButtonAccessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" aria-expanded="${ifDefined(this._open)}" aria-haspopup="true" role="${ifDefined(this.triggerAccessibleRole)}" aria-controls="${ifDefined(this._id)}_udex-filter-menu-dropdown" ?disabled="${this.disabled}" class="udex-filter-menu__trigger" tabindex="0">${ this.hasFilterNamePrefix ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-filter-menu__trigger-wrap" ?disabled="${this.disabled}"><span class="udex-filter-menu__trigger-name">${ifDefined(this.filterName)}</span>${ this.badgeValue ? block2.call(this, context, tags, suffix) : undefined }<${scopeTag("ui5-icon", tags, suffix)} class="udex-filter-menu__trigger-icon" name="navigation-down-arrow" mode="Decorative" accessible-name="${ifDefined(this._iconAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></span></button><${scopeTag("ui5-popover", tags, suffix)} id="${ifDefined(this._id)}_udex-filter-menu-dropdown" hide-arrow ?allow-target-overlap="${this.disableAllowTargetOverlap}" placement="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @keydown="${this.handleKeyDownList}" @search-keydown="${this.handleKeyDownSearch}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-close="${ifDefined(this._dropdownAfterClose)}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}">${ifDefined(this.searchableList)}${ this.modeMultiSelect ? block3.call(this, context, tags, suffix) : undefined }</${scopeTag("ui5-popover", tags, suffix)}></div> ` : html`<div><button id="filterMenuTrigger" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeydown}" aria-label="${ifDefined(this.triggerButtonAccessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" aria-expanded="${ifDefined(this._open)}" aria-haspopup="true" role="${ifDefined(this.triggerAccessibleRole)}" aria-controls="${ifDefined(this._id)}_udex-filter-menu-dropdown" ?disabled="${this.disabled}" class="udex-filter-menu__trigger" tabindex="0">${ this.hasFilterNamePrefix ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-filter-menu__trigger-wrap" ?disabled="${this.disabled}"><span class="udex-filter-menu__trigger-name">${ifDefined(this.filterName)}</span>${ this.badgeValue ? block2.call(this, context, tags, suffix) : undefined }<ui5-icon class="udex-filter-menu__trigger-icon" name="navigation-down-arrow" mode="Decorative" accessible-name="${ifDefined(this._iconAccessibleNameText)}"></ui5-icon></span></button><ui5-popover id="${ifDefined(this._id)}_udex-filter-menu-dropdown" hide-arrow ?allow-target-overlap="${this.disableAllowTargetOverlap}" placement="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @keydown="${this.handleKeyDownList}" @search-keydown="${this.handleKeyDownSearch}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-close="${ifDefined(this._dropdownAfterClose)}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}">${ifDefined(this.searchableList)}${ this.modeMultiSelect ? block3.call(this, context, tags, suffix) : undefined }</ui5-popover></div> `;}
+function block0 (this: FilterMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div><button id="filterMenuTrigger" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeydown}" aria-label="${ifDefined(this.triggerButtonAccessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" aria-expanded="${ifDefined(this._open)}" aria-haspopup="true" role="${ifDefined(this.triggerAccessibleRole)}" aria-controls="${ifDefined(this._id)}_udex-filter-menu-dropdown" ?disabled="${this.disabled}" class="udex-filter-menu__trigger" tabindex="0">${ this.hasFilterNamePrefix ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-filter-menu__trigger-wrap" ?disabled="${this.disabled}"><span class="udex-filter-menu__trigger-name">${ifDefined(this.filterName)}</span>${ this.badgeValue ? block2.call(this, context, tags, suffix) : undefined }<${scopeTag("ui5-icon", tags, suffix)} class="udex-filter-menu__trigger-icon" name="navigation-down-arrow" mode="Decorative" accessible-name="${ifDefined(this._iconAccessibleNameText)}"></${scopeTag("ui5-icon", tags, suffix)}></span></button><${scopeTag("ui5-popover", tags, suffix)} id="${ifDefined(this._id)}_udex-filter-menu-dropdown" hide-arrow ?allow-target-overlap="${this.disableAllowTargetOverlap}" accessible-role="${ifDefined(this.accessibleRole)}" placement="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @keydown="${this.handleKeyDownList}" @search-keydown="${this.handleKeyDownSearch}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-close="${ifDefined(this._dropdownAfterClose)}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}">${ifDefined(this.searchableList)}${ this.modeMultiSelect ? block3.call(this, context, tags, suffix) : undefined }</${scopeTag("ui5-popover", tags, suffix)}></div> ` : html`<div><button id="filterMenuTrigger" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeydown}" aria-label="${ifDefined(this.triggerButtonAccessibleName)}" aria-labelledby="${ifDefined(this.accessibleNameRef)}" aria-expanded="${ifDefined(this._open)}" aria-haspopup="true" role="${ifDefined(this.triggerAccessibleRole)}" aria-controls="${ifDefined(this._id)}_udex-filter-menu-dropdown" ?disabled="${this.disabled}" class="udex-filter-menu__trigger" tabindex="0">${ this.hasFilterNamePrefix ? block1.call(this, context, tags, suffix) : undefined }<span class="udex-filter-menu__trigger-wrap" ?disabled="${this.disabled}"><span class="udex-filter-menu__trigger-name">${ifDefined(this.filterName)}</span>${ this.badgeValue ? block2.call(this, context, tags, suffix) : undefined }<ui5-icon class="udex-filter-menu__trigger-icon" name="navigation-down-arrow" mode="Decorative" accessible-name="${ifDefined(this._iconAccessibleNameText)}"></ui5-icon></span></button><ui5-popover id="${ifDefined(this._id)}_udex-filter-menu-dropdown" hide-arrow ?allow-target-overlap="${this.disableAllowTargetOverlap}" accessible-role="${ifDefined(this.accessibleRole)}" placement="${ifDefined(this.placement)}" horizontal-align="${ifDefined(this.horizontalAlign)}" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleHeaderPress)}" @keydown="${this.handleKeyDownList}" @search-keydown="${this.handleKeyDownSearch}" @ui5-before-open="${ifDefined(this._dropdownBeforeOpen)}" @ui5-open="${ifDefined(this._dropdownAfterOpen)}" @ui5-before-close="${ifDefined(this._dropdownBeforeClose)}" @ui5-close="${ifDefined(this._dropdownAfterClose)}" @ui5-select-all="${ifDefined(this.handleSelectAll)}" @ui5-submit-search-value="${ifDefined(this.handleSubmitSearch)}" @ui5-handle-value-search="${ifDefined(this.handleValueSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleResetSearch)}">${ifDefined(this.searchableList)}${ this.modeMultiSelect ? block3.call(this, context, tags, suffix) : undefined }</ui5-popover></div> `;}
 function block1 (this: FilterMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-filter-menu__trigger-prefix">${ifDefined(this.filterNamePrefix)}</span>`;}
 function block2 (this: FilterMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-badge", tags, suffix)} class="udex-filter-menu__badge" type="Number" design="Info" size="Small">${ifDefined(this.badgeValue)}</${scopeTag("udex-badge", tags, suffix)}>` : html`<udex-badge class="udex-filter-menu__badge" type="Number" design="Info" size="Small">${ifDefined(this.badgeValue)}</udex-badge>`;}
 function block3 (this: FilterMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ !this.hideActionBar ? block4.call(this, context, tags, suffix) : undefined }`;}

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

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

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

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

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

@@ -6,8 +6,8 @@ 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)}" aria-current="${ifDefined(this.ariaCurrent)}" @keydown="${this.handleItemLinkKeyDown}" @click="${this.fireNavItemClickEvent}">${ifDefined(this.itemLabel)}</a>`;}
-function block2 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button class="udex-secondary-navigation__item" role="${ifDefined(this.itemRole)}" tabindex="0" ?active="${this.isActive}" aria-haspopup="${ifDefined(this.hasNestedItems)}" aria-expanded="${ifDefined(this.isOpen)}" aria-label="${ifDefined(this.ariaLabel)}" @keydown="${this.handleItemEnterOrSpaceKeys}" @click="${this.openDropdown}"><span class="udex-secondary-navigation__item-text-wrap">${ifDefined(this.itemLabel)}${ this._subTitle ? block3.call(this, context, tags, suffix) : undefined }${ this.hasNestedItems ? block4.call(this, context, tags, suffix) : undefined }</span></button>${ this.isOpen ? block5.call(this, context, tags, suffix) : undefined }`;}
+function 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)}" tabindex="${ifDefined(this._tabIndex)}" aria-current="${ifDefined(this.ariaCurrent)}" @keydown="${this.handleItemLinkKeyDown}" @click="${this.fireNavItemClickEvent}">${ifDefined(this.itemLabel)}</a>`;}
+function block2 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button class="udex-secondary-navigation__item" role="${ifDefined(this.itemRole)}" tabindex="${ifDefined(this.menuOpenerTabIndex)}" ?active="${this.isActive}" aria-haspopup="${ifDefined(this.hasNestedItems)}" aria-expanded="${ifDefined(this.isOpen)}" aria-label="${ifDefined(this.ariaLabel)}" @keydown="${this.handleItemEnterOrSpaceKeys}" @click="${this.openDropdown}"><span class="udex-secondary-navigation__item-text-wrap">${ifDefined(this.itemLabel)}${ this._subTitle ? block3.call(this, context, tags, suffix) : undefined }${ this.hasNestedItems ? block4.call(this, context, tags, suffix) : undefined }</span></button>${ this.isOpen ? block5.call(this, context, tags, suffix) : undefined }`;}
 function block3 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-secondary-navigation__item-sub-title">${ifDefined(this._subTitle)}</span>`;}
 function block4 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-secondary-navigation__item-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-secondary-navigation__item-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>`;}
 function block5 (this: SecondaryNavigationItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-secondary-navigation__dropdown"><ul role="menu" class="udex-secondary-navigation__dropdown-list" @keydown="${this.handleSubItemKeyDown}">${ repeat(this._processedItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block6.call(this, context, tags, suffix, item, index)) }</ul><div @keydown="${this.handleButtonsEscKey}"><slot></slot></div></div>`;}

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

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

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

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

package/src/generated/themes/Breadcrumbs.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-breadcrumbs-item-color: var(--sapNeutralElementColor, var(--udexColorGrey6, #5B738B ));--udex-breadcrumbs-item-font-size: var(--udexTypographyBodyXXSFontSize, 12px);--udex-breadcrumbs-item-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-breadcrumbs-margin: 0}.udex-breadcrumbs{font-family:var(--sapFontFamily);white-space:nowrap;outline:none;margin:var(--udex-breadcrumbs-margin)}.udex-breadcrumbs>ol{margin:0;padding:var(--udexSpacer2, 2px) 0;list-style-type:none;display:-webkit-box;display:-webkit-flex;display:flex}.udex-breadcrumbs>ol>li{display:inline-flex;align-items:baseline}.udex-breadcrumbs__separator:after{content:"/";padding:0 .125rem;color:var(--udex-breadcrumbs-item-color);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--udex-breadcrumbs-item-font-size);line-height:18px}:host([separators="DoubleSlash"]) .udex-breadcrumbs__separator:after{content:"//"}:host([separators="BackSlash"]) .udex-breadcrumbs__separator:after{content:"\\\\\\\\"}:host([separators="DoubleBackSlash"]) .udex-breadcrumbs__separator:after{content:"\\\\\\\\\\\\\\\\"}:host([separators="GreaterThan"]) .udex-breadcrumbs__separator:after{content:">"}:host([separators="DoubleGreaterThan"]) .udex-breadcrumbs__separator:after{content:">>"}.udex-breadcrumbs__trigger,.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon],.udex-breadcrumbs__item[focused],.udex-breadcrumbs__item{font-family:var(--sapFontFamily);color:var(--udex-breadcrumbs-item-color);--sapLink_Hover_Color: var(--udex-breadcrumbs-item-color);--sapFontSize: var(--udex-breadcrumbs-item-font-size);--sapLinkColor: var(--udex-breadcrumbs-item-color);--sapLink_Active_Color: var(--udex-breadcrumbs-item-color);--udex-link-text-decoration: none;position:relative}.udex-breadcrumbs__item{line-height:var(--udex-breadcrumbs-item-line-height)}.ui5-breadcrumbs-dropdown-arrow-link-wrapper{display:flex}.udex-breadcrumbs__trigger{border:none;background:none;padding:0;cursor:pointer;height:12px;width:12px;margin:auto}.udex-breadcrumbs__trigger:focus{outline:solid var(--udexSpacer2, 2px) var(--sapContent_FocusColor, #0040B0);border-radius:var(--udexRadiusXXS, 2px)}.udex-breadcrumbs__trigger--opened [ui5-icon]{transform:rotate(180deg)}.udex-breadcrumbs__trigger,[ui5-link].udex-breadcrumbs__item{text-decoration:none;display:inline-flex}[ui5-link]:not([icon]).udex-breadcrumbs__item:hover:after{content:"";position:absolute;height:.0625rem;left:.125rem;right:.125rem;bottom:.125rem;background-color:var(--udex-breadcrumbs-item-color)}.udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]:before{content:""}.udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]{padding-left:0}.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon]:after,.udex-breadcrumbs__arrow-wrapper:hover [ui5-icon]:after{border-bottom:0}
+export default `:host{--udex-breadcrumbs-item-color: var(--sapNeutralElementColor, var(--udexColorGrey6, #5B738B ));--udex-breadcrumbs-item-font-size: var(--udexTypographyBodyXXSFontSize, 12px);--udex-breadcrumbs-item-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-breadcrumbs-margin: 0}.udex-breadcrumbs{font-family:var(--sapFontFamily);white-space:nowrap;outline:none;margin:var(--udex-breadcrumbs-margin)}.udex-breadcrumbs>ol{margin:0;padding:var(--udexSpacer2, 2px) 0;list-style-type:none;display:-webkit-box;display:-webkit-flex;display:flex}.udex-breadcrumbs>ol>li{display:inline-flex;align-items:baseline}.udex-breadcrumbs__separator:after{content:"/";padding:0 .125rem;color:var(--udex-breadcrumbs-item-color);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--udex-breadcrumbs-item-font-size);line-height:18px}:host([separators="DoubleSlash"]) .udex-breadcrumbs__separator:after{content:"//"}:host([separators="BackSlash"]) .udex-breadcrumbs__separator:after{content:"\\\\\\\\"}:host([separators="DoubleBackSlash"]) .udex-breadcrumbs__separator:after{content:"\\\\\\\\\\\\\\\\"}:host([separators="GreaterThan"]) .udex-breadcrumbs__separator:after{content:">"}:host([separators="DoubleGreaterThan"]) .udex-breadcrumbs__separator:after{content:">>"}.udex-breadcrumbs__trigger,.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon],.udex-breadcrumbs__item[focused],.udex-breadcrumbs__item{font-family:var(--sapFontFamily);color:var(--udex-breadcrumbs-item-color);--sapLink_Hover_Color: var(--udex-breadcrumbs-item-color);--sapFontSize: var(--udex-breadcrumbs-item-font-size);--sapLinkColor: var(--udex-breadcrumbs-item-color);--sapLink_Active_Color: var(--udex-breadcrumbs-item-color);--udex-link-text-decoration: none;position:relative}.udex-breadcrumbs__item{line-height:var(--udex-breadcrumbs-item-line-height)}.ui5-breadcrumbs-dropdown-arrow-link-wrapper{display:flex}.udex-breadcrumbs__trigger{border:none;background:none;padding:0;cursor:pointer;height:12px;width:12px;margin:auto;--udex-link-icon-width: 12px;--udex-link-icon-height: 12px;--udex-link-line-height: 12px}.udex-breadcrumbs__trigger:focus{outline:solid var(--udexSpacer2, 2px) var(--sapContent_FocusColor, #0040B0);border-radius:var(--udexRadiusXXS, 2px)}.udex-breadcrumbs__trigger--opened [ui5-icon]{transform:rotate(180deg)}.udex-breadcrumbs__trigger,[ui5-link].udex-breadcrumbs__item{text-decoration:none;display:inline-flex}[ui5-link]:not([icon]).udex-breadcrumbs__item:hover:after{content:"";position:absolute;height:.0625rem;left:.125rem;right:.125rem;bottom:.125rem;background-color:var(--udex-breadcrumbs-item-color)}.udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]:before{content:""}.udex-breadcrumbs .udex-breadcrumbs__arrow-wrapper [ui5-icon]{padding-left:0}.udex-breadcrumbs__arrow-wrapper [ui5-link][focused] [ui5-icon]:after,.udex-breadcrumbs__arrow-wrapper:hover [ui5-icon]:after{border-bottom:0}
 `