@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/cjs/nano-datalist_3.cjs.entry.js

@@ -0,0 +1,790 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-cb62df44.js');
+const index$1 = require('./index-53d02e05.js');
+const throttle = require('./throttle-3c97f7c6.js');
+const dom = require('./dom-52f9b8b7.js');
+const slot = require('./slot-9f5a87b6.js');
+const activeElement = require('./active-element-2f9bf0aa.js');
+
+const datalistCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";
+
+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;
+let DataList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.nanoSelect = index.createEvent(this, "nanoSelect", 7);
+    this.nanoDeselect = index.createEvent(this, "nanoDeselect", 7);
+    this.nanoOptionsUpdated = index.createEvent(this, "nanoOptionsUpdated", 7);
+    // Private State
+    this.isNanoInput = false;
+    this.typeToSelect = '';
+    this.listId = `nano-datalist-${listIds++}`;
+    this.isFiltered = false;
+    this.shouldFocus = 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);
+      index$1.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.shouldFocus) {
+        this.shouldFocus = false;
+        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();
+      if (['ArrowDown', 'ArrowUp'].includes(e.key))
+        this.shouldFocus = true;
+    };
+    // 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',
+        'PageUp',
+        'PageDown',
+        'Home',
+        'End',
+        ' ',
+      ];
+      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 = throttle.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() {
+    index.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) {
+      {
+        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;
+      }
+      // add imperative `options`
+      index.writeTask(() => {
+        var _a;
+        this.allOptEles = this.options.flatMap((option, i) => {
+          if (option.value || option.label) {
+            const opt = Object.assign(document.createElement('nano-option'), {
+              label: option.label,
+              value: option.value,
+              ariaPosinset: i,
+              ariaSetsize: this.options.length,
+              selected: option.selected,
+              id: this.listId + '-option-' + i,
+              textContent: option.label ? option.label : option.value,
+              slot: 'internal-opts',
+            });
+            this.host.append(opt);
+            return opt;
+          }
+        });
+        if (((_a = this.connectedInput) === null || _a === void 0 ? void 0 : _a.value.length) && this.type !== 'select') {
+          this.inputChange();
+        }
+        else
+          this.actvOptEles = [...this.allOptEles];
+      });
+    }
+    // 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;
+      index.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);
+      index.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 = [];
+    index.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() {
+    index$1.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() {
+    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);
+  }
+  render() {
+    return (index.h(index.Host, { role: "listbox", "aria-owns": this.optionIds.join(' '), "aria-label": "Select options from the list below" }, index.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) }), index.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) }, index.h("slot", { name: "list-top" }), !this.options.length && index.h("slot", null), !!this.options.length && index.h("slot", { name: "internal-opts" }), index.h("slot", { name: "list-bottom" })), index.h("nano-menu", { type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+        dlist__menu: true,
+        'dlist__menu--open': this.dropwdownOpen,
+      } }, index.h("slot", { name: "no-result" })), !!this.actvOptEles && (index.h("div", { "aria-live": "polite", role: "status", class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["openWatcher"],
+    "input": ["watchInputChange"],
+    "options": ["manageSlotChangeListener"],
+    "type": ["watchTypeChange"],
+    "connectedInput": ["watchTypeChange", "manageInputEvents"],
+    "selected": ["watchActvOptChange"],
+    "actvOptEles": ["watchActvOptChange", "manageCanOpen", "fireActiveOptsEvent"],
+    "hasNoResult": ["manageCanOpen"],
+    "shouldOpen": ["manageDropdownDisplay"],
+    "canOpen": ["manageDropdownDisplay"]
+  }; }
+};
+DataList.style = datalistCss;
+
+const menuCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);-ms-scroll-chaining:none;overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}";
+
+const CANSHADOW = !!document.head.attachShadow;
+let Menu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.nanoFocus = index.createEvent(this, "nanoFocus", 7);
+    this.nanoBlur = index.createEvent(this, "nanoBlur", 7);
+    this.nanoSelect = index.createEvent(this, "nanoSelect", 7);
+    this.ignoreMouseEvents = false;
+    this.typeToSelect = '';
+    this._hasFocus = false;
+    /** changes the role of the underlying control - sometimes required for semantics */
+    this.type = 'menu';
+    this.handleFocus = () => {
+      this.setActiveFocusItem(this.selectedItem || this.getItems[0]);
+      this._hasFocus = true;
+      this.nanoFocus.emit();
+    };
+    this.handleClick = (event) => {
+      const target = event.target;
+      const item = target.closest('nano-nav-item');
+      if (item && !item.disabled) {
+        this.nanoSelect.emit(item);
+      }
+    };
+    this.handleKeyDown = (event) => {
+      // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the
+      // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives
+      // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.
+      clearTimeout(this.ignoreMouseTimeout);
+      this.ignoreMouseTimeout = setTimeout(() => (this.ignoreMouseEvents = false), 500);
+      this.ignoreMouseEvents = true;
+      // Make a selection when pressing enter
+      switch (event.key) {
+        case ' ':
+          if (this.activeItem)
+            this.activeItem.click();
+          break;
+        case 'ArrowDown':
+        case 'ArrowUp':
+        case 'PageDown':
+        case 'PageUp':
+        case 'Home':
+        case 'End':
+          const items = this.getItems;
+          const selectedItem = this.activeItem;
+          let index = items.indexOf(selectedItem);
+          if (items.length) {
+            event.preventDefault();
+            if (event.key === 'ArrowDown') {
+              index++;
+            }
+            else if (event.key === 'ArrowUp') {
+              index--;
+            }
+            else if (event.key === 'Home' || event.key === 'PageUp') {
+              index = 0;
+            }
+            else if (event.key === 'End' || event.key === 'PageDown') {
+              index = items.length - 1;
+            }
+            if (index < 0)
+              index = items.length - 1;
+            if (index > items.length - 1)
+              index = 0;
+            this.setActiveFocusItem(items[index]);
+            if (items[index])
+              items[index].scrollIntoView({ block: 'nearest' });
+            return;
+          }
+          break;
+      }
+      // Handle type-to-search behavior when non-control characters are entered
+      if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {
+        clearTimeout(this.typeToSelectTimeout);
+        this.typeToSelectTimeout = setTimeout(() => (this.typeToSelect = ''), 750);
+        this.typeToSelect += event.key;
+        const items = this.getItems;
+        for (const item of items) {
+          const slot$1 = item.shadowRoot.querySelector('slot:not([name])');
+          const label = slot.getTextContent(slot$1).toLowerCase().trim();
+          if (label.substring(0, this.typeToSelect.length) === this.typeToSelect) {
+            this.setActiveFocusItem(item);
+            break;
+          }
+        }
+      }
+    };
+    this.handleMouseOver = (event) => {
+      const target = event.target;
+      const item = target.closest('nano-nav-item') || target.closest('nano-option');
+      if (item && !this.ignoreMouseEvents) {
+        this.setActiveFocusItem(item);
+      }
+    };
+  }
+  // Public API
+  /** get the focus state of the menu @readonly */
+  get hasFocus() {
+    return this._hasFocus;
+  }
+  // Public Methods
+  /** Sets focus on the menu. */
+  async setFocus() {
+    var _a;
+    if ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.focus)
+      this.menu.focus({ preventScroll: true });
+  }
+  /** Removes focus from the menu. */
+  async removeFocus() {
+    var _a;
+    if ((_a = this.menu) === null || _a === void 0 ? void 0 : _a.blur)
+      this.menu.blur();
+  }
+  /** Sets the current active item */
+  async showActiveElement() {
+    if (this.selectedItem)
+      this.selectedItem.scrollIntoView({ block: 'nearest' });
+  }
+  /** Removes any active item's state */
+  async resetActiveItem() {
+    this.getItems
+      .filter((i) => i.tagName.toLowerCase() === 'nano-option')
+      .map((i) => i.setAttribute('tabindex', '-1'));
+  }
+  // Private methods
+  get getItems() {
+    let items;
+    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');
+    if (opened.length) {
+      const ctx = opened[opened.length - 1];
+      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));
+    }
+    else {
+      items = dom.getDirectChildren(this.el, 'nano-nav-item, nano-option', 'slot');
+    }
+    return items.filter((el) => !el.disabled && !el.hidden);
+  }
+  get activeItem() {
+    const activeElement$1 = activeElement.getActiveElement();
+    return this.getItems.find((i) => i.getAttribute('tabindex') === '0' ||
+      i === activeElement$1 ||
+      i.classList.contains('has-focus'));
+  }
+  get selectedItem() {
+    const activeElement$1 = activeElement.getActiveElement();
+    return this.getItems.find((i) => i.selected || i === activeElement$1);
+  }
+  async setActiveFocusItem(item, focus = true) {
+    const items = this.getItems;
+    let activeItem = !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;
+    items
+      .filter((i) => i.tagName.toLowerCase() === 'nano-option')
+      .map((i) => i.setAttribute('tabindex', i === activeItem ? '0' : '-1'));
+    if (!focus)
+      return;
+    if (activeItem) {
+      activeItem.setFocus
+        ? activeItem.setFocus()
+        : activeItem.focus();
+    }
+    else
+      this.menu.focus();
+  }
+  // Event Handlers
+  handleBlur(e) {
+    if (!this.hasFocus)
+      return;
+    const kev = e;
+    let found;
+    if (kev.key) {
+      if (kev.key !== 'Tab')
+        return;
+      found =
+        activeElement.getActiveElement() &&
+          activeElement.getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;
+    }
+    else
+      found = !!e.composedPath().find((el) => el === this.el);
+    if (!found) {
+      this.resetActiveItem();
+      this._hasFocus = false;
+      this.nanoBlur.emit();
+    }
+  }
+  // Component Lifecycle
+  render() {
+    return (index.h(index.Host, { class: {
+        legacy: !CANSHADOW,
+      } }, index.h("div", { onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, role: this.type, ref: (el) => (this.menu = el), part: "base", class: {
+        menu: true,
+        ['menu--' + this.type]: true,
+        'menu--has-focus': this.hasFocus,
+      }, tabIndex: -1 }, index.h("slot", null))));
+  }
+  get el() { return index.getElement(this); }
+};
+Menu.style = menuCss;
+
+const optionCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;background:var(--bg);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-right:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__start ::slotted(:last-child){margin-right:unset;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}.option__end{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-left:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__end ::slotted(:first-child){margin-left:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;}}.option__check{visibility:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;left:0.6em;top:calc(50% - 0.6em);-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";
+
+let optIds = 0;
+let Option = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.nanoSelect = index.createEvent(this, "nanoSelect", 7);
+    this.optId = `nano-option-${optIds++}`;
+    this.hasFocus = false;
+    // Public API
+    /**
+     * Value of the option
+     */
+    this.value = '';
+    /**
+     * Label of the option
+     */
+    this.label = '';
+    /**
+     * Whether this option is selected
+     */
+    this.selected = false;
+    /**
+     * Whether this option should be disabled
+     */
+    this.disabled = false;
+    /** You can add extra meta for this option. When displayed in a list, users
+     * search / filter via extra related terms. Another usecase is 'endonyms'
+     */
+    this.filterMeta = '';
+    this.handleClick = throttle.debounce(this.handleClick.bind(this), 5);
+  }
+  valueChanged() {
+    if (!this.value || !this.value.length)
+      this.value = this.labelContent;
+  }
+  labelChanged() {
+    if (!this.label || !this.label.length)
+      this.label = this.labelContent.length ? this.labelContent : this.value;
+  }
+  // Event handlers
+  // stop scrolling on select
+  handleKeyDown(e) {
+    if (e.key !== ' ' && e.key !== 'Enter')
+      return;
+    e.preventDefault();
+    this.nanoSelect.emit(this.host);
+  }
+  handleClick() {
+    if (this.disabled)
+      return;
+    this.nanoSelect.emit(this.host);
+  }
+  // Private logic
+  get labelContent() {
+    return dom.getDirectChildren(this.host, '*:not([slot])', false)
+      .map((el) => el.textContent)
+      .join(' ')
+      .trim();
+  }
+  // Component lifecycle
+  componentWillLoad() {
+    this.valueChanged();
+    this.labelChanged();
+  }
+  render() {
+    return (index.h(index.Host, { role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { onMouseDown: this.handleClick, id: this.optId, class: {
+        option: true,
+        'option--selected': this.selected,
+        'option--disabled': this.disabled,
+        'option--novalue': !this.value,
+      } }, index.h("div", { part: "check-icon", class: "option__check" }, index.h("slot", { name: "check-icon" }, index.h("nano-icon", { name: "light/check", "aria-hidden": "true" }))), index.h("div", { part: "start", class: "option__start" }, index.h("slot", { name: "start" })), index.h("div", { part: "label", class: "option__label" }, index.h("slot", null, this.label || this.value)), index.h("div", { part: "end", class: "option__end" }, index.h("slot", { name: "end" })))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"],
+    "label": ["labelChanged"]
+  }; }
+};
+Option.style = optionCss;
+
+exports.nano_datalist = DataList;
+exports.nano_menu = Menu;
+exports.nano_option = Option;
+
+//# sourceMappingURL=nano-datalist_3.cjs.entry.js.map