import { h } from "@stencil/core";
export class DgaSwitch {
    constructor() {
        this.color = 'brand';
        this.checked = false;
        this.disabled = false;
        this.id = this.generateGuid();
        this.name = this.generateGuid();
        this.value = true;
        this.isChecked = this.checked;
        // Handle active class on mouse down
        this.handleActive = () => {
            if (!this.disabled) {
                this.labelRef.classList.add('active');
            }
        };
        // Toggle switch on change event
        this.handleRemoveActive = () => {
            this.labelRef.classList.remove('active');
            this.isChecked = !this.isChecked;
        };
        // Handle focus
        this.handleFocus = () => {
            this.labelRef.classList.add('focus');
        };
        // Handle focus out
        this.handleFocusOut = () => {
            this.labelRef.classList.remove('focus');
        };
        // Handle Escape key event to remove focus
        this.handleEscape = (event) => {
            if (event.key === 'Escape') {
                this.handleFocusOut();
                const inputElement = this.el.querySelector('input');
                inputElement === null || inputElement === void 0 ? void 0 : inputElement.blur();
            }
        };
    }
    // Helper to generate a unique ID similar to React's `guid()`
    generateGuid() {
        return Math.random().toString(36).substr(2, 9);
    }
    componentDidLoad() {
        window.addEventListener('keydown', this.handleEscape);
    }
    disconnectedCallback() {
        window.removeEventListener('keydown', this.handleEscape);
    }
    render() {
        return (h("label", { key: 'cdad125867c5ab01d4c99f45173d8cd2ab1bee0e', ref: el => (this.labelRef = el), class: `switch ${this.color ? `switch--${this.color}` : ''}`, onMouseDown: this.handleActive, onChange: this.handleRemoveActive }, h("div", { key: 'eb7a809ade67c90db4682403c6aa2eae13f5ce5b', class: "switch-main" }, h("div", { key: 'c42cf466a46d21b176628eb6aaa966d1f1a4845d', class: `switch-main__content ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '0f2a9d984a984cf0008cd54792dba8d398a2e718', class: "switch-wrapper" }, h("input", { key: '1f8d5fe1b4e34c63af2828e885e3d24380f86197', type: "checkbox", name: this.name, value: this.value, id: this.id, disabled: this.disabled, onFocus: this.handleFocus, onBlur: this.handleFocusOut, onChange: this.onChange, onInput: this.onInput, checked: this.isChecked }), h("span", { key: '7302e9a89533cf4c6be54543588a13f696959f1c', class: `slider round ${this.isChecked ? 'slider--active' : 'slider--inactive'}` })), !this.hasHelperText && !this.helperText ? (this.label && h("span", { class: "switch__label" }, this.label)) : (h("div", { class: "dga-flex-column" }, h("span", { class: "switch__label" }, this.label), h("span", { class: "switch__helper-text" }, this.helperText)))), this.alertMessage && (h("div", { key: '85a38c4cad97766bcadcf998873f2d815bbef59d', class: "switch__warning" }, h("span", { key: 'e449827cc314e7968e217116002b6c47fbc3dc86', class: "switch__warning-icon" }, h("svg", { key: '14f9b93f4cba429864bd9eb8375dc87a47c09d98', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'a7a84363557ea82bd0314c5480a83dcf3404069b', d: "M8 1.33333C4.324 1.33333 1.33333 4.324 1.33333 8C1.33333 11.676 4.324 14.6667 8 14.6667C11.676 14.6667 14.6667 11.676 14.6667 8C14.6667 4.324 11.676 1.33333 8 1.33333ZM8 13.3333C5.05467 13.3333 2.66667 10.9453 2.66667 8C2.66667 5.05467 5.05467 2.66667 8 2.66667C10.9453 2.66667 13.3333 5.05467 13.3333 8C13.3333 10.9453 10.9453 13.3333 8 13.3333ZM7.33333 4H8.66667V8H7.33333V4ZM7.33333 9.33333H8.66667V10.6667H7.33333V9.33333Z", fill: "currentColor" }))), h("span", { key: '505f592d4202e662498203bc66f0bd799f2ebe97', class: "switch__warning-text" }, this.alertText))))));
    }
    static get is() { return "dga-switch"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-switch.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-switch.css"]
        };
    }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "color",
                "reflect": false,
                "defaultValue": "'brand'"
            },
            "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
            },
            "checked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "checked",
                "reflect": false,
                "defaultValue": "false"
            },
            "hasHelperText": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "has-helper-text",
                "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": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "id": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "id",
                "reflect": false,
                "defaultValue": "this.generateGuid()"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false,
                "defaultValue": "this.generateGuid()"
            },
            "value": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "boolean | any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "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
            }
        };
    }
    static get states() {
        return {
            "isChecked": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=dga-switch.js.map
