/*!
 * Built with Stencil
 * By PostNord.
 */
import { h, Host, forceUpdate } from "@stencil/core";
import { alert_exclamation_circle, chevron_down } from "pn-design-assets/pn-assets/icons.js";
import { uuidv4 } from "../../../index";
/**
 * The `pn-select` uses a native `select` element under the hood.
 * Use the slot to include `option` elements.
 *
 * Just like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option.
 *
 * @slot - This is the default slot, where the `option` elements go.
 *
 * @nativeChange Use the `change` event to listen to changes on the select element.
 */
export class PnSelect {
    id = `pn-select-${uuidv4()}`;
    idHelpertext = `${this.id}-text`;
    select;
    mo;
    hostElement;
    /** Label placed above the select. */
    label;
    /** Display a helper text underneath the select. */
    helpertext;
    /** Select HTML id */
    selectId = this.id;
    /** Display an icon to the left of the select input. */
    icon;
    /** Use the compact label variant. @since v7.21.0 */
    compact = false;
    /** HTML select name. @category HTML */
    name;
    /** HTML form name. @category HTML */
    form;
    /** HTML autocomplete. @category HTML */
    autocomplete;
    /**
     * Set the select as required.
     * @category Validation
     */
    required = false;
    /**
     * Disable the select.
     * @category Validation
     */
    disabled = false;
    /**
     * Trigger the invalid state.
     * @category Validation
     */
    invalid = false;
    /**
     * Display an error message and trigger the invalid state.
     * @category Validation
     */
    error;
    componentDidLoad() {
        if (this.mo)
            this.mo.disconnect();
        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
        this.mo.observe(this.hostElement, { childList: true, subtree: true });
    }
    hasError() {
        return this.invalid || !!this.error;
    }
    hasMessage() {
        return !!this.helpertext || !!this.error;
    }
    renderLabel() {
        if (!this.label)
            return null;
        return (h("label", { htmlFor: this.selectId, class: "pn-select-label", "data-compact": this.compact, "data-icon": !!this.icon }, h("span", null, this.label)));
    }
    render() {
        return (h(Host, { key: '59c8dba79bf97e55cdf0bb63242bab619729e182' }, h("div", { key: '08ee599ef117480e98506e6594bb798931dade58', class: "pn-select", "data-error": this.hasError() }, !this.compact && this.renderLabel(), h("div", { key: '4416853996ab6849ef128f3abd7d53861e3d6bbe', class: "pn-select-input" }, this.icon && h("pn-icon", { key: '8af79d8f23f6e7b9853130ca77d2ac00f264afe7', class: "pn-select-icon", icon: this.icon, "data-custom": true, "aria-hidden": "true" }), this.hasError() && (h("pn-icon", { key: 'ad674903cc8cefb0864b425a4f6bd6540b5164f3', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("select", { key: 'fc84d7571dc544030770dd8ea88c87e3a1d58bc5', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', "data-compact": this.compact, ref: el => (this.select = el) }, h("slot", { key: '1cca39bd8954649b1a558876d31509c3be0f4763' })), this.compact && this.renderLabel(), h("pn-icon", { key: 'a5efd954143ce705d806a1a7a1b37b09714d1657', class: "pn-select-icon", icon: chevron_down, color: "blue700", "data-default": true, "aria-hidden": "true" })), this.hasMessage() && (h("p", { key: '54e7855163fc3c91cb2bdac99aaa7ed9bfd14fc9', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: '21397e124292c51dfe3113b526626059dc9b513d' }, this.error || this.helpertext))))));
    }
    static get is() { return "pn-select"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-select.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-select.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label placed above the select."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "helpertext": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Display a helper text underneath the select."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helpertext"
            },
            "selectId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Select HTML id"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "select-id",
                "defaultValue": "this.id"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Display an icon to the left of the select input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "compact": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.21.0"
                        }],
                    "text": "Use the compact label variant."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "compact",
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML"
                        }],
                    "text": "HTML select name."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "form": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML"
                        }],
                    "text": "HTML form name."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "form"
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML"
                        }],
                    "text": "HTML autocomplete."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "autocomplete"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Validation"
                        }],
                    "text": "Set the select as required."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Validation"
                        }],
                    "text": "Disable the select."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Validation"
                        }],
                    "text": "Trigger the invalid state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "error": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Validation"
                        }],
                    "text": "Display an error message and trigger the invalid state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error"
            }
        };
    }
    static get elementRef() { return "hostElement"; }
}
