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

const segmentedControlCss = () => `.group{display:flex;flex-direction:column;justify-content:space-between}.group__label{font-size:1rem;color:#1D1D1D;line-height:1.5rem;font-weight:400}.group__label:empty{display:none}.group__label .required{color:#575352;margin-left:4px}.group__label .required.error{color:#CD002F}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{margin-top:4px;display:flex;align-items:center;gap:8px;font-weight:400;font-size:0.75rem;line-height:1rem}.group__caption.error{color:#CD002F}`;

const SegmentedControl = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.ifxChange = createEvent(this, "ifxChange", 7);
    }
    get el() { return getElement(this); }
    /** Fired when the selected segment changes (previous and new value). */
    ifxChange;
    /** Helper text shown below the segmented control. */
    caption = "";
    /** Label text shown above the segmented control. */
    label = "";
    /** Size of the segmented control (regular or small). */
    size = "regular";
    /** Whether choosing a value is required. */
    required = false;
    /** If true, shows the segmented control in an error state. */
    error = false;
    onSegmentSelect(event) {
        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);
        this.selectedValue = selectedValue;
        this.ifxChange.emit({ previousValue, selectedValue });
    }
    selectedValue = "";
    unselectPreviousSegment(newSelectedIndex) {
        let previousValue;
        let selectedValue;
        const segments = this.getSegments();
        segments.forEach((control) => {
            if (control.selected) {
                if (control.segmentIndex !== newSelectedIndex) {
                    control.selected = false;
                    previousValue = control.value;
                }
                else {
                    selectedValue = control.value;
                }
            }
        });
        return { previousValue, selectedValue };
    }
    getSegments() {
        return this.el.querySelectorAll("ifx-segment");
    }
    setActiveSegment() {
        const segments = this.getSegments();
        let activeSegmentedControlFound = false;
        segments.forEach((control, idx) => {
            control.segmentIndex = idx;
            if (activeSegmentedControlFound) {
                if (control.selected)
                    control.selected = false;
            }
            else {
                if (control.selected) {
                    activeSegmentedControlFound = true;
                    this.selectedValue = control.value;
                }
            }
        });
    }
    setSegmentSize() {
        const segments = this.getSegments();
        segments.forEach((control) => {
            control.shadowRoot
                .querySelector(".segment")
                .classList.add(`segment--${this.size}`);
        });
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-segmented-control", await framework);
        }
        this.setActiveSegment();
    }
    render() {
        return (h("div", { key: '2f1d91daf15a367b18fcef6ff72c142dab8c9b98', "aria-value": this.selectedValue, "aria-label": "segmented control", class: "group" }, h("div", { key: '992df80e17f0631903a242649ff6f219f66f0d2d', class: "group__label" }, this.label.trim(), this.required && this.label.trim().toLowerCase() !== "" && (h("span", { key: '97d41b8045eb735aed381db27ccbbbb08a82ac33', class: `required ${this.error ? "error" : ""}` }, "*"))), h("div", { key: 'f104d35a4ce0d994b016113f3b498e417b7323bc', class: "group__controls" }, h("slot", { key: '9f96d3cb140ef0a43aa4ef30677261373dd7907b' })), this.caption.trim() && (h("div", { key: '896da68b262a2cf1d362477d29a29276816dcfd4', class: `group__caption ${this.error ? "error" : ""}` }, h("ifx-icon", { key: '391a3b6f37db6021e407fa68dcf9fedebd61533f', icon: "c-info-16" }), " ", this.caption.trim()))));
    }
    componentDidRender() {
        this.setSegmentSize();
    }
};
SegmentedControl.style = segmentedControlCss();

export { SegmentedControl as ifx_segmented_control };
