@sapudex/web-components 2.22.0 → 2.23.0

package/dist/SelectBox.js

@@ -4,18 +4,19 @@ 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 UDExSelectBox_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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import { isEnter, isSpace, isDelete, isTabPrevious, isTabNext, isLeft, isRight, isDown, isUp, isEscape, isBackSpace, isShift, } from "@ui5/webcomponents-base/dist/Keys.js";
-import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { isEnter, isSpace, isDelete, isTabPrevious, isTabNext, isLeft, isRight, isDown, isUp, isBackSpace, isShift, } from "@ui5/webcomponents-base/dist/Keys.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { UDExPopoverPart } from "./types/SearchableListBase.js";
+import { Placement } from "./types/Dropdown.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
-import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -23,27 +24,18 @@ import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExListSelectAll from "./ListSelectAll.js";
 import UDExSelectBoxItem from "./SelectBoxItem.js";
 import UDExSelectBoxGroupHeader from "./SelectBoxGroupHeader.js";
-import UDExSearchableListBase from "./SearchableListBase.js";
-import UDExSearch from "./Search.js";
 import UDExTag from "./Tag.js";
-import UDExButton from "./Button.js";
-import UDExValueState from "./types/common.js";
 import UDExStatusMessage from "./StatusMessage.js";
-import UDExControlButton from "./ControlButton.js";
 import UDExBusyIndicator from "./BusyIndicator.js";
-import { Placement } from "./types/Dropdown.js";
-import { UDExPopoverPart } from "./types/SearchableListBase.js";
 import UDExTagGroup from "./TagGroup.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import { SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
+import UDExSelectBase from "./SelectBase.js";
 import SelectBoxTemplate from "./generated/templates/SelectBoxTemplate.lit.js";
-import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
+import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 // Styles
-import SelectBoxCss from "./generated/themes/SelectBox.css.js";
 import TextFieldCss from "./generated/themes/TextField.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
-import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
+import SelectBoxCss from "./generated/themes/SelectBox.css.js";
+import SelectBaseCss from "./generated/themes/SelectBase.css.js";
 /**
  * @class
  *
@@ -62,16 +54,9 @@ import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
  * @tagname udex-select-box
  * @public
  */
-let UDExSelectBox = UDExSelectBox_1 = class UDExSelectBox extends UDExSearchableListBase {
+let UDExSelectBox = class UDExSelectBox extends UDExSelectBase {
     constructor() {
         super();
-        /**
-         * Defines the value state of the trigger container.
-         *
-         * @default "Standard"
-         * @public
-         */
-        this.valueState = UDExValueState.Standard;
         /**
          * Determines on which side of the component the Tooltip is displayed.
          *
@@ -79,119 +64,85 @@ let UDExSelectBox = UDExSelectBox_1 = class UDExSelectBox extends UDExSearchable
          * @public
          */
         this.tooltipPlacement = Placement.Bottom;
-        /**
-         * @default false
-         * @private
-         */
-        this._open = false;
         this._inactiveTabIndex = -1;
-        this._activeTabIndex = 0;
-        this._openedByTrigger = true;
-        this._shouldScrollToEnd = false;
-        this._shouldFilterItems = false;
-        this._handleResizeBound = this._handleResize.bind(this);
-        this._filteredItems = [];
+        this._handleResizeTokenizerBound = this.handleResizeTokenizer.bind(this);
     }
     onEnterDOM() {
-        ResizeHandler.register(this, this._handleResizeBound);
+        super.onEnterDOM();
+        ResizeHandler.register(this, this._handleResizeTokenizerBound);
     }
     onExitDOM() {
-        ResizeHandler.deregister(this, this._handleResizeBound);
+        super.onExitDOM();
+        ResizeHandler.deregister(this, this._handleResizeTokenizerBound);
     }
     onAfterRendering() {
-        this._tokenizer = this.getTagGroup()?._tokenizer;
-        this._popover = this.getPopover();
-        this._search = this.getSearch();
-        this._trigger = this.getTrigger();
-        this._triggerWrapper = this.getTriggerWrapper();
-        this._tags = this.getTags();
-        this.handleDirection();
-        if (this._tokenizer?.tokens.length > 0) {
-            if (!this.displayonly) {
-                this._tokenizer.moreLink?.setAttribute("tabindex", "-1");
-            }
-            if (this._shouldScrollToEnd) {
-                this._tokenizer.scrollToEnd();
-            }
-            this.resetTagsTabIndexes();
-        }
-        this.handleOutsideClick();
-    }
-    onBeforeRendering() {
-        super.onBeforeRendering();
-        if (this.modeSingleSelect && this.hasSelectedItems) {
-            this.handleSingleSelectMode();
+        super.onAfterRendering();
+        this.handleSelectBoxOutsideClick();
+        if (this.tagGroup) {
+            this.configureTokenizer();
         }
     }
-    _handleResize() {
-        this._popover.style.setProperty("--udex-dropdown-pane-width", `${this._triggerWrapper.offsetWidth}px`);
-    }
-    handleItemPress(e) {
-        this.onItemPress(e);
-        if (this.modeSingleSelect) {
-            this.handleSingleSelectMode();
-            this.closeDropdown();
-        }
-    }
-    handleSingleSelectMode() {
-        this._singleSelectedOption = this.selectedItems[0]?.label;
+    handleResizeTokenizer() {
+        this.resizeTokenizer();
     }
     handleSelectAll(e) {
         this.onSelectAllHeaderPress(e);
     }
     handleHeaderPress(e) {
+        this._search.focus();
         this.onHeaderPress(e);
     }
-    handleValueSearch(e) {
-        this.onSearch(e);
-    }
-    handleSubmitSearch() {
-        this.closeDropdown();
-        this.onSubmitSearch();
-    }
-    handleResetSearch() {
-        this.onResetSearch();
+    handleItemPress(e) {
+        this.handleItemSelection(e);
     }
-    handleFocusIn() {
-        if (this.isDisabled) {
-            return;
+    handlerShowMoreItems(e) {
+        if (!this.displayonly) {
+            this.showMoreItems(e);
+            this.handleUnselectTruncatableTag();
+            this.openDropdown();
         }
-        this._focused = true;
-        if (this._tokenizer) {
-            this._tokenizer.expanded = false;
+        this.fireDecoratorEvent("show-more");
+    }
+    handleInputFocusIn() {
+        this.inputFocusIn();
+        if (this.tokenizer) {
+            this.tokenizer.expanded = true;
+            this._requestRender = true;
         }
     }
-    handleFocusOut() {
+    handleInputFocusOut(e) {
+        const relatedTarget = e.relatedTarget;
+        const isInsideComponent = relatedTarget?.closest(`.${this._rootClass}`);
+        const hasTags = this.tokenizer?.tokens.length > 0;
+        if (!isInsideComponent) {
+            this.closeDropdown();
+            this.resetSearchState();
+            if (hasTags) {
+                this.collapseTokenizer();
+            }
+        }
         this._focused = false;
     }
     handleDropdownBeforeOpen() {
         if (this.preventPageScroll) {
             this._managePopupListeners(UDExPopoverPart.Header, "addEventListener");
         }
-        if (this.height) {
-            this._setContentHeight();
-        }
-        this.fireDecoratorEvent("before-open");
+        this.dropdownBeforeOpen();
     }
-    handleDropdownAfterClose() {
+    handleDropdownClose() {
         if (this.preventPageScroll) {
             this._managePopupListeners(UDExPopoverPart.Header, "removeEventListener");
         }
-        if (this._tokenizer?._tokensCount > 0) {
-            this._tokenizer.expanded = false;
+        if (this.modeMultiSelect) {
+            this.handleUnselectTruncatableTag();
         }
-        this.handleUnselectTruncatableTag();
         this._open = false;
-    }
-    showMoreItems() {
-        this._shouldScrollToEnd = true;
-        this._showTagsDropdownContent = false;
-        this.openDropdown();
-        this.handleUnselectTruncatableTag();
+        this.fireEventDropdownClose();
     }
     handleRemoveTag(e, tag) {
         tag = tag ?? e?.detail.tag;
         const tagId = tag.getAttribute("data-id");
+        this.tokenizer.deleteToken(tag, true);
         this.handleDropdownItemPress(tagId);
         this.fireDecoratorEventRemove(tagId);
     }
@@ -208,15 +159,7 @@ let UDExSelectBox = UDExSelectBox_1 = class UDExSelectBox extends UDExSearchable
     handleUnselectTruncatableTag() {
         if (this._truncatableTag?.selected) {
             this._truncatableTag.selected = false;
-        }
-    }
-    handleKeyDownTrigger(e) {
-        if (!this.isDisabled && (isSpace(e) || isEnter(e))) {
-            e.preventDefault();
-            e.stopPropagation();
             this._showTagsDropdownContent = false;
-            this._openedByTrigger = true;
-            this.openDropdown();
         }
     }
     handleKeyDownTag(e) {
@@ -226,17 +169,15 @@ let UDExSelectBox = UDExSelectBox_1 = class UDExSelectBox extends UDExSearchable
         const originalEvent = e.detail.originalEvent;
         const tag = originalEvent.target;
         const token = originalEvent.target;
-        this.getTagContent(this._tags[0]).tabIndex = this._inactiveTabIndex;
-        const tagsCount = this._tokenizer._tokensCount;
-        this._tokenizer.expanded = (isLeft(originalEvent) || isRight(originalEvent) || isBackSpace(originalEvent) || isDelete(originalEvent)) && tagsCount > 0;
+        this.tokenizer.expanded = (isLeft(originalEvent) || isRight(originalEvent) || isBackSpace(originalEvent) || isDelete(originalEvent)) && this.tokenizer.tokens.length > 0;
         if (isTabNext(originalEvent)) {
-            this._trigger.focus();
+            originalEvent.preventDefault();
+            this._search.focus();
             return;
         }
         if ((isDown(originalEvent) || isUp(originalEvent))) {
-            this._tokenizer._preventCollapse = true;
-            this._openedByTrigger = false;
-            this.showMoreItems();
+            this._search.focus();
+            this.openDropdown();
         }
         if (isSpace(originalEvent) || isShift(originalEvent) || isEnter(originalEvent)) {
             originalEvent.preventDefault();
@@ -244,9 +185,9 @@ let UDExSelectBox = UDExSelectBox_1 = class UDExSelectBox extends UDExSearchable
             tag.selected = false;
         }
         if (isLeft(originalEvent) || isRight(originalEvent)) {
-            const nextTokenIndex = this._tokenizer._calcNextTokenIndex(token, this._tokenizer.tokens, isRight(originalEvent));
-            this.focusTag(nextTokenIndex);
-            this.scrollToTag(nextTokenIndex);
+            const nextTokenIndex = this.tokenizer._calcNextTokenIndex(token, this.tokenizer.tokens, isRight(originalEvent));
+            this.focusTagByIndex(nextTokenIndex);
+            this.tokenizer._scrollToToken(this.tokenizer.tokens[nextTokenIndex]);
             return;
         }
         if (tag.isTruncatable && this.validTruncatableKey(originalEvent)) {
@@ -257,63 +198,64 @@ let UDExSelectBox = UDExSelectBox_1 = class UDExSelectBox extends UDExSearchable
         }
         if (isDelete(originalEvent) || isBackSpace(originalEvent)) {
             this.handleRemoveTag(null, tag);
-            if (this._tokenizer.tokens.length === 1) {
-                this._trigger.focus();
+            if (this.tokenizer.tokens.length === 1) {
+                this._search.focus();
             }
             else {
-                this._tokenizer.deleteToken(token);
+                this.tokenizer.deleteToken(token, true);
             }
         }
     }
-    handleKeyDownDropdown(e) {
-        if (this.tabNavigationEnabled) {
+    handleKeyDownSearch(e) {
+        const tokenizer = this.tokenizer;
+        const hasTags = tokenizer?.tokens.length > 0;
+        const lastTagIndex = tokenizer?.tokens.length - 1;
+        if (isTabPrevious(e)) {
+            this.resetTagsTabIndexes();
             return;
         }
-        const isTabPrevPress = isTabPrevious(e) && !this._search;
-        const isTabNextPress = isTabNext(e);
-        const isEscapePress = isEscape(e);
-        const isSearchResetTrigger = e.target === this._search;
-        if ((isTabNextPress && (!isSearchResetTrigger || this.isListEmpty)) || isTabPrevPress || isEscapePress) {
-            this.closeDropdown(e);
+        if (isLeft(e) && hasTags) {
+            e.preventDefault();
+            this.focusTagByIndex(lastTagIndex);
+            return;
         }
-    }
-    handleKeyDownSearch(keyEvent) {
-        const { detail: { e } } = keyEvent;
-        if (isTabPrevious(e) || isEscape(e)) {
-            this.closeDropdown(e);
+        if (isBackSpace(e) && this._inputValue === "" && hasTags) {
+            this.focusTagByIndex(lastTagIndex);
+            return;
         }
+        this.onKeyDownSearch(e);
     }
-    handleOutsideClick() {
+    handleSelectBoxOutsideClick() {
         document.addEventListener("click", (e) => {
-            if (this._tokenizer?.tokens.length > 0 && e.target !== this) {
-                this._tokenizer.expanded = false;
+            if (e.target !== this) {
+                this._open = this._popover.open;
+                if (this.tokenizer?.tokens.length > 0) {
+                    this.collapseTokenizer();
+                }
             }
-            this._open = this._popover.open;
         });
     }
-    openDropdown() {
-        this._popover.opener = this._trigger;
-        this._popover.open = true;
-        this._open = true;
-        if (this.showMultiSelectedOptions) {
-            this._tokenizer.expanded = true;
+    focusTagByIndex(index) {
+        const token = this.tokenizer.tokens[index];
+        if (token) {
+            token.focus();
+            token.forcedTabIndex = "0";
         }
     }
-    closeDropdown(e) {
-        if (this._popover.open) {
-            if (this._tokenizer) {
-                this._tokenizer._preventCollapse = false;
-                this._tokenizer.expanded = false;
-            }
-            if (e && (isEscape(e) || isTabPrevious(e))) {
-                e.preventDefault();
-                if (this._openedByTrigger) {
-                    this._trigger.focus();
-                }
-            }
-            this._open = false;
-            this._popover.open = false;
-        }
+    fireDecoratorEventRemove(id) {
+        this.fireDecoratorEvent("remove", {
+            item: this.getItemFromList(id),
+        });
+    }
+    collapseTokenizer() {
+        this.tokenizer.expanded = false;
+        this._selectedOption = "";
+    }
+    showMoreItems(e) {
+        e.preventDefault();
+        this._focused = true;
+        this._search.focus();
+        this._showTagsDropdownContent = false;
     }
     toggleTruncatedPopover(tag) {
         if (!tag.isTruncatable) {
@@ -327,82 +269,25 @@ let UDExSelectBox = UDExSelectBox_1 = class UDExSelectBox extends UDExSearchable
             this.openDropdown();
         }
     }
-    scrollToTag(index) {
-        this._tokenizer._scrollToToken(this._tokenizer.tokens[index]);
-    }
-    focusTag(index) {
-        this._tokenizer.tokens[index].focus();
-        this._tokenizer.tokens[index].forcedTabIndex = "0";
+    configureTokenizer() {
+        this.tagGroup._scrollToEnd = true;
+        this.resetTagsTabIndexes();
     }
-    fireDecoratorEventRemove(id) {
-        this.fireDecoratorEvent("remove", {
-            item: this.getItemFromList(id),
+    resetTagsTabIndexes() {
+        this.tags.forEach(tag => {
+            this.getTagContent(tag).tabIndex = this._inactiveTabIndex;
         });
     }
-    handleOpenMultiSelect() {
-        if (this._popover.open) {
-            this.closeDropdown();
-        }
-        else {
-            this._showTagsDropdownContent = false;
-            this.openDropdown();
-        }
-    }
-    handleOpenSingleSelect() {
-        if (this._popover.open) {
-            this.closeDropdown();
-        }
-        else {
-            this.openDropdown();
-        }
-    }
-    getHandleMultiSelectOpen() {
-        return !this.isDisabled && this.modeMultiSelect ? this.handleOpenMultiSelect() : undefined;
-    }
-    getHandleSingleSelectOpen() {
-        return !this.isDisabled && this.modeSingleSelect ? this.handleOpenSingleSelect() : undefined;
-    }
-    getHandlerShowMoreItems(e) {
-        if (!this.displayonly) {
-            e.preventDefault();
-            this.showMoreItems();
-        }
-        this.fireDecoratorEvent("show-more");
-    }
-    getTrigger() {
-        return this.shadowRoot.querySelector(".udex-text-field__input");
-    }
-    getTriggerWrapper() {
-        return this.shadowRoot.querySelector(".udex-text-field__wrap");
-    }
-    getTagGroup() {
-        return this.shadowRoot.querySelector("[udex-tag-group]");
-    }
-    getTags() {
-        if (this.getTagGroup()) {
-            return Array.from(this.getTagGroup().shadowRoot.querySelectorAll("[udex-tag]"));
-        }
-        return [];
-    }
-    getTagContent(tag) {
-        return tag.shadowRoot.querySelector(".udex-tag");
-    }
-    handleDirection() {
-        const directionStyles = window
-            .getComputedStyle(this)
-            .getPropertyValue("direction");
-        if (!directionStyles) {
-            this._direction = "ltr";
-        }
-        else {
-            this._direction = directionStyles;
+    resizeTokenizer() {
+        if (this.tokenizer) {
+            this.tokenizer._handleResize();
         }
     }
     validTruncatableKey(e) {
         return isSpace(e) || isEnter(e);
     }
-    resetTagsTabIndexes() {
-        this._tags.forEach((tag, i) => { this.getTagContent(tag).tabIndex = (i === 0 && !this.isDisabled) ? this._activeTabIndex : this._inactiveTabIndex; });
+    getTagContent(tag) {
+        return tag.shadowRoot.querySelector(".udex-tag");
     }
     /**
      * Close the dropdown.
@@ -411,136 +296,52 @@ let UDExSelectBox = UDExSelectBox_1 = class UDExSelectBox extends UDExSearchable
     close() {
         this.closeDropdown();
     }
-    get allowTargetOverlap() {
-        return !this.disableTargetOverlap;
+    get tokenizer() {
+        return this.tagGroup?.tokenizer;
+    }
+    get tagGroup() {
+        return this.shadowRoot.querySelector("[udex-tag-group]");
     }
-    get isDisabled() {
-        return this.readonly || this.displayonly || this.disabled;
+    get tags() {
+        return this.tagGroup ? Array.from(this.tagGroup.shadowRoot.querySelectorAll("[udex-tag]")) : [];
     }
     get truncatableTagLabel() {
         return this._truncatableTag.text.replace(/<\/?b>/gi, "");
     }
-    get showSingleSelectedOption() {
-        return this._singleSelectedOption?.length > 0 && this.modeSingleSelect;
-    }
     get showMultiSelectedOptions() {
         return this.hasSelectedItems && this.modeMultiSelect;
     }
-    get labelClass() {
-        const baseClass = "udex-text-field__label";
-        const isActive = this._open || this._singleSelectedOption || this.hasSelectedItems;
-        return isActive ? `${baseClass} ${baseClass}_active` : `${baseClass}`;
-    }
-    get isReadOrDisplayOnly() {
-        return this.readonly || this.displayonly;
+    get allowTargetOverlap() {
+        return !this.disableTargetOverlap;
     }
     get tokenizerExpanded() {
         if (this._showTagsDropdownContent && this._truncatableTag) {
             return false;
         }
-        if (this._tokenizer) {
-            return this._tokenizer.expanded;
-        }
-        return this._open;
-    }
-    get showTrigger() {
-        return !this.displayonly;
-    }
-    get hasSelectedItems() {
-        return this.selectedItems.length > 0;
-    }
-    get effectiveTabIndex() {
-        const tabindex = this.getAttribute("tabindex");
-        return this.disabled ? `${this._inactiveTabIndex}` : tabindex || `${this._inactiveTabIndex}`;
-    }
-    get triggerTabIndex() {
-        return this.disabled || this.readonly ? `${this._inactiveTabIndex}` : "";
-    }
-    get iconAccessibleNameText() {
-        const selectOptionsText = UDExSelectBox_1.i18nBundle.getText(SELECT_OPTIONS);
-        const iconAccessibleNameTextSingleMode = this._singleSelectedOption || selectOptionsText;
-        return this.modeMultiSelect ? selectOptionsText : iconAccessibleNameTextSingleMode;
-    }
-    get additionalClassName() {
-        return `udex-list__sticky`;
-    }
-    get searchableList() {
-        this.defaultAccessibleRole = "listbox";
-        return executeTemplate(UDExSelectBox_1.searchableListBaseTemplate, this);
-    }
-    get accInfo() {
-        return {
-            "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || undefined,
-        };
-    }
-    get accessibilityAttributes() {
-        return {
-            expanded: `${this._open}`,
-            controls: this.popoverId,
-            hasPopup: this.listboxRole,
-            ariaLabel: this.iconAccessibleNameText,
-        };
-    }
-    get popoverId() {
-        return `${this._id}_udex-select-box__dropdown`;
-    }
-    get listboxRole() {
-        return "listbox";
-    }
-    static get searchableListBaseTemplate() {
-        return SearchableListBaseTemplate;
+        const isCurrentlyExpanded = this.tokenizer?.expanded;
+        return this._focused || this._open || isCurrentlyExpanded;
     }
 };
 __decorate([
     property({ type: Boolean })
 ], UDExSelectBox.prototype, "disableTargetOverlap", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExSelectBox.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExSelectBox.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String })
-], UDExSelectBox.prototype, "label", void 0);
-__decorate([
-    property()
-], UDExSelectBox.prototype, "accessibleName", void 0);
-__decorate([
-    property()
-], UDExSelectBox.prototype, "accessibleNameRef", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExSelectBox.prototype, "readonly", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExSelectBox.prototype, "displayonly", void 0);
-__decorate([
-    property()
-], UDExSelectBox.prototype, "valueState", void 0);
-__decorate([
-    property({ type: String })
-], UDExSelectBox.prototype, "supportingText", void 0);
 __decorate([
     property()
 ], UDExSelectBox.prototype, "tooltipPlacement", void 0);
-__decorate([
-    property({ type: String, noAttribute: true })
-], UDExSelectBox.prototype, "_direction", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExSelectBox.prototype, "_focused", void 0);
-__decorate([
-    property({ type: Boolean })
-], UDExSelectBox.prototype, "_open", void 0);
 __decorate([
     property({ type: Boolean })
 ], UDExSelectBox.prototype, "_showTagsDropdownContent", void 0);
-UDExSelectBox = UDExSelectBox_1 = __decorate([
+UDExSelectBox = __decorate([
     customElement({
         tag: "udex-select-box",
         renderer: litRender,
-        styles: [TextFieldCss, SelectBoxCss, SearchableListCss, getEffectiveScrollbarStyle()],
+        styles: [
+            TextFieldCss,
+            SelectBoxCss,
+            SelectBaseCss,
+            SearchableListCss,
+            getEffectiveScrollbarStyle(),
+        ],
         template: SelectBoxTemplate,
         dependencies: [
             UDExSelectBoxGroupHeader,
@@ -548,22 +349,19 @@ UDExSelectBox = UDExSelectBox_1 = __decorate([
             UDExListSelectAll,
             UDExSelectBoxItem,
             UDExStatusMessage,
-            UDExControlButton,
-            UDExTagGroup,
             UDExBusyIndicator,
+            UDExTagGroup,
             UDExListItem,
             UDExList,
-            UDExSearch,
-            UDExButton,
             UDExTag,
             Tokenizer,
+            Popover,
             Token,
             Icon,
-            Popover,
         ],
     })
     /**
-     * Fired event when the user clicks on the reset button in the search.
+     * Fired event when the user remove tag.
      *
      * @public
      * @param {UDExItemFromList} item The removed item
@@ -577,13 +375,6 @@ UDExSelectBox = UDExSelectBox_1 = __decorate([
      */
     ,
     event("show-more", { bubbles: true })
-    /**
-     * Fired before the dropdown pane is opened.
-     *
-     * @public
-     */
-    ,
-    event("before-open", { bubbles: true })
 ], UDExSelectBox);
 UDExSelectBox.define();
 export default UDExSelectBox;