@mgdis/mg-components 6.13.1 → 6.15.0

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

@@ -2,12 +2,14 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 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 defineErrorMessage } from './mg-input.utils.js';
+import { d as defineCustomElement$7 } from './mg-details2.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}";
+const mgInputRadioCss = ".mg-c-input__error-details{margin:0}.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
@@ -86,11 +88,21 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
             // reset guard
             this.handlerInProgress = undefined;
         };
+        /**
+         * Test if component has items
+         * @returns truthy if component has items
+         */
+        this.hasInputValue = () => { var _a; return ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > 0; };
+        /**
+         * Test if component has no value error message displayed
+         * @returns truthy if compent display no value error message
+         */
+        this.hasNoValueErrorMessageDisplay = () => this.errorMessage === this.messages.errors.noValue;
         /**
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);
+            this.setValidity(this.readonly || this.disabled || (this.hasInputValue() && this.getInvalidElement() === undefined));
         };
         /**
          * Set input error message
@@ -104,11 +116,22 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
                 if (errorMessage !== undefined) {
                     this.errorMessage = errorMessage;
                 }
+                else if (!this.hasInputValue()) {
+                    this.errorMessage = this.messages.errors.noValue;
+                }
                 else if (invalidElement.validity.valueMissing) {
                     this.errorMessage = this.messages.errors.required;
                 }
             }
         };
+        /**
+         * Reset error message
+         */
+        this.resetErrorMessage = () => {
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        };
         /**
          * get invalid element
          * @returns element
@@ -130,17 +153,29 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
+        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
+            this.options = [];
+            this.displayError();
+        }
         // Validate if items have required min length
-        if (typeof newValue === 'object' && newValue.length < 2) {
+        else if (Array.isArray(newValue) && 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 }));
+            // force to reset error when noValueError is displaied
+            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
+                this.resetErrorMessage();
+            }
         }
         // Object array
-        else if (newValue && newValue.every(item => isOption(item))) {
+        else if (Array.isArray(newValue) && newValue.every(isOption)) {
             this.options = newValue;
+            // force to reset error when noValueError is displaied
+            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
+                this.resetErrorMessage();
+            }
         }
         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)}.`);
@@ -236,9 +271,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.checkValidity();
-                    this.errorMessage = undefined;
-                    this.hasDisplayedError = false;
+                    this.resetErrorMessage();
                     resolve();
                 });
             });
@@ -284,10 +317,12 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '9460e2802454e18c1f79ebc63bef0b5e4712acf8', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], 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))))))));
+        return (h("mg-input", { key: 'ecb4efa3a4ccfae5ff56c4a304158c7a03c73153', 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: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly
+            ? this.readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)
+            : this.options.length > 0 && (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 {
@@ -299,7 +334,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
         "disabled": ["handleValidityChange", "watchDisabled"]
     }; }
     static get style() { return mgInputRadioCss; }
-}, [1, "mg-input-radio", {
+}, [257, "mg-input-radio", {
         "value": [1032],
         "items": [16],
         "identifier": [1],
@@ -314,6 +349,7 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
         "tooltip": [1],
         "tooltipPosition": [1, "tooltip-position"],
         "helpText": [1, "help-text"],
+        "noValueErrorDetail": [1, "no-value-error-detail"],
         "valid": [1028],
         "invalid": [1028],
         "classCollection": [32],
@@ -336,13 +372,18 @@ 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"];
+    const components = ["mg-input-radio", "mg-details", "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-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
         case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
@@ -376,6 +417,3 @@ const MgInputRadio = MgInputRadio$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputRadio, defineCustomElement };
-//# sourceMappingURL=mg-input-radio.js.map
-
-//# sourceMappingURL=mg-input-radio.js.map