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 segmentedControlCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.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);
        this.caption = '';
        this.label = '';
        this.size = 'regular';
        this.required = false;
        this.error = false;
        this.selectedValue = '';
    }
    onSegmentSelect(event) {
        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);
        this.selectedValue = selectedValue;
        this.ifxChange.emit({ previousValue, 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.SegmentedControl.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.SegmentedControl)) {
            const framework = detectFramework();
            trackComponent('ifx-segmented-control', await framework);
        }
        this.setActiveSegment();
    }
    render() {
        return (h("div", { key: '74bfd584af640b44d4fdeaa674e0df4003d58383', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: "group" }, h("div", { key: '233e32decc7484857fe34397d10191fa60f101ff', class: 'group__label' }, this.label.trim(), this.required && this.label.trim().toLowerCase() !== "" && h("span", { key: '59e000fd4bf388832d2dc31f2487f90a555aedf7', class: `required ${this.error ? 'error' : ''}` }, "*")), h("div", { key: '4368841e6a763be4407ada54434297b699e8d2b8', class: 'group__controls' }, h("slot", { key: 'f4d60a5f83969042e4198aa67687628b25dbf68b' })), this.caption.trim() &&
            h("div", { key: '4c46eec275fea48fd95df56519739fd2ba97b807', class: `group__caption ${this.error ? 'error' : ''}` }, h("ifx-icon", { key: '656b6becac2b36bb32bf7ba8b4b247fe69e1a212', icon: 'c-info-16' }), " ", this.caption.trim())));
    }
    componentDidRender() {
        this.setSegmentSize();
    }
    get SegmentedControl() { return getElement(this); }
};
SegmentedControl.style = segmentedControlCss;

export { SegmentedControl as ifx_segmented_control };
//# sourceMappingURL=ifx-segmented-control.entry.js.map

//# sourceMappingURL=ifx-segmented-control.entry.js.map