import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DtIEDtZ8.js';
import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.ifxChange = createEvent(this, "ifxChange", 7);
        if (hostRef.$hostElement$["s-ei"]) {
            this.internals = hostRef.$hostElement$["s-ei"];
        }
        else {
            this.internals = hostRef.$hostElement$.attachInternals();
            hostRef.$hostElement$["s-ei"] = this.internals;
        }
        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: 'dac7ec48eba63ea4fea619b38bc2d42050335fb3', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": "switch-label", onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: '4e331d64ea1bd5c2a76b730523c250add430e620', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '7f9d1690039ed6a4a99e4204c0358088aa1f459a', class: "switch__checkbox-wrapper" }, h("input", { key: '9b1b492b35cd3bf74143370bbdf79dc97d456893', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '27559d56f6fb75e90ac15590245668af0b1ab447', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '783db5d3a6d1619b96ac97501bb889bb1f6a75bc', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'ee10d23ac2b7d8d693a3ff8a85fb7af9b09c3445', htmlFor: "switch" }, h("slot", { key: '3b7b243ac57f43997f0111500e59667c2b8c75be', onSlotchange: () => this.toggleLabelGap() })))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "checked": ["valueChanged"]
    }; }
};
Switch.style = switchCss;

export { Switch as ifx_switch };
//# sourceMappingURL=ifx-switch.entry.js.map

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