@sapudex/web-components 2.2.0 → 2.3.0

package/src/Pagination.hbs

@@ -3,13 +3,15 @@
     <ul class="udex-pagination__list">
         <li class="udex-pagination__item--prev udex-pagination__item">
             <udex-button
-            ?disabled="{{prevButtonDisabled}}"
+            aria-disabled="{{effectivePrevButtonDisabled}}"
+            ?_aria-disabled="{{_prevButtonPseudoDisabled}}"
             accessible-name="{{previousPageAccessibleName}}"
             tooltip="{{previousBtnTooltip}}"
             size="Large"
             icon="navigation-left-arrow"
             design="Tertiary"
             @click="{{setPrevPage}}"
+            @focusout="{{handlePrevFocusOut}}"
             ></udex-button>
         </li>
         {{#if typeFull}}
@@ -17,7 +19,7 @@
                 <li class="udex-pagination__item">
                     <a class="udex-pagination__page" href="#" 
                         aria-label="{{accessibleName}}"
-                        @click="{{../onPageClick}}" 
+                        @click="{{../onPageClick}}"
                         ?active="{{active}}"
                         aria-current="{{ariaCurrent}}"
                         index="{{index}}">
@@ -35,13 +37,15 @@
         {{/if}}
         <li class="udex-pagination__item--next udex-pagination__item">
             <udex-button
-            ?disabled="{{nextButtonDisbled}}"
+            aria-disabled="{{effectiveNextButtonDisabled}}"
+            ?_aria-disabled="{{_nextButtonPseudoDisabled}}"
             tooltip="{{nextBtnTooltip}}"
             accessible-name="{{nextPageAccessibleName}}"
             size="Large"
             icon="navigation-right-arrow"
             design="Tertiary"
             @click="{{setNextPage}}"
+            @focusout="{{handleNextFocusOut}}"
             ></udex-button>
         </li>
     </ul>

package/src/Pagination.ts

@@ -16,6 +16,7 @@ import {
   PREVIOUS_PAGE,
   NEXT_PAGE,
   CURRENT_PAGE,
+  DISABLED,
 } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -124,6 +125,22 @@ class UDExPagination extends UI5Element {
   @property({ type: String })
     _direction?: string;
 
+  /**
+   * Defines if the previous button is in pseudo-disabled.
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _nextButtonPseudoDisabled!: boolean;
+
+  /**
+   * Defines if the previous button is in pseudo-disabled.
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _prevButtonPseudoDisabled!: boolean;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
@@ -159,7 +176,7 @@ class UDExPagination extends UI5Element {
     this.setupPages(this.pages);
   }
 
-  get nextButtonDisbled(): boolean {
+  get nextButtonDisabled(): boolean {
     return this.currentPageIndex + 1 === this.pages;
   }
 
@@ -230,8 +247,12 @@ class UDExPagination extends UI5Element {
   }
 
   get previousPageAccessibleName(): string {
-    if (this.currentPageIndex === 0) { return UDExPagination.i18nBundle.getText(PREVIOUS_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}. ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
+    const currentPageText = `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}.`;
+    if (this._prevButtonPseudoDisabled || this.prevButtonDisabled) {
+      const effectiveDisabledText = this._prevButtonPseudoDisabled ? `${UDExPagination.i18nBundle.getText(DISABLED)}` : "";
+      return `${currentPageText} ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)} ${effectiveDisabledText}`;
+    }
+    return `${currentPageText} ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
   get previousBtnTooltip(): string {
@@ -239,12 +260,16 @@ class UDExPagination extends UI5Element {
   }
 
   get nextPageAccessibleName(): string {
-    if (this.pages && this.currentPageIndex === (this.pages - 1)) { return UDExPagination.i18nBundle.getText(NEXT_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}. ${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
+    const currentPageText = `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}.`;
+    if (this._nextButtonPseudoDisabled || this.nextButtonDisabled) {
+      const effectiveDisabledText = this._nextButtonPseudoDisabled ? `${UDExPagination.i18nBundle.getText(DISABLED)}` : "";
+      return `${currentPageText} ${UDExPagination.i18nBundle.getText(NEXT_PAGE)} ${effectiveDisabledText}`;
+    }
+    return `${currentPageText} ${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
   }
 
   get nextBtnTooltip(): string {
-    return !this.nextButtonDisbled ? `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}` : "";
+    return !this.nextButtonDisabled ? `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}` : "";
   }
 
   get pagination(): Page[] {
@@ -297,46 +322,38 @@ class UDExPagination extends UI5Element {
     this.currentPageIndex = currentPage + 1;
     this._pageFocusedManually = false;
 
+    this._nextButtonPseudoDisabled = this.currentPageIndex === (this.pages - 1);
+
     this.emitChangeEvent();
   }
 
-  setPrevPage(e: Event): void {
-    e.preventDefault();
-    const currentPage = this.currentPageIndex ?? 1;
-    if (this.pages && currentPage <= 0) {
-      return;
-    }
-    this.currentPageIndex -= 1;
-    this._pageFocusedManually = false;
-
-    this.emitChangeEvent();
+  get effectiveNextButtonDisabled(): boolean {
+    return !this._nextButtonPseudoDisabled && this.nextButtonDisabled;
   }
 
-  setFirstPage(e: Event): void {
-    e.preventDefault();
-    const currentPage = this.currentPageIndex ?? 1;
-    if (currentPage === 0) {
-      return;
-    }
+  get effectivePrevButtonDisabled(): boolean {
+    return !this._prevButtonPseudoDisabled && this.prevButtonDisabled;
+  }
 
-    this._firstPageIndex = 0;
-    this._lastPageIndex = this.displayNumber;
+  handlePrevFocusOut(): void {
+    this._prevButtonPseudoDisabled = false;
+  }
 
-    this.currentPageIndex = 0;
-    this.emitChangeEvent();
+  handleNextFocusOut(): void {
+    this._nextButtonPseudoDisabled = false;
   }
 
-  setLastPage(e: Event): void {
+  setPrevPage(e: Event): void {
     e.preventDefault();
     const currentPage = this.currentPageIndex ?? 1;
-    if (!this.pages || currentPage >= this.pages - 1) {
+    if (this.pages && currentPage <= 0) {
       return;
     }
+    this.currentPageIndex -= 1;
+    this._pageFocusedManually = false;
 
-    this._firstPageIndex = this.pages - this.displayNumber;
-    this._lastPageIndex = this.pages;
+    this._prevButtonPseudoDisabled = this.currentPageIndex === 0;
 
-    this.currentPageIndex = this._lastPageIndex - 1;
     this.emitChangeEvent();
   }
 

package/src/PhoneNumberField.hbs

@@ -64,7 +64,7 @@
                     <img
                         class="udex-phone-number-field__flag"
                         aria-label="{{selectedCountryName}}"
-                        style="{{selectedFlagBackgroundPosition}}">
+                        style="background-position-x: {{selectedFlagBackgroundPosition.x}}; background-position-y: {{selectedFlagBackgroundPosition.y}}">
                 </div>
             </udex-button>
         {{/unless}}

package/src/PhoneNumberField.ts

@@ -44,6 +44,11 @@ export enum UDExPhoneNumberFieldValueState {
   Success = "Success",
 }
 
+export type BackgroundPosition = {
+  x?: string,
+  y?: string,
+};
+
 const initialPlaceholder: string = "+X XXX-XXX-XXXX";
 /**
  * Maximum number of possible digits based on international standard https://en.wikipedia.org/wiki/E.164
@@ -564,7 +569,7 @@ class UDExPhoneNumberField extends UI5Element {
       || this.updatedCountriesList[0]?.countryName;
   }
 
-  get selectedFlagBackgroundPosition() {
+  get selectedFlagBackgroundPosition(): BackgroundPosition {
     if (!this.countryIso) {
       return {};
     }
@@ -575,7 +580,7 @@ class UDExPhoneNumberField extends UI5Element {
       return {};
     }
 
-    return { "backgroundPosition": `${selectedCountry.flagX} ${selectedCountry.flagY}` };
+    return { x: selectedCountry?.flagX, y: selectedCountry?.flagY };
   }
 
   get ariaInvalid(): string | null {

package/src/SearchableListBase.ts

@@ -97,6 +97,15 @@ class UDExSearchableListBase extends UI5Element {
   @property({ type: Boolean })
     busy?: boolean;
 
+  /**
+   * Defines if the search input is visible.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    showSearchInput!: boolean;
+
   /**
    * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
    *
@@ -502,8 +511,15 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   get showSearch(): boolean {
-    const items = this.getSlottedItems(this.items).filter(({ isGroup }) => !isGroup);
-    return items.length > SHOW_SEARCH_AFTER_COUNT && !this.modeRadioGroup;
+    return this.showSearchInput || (this.isSearchActive && !this.modeRadioGroup);
+  }
+
+  get isSearchActive(): boolean {
+    return this.nonGroupItems.length > SHOW_SEARCH_AFTER_COUNT;
+  }
+
+  get nonGroupItems(): Array<UDExListItemBase> {
+    return this.getSlottedItems(this.items).filter(item => !item.isGroup);
   }
 
   get roleForGroupList(): string {

package/src/TextField.ts

@@ -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"

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/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>`;}