/*!
 * Built with Stencil
 * By PostNord.
 */
import { h, Host } from "@stencil/core";
import { uuidv4 } from "../../../globals/helpers";
import { check } from "pn-design-assets/pn-assets/icons.js";
/**
 * The `pn-choice-chip` is built with a native `input[type="checkbox|radio"]` in the background.
 * This means you can use native events to listen to the changes.
 *
 * @nativeChange Use the `change` event to listen when the choice chip state is being toggled. Works for both checkbox/radio variant.
 */
export class PnChoiceChip {
    hostElement;
    moving = false;
    /** The choice chip label */
    label;
    /** This will be emitted on change and input */
    value;
    /** The name of the checkbox group */
    name;
    /** Precheck the choice chip */
    checked = false;
    /** Make the choice chip a radio */
    radio = false;
    /** A unique HTML id */
    choiceid = `pn-choice-chip-${uuidv4()}`;
    /** Include an icon */
    icon;
    /** Set the choice chip as required. @category State */
    required = false;
    /** Disable the choice chip. @category State */
    disabled = false;
    /** Set the size to small. @category Size */
    small = false;
    /** Set the size to large. @category Size */
    large = false;
    render() {
        return (h(Host, { key: '8d5686163aba07794c4700e91a9d378200aa2bf9' }, h("div", { key: '233605ae9b531853d9f941f99cc0cf6fcce21bba', class: "pn-choice-chip" }, h("input", { key: 'aacdd59b76f20029234722e49ab5b2aa27198206', type: this.radio ? 'radio' : 'checkbox', id: this.choiceid, value: this.value, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled }), h("div", { key: '69a287ffabea602b28360dc5a15d979dcb3d6526', class: "pn-choice-chip-container", "data-icon": !!this.icon, "data-small": this.small, "data-large": this.large }, h("div", { key: 'c2d89b6817b623264e903aed26947d8a422a1ee2', class: "pn-choice-chip-icon" }, h("pn-icon", { key: 'd405b85cec9b30f85a5949862dec48cdacc618de', color: "blue700", class: "pn-choice-chip-icon-check", icon: check }), !!this.icon && h("pn-icon", { key: '4a23075f0cfb6c6f3e7fbf49c5de06137c1bc961', color: "blue700", class: "pn-choice-chip-icon-user", icon: this.icon })), h("label", { key: 'af080ab55ce96b7d0bc3e0c168130bd772302d52', class: "pn-choice-chip-label", htmlFor: this.choiceid }, h("span", { key: '2ed2b62f84c1e2c85ace67151bd1997bcc762027' }, this.label), h("slot", { key: '3512fdee318749598e66d096ec56a66e3daa564a' }))))));
    }
    static get is() { return "pn-choice-chip"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-choice-chip.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-choice-chip.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The choice chip label"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "This will be emitted on change and input"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The name of the checkbox group"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "checked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Precheck the choice chip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "checked",
                "defaultValue": "false"
            },
            "radio": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Make the choice chip a radio"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "radio",
                "defaultValue": "false"
            },
            "choiceid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique HTML id"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "choiceid",
                "defaultValue": "`pn-choice-chip-${uuidv4()}`"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Include an icon"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Set the choice chip 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": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Disable the choice chip."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "small": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Size"
                        }],
                    "text": "Set the size to small."
                },
                "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": "Size"
                        }],
                    "text": "Set the size to large."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "large",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "moving": {}
        };
    }
    static get elementRef() { return "hostElement"; }
}
