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 radioButtonCss = () => `:host{display:inline-flex;--_ifx-fallback-display:none !important}._ifx-radiobutton-fallback{display:var(--_ifx-fallback-display);position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;border:0 !important}.radioButton__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;cursor:pointer;font-family:var(--ifx-font-family);outline:none}.radioButton__container.disabled{cursor:default}.radioButton__container.disabled .radioButton__wrapper{background-color:#BFBBBB;border-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper:hover{background-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper.checked{background-color:#FFFFFF;border-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper.checked::after{background-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper.checked .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper.checked:hover{border-color:#BFBBBB}.radioButton__container.disabled .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#BFBBBB}.radioButton__container.disabled .label{color:#BFBBBB}.radioButton__container:not(.disabled) .radioButton__wrapper.error{border-color:#CD002F}.radioButton__container:not(.disabled) .radioButton__wrapper.error:hover,.radioButton__container:not(.disabled) .radioButton__wrapper.error:focus-visible{border-color:#CD002F}.radioButton__container:not(.disabled) .radioButton__wrapper.error.checked::after{border-color:#CD002F;background-color:#CD002F}.radioButton__container:focus:not(.disabled) .radioButton__wrapper::before{content:"";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:50%}.radioButton__container.m .radioButton__wrapper{width:24px;height:24px}.radioButton__container .radioButton__wrapper{width:20px;height:20px;position:relative;display:block;border-radius:50%;background-color:#FFFFFF;border:1px solid #575352}.radioButton__container .radioButton__wrapper .radioButton__wrapper-mark{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#0A8276;border-radius:50%;display:flex;justify-content:center;align-items:center;border-color:transparent}.radioButton__container .radioButton__wrapper:hover{background-color:#EEEDED}.radioButton__container .radioButton__wrapper.checked{border-color:#0A8276}.radioButton__container .radioButton__wrapper.checked::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:10px;height:10px;background-color:#0A8276;border-radius:50%}.radioButton__container .radioButton__wrapper.checked:hover{border-color:#08665C}.radioButton__container .radioButton__wrapper.checked:hover .radioButton__wrapper-mark{background-color:#08665C}.radioButton__container .label{display:flex;align-items:center;height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.radioButton__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}`;

const RadioButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.ifxChange = createEvent(this, "ifxChange", 7);
        this.ifxError = createEvent(this, "ifxError", 7);
    }
    get el() { return getElement(this); }
    disabled = false;
    value;
    error = false;
    size = "s";
    name;
    checked;
    internalChecked = false;
    hasSlot = false;
    async isChecked() {
        return this.internalChecked;
    }
    inputElement;
    //private internals: ElementInternals;
    fallbackInput;
    ifxChange;
    ifxError;
    componentWillLoad() {
        // Fallback for form association
        this.fallbackInput = document.createElement("input");
        this.fallbackInput.type = "radio";
        this.fallbackInput.hidden = true;
        this.fallbackInput.className = "_ifx-radiobutton-fallback";
        this.fallbackInput.style.cssText = `
      display: none !important;
      position: absolute !important;
      opacity: 0 !important;
      pointer-events: none !important;
      width: 0 !important;
      height: 0 !important;
    `;
        this.fallbackInput.setAttribute("aria-hidden", "true");
        this.fallbackInput.tabIndex = -1;
        this.el.appendChild(this.fallbackInput);
        // Initial state
        this.internalChecked = this.checked || false;
        this.hasSlot =
            !!this.el.querySelector("[slot]") || this.el.innerHTML.trim() !== "";
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-radio-button", await framework);
        }
    }
    handleCheckedChange(newValue) {
        this.internalChecked = newValue;
    }
    updateFormValue() {
        // Update both ElementInternals and fallback input
        // if (this.internals?.setFormValue) {
        //   this.internals.setFormValue(this.internalChecked ? this.value : null);
        // }
        this.fallbackInput.checked = this.internalChecked;
        this.fallbackInput.name = this.name;
        this.fallbackInput.value = this.value;
        this.fallbackInput.disabled = this.disabled;
    }
    errorChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.ifxError.emit(newValue);
        }
    }
    handleRadioButtonClick(event) {
        if (this.disabled) {
            event.stopPropagation();
            return;
        }
        this.inputElement.click();
        this.internalChecked = this.inputElement.checked;
        this.checked = this.internalChecked;
        this.ifxChange.emit(this.internalChecked);
        const changeEvent = new CustomEvent("change", {
            bubbles: true,
            composed: true,
            detail: { checked: this.internalChecked },
        });
        this.el.dispatchEvent(changeEvent);
    }
    handleKeyDown(ev) {
        if ([" ", "Enter"].includes(ev.key)) {
            ev.preventDefault();
            this.handleRadioButtonClick(new PointerEvent("click"));
        }
    }
    handleExternalChange(event) {
        const target = event.target;
        if (target === this.el ||
            target.tagName.toLowerCase() !== "ifx-radio-button")
            return;
        if (target.getAttribute("name") === this.name) {
            this.internalChecked = false;
        }
    }
    render() {
        return (h("div", { key: '333b04be76349032dc1145daeaa277534649cfb8', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? "disabled" : ""}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: '6d3176b1fbe83eea199d6b8457c841f466b73a11', class: `radioButton__wrapper 
            ${this.internalChecked ? "checked" : ""}  
            ${this.error ? "error" : ""}` }, this.internalChecked && (h("div", { key: '2ef18c314a2e5b3f90b09fca304808a857c7b3c0', class: "radioButton__wrapper-mark" }))), this.hasSlot && (h("div", { key: 'f50ca98877c2295ed9907115ccc53420f410da0f', class: `label ${this.size === "m" ? "label-m" : ""}` }, h("slot", { key: '748c9335898ea771f5ea4168f2a7b9b766b1419e' }))), h("input", { key: 'e692f1fd2e14259671414f8db3c1f8d24bd09ebd', type: "radio", hidden: true, ref: (el) => (this.inputElement = el), name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
    }
    static get watchers() { return {
        "checked": [{
                "handleCheckedChange": 0
            }],
        "internalChecked": [{
                "updateFormValue": 0
            }],
        "error": [{
                "errorChanged": 0
            }]
    }; }
};
RadioButton.style = radioButtonCss();

export { RadioButton as ifx_radio_button };
//# sourceMappingURL=ifx-radio-button.entry.js.map

//# sourceMappingURL=ifx-radio-button.entry.js.map