/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { g as getElement, r as registerInstance, c as createEvent, d as writeTask, a as Host } from './index-BM3Om9WE.js';
import { t as transformTag, h } from './renderer-DpNDfhNy.js';
import { g as getActiveElement } from './active-element-CKJIkX0R.js';
import { d as debounce } from './throttle-C93FMm2Z.js';
import { g as getDirectChildren } from './dom-dlicJTEJ.js';

const datalistCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--padding-top:8px;--padding-bottom:8px;--padding-start:var(--nano-spacing-l);--padding-end:var(--nano-spacing-l);--font-size:var(--nano-font-size-2xs);--color:var(--nano-color-neutral-1000);color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option,[slot=no-result],[slot=list-top],[slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto;--padding:var(--nano-spacing-sm) 0;display:inline}.dlist__status{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit;--padding:var(--nano-spacing-sm) var(--nano-spacing-l)}";

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;
const DataList = class {
    // Private State
    isNanoInput = false;
    typeToSelect = '';
    typeToSelectTimeout;
    nanoDropdown;
    listBox;
    mo;
    listId = `nano-datalist-${listIds++}`;
    isFiltered = false;
    shouldFocus = false;
    // 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) {
        // 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 (this.connectedInput?.value)
            return;
        opts.forEach((opt) => {
            if (opt.selected && !this.selected.includes(opt.value)) {
                this.changeInputValue(opt);
            }
        });
    }
    _allOptEles = [];
    get host() { return getElement(this); }
    // active option eles that are not hidden.
    actvOptEles = [];
    connectedInput;
    inputLabel;
    hasNoResult;
    shouldOpen;
    canOpen = true;
    optionIds = [];
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.nanoSelect = createEvent(this, "nanoSelect", 7);
        this.nanoDeselect = createEvent(this, "nanoDeselect", 7);
        this.nanoOptionsUpdated = createEvent(this, "nanoOptionsUpdated", 7);
        this.inputChange = debounce(this.inputChange.bind(this), 50);
    }
    // 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. */
    selected = [];
    /** nano-dropdown config options you can pass to the nested dropdown component */
    get dropDownConfig() {
        return this._dropDownConfig;
    }
    set dropDownConfig(ddc) {
        this._dropDownConfig = { ...this._dropDownConfig, ...ddc };
    }
    _dropDownConfig = {
        skidding: -1,
    };
    /** Provide an option list.
     * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */
    options = [];
    /** A selector to a HTMLInputElement */
    input;
    /** Tweaks the datalist behaviour and linked control semantics and behaviour.
     * e.g. 'select' will make the linked input control `readonly`.
     */
    type = 'input';
    /** return all the active options currently within the datalist. Can be useful for validation */
    get activeOptions() {
        return this.allOptEles;
    }
    /** Force datalist open */
    open = false;
    openWatcher() {
        writeTask(() => {
            if (this.open && this.nanoDropdown.tetherTo) {
                const { height, top } = this.nanoDropdown.tetherTo.getBoundingClientRect();
                this.nanoDropdown.style.setProperty('--max-height', `max(${window.innerHeight - (height + top + 40)}px, 48vw)`);
            }
            this.nanoDropdown.open = this.open;
            if (this.connectedInput) {
                this.connectedInput.setAttribute('aria-expanded', this.open.toString());
            }
        });
    }
    /** Use this option to disable to default filtering. This is useful if filtering happens
     * externally via another method (e.g. via ajax)
     */
    disableFilter = false;
    /** Activate / deactivate the datalist control */
    disabled = false;
    // State change watchers
    async watchInputChange() {
        let nanoInput;
        if ((nanoInput = this.host.closest(transformTag('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 (typeof this.input === 'object') {
            this.connectedInput = this.input;
        }
    }
    handleOptionsChange() {
        if (!this.host)
            return;
        getDirectChildren(this.host, ':not(nano-nav-item):not(nano-option):not([role])', true).forEach((el) => el.setAttribute('role', 'none'));
        // 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 (this.options?.length) {
            if (this.mo) {
                this.mo.disconnect();
                this.mo = undefined;
            }
            const previousOptions = this.host.querySelectorAll(transformTag('nano-option'));
            // add imperative `options`
            writeTask(() => {
                // clear all previous
                if (previousOptions?.length)
                    previousOptions.forEach((internalOpt) => internalOpt.remove());
                this.allOptEles = this.options.flatMap((option, i) => {
                    if (option.value || option.label) {
                        const opt = Object.assign(document.createElement(transformTag('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 (this.connectedInput?.value.length && this.type !== 'select') {
                    this.inputChange();
                }
                else {
                    this.actvOptEles = [...this.allOptEles];
                }
            });
        }
        // forceUpdate(this.host);
    }
    watchTypeChange() {
        if (!this.connectedInput || this.disabled)
            return;
        let dwConfig = { closeOnSelect: false };
        let autocompleteType = 'both';
        let readonly = false;
        switch (this.type) {
            case 'input':
                dwConfig = { closeOnSelect: true };
                break;
            case 'select':
                autocompleteType = 'list';
                readonly = true;
                dwConfig = { closeOnSelect: true };
                break;
        }
        if (!this.isNanoInput) {
            dwConfig.tetherTo = this.connectedInput;
        }
        this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };
        this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);
        this.connectedInput.readOnly = readonly;
    }
    manageInputEvents(newInput, oldInput) {
        if (oldInput) {
            const nanoInput = oldInput.closest(transformTag('nano-input'));
            if (nanoInput) {
                nanoInput.removeEventListener('nanoChange', this.inputChange);
            }
            this.removeEventListeners(oldInput);
            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(transformTag('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 = newInput?.labels?.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() {
        let c = 0;
        const val = this.connectedInput?.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;
        this.openWatcher();
    }
    fireActiveOptsEvent() {
        this.nanoOptionsUpdated.emit(this.actvOptEles);
    }
    // Events
    /** Fired when an item is selected. */
    nanoSelect;
    /** Fired when a currently selected item is reselected. */
    nanoDeselect;
    /** Fired when active options change */
    nanoOptionsUpdated;
    // Private logic
    isSelected(opt, val) {
        if (!opt)
            return;
        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) {
        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');
            this.connectedInput?.dispatchEvent(event);
        }
    }
    // a new option has been picked
    optSelected = (e) => {
        e.stopPropagation();
        this.changeInputValue(e.detail);
        requestAnimationFrame(() => this.inputChange());
        if (this.type !== 'selectMulti')
            this.shouldOpen = false;
    };
    // 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
    removeEventListeners(oldInput) {
        const nanoInput = oldInput.closest(transformTag('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);
    }
    processSlottedContent() {
        requestAnimationFrame(() => {
            this.allOptEles = Array.from(this.host.querySelectorAll(transformTag('nano-option')));
            this.hasNoResult = !!this.host.querySelector('[slot="no-result"]');
            if (this.connectedInput?.value.length && this.type !== 'select') {
                this.inputChange();
            }
            else
                this.actvOptEles = this.allOptEles;
        });
    }
    // sets focus immediately on open when 'select' - mirroring native behaviour
    handleShow = async () => {
        if (this.shouldFocus) {
            this.shouldFocus = false;
            this.listBox.setFocus();
        }
        else if (this.type === 'select')
            this.listBox.showActiveElement();
    };
    handleHide = () => {
        this.open = false;
        const activeElement = getActiveElement();
        if (activeElement.closest(this.host.tagName.toLowerCase())) {
            this.connectedInput.select();
        }
    };
    // any changes to the connected input value will filter the list of active options
    inputChange() {
        if (!this.connectedInput)
            return;
        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 !== 'selectMulti') {
                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;
    }
    inputClick = () => {
        if (this.open)
            return;
        this.shouldOpen = true;
        // open dropdown if possible
        this.manageDropdownDisplay();
    };
    inputKeydown = (e) => {
        const ignoreKeys = ['Shift', 'ArrowRight', 'ArrowLeft', 'Escape', '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', 'Enter'].includes(e.key) &&
            (e.key !== ' ' || this.typeToSelectTimeout)) {
            if (e.key === ' ' || /^[a-zA0-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;
        }
        if (this.open && ['ArrowDown', 'ArrowUp'].includes(e.key)) {
            this.listBox.setFocus();
            return;
        }
        this.shouldOpen = true;
        // open dropdown if possible
        this.manageDropdownDisplay();
        if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key)) {
            e.preventDefault();
            this.shouldFocus = true;
        }
    };
    // handles key down on options. Either 'picks'
    // an option or passes event back to input for search / filter
    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();
        }
    };
    // Component lifecycle
    connectedCallback() {
        this.watchInputChange();
    }
    componentDidLoad() {
        this.handleOptionsChange();
        this.openWatcher();
    }
    componentDidRender() {
        setTimeout(() => {
            if (!this.connectedInput && this.host.isConnected)
                console.warn('no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop', this.host);
        }, 500);
    }
    disconnectedCallback() {
        if (this.mo) {
            this.mo.disconnect();
            this.mo = undefined;
        }
        if (this.connectedInput) {
            this.connectedInput = undefined;
        }
    }
    render() {
        return (h(Host, { key: '8acb3be76246d665171db96444cff3a5141e1132', class: "nano-datalist", role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
                ? 'Select options from the list below'
                : undefined }, h("nano-dropdown", { key: '56c051873a20a3dab17a36eec1a2f040f83247fa', part: "dropdown", exportparts: "trigger:dropdown__trigger, panel:dropdown__panel", ...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.handleHide, role: "group" }, h("nano-menu", { key: '7559b648617c8d32f61c670e4dc78c0d60d36dc4', part: "main-menu", ref: (el) => (this.listBox = el), 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 }, h("slot", { key: '02bd8ba511db314637e8991d29234a22967cf27d', name: "list-top" }), h("slot", { key: 'cb0234e0dd103293c1f1292af62575dd766af730' }), h("slot", { key: '0adac42b20ee0338de74217e6e91c00be6b5b6a7', name: "internal-opts" }), h("slot", { key: '906255e4e6fdc87fa8bf6e278ad076f179553925', name: "list-bottom" })), h("nano-menu", { key: '9aa978054227c9bb928c06ce93303ceda48cbf29', part: "no-result-menu", type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                dlist__menu: true,
                'dlist__menu--open': this.dropwdownOpen,
            } }, h("slot", { key: '4e2ce9dcb39d0c823ed27f13dc8c9a8873f0ca9f', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'c6bf0c88d7b1fcd24b2882c7db851ffca2e77ba3', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
    }
    static get watchers() { return {
        "open": ["openWatcher"],
        "input": ["watchInputChange"],
        "options": ["handleOptionsChange"],
        "type": ["watchTypeChange"],
        "connectedInput": ["watchTypeChange", "manageInputEvents"],
        "disabled": ["watchTypeChange"],
        "selected": ["watchActvOptChange"],
        "actvOptEles": ["watchActvOptChange", "manageCanOpen", "fireActiveOptsEvent"],
        "hasNoResult": ["manageCanOpen"],
        "shouldOpen": ["manageDropdownDisplay"],
        "canOpen": ["manageDropdownDisplay"]
    }; }
};
DataList.style = datalistCss;

const optionCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--bg:none;--bg-selected:none;--bg-focus:var(--nano-color-blue-cerulean-1000);--bg-disabled:none;--color:var(--nano-color-base-1000);--color-selected:var(--nano-color-base-1000);--color-focus:var(--nano-color-base-0);--color-disabled:var(--nano-color-neutral-400);--opt-icon-size:1em;--padding-start:var(--nano-spacing-sm);--padding-end:var(--nano-spacing-md);--padding-bottom:6px;--padding-top:6px;display:block;color:var(--color);overflow:hidden;font-size:var(--nano-font-size-xs)}:host(:focus){outline:none}.option{color:inherit;text-decoration:none;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}: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{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size);margin-inline-end:var(--padding-end)}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:var(--padding-start)}.option__check{visibility:hidden;display:flex;margin-inline-end:var(--padding-start);align-items:center;font-size:var(--nano-font-size-2xs);inline-size:var(--nano-font-size-2xs)}.option--selected:not(.option--novalue) .option__check{visibility:visible}";

let optIds = 0;
const Option = class {
    optId = `nano-option-${optIds++}`;
    get host() { return getElement(this); }
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.nanoSelect = createEvent(this, "nanoSelect", 7);
        this.handleClick = debounce(this.handleClick.bind(this), 5);
    }
    // Public API
    /**
     * Value of the option
     */
    value = '';
    valueChanged() {
        if ((!this.value || !this.value.length) && !this.label)
            this.value = this.labelContent;
    }
    /**
     * Label of the option
     */
    label = '';
    labelChanged() {
        if (!this.label || !this.label.length)
            this.label = this.labelContent.length ? this.labelContent : this.value;
    }
    /**
     * Whether this option is selected
     */
    selected = false;
    /**
     * Whether this option should be disabled
     */
    disabled = false;
    /** You can add extra meta for this option. When displayed in a list, users
     * search / filter via extra related terms.
     */
    filterMeta = '';
    /** Setting an href will render an `<a>` element */
    href;
    /** Fired when an option is selected */
    nanoSelect;
    // Event handlers
    handleKeyDown(e) {
        if (this.disabled || this.href)
            return;
        if (e.key === 'Enter') {
            this.nanoSelect.emit(this.host);
        }
        if (e.key === ' ') {
            // stop space from scrolling the page
            e.preventDefault();
        }
    }
    handleClick() {
        if (this.disabled || this.href)
            return;
        this.nanoSelect.emit(this.host);
    }
    // Private logic
    get labelContent() {
        return getDirectChildren(this.host, '*:not([slot])', false)
            .map((el) => el.textContent)
            .join(' ')
            .trim();
    }
    // Component lifecycle
    componentWillLoad() {
        this.valueChanged();
        this.labelChanged();
    }
    render() {
        const WrapTag = this.href ? 'a' : 'div';
        return (h(Host, { key: '193c0fa2c765f3bed98dd18261c615c3171c97d4', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h(WrapTag, { key: '0a6c64fbec219970a4bd7d28e177176cf36b9d27', href: this.href || undefined, onMouseDown: this.handleClick, id: this.optId, class: {
                option: true,
                'option--selected': this.selected,
                'option--disabled': this.disabled,
                'option--novalue': !this.value,
            } }, h("div", { key: '6e6aceb3acd0b854562b0de41b905b013f5ea71c', part: "check-icon", class: "option__check" }, h("slot", { key: '82770c1ddc501f2d8dde42c14827fd596fd30172', name: "check-icon" }, h("nano-icon", { key: 'a25365aa49a3694fa1c956f5645e48fe904c4e19', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '9f3c3d2ed11af90a0bfa658849fbc8b12545c7c6', part: "start", class: "option__start" }, h("slot", { key: '194a2647aeaeeac8d8268e1386dba7feabb16d40', name: "start" })), h("div", { key: '4eb3a838d9510432b5614e0de0e958b45d132cc5', part: "label", class: "option__label" }, h("slot", { key: '6db178c30cd08c9a15ed6c5996d263da86d28285' }, this.label || this.value)), h("div", { key: 'aac32437be089e438b419545d2659778de1119f2', part: "end", class: "option__end" }, h("slot", { key: 'c108eff1c579522f4ead3e2fc157930bc329ceb2', name: "end" })))));
    }
    static get watchers() { return {
        "value": ["valueChanged"],
        "label": ["labelChanged"]
    }; }
};
Option.style = optionCss;

const tagCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}";

const NanoTag = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.nanoClose = createEvent(this, "nanoClose", 7);
    }
    /**
     * Whether the tag is closable or not.
     * If true, a close button will be displayed.
     */
    closable = false;
    /**
     * The size of the tag.
     */
    size = 'regular';
    /**
     * If true, the tag will have a different background color.
     */
    selected = false;
    get el() { return getElement(this); }
    /**
     * Fires when close button is clicked
     */
    nanoClose;
    onKeyDown = (e) => {
        switch (e.key) {
            case 'Enter':
            case ' ':
                e.preventDefault();
                this.close();
                break;
        }
    };
    handleClick = (_e) => {
        this.close();
    };
    close() {
        this.nanoClose.emit();
    }
    containsAnchor = () => !!this.el.querySelector('a');
    render() {
        return this.closable && !this.containsAnchor() ? ([
            h("slot", null),
            h("nano-icon-button", { label: "Close", "icon-name": "light/xmark-large", onKeyDown: this.onKeyDown, onClick: this.handleClick }),
        ]) : (h("slot", null));
    }
};
NanoTag.style = tagCss;

export { DataList as nano_datalist, Option as nano_option, NanoTag as nano_tag };
