@mgdis/mg-components 6.15.0 → 6.16.0

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

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { C as ClassList, i as isValidString, o as dateRegExp, p as dateToString, t as toString } from './index2.js';
 import { l as localeDate, a as localeDatePattern, i as initLocales } from './index3.js';
 import { d as defineCustomElement$5, c as classReadonly, a as classDisabled } from './mg-input2.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';
@@ -425,18 +424,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-date", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-date", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-date":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MgInputDate$1);
             }
             break;
-        case "mg-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
         case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();

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

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { C as ClassList, i as isValidString, t as toString } from './index2.js';
 import { b as localeNumber, c as localeUnit, d as localePercent, e as localeCurrency, i as initLocales } from './index3.js';
 import { d as defineCustomElement$5, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.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';
@@ -551,18 +550,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-numeric", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-numeric", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-numeric":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MgInputNumeric$1);
             }
             break;
-        case "mg-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
         case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();

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

@@ -2,8 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { C as ClassList, i as isValidString } from './index2.js';
 import { d as defineCustomElement$5, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
 import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$8 } from './mg-button2.js';
-import { d as defineCustomElement$7 } from './mg-details2.js';
+import { d as defineCustomElement$7 } from './mg-button2.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';
@@ -301,7 +300,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-password", "mg-button", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-password", "mg-button", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-password":
             if (!customElements.get(tagName)) {
@@ -309,11 +308,6 @@ function defineCustomElement$1() {
             }
             break;
         case "mg-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mg-details":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

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

@@ -2,14 +2,12 @@ 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__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}";
+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
@@ -88,21 +86,11 @@ 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.hasInputValue() && this.getInvalidElement() === undefined));
+            this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);
         };
         /**
          * Set input error message
@@ -116,22 +104,11 @@ 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
@@ -153,29 +130,17 @@ 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
-        else if (Array.isArray(newValue) && newValue.length < 2) {
+        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 }));
-            // force to reset error when noValueError is displaied
-            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
-                this.resetErrorMessage();
-            }
         }
         // Object array
-        else if (Array.isArray(newValue) && newValue.every(isOption)) {
+        else if (newValue && newValue.every(item => isOption(item))) {
             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)}.`);
@@ -271,7 +236,9 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.checkValidity();
+                    this.errorMessage = undefined;
+                    this.hasDisplayedError = false;
                     resolve();
                 });
             });
@@ -317,12 +284,10 @@ const MgInputRadio$1 = /*@__PURE__*/ proxyCustomElement(class MgInputRadio exten
      * @returns HTML Element
      */
     render() {
-        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))))))));
+        return (h("mg-input", { key: '048aa732e7f8593701c9397e571b97584bc5e37b', 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 {
@@ -349,7 +314,6 @@ 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],
@@ -372,18 +336,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-radio", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    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-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
         case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();

package/dist/components/mg-input-rich-text-editor.js

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h } from
 import { i as isValidString, C as ClassList, t as toString } from './index2.js';
 import { d as defineCustomElement$5, c as classReadonly, a as classDisabled } from './mg-input2.js';
 import { i as initLocales } from './index3.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';
@@ -16745,18 +16744,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-rich-text-editor", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-rich-text-editor", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-rich-text-editor":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MgInputRichTextEditor$1);
             }
             break;
-        case "mg-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
         case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();

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

@@ -2,14 +2,12 @@ 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$4, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
 import { i as initLocales } from './index3.js';
-import { d as defineErrorMessage } from './mg-input.utils.js';
-import { d as defineCustomElement$6 } from './mg-details2.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip2.js';
 import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 
-const mgInputSelectCss = ".mg-c-input__error-details{margin:0}.mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.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__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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}.mg-c-input__box{padding-top:0;padding-right:var(--mg-b-size-8);padding-bottom:0}@media screen and (max-width: 767px){.mg-c-input__box{width:100%}}";
+const mgInputSelectCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);box-sizing:border-box;padding:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-8);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:var(--mg-c-input-border-radius);background-color:var(--mg-b-color-light);color:var(--mg-b-color-dark);font-family:inherit;font-size:var(--mg-b-font-size);text-align:var(--mg-c-input-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-c-input-placeholder-color-text);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 var(--mg-b-size-4) var(--mg-c-input-color-box-shadow-focus)}.mg-c-input__box:disabled{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--has-error .mg-c-input__box{border-color:var(--mg-b-color-danger)}.mg-c-input.mg-c-input--is-input-group-append{--mg-c-button-border-radius-top-left:0;--mg-c-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:calc(-1*var(--mg-b-size-border));border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-c-button-border-radius-top-right:0;--mg-c-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-c-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-c-button-border-radius-top-right:var(--mg-c-input-border-radius);--mg-c-button-border-radius-bottom-right:var(--mg-c-input-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){align-self:start;padding-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon:first-of-type,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container>mg-icon:first-of-type{position:absolute;top:50%;left:var(--mg-b-size-8);color:var(--mg-c-input-color-icon);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box,.mg-c-input.mg-c-input--has-icon .mg-c-input__input-group-container .mg-c-input__box{padding-left:calc(var(--mg-b-size-16) + var(--mg-b-size-8)*2)}.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__input-container{width:100%;flex:1 auto}.mg-c-input.mg-c-input--width-full .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left,.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left{width:max-content}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:has(textarea),.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:has(textarea){flex-grow:inherit}.mg-c-input.mg-c-input--width-2 .mg-c-input__box{width:var(--mg-b-size-48)}.mg-c-input.mg-c-input--width-2 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-48) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-4 .mg-c-input__box{width:var(--mg-b-size-72)}.mg-c-input.mg-c-input--width-4 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(var(--mg-b-size-72) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-16 .mg-c-input__box{width:calc(26*var(--mg-b-size-8))}.mg-c-input.mg-c-input--width-16 .mg-c-input__with-character-left:not(:has(textarea)) .mg-c-input__box{width:calc(calc(26 * var(--mg-b-size-8)) + var(--mg-c-character-left-message-length)*(.35ch + .3rem))}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:stretch}.mg-c-input.mg-c-input--is-input-group-append ::slotted([slot=append-input]),.mg-c-input.mg-c-input--is-append-input-slot-content ::slotted([slot=append-input]){width:auto}:host(.mg-c-input.mg-c-input--width-full) ::slotted(*:not(mg-input-title)){width:100%;max-width:100%}.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}.mg-c-input__box{padding-top:0;padding-right:var(--mg-b-size-8);padding-bottom:0}@media screen and (max-width: 767px){.mg-c-input__box{width:100%}}";
 
 /**
  * Check if item is a well configured option
@@ -147,16 +145,6 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
          * @returns truthy if input.value is an item
          */
         this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
-        /**
-         * 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;
         /**
          * Handle blur event
          */
@@ -176,7 +164,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || (this.hasInputValue() && this.input.checkValidity())));
+            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || this.input.checkValidity()));
         };
         /**
          * Set input error message
@@ -189,22 +177,11 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
                 if (errorMessage !== undefined) {
                     this.errorMessage = errorMessage;
                 }
-                else if (!this.hasInputValue()) {
-                    this.errorMessage = this.messages.errors.noValue;
-                }
                 else if (this.input.validity.valueMissing) {
                     this.errorMessage = this.messages.errors.required;
                 }
             }
         };
-        /**
-         * Reset error message
-         */
-        this.resetErrorMessage = () => {
-            this.checkValidity();
-            this.errorMessage = undefined;
-            this.hasDisplayedError = false;
-        };
         /**
          * Render option
          * @param option - to render
@@ -222,11 +199,9 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
-        let resetMessage = false;
         // Empty options
-        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
+        if (newValue.length === 0) {
             this.options = [];
-            this.displayError();
         }
         // String array
         else if (allItemsAreString(newValue)) {
@@ -234,8 +209,6 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
                 this.valueExist = newValue.includes(this.value);
             }
             this.options = newValue.map(item => ({ title: item, value: item }));
-            // force to reset error when noValueError is displaied
-            resetMessage = this.invalid && this.hasNoValueErrorMessageDisplay();
         }
         // Object array
         else if (allItemsAreOptions(newValue)) {
@@ -248,15 +221,10 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
             else {
                 this.options = newValue;
             }
-            // force to reset error when noValueError is displaied
-            resetMessage = this.invalid && this.hasNoValueErrorMessageDisplay();
         }
         else {
             throw new Error(`<mg-input-select> prop "items" is required, can be an empty Array or all items must be the same type: string or Option. Passed value: ${toString(newValue)}.`);
         }
-        if (resetMessage) {
-            this.resetErrorMessage();
-        }
     }
     watchReadonly(newValue) {
         if (newValue)
@@ -350,7 +318,9 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.resetErrorMessage();
+                    this.checkValidity();
+                    this.errorMessage = undefined;
+                    this.hasDisplayedError = false;
                     resolve();
                 });
             });
@@ -402,7 +372,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
      */
     render() {
         const readonlyValue = this.getReadonlyValue();
-        return (h("mg-input", { key: 'b980e7e5bd2e1eac6e0075e61f3a6d8ab993216a', 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 && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled || !this.hasInputValue(), required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: '1394827503d3f2dd71efc6efa389ac707573d2ec', 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 && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && h("b", { class: "mg-c-input__readonly-value" }, readonlyValue)) : (h("select", { class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -436,7 +406,6 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
         "tooltip": [1],
         "tooltipPosition": [1, "tooltip-position"],
         "helpText": [1, "help-text"],
-        "noValueErrorDetail": [1, "no-value-error-detail"],
         "valid": [1028],
         "invalid": [1028],
         "classCollection": [32],
@@ -459,18 +428,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-select", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-select", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-select":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MgInputSelect);
             }
             break;
-        case "mg-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
         case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();

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

@@ -2,8 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { C as ClassList, i as isValidString, d as allItemsAreString, t as toString } from './index2.js';
 import { d as defineCustomElement$4, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
 import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$7 } from './mg-character-left2.js';
-import { d as defineCustomElement$6 } from './mg-details2.js';
+import { d as defineCustomElement$6 } from './mg-character-left2.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip2.js';
@@ -457,7 +456,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-text", "mg-character-left", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-text", "mg-character-left", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-text":
             if (!customElements.get(tagName)) {
@@ -465,11 +464,6 @@ function defineCustomElement() {
             }
             break;
         case "mg-character-left":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "mg-details":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

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

@@ -2,8 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { C as ClassList, i as isValidString, t as toString } from './index2.js';
 import { d as defineCustomElement$5, c as classReadonly, a as classDisabled, w as widths } from './mg-input2.js';
 import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$8 } from './mg-character-left2.js';
-import { d as defineCustomElement$7 } from './mg-details2.js';
+import { d as defineCustomElement$7 } from './mg-character-left2.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';
@@ -369,7 +368,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-textarea", "mg-character-left", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-textarea", "mg-character-left", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-textarea":
             if (!customElements.get(tagName)) {
@@ -377,11 +376,6 @@ function defineCustomElement$1() {
             }
             break;
         case "mg-character-left":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "mg-details":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }