import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';

const switchCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-block;user-select:none}.container{display:flex;flex-direction:row;align-items:center}.container.gap{gap:16px}.switch__checkbox-container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.switch__checkbox-container:focus{outline:4px solid #0A8276;outline-offset:2px}.switch__checkbox-container:focus:not(:focus-visible){outline:none}.switch__checkbox-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.switch__checkbox-container.disabled{cursor:default;border-color:#BFBBBB}.switch__label-wrapper label:hover{cursor:pointer}.switch__label-wrapper.disabled{color:#BFBBBB}.switch__label-wrapper.disabled label:hover{cursor:default}.switch__checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch__checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch__checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch__checkbox-wrapper .switch.checked.disabled{cursor:default}.switch__checkbox-container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.switch__checkbox-container.checked{background-color:#0A8276;border-color:#0A8276}.switch__checkbox-container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}";

const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.ifxChange = createEvent(this, "ifxChange", 7);
        this.internals = this.attachInternals();
        this.checked = false;
        this.name = '';
        this.disabled = false;
        this.internalChecked = false;
    }
    async isChecked() {
        return this.internalChecked;
    }
    componentWillLoad() {
        this.internalChecked = this.checked;
    }
    toggleLabelGap() {
        const slot = this.el.shadowRoot.querySelector('slot');
        const container = this.el.shadowRoot.querySelector('.container');
        if (slot.assignedNodes().length) {
            container.classList.add('gap');
        }
        else {
            container.classList.remove('gap');
        }
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-switch', await framework);
        }
        this.toggleLabelGap();
    }
    valueChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.internalChecked = newValue;
        }
    }
    toggleSwitch() {
        if (this.disabled)
            return;
        this.internalChecked = !this.internalChecked;
        this.ifxChange.emit(this.internalChecked);
    }
    handleKeyDown(event) {
        if (this.disabled)
            return;
        // If the pressed key is either 'Enter' or 'Space' 
        if (event.key === 'Enter' || event.key === ' ') {
            this.toggleSwitch();
        }
    }
    /**
     * Callback for form association.
     * Called whenever the form is reset.
     */
    // formResetCallback() {
    //   this.internals.setFormValue(null);
    // }
    render() {
        return (h("div", { key: 'ed513b9991b332e43d6a2a891e7797e61cb8e67c', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'd121b30241acc0b2529e5afc743e8ae1aad5ee24', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'f532e56fc24e02ecea64a84d6c486b304cb2d3c0', class: "switch__checkbox-wrapper" }, h("input", { key: 'a448103bf803e0f6c2eea33ee283ccd2780ef3cb', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '65823846f20565831126efc841e150d43bafb92a', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '366b493c89bee49239dc73389a9166c1d655f232', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'ff43bb7d69768bf8d573761b67e1225fcd4d0ef9', htmlFor: "switch" }, h("slot", { key: '96857d0f6da7d74f03e06d3ca4b59f8fc206bbfe', onSlotchange: () => this.toggleLabelGap() })))));
    }
    get el() { return this; }
    static get watchers() { return {
        "checked": ["valueChanged"]
    }; }
    static get style() { return switchCss; }
}, [257, "ifx-switch", {
        "checked": [4],
        "name": [1],
        "disabled": [4],
        "value": [1],
        "internalChecked": [32],
        "isChecked": [64]
    }, undefined, {
        "checked": ["valueChanged"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-switch"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-switch":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Switch);
            }
            break;
    } });
}

const IfxSwitch = Switch;
const defineCustomElement = defineCustomElement$1;

export { IfxSwitch, defineCustomElement };
//# sourceMappingURL=ifx-switch.js.map

//# sourceMappingURL=ifx-switch.js.map