import { h } from "@stencil/core";
import { guid } from "../../utils";
export class DgaCheckbox {
    constructor() {
        this.color = 'brand';
        this.size = 'md';
        this.disabled = false;
        this.name = guid();
        this.value = '';
        this.showBorderOnFocusAndFocusOute = true;
        this.checked = false;
        this.isChecked = this.checked;
        this.Indeterminate = false;
        // private handleActive = () => {
        //   this.labelRef?.classList.add('active');
        // };
        // private handleRemoveActive = () => {
        //   this.labelRef?.classList.remove('active');
        // };
        this.handleFocus = () => {
            var _a;
            if (!this.showBorderOnFocusAndFocusOute)
                return;
            (_a = this.labelRef) === null || _a === void 0 ? void 0 : _a.classList.add('focus');
        };
        this.handleFocusOut = () => {
            var _a;
            if (!this.showBorderOnFocusAndFocusOute)
                return;
            (_a = this.labelRef) === null || _a === void 0 ? void 0 : _a.classList.remove('focus');
        };
        this.handleEscape = (event) => {
            var _a, _b;
            if (event.key === 'Escape') {
                this.handleFocusOut();
                (_b = (_a = this.labelRef) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.blur();
            }
        };
    }
    componentWillLoad() {
        this.isChecked = this.checked;
    }
    componentDidLoad() {
        window.addEventListener('keydown', this.handleEscape);
    }
    watchMaxValue(newValue) {
        this.isChecked = newValue;
    }
    render() {
        return (h("label", { key: '672c6005b88e60e5ba616a3d202972ca61cd48b7', ref: el => (this.labelRef = el), class: `checkbox ${this.color ? `checkbox--${this.color}` : ''} checkbox--${this.size}` }, h("div", { key: '9ed912a16864733e9c0eb4facd7bbbf37494cf10', class: "checkbox-main" }, h("div", { key: 'a94174fde980898a707d358d11a0b1d59e0163b2', class: "checkbox-main__content" }, h("input", { key: 'e781f80d7b156f0c53449206adfe0f07550a4021', type: "checkbox", name: this.name, value: this.value,
            // id={id}
            // {...(customAttribute.key && {
            //   [customAttribute.key]: customAttribute.value
            //     ? customAttribute.value
            //     : "",
            // })}
            disabled: this.disabled, onFocus: this.handleFocus, onBlur: this.handleFocusOut, onChange: e => {
                var _a;
                (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, e);
                const target = e.target;
                this.isChecked = target.checked;
            }, onInput: this.onInput, checked: this.isChecked }), h("div", { key: 'e7acde333f122faf52e06d7b911ee2c699ff1a92', class: "checkbox-container" }, h("span", { key: '435f79996a7bdf1ba8f4a5b474a9be85d1743193', class: "checkbox-icon checkbox__checked-icon", style: { display: this.isChecked ? 'inline-block' : 'none' } }, this.Indeterminate ? h("i", { class: "hgi-solid hgi-minus-sign" }) : h("i", { class: "hgi-solid hgi-tick-03" })), h("span", { key: '694323af71aa219683479eff4feb3ffd7278b9d9', class: "checkbox-icon checkbox__indeterminate-icon", style: { display: this.isChecked ? 'none' : 'inline-block' } }, h("i", { key: 'aedd5be1411ba1297830dd5367e260f7b0d4c7d1', class: 'hgi-solid hgi-remove-01' }))), !this.helperText ? (this.label && h("span", { class: "checkbox__label" }, this.label)) : (h("div", { class: "dga-flex-column" }, h("span", { class: "checkbox__label" }, this.label), h("span", { class: "checkbox__helper-text" }, this.helperText)))), this.alertMessage && (h("div", { key: 'c395b09ae494697a63d50b23b08daf1f0c3368bd', class: "checkbox__warning" }, h("span", { key: '013e1051d05ed36897e4c15b268f43c492718618', class: "checkbox__warning-icon" }, h("i", { key: 'ea94fae4e44b0e11169359342c02596e1e9371ed', class: 'hgi-stroke hgi-alert-circle', style: {
                fontSize: "16px"
            } })), h("span", { key: '13e9d61d2916c9a95beaf83168031e9bcabe76ce', class: "checkbox__warning-text" }, this.alertText))))));
    }
    static get is() { return "dga-checkbox"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-checkbox.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-checkbox.css"]
        };
    }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'brand' | 'neutral'",
                    "resolved": "\"brand\" | \"neutral\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "color",
                "reflect": false,
                "defaultValue": "'brand'"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'lg' | 'md' | 'sm'",
                    "resolved": "\"lg\" | \"md\" | \"sm\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'md'"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "helper-text",
                "reflect": false
            },
            "alertMessage": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "alert-message",
                "reflect": false
            },
            "alertText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "alert-text",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false,
                "defaultValue": "guid()"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false,
                "defaultValue": "''"
            },
            "showBorderOnFocusAndFocusOute": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-border-on-focus-and-focus-oute",
                "reflect": false,
                "defaultValue": "true"
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event?: any) => void",
                    "resolved": "(event?: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "onInput": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event?: any) => void",
                    "resolved": "(event?: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "checked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "checked",
                "reflect": true,
                "defaultValue": "false"
            },
            "Indeterminate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "indeterminate",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isChecked": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "checked",
                "methodName": "watchMaxValue"
            }];
    }
}
//# sourceMappingURL=dga-checkbox.js.map
