@sapudex/web-components 2.22.0 → 2.23.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/CountrySelector.hbs

@@ -1,61 +1,6 @@
-<div class="{{countrySelectorClasses}}">
-    {{> trigger}}
-    <udex-dropdown
-        id="dropdown"
-        opener="udex-{{this._id}}-country-selector__opener"
-        horizontal-align="Start"
-        height="{{height}}"
-        @ui5-item-press="{{handleItemPress}}"
-        @ui5-before-open="{{_dropdownBeforeOpen}}"
-        @ui5-open="{{_dropdownOpen}}"
-        @ui5-before-close="{{_dropdownBeforeClose}}"
-        @ui5-close="{{_dropdownClose}}"
-        @ui5-submit-search-value="{{handleSubmitSearch}}"
-        @ui5-handle-value-search="{{handleValueSearch}}"
-        @ui5-handle-value-reset="{{handleResetSearch}}"
-        @ui5-search-keydown="{{handleKeyDownSearch}}"
-        @keydown="{{handleKeyDownDropdown}}">
-        {{searchableList}}
-    </udex-dropdown>
-</div>
-
-{{#*inline "trigger"}}
-    <div
-        id="udex-{{this._id}}-country-selector__opener"
-        class="{{countrySelectorTriggerClasses}}"
-        ?disabled="{{isOpenerDisabled}}"
-        @click="{{handleTriggerClick}}"
-        slot="trigger">
-        {{#if showFlagImages}}
-            <img
-                class="udex-country-selector__image"
-                aria-label="{{flagAriaLabel}}"
-                style="background-position-x: {{selectedCountryFlagX}}; background-position-y: {{selectedCountryFlagY}}">
-        {{/if}}
-        <udex-text-field
-            label="{{effectiveAriaLabel}}"
-            id="udexTextField"
-            class="udex-country-selector__text"
-            value="{{selectedCountryName}}"
-            value-state="{{valueState}}"
-            supporting-text="{{supportingText}}"
-            direction="left"
-            aria-label="{{effectiveAriaLabel}}"
-            accessible-name="{{supportingText}}"
-            accessible-name-ref="{{accessibleNameRef}}"
-            aria-controls="{{ariaControls}}"
-            aria-haspopup="true"
-            aria-expanded="{{_open}}"
-            ?required="{{required}}"
-            ?disabled="{{disabled}}"
-            ?readonly="{{readonly}}"
-            ?displayonly="{{displayonly}}"
-            @ui5-click-icon="{{handleTriggerClick}}"
-            @mousedown="{{handleInputMouseDown}}"
-            icon="{{triggerIcon}}"
-            accessible-icon-name="{{effectiveAriaLabel}}"
-            maxlength="0"
-            _is-combobox-role>
-        </udex-text-field>
-    </div>
-{{/inline}}
+{{#unless hideFlagImages}}
+  <img
+      class="udex-text-field__image"
+      aria-label="{{flagAriaLabel}}"
+      style="background-position-x: {{selectedCountryFlagX}}; background-position-y: {{selectedCountryFlagY}}">
+{{/unless}}

package/src/CountrySelector.ts

@@ -1,33 +1,26 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import { isEscape, isTabPrevious, isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
-import type Popover from "@ui5/webcomponents/dist/Popover.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import Button from "@ui5/webcomponents/dist/Button.js";
-import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import UI5Button from "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
 import type { Country } from "./data/CountryListISO3166.js";
 import { CountryListDB } from "./data/CountryListISO3166.js";
-import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
-import Search from "./Search.js";
+import UDExSearch from "./Search.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
-import UDExSearchableListBase from "./SearchableListBase.js";
+import UDExSelectBase from "./SelectBase.js";
 import UDExListItem from "./ListItem.js";
 import UDExTextField from "./TextField.js";
-import UDExValueState from "./types/common.js";
-import StatusMessage from "./StatusMessage.js";
-import type { UDExSearchKeydownEventDetail } from "./Search.js";
-import type { UDExSearchableListBaseEvents } from "./SearchableListBase.js";
-import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
-import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
+import UDExStatusMessage from "./StatusMessage.js";
+import SelectBoxTemplate from "./generated/templates/SelectBoxTemplate.lit.js";
 
 // Styles
 import CountrySelectorCss from "./generated/themes/CountrySelector.css.js";
+import TextFieldCss from "./generated/themes/TextField.css.js";
+import SelectBaseCss from "./generated/themes/SelectBase.css.js";
+import SearchableListCss from "./generated/themes/SearchableList.css.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
 type UDExCountrySelectorChangeSearchEventDetail = {
   value: string,
@@ -54,157 +47,26 @@ type UDExCountrySelectorChangeSearchEventDetail = {
 @customElement({
   tag: "udex-country-selector",
   renderer: litRender,
-  styles: CountrySelectorCss,
-  template: CountrySelectorTemplate,
+  styles: [
+    TextFieldCss,
+    SelectBaseCss,
+    CountrySelectorCss,
+    SearchableListCss,
+    getEffectiveScrollbarStyle(),
+  ],
+  template: SelectBoxTemplate,
   dependencies: [
-    Search,
-    Button,
+    UI5Button,
     UDExList,
+    UDExSearch,
     UDExListItem,
     UDExDropdown,
     UDExTextField,
-    StatusMessage,
+    UDExStatusMessage,
   ],
 })
 
-/**
- * Fired before the dropdown pane is opened.
- *
- * @public
- */
-@event("before-open", { bubbles: true })
-
-/**
- * Fired after the dropdown pane is opened.
- *
- * @public
- */
-@event("open", { bubbles: true })
-
-/**
- * Fired before the dropdown pane is closed.
- *
- * @public
- */
-@event("before-close", { bubbles: true })
-
-/**
- * Fired after the dropdown pane is closed.
- *
- * @public
- */
-@event("close", { bubbles: true })
-
-/**
- * Fired event when the user submitted the value in the search.
- *
- * @public
- * @param {string} value The current value of the search field
- */
-@event("change-search", { bubbles: true })
-
-/**
- * Fired event when the user clicks on the reset button in the search.
- *
- * @public
- */
-@event("reset-search", { bubbles: true })
-
-/**
- * Fired event when the user clicks on the submitted icon in the search.
- *
- * @public
- */
-@event("submit-search", { bubbles: true })
-
-class UDExCountrySelector extends UDExSearchableListBase {
-  eventDetails!: {
-    "open": void,
-    "close": void,
-    "before-close": void,
-    "before-open": void,
-    "change-search": UDExCountrySelectorChangeSearchEventDetail,
-  } & Omit<UDExSearchableListBaseEvents, "change-search">;
-
-  /**
-   * Defines label text for the input field.
-   *
-   * @default undefined
-   * @public
-   */
-  @property({ type: String })
-    label?: string;
-
-  /**
-   * Defines the accessible ARIA name of the component.
-   *
-   * @default undefined
-   * @public
-   */
-  @property()
-    accessibleName?: string;
-
-  /**
-   * Receives id (or many ids) of the elements that label the component.
-   * @default ""
-   * @public
-   */
-  @property()
-    accessibleNameRef: string = "";
-
-  /**
-   * Defines whether the component is required.
-   *
-   * @default false
-   * @public
-   */
-  @property({ type: Boolean })
-    required!: boolean;
-
-  /**
-   * Allows control over the height.
-   *
-   * @public
-   */
-  @property({ type: String })
-    height?: string;
-
-  /**
-   * Defines whether the component is in disabled state.
-   * <br><br>
-   * <b>Note:</b> A disabled component is completely noninteractive.
-   *
-   * @default false
-   * @public
-   */
-  @property({ type: Boolean })
-    disabled!: boolean;
-
-  /**
-   * Defines whether the component is read-only.
-   * <br><br>
-   * <b>Note:</b> A read-only component is not editable,
-   * but still provides visual feedback upon user interaction.
-   *
-   * @default false
-   * @public
-   */
-  @property({ type: Boolean })
-    readonly!: boolean;
-
-  /**
-   * Defines whether the component is display-only.
-   * <br><br>
-   * <b>Note:</b> A display-only component is not editable,
-   * but still provides visual feedback upon user interaction, input border is not visible.
-   *
-   * @default false
-   * @public
-   */
-
-  @property({ type: Boolean })
-    displayonly!: boolean;
-
+class UDExCountrySelector extends UDExSelectBase {
   /**
    * Allows to define the initially preselected country.
    *
@@ -224,194 +86,113 @@ class UDExCountrySelector extends UDExSearchableListBase {
     blockedCountryCodes?: string;
 
   /**
-   * Defines the placeholder of the search.
-   *
-   * @default ""
-   * @public
-   */
-  @property({ type: String })
-    searchPlaceholder!: string;
-
-  /**
-   * Defines the value state of the component.
+   * Allows to hide the flag images in the country selector.
    *
-   * @default "Standard"
-   * @public
-   */
-  @property()
-    valueState: `${UDExValueState}` = UDExValueState.Standard;
-
-  /**
-   * Defines supporting text under the country selector.
-   *
-   * @default undefined
+   * @default false
    * @public
    */
-  @property({ type: String })
-    supportingText?: string;
+  @property({ type: Boolean })
+    hideFlagImages?: boolean;
 
   /**
+   * Indicates whether the country selector is enabled.
    *
-   * @public
+   * @default true
+   * @private
    */
   @property({ type: Boolean })
-    hideFlagImages?: boolean;
+    _countrySelector: boolean = true;
 
-  @property({ type: Boolean })
-    _open?: boolean = false;
+  _countryList: Country[] = CountryListDB;
+  _selectedCountry!: Country | undefined;
 
-  countryList: Country[] = CountryListDB;
-  selectedCountry!: Country | undefined;
-  _trigger!: UDExTextField;
-
-  _dropdown!: UDExDropdown;
-  _search!: Search;
-  _handleResizeBound: ResizeObserverCallback;
-
-  constructor() {
-    super();
-    this._shouldFilterItems = false;
-    this._handleResizeBound = this._handleResize.bind(this);
-    this._filteredItems = [];
-  }
-
-  onEnterDOM(): void {
-    ResizeHandler.register(this, this._handleResizeBound);
-  }
-
-  onExitDOM(): void {
-    ResizeHandler.deregister(this, this._handleResizeBound);
+  onAfterRendering(): void {
+    super.onAfterRendering();
+    this.handleOutsideClick();
   }
 
   onBeforeRendering(): void {
-    if (this.blockedCountryCodes?.length) {
-      const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
-      this.countryList = this.countryList.filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));
-    }
-
-    if (!this.selectedCountry) {
-      this.selectedCountry = this.countryList.find(country => country.iso.toUpperCase() === this.preselectedCountry?.toUpperCase());
-    }
-
+    super.onBeforeRendering();
+    this.filterBlockedCountries();
+    this.setPreselectedCountry();
     this.prepareCountrySelectorItems();
-
-    if (!this._shouldFilterItems) {
-      this._filteredItems = this.getProcessedItems();
-    }
-  }
-
-  onAfterRendering() {
-    this._dropdown = this.getDropdown();
-    this._search = this.getSearch();
-    this._trigger = this.getTrigger();
   }
 
-  getTrigger(): UDExTextField {
-    return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
+  handleItemPress(e: CustomEvent): void {
+    this.handleItemSelection(e);
+    this.selectCountryByElement(e.target as HTMLElement);
   }
 
-  _dropdownClose() {
-    this.fireDecoratorEvent("close");
-    this._trigger.iconActive = false;
+  handleInputFocusIn(): void {
+    this.inputFocusIn();
   }
 
-  _dropdownOpen() {
-    this.fireDecoratorEvent("open");
-    this._trigger.iconActive = true;
-  }
-
-  _dropdownBeforeOpen() {
-    this._open = true;
-    this.onResetSearch();
-    this.fireDecoratorEvent("before-open");
-  }
-
-  _dropdownBeforeClose() {
-    this._open = false;
-    this.fireDecoratorEvent("before-close");
-  }
+  handleInputFocusOut(e: FocusEvent): void {
+    const relatedTarget = e.relatedTarget as HTMLElement;
+    const isInsideComponent = relatedTarget?.closest(`.${this._rootClass}`);
 
-  get searchableList() {
-    this.defaultAccessibleRole = "listbox";
-    return executeTemplate(UDExCountrySelector.searchableListBaseTemplate, this);
-  }
-
-  static get searchableListBaseTemplate() {
-    return SearchableListBaseTemplate;
-  }
+    if (!isInsideComponent) {
+      this.closeDropdown();
+      this.resetSearchState();
+      this.updateImagePosition();
+    }
 
-  _handleResize() {
-    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this._trigger.offsetWidth}px`);
+    this._focused = false;
   }
 
-  handleCloseSearch() {
-    this.getTextField()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
+  handleKeyDownSearch(e: KeyboardEvent): void {
+    this.onKeyDownSearch(e);
   }
 
-  handleItemPress(e: CustomEvent) {
-    this.onItemPress(e);
-    const target = e.target as HTMLElement;
-    const item: any = this.getItemFromList(target?.getAttribute("data-token-id") as string);
-    this.selectedCountry = this.countryList.find(country => country.iso === item._id);
-    this.dropDownClose();
+  handleDropdownBeforeOpen(): void {
+    this.dropdownBeforeOpen();
   }
 
-  handleKeyPress(keyEvent: KeyboardEvent) {
-    const key = keyEvent.key;
-    this._dropdown.open = true;
-    this._search.focus();
-    this._search.value = key;
-    this.fireChangeSearch();
+  handleDropdownClose(): void {
+    this._open = false;
+    this.fireEventDropdownClose();
   }
 
-  handleInputMouseDown(e: CustomEvent): void {
-    e.preventDefault();
+  handleOutsideClick(): void {
+    document.addEventListener("click", (e: Event) => {
+      if (e.target !== this) {
+        this._open = this._popover.open;
+      }
+    });
   }
 
-  handleTriggerClick() {
-    if (!this.isOpenerDisabled) {
-      this._dropdown.opener = this.getTextField()._inputHolder;
-      this._dropdown.open = !this._dropdown.open;
+  updateImagePosition(): void {
+    const imagePlaceholder = this.shadowRoot!.querySelector<HTMLElement>(".udex-text-field__input > .udex-text-field__image");
+    if (imagePlaceholder) {
+      imagePlaceholder.style.backgroundPosition = this.selectedCountryFlagX || "";
     }
   }
 
-  handleValueSearch(e: CustomEvent): void {
-    this.onSearch(e);
-    this.fireChangeSearch();
-  }
-
-  handleSubmitSearch(): void {
-    this.onSubmitSearch();
-  }
-
-  handleKeyDownSearch(keyEvent: CustomEvent<UDExSearchKeydownEventDetail>) {
-    const { detail: { e } } = keyEvent;
-
-    if (isTabPrevious(e) || isEscape(e)) {
-      e.preventDefault();
-      this.dropDownClose();
-      this.handleCloseSearch();
+  filterBlockedCountries(): void {
+    if (this.blockedCountryCodes?.length) {
+      const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
+      this._countryList = this._countryList.filter(country => !blockedCountryCodesArray.includes(country.iso.toUpperCase()));
     }
   }
 
-  handleKeyDownDropdown(e: KeyboardEvent) {
-    if ((isTabNext(e) && (e.target !== this._search || this.isListEmpty))) {
-      this.dropDownClose();
+  setPreselectedCountry(): void {
+    if (!this._selectedCountry && this.preselectedCountry) {
+      const preselectedISO = this.preselectedCountry.toUpperCase();
+      this._selectedCountry = this._countryList.find(({ iso }) => iso.toUpperCase() === preselectedISO);
     }
   }
 
-  dropDownClose(): void {
-    this._dropdown.open = false;
-  }
-
-  handleResetSearch() {
-    this.onResetSearch();
+  selectCountryByElement(el: HTMLElement): void {
+    const tokenId = el?.getAttribute("data-token-id") || "";
+    const itemObj = this.getItemFromList(tokenId);
+    this._selectedCountry = this._countryList.find(country => country.iso === itemObj?._id);
+    this._selectedOption = this.selectedCountryName || "";
   }
 
   prepareCountrySelectorItems(): void {
     this.items.length = 0;
-    this.countryList.forEach(country => {
-      const selected = country.iso.toUpperCase() === this.selectedCountry?.iso.toUpperCase();
+    this._countryList.forEach(country => {
+      const selected = country.iso.toUpperCase() === this._selectedCountry?.iso.toUpperCase();
       this.items.push({
         label: this.getCountryLabel(country.countryName, country.localName),
         innerHTML: this.getItemTemplate(country),
@@ -421,95 +202,32 @@ class UDExCountrySelector extends UDExSearchableListBase {
     });
   }
 
-  fireChangeSearch(): void {
-    this.fireDecoratorEvent("change-search", { value: this._search.value });
-  }
-
-  getItemTemplate(country: Country) {
-    return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
+  getItemTemplate(country: Country) :string | undefined {
+    return this.hideFlagImages ? undefined : `<span class="udex-text-field__image" style="background-position:${country.flagX}">`;
   }
 
   getCountryLabel(countryName?: string, localName?: string): string | null {
     return localName ? `${countryName} (${localName})` : countryName || null;
   }
 
-  get ariaControls(): string | null | undefined {
-    const list = this.shadowRoot!.querySelector<UDExList>("[udex-list]");
-    return list?.getAttribute("id");
-  }
-
-  get selectedCountryFlagX(): string | undefined {
-    return this.selectedCountry?.flagX;
-  }
-
-  get selectedCountryFlagY(): string | undefined {
-    return this.selectedCountry?.flagY;
-  }
-
   get selectedCountryName(): string | null {
-    return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : "";
+    return this._selectedCountry ? this.getCountryLabel(this._selectedCountry.countryName, this._selectedCountry.localName) : "";
   }
 
   get flagAriaLabel(): string {
-    return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
-  }
-
-  get triggerIcon(): string | undefined {
-    if (!this.displayonly) {
-      return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
-    }
-  }
-
-  get countrySelectorClasses(): string {
-    const baseClass = "udex-country-selector__dropdown";
-    return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;
-  }
-
-  get countrySelectorTriggerClasses(): string {
-    const baseClass = "udex-country-selector__trigger";
-    const classes = [baseClass];
-
-    if (this.disabled) {
-      classes.push(`${baseClass}--disabled`);
-    }
-
-    if (this.readonly) {
-      classes.push(`${baseClass}--readonly`);
-    }
-
-    if (this.displayonly) {
-      classes.push(`${baseClass}--displayonly`);
-    }
-
-    return classes.join(" ");
-  }
-
-  get showFlagImages(): boolean {
-    return !this.hideFlagImages;
+    return this.getCountryLabel(this._selectedCountry?.countryName, this._selectedCountry?.localName) || "None";
   }
 
-  get isOpenerDisabled(): boolean {
-    return this.readonly || this.displayonly || this.disabled;
-  }
-
-  getSearch(): Search {
-    return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
-  }
-
-  getDropdownPopover(): Popover {
-    return this._dropdown.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
-  }
-
-  getDropdown(): UDExDropdown {
-    return this.shadowRoot!.querySelector<UDExDropdown>("[udex-dropdown]")!;
+  get selectedCountryFlagX(): string | undefined {
+    return this._selectedCountry?.flagX;
   }
 
-  getTextField(): UDExTextField {
-    return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
+  get selectedCountryFlagY(): string | undefined {
+    return this._selectedCountry?.flagY;
   }
 
-  get effectiveAriaLabel(): string {
-    return this.label || this.accessibleName || UDExCountrySelector.i18nBundle.getText(COUNTRY_SELECT);
+  get showImageFlags(): boolean {
+    return true;
   }
 }
 

package/src/FilterMenu.ts

@@ -305,14 +305,24 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: String })
     triggerAccessibleRole: string = "combobox";
 
+  /**
+   * Determines whether the filter should be applied.
+   * @default false
+   * @private
+   */
   @property({ type: Boolean })
     _shouldApplyFilter: boolean = false;
 
+  /**
+   * Determines whether the component should be re-rendered.
+   * @default false
+   * @private
+   */
   @property({ type: Boolean, noAttribute: true })
     _requestRender = false;
 
   _trigger!: UDExButton;
-  _search!: UDExSearch;
+  _search!: UDExSearch | HTMLInputElement;
   _popover!: Popover;
   _breakpointSizeXS = 640;
   _initialState: Array<initialItemState> = [];
@@ -349,8 +359,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this.onHeaderPress(e);
   }
 
-  handleValueSearch(e:CustomEvent): void {
-    this.onSearch(e);
+  handleValueSearch(e:CustomEvent<{ value: string }>): void {
+    this.onSearch(e.detail.value);
   }
 
   handleSubmitSearch(): void {