kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/search/autocomplete.ts

@@ -0,0 +1,620 @@
+import { Utils } from '../../src/utils';
+import { Dropdown, DropdownOptions } from '../dropdown/dropdown';
+import { Component, BaseOptions, InitElements, MElement } from '../../src/component';
+
+export interface AutocompleteData {
+  /**
+   * A primitive value that can be converted to string.
+   * If "text" is not provided, it will also be used as "option text" as well
+   */
+  id: string | number;
+  /**
+   * This optional attribute is used as "display value" for the current entry.
+   * When provided, it will also be taken into consideration by the standard search function.
+   */
+  text?: string;
+  /**
+   * This optional attribute is used to provide a valid image URL to the current option.
+   */
+  image?: string;
+  /**
+   * Optional attributes which describes the option.
+   */
+  description?: string;
+}
+
+export interface AutocompleteOptions extends BaseOptions {
+  /**
+   * Data object defining autocomplete options with
+   * optional icon strings.
+   */
+  data: AutocompleteData[];
+  /**
+   * Flag which can be set if multiple values can be selected. The Result will be an Array.
+   * @default false
+   */
+  isMultiSelect: boolean;
+  /**
+   * Callback for when autocompleted.
+   */
+  onAutocomplete: (entries: AutocompleteData[]) => void;
+  /**
+   * Minimum number of characters before autocomplete starts.
+   * @default 1
+   */
+  minLength: number;
+  /**
+   * The height of the Menu which can be set via css-property.
+   * @default '300px'
+   */
+  maxDropDownHeight: string;
+  /**
+   * Function is called when the input text is altered and data can also be loaded asynchronously.
+   * If the results are collected the items in the list can be updated via the function setMenuItems(collectedItems).
+   * @param text Searched text.
+   * @param autocomplete Current autocomplete instance.
+   */
+  onSearch: (text: string, autocomplete: Autocomplete) => void;
+  /**
+   * If true will render the key from each item directly as HTML.
+   * User input MUST be properly sanitized first.
+   * @default false
+   */
+  allowUnsafeHTML: boolean;
+  /**
+   * Pass options object to select dropdown initialization.
+   * @default {}
+   */
+  dropdownOptions: Partial<DropdownOptions>;
+  /**
+   * Predefined selected values
+   */
+  selected: number[] | string[];
+}
+
+const _defaults: AutocompleteOptions = {
+  data: [], // Autocomplete data set
+  onAutocomplete: null, // Callback for when autocompleted
+  dropdownOptions: {
+    // Default dropdown options
+    autoFocus: false,
+    closeOnClick: false,
+    coverTrigger: false
+  },
+  minLength: 1, // Min characters before autocomplete starts
+  isMultiSelect: false,
+  onSearch: (text: string, autocomplete: Autocomplete) => {
+    const normSearch = text.toLocaleLowerCase();
+    autocomplete.setMenuItems(
+      autocomplete.data.filter(
+        (option) =>
+          option.id.toString().toLocaleLowerCase().includes(normSearch) ||
+          option.text?.toLocaleLowerCase().includes(normSearch)
+      )
+    );
+  },
+  maxDropDownHeight: '300px',
+  allowUnsafeHTML: false,
+  selected: [],
+};
+
+export class Autocomplete extends Component<AutocompleteOptions> {
+  declare el: HTMLInputElement;
+  /** If the autocomplete is open. */
+  isOpen: boolean;
+  /** Number of matching autocomplete options. */
+  count: number;
+  /** Index of the current selected option. */
+  activeIndex: number;
+  private oldVal: string;
+  private $active: HTMLElement | null;
+  private _mousedown: boolean;
+  container: HTMLElement;
+  /** Instance of the dropdown plugin for this autocomplete. */
+  dropdown: Dropdown;
+  static _keydown: boolean;
+  selectedValues: AutocompleteData[];
+  menuItems: AutocompleteData[];
+  data: AutocompleteData[];
+
+  constructor(el: HTMLInputElement, options: Partial<AutocompleteOptions>) {
+    super(el, options, Autocomplete);
+    this.el['M_Autocomplete'] = this;
+
+    this.options = {
+      ...Autocomplete.defaults,
+      ...options
+    };
+
+    this.isOpen = false;
+    this.count = 0;
+    this.activeIndex = -1;
+    this.oldVal = '';
+    this.selectedValues =
+      this.selectedValues ||
+      this.options.selected.map((value: number | string) => <AutocompleteData>{ id: value }) ||
+      [];
+    this.menuItems = this.options.data || [];
+    this.data = this.options.data || [];
+    this.$active = null;
+    this._mousedown = false;
+    this._setupDropdown();
+    this._setupEventHandlers();
+  }
+
+  static get defaults(): AutocompleteOptions {
+    return _defaults;
+  }
+
+  /**
+   * Initializes instance of Autocomplete.
+   * @param el HTML element.
+   * @param options Component options.
+   */
+  static init(el: HTMLInputElement, options?: Partial<AutocompleteOptions>): Autocomplete;
+  /**
+   * Initializes instances of Autocomplete.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(
+    els: InitElements<HTMLInputElement | MElement>,
+    options?: Partial<AutocompleteOptions>
+  ): Autocomplete[];
+  /**
+   * Initializes instances of Autocomplete.
+   * @param els HTML elements.
+   * @param options Component options.
+   */
+  static init(
+    els: HTMLInputElement | InitElements<HTMLInputElement | MElement>,
+    options: Partial<AutocompleteOptions> = {}
+  ): Autocomplete | Autocomplete[] {
+    return super.init(els, options, Autocomplete);
+  }
+
+  static getInstance(el: HTMLElement): Autocomplete {
+    return el['M_Autocomplete'];
+  }
+
+  destroy() {
+    this._removeEventHandlers();
+    this._removeDropdown();
+    this.el['M_Autocomplete'] = undefined;
+  }
+
+  _setupEventHandlers() {
+    this.el.addEventListener('blur', this._handleInputBlur);
+    this.el.addEventListener('keyup', this._handleInputKeyup);
+    this.el.addEventListener('focus', this._handleInputFocus);
+    this.el.addEventListener('keydown', this._handleInputKeydown);
+    this.el.addEventListener('click', this._handleInputClick);
+    this.container.addEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
+    this.container.addEventListener('mouseup', this._handleContainerMouseupAndTouchend);
+    if (typeof window.ontouchstart !== 'undefined') {
+      this.container.addEventListener('touchstart', this._handleContainerMousedownAndTouchstart);
+      this.container.addEventListener('touchend', this._handleContainerMouseupAndTouchend);
+    }
+  }
+
+  _removeEventHandlers() {
+    this.el.removeEventListener('blur', this._handleInputBlur);
+    this.el.removeEventListener('keyup', this._handleInputKeyup);
+    this.el.removeEventListener('focus', this._handleInputFocus);
+    this.el.removeEventListener('keydown', this._handleInputKeydown);
+    this.el.removeEventListener('click', this._handleInputClick);
+    this.container.removeEventListener('mousedown', this._handleContainerMousedownAndTouchstart);
+    this.container.removeEventListener('mouseup', this._handleContainerMouseupAndTouchend);
+
+    if (typeof window.ontouchstart !== 'undefined') {
+      this.container.removeEventListener('touchstart', this._handleContainerMousedownAndTouchstart);
+      this.container.removeEventListener('touchend', this._handleContainerMouseupAndTouchend);
+    }
+  }
+
+  _setupDropdown() {
+    this.container = document.createElement('ul');
+    this.container.style.maxHeight = this.options.maxDropDownHeight;
+    this.container.id = `autocomplete-options-${Utils.guid()}`;
+    this.container.classList.add('autocomplete-content', 'dropdown-content');
+    this.container.ariaExpanded = 'true';
+    this.el.setAttribute('data-target', this.container.id);
+
+    this.menuItems.forEach((menuItem) => {
+      const itemElement = this._createDropdownItem(menuItem);
+      this.container.append(itemElement);
+    });
+
+    // ! Issue in Component Dropdown: _placeDropdown moves dom-position
+    this.el.parentElement.appendChild(this.container);
+
+    // Initialize dropdown
+    const dropdownOptions = {
+      ...Autocomplete.defaults.dropdownOptions,
+      ...this.options.dropdownOptions
+    };
+    // @todo shouldn't we conditionally check if dropdownOptions.onItemClick is set in first place?
+    const userOnItemClick = dropdownOptions.onItemClick;
+    // Ensuring the select Option call when user passes custom onItemClick function to dropdown
+    dropdownOptions.onItemClick = (li) => {
+      if (!li) return;
+      const entryID = li.getAttribute('data-id');
+      this.selectOption(entryID);
+      // Handle user declared onItemClick if needed
+      if (userOnItemClick && typeof userOnItemClick === 'function')
+        userOnItemClick.call(this.dropdown, this.el);
+    };
+    this.dropdown = Dropdown.init(this.el, dropdownOptions);
+
+    // ! Workaround for Label: move label up again
+    // TODO: Just use PopperJS in future!
+    const label = this.el.parentElement.querySelector('label');
+    if (label) this.el.after(label);
+
+    // Sketchy removal of dropdown click handler
+    this.el.removeEventListener('click', this.dropdown._handleClick);
+    if (!this.options.isMultiSelect && !(this.options.selected.length === 0)) {
+      const selectedValue = this.menuItems.filter(
+        (value) => value.id === this.selectedValues[0].id
+      );
+      this.el.value = selectedValue[0].text;
+    }
+    // Set Value if already set in HTML
+    if (this.el.value) this.selectOption(this.el.value);
+    // Add StatusInfo
+    const div = document.createElement('div');
+    div.classList.add('status-info');
+    div.setAttribute('style', 'position: absolute;right:0;top:0;');
+    this.el.parentElement.appendChild(div);
+    this._updateSelectedInfo();
+  }
+
+  _removeDropdown() {
+    this.container.ariaExpanded = 'false';
+    this.container.parentNode.removeChild(this.container);
+  }
+
+  _handleInputBlur = () => {
+    if (!this._mousedown) {
+      this.close();
+      this._resetAutocomplete();
+    }
+  };
+
+  _handleInputKeyup = (e: KeyboardEvent) => {
+    if (e.type === 'keyup') Autocomplete._keydown = false;
+    this.count = 0;
+    const actualValue = this.el.value.toLocaleLowerCase();
+    // Don't capture enter or arrow key usage.
+    if (
+      Utils.keys.ENTER.includes(e.key) ||
+      Utils.keys.ARROW_UP.includes(e.key) ||
+      Utils.keys.ARROW_DOWN.includes(e.key)
+    )
+      return;
+    // Check if the input isn't empty
+    // Check if focus triggered by tab
+    if (this.oldVal !== actualValue && Utils.tabPressed) {
+      this.open();
+    }
+    this._inputChangeDetection(actualValue);
+  };
+
+  _handleInputFocus = () => {
+    this.count = 0;
+    const actualValue = this.el.value.toLocaleLowerCase();
+    this._inputChangeDetection(actualValue);
+  };
+
+  _inputChangeDetection = (value: string) => {
+    // Value has changed!
+    if (this.oldVal !== value) {
+      this._setStatusLoading();
+      this.options.onSearch(this.el.value, this);
+    }
+    // Reset Single-Select when Input cleared
+    if (!this.options.isMultiSelect && this.el.value.length === 0) {
+      this.selectedValues = [];
+      this._triggerChanged();
+    }
+    this.oldVal = value;
+  };
+
+  _handleInputKeydown = (e: KeyboardEvent) => {
+    Autocomplete._keydown = true;
+    // Arrow keys and enter key usage
+    const numItems = this.container.querySelectorAll('li').length;
+    // select element on Enter
+    if (Utils.keys.ENTER.includes(e.key) && this.activeIndex >= 0) {
+      const liElement = this.container.querySelectorAll('li')[this.activeIndex];
+      if (liElement) {
+        this.selectOption(liElement.getAttribute('data-id'));
+        e.preventDefault();
+      }
+      return;
+    }
+    // Capture up and down key
+    if (Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key)) {
+      e.preventDefault();
+      if (Utils.keys.ARROW_UP.includes(e.key) && this.activeIndex > 0) this.activeIndex--;
+      if (Utils.keys.ARROW_DOWN.includes(e.key) && this.activeIndex < numItems - 1)
+        this.activeIndex++;
+      this.$active?.classList.remove('active');
+      if (this.activeIndex >= 0) {
+        this.$active = this.container.querySelectorAll('li')[this.activeIndex];
+        this.$active?.classList.add('active');
+        // Focus selected
+        this.container.children[this.activeIndex].scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest'
+        });
+      }
+    }
+  };
+
+  _handleInputClick = () => {
+    this.open();
+  };
+
+  _handleContainerMousedownAndTouchstart = () => {
+    this._mousedown = true;
+  };
+
+  _handleContainerMouseupAndTouchend = () => {
+    this._mousedown = false;
+  };
+
+  _resetCurrentElementPosition() {
+    this.activeIndex = -1;
+    this.$active?.classList.remove('active');
+  }
+
+  _resetAutocomplete() {
+    this.container.replaceChildren();
+    this._resetCurrentElementPosition();
+    this.oldVal = null;
+    this.isOpen = false;
+    this._mousedown = false;
+  }
+
+  _highlightPartialText(input: string, label: string) {
+    const start = label.toLocaleLowerCase().indexOf('' + input.toLocaleLowerCase() + '');
+    const end = start + input.length - 1;
+    //custom filters may return results where the string does not match any part
+    if (start == -1 || end == -1) {
+      return [label, '', ''];
+    }
+    return [label.slice(0, start), label.slice(start, end + 1), label.slice(end + 1)];
+  }
+
+  _createDropdownItem(entry: AutocompleteData) {
+    const item = document.createElement('li');
+    item.setAttribute('data-id', <string>entry.id);
+    item.setAttribute(
+      'style',
+      'display:grid; grid-auto-flow: column; user-select: none; align-items: center;'
+    );
+    item.tabIndex = 0;
+    // Checkbox
+    if (this.options.isMultiSelect) {
+      item.innerHTML = `
+        <div class="item-selection" style="text-align:center;">
+        <input type="checkbox"${
+          this.selectedValues.some((sel) => sel.id === entry.id) ? ' checked="checked"' : ''
+        }><span style="padding-left:21px;"></span>
+      </div>`;
+    }
+    // Image
+    if (entry.image) {
+      const img = document.createElement('img');
+      img.classList.add('circle');
+      img.src = entry.image;
+      item.appendChild(img);
+    }
+
+    // Text
+    const inputText = this.el.value.toLocaleLowerCase();
+    const parts = this._highlightPartialText(inputText, (entry.text || entry.id).toString());
+    const div = document.createElement('div');
+    div.setAttribute('style', 'line-height:1.2;font-weight:500;');
+    if (this.options.allowUnsafeHTML) {
+      div.innerHTML = parts[0] + '<span class="highlight">' + parts[1] + '</span>' + parts[2];
+    } else {
+      div.appendChild(document.createTextNode(parts[0]));
+      if (parts[1]) {
+        const highlight = document.createElement('span');
+        highlight.textContent = parts[1];
+        highlight.classList.add('highlight');
+        div.appendChild(highlight);
+        div.appendChild(document.createTextNode(parts[2]));
+      }
+    }
+
+    const itemText = document.createElement('div');
+    itemText.classList.add('item-text');
+    itemText.setAttribute('style', 'padding:5px;overflow:hidden;');
+    item.appendChild(itemText);
+    item.querySelector('.item-text').appendChild(div);
+    // Description
+    if (
+      typeof entry.description === 'string' ||
+      (typeof entry.description === 'number' && !isNaN(entry.description))
+    ) {
+      const description = document.createElement('small');
+      description.setAttribute(
+        'style',
+        'line-height:1.3;color:grey;white-space:nowrap;text-overflow:ellipsis;display:block;width:90%;overflow:hidden;'
+      );
+      description.innerText = entry.description;
+      item.querySelector('.item-text').appendChild(description);
+    }
+    // Set Grid
+    const getGridConfig = () => {
+      if (this.options.isMultiSelect) {
+        if (entry.image) return '40px min-content auto'; // cb-img-txt
+        return '40px auto'; // cb-txt
+      }
+      if (entry.image) return 'min-content auto'; // img-txt
+      return 'auto'; // txt
+    };
+    item.style.gridTemplateColumns = getGridConfig();
+    return item;
+  }
+
+  _renderDropdown() {
+    this._resetAutocomplete();
+    // Check if Data is empty
+    if (this.menuItems.length === 0) {
+      this.menuItems = this.selectedValues; // Show selected Items
+    }
+    for (let i = 0; i < this.menuItems.length; i++) {
+      const item = this._createDropdownItem(this.menuItems[i]);
+      this.container.append(item);
+    }
+  }
+
+  _setStatusLoading() {
+    this.el.parentElement.querySelector(
+      '.status-info'
+    ).innerHTML = `<div style="height:100%;width:50px;"><svg version="1.1" id="L4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+    <circle fill="#888c" stroke="none" cx="6" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.1"/></circle>
+    <circle fill="#888c" stroke="none" cx="26" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin="0.2"/></circle>
+    <circle fill="#888c" stroke="none" cx="46" cy="50" r="6"><animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite"  begin="0.3"/></circle>
+  </svg></div>`;
+  }
+
+  _updateSelectedInfo() {
+    const statusElement = this.el.parentElement.querySelector('.status-info');
+    if (statusElement) {
+      if (this.options.isMultiSelect)
+        statusElement.innerHTML = this.selectedValues.length.toString();
+      else statusElement.innerHTML = '';
+    }
+  }
+
+  _refreshInputText() {
+    if (this.selectedValues.length === 1) {
+      const entry = this.selectedValues[0];
+      this.el.value = entry.text || <string>entry.id; // Write Text to Input
+    }
+  }
+
+  _triggerChanged() {
+    this.el.dispatchEvent(new Event('change'));
+    // Trigger Autocomplete Event
+    if (typeof this.options.onAutocomplete === 'function')
+      this.options.onAutocomplete.call(this, this.selectedValues);
+  }
+
+  /**
+   * Show autocomplete.
+   */
+  open = () => {
+    const inputText = this.el.value.toLocaleLowerCase();
+    this._resetAutocomplete();
+    if (inputText.length >= this.options.minLength) {
+      this.isOpen = true;
+      this._renderDropdown();
+    }
+    // Open dropdown
+    if (!this.dropdown.isOpen) {
+      setTimeout(() => {
+        this.dropdown.open();
+      }, 0); // TODO: why?
+    } else this.dropdown.recalculateDimensions(); // Recalculate dropdown when its already open
+  };
+
+  /**
+   * Hide autocomplete.
+   */
+  close = () => {
+    this.dropdown.close();
+  };
+
+  /**
+   * Updates the visible or selectable items shown in the menu.
+   * @param menuItems Items to be available.
+   * @param selected Selected item ids
+   * @param open Option to conditionally open dropdown
+   * @param initial Condition to set initial data
+   */
+  setMenuItems(
+    menuItems: AutocompleteData[],
+    selected: number[] | string[] = null,
+    open: boolean = true,
+    initial: boolean = false,
+  ) {
+    this.menuItems = menuItems;
+    this.options.data = menuItems;
+    if (initial) {
+      this.data = menuItems;
+    }
+    if (selected) {
+      this.selectedValues = this.menuItems.filter(
+        (item) => !(selected.indexOf(<never>item.id) === -1)
+      );
+    }
+    if (this.options.isMultiSelect) {
+      this._renderDropdown();
+    }
+    if (open) this.open();
+    this._updateSelectedInfo();
+    this._triggerChanged();
+  }
+
+  /**
+   * Sets selected values.
+   * @deprecated @see https://github.com/materializecss/materialize/issues/552
+   * @param entries
+   */
+  setValues(entries: AutocompleteData[]) {
+    this.selectedValues = entries;
+    this._updateSelectedInfo();
+    if (!this.options.isMultiSelect) {
+      this._refreshInputText();
+    }
+    this._triggerChanged();
+  }
+
+  /**
+   * Select a specific autocomplete option via id-property.
+   * @param id The id of a data-entry.
+   */
+  selectOption(id: number | string) {
+    const entry = this.menuItems.find((item) => item.id == id);
+    if (!entry) return;
+    // Toggle Checkbox
+    /* const li = this.container.querySelector('li[data-id="' + id + '"]');
+    if (!li) return;*/
+    if (this.options.isMultiSelect) {
+      /* const checkbox = <HTMLInputElement | null>li.querySelector('input[type="checkbox"]');
+      checkbox.checked = !checkbox.checked;*/
+      if (
+        !(this.selectedValues.filter((selectedEntry) => selectedEntry.id === entry.id).length >= 1)
+      )
+        this.selectedValues.push(entry);
+      else
+        this.selectedValues = this.selectedValues.filter(
+          (selectedEntry) => selectedEntry.id !== entry.id
+        );
+      this._renderDropdown();
+      this.el.focus();
+    } else {
+      // Single-Select
+      this.selectedValues = [entry];
+      this._refreshInputText();
+      this._resetAutocomplete();
+      this.close();
+    }
+    this._updateSelectedInfo();
+    this._triggerChanged();
+  }
+
+  selectOptions(ids: []) {
+    const entries = this.menuItems.filter((item) => !(ids.indexOf(<never>item.id) === -1));
+    if (!entries) return;
+    this.selectedValues = entries;
+    this._renderDropdown();
+  }
+}