@sapudex/web-components 2.22.0 → 2.23.0

package/dist/SelectBase.js

@@ -0,0 +1,428 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
+import { isEscape, isDown, isUp, isHome, isEnd, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
+import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
+import CountrySelectorTemplate from "./generated/templates/CountrySelectorTemplate.lit.js";
+import ResizeHandler from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
+import UDExSearchableListBase from "./SearchableListBase.js";
+import UDExValueState from "./types/common.js";
+import { getTokensCountText } from "@ui5/webcomponents/dist/Tokenizer.js";
+import isLetterKey from "./utils/isLetterKeyPressed.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-select-box</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/UDExSelectBox.js";</code>
+ *
+ * @constructor
+ * @extends UDExSearchableListBase
+ * @tagname udex-select-box
+ * @public
+ */
+class UDExSelectBase extends UDExSearchableListBase {
+    constructor() {
+        super();
+        /**
+         * Defines the value state of the trigger container.
+         *
+         * @default "Standard"
+         * @public
+         */
+        this.valueState = UDExValueState.Standard;
+        /**
+         * @default false
+         * @private
+         */
+        this._open = false;
+        /**
+         * Defines if the component should reset.
+         *
+         * @default false
+         * @private
+         */
+        this._requestRender = false;
+        this._paneWidthVariableName = "--udex-dropdown-pane-width";
+        this._labelBaseClass = "udex-text-field__label";
+        this._dropdownClass = "udex-select-box__dropdown";
+        this._listBoxRole = "listbox";
+        this._rootClass = "udex-select-box__root";
+        this._stickyClass = "udex-list__sticky";
+        this._ariaAutoComplete = "list";
+        this._inputValue = "";
+        this._lastSelectedItemId = "";
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+        if (this.modeSingleSelect) {
+            this.setSelectOption();
+        }
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    onAfterRendering() {
+        this._popover = this.getPopover();
+        this._search = this.getSearch();
+        this._list = this.getList();
+        this._trigger = this.trigger;
+        this.handleDirection();
+        if (this._requestRender) {
+            this._requestRender = false;
+        }
+    }
+    _handleResize() {
+        this.updatePopoverWidth();
+    }
+    handleKeyDownDropdown(e) {
+        const items = this._list?.getKeyboardNavigationItems();
+        if (isLetterKey(e.key)) {
+            this.handleLetterKeyPress(e);
+            return;
+        }
+        if (isTabPrevious(e) && !this.tabNavigationEnabled) {
+            e.preventDefault();
+            this._search.focus();
+            return;
+        }
+        if (isTabNext(e) && !this.tabNavigationEnabled) {
+            this.closeDropdown();
+            return;
+        }
+        if (isEscape(e)) {
+            this.handleEscKeyPress(e);
+            return;
+        }
+        if (!items || this.tabNavigationEnabled) {
+            return;
+        }
+        this.handleListNavigationKeys(e, items);
+    }
+    handleListNavigationKeys(e, items) {
+        const currentSelectedIndex = this._list?.getCurrentIndex(items, e.target);
+        const lastItemIndex = items.length - 1;
+        if (isDown(e)) {
+            e.preventDefault();
+            this.handleDownKeyPress(items, currentSelectedIndex, lastItemIndex);
+            return;
+        }
+        if (isUp(e)) {
+            e.preventDefault();
+            this.handleUpKeyPress(items, currentSelectedIndex, lastItemIndex);
+            return;
+        }
+        if (isHome(e)) {
+            e.preventDefault();
+            this.handleHomeKeyPress(items);
+            return;
+        }
+        if (isEnd(e)) {
+            e.preventDefault();
+            this.handleEndKeyPress(items, lastItemIndex);
+        }
+    }
+    handleEndKeyPress(items, lastItemIndex) {
+        if (this.showImageFlags) {
+            this.handleImagePosition(items, lastItemIndex);
+        }
+        this._selectedOption = items[lastItemIndex].label;
+    }
+    handleHomeKeyPress(items) {
+        this._selectedOption = items[0].label;
+        if (this.showImageFlags) {
+            this.handleImagePosition(items, 0);
+        }
+    }
+    handleDownKeyPress(items, currentSelectedIndex, lastItemIndex) {
+        const nextIndex = currentSelectedIndex + 1;
+        const nextSelectIndex = nextIndex > lastItemIndex ? 0 : nextIndex;
+        this._selectedOption = items[nextSelectIndex].label;
+        if (this.showImageFlags) {
+            this.handleImagePosition(items, nextSelectIndex);
+        }
+    }
+    handleUpKeyPress(items, currentSelectedIndex, lastItemIndex) {
+        const prevIndex = currentSelectedIndex - 1;
+        const previousSelectIndex = prevIndex < 0 ? lastItemIndex : prevIndex;
+        this._selectedOption = items[previousSelectIndex].label;
+        if (this.showImageFlags) {
+            this.handleImagePosition(items, previousSelectIndex);
+        }
+    }
+    handleLetterKeyPress(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this._selectedOption = "";
+        this._search.value = e.key;
+        this._search.focus();
+        this.onSearch(this._search.value);
+    }
+    handleEscKeyPress(e) {
+        e.preventDefault();
+        this.closeDropdown();
+        this._search.focus();
+        if (!this.tabNavigationEnabled) {
+            this._selectedOption = "";
+        }
+    }
+    handleItemSelection(e) {
+        this.onItemPress(e);
+        const item = e.detail.item;
+        this._lastSelectedItemId = this.getDataTokenId(item);
+        this.resetSearchState();
+        if (this.modeSingleSelect) {
+            this._search.focus();
+            this.closeDropdown();
+        }
+    }
+    onKeyDownSearch(e) {
+        e.stopPropagation();
+        const items = this._list?.getKeyboardNavigationItems();
+        const hasItems = items && items.length > 0;
+        const popoverOpened = this._popover.open;
+        const isEscAndPopoverOpened = isEscape(e) && popoverOpened;
+        const isDownAndPopoverClosed = isDown(e) && !popoverOpened;
+        const isDownAndPopoverOpened = isDown(e) && popoverOpened;
+        if (!hasItems) {
+            return;
+        }
+        if (isEscAndPopoverOpened) {
+            return this.closeDropdown();
+        }
+        if (isDownAndPopoverClosed) {
+            e.preventDefault();
+            this.openDropdown();
+            this.focusFirstItem(items);
+            if (this.showImageFlags) {
+                this.handleImagePosition(items, 0);
+            }
+            return;
+        }
+        if (isDownAndPopoverOpened) {
+            e.preventDefault();
+            if (this.showImageFlags) {
+                this.handleImagePosition(items, 0);
+            }
+            return this.focusFirstItem(items);
+        }
+    }
+    focusFirstItem(items) {
+        this._list.setTabIndexByIndex(items, 0);
+        if (!this.tabNavigationEnabled) {
+            this._selectedOption = items[0].label;
+        }
+        if (items[0].isGroup) {
+            this._list.focusHeader(items[0]);
+        }
+        else {
+            items[0].focus();
+        }
+    }
+    handleSearchChange(e) {
+        const inputValue = e.target?.value || "";
+        this._inputValue = inputValue;
+        if (inputValue) {
+            this._selectedOption = "";
+        }
+        this.onSearch(inputValue);
+        if (!this._popover.open) {
+            this.openDropdown();
+        }
+    }
+    handleDirection() {
+        const directionStyles = window.getComputedStyle(this).getPropertyValue("direction");
+        this._direction = directionStyles || "ltr";
+    }
+    handleDropdownBeforeClose() {
+        this.fireDecoratorEvent("before-close");
+    }
+    dropdownBeforeOpen() {
+        if (this.height) {
+            this._setContentHeight();
+        }
+        this.fireDecoratorEvent("before-open");
+    }
+    fireEventDropdownOpen() {
+        this.fireDecoratorEvent("open");
+    }
+    fireEventDropdownClose() {
+        this.fireDecoratorEvent("close");
+    }
+    handleButtonClick() {
+        if (!this.isDisabled) {
+            this._search.focus();
+            if (this._popover.open) {
+                this.closeDropdown();
+            }
+            else {
+                this.openDropdown();
+            }
+        }
+    }
+    handleInputClick() {
+        if (!this.isDisabled) {
+            this._search.focus();
+            this.openDropdown();
+        }
+    }
+    openDropdown() {
+        this._popover.opener = this._trigger;
+        this._popover.open = true;
+        this._open = true;
+    }
+    closeDropdown() {
+        if (this._popover.open) {
+            this._open = false;
+            this._popover.open = false;
+        }
+    }
+    inputFocusIn() {
+        if (!this.isDisabled) {
+            this._focused = true;
+        }
+    }
+    resetSearchState() {
+        this._inputValue = "";
+        setTimeout(() => this.resetSearch(), 0);
+        if (this.modeSingleSelect) {
+            this.setSelectOption();
+        }
+    }
+    setSelectOption() {
+        this._selectedOption = this.selectedItems[0]?.label || "";
+    }
+    updatePopoverWidth() {
+        this._popover.style.setProperty(this._paneWidthVariableName, `${this._trigger.offsetWidth}px`);
+    }
+    handleImagePosition(items, index) {
+        const image = items[index].querySelector(".udex-text-field__image");
+        const imagePlaceholder = this.shadowRoot.querySelector(".udex-text-field__input > .udex-text-field__image");
+        if (imagePlaceholder) {
+            imagePlaceholder.style.backgroundPosition = image?.style?.backgroundPosition || "";
+        }
+    }
+    get ariaDescribedbyText() {
+        if (this.modeSingleSelect) {
+            return this._selectedOption;
+        }
+        const tags = this.selectedItems.filter(item => !item.isGroup);
+        return getTokensCountText(tags.length);
+    }
+    get trigger() {
+        return this.shadowRoot.querySelector(".udex-text-field__wrap");
+    }
+    get isDisabled() {
+        return this.readonly || this.displayonly || this.disabled;
+    }
+    get labelClass() {
+        const baseClass = this._labelBaseClass;
+        const isActive = [
+            this._inputValue,
+            this._focused,
+            this._open,
+            this._selectedOption,
+            this.hasSelectedItems,
+        ].some(Boolean);
+        return isActive ? `${baseClass} ${baseClass}_active` : baseClass;
+    }
+    get isReadOrDisplayOnly() {
+        return this.readonly || this.displayonly;
+    }
+    get hasSelectedItems() {
+        return this.selectedItems.length > 0;
+    }
+    get additionalClassName() {
+        return this._stickyClass;
+    }
+    get accInfo() {
+        return {
+            "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || UDExSelectBase.i18nBundle.getText(COUNTRY_SELECT),
+        };
+    }
+    get popoverId() {
+        return `${this._id}_${this._dropdownClass}`;
+    }
+    get listboxRole() {
+        return this._listBoxRole;
+    }
+    get hideDropdownSearch() {
+        return true;
+    }
+    get showImageFlags() {
+        return false;
+    }
+    get searchableList() {
+        this.defaultAccessibleRole = this._listBoxRole;
+        return executeTemplate(UDExSelectBase.searchableListBaseTemplate, this);
+    }
+    get countryFlag() {
+        return executeTemplate(UDExSelectBase.countryFlagTemplate, this);
+    }
+    static get countryFlagTemplate() {
+        return CountrySelectorTemplate;
+    }
+    static get searchableListBaseTemplate() {
+        return SearchableListBaseTemplate;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], UDExSelectBase.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSelectBase.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], UDExSelectBase.prototype, "label", void 0);
+__decorate([
+    property()
+], UDExSelectBase.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], UDExSelectBase.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSelectBase.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSelectBase.prototype, "displayonly", void 0);
+__decorate([
+    property()
+], UDExSelectBase.prototype, "valueState", void 0);
+__decorate([
+    property({ type: String })
+], UDExSelectBase.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: String, noAttribute: true })
+], UDExSelectBase.prototype, "_direction", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSelectBase.prototype, "_focused", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSelectBase.prototype, "_open", void 0);
+__decorate([
+    property()
+], UDExSelectBase.prototype, "_selectedOption", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], UDExSelectBase.prototype, "_requestRender", void 0);
+export default UDExSelectBase;
+//# sourceMappingURL=SelectBase.js.map

package/dist/SelectBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBase.js","sourceRoot":"","sources":["../src/SelectBase.ts"],"names":[],"mappings":"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","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport {\n  isEscape, isDown, isUp, isHome, isEnd, isTabNext, isTabPrevious,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { getAllAccessibleNameRefTexts } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js\";\nimport type { UDExListItemBase } from \"./List.js\";\nimport type Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport type UDExList from \"./List.js\";\nimport type UDExSearch from \"./Search.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport { COUNTRY_SELECT } from \"./generated/i18n/i18n-defaults.js\";\nimport SearchableListBaseTemplate from \"./generated/templates/SearchableListBaseTemplate.lit.js\";\nimport CountrySelectorTemplate from \"./generated/templates/CountrySelectorTemplate.lit.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/delegate/ResizeHandler.js\";\nimport UDExSearchableListBase from \"./SearchableListBase.js\";\nimport UDExValueState from \"./types/common.js\";\nimport type { UDExSearchableListBaseEvents } from \"./SearchableListBase.js\";\nimport { getTokensCountText } from \"@ui5/webcomponents/dist/Tokenizer.js\";\nimport isLetterKey from \"./utils/isLetterKeyPressed.js\";\n\nexport type UDExSelectBaseEvents = {\n  \"open\": void,\n  \"close\": void,\n  \"before-close\": void,\n  \"before-open\": void,\n} & UDExSearchableListBaseEvents;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-select-box</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/UDExSelectBox.js\";</code>\n *\n * @constructor\n * @extends UDExSearchableListBase\n * @tagname udex-select-box\n * @public\n */\n\nclass UDExSelectBase extends UDExSearchableListBase {\n  eventDetails!: UDExSelectBaseEvents;\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\n\n  /**\n   * Defines whether the component is in disabled state.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines label text for field container.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    label!: string;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    accessibleName?: string;\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default undefined\n   * @public\n   */\n  @property()\n    accessibleNameRef?: string;\n\n  /**\n   * Defines whether the component is read-only.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is display-only.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    displayonly!: boolean;\n\n  /**\n   * Defines the value state of the trigger container.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    valueState: `${UDExValueState}` = UDExValueState.Standard;\n\n  /**\n   * Defines supporting text under the trigger container.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    supportingText?: string;\n\n  /**\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    _direction?: string;\n\n  /**\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _focused!: boolean;\n\n  /**\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _open: boolean = false;\n\n  /**\n   * Defines selected option for Single Select Mode.\n   *\n   * @default undefined\n   * @private\n   */\n  @property()\n    _selectedOption!: string;\n\n  /**\n   * Defines if the component should reset.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _requestRender = false;\n\n  _paneWidthVariableName = \"--udex-dropdown-pane-width\";\n  _labelBaseClass = \"udex-text-field__label\";\n  _dropdownClass = \"udex-select-box__dropdown\";\n  _listBoxRole = \"listbox\";\n  _rootClass = \"udex-select-box__root\";\n  _stickyClass = \"udex-list__sticky\";\n  _ariaAutoComplete = \"list\";\n  _trigger!: HTMLElement;\n  _search!: UDExSearch | HTMLInputElement;\n  _popover!: Popover;\n  _list!: UDExList;\n  _inputValue: string = \"\";\n  _lastSelectedItemId: string = \"\";\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM() {\n    ResizeHandler.register(this, this._handleResizeBound);\n    if (this.modeSingleSelect) {\n      this.setSelectOption();\n    }\n  }\n\n  onExitDOM() {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  onAfterRendering() {\n    this._popover = this.getPopover();\n    this._search = this.getSearch();\n    this._list = this.getList();\n    this._trigger = this.trigger;\n    this.handleDirection();\n\n    if (this._requestRender) {\n      this._requestRender = false;\n    }\n  }\n\n  _handleResize() {\n    this.updatePopoverWidth();\n  }\n\n  handleKeyDownDropdown(e: KeyboardEvent) {\n    const items = this._list?.getKeyboardNavigationItems();\n\n    if (isLetterKey(e.key)) {\n      this.handleLetterKeyPress(e);\n      return;\n    }\n\n    if (isTabPrevious(e) && !this.tabNavigationEnabled) {\n      e.preventDefault();\n      this._search.focus();\n      return;\n    }\n\n    if (isTabNext(e) && !this.tabNavigationEnabled) {\n      this.closeDropdown();\n      return;\n    }\n\n    if (isEscape(e)) {\n      this.handleEscKeyPress(e);\n      return;\n    }\n\n    if (!items || this.tabNavigationEnabled) {\n      return;\n    }\n\n    this.handleListNavigationKeys(e, items);\n  }\n\n  handleListNavigationKeys(e: KeyboardEvent, items: UDExListItemBase[]) {\n    const currentSelectedIndex = this._list?.getCurrentIndex(items, e.target as UDExListItemBase);\n    const lastItemIndex = items.length - 1;\n\n    if (isDown(e)) {\n      e.preventDefault();\n      this.handleDownKeyPress(items, currentSelectedIndex, lastItemIndex);\n\n      return;\n    }\n\n    if (isUp(e)) {\n      e.preventDefault();\n      this.handleUpKeyPress(items, currentSelectedIndex, lastItemIndex);\n\n      return;\n    }\n\n    if (isHome(e)) {\n      e.preventDefault();\n      this.handleHomeKeyPress(items);\n\n      return;\n    }\n\n    if (isEnd(e)) {\n      e.preventDefault();\n      this.handleEndKeyPress(items, lastItemIndex);\n    }\n  }\n\n  handleEndKeyPress(items: UDExListItemBase[], lastItemIndex: number) {\n    if (this.showImageFlags) {\n      this.handleImagePosition(items, lastItemIndex);\n    }\n\n    this._selectedOption = items[lastItemIndex].label;\n  }\n\n  handleHomeKeyPress(items: UDExListItemBase[]) {\n    this._selectedOption = items[0].label;\n\n    if (this.showImageFlags) {\n      this.handleImagePosition(items, 0);\n    }\n  }\n\n  handleDownKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {\n    const nextIndex = currentSelectedIndex + 1;\n    const nextSelectIndex = nextIndex > lastItemIndex ? 0 : nextIndex;\n    this._selectedOption = items[nextSelectIndex].label;\n\n    if (this.showImageFlags) {\n      this.handleImagePosition(items, nextSelectIndex);\n    }\n  }\n\n  handleUpKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {\n    const prevIndex = currentSelectedIndex - 1;\n    const previousSelectIndex = prevIndex < 0 ? lastItemIndex : prevIndex;\n    this._selectedOption = items[previousSelectIndex].label;\n\n    if (this.showImageFlags) {\n      this.handleImagePosition(items, previousSelectIndex);\n    }\n  }\n\n  handleLetterKeyPress(e: KeyboardEvent) {\n    e.stopPropagation();\n    e.preventDefault();\n    this._selectedOption = \"\";\n    this._search.value = e.key;\n    this._search.focus();\n    this.onSearch(this._search.value);\n  }\n\n  handleEscKeyPress(e: KeyboardEvent) {\n    e.preventDefault();\n    this.closeDropdown();\n    this._search.focus();\n\n    if (!this.tabNavigationEnabled) {\n      this._selectedOption = \"\";\n    }\n  }\n\n  handleItemSelection(e:CustomEvent) {\n    this.onItemPress(e);\n    const item = e.detail.item as UDExListItemBase;\n    this._lastSelectedItemId = this.getDataTokenId(item);\n    this.resetSearchState();\n\n    if (this.modeSingleSelect) {\n      this._search.focus();\n      this.closeDropdown();\n    }\n  }\n\n  onKeyDownSearch(e: KeyboardEvent) {\n    e.stopPropagation();\n    const items = this._list?.getKeyboardNavigationItems();\n    const hasItems = items && items.length > 0;\n    const popoverOpened = this._popover.open;\n    const isEscAndPopoverOpened = isEscape(e) && popoverOpened;\n    const isDownAndPopoverClosed = isDown(e) && !popoverOpened;\n    const isDownAndPopoverOpened = isDown(e) && popoverOpened;\n\n    if (!hasItems) {\n      return;\n    }\n\n    if (isEscAndPopoverOpened) {\n      return this.closeDropdown();\n    }\n\n    if (isDownAndPopoverClosed) {\n      e.preventDefault();\n      this.openDropdown();\n      this.focusFirstItem(items);\n      if (this.showImageFlags) {\n        this.handleImagePosition(items, 0);\n      }\n      return;\n    }\n\n    if (isDownAndPopoverOpened) {\n      e.preventDefault();\n      if (this.showImageFlags) {\n        this.handleImagePosition(items, 0);\n      }\n      return this.focusFirstItem(items);\n    }\n  }\n\n  focusFirstItem(items: UDExListItemBase[]): void {\n    this._list.setTabIndexByIndex(items, 0);\n    if (!this.tabNavigationEnabled) {\n      this._selectedOption = items[0].label;\n    }\n\n    if (items[0].isGroup) {\n      this._list.focusHeader(items[0]);\n    } else {\n      items[0].focus();\n    }\n  }\n\n  handleSearchChange(e: CustomEvent) {\n    const inputValue = (e.target as HTMLInputElement)?.value || \"\";\n    this._inputValue = inputValue;\n\n    if (inputValue) {\n      this._selectedOption = \"\";\n    }\n\n    this.onSearch(inputValue);\n\n    if (!this._popover.open) {\n      this.openDropdown();\n    }\n  }\n\n  handleDirection() {\n    const directionStyles = window.getComputedStyle(this).getPropertyValue(\"direction\");\n    this._direction = directionStyles || \"ltr\";\n  }\n\n  handleDropdownBeforeClose() {\n    this.fireDecoratorEvent(\"before-close\");\n  }\n\n  dropdownBeforeOpen() {\n    if (this.height) {\n      this._setContentHeight();\n    }\n\n    this.fireDecoratorEvent(\"before-open\");\n  }\n\n  fireEventDropdownOpen() {\n    this.fireDecoratorEvent(\"open\");\n  }\n\n  fireEventDropdownClose() {\n    this.fireDecoratorEvent(\"close\");\n  }\n\n  handleButtonClick() {\n    if (!this.isDisabled) {\n      this._search.focus();\n\n      if (this._popover.open) {\n        this.closeDropdown();\n      } else {\n        this.openDropdown();\n      }\n    }\n  }\n\n  handleInputClick() {\n    if (!this.isDisabled) {\n      this._search.focus();\n      this.openDropdown();\n    }\n  }\n\n  openDropdown() {\n    this._popover.opener = this._trigger;\n    this._popover.open = true;\n    this._open = true;\n  }\n\n  closeDropdown() {\n    if (this._popover.open) {\n      this._open = false;\n      this._popover.open = false;\n    }\n  }\n\n  inputFocusIn() {\n    if (!this.isDisabled) {\n      this._focused = true;\n    }\n  }\n\n  resetSearchState() {\n    this._inputValue = \"\";\n    setTimeout(() => this.resetSearch(), 0);\n\n    if (this.modeSingleSelect) {\n      this.setSelectOption();\n    }\n  }\n\n  setSelectOption() {\n    this._selectedOption = this.selectedItems[0]?.label || \"\";\n  }\n\n  updatePopoverWidth() {\n    this._popover.style.setProperty(this._paneWidthVariableName, `${this._trigger.offsetWidth}px`);\n  }\n\n  handleImagePosition(items: UDExListItemBase[], index: number) {\n    const image = items[index].querySelector<HTMLElement>(\".udex-text-field__image\");\n    const imagePlaceholder = this.shadowRoot!.querySelector<HTMLElement>(\".udex-text-field__input > .udex-text-field__image\");\n\n    if (imagePlaceholder) {\n      imagePlaceholder.style.backgroundPosition = image?.style?.backgroundPosition || \"\";\n    }\n  }\n\n  get ariaDescribedbyText(): string {\n    if (this.modeSingleSelect) {\n      return this._selectedOption;\n    }\n    const tags = this.selectedItems.filter(item => !item.isGroup);\n    return getTokensCountText(tags.length);\n  }\n\n  get trigger(): HTMLElement {\n    return this.shadowRoot!.querySelector(\".udex-text-field__wrap\")!;\n  }\n\n  get isDisabled(): boolean {\n    return this.readonly || this.displayonly || this.disabled;\n  }\n\n  get labelClass(): string {\n    const baseClass = this._labelBaseClass;\n    const isActive = [\n      this._inputValue,\n      this._focused,\n      this._open,\n      this._selectedOption,\n      this.hasSelectedItems,\n    ].some(Boolean);\n    return isActive ? `${baseClass} ${baseClass}_active` : baseClass;\n  }\n\n  get isReadOrDisplayOnly(): boolean {\n    return this.readonly || this.displayonly;\n  }\n\n  get hasSelectedItems(): boolean {\n    return this.selectedItems.length > 0;\n  }\n\n  get additionalClassName(): string {\n    return this._stickyClass;\n  }\n\n  get accInfo(): { ariaLabel: string } {\n    return {\n      \"ariaLabel\": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || UDExSelectBase.i18nBundle.getText(COUNTRY_SELECT),\n    };\n  }\n\n  get popoverId(): string {\n    return `${this._id}_${this._dropdownClass}`;\n  }\n\n  get listboxRole(): string {\n    return this._listBoxRole;\n  }\n\n  get hideDropdownSearch(): boolean {\n    return true;\n  }\n\n  get showImageFlags(): boolean {\n    return false;\n  }\n\n  get searchableList() {\n    this.defaultAccessibleRole = this._listBoxRole;\n    return executeTemplate(UDExSelectBase.searchableListBaseTemplate, this);\n  }\n\n  get countryFlag() {\n    return executeTemplate(UDExSelectBase.countryFlagTemplate, this);\n  }\n\n  static get countryFlagTemplate() {\n    return CountrySelectorTemplate;\n  }\n\n  static get searchableListBaseTemplate() {\n    return SearchableListBaseTemplate;\n  }\n}\n\nexport default UDExSelectBase;\n"]}