import { h, Host } from "@stencil/core";
import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
import { danger } from "@pine-ds/icons/icons";
import { inheritAriaAttributes } from "../../utils/attributes";
export class PdsCheckbox {
    constructor() {
        this.inheritedAttributes = {};
        this._type = 'checkbox';
        /**
         * It determines whether or not the checkbox is checked.
         */
        this.checked = false;
        this.handleCheckboxChange = (e) => {
            if (this.disabled) {
                return;
            }
            const target = e.target;
            this.checked = target.checked;
            this.updateFormValue();
            this.pdsCheckboxChange.emit({
                checked: target.checked,
                value: this.value
            });
        };
        this.handleInput = () => {
            this.pdsCheckboxInput.emit({
                checked: this.checked,
                value: this.value
            });
        };
    }
    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('  ');
    }
    connectedCallback() {
        // Initialize ElementInternals for form association (only once per element instance)
        if (this.el.attachInternals && !this.internals) {
            this.internals = this.el.attachInternals();
        }
        // Expose type property on the element instance to match native form element behavior
        exposeTypeProperty(this.el, () => this._type);
    }
    componentDidLoad() {
        this.updateFormValue();
    }
    checkedChanged() {
        this.updateFormValue();
    }
    updateFormValue() {
        if (isSpecTest())
            return;
        if (this.internals && this.internals.setFormValue) {
            // For checkboxes, only send the value when checked, otherwise send null
            const formValue = this.checked ? (this.value || 'on') : null;
            this.internals.setFormValue(formValue);
        }
        if (this.internals && this.internals.setValidity) {
            this.internals.setValidity({});
        }
    }
    formStateRestoreCallback(state) {
        if (state instanceof FormData) {
            // For checkboxes, restore if the value exists in FormData
            const value = this.value || 'on';
            this.checked = state.get(this.name) === value;
        }
        else if (typeof state === 'string') {
            // Restore from string state
            this.checked = state === (this.value || 'on');
        }
    }
    componentWillLoad() {
        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
    }
    render() {
        return (h(Host, { key: 'd4a447aba6ffa638b0bf3ed7a5cfd4580168da79', class: this.classNames() }, h("label", { key: '75fcd32809f736f8e4f6af2021f86d2c5b7bc110', htmlFor: this.componentId }, h("input", Object.assign({ key: '5238103a16bc1c6baf92b5802bca17db748a14b2', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || 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 }, this.inheritedAttributes)), h("span", { key: '0a652dc44e4c35d3a5484065f140a231a0d46424', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
            h("div", { key: '76f40eba1d92ffcdb9946c8cc17714bda421a8a7', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
            h("div", { key: 'ad05bf066a91bc934344c3696ec82ec6b9813c07', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '4d3f9dddea4be870323db41a6cc5d69a9be44d7d', icon: danger, size: "small" }), this.errorMessage)));
    }
    static get is() { return "pds-checkbox"; }
    static get encapsulation() { return "shadow"; }
    static get formAssociated() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["../../global/styles/utils/label.scss", "pds-checkbox.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../../global/styles/utils/label.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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "checked",
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-id"
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled"
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error-message"
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helper-message"
            },
            "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)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "indeterminate"
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid"
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "hideLabel": {
                "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hide-label"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "String used for checkbox `name` attribute."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required"
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            }
        };
    }
    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 elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "checked",
                "methodName": "updateIndeterminate"
            }, {
                "propName": "checked",
                "methodName": "checkedChanged"
            }];
    }
}
//# sourceMappingURL=pds-checkbox.js.map
