'use strict';

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

const radioButtonGroupCss = () => `.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;color:#1D1D1D;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.group-label .required{color:#575352;margin-left:4px}.group-label .required.error{color:#CD002F}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}`;

const RadioButtonGroup = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    errorStates = new Map();
    get el() { return index.getElement(this); }
    /** Layout direction of the checkbox group (horizontal or vertical). */
    alignment = "vertical";
    /** Size of the checkbox group (e.g. small, medium). */
    size;
    /** Whether to show the group label above the checkboxes. */
    showGroupLabel;
    /** Text used as the group label. */
    groupLabelText = "Group Label Text";
    /** Whether to show a caption under the group. */
    showCaption;
    /** Text used for the caption below the group. */
    captionText;
    /** Whether to show an icon next to the caption text. */
    showCaptionIcon;
    /** Whether selecting at least one checkbox is required. */
    required = false;
    hasErrors = false;
    handleRadioButtonError(event) {
        const radioButton = event.target;
        if (radioButton.tagName.toLowerCase() === "ifx-radio-button") {
            this.errorStates.set(radioButton, event.detail);
            this.updateHasErrors();
        }
    }
    /** Method to set the error state of all radio-butttons in the group */
    async setGroupError(error) {
        const radioButtons = Array.from(this.el.querySelectorAll("ifx-radio-button"));
        radioButtons.forEach((radioButton) => {
            radioButton.error = error;
        });
    }
    componentWillLoad() {
        this.initializeState();
    }
    async componentDidLoad() {
        if (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent("ifx-radio-button-group", await framework);
        }
    }
    handleSlotChange = () => {
        this.initializeState();
    };
    initializeState() {
        this.errorStates.clear();
        const radioButtons = Array.from(this.el.querySelectorAll("ifx-radio-button"));
        radioButtons.forEach((radioButton) => {
            if (!this.errorStates.has(radioButton)) {
                this.errorStates.set(radioButton, radioButton.error || false);
            }
        });
        this.updateHasErrors();
    }
    updateHasErrors() {
        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
    }
    render() {
        return (index.h("div", { key: '0f12c24f5bb36b514322601f6585ba358a105f99', class: "radio-button-group-container" }, this.showGroupLabel && (index.h("div", { key: 'dbb800828e6f527f8bed96ca0a8199213fd23427', class: "group-label" }, this.groupLabelText, this.required && (index.h("span", { key: 'bb424f58c3259a1ac27ea344f222536e656d1ba4', class: `required ${this.hasErrors ? "error" : ""}` }, "*")))), index.h("div", { key: '38816864ff4788e16d6a4fa9f808126ea2401484', class: `radio-button-group ${this.alignment} ${this.size}` }, index.h("slot", { key: '3541e10d35efaae631adfce5eedd3eaf67e18399', onSlotchange: this.handleSlotChange })), this.showCaption ? (index.h("div", { class: `caption ${this.hasErrors ? "error" : "default"}` }, this.showCaptionIcon ? (index.h("div", { class: "caption-icon" }, index.h("ifx-icon", { icon: "c-info-16" }))) : (""), index.h("div", { class: "caption-text" }, this.captionText))) : ("")));
    }
};
RadioButtonGroup.style = radioButtonGroupCss();

exports.ifx_radio_button_group = RadioButtonGroup;
