/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Host, } from "@stencil/core";
import { h } from "../../utils/renderer";
import { getDirectChildren } from "../../utils/dom";
import { debounce } from "../../utils/throttle";
let optIds = 0;
/**
 * Selectable items for use within [select](/components/select) and [datalist](/components/datalist).
 *
 * @version 2.0.0
 * @status stable
 *
 * @slot - main label. Defaults to `label` or `value` prop
 * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check
 * @slot start - suitable for an icon or content displayed at the start of the main label
 * @slot end - suitable for an icon or content displayed at the end of the main label
 */
export class Option {
    optId = `nano-option-${optIds++}`;
    host;
    constructor() {
        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 is() { return "nano-option"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["option.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["option.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "attribute": "value",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Value of the option"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "''"
            },
            "label": {
                "type": "string",
                "attribute": "label",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label of the option"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "''"
            },
            "selected": {
                "type": "boolean",
                "attribute": "selected",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether this option is selected"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether this option should be disabled"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "filterMeta": {
                "type": "string",
                "attribute": "filter-meta",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "You can add extra meta for this option. When displayed in a list, users\nsearch / filter via extra related terms."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "href": {
                "type": "string",
                "attribute": "href",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Setting an href will render an `<a>` element"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "nanoSelect",
                "name": "nanoSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when an option is selected"
                },
                "complexType": {
                    "original": "HTMLNanoOptionElement",
                    "resolved": "HTMLNanoOptionElement",
                    "references": {
                        "HTMLNanoOptionElement": {
                            "location": "global",
                            "id": "global::HTMLNanoOptionElement"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "valueChanged"
            }, {
                "propName": "label",
                "methodName": "labelChanged"
            }];
    }
    static get listeners() {
        return [{
                "name": "keydown",
                "method": "handleKeyDown",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
