/*!
 * Built with Stencil
 * By PostNord.
 */
import { h, Host } from "@stencil/core";
import { uuidv4 } from "../../../index";
/**
 * The `pn-toggle-switch` is built with a native `input[type="checkbox"]` in the background.
 * This means you can use native events to listen to the changes.
 *
 * @nativeChange Use the `change` event to listen when the switch state is being toggled.
 *
 * @slot helpertext - Set the helpertext with a slot instead of prop. Use a `span` element as wrapper.
 * Only use if you need HTML content, such as a link. {@since v7.12.0}
 */
export class PnToggleSwitch {
    id = `pn-toggle-${uuidv4()}`;
    idHelper = `${this.id}-helper`;
    hostElement;
    /** A label for the toggle switch. */
    label;
    /** Provide a helpertext for the toggle switch. */
    helpertext;
    /** Precheck the toggle. */
    checked = false;
    /** Set a unique HTML id. */
    toggleid = this.id;
    /** HTML toggle name. @category HTML */
    name = null;
    /** HTML toggle value. @category HTML */
    value = null;
    /** Make the toggle smaller. @category Visual */
    small = false;
    /** Make the toggle larger. @category Visual */
    large = false;
    /** Disable the toggle. @category State */
    disabled = false;
    /** Set the loading state. @category State */
    loading = false;
    handleHelperId() {
        if (this.id !== this.toggleid)
            this.idHelper = `${this.toggleid}-helper`;
    }
    componentWillLoad() {
        this.handleHelperId();
    }
    hasHelpertextProp() {
        return !!this.helpertext;
    }
    hasHelpertextSlot() {
        return !!this.hostElement.querySelector('[slot="helpertext"]');
    }
    showHelpertext() {
        return this.hasHelpertextProp() || this.hasHelpertextSlot();
    }
    describedBy() {
        return this.showHelpertext() ? this.idHelper : null;
    }
    render() {
        return (h(Host, { key: 'b88bbc2385be79dd584ecee5e53dc89832de49c3' }, h("div", { key: '4a413f2b2acf8551dc2852ba0d3a45f4cbf17a4d', class: "pn-toggle" }, this.label && (h("div", { key: '944a36f2018335a283092c909af2f37846850eb8', class: "pn-toggle-content" }, h("label", { key: '2536eaf65117b1c70d1ec31f17faa41f2a6fced4', htmlFor: this.toggleid, class: "pn-toggle-label" }, h("span", { key: 'eae8a38d31f6bc05faa9d56c08517f9302be9a3e' }, this.label)), h("p", { key: '6173ba384459c406eb98fe4318e080b6cd36031a', id: this.idHelper, class: "pn-toggle-helper", hidden: !this.showHelpertext() }, this.hasHelpertextProp() && h("span", { key: 'd4a52d7786e7a63ca3f201c3ad7cb8793e377c12' }, this.helpertext), h("slot", { key: '06406382d523b70b8acb094a82794652a4481528', name: "helpertext" })))), h("div", { key: '4676dd88652c903f94d3f887e97841e00bbe09e2', class: "pn-toggle-button", "data-small": this.small, "data-large": this.large, "data-loading": this.loading }, h("input", { key: 'd2656b2f8ff8e74bd4d4c2f1c4791e984ec3e50b', id: this.toggleid, class: "pn-toggle-element", type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-describedby": this.describedBy() }), h("div", { key: '93caefd228460120aae22ba48e6c93d6df676fcf', class: "pn-toggle-bg" }), h("div", { key: '03299104835602d126960ad67ab51f94d27cf3c5', class: "pn-toggle-circle" }, h("svg", { key: '5f61f589797b3ca97a66cd42deab3065543679d2', class: "pn-toggle-check", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: 'd974e5cc198d19cf17e42e0b35097f87d11404a0', points: "4,12 9,17 20,6", "stroke-width": "3" })), h("pn-spinner", { key: '6f5c5fb05e0c9fd95b16d45833f50167af22e358', size: 1.125 }))))));
    }
    static get is() { return "pn-toggle-switch"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-toggle-switch.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-toggle-switch.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A label for the toggle switch."
                },
                "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": "Provide a helpertext for the toggle switch."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helpertext"
            },
            "checked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Precheck the toggle."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "checked",
                "defaultValue": "false"
            },
            "toggleid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set a unique HTML id."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "toggleid",
                "defaultValue": "this.id"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML"
                        }],
                    "text": "HTML toggle name."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name",
                "defaultValue": "null"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "HTML"
                        }],
                    "text": "HTML toggle value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value",
                "defaultValue": "null"
            },
            "small": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Visual"
                        }],
                    "text": "Make the toggle smaller."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "small",
                "defaultValue": "false"
            },
            "large": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Visual"
                        }],
                    "text": "Make the toggle larger."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "large",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Disable the toggle."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Set the loading state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "loading",
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "toggleid",
                "methodName": "handleHelperId"
            }];
    }
}
