import { h, Host } from "@stencil/core";
export class PnFilterCheckbox {
    constructor() {
        this.value = undefined;
        this.name = undefined;
        this.checkboxid = undefined;
        this.disabled = false;
        this.checked = false;
        this.indeterminate = false;
    }
    hostElement;
    handlechange() {
        this.indeterminate = false;
    }
    componentDidLoad() {
        this.checkAndSetIndeterminateState();
        this.bindEvents();
    }
    componentDidUpdate() {
        this.checkAndSetIndeterminateState();
    }
    bindEvents() {
        const labels = document.querySelectorAll('label[for="' + this.checkboxid + '"]');
        labels.forEach(label => {
            label.addEventListener('click', () => {
                this.hostElement.shadowRoot.querySelector('label').click();
            });
        });
        const checkboxInput = this.hostElement.shadowRoot.querySelector('input');
        checkboxInput.addEventListener('change', this.onCheckboxChange.bind(this, checkboxInput));
    }
    onCheckboxChange(checkboxInput) {
        let outsideInput = this.hostElement.querySelector('input.hidden-' + this.checkboxid);
        if (outsideInput) {
            outsideInput.value = checkboxInput.checked ? this.value : '';
            outsideInput.dispatchEvent(new CustomEvent('change', { detail: outsideInput }));
        }
    }
    checkAndSetIndeterminateState() {
        let checkbox = this.hostElement.querySelector(`#${this.checkboxid}`);
        if (checkbox) {
            checkbox.indeterminate = this.indeterminate;
        }
    }
    renderInputOutsideShadowRoot() {
        let input = this.hostElement.querySelector('input.hidden-' + this.checkboxid);
        if (!input) {
            input = this.hostElement.ownerDocument.createElement('input');
            input.type = 'hidden';
            input.classList.add('hidden-' + this.checkboxid);
            this.hostElement.appendChild(input);
        }
        input.name = this.name ?? this.checkboxid;
    }
    render() {
        this.renderInputOutsideShadowRoot();
        return (h(Host, { key: '6afb96d0039c6b469a1e0fcb1984130e5d07f6b2', checked: this.checked, id: this.checkboxid }, h("input", { key: '13cb1d151426ba8798e8dbc1ab3ba070df9f5f9c', type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked }), h("label", { key: '704d25d4ef31eceb09ec5961a4da7118b431587b', htmlFor: this.checkboxid, class: "pn-checkbox" }, h("svg", { key: '730506f1a3b0f2220017eb51093fba5b352e5809', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { key: '138a8f0bcfc1f4b6ddb938a653ca4821e125a296', class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }), h("polyline", { key: '08f0433c4f7a21040d4905b81c05f27e0ebd0542', class: "indeterminate-path", points: "4,12 20,12", "stroke-width": "3" })))));
    }
    static get is() { return "pn-filter-checkbox"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-filter-checkbox.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-filter-checkbox.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "This will be emitted on change and input, like a native checkbox"
                },
                "attribute": "value",
                "reflect": true
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of the checkbox group"
                },
                "attribute": "name",
                "reflect": false
            },
            "checkboxid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The string you put here will be what you'd make the ID of a native radio button, you can't name props \"id\" because it's reserved\nso we went with the more descriptive name \"checkboxid\", if you want to create labels for your checkbox, you will bind it to this ID"
                },
                "attribute": "checkboxid",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "checked": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "checked",
                "reflect": false,
                "defaultValue": "false"
            },
            "indeterminate": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "indeterminate",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "hostElement"; }
    static get listeners() {
        return [{
                "name": "change",
                "method": "handlechange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=pn-filter-checkbox.js.map
