@sapudex/web-components 2.22.0 → 2.23.0

package/src/SelectBase.ts

@@ -0,0 +1,580 @@
+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 type { UDExListItemBase } from "./List.js";
+import type Popover from "@ui5/webcomponents/dist/Popover.js";
+import type UDExList from "./List.js";
+import type UDExSearch from "./Search.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 type { ResizeObserverCallback } from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
+import UDExSearchableListBase from "./SearchableListBase.js";
+import UDExValueState from "./types/common.js";
+import type { UDExSearchableListBaseEvents } from "./SearchableListBase.js";
+import { getTokensCountText } from "@ui5/webcomponents/dist/Tokenizer.js";
+import isLetterKey from "./utils/isLetterKeyPressed.js";
+
+export type UDExSelectBaseEvents = {
+  "open": void,
+  "close": void,
+  "before-close": void,
+  "before-open": void,
+} & UDExSearchableListBaseEvents;
+
+/**
+ * @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 {
+  eventDetails!: UDExSelectBaseEvents;
+
+  /**
+   * Defines whether the component is required.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    required!: boolean;
+
+  /**
+   * Defines whether the component is in disabled state.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    disabled!: boolean;
+
+  /**
+   * Defines label text for field container.
+   *
+   * @default ""
+   * @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 undefined
+   * @public
+   */
+  @property()
+    accessibleNameRef?: string;
+
+  /**
+   * Defines whether the component is read-only.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    readonly!: boolean;
+
+  /**
+   * Defines whether the component is display-only.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    displayonly!: boolean;
+
+  /**
+   * Defines the value state of the trigger container.
+   *
+   * @default "Standard"
+   * @public
+   */
+  @property()
+    valueState: `${UDExValueState}` = UDExValueState.Standard;
+
+  /**
+   * Defines supporting text under the trigger container.
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    supportingText?: string;
+
+  /**
+   * @private
+   */
+  @property({ type: String, noAttribute: true })
+    _direction?: string;
+
+  /**
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _focused!: boolean;
+
+  /**
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _open: boolean = false;
+
+  /**
+   * Defines selected option for Single Select Mode.
+   *
+   * @default undefined
+   * @private
+   */
+  @property()
+    _selectedOption!: string;
+
+  /**
+   * Defines if the component should reset.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _requestRender = false;
+
+  _paneWidthVariableName = "--udex-dropdown-pane-width";
+  _labelBaseClass = "udex-text-field__label";
+  _dropdownClass = "udex-select-box__dropdown";
+  _listBoxRole = "listbox";
+  _rootClass = "udex-select-box__root";
+  _stickyClass = "udex-list__sticky";
+  _ariaAutoComplete = "list";
+  _trigger!: HTMLElement;
+  _search!: UDExSearch | HTMLInputElement;
+  _popover!: Popover;
+  _list!: UDExList;
+  _inputValue: string = "";
+  _lastSelectedItemId: string = "";
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    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: KeyboardEvent) {
+    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: KeyboardEvent, items: UDExListItemBase[]) {
+    const currentSelectedIndex = this._list?.getCurrentIndex(items, e.target as UDExListItemBase);
+    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: UDExListItemBase[], lastItemIndex: number) {
+    if (this.showImageFlags) {
+      this.handleImagePosition(items, lastItemIndex);
+    }
+
+    this._selectedOption = items[lastItemIndex].label;
+  }
+
+  handleHomeKeyPress(items: UDExListItemBase[]) {
+    this._selectedOption = items[0].label;
+
+    if (this.showImageFlags) {
+      this.handleImagePosition(items, 0);
+    }
+  }
+
+  handleDownKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {
+    const nextIndex = currentSelectedIndex + 1;
+    const nextSelectIndex = nextIndex > lastItemIndex ? 0 : nextIndex;
+    this._selectedOption = items[nextSelectIndex].label;
+
+    if (this.showImageFlags) {
+      this.handleImagePosition(items, nextSelectIndex);
+    }
+  }
+
+  handleUpKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number) {
+    const prevIndex = currentSelectedIndex - 1;
+    const previousSelectIndex = prevIndex < 0 ? lastItemIndex : prevIndex;
+    this._selectedOption = items[previousSelectIndex].label;
+
+    if (this.showImageFlags) {
+      this.handleImagePosition(items, previousSelectIndex);
+    }
+  }
+
+  handleLetterKeyPress(e: KeyboardEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    this._selectedOption = "";
+    this._search.value = e.key;
+    this._search.focus();
+    this.onSearch(this._search.value);
+  }
+
+  handleEscKeyPress(e: KeyboardEvent) {
+    e.preventDefault();
+    this.closeDropdown();
+    this._search.focus();
+
+    if (!this.tabNavigationEnabled) {
+      this._selectedOption = "";
+    }
+  }
+
+  handleItemSelection(e:CustomEvent) {
+    this.onItemPress(e);
+    const item = e.detail.item as UDExListItemBase;
+    this._lastSelectedItemId = this.getDataTokenId(item);
+    this.resetSearchState();
+
+    if (this.modeSingleSelect) {
+      this._search.focus();
+      this.closeDropdown();
+    }
+  }
+
+  onKeyDownSearch(e: KeyboardEvent) {
+    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: UDExListItemBase[]): void {
+    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: CustomEvent) {
+    const inputValue = (e.target as HTMLInputElement)?.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: UDExListItemBase[], index: number) {
+    const image = items[index].querySelector<HTMLElement>(".udex-text-field__image");
+    const imagePlaceholder = this.shadowRoot!.querySelector<HTMLElement>(".udex-text-field__input > .udex-text-field__image");
+
+    if (imagePlaceholder) {
+      imagePlaceholder.style.backgroundPosition = image?.style?.backgroundPosition || "";
+    }
+  }
+
+  get ariaDescribedbyText(): string {
+    if (this.modeSingleSelect) {
+      return this._selectedOption;
+    }
+    const tags = this.selectedItems.filter(item => !item.isGroup);
+    return getTokensCountText(tags.length);
+  }
+
+  get trigger(): HTMLElement {
+    return this.shadowRoot!.querySelector(".udex-text-field__wrap")!;
+  }
+
+  get isDisabled(): boolean {
+    return this.readonly || this.displayonly || this.disabled;
+  }
+
+  get labelClass(): string {
+    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(): boolean {
+    return this.readonly || this.displayonly;
+  }
+
+  get hasSelectedItems(): boolean {
+    return this.selectedItems.length > 0;
+  }
+
+  get additionalClassName(): string {
+    return this._stickyClass;
+  }
+
+  get accInfo(): { ariaLabel: string } {
+    return {
+      "ariaLabel": getAllAccessibleNameRefTexts(this) || this.accessibleName || this.label || UDExSelectBase.i18nBundle.getText(COUNTRY_SELECT),
+    };
+  }
+
+  get popoverId(): string {
+    return `${this._id}_${this._dropdownClass}`;
+  }
+
+  get listboxRole(): string {
+    return this._listBoxRole;
+  }
+
+  get hideDropdownSearch(): boolean {
+    return true;
+  }
+
+  get showImageFlags(): boolean {
+    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;
+  }
+}
+
+export default UDExSelectBase;