@uh-design-system/component-library 1.4.0-rc.2 → 1.4.0

package/dist/components/ds-radio-button.js

@@ -1,305 +1 @@
-import { p as proxyCustomElement, M as Mixin, c as createEvent, f as forceUpdate, h, F as Fragment } from './p-GalXVdFP.js';
-import { c as classNames } from './p-BfTCfPZ1.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
-import { v as validityMessage, g as getRequiredText } from './p-BGV-ubOj.js';
-import { i as idGenerator, t as transformTagName, a as ifDefined, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { a as ariaDeprecationFactory, d as defineCustomElement$4 } from './p-DIxFOW85.js';
-import { d as disableEventsFactory } from './p-B3JeAI4k.js';
-import { d as defineCustomElement$5 } from './p-3TYR8XT2.js';
-import { d as defineCustomElement$3 } from './p-BVcTj6fF.js';
-import { d as defineCustomElement$2 } from './p-Cq_RwLX7.js';
-
-const dsRadioButtonCss = ".ds-radio-button__oSBnIJ.sc-ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-textColor-default)}.ds-radio-button__oSBnIJ--disabled.sc-ds-radio-button{color:var(--ds-textColor-disabled-onLight)}.ds-radio-button__oSBnIJ.sc-ds-radio-button:has(input:focus-visible) .ds-radio-button__oSBnIJ__icon.sc-ds-radio-button{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-bgColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 0.5)}.ds-radio-button__oSBnIJ__icon.sc-ds-radio-button{border-radius:50%;height:24px;width:24px;margin:10px 10px 10px 0}.ds-radio-button__oSBnIJ__text.sc-ds-radio-button{margin-top:10px;padding-right:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-radio-button__oSBnIJ__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white)}.ds-radio-button__oSBnIJ__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-primary);fill:var(--ds-bgColor-white)}.ds-radio-button__oSBnIJ__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary)}.ds-radio-button__oSBnIJ.sc-ds-radio-button:hover:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-hover)}.ds-radio-button__oSBnIJ.sc-ds-radio-button:hover:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-bgColor-white)}.ds-radio-button__oSBnIJ.sc-ds-radio-button:hover:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-hover)}.ds-radio-button__oSBnIJ.sc-ds-radio-button:active:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-active)}.ds-radio-button__oSBnIJ.sc-ds-radio-button:active:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-bgColor-white)}.ds-radio-button__oSBnIJ.sc-ds-radio-button:active:not(.ds-radio-button__oSBnIJ--disabled):not(.ds-radio-button__oSBnIJ--invalid) .ds-radio-button__oSBnIJ__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-active)}.ds-radio-button__oSBnIJ--disabled.sc-ds-radio-button .ds-radio-button__oSBnIJ__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__oSBnIJ--disabled.sc-ds-radio-button .ds-radio-button__oSBnIJ__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__oSBnIJ--disabled.sc-ds-radio-button .ds-radio-button__oSBnIJ__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-transparent-onLight-active)}.ds-radio-button__oSBnIJ--invalid.sc-ds-radio-button .ds-radio-button__oSBnIJ__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__oSBnIJ--invalid.sc-ds-radio-button .ds-radio-button__oSBnIJ__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__oSBnIJ--invalid.sc-ds-radio-button .ds-radio-button__oSBnIJ__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__oSBnIJ--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__oSBnIJ--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__oSBnIJ--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__oSBnIJ--invalid.sc-ds-radio-button:active:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__oSBnIJ--invalid.sc-ds-radio-button:active:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__oSBnIJ--invalid.sc-ds-radio-button:active:not(.ds-radio-button__oSBnIJ--disabled) .ds-radio-button__oSBnIJ__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__oSBnIJ-fieldset.sc-ds-radio-button{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button__oSBnIJ-fieldset__legend.sc-ds-radio-button{padding-inline:0;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button__oSBnIJ-fieldset__assistive-text.sc-ds-radio-button{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}";
-
-const radioButtonIdGenerator = idGenerator('ds-radio-button');
-const DsRadioButton$1 = proxyCustomElement(class DsRadioButton extends Mixin(ariaDeprecationFactory, disableEventsFactory) {
-    constructor(registerHost) {
-        super(false);
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.dsChange = createEvent(this, "dsChange");
-        this.dsCheck = createEvent(this, "dsCheck");
-        this.dsFocus = createEvent(this, "dsFocus");
-        this.dsBlur = createEvent(this, "dsBlur");
-        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid");
-        this.dsValidity = createEvent(this, "dsValidity");
-    }
-    dsAriaLabel;
-    dsAriaDescribedby;
-    radioGroup = null;
-    inputElement;
-    inheritedAttributes = {};
-    get el() { return this; }
-    dsChange;
-    dsCheck;
-    dsFocus;
-    dsBlur;
-    dsSubmitInvalid;
-    dsValidity;
-    dsForm;
-    dsId = radioButtonIdGenerator.next().value;
-    _dsName = this.dsId;
-    async setName(newValue) {
-        this._dsName = this.radioGroup?.dsName || newValue || this._dsName;
-    }
-    get dsName() {
-        return this._dsName;
-    }
-    set dsName(value) {
-        this.setName(value);
-    }
-    dsErrorsDisabled = false;
-    dsValue = this.dsId;
-    dsLabel;
-    dsAssistiveText;
-    dsText;
-    dsRequired = false;
-    dsDisabled = false;
-    dsChecked = false;
-    dsErrorText = '';
-    focusable = true;
-    groupInvalid = false;
-    initialChecked = false;
-    errorTextId = `${this.dsId}-error`;
-    assistiveTextId = `${this.dsId}-assistive-text`;
-    async setFocus() {
-        this.inputElement.focus();
-    }
-    async setFocusable(flag) {
-        this.focusable = flag;
-    }
-    async setChecked() {
-        this.dsChecked = true;
-        this.dsCheck.emit();
-    }
-    async checkValidity() {
-        return this.inputElement?.checkValidity();
-    }
-    dsCheckedObserver(isChecked) {
-        const shouldEmit = this.getShouldEmit();
-        this.setDisableEventEmits(true);
-        if (shouldEmit) {
-            this.dsChange.emit({ checked: isChecked, value: this.dsValue });
-        }
-        const validityState = this.inputElement?.validity;
-        for (const key in validityState) {
-            if (validityState[key]) {
-                this.dsValidity.emit({
-                    flag: key,
-                    message: validityMessage(key),
-                });
-                break;
-            }
-        }
-    }
-    ariaAttributeObserver(newValue, _oldValue, propName) {
-        this.inheritedAttributes = {
-            ...this.inheritedAttributes,
-            [propName]: newValue,
-        };
-        forceUpdate(this);
-    }
-    componentWillLoad() {
-        this.getDeprecationWarningsForAriaAttributes(this.el);
-        this.setName();
-        if (this.radioGroup) {
-            this.updateCheckedState();
-        }
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el, ['aria-invalid']),
-        };
-        this.initialChecked = this.dsChecked;
-        this.setDisableEventEmits(true);
-    }
-    formResetCallback() {
-        this.dsErrorText = '';
-        this.dsChecked = this.initialChecked;
-        if (this.radioGroup) {
-            this.groupInvalid = !!this.radioGroup.dsErrorText;
-            this.dsErrorText = this.radioGroup.dsErrorText;
-        }
-    }
-    connectedCallback() {
-        this.radioGroup = this.el.closest(transformTagName('ds-radio-button-group', 'ds-radio-button', this.el));
-        if (this.radioGroup) {
-            this.groupInvalid = !!this.radioGroup.dsErrorText;
-            this.dsErrorText = this.radioGroup.dsErrorText;
-            this.radioGroup.addEventListener('dsRadioButtonGroupValueChange', this.updateCheckedState);
-            this.radioGroup.addEventListener('dsRadioButtonGroupInvalidStateChange', this.updateGroupInvalidState);
-        }
-    }
-    disconnectedCallback() {
-        if (this.radioGroup) {
-            this.radioGroup.removeEventListener('dsRadioButtonGroupValueChange', this.updateCheckedState);
-            this.radioGroup.removeEventListener('dsRadioButtonGroupInvalidStateChange', this.updateGroupInvalidState);
-        }
-        this.radioGroup = null;
-    }
-    handleInvalid = (e) => {
-        e.preventDefault();
-        if (this.groupInvalid || this.dsErrorsDisabled) {
-            return;
-        }
-        const validityState = this.inputElement?.validity;
-        for (const key in validityState) {
-            if (validityState[key]) {
-                this.dsSubmitInvalid.emit({
-                    flag: key,
-                    message: validityMessage(key),
-                });
-                break;
-            }
-        }
-    };
-    updateCheckedState = async () => {
-        if (!this.radioGroup)
-            return;
-        this.dsChecked = this.dsValue === (await this.radioGroup.getValue());
-    };
-    updateGroupInvalidState = (e) => {
-        this.groupInvalid = !!e.detail;
-        this.dsErrorText = e.detail;
-    };
-    handleInput = () => {
-        this.setDisableEventEmits(false);
-        this.setChecked();
-    };
-    handleFocus = () => {
-        this.dsFocus.emit(this.dsId);
-    };
-    handleBlur = () => {
-        this.dsBlur.emit(this.dsId);
-        if (this.groupInvalid || this.dsErrorsDisabled) {
-            return;
-        }
-        const validityState = this.inputElement?.validity;
-        for (const key in validityState) {
-            if (validityState[key]) {
-                this.dsValidity.emit({
-                    flag: key,
-                    message: validityMessage(key),
-                });
-                break;
-            }
-        }
-    };
-    getLegendText = () => {
-        if (this.dsRequired) {
-            return getRequiredText(this.dsLabel);
-        }
-        return this.dsLabel;
-    };
-    renderRadioIcon(baseClass) {
-        const iconClass = `${baseClass}__icon`;
-        const outerCircleClasses = classNames(`${iconClass}__outer-circle`, {
-            [`${iconClass}__outer-circle--checked`]: this.dsChecked,
-        });
-        const innerCircleClasses = classNames(`${iconClass}__inner-circle`);
-        return (h("slot", { name: "icon" }, h("div", { class: iconClass, "aria-hidden": "true" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("rect", { width: "24", height: "24", rx: "12", fill: "white" }), h("circle", { class: outerCircleClasses, cx: "12", cy: "12", r: "10", fill: "white", stroke: "#005A94", "stroke-width": "2" }), this.dsChecked && h("circle", { class: innerCircleClasses, cx: "12", cy: "12", r: "6", fill: "#005A94" })))));
-    }
-    renderRadioButton(baseClass) {
-        const classes = classNames(`${baseClass}`, {
-            [`${baseClass}--disabled`]: this.dsDisabled,
-            [`${baseClass}--invalid`]: !!this.dsErrorText,
-        });
-        const inputClasses = classNames(`${baseClass}__input`);
-        const textClasses = classNames(`${baseClass}__text`);
-        const tabindex = this.focusable ? 0 : -1;
-        const DsInputValidity = transformTagName('ds-input-validity', 'ds-radio-button', this.el);
-        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-radio-button', this.el);
-        const { ['aria-label']: attrAriaLabel, ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
-        const ariaLabel = this.dsAriaLabel ?? attrAriaLabel;
-        const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
-        const ariaInvalid = this.dsErrorText ? 'true' : this.inheritedAttributes['aria-invalid'];
-        return (h(Fragment, null, h("div", null, h("label", { class: classes }, h(DsVisuallyHidden, null, h("input", { ref: ref => (this.inputElement = ref), type: "radio", class: inputClasses, id: this.dsId, name: this.dsName, form: this.dsForm, value: this.dsValue, disabled: this.dsDisabled, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, checked: this.dsChecked, tabIndex: tabindex, required: this.dsRequired, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, ...restAttributes })), this.renderRadioIcon(baseClass), h("span", { class: textClasses }, h("slot", null, this.dsText)))), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: `${baseClass}__validity` }, h(DsInputValidity, { id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" }))))));
-    }
-    renderFieldset(baseClass) {
-        const fieldsetClasses = classNames(`${baseClass}-fieldset`);
-        const legendClasses = classNames(`${baseClass}-fieldset__legend`);
-        const assistiveTextClasses = classNames(`${baseClass}-fieldset__assistive-text`);
-        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !this.dsErrorsDisabled && !!this.dsErrorText && this.errorTextId].filter(Boolean).join(' ');
-        return (h("fieldset", { class: fieldsetClasses, ...ifDefined('aria-describedby', ariaDescribedBy) }, h("legend", { class: legendClasses }, h("slot", { name: "legend" }, this.getLegendText())), this.dsAssistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, h("slot", { name: "assistiveText" }, this.dsAssistiveText))), this.renderRadioButton(baseClass)));
-    }
-    render() {
-        const baseClass = cx('ds-radio-button');
-        if (this.dsLabel) {
-            return this.renderFieldset(baseClass);
-        }
-        return this.renderRadioButton(baseClass);
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "dsChecked": ["dsCheckedObserver"],
-        "aria-label": ["ariaAttributeObserver"],
-        "aria-describedby": ["ariaAttributeObserver"]
-    }; }
-    static get style() { return dsRadioButtonCss; }
-}, [326, "ds-radio-button", {
-        "dsMuteAriaDeprecationWarning": [4, "ds-mute-aria-deprecation-warning"],
-        "dsAriaLabel": [1, "ds-aria-label"],
-        "dsAriaDescribedby": [1, "ds-aria-describedby"],
-        "dsForm": [1, "ds-form"],
-        "dsId": [1, "ds-id"],
-        "dsName": [6145, "ds-name"],
-        "dsErrorsDisabled": [4, "ds-errors-disabled"],
-        "dsValue": [1, "ds-value"],
-        "dsLabel": [1, "ds-label"],
-        "dsAssistiveText": [1, "ds-assistive-text"],
-        "dsText": [1, "ds-text"],
-        "dsRequired": [4, "ds-required"],
-        "dsDisabled": [4, "ds-disabled"],
-        "dsChecked": [1028, "ds-checked"],
-        "dsErrorText": [1025, "ds-error-text"],
-        "focusable": [32],
-        "groupInvalid": [32],
-        "setFocus": [64],
-        "setFocusable": [64],
-        "setChecked": [64],
-        "checkValidity": [64]
-    }, undefined, {
-        "dsChecked": ["dsCheckedObserver"],
-        "aria-label": ["ariaAttributeObserver"],
-        "aria-describedby": ["ariaAttributeObserver"]
-    }]);
-declareComponentDependencies([h("ds-visually-hidden", null), h("ds-input-validity", null)]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-radio-button", "ds-feedback", "ds-icon", "ds-input-validity", "ds-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-radio-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsRadioButton$1);
-            }
-            break;
-        case "ds-feedback":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ds-input-validity":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ds-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsRadioButton = DsRadioButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsRadioButton, defineCustomElement };
+import{p as t,M as s,c as i,f as d,h as o,F as r,t as e}from"./p-D7drWwKe.js";import{c as a}from"./p-BfTCfPZ1.js";import{i as n,a as l}from"./p-BecId8t2.js";import{v as c,g as b}from"./p-DBW_vEKT.js";import{i as u,t as _,a as h,d as v}from"./p-J5Ghj1_T.js";import{c as g}from"./p-DgTb4Jpc.js";import{a as f,d as m}from"./p-BRKwvv98.js";import{d as p}from"./p-B3JeAI4k.js";import{d as F}from"./p-cBjVr9Tq.js";import{d as E}from"./p-qyZAXct-.js";import{d as S}from"./p-tTA4zhDH.js";const J=u("ds-radio-button"),P=t(class extends(s(f,p)){constructor(t){super(!1),!1!==t&&this.__registerHost(),this.dsChange=i(this,"dsChange",7),this.dsCheck=i(this,"dsCheck",7),this.dsFocus=i(this,"dsFocus",7),this.dsBlur=i(this,"dsBlur",7),this.dsSubmitInvalid=i(this,"dsSubmitInvalid",7),this.dsValidity=i(this,"dsValidity",7)}dsAriaLabel;dsAriaDescribedby;radioGroup=null;inputElement;inheritedAttributes={};get el(){return this}dsChange;dsCheck;dsFocus;dsBlur;dsSubmitInvalid;dsValidity;dsForm;dsId=J.next().value;_dsName=this.dsId;async setName(t){this._dsName=this.radioGroup?.dsName||t||this._dsName}get dsName(){return this._dsName}set dsName(t){this.setName(t)}dsErrorsDisabled=!1;dsValue=this.dsId;dsLabel;dsAssistiveText;dsText;dsRequired=!1;dsDisabled=!1;dsChecked=!1;dsErrorText="";focusable=!0;groupInvalid=!1;initialChecked=!1;errorTextId=this.dsId+"-error";assistiveTextId=this.dsId+"-assistive-text";async setFocus(){this.inputElement.focus()}async setFocusable(t){this.focusable=t}async setChecked(){this.dsChecked=!0,this.dsCheck.emit()}async checkValidity(){return this.inputElement?.checkValidity()}dsCheckedObserver(t){const s=this.getShouldEmit();this.setDisableEventEmits(!0),s&&this.dsChange.emit({checked:t,value:this.dsValue});const i=this.inputElement?.validity;for(const t in i)if(i[t]){this.dsValidity.emit({flag:t,message:c(t)});break}}ariaAttributeObserver(t,s,i){this.inheritedAttributes={...this.inheritedAttributes,[i]:t},d(this)}componentWillLoad(){this.getDeprecationWarningsForAriaAttributes(this.el),this.setName(),this.radioGroup&&this.updateCheckedState(),this.inheritedAttributes={...l(this,this.el),...n(this.el,["aria-invalid"])},this.initialChecked=this.dsChecked,this.setDisableEventEmits(!0)}formResetCallback(){this.dsErrorText="",this.dsChecked=this.initialChecked,this.radioGroup&&(this.groupInvalid=!!this.radioGroup.dsErrorText,this.dsErrorText=this.radioGroup.dsErrorText)}connectedCallback(){this.radioGroup=this.el.closest(_("ds-radio-button-group","ds-radio-button",this.el)),this.radioGroup&&(this.groupInvalid=!!this.radioGroup.dsErrorText,this.dsErrorText=this.radioGroup.dsErrorText,this.radioGroup.addEventListener("dsRadioButtonGroupValueChange",this.updateCheckedState),this.radioGroup.addEventListener("dsRadioButtonGroupInvalidStateChange",this.updateGroupInvalidState))}disconnectedCallback(){this.radioGroup&&(this.radioGroup.removeEventListener("dsRadioButtonGroupValueChange",this.updateCheckedState),this.radioGroup.removeEventListener("dsRadioButtonGroupInvalidStateChange",this.updateGroupInvalidState)),this.radioGroup=null}handleInvalid=t=>{if(t.preventDefault(),this.groupInvalid||this.dsErrorsDisabled)return;const s=this.inputElement?.validity;for(const t in s)if(s[t]){this.dsSubmitInvalid.emit({flag:t,message:c(t)});break}};updateCheckedState=async()=>{this.radioGroup&&(this.dsChecked=this.dsValue===await this.radioGroup.getValue())};updateGroupInvalidState=t=>{this.groupInvalid=!!t.detail,this.dsErrorText=t.detail};handleInput=()=>{this.setDisableEventEmits(!1),this.setChecked()};handleFocus=()=>{this.dsFocus.emit(this.dsId)};handleBlur=()=>{if(this.dsBlur.emit(this.dsId),this.groupInvalid||this.dsErrorsDisabled)return;const t=this.inputElement?.validity;for(const s in t)if(t[s]){this.dsValidity.emit({flag:s,message:c(s)});break}};getLegendText=()=>this.dsRequired?b(this.dsLabel):this.dsLabel;renderRadioIcon(t){const s=t+"__icon",i=a(s+"__outer-circle",{[s+"__outer-circle--checked"]:this.dsChecked}),d=a(s+"__inner-circle");return o("slot",{name:"icon"},o("div",{class:s,"aria-hidden":"true"},o("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("rect",{width:"24",height:"24",rx:"12",fill:"white"}),o("circle",{class:i,cx:"12",cy:"12",r:"10",fill:"white",stroke:"#005A94","stroke-width":"2"}),this.dsChecked&&o("circle",{class:d,cx:"12",cy:"12",r:"6",fill:"#005A94"}))))}renderRadioButton(t){const s=a(""+t,{[t+"--disabled"]:this.dsDisabled,[t+"--invalid"]:!!this.dsErrorText}),i=a(t+"__input"),d=a(t+"__text"),e=this.focusable?0:-1,n=_("ds-input-validity","ds-radio-button",this.el),l=_("ds-visually-hidden","ds-radio-button",this.el),{"aria-label":c,"aria-describedby":b,...u}=this.inheritedAttributes;return o(r,null,o("div",null,o("label",{class:s},o(l,null,o("input",{ref:t=>this.inputElement=t,type:"radio",class:i,id:this.dsId,name:this.dsName,form:this.dsForm,value:this.dsValue,disabled:this.dsDisabled,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur,onInvalid:this.handleInvalid,checked:this.dsChecked,tabIndex:e,required:this.dsRequired,"aria-label":this.dsAriaLabel??c,"aria-describedby":this.dsAriaDescribedby??b,"aria-invalid":this.dsErrorText?"true":this.inheritedAttributes["aria-invalid"],...u})),this.renderRadioIcon(t),o("span",{class:d},o("slot",null,this.dsText)))),!this.dsErrorsDisabled&&o("slot",{name:"validity"},o("div",{class:t+"__validity"},o(n,{id:this.errorTextId,dsText:this.dsErrorText,dsType:"error"}))))}renderFieldset(t){const s=a(t+"-fieldset"),i=a(t+"-fieldset__legend"),d=a(t+"-fieldset__assistive-text"),r=[!!this.dsAssistiveText&&this.assistiveTextId,!this.dsErrorsDisabled&&!!this.dsErrorText&&this.errorTextId].filter(Boolean).join(" ");return o("fieldset",{class:s,...h("aria-describedby",r)},o("legend",{class:i},o("slot",{name:"legend"},this.getLegendText())),this.dsAssistiveText&&o("small",{class:d,id:this.assistiveTextId},o("slot",{name:"assistiveText"},this.dsAssistiveText)),this.renderRadioButton(t))}render(){const t=g("ds-radio-button");return this.dsLabel?this.renderFieldset(t):this.renderRadioButton(t)}static get formAssociated(){return!0}static get watchers(){return{dsChecked:[{dsCheckedObserver:0}],"aria-label":[{ariaAttributeObserver:0}],"aria-describedby":[{ariaAttributeObserver:0}]}}static get style(){return".ds-radio-button__SPFJ1E.sc-ds-radio-button{box-sizing:border-box;display:inline-flex;color:var(--ds-textColor-default)}.ds-radio-button__SPFJ1E--disabled.sc-ds-radio-button{color:var(--ds-textColor-disabled-onLight)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:has(input:focus-visible) .ds-radio-button__SPFJ1E__icon.sc-ds-radio-button{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-bgColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-bgColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 0.5)}.ds-radio-button__SPFJ1E__icon.sc-ds-radio-button{border-radius:50%;height:24px;width:24px;margin:10px 10px 10px 0}.ds-radio-button__SPFJ1E__text.sc-ds-radio-button{margin-top:10px;padding-right:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide)}.ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white)}.ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-primary);fill:var(--ds-bgColor-white)}.ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-hover)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-80);fill:var(--ds-bgColor-white)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-hover)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-default);fill:var(--ds-bgColor-white-active)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-palette-mainBlue-90);fill:var(--ds-bgColor-white)}.ds-radio-button__SPFJ1E.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled):not(.ds-radio-button__SPFJ1E--invalid) .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-primary-active)}.ds-radio-button__SPFJ1E--disabled.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__SPFJ1E--disabled.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-disabled-onLight);fill:var(--ds-bgColor-disabled-onLight)}.ds-radio-button__SPFJ1E--disabled.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-bgColor-transparent-onLight-active)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-hover)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:hover:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__outer-circle.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__outer-circle--checked.sc-ds-radio-button{stroke:var(--ds-borderColor-danger);fill:var(--ds-bgColor-danger-active)}.ds-radio-button__SPFJ1E--invalid.sc-ds-radio-button:active:not(.ds-radio-button__SPFJ1E--disabled) .ds-radio-button__SPFJ1E__icon__inner-circle.sc-ds-radio-button{stroke:unset;fill:var(--ds-iconColor-danger)}.ds-radio-button__SPFJ1E-fieldset.sc-ds-radio-button{display:inline-flex;flex-direction:column;border:none;margin:0;padding:0}.ds-radio-button__SPFJ1E-fieldset__legend.sc-ds-radio-button{padding-inline:0;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-3xSmall)}.ds-radio-button__SPFJ1E-fieldset__assistive-text.sc-ds-radio-button{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}"}},[838,"ds-radio-button",{dsMuteAriaDeprecationWarning:[4,"ds-mute-aria-deprecation-warning"],dsAriaLabel:[1,"ds-aria-label"],dsAriaDescribedby:[1,"ds-aria-describedby"],dsForm:[1,"ds-form"],dsId:[1,"ds-id"],dsName:[6145,"ds-name"],dsErrorsDisabled:[4,"ds-errors-disabled"],dsValue:[1,"ds-value"],dsLabel:[1,"ds-label"],dsAssistiveText:[1,"ds-assistive-text"],dsText:[1,"ds-text"],dsRequired:[4,"ds-required"],dsDisabled:[4,"ds-disabled"],dsChecked:[1028,"ds-checked"],dsErrorText:[1025,"ds-error-text"],focusable:[32],groupInvalid:[32],setFocus:[64],setFocusable:[64],setChecked:[64],checkValidity:[64]},void 0,{dsChecked:[{dsCheckedObserver:0}],"aria-label":[{ariaAttributeObserver:0}],"aria-describedby":[{ariaAttributeObserver:0}]}]);v([o("ds-visually-hidden",null),o("ds-input-validity",null)]);const k=P,C=function(){"undefined"!=typeof customElements&&["ds-radio-button","ds-feedback","ds-icon","ds-input-validity","ds-visually-hidden"].forEach((t=>{switch(t){case"ds-radio-button":customElements.get(e(t))||customElements.define(e(t),P);break;case"ds-feedback":customElements.get(e(t))||F();break;case"ds-icon":customElements.get(e(t))||m();break;case"ds-input-validity":customElements.get(e(t))||E();break;case"ds-visually-hidden":customElements.get(e(t))||S()}}))};export{k as DsRadioButton,C as defineCustomElement}