import { h, Host } from "@stencil/core";
import { assignDescription, messageId } from "../../utils/form";
import { PdsLabel } from "../_internal/pds-label/pds-label";
import { danger } from "@pine-ds/icons/icons";
export class PdsCheckbox {
    constructor() {
        this.handleCheckboxChange = (e) => {
            if (this.disabled) {
                return;
            }
            const target = e.target;
            this.checked = target.checked;
            this.pdsCheckboxChange.emit({
                checked: target.checked,
                value: this.value
            });
        };
        this.handleInput = () => {
            this.pdsCheckboxInput.emit({
                checked: this.checked,
                value: this.value
            });
        };
        this.checked = false;
        this.componentId = undefined;
        this.disabled = undefined;
        this.errorMessage = undefined;
        this.helperMessage = undefined;
        this.indeterminate = undefined;
        this.invalid = undefined;
        this.label = undefined;
        this.labelHidden = undefined;
        this.name = undefined;
        this.required = undefined;
        this.value = undefined;
    }
    updateIndeterminate() {
        this.indeterminate = undefined;
    }
    classNames() {
        const classNames = [];
        if (this.invalid) {
            classNames.push('is-invalid');
        }
        if (this.indeterminate) {
            classNames.push('is-indeterminate');
        }
        if (this.disabled) {
            classNames.push('is-disabled');
        }
        return classNames.join('  ');
    }
    render() {
        return (h(Host, { key: '20ec5fff75ed7c8e1fa203377da84533a24b359f', class: this.classNames() }, h("input", { key: '640f30df7addcfb3ec9fc850a32283b5d7e9d096', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h(PdsLabel, { key: '8aa6d71f86bba517fd5b697b7a4c91a2002f29ba', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
            h("div", { key: '3b683e51e76c802e77022e6544b05305e8fbaa2f', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
            h("div", { key: '8da70a6935cf8c419d2f1ffa36ae21a843823b11', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9fa9b8662cce3319ccff5bc8bce90b364f310d7b', icon: danger, size: "small" }), this.errorMessage)));
    }
    static get is() { return "pds-checkbox"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../../global/styles/base.scss", "pds-checkbox.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../../global/styles/base.css", "pds-checkbox.css"]
        };
    }
    static get properties() {
        return {
            "checked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "It determines whether or not the checkbox is checked."
                },
                "attribute": "checked",
                "reflect": false,
                "defaultValue": "false"
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
                },
                "attribute": "component-id",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "It determines whether or not the checkbox is disabled."
                },
                "attribute": "disabled",
                "reflect": false
            },
            "errorMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays message text describing an invalid state."
                },
                "attribute": "error-message",
                "reflect": false
            },
            "helperMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "String used for helper message below checkbox."
                },
                "attribute": "helper-message",
                "reflect": false
            },
            "indeterminate": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the checkbox will visually appear as indeterminate.\nOnly JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)."
                },
                "attribute": "indeterminate",
                "reflect": false
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "It determines whether or not the checkbox is invalid."
                },
                "attribute": "invalid",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "String used for label text next to checkbox."
                },
                "attribute": "label",
                "reflect": false
            },
            "labelHidden": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers."
                },
                "attribute": "label-hidden",
                "reflect": false
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "String used for checkbox `name` attribute."
                },
                "attribute": "name",
                "reflect": false
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "It determines whether or not the checkbox is required."
                },
                "attribute": "required",
                "reflect": false
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the checkbox that is submitted with a form."
                },
                "attribute": "value",
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "pdsCheckboxChange",
                "name": "pdsCheckboxChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted that contains the `value` and `checked`."
                },
                "complexType": {
                    "original": "CheckboxChangeEventDetail",
                    "resolved": "CheckboxChangeEventDetail<any>",
                    "references": {
                        "CheckboxChangeEventDetail": {
                            "location": "import",
                            "path": "./checkbox-interface",
                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
                        }
                    }
                }
            }, {
                "method": "pdsCheckboxInput",
                "name": "pdsCheckboxInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "CheckboxChangeEventDetail",
                    "resolved": "CheckboxChangeEventDetail<any>",
                    "references": {
                        "CheckboxChangeEventDetail": {
                            "location": "import",
                            "path": "./checkbox-interface",
                            "id": "src/components/pds-checkbox/checkbox-interface.ts::CheckboxChangeEventDetail"
                        }
                    }
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "checked",
                "methodName": "updateIndeterminate"
            }];
    }
}
//# sourceMappingURL=pds-checkbox.js.map
