import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Cby2wKoI.js';
import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';

const switchCss = () => `: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;
        }
    }
    // 1. Own Properties - internal only, not exposed on host element
    initialChecked;
    get el() { return getElement(this); }
    // 3. State Variables - internal reactive state
    // (none - this component uses @Prop instead)
    // 4. Public Properties - exposed as both properties and attributes
    /**
     * Sets the checked state of the switch.
     * @default false
     */
    checked = false;
    // @Watch goes right after the @Prop it monitors - keeps related code together
    onCheckedChange(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.checked = newValue;
            this.updateFormValue();
        }
    }
    /**
     * Disables user interaction when true.
     * @default false
     */
    disabled = false;
    /**
     * Form field name.
     * @default ""
     */
    name = "";
    /**
     * Form field value when checked.
     * If not set, defaults to "on" (standard checkbox behavior).
     * @default "on"
     */
    value = "on";
    // ElementInternals for form association - enables participation in HTML forms
    internals;
    // 5. Events - custom events emitted by the component
    /**
     * Emitted when checked state changes.
     */
    ifxChange;
    // 6. Lifecycle Methods - ordered by execution flow
    componentWillLoad() {
        // Remember initial state for form reset
        this.initialChecked = this.checked;
        // Set initial form value when component loads
        this.updateFormValue();
    }
    async componentDidLoad() {
        // Only track top-level components to avoid duplicate analytics
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-switch", await framework);
        }
        this.toggleLabelGap();
    }
    /**
     * Form-Associated Lifecycle Callbacks
     * ------------------------------------
     * These are called by the browser to integrate with native form behavior.
     * See: https://stenciljs.com/docs/form-associated
     *
     * Note: formAssociatedCallback and formDisabledCallback are not implemented
     * as they're not needed for this component. They would only be useful if we
     * needed to react to form association changes or support fieldset-level disabling.
     */
    /**
     * Called when the form is reset.
     * Resets the switch to its initial state and clears form value.
     */
    formResetCallback() {
        this.checked = this.initialChecked;
        this.updateFormValue();
    }
    /**
     * Called when the browser restores form state (e.g., browser autofill or back button).
     * @param state - The saved state to restore
     * @param mode - "restore" (browser restart/navigation) or "autocomplete" (autofill)
     */
    formStateRestoreCallback(state, _mode) {
        if (state) {
            this.checked = true;
            this.updateFormValue();
        }
        else {
            this.checked = false;
            this.internals.setFormValue(null);
        }
    }
    // 7. Listeners
    // (none - this component handles events inline in render)
    // 8. Public Methods - MUST be async, exposed on host element
    /**
     * Returns the current checked state.
     */
    async isChecked() {
        return this.checked;
    }
    /**
     * Sets the checked state.
     * @param checked - New checked state.
     */
    async setChecked(checked) {
        this.checked = checked;
        return Promise.resolve();
    }
    /**
     * Toggles the checked state.
     * @returns Resolves when the toggle is complete.
     */
    async toggle() {
        return Promise.resolve(this.toggleSwitch());
    }
    // 9. Private Methods - internal helpers, not callable externally
    handleKeyDown(event) {
        if (this.disabled)
            return;
        if (event.key === "Enter" || event.key === " ") {
            this.toggleSwitch();
        }
    }
    toggleSwitch() {
        if (this.disabled)
            return;
        this.checked = !this.checked;
        this.updateFormValue();
        this.ifxChange.emit(this.checked);
        return this.checked;
    }
    /**
     * Updates the form value based on the current checked state.
     * Called whenever checked state changes to keep form data in sync.
     */
    updateFormValue() {
        if (this.checked) {
            this.internals.setFormValue(this.value);
        }
        else {
            this.internals.setFormValue(null);
        }
    }
    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");
        }
    }
    // 10. render() - always last, called when state/props change
    render() {
        return (h("div", { key: '242ae64dcee730edaa3b8b6f96c340b91c07a482', class: "container", role: "switch", "aria-checked": this.checked ? "true" : "false", "aria-disabled": this.disabled ? "true" : "false", "aria-labelledby": "switch-label", tabIndex: this.disabled ? -1 : 0, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'cf6b23d0518b5eacbe7f4dadc51ceb219e70d49b', class: `switch__checkbox-container ${this.checked ? "checked" : ""} ${this.disabled ? "disabled" : ""}` }, h("div", { key: '42943c6c24efae96cf0672116b5641da49b5cd42', class: "switch__checkbox-wrapper" }, h("input", { key: '6dbf124821701a009205713ed0e87037d96038ef', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.checked, value: this.value }), h("div", { key: '6d2a5a20a3fc59af44a7c37992a1b0a06be31265', class: `switch ${this.checked ? "checked" : ""} ${this.disabled ? "disabled" : ""}` }))), h("div", { key: '92fc2d3cc3397a266f85fd7d4a317fbad4ac76ae', class: `switch__label-wrapper ${this.disabled ? "disabled" : ""}` }, h("label", { key: '0f40584f68da82c38cbca8e7cb575287b87cc4b7', htmlFor: "switch" }, h("slot", { key: 'f75f8d5f701fa29ee88a985ff0e58b3b4a66da6f', onSlotchange: () => this.toggleLabelGap() })))));
    }
    static get formAssociated() { return true; }
    static get watchers() { return {
        "checked": [{
                "onCheckedChange": 0
            }]
    }; }
};
Switch.style = switchCss();

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

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