@mgdis/mg-components 6.14.0 → 6.15.0

package/dist/components/mg-input-select2.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$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__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__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%}}";
 
 /**
  * Check if item is a well configured option
@@ -145,6 +147,16 @@ 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
          */
@@ -164,7 +176,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
          * Check if input is valid
          */
         this.checkValidity = () => {
-            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || this.input.checkValidity()));
+            this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || (this.hasInputValue() && this.input.checkValidity())));
         };
         /**
          * Set input error message
@@ -177,11 +189,22 @@ 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
@@ -199,9 +222,11 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
+        let resetMessage = false;
         // Empty options
-        if (newValue.length === 0) {
+        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
             this.options = [];
+            this.displayError();
         }
         // String array
         else if (allItemsAreString(newValue)) {
@@ -209,6 +234,8 @@ 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)) {
@@ -221,10 +248,15 @@ 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)
@@ -318,9 +350,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect 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();
                 });
             });
@@ -372,7 +402,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
      */
     render() {
         const readonlyValue = this.getReadonlyValue();
-        return (h("mg-input", { key: '2a0599578526b7c110b8f8e01dcb233ed2d523cf', 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) => {
+        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) => {
                 if (el !== null)
                     this.input = el;
             } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -388,7 +418,7 @@ const MgInputSelect = /*@__PURE__*/ proxyCustomElement(class MgInputSelect exten
         "mgWidth": ["watchMgWidth"]
     }; }
     static get style() { return mgInputSelectCss; }
-}, [1, "mg-input-select", {
+}, [257, "mg-input-select", {
         "value": [1032],
         "items": [16],
         "identifier": [1],
@@ -406,6 +436,7 @@ 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],
@@ -428,13 +459,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-select", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-select", "mg-details", "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,7 +2,8 @@ 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$6 } from './mg-character-left2.js';
+import { d as defineCustomElement$7 } from './mg-character-left2.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';
@@ -382,7 +383,7 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class MgInputText extends H
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'e8249550f7077c38f87b768ef68837dec35cd08e', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
+        return (h("mg-input", { key: '8b9ffd8f5546fe9ffe0e7054e794afa06de4189f', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.value && this.renderReadonly()
             : [
                 h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
@@ -409,7 +410,7 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class MgInputText extends H
         "helpText": ["watchHelpText"]
     }; }
     static get style() { return mgInputTextCss; }
-}, [1, "mg-input-text", {
+}, [257, "mg-input-text", {
         "value": [1544],
         "identifier": [1],
         "name": [1],
@@ -456,7 +457,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-text", "mg-character-left", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-text", "mg-character-left", "mg-details", "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)) {
@@ -464,6 +465,11 @@ 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,7 +2,8 @@ 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$7 } from './mg-character-left2.js';
+import { d as defineCustomElement$8 } from './mg-character-left2.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';
@@ -302,7 +303,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'b52470b9b12c35a62d656609ea345a0545d2429b', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
+        return (h("mg-input", { key: 'e87320fe4d3c2c857751ddcc30fab470956b4ed2', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__with-character-left" }, h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
@@ -325,7 +326,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
         "characterLeftHide": ["validatecharacterLeftHide"]
     }; }
     static get style() { return mgInputTextareaCss; }
-}, [1, "mg-input-textarea", {
+}, [257, "mg-input-textarea", {
         "value": [1537],
         "identifier": [1],
         "name": [1],
@@ -368,7 +369,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-textarea", "mg-character-left", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-textarea", "mg-character-left", "mg-details", "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)) {
@@ -376,6 +377,11 @@ function defineCustomElement$1() {
             }
             break;
         case "mg-character-left":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "mg-details":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }

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

@@ -51,7 +51,7 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends
         "isLegend": ["validateIsLegend"]
     }; }
     static get style() { return mgInputTitleCss; }
-}, [6, "mg-input-title", {
+}, [262, "mg-input-title", {
         "identifier": [1],
         "required": [4],
         "readonly": [4],

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

@@ -1,12 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { C as ClassList, t as toString, d as allItemsAreString, i as isValidString } 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 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 mgInputToggleCss = ".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-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__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}";
+const mgInputToggleCss = ".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-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__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:var(--mg-b-size-4) var(--mg-b-size-8);border:0;border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4))/var(--mg-c-input-toggle-border-radius-ratio));background-color:unset;color:var(--mg-b-color-dark);font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-app);font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:var(--mg-b-size-4);border-width:var(--mg-c-input-border-width);border-style:solid;border-color:var(--mg-c-input-color-border);border-radius:calc((var(--mg-b-font-size)*var(--mg-b-line-height) + 2*(var(--mg-b-size-4) + var(--mg-b-size-4) + var(--mg-c-input-border-width)))/var(--mg-c-input-toggle-border-radius-ratio));background-color:var(--mg-b-color-light);cursor:pointer;font-family:var(--mg-b-font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:color-mix(in srgb, var(--mg-b-color-app), white 80%);color:var(--mg-b-color-info);font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));height:calc(var(--mg-b-font-size)*var(--mg-b-line-height) + 2*var(--mg-b-size-4));align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:var(--mg-b-color-neutral-30);color:var(--mg-b-color-dark);font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:var(--mg-b-color-dark);font-weight:unset}";
 
 /**
  * type Option validation function
@@ -66,6 +69,29 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
          * Checked internal value
          */
         this.checked = false;
+        /**
+         * Check if input is valid
+         */
+        this.checkValidity = () => {
+            this.setValidity(this.readonly || this.disabled || this.hasInputItems());
+        };
+        /**
+         * Reset error message
+         */
+        this.resetErrorMessage = () => {
+            this.checkValidity();
+            this.errorMessage = undefined;
+        };
+        /**
+         * Test if component has items
+         * @returns truthy if component has items
+         */
+        this.hasInputItems = () => { 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;
         /**
          * Set input error message
          * @param errorMessage - errorMessage override
@@ -74,8 +100,13 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             // Set error message
             this.errorMessage = undefined;
             // Does have a custom error message
-            if (!this.valid && errorMessage !== undefined) {
-                this.errorMessage = errorMessage;
+            if (!this.valid) {
+                if (errorMessage !== undefined) {
+                    this.errorMessage = errorMessage;
+                }
+                else if (!this.hasInputItems()) {
+                    this.errorMessage = this.messages.errors.noValue;
+                }
             }
         };
         /**
@@ -90,7 +121,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         this.validateSlots = () => {
             const slots = Array.from(this.element.children);
             if (slots.length !== 2) {
-                throw new Error('<mg-input-toggle> 2 slots are required.');
+                console.error('<mg-input-toggle> 2 slots are required.');
             }
             else if (!this.isIcon) {
                 // Due to text-overflow set to ellipsis
@@ -121,16 +152,28 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
-        if (typeof newValue === 'object' && this.items.length !== 2) {
+        if ([undefined, null].includes(newValue) || (Array.isArray(newValue) && newValue.length === 0)) {
+            this.options = [];
+            this.displayError();
+        }
+        else if (Array.isArray(newValue) && this.items.length !== 2) {
             throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${toString(newValue)}.`);
         }
         // String array
         else if (allItemsAreString(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
+            // 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)) {
             this.options = newValue;
+            // force to reset error when noValueError is displaied
+            if (this.invalid && this.hasNoValueErrorMessageDisplay()) {
+                this.resetErrorMessage();
+            }
         }
         else {
             throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${toString(newValue)}.`);
@@ -192,8 +235,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
         }
         else {
-            this.valid = valid;
-            this.inputValid.emit(valid);
+            this.setValidity(valid);
             this.setErrorMessage(valid ? undefined : errorMessage);
         }
     }
@@ -212,12 +254,43 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
-                    this.errorMessage = undefined;
+                    this.resetErrorMessage();
                     resolve();
                 });
             });
         }
     }
+    /**
+     * 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();
+                resolve();
+            });
+        });
+    }
+    /**
+     * Method to set validity values
+     * @param newValue - valid new value
+     */
+    setValidity(newValue) {
+        const oldValidValue = this.valid;
+        this.valid = newValue;
+        this.invalid = !this.valid;
+        // We need to send valid event even if it is the same value
+        if (this.valid !== oldValidValue) {
+            this.inputValid.emit(this.valid);
+        }
+    }
     /**
      * set checked state
      */
@@ -236,6 +309,9 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
             const selectedValue = this.value === this.options[optionTrueValueIndex].value;
             this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;
         }
+        else if (Array.isArray(this.options) && this.options.length === 0) {
+            return;
+        }
         else {
             this.checked = this.value === this.options[1].value;
         }
@@ -247,6 +323,8 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      * Check if component props are well configured on init
      */
     componentWillLoad() {
+        // Get locales
+        this.messages = initLocales(this.element).messages;
         // Check items format
         this.validateItems(this.items);
         // Check slots
@@ -265,7 +343,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: '3cfa56cd1d8fdaba4e505027db7fae0385bac941', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
+        return (h("mg-input", { key: 'a17e505f60d3c7e37f18db5d5c94e8d4a03b3949', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: defineErrorMessage(this.errorMessage, this.noValueErrorDetail) }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly || !this.hasInputItems(), onClick: this.toggleChecked, ref: el => {
                 if (el !== null)
                     this.button = el;
             } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
@@ -281,7 +359,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "checked": ["handleChecked"]
     }; }
     static get style() { return mgInputToggleCss; }
-}, [1, "mg-input-toggle", {
+}, [257, "mg-input-toggle", {
         "value": [1032],
         "items": [16],
         "identifier": [1],
@@ -296,10 +374,12 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
         "tooltip": [1],
         "tooltipPosition": [1, "tooltip-position"],
         "helpText": [1, "help-text"],
+        "noValueErrorDetail": [1, "no-value-error-detail"],
+        "valid": [1028],
+        "invalid": [1028],
         "classCollection": [32],
         "options": [32],
         "errorMessage": [32],
-        "valid": [32],
         "checked": [32],
         "setFocus": [64],
         "setError": [64],
@@ -317,13 +397,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input-toggle", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input-toggle", "mg-details", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input-toggle":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MgInputToggle$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.utils.js

@@ -0,0 +1,24 @@
+import { i as isValidString } from './index2.js';
+
+/**
+ * Define error message
+ * @param message - message to display
+ * @param details - message detail to display
+ * @returns formated MgInput["errorMessage"]
+ */
+const defineErrorMessage = (message, details) => {
+    if (isValidString(message) && isValidString(details)) {
+        return {
+            summary: message,
+            details,
+        };
+    }
+    else if (isValidString(message)) {
+        return message;
+    }
+    else {
+        return undefined;
+    }
+};
+
+export { defineErrorMessage as d };