@sapudex/web-components 2.44.0 → 2.46.0

package/src/MastheadItem.ts

@@ -1,5 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@@ -15,16 +15,17 @@ import {
   OPENS_IN_A_NEW_WINDOW, PROFILE, CART, COUNTRY_SELECTOR, SUPPORT, SEARCH,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
-import type UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/world.js";
+import type UDExAvatar from "./Avatar.js";
 import type UDExMastheadShell from "./MastheadShell.js";
+import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+import type UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
 import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
-import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import translate from "./utils/translate.js";
 
 // Styles
@@ -363,6 +364,12 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     this.handleOutsideClick();
   }
 
+  onInvalidation({ name, newValue }: ChangeInfo): void {
+    if (name === "selected" && !newValue && this.isMobile) {
+      this.dropdownScrollToTop();
+    }
+  }
+
   handleOutsideClick(): void {
     document.addEventListener("click", (e: Event) => {
       const target = e.target as HTMLElement;
@@ -496,6 +503,16 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     });
   }
 
+  dropdownScrollToTop(): void {
+    if (this.isMobileMenuOpenBtn) {
+      const menu = this.getSlottedNodes<UDExMastheadMobileMenu>("dropdown")[0];
+      menu.mobileMenuScrollToTop();
+    } else {
+      const dropdown = this.getDomElement(".udex-masthead-item__dropdown-holder");
+      dropdown?.scrollTo({ top: 0 });
+    }
+  }
+
   setDropdownInsetStart(): void {
     const dropdown = this.dropdownHolder;
     if (dropdown) {
@@ -648,6 +665,10 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     return this.hasDropdownSlot && this.selected;
   }
 
+  get isMobileMenuOpenBtn(): boolean {
+    return this.hasAttribute("_is-menu-open-btn");
+  }
+
   get hasDropdownSlot(): boolean {
     return !!this.getSlottedNodes("dropdown").length;
   }

package/src/MastheadMobileMenu.ts

@@ -377,6 +377,12 @@ class UDExMastheadMobileMenu extends UI5Element {
     });
   }
 
+  mobileMenuScrollToTop(): void {
+    this.shadowRoot
+      ?.querySelector<HTMLElement>(".udex-masthead-mobile-menu__nav-holder")
+      ?.scrollTo({ top: 0 });
+  }
+
   setFocusItemByIndex(index: number) {
     this._shouldFocusItemByIndex = true;
     this._focusedItemIndex = index;

package/src/MastheadProfileMenu.hbs

@@ -9,33 +9,33 @@
 </div>
 
 {{#*inline "account-profile"}}
-  <div class="udex-masthead-profile-menu__header">
-    {{#if userData}}
-      <udex-avatar
-        aria-hidden="true"
-        size="L"
-        initials="{{userData.avatarInitials}}"
-        fallback-icon="{{userData.fallbackIcon}}">
-        {{#if userData.avatarUrl}}
-          <img src="{{userData.avatarUrl}}" alt="avatar"/>
-        {{/if}}
-      </udex-avatar>
-      <div>
-        <p class="udex-profile-menu__account-name">{{userData.name}}</p>
-        <p class="udex-profile-menu__account-email">{{userData.email}}</p>
-        {{#if hasIdentities}}
-          <udex-button
-            @click="{{handleSwitcherClick}}"
-            class="udex-masthead-profile-menu__btn-switcher"
-            size="Large"
-            end-icon="slim-arrow-right"
-            design="Invisible">
-            {{switcherAccountText}}
-          </udex-button>
-        {{/if}}
+    {{#if hasUserData}}
+      <div class="udex-masthead-profile-menu__header">
+          <udex-avatar
+            aria-hidden="true"
+            size="L"
+            initials="{{userData.avatarInitials}}"
+            fallback-icon="{{userData.fallbackIcon}}">
+            {{#if userData.avatarUrl}}
+              <img src="{{userData.avatarUrl}}" alt="avatar"/>
+            {{/if}}
+          </udex-avatar>
+          <div>
+            <p class="udex-profile-menu__account-name">{{userData.name}}</p>
+            <p class="udex-profile-menu__account-email">{{userData.email}}</p>
+            {{#if hasIdentities}}
+              <udex-button
+                @click="{{handleSwitcherClick}}"
+                class="udex-masthead-profile-menu__btn-switcher"
+                size="Large"
+                end-icon="slim-arrow-right"
+                design="Invisible">
+                {{switcherAccountText}}
+              </udex-button>
+            {{/if}}
+          </div>
       </div>
     {{/if}}
-  </div>
   {{#if messageAvailable}}
     <div class="udex-masthead-profile-menu__message">
       <slot name="message"></slot>

package/src/MastheadProfileMenu.ts

@@ -425,26 +425,10 @@ class UDExMastheadProfileMenu extends UI5Element {
     }
   }
 
-  get scrollBottomIdentitiesList(): number {
-    return this.calculateScrollBottom(this.identitiesHTMLElement);
-  }
-
-  get scrollBottomProfileMenu(): number {
-    return this.calculateScrollBottom(this.profileMenuHTMLElement);
-  }
-
   calculateScrollBottom(element: HTMLElement): number {
     return element.scrollHeight - element.scrollTop - element.clientHeight;
   }
 
-  get profileMenuHTMLElement(): HTMLElement {
-    return this.getElementByClassName(this._profileMenuLinksClassName);
-  }
-
-  get identitiesHTMLElement(): HTMLElement {
-    return this.getElementByClassName(this._identitiesListClassName);
-  }
-
   getElementByClassName(className: string): HTMLElement {
     return this.shadowRoot?.querySelector<HTMLElement>(`.${className}`) as HTMLElement;
   }
@@ -464,6 +448,22 @@ class UDExMastheadProfileMenu extends UI5Element {
     }
   }
 
+  get scrollBottomIdentitiesList(): number {
+    return this.calculateScrollBottom(this.identitiesHTMLElement);
+  }
+
+  get scrollBottomProfileMenu(): number {
+    return this.calculateScrollBottom(this.profileMenuHTMLElement);
+  }
+
+  get profileMenuHTMLElement(): HTMLElement {
+    return this.getElementByClassName(this._profileMenuLinksClassName);
+  }
+
+  get identitiesHTMLElement(): HTMLElement {
+    return this.getElementByClassName(this._identitiesListClassName);
+  }
+
   get linksList(): string {
     return this.links ? JSON.stringify([{
       subMenuLinkItems: JSON.parse(this.links),
@@ -478,6 +478,10 @@ class UDExMastheadProfileMenu extends UI5Element {
     return parseArrayFromString(this.loggedInUser) as UserData;
   }
 
+  get hasUserData(): boolean {
+    return typeof this.userData === "object" && this.userData !== null && !Array.isArray(this.userData);
+  }
+
   get identitiesList(): Array<ExtendedUserIdentity> {
     return parseArrayFromString<ExtendedUserIdentity>(this.identities).map((identity: UserIdentity) => ({
       ...identity,

package/src/MastheadShell.hbs

@@ -100,7 +100,7 @@
             <div
                 class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
                 @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleProfileClick}}">
+                @click-default="{{handleProfileClick}}">
                 <slot name="profile"></slot>
             </div>
         {{/if}}
@@ -119,7 +119,8 @@
                 accessible-role="button"
                 icon="menu2"
                 part="menu-open-btn"
-                accessible-name="menu">
+                accessible-name="menu"
+                _is-menu-open-btn>
                 <slot slot="dropdown" name="mobileMenu"></slot>
             </udex-masthead-item>
             <udex-masthead-item

package/src/MastheadShell.ts

@@ -546,6 +546,7 @@ class UDExMastheadShell extends UI5Element {
   _desktopSearch!: UDExSearch | null | undefined;
   _mobileMenu!: UDExMastheadMobileMenu | null | undefined;
   _handleResizeBound: ResizeObserverCallback;
+  _handleWindowResizeBound: () => void;
   _rootHolder!: HTMLElement | null | undefined;
   _shouldHandleResize!: boolean;
   _isVisible!: boolean;
@@ -553,6 +554,7 @@ class UDExMastheadShell extends UI5Element {
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
+    this._handleWindowResizeBound = this._handleWindowResize.bind(this);
   }
 
   onBeforeRendering() {
@@ -582,6 +584,7 @@ class UDExMastheadShell extends UI5Element {
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._handleResizeBound);
+    window.addEventListener("resize", this._handleWindowResizeBound);
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
@@ -589,6 +592,13 @@ class UDExMastheadShell extends UI5Element {
 
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._handleResizeBound);
+    window.removeEventListener("resize", this._handleWindowResizeBound);
+  }
+
+  _handleWindowResize(): void {
+    if (this.isMobileMenuMode) {
+      this.setMobileMenuHeight();
+    }
   }
 
   onInvalidation({ name }: ChangeInfo): void {
@@ -996,9 +1006,8 @@ class UDExMastheadShell extends UI5Element {
     }
 
     (this.mobileBtn as UDExMastheadItem).selected = false;
+    this.mobileMenuReset();
     this._isMobileMenuOpen = false;
-    this._mobileMenu?.showFirstLevelMenu();
-    this._mobileMenu?.resetSearch();
 
     if (this.bodyOverflow) {
       this.removeOverflowBody();

package/src/SelectBoxTemplate.tsx

@@ -24,7 +24,7 @@ export default function SelectBoxTemplate(this: UDExSelectBox) {
             {this.label && (
               <>
                 <label for="search-input" class={this.labelClass}>
-                  {this.label}{this.required && "*"}
+                  {this.label}{this.required && " * "}
                 </label>
                 <span class="hidden" id={`${this._id}-aria-describedby`}>{this.ariaDescribedbyText}</span>
               </>

package/src/TagGroup.ts

@@ -3,7 +3,10 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import { isEnter, isSpace, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import {
+  isEnter, isSpace, isEscape, isTabNext, isTabPrevious,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
@@ -183,28 +186,37 @@ class UDExTagGroup extends UI5Element {
   _tokenizer!: Tokenizer;
   _nMoreBtn!: HTMLElement | null;
   _resizeHandler: () => void;
+  _keydownCaptureHandler: (e: KeyboardEvent) => void;
 
   constructor() {
     super();
     this._resizeHandler = this._onResize.bind(this);
+    this._keydownCaptureHandler = this._onKeydownCapture.bind(this);
   }
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._resizeHandler);
+    this.addEventListener("keydown", this._keydownCaptureHandler, true);
   }
 
   onExitDOM(): void {
     ResizeHandler.deregister(this, this._resizeHandler);
-    this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
+    this.removeEventListener("keydown", this._keydownCaptureHandler, true);
+    this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler);
   }
 
   onAfterRendering(): void {
     this._tokenizer = this.tokenizer;
+    const prevMoreBtn = this._nMoreBtn;
     this._nMoreBtn = this._tokenizer.moreLink || null;
 
-    if (!this.readonly && !this.disabled && this._nMoreBtn && !this._nMoreBtn.hasAttribute("tabindex")) {
+    if (prevMoreBtn && prevMoreBtn !== this._nMoreBtn) {
+      prevMoreBtn.removeEventListener("keydown", this._nMoreKeyDownHandler);
+    }
+
+    if (!this.disabled && this._nMoreBtn && this._nMoreBtn !== prevMoreBtn) {
       this._nMoreBtn.setAttribute("tabindex", "0");
-      this._nMoreBtn.addEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
+      this._nMoreBtn.addEventListener("keydown", this._nMoreKeyDownHandler);
     }
 
     if (!this.displayonly && this._skipMoreButtonFocus && this._nMoreBtn) {
@@ -218,10 +230,42 @@ class UDExTagGroup extends UI5Element {
     }
   }
 
-  _nMoreKeyDownHandler(e: Event) {
-    if (isSpace(e as KeyboardEvent) || isEnter(e as KeyboardEvent)) {
+  _nMoreKeyDownHandler = (e: KeyboardEvent) => {
+    if (isSpace(e) || isEnter(e)) {
       this.showMoreItems();
     }
+  };
+
+  _onKeydownCapture(e: KeyboardEvent): void {
+    if (!this._isHiddenTags) {
+      return;
+    }
+
+    if (isTabNext(e) && e.composedPath().includes(this._lastVisibleTag as EventTarget)) {
+      e.preventDefault();
+      this._nMoreBtn?.focus();
+      return;
+    }
+
+    if (isTabPrevious(e) && !this.isReadOrDisplayOnly) {
+      const active = getActiveElement();
+      const moreLink = this._tokenizer.moreLink;
+      if (active === moreLink) {
+        e.preventDefault();
+        const focusDomRef = this._lastVisibleTag?.getFocusDomRef();
+        focusDomRef?.focus();
+      }
+    }
+  }
+
+  handleTagFocusin(e: FocusEvent): void {
+    // Only block the Tokenizer's _onfocusin (which sets expanded=true and destroys
+    // the "n more" span) when there are actually hidden tags. When all tags are
+    // visible, let focusin propagate normally so consumers like SelectBox can use
+    // the expanded state for arrow-key navigation between tags.
+    if (this._isHiddenTags) {
+      e.stopPropagation();
+    }
   }
 
   _onResize(): void {
@@ -270,6 +314,15 @@ class UDExTagGroup extends UI5Element {
     return this._tokenizer?.overflownTokens || [];
   }
 
+  get _lastVisibleTag(): UDExTag | null {
+    const tokens = this._tokenizer?._tokens;
+    if (!tokens?.length) {
+      return null;
+    }
+    const visibleCount = tokens.length - (this._tokenizer._nMoreCount ?? 0);
+    return (tokens[visibleCount - 1] as unknown as UDExTag) ?? null;
+  }
+
   get isReadOrDisplayOnly(): boolean {
     return this.readonly || this.displayonly;
   }

package/src/TagGroupTemplate.tsx

@@ -66,6 +66,7 @@ function tag(this: UDExTagGroup, rootClass: string, item: any, index: number) {
         accessible-name={item.accessibleName}
         non-selectable={item.nonSelectable}
         data-overflows={item.overflows}
+        onFocusIn={this.handleTagFocusin}
         onKeyDown={this.handleTagKeyDown}
         onSelectionChange={this.handleTagClick}
         onIconClick={this.tagIconClickHandler}

package/src/TextField.ts

@@ -264,6 +264,15 @@ class UDExTextField extends UI5Element {
   @property({ type: Boolean })
     iconActive!: boolean;
 
+  /**
+   * Defines the placeholder text of the input field.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    placeholder: string = "";
+
   /**
    * Defines the behaviour of autocomplete.
    * @default "off"

package/src/TextFieldTemplate.tsx

@@ -25,6 +25,7 @@ export default function TextFieldTemplate(this: TextField) {
           required={this.required}
           aria-required={this.required}
           aria-readonly={this.isInputReadonly}
+          placeholder={this.active || !this.label ? this.placeholder : undefined}
           autocomplete={this.autocomplete}
           role={this.inputRole as AriaRole}
           name={this.name}

package/src/Tooltip.ts

@@ -4,6 +4,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import type { PopupBeforeCloseEventDetail } from "@ui5/webcomponents/dist/Popup.js";
 import { HorizontalAlign, Placement, VerticalAlign } from "./types/Dropdown.js";
@@ -131,7 +132,7 @@ class UDExTooltip extends UI5Element {
    * @default undefined
    * @public
    */
-  @property()
+  @property({ converter: DOMReferenceConverter })
     opener!: HTMLElement | string;
 
   /**

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

@@ -9,8 +9,8 @@ function block0 (this: MastheadProfileMenu, context: UI5Element, tags: string[],
 function block1 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__header-wrap back-btn"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-profile-menu__btn-back" @click="${this.handleSwitcherClick}" label="${ifDefined(this.btnBackText)}" type="Button" icon-start></${scopeTag("udex-masthead-menu-item", tags, suffix)}><span class="udex-masthead-profile-menu__switcher-title">${ifDefined(this.switcherAccountText)}</span></div><span class="udex-masthead-profile-menu__identities-list-title">${ifDefined(this.listTitleText)}</span><div class="udex-masthead-profile-menu__identities-list-wrap">${ this.identitiesList.length ? block2.call(this, context, tags, suffix) : undefined }</div><${scopeTag("udex-button", tags, suffix)} @click="${this.fireEventAddOrRemoveAccountClick}" class="udex-masthead-profile-menu__add-remove-btn" design="Primary" end-icon="action" size="Large">${ifDefined(this.addOrRemoveAccountText)}</${scopeTag("udex-button", tags, suffix)}>` : html`<div class="udex-masthead-profile-menu__header-wrap back-btn"><udex-masthead-menu-item class="udex-masthead-profile-menu__btn-back" @click="${this.handleSwitcherClick}" label="${ifDefined(this.btnBackText)}" type="Button" icon-start></udex-masthead-menu-item><span class="udex-masthead-profile-menu__switcher-title">${ifDefined(this.switcherAccountText)}</span></div><span class="udex-masthead-profile-menu__identities-list-title">${ifDefined(this.listTitleText)}</span><div class="udex-masthead-profile-menu__identities-list-wrap">${ this.identitiesList.length ? block2.call(this, context, tags, suffix) : undefined }</div><udex-button @click="${this.fireEventAddOrRemoveAccountClick}" class="udex-masthead-profile-menu__add-remove-btn" design="Primary" end-icon="action" size="Large">${ifDefined(this.addOrRemoveAccountText)}</udex-button>`;}
 function block2 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list", tags, suffix)} class="udex-masthead-profile-menu__identities-list" mode="SingleSelect" accessible-name="${ifDefined(this.listTitleText)}" @scroll="${this.handleIdentitiesListShadowVisible}" _scroll-into-view="Center" controlled>${ repeat(this.identitiesList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</${scopeTag("udex-list", tags, suffix)}>` : html`<udex-list class="udex-masthead-profile-menu__identities-list" mode="SingleSelect" accessible-name="${ifDefined(this.listTitleText)}" @scroll="${this.handleIdentitiesListShadowVisible}" _scroll-into-view="Center" controlled>${ repeat(this.identitiesList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</udex-list>`;}
 function block3 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} id="${ifDefined(item.idsUser)}" class="udex-masthead-profile-menu__identities-list-item" @ui5-item-press="${ifDefined(this.fireEventIdentityItemClick)}" supporting-text="${ifDefined(item.supportingText)}" image-badge-state="${ifDefined(item.statusBadge)}" image="${ifDefined(item.avatarUrl)}" image-alt="${ifDefined(item.name)}">${ifDefined(item.email)}</${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item id="${ifDefined(item.idsUser)}" class="udex-masthead-profile-menu__identities-list-item" @ui5-item-press="${ifDefined(this.fireEventIdentityItemClick)}" supporting-text="${ifDefined(item.supportingText)}" image-badge-state="${ifDefined(item.statusBadge)}" image="${ifDefined(item.avatarUrl)}" image-alt="${ifDefined(item.name)}">${ifDefined(item.email)}</udex-list-item>`;}
-function block4 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__header">${ this.userData ? block5.call(this, context, tags, suffix) : undefined }</div>${ this.messageAvailable ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__content"><div class="udex-masthead-profile-menu__links" @scroll="${this.handleProfileMenuShadowVisible}"><${scopeTag("udex-masthead-menu", tags, suffix)} exportparts="badge, menu-item" part="menu" sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click="${ifDefined(this.handleProfileMenuItemClick)}" _scroll-into-view="Center"></${scopeTag("udex-masthead-menu", tags, suffix)}></div></div>${ this.hasActionButton ? block9.call(this, context, tags, suffix) : undefined }` : html`<div class="udex-masthead-profile-menu__header">${ this.userData ? block5.call(this, context, tags, suffix) : undefined }</div>${ this.messageAvailable ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__content"><div class="udex-masthead-profile-menu__links" @scroll="${this.handleProfileMenuShadowVisible}"><udex-masthead-menu exportparts="badge, menu-item" part="menu" sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click="${ifDefined(this.handleProfileMenuItemClick)}" _scroll-into-view="Center"></udex-masthead-menu></div></div>${ this.hasActionButton ? block9.call(this, context, tags, suffix) : undefined }`;}
-function block5 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-avatar", tags, suffix)} aria-hidden="true" size="L" initials="${ifDefined(this.userData.avatarInitials)}" fallback-icon="${ifDefined(this.userData.fallbackIcon)}">${ this.userData.avatarUrl ? block6.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-avatar", tags, suffix)}><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p>${ this.hasIdentities ? block7.call(this, context, tags, suffix) : undefined }</div>` : html`<udex-avatar aria-hidden="true" size="L" initials="${ifDefined(this.userData.avatarInitials)}" fallback-icon="${ifDefined(this.userData.fallbackIcon)}">${ this.userData.avatarUrl ? block6.call(this, context, tags, suffix) : undefined }</udex-avatar><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p>${ this.hasIdentities ? block7.call(this, context, tags, suffix) : undefined }</div>`;}
+function block4 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`${ this.hasUserData ? block5.call(this, context, tags, suffix) : undefined }${ this.messageAvailable ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__content"><div class="udex-masthead-profile-menu__links" @scroll="${this.handleProfileMenuShadowVisible}"><${scopeTag("udex-masthead-menu", tags, suffix)} exportparts="badge, menu-item" part="menu" sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click="${ifDefined(this.handleProfileMenuItemClick)}" _scroll-into-view="Center"></${scopeTag("udex-masthead-menu", tags, suffix)}></div></div>${ this.hasActionButton ? block9.call(this, context, tags, suffix) : undefined }` : html`${ this.hasUserData ? block5.call(this, context, tags, suffix) : undefined }${ this.messageAvailable ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-profile-menu__content"><div class="udex-masthead-profile-menu__links" @scroll="${this.handleProfileMenuShadowVisible}"><udex-masthead-menu exportparts="badge, menu-item" part="menu" sub-items='${ifDefined(this.linksList)}' @ui5-menu-item-click="${ifDefined(this.handleProfileMenuItemClick)}" _scroll-into-view="Center"></udex-masthead-menu></div></div>${ this.hasActionButton ? block9.call(this, context, tags, suffix) : undefined }`;}
+function block5 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-masthead-profile-menu__header"><${scopeTag("udex-avatar", tags, suffix)} aria-hidden="true" size="L" initials="${ifDefined(this.userData.avatarInitials)}" fallback-icon="${ifDefined(this.userData.fallbackIcon)}">${ this.userData.avatarUrl ? block6.call(this, context, tags, suffix) : undefined }</${scopeTag("udex-avatar", tags, suffix)}><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p>${ this.hasIdentities ? block7.call(this, context, tags, suffix) : undefined }</div></div>` : html`<div class="udex-masthead-profile-menu__header"><udex-avatar aria-hidden="true" size="L" initials="${ifDefined(this.userData.avatarInitials)}" fallback-icon="${ifDefined(this.userData.fallbackIcon)}">${ this.userData.avatarUrl ? block6.call(this, context, tags, suffix) : undefined }</udex-avatar><div><p class="udex-profile-menu__account-name">${ifDefined(this.userData.name)}</p><p class="udex-profile-menu__account-email">${ifDefined(this.userData.email)}</p>${ this.hasIdentities ? block7.call(this, context, tags, suffix) : undefined }</div></div>`;}
 function block6 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<img src="${ifDefined(this.userData.avatarUrl)}" alt="avatar"/>`;}
 function block7 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-button", tags, suffix)} @click="${this.handleSwitcherClick}" class="udex-masthead-profile-menu__btn-switcher" size="Large" end-icon="slim-arrow-right" design="Invisible">${ifDefined(this.switcherAccountText)}</${scopeTag("udex-button", tags, suffix)}>` : html`<udex-button @click="${this.handleSwitcherClick}" class="udex-masthead-profile-menu__btn-switcher" size="Large" end-icon="slim-arrow-right" design="Invisible">${ifDefined(this.switcherAccountText)}</udex-button>`;}
 function block8 (this: MastheadProfileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-profile-menu__message"><slot name="message"></slot></div>`;}

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

@@ -24,9 +24,9 @@ function block15 (this: MastheadShell, context: UI5Element, tags: string[], suff
 function block16 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__joule udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleJouleClick}"><slot name="joule"></slot></div>`;}
 function block17 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__cart udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCartClick}"><slot name="cart"></slot></div>`;}
 function block18 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__support udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleSupportClick}"><slot name="support"></slot></div>`;}
-function block19 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__profile udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleProfileClick}"><slot name="profile"></slot></div>`;}
+function block19 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__profile udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click-default="${this.handleProfileClick}"><slot name="profile"></slot></div>`;}
 function block20 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon" @ui5-item-click="${ifDefined(this.setSelectedItem)}" @click="${this.handleCountrySelectorClick}"><slot name="countrySelector"></slot></div>`;}
-function block21 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></${scopeTag("udex-masthead-item", tags, suffix)}><${scopeTag("udex-masthead-item", tags, suffix)} @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="${ifDefined(this.mobileCloseButtonAccessibleName)}" part="menu-close-btn" hide-active-border _is-menu-close-btn></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu"><slot slot="dropdown" name="mobileMenu"></slot></udex-masthead-item><udex-masthead-item @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="${ifDefined(this.mobileCloseButtonAccessibleName)}" part="menu-close-btn" hide-active-border _is-menu-close-btn></udex-masthead-item>`;}
+function block21 (this: MastheadShell, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-item", tags, suffix)} @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu" _is-menu-open-btn><slot slot="dropdown" name="mobileMenu"></slot></${scopeTag("udex-masthead-item", tags, suffix)}><${scopeTag("udex-masthead-item", tags, suffix)} @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="${ifDefined(this.mobileCloseButtonAccessibleName)}" part="menu-close-btn" hide-active-border _is-menu-close-btn></${scopeTag("udex-masthead-item", tags, suffix)}>` : html`<udex-masthead-item @ui5-item-click="${ifDefined(this.handleOpenMobileMenu)}" class="udex-masthead-shell__menu-btn" accessible-role="button" icon="menu2" part="menu-open-btn" accessible-name="menu" _is-menu-open-btn><slot slot="dropdown" name="mobileMenu"></slot></udex-masthead-item><udex-masthead-item @keydown="${this.handleEnterAndSpaceOnCloseBtn}" @ui5-item-click="${ifDefined(this.closeMobileMenu)}" class="udex-masthead-shell__close-btn" accessible-role="button" icon="decline" accessible-name="${ifDefined(this.mobileCloseButtonAccessibleName)}" part="menu-close-btn" hide-active-border _is-menu-close-btn></udex-masthead-item>`;}
 
 function template(this: MastheadShell) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
-export default `:host{--udex-country-selector-flag-width: 30px;--udex-country-selector-flag-height: 20px;--udex-country-selector-padding-start: 50px;--udex-country-selector-padding-end: 12px;--udex-country-selector-text-offset: 36px;--udex-country-selector-search-inset-end: 42px;--udex-country-selector-search-inset-start: 36px;--udex-country-selector-active-text-offset-y: -21px;--udex-country-selector-label-offset-y: 96px}:host([_country-selector]) .udex-text-field__label{max-width:calc(100% - var(--udex-country-selector-label-offset-y))}:host([_country-selector]) .udex-text-field__label{transform:translate(var(--udex-country-selector-text-offset))}:host([_country-selector]) .udex-text-field__label.udex-text-field__label_active{transform:translateY(var(--udex-country-selector-active-text-offset-y))}:host([_country-selector]) .udex-text-field__text-holder{inset:0 1px}:host([_country-selector]) [udex-list-item]::part(item){padding:var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) var(--udex-country-selector-padding-start)}:host([_country-selector]) .udex-text-field__search{inset:0;padding:var(--udexSpacer8) 0}:host([_country-selector][hide-flag-images]) .udex-text-field__search{--udex-country-selector-search-inset-start: 0;padding:var(--udexSpacer8) var(--udexSpacer12);inset:0 42px 0 0}:host([_country-selector][hide-flag-images]) .udex-text-field__text-holder{inset:0 13px}:host([_country-selector][hide-flag-images]) .udex-text-field__label{--udex-country-selector-text-offset: 0}:host([_country-selector][hide-flag-images]) [udex-list-item]::part(item),:host([_country-selector][hide-flag-images]) .udex-text-field__text-holder{--udex-country-selector-padding-start: var(--udexSpacer12);--udex-country-selector-padding-end: var(--udexSpacer12)}:host([_country-selector][hide-flag-images]) .udex-text-field__label{--udex-country-selector-label-offset-y: 56px}.udex-text-field__image{background-color:var(--udexColorGrey4, #A9B4BE);background-image:url(https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp);background-repeat:no-repeat;background-position:1000px 0;position:absolute;top:0;transform:translateY(50%);z-index:1;min-width:var(--udex-country-selector-flag-width);width:var(--udex-country-selector-flag-width);height:var(--udex-country-selector-flag-height);inset-inline-start:var(--udexSpacer12);inset-inline-end:30px;pointer-events:none}.udex-text-field__input>.udex-text-field__image{position:relative;transform:translate(0);inset-inline-start:0;inset-inline-end:0;margin-inline-start:var(--udexSpacer12);margin-inline-end:var(--udexSpacer8)}
+export default `:host{--udex-country-selector-flag-width: 30px;--udex-country-selector-flag-height: 20px;--udex-country-selector-padding-start: 50px;--udex-country-selector-padding-end: 12px;--udex-country-selector-text-offset: 36px;--udex-country-selector-search-inset-end: 42px;--udex-country-selector-search-inset-start: 36px;--udex-country-selector-active-text-offset-y: -21px;--udex-country-selector-label-offset-y: 96px}:host([_country-selector]) .udex-text-field__label{max-width:calc(100% - var(--udex-country-selector-label-offset-y))}:host(:dir(rtl)[_country-selector]) .udex-text-field__label{transform:translate(calc(var(--udex-country-selector-text-offset) * -1))}:host([_country-selector]) .udex-text-field__label{transform:translate(var(--udex-country-selector-text-offset))}:host([_country-selector]) .udex-text-field__label.udex-text-field__label_active{transform:translateY(var(--udex-country-selector-active-text-offset-y))}:host([_country-selector]) .udex-text-field__text-holder{inset:0 1px}:host([_country-selector]) [udex-list-item]::part(item){padding:var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) var(--udex-country-selector-padding-start)}:host([_country-selector]) .udex-text-field__search{inset:0;padding:var(--udexSpacer8) 0}:host([_country-selector][hide-flag-images]) .udex-text-field__search{--udex-country-selector-search-inset-start: 0;padding:var(--udexSpacer8) var(--udexSpacer12);inset:0 42px 0 0}:host([_country-selector][hide-flag-images]) .udex-text-field__text-holder{inset:0 13px}:host([_country-selector][hide-flag-images]) .udex-text-field__label{--udex-country-selector-text-offset: 0}:host([_country-selector][hide-flag-images]) [udex-list-item]::part(item),:host([_country-selector][hide-flag-images]) .udex-text-field__text-holder{--udex-country-selector-padding-start: var(--udexSpacer12);--udex-country-selector-padding-end: var(--udexSpacer12)}:host([_country-selector][hide-flag-images]) .udex-text-field__label{--udex-country-selector-label-offset-y: 56px}.udex-text-field__image{background-color:var(--udexColorGrey4, #A9B4BE);background-image:url(https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp);background-repeat:no-repeat;background-position:1000px 0;position:absolute;top:0;transform:translateY(50%);z-index:1;min-width:var(--udex-country-selector-flag-width);width:var(--udex-country-selector-flag-width);height:var(--udex-country-selector-flag-height);inset-inline-start:var(--udexSpacer12);inset-inline-end:30px;pointer-events:none}.udex-text-field__input>.udex-text-field__image{position:relative;transform:translate(0);inset-inline-start:0;inset-inline-end:0;margin-inline-start:var(--udexSpacer12);margin-inline-end:var(--udexSpacer8)}
 `

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

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme, "host");
-export default `:host{--udex-masthead-country-selector-background: var(--udexColorNeutralWhite, #fff);--udex-masthead-country-selector-padding-xl: var(--udexSpacer32) 52px 52px;--udex-masthead-country-selector-padding-l: var(--udexSpacer24);--udex-masthead-country-selector-padding-m: var(--udexSpacer24) var(--udexSpacer48);--udex-masthead-country-selector-padding-xs: var(--udexSpacer24);--udex-masthead-country-selector-desktop-max-height: 375px;--udex-masthead-country-selector-title-border-color: var(--udexColorGrey2, #EAECEE)}:host([_is-mobile-mode]) .udex-masthead-country-selector__item_countries{--udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);--udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12);border-bottom:1px solid var(--udex-masthead-menu-item-border-color);max-height:initial;overflow:initial}:host([_is-mobile-mode]) .udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-l);min-height:100%;box-sizing:border-box}.udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-xl);background:var(--udex-masthead-country-selector-background)}.udex-masthead-country-selector__title{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightMedium);font-size:var(--udexTypographyBodyXSFontSize);line-height:var(--udexTypographyHeadingLineHeight);color:var(--sapTitleColor);padding:var(--udexSpacer16) 0;display:block;text-align:center}:host(:not([_is-active-region-open])) .udex-masthead-country-selector__title{border-bottom:1px solid var(--udex-masthead-country-selector-title-border-color)}.udex-masthead-country-selector__list{list-style:none;margin:0;padding:0}.udex-masthead-country-selector__search{margin:var(--udexSpacer2) 0 var(--udexSpacer16)}.udex-masthead-country-selector__region-back-item::part(menu-item-button){font-weight:var(--udexTypographyFontWeightMedium, 500);color:var(--udexColorNeutralBlack);justify-content:space-between}.udex-masthead-country-selector__region-back-item::part(left){margin-inline-end:var(--udexSpacer4);margin-inline-start:0}.udex-masthead-country-selector__region-back-item::part(menu-item-button):after{content:""}.udex-masthead-country-selector__region-back-item,.udex-masthead-country-selector__item{--udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);--udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12)}.udex-masthead-country-selector__item::part(menu-item-link),.udex-masthead-country-selector__item_countries{--udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer8);--udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12)}.udex-masthead-country-selector__item::part(menu-item-link){width:100%}[_is-active-country].udex-masthead-country-selector__item::part(menu-item-link){font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-masthead-country-selector__list-wrap{max-height:var(--udex-masthead-country-selector-desktop-max-height);overflow:auto}:host([_is-mobile-mode]) .udex-masthead-country-selector__list-wrap{max-height:initial}.hidden{position:absolute;width:0;height:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}:host([_is-mobile-mode]) .udex-masthead-country-selector__list-container{height:100%;overflow:auto}:host([_is-mobile-mode]) .udex-masthead-country-selector__list-wrap{height:100%;overflow:auto;max-height:initial}:host([_is-mobile-mode]) .udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-l);height:100%;overflow:auto;box-sizing:border-box;display:flex;flex-direction:column}.udex-masthead-country-selector__list-container{position:relative}:host(:dir(rtl)) .udex-masthead-country-selector__list-wrap_scrollable:before{left:0;right:0}.udex-masthead-country-selector__list-wrap_scrollable:before{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#FFFFFF 100%)}:host([desktop]) .udex-masthead-country-selector__list-wrap_scrollable:before{right:15px}:host([desktop]:dir(rtl)) .udex-masthead-country-selector__list-wrap_scrollable:before{left:15px;right:0}@media (max-width: 1279px){.udex-masthead-country-selector__list-wrap{height:100%;overflow:auto;max-height:initial}.udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-l);height:100%;overflow:auto;box-sizing:border-box;display:flex;flex-direction:column}.udex-masthead-country-selector__item_countries{--udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);--udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12);border-bottom:1px solid var(--udex-masthead-menu-item-border-color)}.udex-masthead-country-selector__list-container{height:100%;overflow:auto}}@media (max-width: 979px){.udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-m)}}@media (max-width: 639px){.udex-masthead-country-selector{padding:var(--udex-masthead-country-selector-padding-xs)}}
+export default `:host{--udex-masthead-country-selector-background: var(--udexColorNeutralWhite, #fff);--udex-masthead-country-selector-desktop-max-height: 375px;--udex-masthead-country-selector-title-border-color: var(--udexColorGrey2, #EAECEE);--udex-masthead-country-selector-title-color: var(--udexColorNeutralBlack, #000000)}.udex-masthead-country-selector{background:var(--udex-masthead-country-selector-background)}.udex-masthead-country-selector__title{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightMedium);font-size:var(--udexTypographyBodyXSFontSize);line-height:var(--udexTypographyHeadingLineHeight);color:var(--sapTitleColor);padding:var(--udexSpacer16) 0;display:block;text-align:center}:host(:not([_is-active-region-open])) .udex-masthead-country-selector__title{border-bottom:1px solid var(--udex-masthead-country-selector-title-border-color)}.udex-masthead-country-selector__list{list-style:none;margin:0;padding:0}.udex-masthead-country-selector__search{margin:var(--udexSpacer2) 0 var(--udexSpacer16)}.udex-masthead-country-selector__region-back-item::part(menu-item-button){font-weight:var(--udexTypographyFontWeightMedium, 500);color:var(--udex-masthead-country-selector-title-color);justify-content:space-between}.udex-masthead-country-selector__region-back-item::part(left){margin-inline-end:var(--udexSpacer4);margin-inline-start:0}.udex-masthead-country-selector__region-back-item::part(menu-item-button):after{content:""}.udex-masthead-country-selector__region-back-item,.udex-masthead-country-selector__item{--udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);--udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12)}.udex-masthead-country-selector__item::part(menu-item-link),.udex-masthead-country-selector__item_countries{--udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer8);--udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12)}.udex-masthead-country-selector__item::part(menu-item-link){width:100%}[_is-active-country].udex-masthead-country-selector__item::part(menu-item-link){font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-masthead-country-selector__list-wrap{max-height:var(--udex-masthead-country-selector-desktop-max-height);overflow:auto}:host([_is-mobile-mode]) .udex-masthead-country-selector__list-wrap{max-height:initial}.hidden{position:absolute;width:0;height:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}:host([_is-mobile-mode]) .udex-masthead-country-selector__item::part(menu-item-link){--udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);--udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12)}:host([_is-mobile-mode]) .udex-masthead-country-selector__list-container{height:100%;overflow:auto}:host([_is-mobile-mode]) .udex-masthead-country-selector__list-wrap{height:100%;overflow:auto;max-height:initial}:host([_is-mobile-mode]) .udex-masthead-country-selector{height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding-bottom:var(--udexSpacer24)}:host([_is-mobile-mode]) .udex-masthead-country-selector__item_countries{--udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);--udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12);border-bottom:1px solid var(--udex-masthead-menu-item-border-color);max-height:initial;overflow:initial}:host([_is-mobile-mode]) .udex-masthead-country-selector{min-height:100%;box-sizing:border-box}.udex-masthead-country-selector__list-container{position:relative}:host(:dir(rtl)) .udex-masthead-country-selector__list-wrap_scrollable:before{left:0;right:0}.udex-masthead-country-selector__list-wrap_scrollable:before{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;z-index:1;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#FFFFFF 100%)}:host([desktop]) .udex-masthead-country-selector__list-wrap_scrollable:before{right:15px}:host([desktop]:dir(rtl)) .udex-masthead-country-selector__list-wrap_scrollable:before{left:15px;right:0}@media (max-width: 1279px){.udex-masthead-country-selector__list-wrap{height:100%;overflow:auto;max-height:initial}.udex-masthead-country-selector{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.udex-masthead-country-selector__list{padding-bottom:var(--udexSpacer24)}.udex-masthead-country-selector__item_countries{--udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);--udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12);border-bottom:1px solid var(--udex-masthead-menu-item-border-color)}.udex-masthead-country-selector__list-container{height:100%;overflow:auto;padding-bottom:var(--udexSpacer24)}}@media (max-height: 550px){.udex-masthead-country-selector__list-container{min-height:100px}}
 `