@sapudex/web-components 2.21.0 → 2.23.0

package/dist/CountrySelector.d.ts

@@ -1,16 +1,7 @@
-import type Popover from "@ui5/webcomponents/dist/Popover.js";
-import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.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 Search from "./Search.js";
-import UDExDropdown from "./Dropdown.js";
-import UDExSearchableListBase from "./SearchableListBase.js";
-import UDExTextField from "./TextField.js";
-import UDExValueState from "./types/common.js";
-import type { UDExSearchKeydownEventDetail } from "./Search.js";
-import type { UDExSearchableListBaseEvents } from "./SearchableListBase.js";
-import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
+import UDExSelectBase from "./SelectBase.js";
 type UDExCountrySelectorChangeSearchEventDetail = {
     value: string;
 };
@@ -32,76 +23,7 @@ type UDExCountrySelectorChangeSearchEventDetail = {
  * @tagname udex-country-selector
  * @public
  */
-declare 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
-     */
-    label?: string;
-    /**
-     * Defines the accessible ARIA name of the component.
-     *
-     * @default undefined
-     * @public
-     */
-    accessibleName?: string;
-    /**
-     * Receives id (or many ids) of the elements that label the component.
-     * @default ""
-     * @public
-     */
-    accessibleNameRef: string;
-    /**
-     * Defines whether the component is required.
-     *
-     * @default false
-     * @public
-     */
-    required: boolean;
-    /**
-     * Allows control over the height.
-     *
-     * @public
-     */
-    height?: string;
-    /**
-     * Defines whether the component is in disabled state.
-     * <br><br>
-     * <b>Note:</b> A disabled component is completely noninteractive.
-     *
-     * @default false
-     * @public
-     */
-    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
-     */
-    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
-     */
-    displayonly: boolean;
+declare class UDExCountrySelector extends UDExSelectBase {
     /**
      * Allows to define the initially preselected country.
      *
@@ -117,81 +39,42 @@ declare class UDExCountrySelector extends UDExSearchableListBase {
      */
     blockedCountryCodes?: string;
     /**
-     * Defines the placeholder of the search.
+     * Allows to hide the flag images in the country selector.
      *
-     * @default ""
-     * @public
-     */
-    searchPlaceholder: string;
-    /**
-     * Defines the value state of the component.
-     *
-     * @default "Standard"
-     * @public
-     */
-    valueState: `${UDExValueState}`;
-    /**
-     * Defines supporting text under the country selector.
-     *
-     * @default undefined
+     * @default false
      * @public
      */
-    supportingText?: string;
+    hideFlagImages?: boolean;
     /**
+     * Indicates whether the country selector is enabled.
      *
-     * @public
+     * @default true
+     * @private
      */
-    hideFlagImages?: boolean;
-    _open?: boolean;
-    countryList: Country[];
-    selectedCountry: Country | undefined;
-    _trigger: UDExTextField;
-    _dropdown: UDExDropdown;
-    _search: Search;
-    _handleResizeBound: ResizeObserverCallback;
-    constructor();
-    onEnterDOM(): void;
-    onExitDOM(): void;
-    onBeforeRendering(): void;
+    _countrySelector: boolean;
+    _countryList: Country[];
+    _selectedCountry: Country | undefined;
     onAfterRendering(): void;
-    getTrigger(): UDExTextField;
-    _dropdownClose(): void;
-    _dropdownOpen(): void;
-    _dropdownBeforeOpen(): void;
-    _dropdownBeforeClose(): void;
-    get searchableList(): object;
-    static get searchableListBaseTemplate(): typeof SearchableListBaseTemplate;
-    _handleResize(): void;
-    handleCloseSearch(): void;
+    onBeforeRendering(): void;
     handleItemPress(e: CustomEvent): void;
-    handleKeyPress(keyEvent: KeyboardEvent): void;
-    handleInputMouseDown(e: CustomEvent): void;
-    handleTriggerClick(): void;
-    handleValueSearch(e: CustomEvent): void;
-    handleSubmitSearch(): void;
-    handleKeyDownSearch(keyEvent: CustomEvent<UDExSearchKeydownEventDetail>): void;
-    handleKeyDownDropdown(e: KeyboardEvent): void;
-    dropDownClose(): void;
-    handleResetSearch(): void;
+    handleInputFocusIn(): void;
+    handleInputFocusOut(e: FocusEvent): void;
+    handleKeyDownSearch(e: KeyboardEvent): void;
+    handleDropdownBeforeOpen(): void;
+    handleDropdownClose(): void;
+    handleOutsideClick(): void;
+    updateImagePosition(): void;
+    filterBlockedCountries(): void;
+    setPreselectedCountry(): void;
+    selectCountryByElement(el: HTMLElement): void;
     prepareCountrySelectorItems(): void;
-    fireChangeSearch(): void;
     getItemTemplate(country: Country): string | undefined;
     getCountryLabel(countryName?: string, localName?: string): string | null;
-    get ariaControls(): string | null | undefined;
-    get selectedCountryFlagX(): string | undefined;
-    get selectedCountryFlagY(): string | undefined;
     get selectedCountryName(): string | null;
     get flagAriaLabel(): string;
-    get triggerIcon(): string | undefined;
-    get countrySelectorClasses(): string;
-    get countrySelectorTriggerClasses(): string;
-    get showFlagImages(): boolean;
-    get isOpenerDisabled(): boolean;
-    getSearch(): Search;
-    getDropdownPopover(): Popover;
-    getDropdown(): UDExDropdown;
-    getTextField(): UDExTextField;
-    get effectiveAriaLabel(): string;
+    get selectedCountryFlagX(): string | undefined;
+    get selectedCountryFlagY(): string | undefined;
+    get showImageFlags(): boolean;
 }
 export default UDExCountrySelector;
 export type { UDExCountrySelectorChangeSearchEventDetail };

package/dist/CountrySelector.js

@@ -4,31 +4,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var UDExCountrySelector_1;
 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import Button from "@ui5/webcomponents/dist/Button.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 { 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 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";
 /**
  * @class
  *
@@ -47,138 +43,90 @@ import CountrySelectorCss from "./generated/themes/CountrySelector.css.js";
  * @tagname udex-country-selector
  * @public
  */
-let UDExCountrySelector = UDExCountrySelector_1 = class UDExCountrySelector extends UDExSearchableListBase {
+let UDExCountrySelector = class UDExCountrySelector extends UDExSelectBase {
     constructor() {
-        super();
+        super(...arguments);
         /**
-         * Receives id (or many ids) of the elements that label the component.
-         * @default ""
-         * @public
-         */
-        this.accessibleNameRef = "";
-        /**
-         * Defines the value state of the component.
+         * Indicates whether the country selector is enabled.
          *
-         * @default "Standard"
-         * @public
+         * @default true
+         * @private
          */
-        this.valueState = UDExValueState.Standard;
-        this._open = false;
-        this.countryList = CountryListDB;
-        this._shouldFilterItems = false;
-        this._handleResizeBound = this._handleResize.bind(this);
-        this._filteredItems = [];
+        this._countrySelector = true;
+        this._countryList = CountryListDB;
     }
-    onEnterDOM() {
-        ResizeHandler.register(this, this._handleResizeBound);
-    }
-    onExitDOM() {
-        ResizeHandler.deregister(this, this._handleResizeBound);
+    onAfterRendering() {
+        super.onAfterRendering();
+        this.handleOutsideClick();
     }
     onBeforeRendering() {
-        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() {
-        return this.shadowRoot.querySelector("[udex-text-field]");
     }
-    _dropdownClose() {
-        this.fireDecoratorEvent("close");
-        this._trigger.iconActive = false;
+    handleItemPress(e) {
+        this.handleItemSelection(e);
+        this.selectCountryByElement(e.target);
+    }
+    handleInputFocusIn() {
+        this.inputFocusIn();
+    }
+    handleInputFocusOut(e) {
+        const relatedTarget = e.relatedTarget;
+        const isInsideComponent = relatedTarget?.closest(`.${this._rootClass}`);
+        if (!isInsideComponent) {
+            this.closeDropdown();
+            this.resetSearchState();
+            this.updateImagePosition();
+        }
+        this._focused = false;
     }
-    _dropdownOpen() {
-        this.fireDecoratorEvent("open");
-        this._trigger.iconActive = true;
+    handleKeyDownSearch(e) {
+        this.onKeyDownSearch(e);
     }
-    _dropdownBeforeOpen() {
-        this._open = true;
-        this.onResetSearch();
-        this.fireDecoratorEvent("before-open");
+    handleDropdownBeforeOpen() {
+        this.dropdownBeforeOpen();
     }
-    _dropdownBeforeClose() {
+    handleDropdownClose() {
         this._open = false;
-        this.fireDecoratorEvent("before-close");
-    }
-    get searchableList() {
-        this.defaultAccessibleRole = "listbox";
-        return executeTemplate(UDExCountrySelector_1.searchableListBaseTemplate, this);
-    }
-    static get searchableListBaseTemplate() {
-        return SearchableListBaseTemplate;
+        this.fireEventDropdownClose();
     }
-    _handleResize() {
-        this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this._trigger.offsetWidth}px`);
-    }
-    handleCloseSearch() {
-        this.getTextField()?.shadowRoot.querySelector("[udex-control-button]")?.focus();
-    }
-    handleItemPress(e) {
-        this.onItemPress(e);
-        const target = e.target;
-        const item = this.getItemFromList(target?.getAttribute("data-token-id"));
-        this.selectedCountry = this.countryList.find(country => country.iso === item._id);
-        this.dropDownClose();
-    }
-    handleKeyPress(keyEvent) {
-        const key = keyEvent.key;
-        this._dropdown.open = true;
-        this._search.focus();
-        this._search.value = key;
-        this.fireChangeSearch();
-    }
-    handleInputMouseDown(e) {
-        e.preventDefault();
+    handleOutsideClick() {
+        document.addEventListener("click", (e) => {
+            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() {
+        const imagePlaceholder = this.shadowRoot.querySelector(".udex-text-field__input > .udex-text-field__image");
+        if (imagePlaceholder) {
+            imagePlaceholder.style.backgroundPosition = this.selectedCountryFlagX || "";
         }
     }
-    handleValueSearch(e) {
-        this.onSearch(e);
-        this.fireChangeSearch();
-    }
-    handleSubmitSearch() {
-        this.onSubmitSearch();
-    }
-    handleKeyDownSearch(keyEvent) {
-        const { detail: { e } } = keyEvent;
-        if (isTabPrevious(e) || isEscape(e)) {
-            e.preventDefault();
-            this.dropDownClose();
-            this.handleCloseSearch();
+    filterBlockedCountries() {
+        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) {
-        if ((isTabNext(e) && (e.target !== this._search || this.isListEmpty))) {
-            this.dropDownClose();
+    setPreselectedCountry() {
+        if (!this._selectedCountry && this.preselectedCountry) {
+            const preselectedISO = this.preselectedCountry.toUpperCase();
+            this._selectedCountry = this._countryList.find(({ iso }) => iso.toUpperCase() === preselectedISO);
         }
     }
-    dropDownClose() {
-        this._dropdown.open = false;
-    }
-    handleResetSearch() {
-        this.onResetSearch();
+    selectCountryByElement(el) {
+        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() {
         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),
@@ -187,186 +135,62 @@ let UDExCountrySelector = UDExCountrySelector_1 = class UDExCountrySelector exte
             });
         });
     }
-    fireChangeSearch() {
-        this.fireDecoratorEvent("change-search", { value: this._search.value });
-    }
     getItemTemplate(country) {
-        return this.hideFlagImages ? undefined : `<span class="udex-country-selector-item__image" style="background-position:${country.flagX}">`;
+        return this.hideFlagImages ? undefined : `<span class="udex-text-field__image" style="background-position:${country.flagX}">`;
     }
     getCountryLabel(countryName, localName) {
         return localName ? `${countryName} (${localName})` : countryName || null;
     }
-    get ariaControls() {
-        const list = this.shadowRoot.querySelector("[udex-list]");
-        return list?.getAttribute("id");
-    }
-    get selectedCountryFlagX() {
-        return this.selectedCountry?.flagX;
-    }
-    get selectedCountryFlagY() {
-        return this.selectedCountry?.flagY;
-    }
     get selectedCountryName() {
-        return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : "";
+        return this._selectedCountry ? this.getCountryLabel(this._selectedCountry.countryName, this._selectedCountry.localName) : "";
     }
     get flagAriaLabel() {
-        return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
+        return this.getCountryLabel(this._selectedCountry?.countryName, this._selectedCountry?.localName) || "None";
     }
-    get triggerIcon() {
-        if (!this.displayonly) {
-            return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
-        }
-    }
-    get countrySelectorClasses() {
-        const baseClass = "udex-country-selector__dropdown";
-        return this.hideFlagImages ? `${baseClass} ${baseClass}--hide-flag` : baseClass;
-    }
-    get countrySelectorTriggerClasses() {
-        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() {
-        return !this.hideFlagImages;
-    }
-    get isOpenerDisabled() {
-        return this.readonly || this.displayonly || this.disabled;
-    }
-    getSearch() {
-        return this.shadowRoot.querySelector("[udex-search]");
-    }
-    getDropdownPopover() {
-        return this._dropdown.shadowRoot.querySelector("[ui5-popover]");
-    }
-    getDropdown() {
-        return this.shadowRoot.querySelector("[udex-dropdown]");
+    get selectedCountryFlagX() {
+        return this._selectedCountry?.flagX;
     }
-    getTextField() {
-        return this.shadowRoot.querySelector("[udex-text-field]");
+    get selectedCountryFlagY() {
+        return this._selectedCountry?.flagY;
     }
-    get effectiveAriaLabel() {
-        return this.label || this.accessibleName || UDExCountrySelector_1.i18nBundle.getText(COUNTRY_SELECT);
+    get showImageFlags() {
+        return true;
     }
 };
-__decorate([
-    property({ type: String })
-], UDExCountrySelector.prototype, "label", void 0);
-__decorate([
-    property()
-], UDExCountrySelector.prototype, "accessibleName", void 0);
-__decorate([
-    property()
-], UDExCountrySelector.prototype, "accessibleNameRef", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExCountrySelector.prototype, "required", void 0);
-__decorate([
-    property({ type: String })
-], UDExCountrySelector.prototype, "height", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExCountrySelector.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExCountrySelector.prototype, "readonly", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExCountrySelector.prototype, "displayonly", void 0);
 __decorate([
     property({ type: String })
 ], UDExCountrySelector.prototype, "preselectedCountry", void 0);
 __decorate([
     property({ type: String })
 ], UDExCountrySelector.prototype, "blockedCountryCodes", void 0);
-__decorate([
-    property({ type: String })
-], UDExCountrySelector.prototype, "searchPlaceholder", void 0);
-__decorate([
-    property()
-], UDExCountrySelector.prototype, "valueState", void 0);
-__decorate([
-    property({ type: String })
-], UDExCountrySelector.prototype, "supportingText", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExCountrySelector.prototype, "hideFlagImages", void 0);
 __decorate([
     property({ type: Boolean })
-], UDExCountrySelector.prototype, "_open", void 0);
-UDExCountrySelector = UDExCountrySelector_1 = __decorate([
+], UDExCountrySelector.prototype, "_countrySelector", void 0);
+UDExCountrySelector = __decorate([
     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
-     */
-    ,
-    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 })
 ], UDExCountrySelector);
 UDExCountrySelector.define();
 export default UDExCountrySelector;