/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
import { h } from './renderer.js';
import { g as getDirectChildren } from './dom.js';
import { d as debounce } from './throttle.js';
import { d as defineCustomElement$1 } from './icon.js';

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 = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement {
    optId = `nano-option-${optIds++}`;
    get host() { return this; }
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        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"]
    }; }
    static get style() { return optionCss; }
}, [257, "nano-option", {
        "value": [1537],
        "label": [1537],
        "selected": [516],
        "disabled": [516],
        "filterMeta": [1, "filter-meta"],
        "href": [1]
    }, [[0, "keydown", "handleKeyDown"]], {
        "value": ["valueChanged"],
        "label": ["labelChanged"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-option", "nano-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-option":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Option);
            }
            break;
        case "nano-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { Option as O, defineCustomElement as d };
