'use strict';

var index = require('./index-CpWVsZ_u.js');
var domUtils = require('./dom-utils-BdvOgC2b.js');
var tracking = require('./tracking-BPjaTlNR.js');

const checkboxCss = () => `:host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:top;padding:0px;gap:8px;font-family:"Source Sans 3";vertical-align:bottom}.checkbox__container .checkbox__input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0 0 0 0)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate){background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):hover{background-color:#0A8276;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:"";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .checkbox__input:focus-visible+.checkbox__wrapper{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__input:focus-visible+.checkbox__wrapper.checked:not(.indeterminate){border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}`;

const Checkbox = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxChange = index.createEvent(this, "ifxChange", 7);
        this.ifxError = index.createEvent(this, "ifxError", 7);
        if (hostRef.$hostElement$["s-ei"]) {
            this.internals = hostRef.$hostElement$["s-ei"];
        }
        else {
            this.internals = hostRef.$hostElement$.attachInternals();
            hostRef.$hostElement$["s-ei"] = this.internals;
        }
    }
    inputElement;
    get el() { return index.getElement(this); }
    /**
     * Indicates whether the checkbox is disabled. When true, the checkbox cannot be interacted with and will have a disabled appearance.
     */
    disabled = false;
    /**
 * The name attribute of the input element.
 */
    name;
    /**
     * The state of the checkbox. When true, the checkbox is checked; when false, it is unchecked.
     */
    checked = false;
    /**
     * Indicates whether the checkbox is in an indeterminate state. When true, the checkbox will have an indeterminate appearance, which is typically used to indicate a "partially selected" state in a group of checkboxes.
     */
    indeterminate = false;
    /**
     * Indicates whether the checkbox is in an error state. When true, the checkbox will have an error appearance.
     */
    error = false;
    /**
     * The size of the checkbox. Can be "m" for medium (default) or "s" for small. This prop controls the overall dimensions of the checkbox and its label.
     */
    size = "m";
    /**
     * The value associated with the checkbox.
     * This value is typically submitted with a form when the checkbox is checked.
     * If not specified, it defaults to "on" when the checkbox is checked.
     */
    value;
    internalIndeterminate;
    internals;
    // Store the initial checked state for form reset
    initialChecked;
    /**
     * Event emitted when the checkbox state changes.
     * Emits the new checked state as a boolean value.
     */
    ifxChange;
    /**
     * Event emitted when the error state changes.
     * Emits the new error state as a boolean value.
     */
    ifxError;
    /**
     * Method to get the current checked state of the checkbox.
     * @returns A promise that resolves to a boolean indicating whether the checkbox is checked.
     */
    async isChecked() {
        return this.checked;
    }
    /**
     * Method to set the checked state of the checkbox.
     * @param newVal A boolean value to set the checked state of the checkbox.
     * @returns A promise that resolves when the checked state has been updated.
     */
    async setChecked(newVal) {
        this.checked = newVal;
    }
    /**
     * @deprecated Use `setChecked` instead.
     */
    async toggleCheckedState(newVal) {
        this.checked = newVal;
    }
    /**
     * Toggles the checked state.
     * @returns Resolves when the toggle is complete.
     */
    async toggle() {
        this.handleCheckbox();
        return Promise.resolve(this.checked);
    }
    valueChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.checked = newValue;
            this.inputElement.checked = this.checked; // update the checkbox's checked property
        }
    }
    errorChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.ifxError.emit(newValue);
        }
    }
    indeterminateChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.internalIndeterminate = newValue;
            this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property
            // Update form value when indeterminate state changes
            if (newValue) {
                // Indeterminate state should not submit a value
                this.internals.setFormValue(null);
            }
            else if (this.checked) {
                // If becoming determinate and checked, set the form value
                const formValue = this.value !== undefined ? this.value : "on";
                this.internals.setFormValue(formValue);
            }
        }
    }
    componentWillLoad() {
        this.checked = this.checked;
        this.internalIndeterminate = this.indeterminate;
        // Store initial checked state for form reset
        this.initialChecked = this.checked;
    }
    async componentDidLoad() {
        if (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent("ifx-checkbox", await framework);
        }
        // Set initial form value if checkbox is checked and not indeterminate
        if (this.checked && !this.internalIndeterminate) {
            const formValue = this.value !== undefined ? this.value : "on";
            this.internals.setFormValue(formValue);
        }
        else {
            this.internals.setFormValue(null);
        }
    }
    componentDidRender() {
        this.inputElement.indeterminate = this.internalIndeterminate;
    }
    /**
     * Callback for form association.
     * Called whenever the form is reset.
     * Resets the checkbox to its initial state.
     */
    formResetCallback() {
        // Reset to initial checked state
        this.checked = this.initialChecked;
        if (this.inputElement) {
            this.inputElement.checked = this.initialChecked;
        }
        // Update form value based on initial state
        if (this.initialChecked) {
            const formValue = this.value !== undefined ? this.value : "on";
            this.internals.setFormValue(formValue);
        }
        else {
            this.internals.setFormValue(null);
        }
    }
    handleCheckbox(fromInput = false) {
        if (this.disabled) {
            if (fromInput) {
                this.inputElement.checked = this.checked;
            }
            return;
        }
        if (fromInput) {
            if (this.inputElement.indeterminate) {
                this.inputElement.indeterminate = false;
                this.internalIndeterminate = false;
            }
            this.checked = this.inputElement.checked;
        }
        else if (!this.inputElement.indeterminate) {
            this.checked = !this.checked;
            this.inputElement.checked = this.checked;
        }
        if (this.checked && !this.internalIndeterminate) {
            if (this.value !== undefined) {
                this.internals.setFormValue(this.value);
            }
            else {
                this.internals.setFormValue("on");
            }
        }
        else {
            this.internals.setFormValue(null);
        }
        this.ifxChange.emit(this.checked);
    }
    setInputElement(el) {
        this.inputElement = el;
    }
    render() {
        const slot = this.el.innerHTML;
        let hasSlot = false;
        if (slot) {
            hasSlot = true;
        }
        return (index.h("div", { key: 'd4fa18c753833dbe4fd2b0a13e89c551f37403f6', class: "checkbox__container" }, index.h("input", { key: '0a5321031aa4f773d1b63f62be9708a9b41b0811', type: "checkbox", name: this.name, class: "checkbox__input", ref: (el) => this.setInputElement(el), checked: this.checked, onChange: () => this.handleCheckbox(true), id: "checkbox", value: `${this.value}`, disabled: this.disabled ? true : undefined }), index.h("label", { key: '62dc9f0df8a02aa771f12a0570eef9ea01ba1170', htmlFor: "checkbox", class: `checkbox__wrapper 
						${this.getCheckedClassName()}
						${this.size === "m" ? "checkbox-m" : ""}
						${this.indeterminate ? "indeterminate" : ""}
						${this.disabled ? "disabled" : ""}` }, this.checked && !this.internalIndeterminate && (index.h("ifx-icon", { key: '984aae05b9d142e243647d2f60e18ff81f12909e', icon: "check-16" }))), hasSlot && (index.h("label", { key: '6df496ba331d0fa355976d365f4e8bc369d13955', id: "label", htmlFor: "checkbox", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? "disabled" : ""} ` }, index.h("slot", { key: '7730d2d356a3cb23b64c591a506c2cbcf3979e5d' })))));
    }
    getCheckedClassName() {
        if (this.error) {
            if (this.checked) {
                return "checked error";
            }
            else {
                return "error";
            }
        }
        else if (this.checked) {
            return "checked";
        }
        else
            return "";
    }
    static get formAssociated() { return true; }
    static get watchers() { return {
        "checked": [{
                "valueChanged": 0
            }],
        "error": [{
                "errorChanged": 0
            }],
        "indeterminate": [{
                "indeterminateChanged": 0
            }]
    }; }
};
Checkbox.style = checkboxCss();

exports.ifx_checkbox = Checkbox;
//# sourceMappingURL=ifx-checkbox.entry.cjs.js.map

//# sourceMappingURL=ifx-checkbox.cjs.entry.js.map