import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { E as slotHasContent, r as removeDisabledFalse, c as checkResizeObserver, o as onComponentRequiredPropUndefined, w as hasValidationStatus } from './helpers.js';
import { d as defineCustomElement$4 } from './ic-input-label2.js';
import { d as defineCustomElement$3 } from './ic-input-validation2.js';
import { d as defineCustomElement$2 } from './ic-typography2.js';

const icRadioGroupCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-input-label-text-color:var(--ic-radio-button-input-field-label);--ic-input-label-helper-text-color:var(\n    --ic-radio-button-input-field-subtitle\n  );--ic-input-validation-status-text-color:var(--ic-radio-button-state-text);--ic-input-validation-error:var(--ic-radio-button-state-icon-error)}ic-input-label.error{--ic-input-label-text-color:var(--ic-radio-button-input-field-label-error)}ic-input-label.disabled{--ic-input-label-text-color:var(\n    --ic-radio-button-input-field-label-disabled\n  );--ic-input-label-helper-text-color:var(\n    --ic-radio-button-input-field-subtitle-disabled\n  )}ic-input-validation{margin-top:var(--ic-space-sm)}:host(.ic-radio-group-small) ic-input-validation{margin-top:calc(var(--ic-space-sm) / 2)}ic-input-label ic-typography{margin-bottom:var(--ic-space-sm)}:host(.ic-radio-group-small) ic-input-label ic-typography{margin-bottom:calc(var(--ic-space-sm) / 2)}:host .radio-buttons-container{display:flex;flex-direction:column;gap:var(--ic-space-xxs)}:host(.ic-radio-group-small) .radio-buttons-container{gap:var(--ic-space-xxxs)}:host .radio-buttons-container.horizontal{display:flex;flex-direction:row;gap:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.ic-radio-group-small) .radio-buttons-container.horizontal{gap:var(--ic-space-xl)}";
const IcRadioGroupStyle0 = icRadioGroupCss;

const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.icChange = createEvent(this, "icChange", 7);
        this.resizeObserver = null;
        this.ADDITIONAL_FIELD = "additional-field";
        this.RADIO_HORIZONTAL = "horizontal";
        this.RADIO_VERTICAL = "vertical";
        this.checkedValue = "";
        this.selectedChild = -1;
        /**
         * If `true`, the disabled state will be set.
         */
        this.disabled = false;
        /**
         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
         */
        this.hideLabel = false;
        /**
         * The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.
         */
        this.orientation = "vertical";
        /**
         * If `true`, the radio group will require a value.
         */
        this.required = false;
        /**
         * The size of the radio group component.
         */
        this.size = "medium";
        /**
         * The validation status - e.g. 'error' | 'warning' | 'success'.
         */
        this.validationStatus = "";
        /**
         * The text to display as the validation message.
         */
        this.validationText = "";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        this.runResizeObserver = () => {
            this.resizeObserver = new ResizeObserver(() => {
                this.checkOrientation();
            });
            this.resizeObserver.observe(this.el);
        };
        this.handleKeyDown = (event) => {
            const additionalFields = Array.from(this.el.querySelectorAll('ic-text-field[slot="additional-field"]'));
            const activeEl = document.activeElement;
            if (additionalFields.length > 0 &&
                this.radioOptions.map((el) => slotHasContent(el, this.ADDITIONAL_FIELD)) &&
                additionalFields.map((el) => el == activeEl)) {
                return;
            }
            event.stopPropagation();
            switch (event.key) {
                case "ArrowDown":
                case "ArrowRight":
                    this.radioOptions[this.getNextItemToSelect(this.selectedChild, true)].click();
                    event.preventDefault();
                    break;
                case "ArrowUp":
                case "ArrowLeft":
                    this.radioOptions[this.getNextItemToSelect(this.selectedChild, false)].click();
                    event.preventDefault();
            }
        };
        this.getNextItemToSelect = (currentItem, movingDown) => {
            const numRadios = this.radioOptions.length - 1;
            if (currentItem < 1) {
                currentItem = 0;
            }
            let nextItem = movingDown ? currentItem + 1 : currentItem - 1;
            //check if wrap around necessary
            if (nextItem < 0) {
                nextItem = numRadios;
            }
            else if (nextItem > numRadios) {
                nextItem = 0;
            }
            //if next item is disabled then find next
            if (this.radioOptions[nextItem].disabled) {
                nextItem = this.getNextItemToSelect(nextItem, movingDown);
            }
            return nextItem;
        };
        this.addSlotChangeListener = () => {
            var _a;
            (_a = this.radioContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("slotchange", this.setRadioOptions);
        };
        this.setFirstRadioOptionTabIndex = (value) => {
            this.radioOptions[0].setTabIndex(value);
        };
        this.setRadioOptions = () => {
            this.selectedChild = -1;
            this.checkedValue = "";
            this.radioOptions = Array.from(this.el.children).filter((el) => el.tagName === "IC-RADIO-OPTION");
            if (this.radioOptions.length > 0) {
                this.radioOptions.forEach((radioOption, index) => {
                    if (!radioOption.selected) {
                        radioOption.selected = this.checkedValue === radioOption.value;
                    }
                    radioOption.name = this.name;
                    radioOption.groupLabel = this.label;
                    if (radioOption.selected) {
                        this.selectedChild = index;
                        this.checkedValue = radioOption.value;
                    }
                    if (this.disabled) {
                        radioOption.disabled = true;
                    }
                });
                this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);
                if (this.initialOrientation === this.RADIO_HORIZONTAL &&
                    this.radioOptions !== undefined &&
                    (this.radioOptions.length > 2 ||
                        (this.radioOptions.length === 2 &&
                            (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||
                                slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))) {
                    this.currentOrientation = this.RADIO_VERTICAL;
                }
            }
        };
    }
    watchDisabledHandler(newValue) {
        this.radioOptions.forEach((radioOption) => (radioOption.disabled = newValue));
        removeDisabledFalse(this.disabled, this.el);
    }
    orientationChangeHandler() {
        this.initialOrientation = this.orientation;
        this.checkOrientation();
    }
    watchThemeHandler(newValue) {
        this.radioOptions.forEach((radioOption) => (radioOption.theme = newValue));
    }
    disconnectedCallback() {
        var _a, _b;
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
        (_b = this.radioContainer) === null || _b === void 0 ? void 0 : _b.removeEventListener("slotchange", this.setRadioOptions);
    }
    componentWillLoad() {
        removeDisabledFalse(this.disabled, this.el);
        this.orientationChangeHandler();
        this.currentOrientation = this.initialOrientation;
    }
    componentDidLoad() {
        this.setRadioOptions();
        checkResizeObserver(this.runResizeObserver);
        this.addSlotChangeListener();
        onComponentRequiredPropUndefined([
            { prop: this.label, propName: "label" },
            { prop: this.name, propName: "name" },
        ], "Radio Group");
        this.watchThemeHandler(this.theme);
    }
    selectHandler({ detail, target }) {
        var _a;
        const selectedOption = target;
        if (selectedOption.parentElement === this.el) {
            this.checkedValue = detail.value;
            this.icChange.emit({
                value: this.checkedValue,
                selectedOption: {
                    radio: selectedOption,
                    textFieldValue: (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.value,
                },
            });
            if (this.radioOptions !== undefined) {
                this.radioOptions.forEach((radioOption, index) => {
                    radioOption.selected = selectedOption === radioOption;
                    if (radioOption.selected) {
                        this.selectedChild = index;
                    }
                });
                this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);
            }
        }
    }
    changeHandler() {
        var _a;
        const selectedOption = (_a = this.radioOptions) === null || _a === void 0 ? void 0 : _a.findIndex((radioOption) => radioOption.selected);
        if (selectedOption < 0) {
            this.setFirstRadioOptionTabIndex(0);
            this.selectedChild = selectedOption;
        }
    }
    checkOrientation() {
        if (this.initialOrientation === this.RADIO_HORIZONTAL) {
            let totalWidth = 0;
            if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {
                this.radioOptions.forEach(({ clientWidth }, i, arr) => {
                    totalWidth += clientWidth;
                    if (i < arr.length - 1)
                        totalWidth += 40;
                });
            }
            else {
                totalWidth = 0;
            }
            if (this.initialOrientation == this.RADIO_HORIZONTAL) {
                if (this.radioOptions !== undefined &&
                    (this.radioOptions.length > 2 ||
                        (this.radioOptions.length === 2 &&
                            (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) ||
                                slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))) {
                    this.currentOrientation = this.RADIO_VERTICAL;
                }
                else {
                    if (this.radioContainer) {
                        if (totalWidth >= this.radioContainer.clientWidth) {
                            this.currentOrientation = this.RADIO_VERTICAL;
                        }
                        else if (totalWidth < this.radioContainer.clientWidth) {
                            this.currentOrientation = this.RADIO_HORIZONTAL;
                        }
                    }
                }
            }
        }
    }
    render() {
        const { currentOrientation, disabled, handleKeyDown, helperText, hideLabel, label, required, size, validationStatus, validationText, theme, } = this;
        return (h(Host, { key: '42dc675c60f45659472c07052a2ed88f08710c31', onKeyDown: handleKeyDown, class: {
                "ic-radio-group-small": size === "small",
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h("div", { key: '6fc67dbbdbaebd8fa8956defa727d0552a2dc4de', role: "radiogroup", "aria-label": `${label}${required ? ", required" : ""}` }, !hideLabel && (h("ic-input-label", { key: '463018c9c855d118d77d59c150c75ae76ec95491', class: {
                [`${validationStatus}`]: true,
                ["disabled"]: !!disabled,
            }, label: label, helperText: helperText, required: required, disabled: disabled })), h("div", { key: '4567b4ebf1cbc7ad1f87963cf5918937a31c6775', class: {
                "radio-buttons-container": true,
                horizontal: currentOrientation === this.RADIO_HORIZONTAL,
            }, ref: (el) => (this.radioContainer = el) }, h("slot", { key: 'd8c63b01cacf74581bc381ebec1c269d9c590ea3' }))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { key: '55d0dc823c82405a7aa2e8edb03be0d76f5809c8', ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
    }
    get el() { return this; }
    static get watchers() { return {
        "disabled": ["watchDisabledHandler"],
        "orientation": ["orientationChangeHandler"],
        "theme": ["watchThemeHandler"]
    }; }
    static get style() { return IcRadioGroupStyle0; }
}, [1, "ic-radio-group", {
        "disabled": [4],
        "helperText": [1, "helper-text"],
        "hideLabel": [4, "hide-label"],
        "label": [1],
        "name": [1],
        "orientation": [1],
        "required": [4],
        "size": [1],
        "validationStatus": [1, "validation-status"],
        "validationText": [1, "validation-text"],
        "theme": [1],
        "checkedValue": [32],
        "currentOrientation": [32],
        "initialOrientation": [32],
        "selectedChild": [32]
    }, [[0, "icCheck", "selectHandler"], [0, "icSelectedChange", "changeHandler"]], {
        "disabled": ["watchDisabledHandler"],
        "orientation": ["orientationChangeHandler"],
        "theme": ["watchThemeHandler"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ic-radio-group", "ic-input-label", "ic-input-validation", "ic-typography"];
    components.forEach(tagName => { switch (tagName) {
        case "ic-radio-group":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RadioGroup);
            }
            break;
        case "ic-input-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "ic-input-validation":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "ic-typography":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const IcRadioGroup = RadioGroup;
const defineCustomElement = defineCustomElement$1;

export { IcRadioGroup, defineCustomElement };

//# sourceMappingURL=ic-radio-group.js.map