@nanoporetech-digital/components 1.15.6 → 2.0.0

package/dist/collection/components/datalist/datalist.js

@@ -0,0 +1,782 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { Component, h, Host, Element, State, Watch, Prop, Event, writeTask, Build, forceUpdate, } from '@stencil/core';
+import { debounce, raf } from '../../utils';
+function findLabel(formCtrl) {
+  let foundLabel;
+  if (formCtrl.id) {
+    foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);
+  }
+  if (!foundLabel) {
+    foundLabel = formCtrl.closest('label');
+  }
+  return foundLabel;
+}
+let listIds = 0;
+/**
+ * `nano-datalist` a visually consistent and more flexible replacement for a native
+ * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`
+ * or linked to any input control via the `input` prop. Is used internally within `nano-select`.
+ * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop
+ *
+ * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop
+ * @slot list-top - shows at the top of the list when there are options present
+ * @slot list-bottom - shows at the bottom of the list when there are options present
+ * @slot no-result - shown when there are no results otherwise nothing will be shown
+ */
+export class DataList {
+  constructor() {
+    // Private State
+    this.isNanoInput = false;
+    this.typeToSelect = '';
+    // options set via `options` prop
+    this.optionEles = [];
+    this.listId = `nano-datalist-${listIds++}`;
+    this.isFiltered = false;
+    this._allOptEles = [];
+    // active option eles that are not hidden.
+    this.actvOptEles = [];
+    this.canOpen = true;
+    this.optionIds = [];
+    // Public API
+    /** By default, items in the list will appear 'selected' when the value in the linked input control matches.
+     * However you can add other selected options via the the selected prop. */
+    this.selected = [];
+    this._dropDownConfig = {
+      skidding: -1,
+    };
+    /** Provide an option list.
+     * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */
+    this.options = [];
+    /** Tweaks the datalist behaviour and linked control semantics and behaviour.
+     * e.g. 'select' will make the linked input control readonly.
+     */
+    this.type = 'input';
+    /** Force datalist open */
+    this.open = false;
+    /** Use this option to disable to default filtering. This is useful if filtering happens
+     * externally via another method (e.g. via ajax)
+     */
+    this.disableFilter = false;
+    /** Activate / deactivate the datalist control */
+    this.disabled = false;
+    // a new option has been picked
+    this.optSelected = (e) => {
+      e.stopPropagation();
+      this.changeInputValue(e.detail);
+      raf(() => this.inputChange());
+      if (this.type === 'select')
+        this.shouldOpen = false;
+    };
+    // sets focus immediately on open when 'select' - mirroring native behaviour
+    this.handleShow = async () => {
+      if (this.type === 'select')
+        this.listBox.setFocus();
+    };
+    this.inputClick = () => {
+      this.shouldOpen = true;
+      // open dropdown if possible
+      this.manageDropdownDisplay();
+    };
+    this.inputKeydown = (e) => {
+      const ignoreKeys = [
+        'Shift',
+        'ArrowRight',
+        'ArrowLeft',
+        'Escape',
+        'Enter',
+        'Tab',
+      ];
+      if (ignoreKeys.includes(e.key)) {
+        if (e.key === 'Tab')
+          this.shouldOpen = false;
+        return;
+      }
+      // When select, mirror native select behaviour. Search on closed list
+      if (this.type === 'select' &&
+        !['ArrowDown', 'ArrowUp'].includes(e.key) &&
+        (e.key !== ' ' || this.typeToSelectTimeout)) {
+        if (e.key === ' ' || /^[a-z0-9]+$/i.test(e.key)) {
+          clearTimeout(this.typeToSelectTimeout);
+          this.typeToSelectTimeout = window.setTimeout(() => {
+            this.typeToSelect = '';
+            this.typeToSelectTimeout = 0;
+          }, 750);
+          this.typeToSelect += e.key;
+          this.setOptStartsWith();
+        }
+        return;
+      }
+      this.shouldOpen = true;
+      // open dropdown if possible
+      this.manageDropdownDisplay();
+    };
+    // handles key down on options. Either 'picks'
+    // an option or passes event back to input for search / filter
+    this.optionKeyDown = (e) => {
+      const ignoreKeys = [
+        'Shift',
+        'ArrowUp',
+        'ArrowDown',
+        'Escape',
+        'Enter',
+        'Tab',
+        'Space',
+        ' ',
+      ];
+      if (ignoreKeys.includes(e.key)) {
+        if (e.key === 'Escape')
+          this.connectedInput.focus();
+        return;
+      }
+      const deleteKeys = ['Delete', 'Backspace'];
+      // this passes whatever's typed back to our input control
+      if (this.type !== 'select' &&
+        (!this.exactMatch || deleteKeys.includes(e.key))) {
+        this.connectedInput.focus();
+      }
+    };
+    this.inputChange = debounce(this.inputChange.bind(this), 50);
+  }
+  // all potential option eles. Set via slot or `options` prop.
+  // Some may get hidden due to filtering
+  get allOptEles() {
+    return this._allOptEles;
+  }
+  set allOptEles(opts) {
+    var _a;
+    // when allOptEles are initially set (on slot change / options) -
+    // add options to 'selected' and fire selected event *if*
+    // value isn't set on the input
+    this._allOptEles = opts;
+    if ((_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.value)
+      return;
+    opts.forEach((opt) => {
+      if (opt.selected && !this.selected.includes(opt.value)) {
+        this.changeInputValue(opt);
+      }
+    });
+  }
+  /** nano-dropdown config options you can pass to the nested dropdown component */
+  get dropDownConfig() {
+    return this._dropDownConfig;
+  }
+  set dropDownConfig(ddc) {
+    this._dropDownConfig = Object.assign(Object.assign({}, this._dropDownConfig), ddc);
+  }
+  /** return all the active options currently within the datalist. Can be useful for validation */
+  get activeOptions() {
+    return this.allOptEles;
+  }
+  openWatcher() {
+    writeTask(() => {
+      this.nanoDropdown.open = this.open;
+      this.connectedInput.setAttribute('aria-expanded', this.open.toString());
+    });
+  }
+  // State change watchers
+  async watchInputChange() {
+    let nanoInput;
+    if ((nanoInput = this.host.closest('nano-input'))) {
+      this.isNanoInput = true;
+      this.connectedInput = await nanoInput.getInputElement();
+    }
+    else if (this.input &&
+      typeof this.input === 'string' &&
+      (nanoInput = document.querySelector(this.input))) {
+      this.isNanoInput = false;
+      this.connectedInput = nanoInput;
+    }
+    else if (this.input instanceof HTMLElement) {
+      this.connectedInput = this.input;
+    }
+  }
+  manageSlotChangeListener() {
+    var _a;
+    if (!this.host)
+      return;
+    // we're not using `options` - setup new MO
+    if ((!this.options || !this.options.length) && !this.mo) {
+      if (Build.isBrowser) {
+        const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
+        mo.observe(this.host, { childList: true, subtree: true });
+      }
+      this.processSlottedContent();
+      return;
+    }
+    // we're using `options` - trash current MO
+    if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
+      if (!!this.mo) {
+        this.mo.disconnect();
+        this.mo = undefined;
+      }
+      setTimeout(() => {
+        var _a;
+        if (((_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.value.length) && this.type !== 'select') {
+          this.inputChange();
+        }
+        else
+          this.actvOptEles = [...this.allOptEles];
+      }, 50);
+    }
+    forceUpdate(this.host);
+  }
+  watchTypeChange() {
+    if (!this.connectedInput)
+      return;
+    let dwConfig = { closeOnSelect: false };
+    let autocompleteType = 'both';
+    let readonly = false;
+    switch (this.type) {
+      case 'selctMulti':
+        // dwConfig.closeOnSelect = false;
+        break;
+      case 'select':
+        autocompleteType = 'list';
+        readonly = true;
+        break;
+    }
+    if (!this.isNanoInput) {
+      dwConfig.tetherTo = this.connectedInput;
+    }
+    this.dropDownConfig = Object.assign(Object.assign({}, this.dropDownConfig), dwConfig);
+    this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);
+    this.connectedInput.readOnly = readonly;
+  }
+  manageInputEvents(newInput, oldInput) {
+    var _a;
+    if (!!oldInput) {
+      const nanoInput = oldInput.closest('nano-input');
+      if (nanoInput) {
+        nanoInput.removeEventListener('nanoChange', this.inputChange);
+      }
+      oldInput.removeEventListener('change', this.inputChange);
+      oldInput.removeEventListener('click', this.inputClick);
+      oldInput.removeEventListener('keydown', this.inputKeydown);
+      oldInput.removeEventListener('input', this.inputChange);
+      this.inputLabel = null;
+      writeTask(() => {
+        oldInput.removeAttribute('role');
+        oldInput.removeAttribute('aria-expanded');
+        oldInput.removeAttribute('aria-controls');
+        oldInput.removeAttribute('aria-owns');
+        oldInput.removeAttribute('aria-haspopup');
+        oldInput.removeAttribute('aria-autocomplete');
+        oldInput.removeAttribute('autocomplete');
+      });
+    }
+    if (!!newInput) {
+      const nanoInput = newInput.closest('nano-input');
+      if (nanoInput) {
+        nanoInput.addEventListener('nanoChange', this.inputChange);
+      }
+      newInput.addEventListener('change', this.inputChange);
+      newInput.addEventListener('click', this.inputClick);
+      newInput.addEventListener('keydown', this.inputKeydown);
+      newInput.addEventListener('input', this.inputChange);
+      this.listId = this.host.id || this.listId;
+      this.inputLabel = ((_a = newInput === null || newInput === void 0 ? void 0 : newInput.labels) === null || _a === void 0 ? void 0 : _a.item(0)) || findLabel(newInput);
+      writeTask(() => {
+        this.host.id = this.listId;
+        newInput.setAttribute('role', 'combobox');
+        newInput.setAttribute('aria-expanded', 'false');
+        newInput.setAttribute('aria-controls', this.listId);
+        newInput.setAttribute('aria-owns', this.listId);
+        newInput.setAttribute('aria-haspopup', 'listbox');
+        newInput.setAttribute('autocomplete', 'off');
+      });
+    }
+  }
+  watchActvOptChange() {
+    var _a;
+    let c = 0;
+    const val = ((_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.value) || '';
+    const optIds = [];
+    writeTask(() => {
+      this.allOptEles.forEach((opt, i) => {
+        if (this.actvOptEles.includes(opt)) {
+          c++;
+          opt.setAttribute('aria-posinset', c + '');
+          opt.setAttribute('aria-setsize', this.actvOptEles.length + '');
+          opt.hidden = false;
+          this.isSelected(opt, val);
+        }
+        else {
+          opt.removeAttribute('aria-posinset');
+          opt.removeAttribute('aria-setsize');
+          opt.hidden = true;
+          opt.selected = false;
+        }
+        opt.id = this.listId + '-option-' + i;
+        optIds.push(opt.id);
+      });
+      this.optionIds = optIds;
+    });
+  }
+  manageCanOpen() {
+    if (this.actvOptEles.length || this.hasNoResult)
+      this.canOpen = true;
+    else
+      this.canOpen = false;
+  }
+  /**
+   * Opens the dropdown if it can, it should and there are items to display.
+   */
+  manageDropdownDisplay() {
+    if (this.shouldOpen && this.canOpen && !this.disabled)
+      this.open = true;
+    if (!this.shouldOpen || !this.canOpen)
+      this.open = false;
+  }
+  fireActiveOptsEvent() {
+    this.nanoOptionsUpdated.emit(this.actvOptEles);
+  }
+  // Private logic
+  isSelected(opt, val) {
+    if (val === opt.value || this.selected.includes(opt.value)) {
+      opt.selected = true;
+    }
+    else
+      opt.selected = false;
+  }
+  get dropwdownOpen() {
+    if (!this.nanoDropdown || !this.open)
+      return false;
+    return true;
+  }
+  get exactMatch() {
+    return this.allOptEles.find((opt) => this.connectedInput.value === opt.value);
+  }
+  /** reflect value back to the connected input unless the event is cancelled */
+  changeInputValue(opt) {
+    var _a;
+    let nanoSelected;
+    if (this.selected.includes(opt.value)) {
+      // deselect option
+      this.selected = this.selected.filter((val) => val !== opt.value);
+      nanoSelected = this.nanoDeselect.emit(opt);
+    }
+    else {
+      // select new option
+      this.selected = [...this.selected];
+      nanoSelected = this.nanoSelect.emit(opt);
+    }
+    if (!nanoSelected.defaultPrevented) {
+      if (this.connectedInput)
+        this.connectedInput.value = opt.value;
+      const event = new window.Event('change');
+      (_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
+    }
+  }
+  // this is for type="select" only.
+  // Filter options that start with text - aggregates letters (as opposed to getting the value from input)
+  setOptStartsWith() {
+    const attrFind = (toFind) => toFind.toLowerCase().substring(0, this.typeToSelect.length) ===
+      this.typeToSelect;
+    const foundEle = this.allOptEles.find((opt) => opt.value.trim().length > 0 &&
+      !opt.disabled &&
+      (attrFind(opt.textContent) ||
+        attrFind(opt.value) ||
+        attrFind(opt.label) ||
+        attrFind(opt.filterMeta)));
+    if (foundEle)
+      this.changeInputValue(foundEle);
+  }
+  // Event handlers
+  processSlottedContent() {
+    raf(() => {
+      var _a;
+      this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));
+      this.hasNoResult = !!this.host.querySelector('[slot="no-result"]');
+      if (((_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.value.length) && this.type !== 'select') {
+        this.inputChange();
+      }
+      else
+        this.actvOptEles = this.allOptEles;
+    });
+  }
+  // any changes to the connected input value will filter the list of active options
+  inputChange() {
+    if (this.disableFilter) {
+      this.actvOptEles = this.allOptEles;
+      return;
+    }
+    const val = this.connectedInput.value;
+    const valStr = val.trim().toLowerCase();
+    let exactMatch = false;
+    const activeEles = [];
+    const attrFind = (toFind) => toFind.toLowerCase().indexOf(valStr) > -1;
+    this.allOptEles.forEach((opt) => {
+      if ((val === opt.value || val === opt.label) &&
+        this.type !== 'selctMulti') {
+        opt.selected = true;
+        exactMatch = true;
+      }
+      else
+        this.isSelected(opt, val);
+    });
+    this.allOptEles.forEach((opt) => {
+      if (!valStr.length || exactMatch) {
+        activeEles.push(opt);
+      }
+      else if (opt.value.trim().length > 0 &&
+        !opt.disabled &&
+        (attrFind(opt.textContent) ||
+          attrFind(opt.value) ||
+          attrFind(opt.label) ||
+          attrFind(opt.filterMeta))) {
+        activeEles.push(opt);
+      }
+    });
+    this.isFiltered = valStr.length && !exactMatch;
+    this.actvOptEles = activeEles;
+  }
+  // Component lifecycle
+  connectedCallback() {
+    this.watchInputChange();
+  }
+  componentDidLoad() {
+    this.manageSlotChangeListener();
+    this.openWatcher();
+  }
+  componentDidRender() {
+    var _a;
+    setTimeout(() => {
+      if (!this.connectedInput)
+        console.warn('no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop', this.host);
+    }, 500);
+    // if user is using 'options' prop (as oppsed to slot)
+    // add those options now - a single source of truth for options and <slot>
+    if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length)
+      this.allOptEles = this.optionEles;
+  }
+  render() {
+    this.optionEles = [];
+    return (h(Host, { role: "listbox", "aria-owns": this.optionIds.join(' '), "aria-label": "Select options from the list below" },
+      h("nano-dropdown", Object.assign({}, this.dropDownConfig, { ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+          dlist__dropdown: true,
+          'dlist--isfiltered': this.isFiltered,
+        }, onNanoAfterShow: this.handleShow, onNanoAfterHide: (_) => (this.open = false) }),
+        h("nano-menu", { hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            dlist__menu: true,
+            'dlist__menu--open': this.dropwdownOpen,
+          }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) },
+          h("slot", { name: "list-top" }),
+          !this.options.length && h("slot", null),
+          !!this.options.length && (h("slot", null, this.options.map((option, i) => {
+            if (option.value || option.label) {
+              return (h("nano-option", { ref: (el) => this.optionEles.push(el), key: option.label + i, label: option.label, value: option.value, "aria-posinset": i, "aria-setsize": this.options.length, selected: option.selected, id: this.listId + '-option-' + i }, option.label ? option.label : option.value));
+            }
+          }))),
+          h("slot", { name: "list-bottom" })),
+        h("nano-menu", { type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            dlist__menu: true,
+            'dlist__menu--open': this.dropwdownOpen,
+          } },
+          h("slot", { name: "no-result" })),
+        !!this.actvOptEles && (h("div", { "aria-live": "polite", role: "status", class: "dlist__status" },
+          this.actvOptEles.length,
+          " result",
+          this.actvOptEles.length > 1 ? 's' : '',
+          " available.")))));
+  }
+  static get is() { return "nano-datalist"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["datalist.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["datalist.css"]
+  }; }
+  static get properties() { return {
+    "selected": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "By default, items in the list will appear 'selected' when the value in the linked input control matches.\nHowever you can add other selected options via the the selected prop."
+      },
+      "getter": false,
+      "setter": false,
+      "defaultValue": "[]"
+    },
+    "dropDownConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+        "resolved": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\" | \"right\" | \"right-start\" | \"right-end\" | \"left\" | \"left-start\" | \"left-end\"; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "nano-dropdown config options you can pass to the nested dropdown component"
+      },
+      "getter": true,
+      "setter": true,
+      "defaultValue": "{\n    skidding: -1,\n  }"
+    },
+    "options": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "OptionInterface[]",
+        "resolved": "OptionInterface[]",
+        "references": {
+          "OptionInterface": {
+            "location": "import",
+            "path": "/builds/CtjnL93R/0/Digital/nano-components/packages/components/src/interface.d.ts"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Provide an option list.\nOptions can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop"
+      },
+      "getter": false,
+      "setter": false,
+      "defaultValue": "[]"
+    },
+    "input": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | HTMLInputElement",
+        "resolved": "HTMLInputElement | string",
+        "references": {
+          "HTMLInputElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "A selector to a HTMLInputElement"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "input",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'select' | 'selctMulti' | 'input'",
+        "resolved": "\"input\" | \"selctMulti\" | \"select\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control readonly."
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'input'"
+    },
+    "activeOptions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "HTMLNanoOptionElement[]",
+        "resolved": "HTMLNanoOptionElement[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "return all the active options currently within the datalist. Can be useful for validation"
+      },
+      "getter": true,
+      "setter": false
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Force datalist open"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "open",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disableFilter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Use this option to disable to default filtering. This is useful if filtering happens\nexternally via another method (e.g. via ajax)"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "disable-filter",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Activate / deactivate the datalist control"
+      },
+      "getter": false,
+      "setter": false,
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "actvOptEles": {},
+    "connectedInput": {},
+    "inputLabel": {},
+    "hasNoResult": {},
+    "shouldOpen": {},
+    "canOpen": {},
+    "optionIds": {}
+  }; }
+  static get events() { return [{
+      "method": "nanoSelect",
+      "name": "nanoSelect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when an item is selected."
+      },
+      "complexType": {
+        "original": "HTMLNanoOptionElement",
+        "resolved": "HTMLNanoOptionElement",
+        "references": {
+          "HTMLNanoOptionElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "nanoDeselect",
+      "name": "nanoDeselect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when a currently selected item is reselected."
+      },
+      "complexType": {
+        "original": "HTMLNanoOptionElement",
+        "resolved": "HTMLNanoOptionElement",
+        "references": {
+          "HTMLNanoOptionElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "nanoOptionsUpdated",
+      "name": "nanoOptionsUpdated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Fired when active options change"
+      },
+      "complexType": {
+        "original": "HTMLNanoOptionElement[]",
+        "resolved": "HTMLNanoOptionElement[]",
+        "references": {
+          "HTMLNanoOptionElement": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "openWatcher"
+    }, {
+      "propName": "input",
+      "methodName": "watchInputChange"
+    }, {
+      "propName": "options",
+      "methodName": "manageSlotChangeListener"
+    }, {
+      "propName": "type",
+      "methodName": "watchTypeChange"
+    }, {
+      "propName": "connectedInput",
+      "methodName": "watchTypeChange"
+    }, {
+      "propName": "connectedInput",
+      "methodName": "manageInputEvents"
+    }, {
+      "propName": "selected",
+      "methodName": "watchActvOptChange"
+    }, {
+      "propName": "actvOptEles",
+      "methodName": "watchActvOptChange"
+    }, {
+      "propName": "actvOptEles",
+      "methodName": "manageCanOpen"
+    }, {
+      "propName": "hasNoResult",
+      "methodName": "manageCanOpen"
+    }, {
+      "propName": "shouldOpen",
+      "methodName": "manageDropdownDisplay"
+    }, {
+      "propName": "canOpen",
+      "methodName": "manageDropdownDisplay"
+    }, {
+      "propName": "actvOptEles",
+      "methodName": "fireActiveOptsEvent"
+    }]; }
+}
+//# sourceMappingURL=datalist.js.map