@mgdis/mg-components 6.20.0 → 6.21.0

package/dist/components/mg-input-radio.js

@@ -1,392 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ClassList, d as allItemsAreString, t as toString, i as isValidString } from './index2.js';
-import { d as defineCustomElement$5, b as classFieldset, c as classReadonly, a as classDisabled } from './mg-input2.js';
-import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$6 } from './mg-icon2.js';
-import { d as defineCustomElement$4 } from './mg-input-title2.js';
-import { d as defineCustomElement$3 } from './mg-tooltip2.js';
-import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
-
-const mgInputRadioCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}";
-
-/**
- * type Option validation function
- * @param option - radio option
- * @returns radio option type is valid
- */
-const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
-const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.valueChange = createEvent(this, "value-change", 7);
-        this.inputValid = createEvent(this, "input-valid", 7);
-        /************
-         * Internal *
-         ************/
-        // HTML selector
-        this.inputs = [];
-        // classes
-        this.classVerticalList = 'mg-c-input--vertical-list';
-        // hasDisplayedError (triggered by blur event)
-        this.hasDisplayedError = false;
-        this.customErrorMessage = { lock: false };
-        /**
-         * Input name
-         * If not set the value equals the identifier
-         */
-        this.name = this.identifier;
-        /**
-         * Define if label is displayed on top
-         */
-        this.labelOnTop = false;
-        /**
-         * Define if label is visible
-         */
-        this.labelHide = false;
-        /**
-         * Define if inputs are display verticaly
-         */
-        this.inputVerticalList = false;
-        /**
-         * Define if input is required
-         */
-        this.required = false;
-        /**
-         * Define if input is readonly
-         */
-        this.readonly = false;
-        /**
-         * Define if input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Define tooltip position
-         */
-        this.tooltipPosition = 'input';
-        /**
-         * Component classes
-         */
-        this.classCollection = new ClassList(['mg-c-input--radio', classFieldset]);
-        /**
-         * Handle input event
-         * @param event - input event
-         */
-        this.handleInput = (event) => {
-            this.checkValidity();
-            this.value = this.options[event.target.value].value;
-        };
-        /**
-         * Handle blur event
-         */
-        this.handleBlur = () => {
-            this.handlerInProgress = 'blur';
-            this.checkValidity();
-            this.setErrorMessage();
-            // reset guard
-            this.handlerInProgress = undefined;
-        };
-        /**
-         * Check if input is valid
-         */
-        this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);
-        };
-        /**
-         * Set input error message
-         * @param fromSetErrorContext - context come from `setError` method
-         */
-        this.setErrorMessage = (fromSetErrorContext = false) => {
-            const invalidElement = this.getInvalidElement();
-            // Set error message
-            this.errorMessage = undefined;
-            if (!this.valid) {
-                // Does have a new custom error message OR does have a custom error message locked
-                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
-                    this.errorMessage = this.customErrorMessage.message;
-                }
-                // required
-                else if (invalidElement.validity.valueMissing) {
-                    this.errorMessage = this.messages.errors.required;
-                }
-            }
-        };
-        /**
-         * get invalid element
-         * @returns element
-         */
-        this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    watchValue(newValue) {
-        var _a;
-        if (allItemsAreString(this.items) && typeof newValue === 'string') {
-            this.readonlyValue = newValue;
-        }
-        else if (Array.isArray(this.items) && this.items.every(isOption)) {
-            this.readonlyValue = (_a = this.items.find(item => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
-        }
-        else {
-            this.readonlyValue = null;
-        }
-        this.valueChange.emit(newValue);
-    }
-    validateItems(newValue) {
-        // Validate if items have required min length
-        if (typeof newValue === 'object' && newValue.length < 2) {
-            throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${toString(newValue)}.`);
-        }
-        // String array
-        else if (allItemsAreString(newValue)) {
-            this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
-        }
-        // Object array
-        else if (newValue && newValue.every(item => isOption(item))) {
-            this.options = newValue;
-        }
-        else {
-            throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${toString(newValue)}.`);
-        }
-    }
-    watchInputVerticalList(newValue) {
-        if (newValue)
-            this.classCollection.add(this.classVerticalList);
-        else
-            this.classCollection.delete(this.classVerticalList);
-    }
-    watchReadonly(newValue) {
-        if (newValue)
-            this.classCollection.add(classReadonly);
-        else
-            this.classCollection.delete(classReadonly);
-    }
-    handleValidityChange(newValue, _oldValue, prop) {
-        this.inputs.forEach(input => {
-            input[prop] = newValue;
-        });
-        this.checkValidity();
-        if (this.hasDisplayedError) {
-            this.setErrorMessage();
-            this.hasDisplayedError = false;
-        }
-    }
-    watchDisabled(newValue) {
-        if (newValue)
-            this.classCollection.add(classDisabled);
-        else
-            this.classCollection.delete(classDisabled);
-    }
-    /**
-     * Set focus on input.
-     */
-    async setFocus() {
-        if (this.inputs.length > 0) {
-            this.inputs[0].focus();
-        }
-    }
-    /**
-     * Display input error if it exists.
-     */
-    displayError() {
-        // Use `Promise` as requested for stencil method
-        // Use `requestAnimationFrame` to ensure:
-        // - DOM is fully updated before validation
-        // - Async operations are completed
-        // - No timing issues with Stencil's render cycle
-        // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
-            requestAnimationFrame(() => {
-                this.checkValidity();
-                this.setErrorMessage();
-                this.hasDisplayedError = this.invalid;
-                resolve();
-            });
-        });
-    }
-    /**
-     * Set an error and display a custom error message.
-     * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
-     * It must be paired with an error message to display for the given context.
-     * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
-     * @param valid - value indicating the validity
-     * @param errorMessage - the error message to display
-     * @param errorMessageLock - lock the error message and validity state
-     */
-    async setError(valid, errorMessage, errorMessageLock = false) {
-        if (typeof valid !== 'boolean') {
-            throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
-        }
-        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
-            throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
-        }
-        else {
-            this.customErrorMessage = {
-                lock: valid ? false : errorMessageLock,
-                message: valid ? undefined : errorMessage,
-            };
-            this.setValidity(valid);
-            this.setErrorMessage(true);
-            this.hasDisplayedError = this.invalid;
-        }
-    }
-    /**
-     * Reset value, validity and error state
-     */
-    async reset() {
-        if (!this.readonly) {
-            this.value = undefined;
-            // Use `Promise` as requested for stencil method
-            // Use `requestAnimationFrame` to ensure:
-            // - DOM is fully updated before validation
-            // - Async operations are completed
-            // - No timing issues with Stencil's render cycle
-            // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
-                requestAnimationFrame(() => {
-                    // unlock validity check by reseting customErrorMessage
-                    this.customErrorMessage = { lock: false };
-                    this.checkValidity();
-                    this.errorMessage = undefined;
-                    this.hasDisplayedError = false;
-                    resolve();
-                });
-            });
-        }
-    }
-    /**
-     * Method to set validity values
-     * @param newValue - valid new value
-     */
-    setValidity(newValue) {
-        const oldValue = this.valid;
-        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
-            this.valid = newValue;
-        }
-        this.invalid = !this.valid;
-        // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValue))
-            this.inputValid.emit(this.valid);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Check if component props are well configured on init
-     * @returns timeout
-     */
-    componentWillLoad() {
-        // Get locales
-        this.messages = initLocales(this.element).messages;
-        // Validate
-        this.validateItems(this.items);
-        this.watchInputVerticalList(this.inputVerticalList);
-        this.watchReadonly(this.readonly);
-        this.watchDisabled(this.disabled);
-        this.watchValue(this.value);
-        // Check validity when component is ready
-        // return a promise to process action only in the FIRST render().
-        // https://stenciljs.com/docs/component-lifecycle#componentwillload
-        return setTimeout(() => {
-            this.checkValidity();
-        }, 0);
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (h("mg-input", { key: '9290ab8e5048dd6806985ab55d13bd8b0dd93bd1', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
-                if (el !== null)
-                    this.inputs[index] = el;
-            } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title))))))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "value": ["watchValue"],
-        "items": ["validateItems"],
-        "inputVerticalList": ["watchInputVerticalList"],
-        "readonly": ["watchReadonly", "handleValidityChange"],
-        "required": ["handleValidityChange"],
-        "disabled": ["handleValidityChange", "watchDisabled"]
-    }; }
-    static get style() { return mgInputRadioCss; }
-}, [257, "mg-input-radio", {
-        "value": [1032],
-        "items": [16],
-        "identifier": [1],
-        "name": [1],
-        "label": [1],
-        "labelOnTop": [4, "label-on-top"],
-        "labelHide": [4, "label-hide"],
-        "inputVerticalList": [4, "input-vertical-list"],
-        "required": [4],
-        "readonly": [4],
-        "disabled": [4],
-        "tooltip": [1],
-        "tooltipPosition": [1, "tooltip-position"],
-        "helpText": [1, "help-text"],
-        "valid": [1028],
-        "invalid": [1028],
-        "classCollection": [32],
-        "errorMessage": [32],
-        "options": [32],
-        "readonlyValue": [32],
-        "setFocus": [64],
-        "displayError": [64],
-        "setError": [64],
-        "reset": [64]
-    }, undefined, {
-        "value": ["watchValue"],
-        "items": ["validateItems"],
-        "inputVerticalList": ["watchInputVerticalList"],
-        "readonly": ["watchReadonly", "handleValidityChange"],
-        "required": ["handleValidityChange"],
-        "disabled": ["handleValidityChange", "watchDisabled"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["mg-input-radio", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "mg-input-radio":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, MgInputRadio$1);
-            }
-            break;
-        case "mg-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "mg-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "mg-input-title":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "mg-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "mg-tooltip-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const MgInputRadio = MgInputRadio$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { MgInputRadio, defineCustomElement };
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as s,h as a}from"@stencil/core/internal/client";import{C as n,d as r,t as o,i as h}from"./index2.js";import{a as l,c as m,b as p}from"./mg-input.conf.js";import{i as c}from"./index3.js";import{d as u}from"./mg-icon2.js";import{d}from"./mg-input2.js";import{d as g}from"./mg-input-title2.js";import{d as b}from"./mg-tooltip2.js";import{d as f}from"./mg-tooltip-content2.js";const v=t=>"object"==typeof t&&"string"==typeof t.title&&void 0!==t.value,y=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.valueChange=s(this,"value-change",7),this.inputValid=s(this,"input-valid",7),this.inputs=[],this.classVerticalList="mg-c-input--vertical-list",this.hasDisplayedError=!1,this.customErrorMessage={lock:!1},this.name=this.identifier,this.labelOnTop=!1,this.labelHide=!1,this.inputVerticalList=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.tooltipPosition="input",this.classCollection=new n(["mg-c-input--radio",l]),this.handleInput=t=>{this.checkValidity(),this.value=this.options[t.target.value].value},this.handleBlur=()=>{this.handlerInProgress="blur",this.checkValidity(),this.setErrorMessage(),this.handlerInProgress=void 0},this.checkValidity=()=>{this.setValidity(this.readonly||this.disabled||void 0===this.getInvalidElement())},this.setErrorMessage=(t=!1)=>{const i=this.getInvalidElement();this.errorMessage=void 0,this.valid||(t||this.customErrorMessage.lock&&void 0!==this.customErrorMessage.message?this.errorMessage=this.customErrorMessage.message:i.validity.valueMissing&&(this.errorMessage=this.messages.errors.required))},this.getInvalidElement=()=>this.inputs.find((t=>!t.disabled&&!t.readOnly&&!t.checkValidity()))}watchValue(t){var i;this.readonlyValue=r(this.items)&&"string"==typeof t?t:Array.isArray(this.items)&&this.items.every(v)?null===(i=this.items.find((i=>i.value===t)))||void 0===i?void 0:i.title:null,this.valueChange.emit(t)}validateItems(t){if("object"==typeof t&&t.length<2)throw Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${o(t)}.`);if(r(t))this.options=t.map((t=>({title:t,value:t,disabled:this.disabled})));else{if(!t||!t.every((t=>v(t))))throw Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${o(t)}.`);this.options=t}}watchInputVerticalList(t){t?this.classCollection.add(this.classVerticalList):this.classCollection.delete(this.classVerticalList)}watchReadonly(t){t?this.classCollection.add(m):this.classCollection.delete(m)}handleValidityChange(t,i,e){this.inputs.forEach((i=>{i[e]=t})),this.checkValidity(),this.hasDisplayedError&&(this.setErrorMessage(),this.hasDisplayedError=!1)}watchDisabled(t){t?this.classCollection.add(p):this.classCollection.delete(p)}async setFocus(){this.inputs.length>0&&this.inputs[0].focus()}displayError(){return new Promise((t=>{requestAnimationFrame((()=>{this.checkValidity(),this.setErrorMessage(),this.hasDisplayedError=this.invalid,t()}))}))}async setError(t,i,e=!1){if("boolean"!=typeof t)throw Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');if(void 0!==i&&!h(i))throw Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');this.customErrorMessage={lock:!t&&e,message:t?void 0:i},this.setValidity(t),this.setErrorMessage(!0),this.hasDisplayedError=this.invalid}async reset(){if(!this.readonly)return this.value=void 0,new Promise((t=>{requestAnimationFrame((()=>{this.customErrorMessage={lock:!1},this.checkValidity(),this.errorMessage=void 0,this.hasDisplayedError=!1,t()}))}))}setValidity(t){const i=this.valid;this.customErrorMessage.lock&&(void 0===this.customErrorMessage.message||t)||(this.valid=t),this.invalid=!this.valid,(void 0===this.handlerInProgress||"blur"===this.handlerInProgress&&this.valid!==i)&&this.inputValid.emit(this.valid)}componentWillLoad(){return this.messages=c(this.element).messages,this.validateItems(this.items),this.watchInputVerticalList(this.inputVerticalList),this.watchReadonly(this.readonly),this.watchDisabled(this.disabled),this.watchValue(this.value),setTimeout((()=>{this.checkValidity()}),0)}render(){return a("mg-input",{key:"8d26edd50d44fbba4fee5fa6ef36aa3c455b1e5b",label:this.label,identifier:this.identifier,class:this.classCollection.join(),labelOnTop:this.labelOnTop,labelHide:this.labelHide,required:this.required,tooltip:this.tooltip,tooltipPosition:this.readonly&&!this.value?"label":this.tooltipPosition,helpText:this.helpText,errorMessage:this.errorMessage},this.readonly?this.readonlyValue&&a("b",{class:"mg-c-input__readonly-value"},this.readonlyValue):a("ul",{class:"mg-c-input__input-group-container",role:"list"},this.options.map(((t,i)=>a("li",{key:t.title,class:{"mg-c-input__input-group":!0,"mg-c-input__input-group--disabled":this.disabled||t.disabled}},a("input",{type:"radio",id:this.identifier+"_"+i,name:this.identifier,value:i,checked:JSON.stringify(this.value)===JSON.stringify(this.options[i].value),disabled:this.disabled||t.disabled,required:this.required,onBlur:this.handleBlur,onInput:this.handleInput,ref:t=>{null!==t&&(this.inputs[i]=t)}}),a("label",{htmlFor:this.identifier+"_"+i},t.title))))))}get element(){return this}static get watchers(){return{value:[{watchValue:0}],items:[{validateItems:0}],inputVerticalList:[{watchInputVerticalList:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}]}}static get style(){return".mg-c-input__readonly-value{min-height:var(--mg-b-font-size);align-self:flex-start;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);overflow-wrap:anywhere}.mg-c-input.mg-c-input--fieldset{padding:0;border:0;margin-right:0;margin-left:0}.mg-c-input.mg-c-input--fieldset input[type=radio],.mg-c-input.mg-c-input--fieldset input[type=checkbox]{width:var(--mg-c-input-check-size);height:var(--mg-c-input-check-size);flex-shrink:0;margin:calc((var(--mg-b-font-size)*var(--mg-b-line-height) - var(--mg-c-input-check-size))/2) var(--mg-b-size-8) 0 0}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group{display:flex;align-items:start}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group-container{display:flex;flex-wrap:wrap;padding:0;margin:0;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);gap:var(--mg-b-size-12) var(--mg-b-size-24);list-style:none}.mg-c-input.mg-c-input--fieldset .mg-c-input__input-group.mg-c-input__input-group--disabled label{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--fieldset.mg-c-input--vertical-list .mg-c-input__input-group-container,.mg-c-input.mg-c-input--fieldset.mg-c-input--checkbox-multi .mg-c-input__input-group-container{flex-direction:column}.mg-c-input.mg-c-input--fieldset.mg-c-input--label-on-top .mg-c-input__input-group-container{margin-top:var(--mg-b-size-8)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}"}},[1,"mg-input-radio",{value:[1032],items:[16],identifier:[1],name:[1],label:[1],labelOnTop:[4,"label-on-top"],labelHide:[4,"label-hide"],inputVerticalList:[4,"input-vertical-list"],required:[4],readonly:[4],disabled:[4],tooltip:[1],tooltipPosition:[1,"tooltip-position"],helpText:[1,"help-text"],valid:[1028],invalid:[1028],classCollection:[32],errorMessage:[32],options:[32],readonlyValue:[32],setFocus:[64],displayError:[64],setError:[64],reset:[64]},void 0,{value:[{watchValue:0}],items:[{validateItems:0}],inputVerticalList:[{watchInputVerticalList:0}],readonly:[{watchReadonly:0},{handleValidityChange:0}],required:[{handleValidityChange:0}],disabled:[{handleValidityChange:0},{watchDisabled:0}]}]);function w(){"undefined"!=typeof customElements&&["mg-input-radio","mg-icon","mg-input","mg-input-title","mg-tooltip","mg-tooltip-content"].forEach((i=>{switch(i){case"mg-input-radio":customElements.get(t(i))||customElements.define(t(i),y);break;case"mg-icon":customElements.get(t(i))||u();break;case"mg-input":customElements.get(t(i))||d();break;case"mg-input-title":customElements.get(t(i))||g();break;case"mg-tooltip":customElements.get(t(i))||b();break;case"mg-tooltip-content":customElements.get(t(i))||f()}}))}w();const _=y,E=w;export{_ as MgInputRadio,E as defineCustomElement}