@sapudex/web-components 2.1.1 → 2.3.0

package/src/StepInput.ts

@@ -28,7 +28,7 @@ import StepInputTemplate from "./StepInputTemplate.js";
 
 // Styles
 import StepInputCss from "./generated/themes/StepInput.css.js";
-import type { UDExControlButtonDesign } from "./types/Button.js";
+import type UDExControlButtonDesign from "./types/ControlButtonDesign.js";
 import type { UDExTextFieldKeydownEventDetail } from "./TextField.js";
 
 // Spin variables
@@ -37,11 +37,11 @@ const ACCELERATION = 0.8;
 const MIN_WAIT_TIMEOUT = 50; // milliseconds
 const INITIAL_SPEED = 120; // milliseconds
 
-type UDExStepInputValueChangeEventDetail = {
+export type UDExStepInputValueChangeEventDetail = {
   value: number,
 }
 
-type UDExStepInputValueStateChangeEventDetail = {
+export type UDExStepInputValueStateChangeEventDetail = {
   valueState: `${UDExValueState}`,
   valid: boolean
 }

package/src/TableCellBase.ts

@@ -4,7 +4,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import type TableCellHorizontalAlign from "./types/Table.js";
+import type UDExTableCellHorizontalAlign from "./types/Table.js";
 
 // Styles
 import TableCellBaseCss from "./generated/themes/TableCellBase.css.js";
@@ -32,7 +32,7 @@ abstract class UDExTableCellBase extends UI5Element {
    * @public
    */
   @property()
-    horizontalAlign?: `${TableCellHorizontalAlign}`;
+    horizontalAlign?: `${UDExTableCellHorizontalAlign}`;
 
   /**
    * Defines the content of the component.

package/src/Tag.ts

@@ -8,7 +8,7 @@ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delega
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import IconPlacement from "./types/IconPlacement.js";
+import UDExIconPlacement from "./types/IconPlacement.js";
 
 import TagTemplate from "./generated/templates/TagTemplate.lit.js";
 
@@ -133,7 +133,7 @@ class UDExTag extends UI5Element {
   * @public
   */
   @property()
-    iconPlacement : `${IconPlacement}` = IconPlacement.End;
+    iconPlacement : `${UDExIconPlacement}` = UDExIconPlacement.End;
 
   /**
    * Defines if tag is in readnly state
@@ -283,11 +283,11 @@ class UDExTag extends UI5Element {
   }
 
   get startIcon(): boolean {
-    return this.hasIcon && this.iconPlacement === IconPlacement.Start;
+    return this.hasIcon && this.iconPlacement === UDExIconPlacement.Start;
   }
 
   get endIcon(): boolean {
-    return this.hasIcon && this.iconPlacement === IconPlacement.End;
+    return this.hasIcon && this.iconPlacement === UDExIconPlacement.End;
   }
 
   get _tabIndex(): number {

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.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,15 @@ class UDExTextField extends UI5Element {
   @property({ type: Boolean })
     active!: boolean;
 
+  /**
+   * Defines if dropdown associated with text-field trigger has opened dropdown. It indicates active state of control button.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    iconActive!: boolean;
+
   /**
    * Defines the behaviour of autocomplete.
    * @default "off"
@@ -342,11 +351,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 {
@@ -371,7 +380,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,

package/src/Toast.ts

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

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/Wizard.ts

@@ -85,6 +85,30 @@ class UDExWizard extends UI5Wizard {
   @property({ type: Boolean })
     indeterminate!: boolean;
 
+  /**
+   * Defines aria-label of the wizard, read by screen readers with the first step.
+   *
+   * @public
+   */
+  @property({ type: String })
+    accessibleName!: string;
+
+  /**
+   * Defines the title of the current step.
+   *
+   * @private
+   */
+  @property({ type: String })
+    _currentStepTitle?: string;
+
+  /**
+   * Defines the subtitle of the current step.
+   *
+   * @private
+   */
+  @property({ type: String })
+    _currentStepSubTitle?: string;
+
   /**
    * Defines the current breakpoint.
    *
@@ -115,10 +139,6 @@ class UDExWizard extends UI5Wizard {
     ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
-  onAfterRendering(): void {
-    this._calcCurrentBreakpoint();
-  }
-
   _adjustHeaderOverflow = () => {
     const tabs = this.stepsInHeaderDOM;
     tabs.forEach(step => {
@@ -168,13 +188,9 @@ class UDExWizard extends UI5Wizard {
     return this.steps.map((step, idx) => {
       const pos = idx + 1;
       const hideSeparator = idx === stepsCount - 1 && !this.indeterminate;
-      const stepStateText = step.disabled
-        ? this.inactiveStepText
-        : this.activeStepText;
-      const ariaLabel = (
-        step.titleText
-          ? `${pos} ${step.titleText} ${stepStateText}`
-          : `${this.navStepDefaultHeading} ${pos} ${stepStateText}`
+      const ariaLabel = (`${idx === 0 ? this.effectiveAccessibleName : ""} ${step.titleText
+        ? `${pos} ${step.titleText}`
+        : `${this.navStepDefaultHeading} ${pos}`}`
       ).trim();
       const isAfterCurrent = idx > selectedStepIndex;
       accInfo = {
@@ -209,6 +225,18 @@ class UDExWizard extends UI5Wizard {
     this._calcCurrentBreakpoint();
   }
 
+  onAfterRendering(): void {
+    this.attachStepsResizeObserver();
+    this._calcCurrentBreakpoint();
+    this.previouslySelectedStepIndex = this.selectedStepIndex;
+    this._currentStepTitle = this._steps[this.selectedStepIndex].titleText;
+    this._currentStepSubTitle = this._steps[this.selectedStepIndex].subtitleText;
+  }
+
+  get effectiveAccessibleName(): string {
+    return this.accessibleName || this.ariaLabelText;
+  }
+
   get slottedSteps(): UDExWizardStep[] {
     return this.getSlottedNodes("steps");
   }

package/src/WizardTemplate.tsx

@@ -5,9 +5,13 @@ export default function WizardTemplate(this: UDExWizard) {
   return (
     <div
       class={this.classes.root}
-      aria-label={this.ariaLabelText}
+      aria-label={this.effectiveAccessibleName}
       role="region"
       part="ui5-wiz-root">
+      <div role="alert" class="ui5-hidden-text">
+        {this._currentStepTitle && <div>{this._currentStepTitle}</div>}
+        {this._currentStepSubTitle && <div>{this._currentStepSubTitle}</div>}
+      </div>
       <nav class="ui5-wiz-nav" part="navigator" aria-label={this.navAriaLabelText} tabindex={-1}>
         <div class="ui5-wiz-nav-list" role="list" aria-label={this.listAriaLabelText} aria-describedby="wiz-nav-descr">
           {this.stepsInfo.map(headerStep =>

package/src/data/CountryListISO3166.ts

@@ -5,8 +5,8 @@ export type Country = {
     countryName: string,
     localName?: string,
     phonePrefix: string;
-    flagX: string;
-    flagY: string;
+    flagX?: string;
+    flagY?: string;
 }
 
 export const CountryListDB = [
@@ -40,6 +40,14 @@ export const CountryListDB = [
     "flagX": "-1800px",
     "flagY": "0px",
   },
+  {
+    "locKey": "COUNTRY_AQ",
+    "iso": "AQ",
+    "phoneFmt": " XX XXXX",
+    "countryName": "Antarctica",
+    "localName": "Antarctica",
+    "phonePrefix": "+672",
+  },
   {
     "locKey": "COUNTRY_AS",
     "iso": "AS",

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/PaginationTemplate.lit.ts

@@ -6,7 +6,7 @@ import type Pagination from "../../Pagination.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 class="${ifDefined(this.paginationClass)}" role="navigation" aria-label="${ifDefined(this.paginationAccessibleName)}"><ul class="udex-pagination__list"><li class="udex-pagination__item--prev udex-pagination__item"><${scopeTag("udex-button", tags, suffix)} ?disabled="${this.prevButtonDisabled}" 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 ? block2.call(this, context, tags, suffix) : undefined }${ this.typeShort ? block4.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></ul></nav>` : html`<nav class="${ifDefined(this.paginationClass)}" role="navigation" aria-label="${ifDefined(this.paginationAccessibleName)}"><ul class="udex-pagination__list"><li class="udex-pagination__item--prev udex-pagination__item"><udex-button ?disabled="${this.prevButtonDisabled}" 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 ? block2.call(this, context, tags, suffix) : undefined }${ this.typeShort ? block4.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></ul></nav>`;}
+function block1 (this: Pagination, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<nav class="${ifDefined(this.paginationClass)}" role="navigation" aria-label="${ifDefined(this.paginationAccessibleName)}"><ul class="udex-pagination__list"><li class="udex-pagination__item--prev udex-pagination__item"><${scopeTag("udex-button", tags, suffix)} aria-disabled="${ifDefined(this.effectivePrevButtonDisabled)}" ?_aria-disabled="${ifDefined(this._prevButtonPseudoDisabled)}" accessible-name="${ifDefined(this.previousPageAccessibleName)}" tooltip="${ifDefined(this.previousBtnTooltip)}" size="Large" icon="navigation-left-arrow" design="Tertiary" @click="${this.setPrevPage}" @focusout="${this.handlePrevFocusOut}"></${scopeTag("udex-button", tags, suffix)}></li>${ this.typeFull ? block2.call(this, context, tags, suffix) : undefined }${ this.typeShort ? block4.call(this, context, tags, suffix) : undefined }<li class="udex-pagination__item--next udex-pagination__item"><${scopeTag("udex-button", tags, suffix)} aria-disabled="${ifDefined(this.effectiveNextButtonDisabled)}" ?_aria-disabled="${ifDefined(this._nextButtonPseudoDisabled)}" tooltip="${ifDefined(this.nextBtnTooltip)}" accessible-name="${ifDefined(this.nextPageAccessibleName)}" size="Large" icon="navigation-right-arrow" design="Tertiary" @click="${this.setNextPage}" @focusout="${this.handleNextFocusOut}"></${scopeTag("udex-button", tags, suffix)}></li></ul></nav>` : html`<nav class="${ifDefined(this.paginationClass)}" role="navigation" aria-label="${ifDefined(this.paginationAccessibleName)}"><ul class="udex-pagination__list"><li class="udex-pagination__item--prev udex-pagination__item"><udex-button aria-disabled="${ifDefined(this.effectivePrevButtonDisabled)}" ?_aria-disabled="${ifDefined(this._prevButtonPseudoDisabled)}" accessible-name="${ifDefined(this.previousPageAccessibleName)}" tooltip="${ifDefined(this.previousBtnTooltip)}" size="Large" icon="navigation-left-arrow" design="Tertiary" @click="${this.setPrevPage}" @focusout="${this.handlePrevFocusOut}"></udex-button></li>${ this.typeFull ? block2.call(this, context, tags, suffix) : undefined }${ this.typeShort ? block4.call(this, context, tags, suffix) : undefined }<li class="udex-pagination__item--next udex-pagination__item"><udex-button aria-disabled="${ifDefined(this.effectiveNextButtonDisabled)}" ?_aria-disabled="${ifDefined(this._nextButtonPseudoDisabled)}" tooltip="${ifDefined(this.nextBtnTooltip)}" accessible-name="${ifDefined(this.nextPageAccessibleName)}" size="Large" icon="navigation-right-arrow" design="Tertiary" @click="${this.setNextPage}" @focusout="${this.handleNextFocusOut}"></udex-button></li></ul></nav>`;}
 function block2 (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) => block3.call(this, context, tags, suffix, item, index)) }`;}
 function block3 (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}" aria-current="${ifDefined(item.ariaCurrent)}" index="${ifDefined(item.index)}"><span class="udex-pagination__page--value">${ifDefined(item.value)}</span></a></li>`;}
 function block4 (this: Pagination, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li class="udex-pagination__item udex-pagination__item--short" tabindex="-1" aria-label="${ifDefined(this.paginationShortAccessibleName)}"><span class="udex-pagination__item--short-value">${ifDefined(this.shortTextStart)}</span><span class="udex-pagination__item--short-separator">${ifDefined(this.shortTextSeparator)}</span><span class="udex-pagination__item--short-value">${ifDefined(this.shortTextEnd)}</span></li>`;}

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

@@ -10,7 +10,7 @@ function block1 (this: PhoneNumberField, context: UI5Element, tags: string[], su
 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)} id="udex-${ifDefined(this._id)}-phone-number__opener" class="udex-phone-number-field__open-button" size="Large" end-icon="${ifDefined(this.buttonIcon)}" design="Tertiary" ?disabled="${this.isButtonDisabled}" aria-haspopup="true" accessible-name-ref="${ifDefined(this._id)}-countrySelectorAriaLabel ${ifDefined(this.ariaDescribedById)}" aria-label="${ifDefined(this.countrySelectorAriaLabel)}" aria-expanded="${ifDefined(this._dropdownExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown-menu" role="combobox" @click="${this.openDropdown}"><div class="udex-phone-number-field__open-button-text">${ifDefined(this.selectedCountryName)}${ifDefined(this.selectedPhonePrefix)}</div><div class="udex-phone-number-field__button-content"><img class="udex-phone-number-field__flag" aria-label="${ifDefined(this.selectedCountryName)}" style="${styleMap(this.selectedFlagBackgroundPosition)}"></div></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button id="udex-${ifDefined(this._id)}-phone-number__opener" class="udex-phone-number-field__open-button" size="Large" end-icon="${ifDefined(this.buttonIcon)}" design="Tertiary" ?disabled="${this.isButtonDisabled}" aria-haspopup="true" accessible-name-ref="${ifDefined(this._id)}-countrySelectorAriaLabel ${ifDefined(this.ariaDescribedById)}" aria-label="${ifDefined(this.countrySelectorAriaLabel)}" aria-expanded="${ifDefined(this._dropdownExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown-menu" role="combobox" @click="${this.openDropdown}"><div class="udex-phone-number-field__open-button-text">${ifDefined(this.selectedCountryName)}${ifDefined(this.selectedPhonePrefix)}</div><div class="udex-phone-number-field__button-content"><img class="udex-phone-number-field__flag" aria-label="${ifDefined(this.selectedCountryName)}" style="${styleMap(this.selectedFlagBackgroundPosition)}"></div></udex-button>`;}
+function block5 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} id="udex-${ifDefined(this._id)}-phone-number__opener" class="udex-phone-number-field__open-button" size="Large" end-icon="${ifDefined(this.buttonIcon)}" design="Tertiary" ?disabled="${this.isButtonDisabled}" aria-haspopup="true" accessible-name-ref="${ifDefined(this._id)}-countrySelectorAriaLabel ${ifDefined(this.ariaDescribedById)}" aria-label="${ifDefined(this.countrySelectorAriaLabel)}" aria-expanded="${ifDefined(this._dropdownExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown-menu" role="combobox" @click="${this.openDropdown}"><div class="udex-phone-number-field__open-button-text">${ifDefined(this.selectedCountryName)}${ifDefined(this.selectedPhonePrefix)}</div><div class="udex-phone-number-field__button-content"><img class="udex-phone-number-field__flag" aria-label="${ifDefined(this.selectedCountryName)}" style="background-position-x: ${ifDefined(this.selectedFlagBackgroundPosition.x)}; background-position-y: ${ifDefined(this.selectedFlagBackgroundPosition.y)}"></div></${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button id="udex-${ifDefined(this._id)}-phone-number__opener" class="udex-phone-number-field__open-button" size="Large" end-icon="${ifDefined(this.buttonIcon)}" design="Tertiary" ?disabled="${this.isButtonDisabled}" aria-haspopup="true" accessible-name-ref="${ifDefined(this._id)}-countrySelectorAriaLabel ${ifDefined(this.ariaDescribedById)}" aria-label="${ifDefined(this.countrySelectorAriaLabel)}" aria-expanded="${ifDefined(this._dropdownExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown-menu" role="combobox" @click="${this.openDropdown}"><div class="udex-phone-number-field__open-button-text">${ifDefined(this.selectedCountryName)}${ifDefined(this.selectedPhonePrefix)}</div><div class="udex-phone-number-field__button-content"><img class="udex-phone-number-field__flag" aria-label="${ifDefined(this.selectedCountryName)}" style="background-position-x: ${ifDefined(this.selectedFlagBackgroundPosition.x)}; background-position-y: ${ifDefined(this.selectedFlagBackgroundPosition.y)}"></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.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 block7 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}-supportingTextDesc" class="hidden-text">${ifDefined(this.supportingText)}</span>`;}
 function block8 (this: PhoneNumberField, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}-valueStateDesc" class="hidden-text">${ifDefined(this.valueStateText)}</span>`;}