@mgdis/mg-components 6.1.0 → 6.2.0

package/dist/cjs/mg-action-more_36.cjs.entry.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e4a8bf81.js');
-const index$1 = require('./index-0fe2670c.js');
+const index = require('./index-52d5f3d4.js');
+const index_es = require('./index.es-ac7c22e3.js');
+const index$1 = require('./index-cc11af95.js');
 
 /**
  * Available menu item status values
@@ -76,7 +77,7 @@ const MgActionMore = class {
          ************/
         this.name = 'mg-action-more';
         this.classBase = 'mg-c-action-more';
-        this.mgPopoverIdentifier = index$1.Ie(this.name);
+        this.mgPopoverIdentifier = index_es.qe(this.name);
         /************
          * Methods *
          ***********/
@@ -116,15 +117,15 @@ const MgActionMore = class {
     }
     validateItems(newValue) {
         if (!isMgActionMoreItems(newValue)) {
-            throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
-            throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateIcon(newValue) {
         if (newValue && !isMgActionMoreIcon(newValue)) {
-            throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgActionMoreIconType. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else if ((newValue === null || newValue === void 0 ? void 0 : newValue.icon) === undefined && Boolean(this.button.isIcon)) {
             this.icon = { icon: 'ellipsis' };
@@ -132,7 +133,7 @@ const MgActionMore = class {
     }
     validateButton(newValue) {
         if (newValue && !isMgActionMoreButton(newValue)) {
-            throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "button" must match MgActionMoreButtonType. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateDisplayChevron(newValue) {
@@ -203,21 +204,21 @@ const MgBadge = class {
         this.label = undefined;
         this.variant = variants$4[0];
         this.outline = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-badge']);
+        this.classCollection = new index_es.Xe(['mg-c-badge']);
     }
     validateValue(newValue) {
         if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {
-            throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-badge> prop "value" is required and must be integer and/or special character. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateLabel(newValue) {
-        if (!index$1.me(newValue)) {
-            throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.me(newValue)) {
+            throw new Error(`<mg-badge> prop "label" is required and must be a string. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateVariant(newValue, oldValue) {
         if (!variants$4.includes(newValue)) {
-            throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-badge> prop "variant" must be one of: ${variants$4.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -321,11 +322,17 @@ const MgButton = class {
         this.isIcon = false;
         this.disableOnClick = false;
         this.loading = false;
-        this.classCollection = new index$1.Xe(['mg-c-button']);
+        this.classCollection = new index_es.Xe(['mg-c-button']);
     }
     validateVariant(newValue, oldValue) {
+        // validate new value
         if (!variants$3.includes(newValue)) {
-            throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            if (newValue === '') {
+                // Reactive framework like VUE render with `""` when prop is update to undefined
+                this.variant = variants$3[0];
+                return;
+            }
+            throw new Error(`<mg-button> prop "variant" must be one of: ${variants$3.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -380,7 +387,7 @@ const MgButton = class {
         this.validateFullWidth(this.fullWidth);
         if (this.isIcon) {
             this.classCollection.add(`mg-c-button--icon`);
-            if (!index$1.me(this.label)) {
+            if (!index_es.me(this.label)) {
                 throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
             }
         }
@@ -392,7 +399,7 @@ const MgButton = class {
      * Add listners
      */
     componentDidLoad() {
-        index$1.et(() => {
+        index_es.tt(() => {
             var _a;
             const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
             // submit buttons should trigger form submition;
@@ -409,7 +416,7 @@ const MgButton = class {
      */
     render() {
         var _a;
-        return (index.h(index.Host, { key: '59b7b2a977668ff6e653143cdbf86c0bea8414c4', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, index.h("div", { key: '464d14800685dd56d7dfc1ca2928274daf5118c6', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: 'af20cf2a34003698058cc1e26e24b20d9444835c', icon: "loader", spin: true }), index.h("div", { key: '50378b929ad1357c9d03d957dc8eeaac24f7c589', class: "mg-c-button__content" }, index.h("slot", { key: '41b511009e31064a911b7855a5c71a1104442525' })))));
+        return (index.h(index.Host, { key: '0e3996123ef570a493d645b7a24d4271f13ae7c4', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, index.h("div", { key: 'bef43bda72867ea981814bdeda110d2dec4306f9', class: this.classCollection.join() }, this.loading && index.h("mg-icon", { key: 'e5754f3ca96f24da369e0961ced9f119b22b8878', icon: "loader", spin: true }), index.h("div", { key: '20afb713a15e3a003dc4fd0a5470aa764246858e', class: "mg-c-button__content" }, index.h("slot", { key: 'd0468692516ebc044a14dedbba96d74791552bd1' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -452,13 +459,13 @@ const MgCharacterLeft = class {
         this.maxlength = undefined;
     }
     watchIdentifier(newValue) {
-        if (newValue !== undefined && !index$1.Ge(newValue)) {
-            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        if (newValue !== undefined && !index_es.Ge(newValue)) {
+            console.error(`<mg-character-left> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateMaxlength(newValue) {
         if (typeof newValue !== 'number') {
-            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-character-left> prop "maxlength" is required and must be a number. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     /*************
@@ -506,7 +513,7 @@ const MgDetails = class {
         this.expanded = false;
     }
     validateTitles(newValue) {
-        if (!index$1.me(newValue)) {
+        if (!index_es.me(newValue)) {
             throw new Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`);
         }
     }
@@ -646,7 +653,7 @@ const MgForm = class {
          */
         this.setMgInputs = () => {
             // Get slotted mgInputs
-            this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-'));
+            this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT'));
             // Set inputs readonly or disabled based on form configuration
             // Othewise listen to events
             this.mgInputs.forEach(input => {
@@ -664,7 +671,7 @@ const MgForm = class {
                 }
             });
         };
-        this.identifier = index$1.Ie('mg-form');
+        this.identifier = index_es.qe('mg-form');
         this.name = this.identifier;
         this.readonly = false;
         this.requiredMessage = undefined;
@@ -673,22 +680,22 @@ const MgForm = class {
         this.disabled = false;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-form']);
+        this.classCollection = new index_es.Xe(['mg-c-form']);
         this.requiredMessageText = undefined;
     }
     watchIdentifier(newValue) {
-        if (!index$1.Ge(newValue)) {
-            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.Ge(newValue)) {
+            console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateRequiredMessage(newValue) {
         if (newValue && !requiredMessageStatus.includes(newValue)) {
-            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateAriaRole(newValue) {
         if (newValue && !roles.includes(newValue)) {
-            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     handlelabelOnTop(newValue) {
@@ -715,6 +722,18 @@ const MgForm = class {
             this.checkValidity();
         }
     }
+    /**
+     * Reset form inputs values, validity and error state
+     */
+    async reset() {
+        if (!this.readonly) {
+            await Promise.all(this.mgInputs.map(async (input) => {
+                if (input.reset !== undefined) {
+                    await input.reset();
+                }
+            }));
+        }
+    }
     /*************
      * Lifecycle *
      *************/
@@ -754,6 +773,7 @@ const MgForm = class {
         // Update mgInputs when mgForm content change
         new MutationObserver(() => {
             this.setMgInputs();
+            this.checkValidity();
         }).observe(this.element, { childList: true });
     }
     /**
@@ -761,7 +781,7 @@ const MgForm = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("form", { key: 'a2bfe074acc43cfb0e6148265a66f49128e56a8f', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: '3c3f1ca5a91121a68a1e5d23b467d6c0923c4cd0', innerHTML: this.requiredMessageText }), index.h("slot", { key: 'f7d929ab1300eb4ef9e5e9fd08c106a153963545' }), !this.readonly && !this.disabled && index.h("slot", { key: '9941e147c5adb11ccb5de1d34378e830a81923af', name: "actions" })));
+        return (index.h("form", { key: 'ecfaff2bb897ce2c48ed352167bb418703a56c98', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && index.h("p", { key: '4d4fa2ff3cf4f25ebe0b009ae1995734bfcafd3b', innerHTML: this.requiredMessageText }), index.h("slot", { key: 'dc0c7acadf6b744335852f847a8336b018e28cb5' }), !this.readonly && !this.disabled && index.h("slot", { key: 'ede3ace32f6a88067845013fa65e5414cae5fcea', name: "actions" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -821,11 +841,11 @@ const MgIcon = class {
         this.variant = undefined;
         this.variantStyle = undefined;
         this.spin = false;
-        this.classCollection = new index$1.Xe(['mg-c-icon']);
+        this.classCollection = new index_es.Xe(['mg-c-icon']);
     }
     validateIcon(newValue, oldValue) {
         if (!Object.keys(icons).includes(newValue))
-            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         else {
             if (oldValue !== undefined)
                 this.classCollection.delete(`mg-c-icon--${oldValue}`);
@@ -835,7 +855,7 @@ const MgIcon = class {
     }
     validateSize(newValue, oldValue) {
         if (!sizes$1.includes(newValue))
-            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes$1.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         else {
             if (oldValue !== undefined)
                 this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
@@ -845,7 +865,7 @@ const MgIcon = class {
     validateVariant(newValue, oldValue) {
         if (newValue !== undefined) {
             if (!variants$2.includes(newValue))
-                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants$2.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
             else {
                 this.setDefaultVariantStyle();
                 if (oldValue !== undefined)
@@ -857,7 +877,7 @@ const MgIcon = class {
     validateVariantStyle(newValue, oldValue) {
         if (newValue !== undefined) {
             if (!variantStyles$1.includes(newValue))
-                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles$1.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
             else {
                 if (oldValue !== undefined)
                     this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
@@ -920,7 +940,7 @@ const MgIllustratedMessage = class {
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
-        if (!index$1.Ke(this.element.querySelector('[slot="title"]'), headingTags)) {
+        if (!index_es.Ke(this.element.querySelector('[slot="title"]'), headingTags)) {
             throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
         else if (slottedIllustrations.length !== 1) {
@@ -992,11 +1012,11 @@ const MgInput = class {
         this.isVerticalList = false;
     }
     watchIdentifier(newValue) {
-        if (!index$1.me(newValue)) {
-            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.me(newValue)) {
+            throw new Error(`<mg-input> prop "identifier" is required and must be a string. Passed value: ${index_es.Ye(newValue)}.`);
         }
-        else if (!index$1.Ge(newValue)) {
-            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        else if (!index_es.Ge(newValue)) {
+            console.error(`<mg-input> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else {
             this.helpTextId = `${this.identifier}-help-text`;
@@ -1018,7 +1038,7 @@ const MgInput = class {
     }
     watchTooltipPosition(newValue) {
         if (!tooltipPositions.includes(newValue)) {
-            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     watchErrorMessage(newValue) {
@@ -1082,8 +1102,8 @@ const MgInput = class {
      */
     // eslint-disable-next-line @stencil-community/no-unused-watch
     watchLabel() {
-        if (!index$1.me(this.label)) {
-            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index$1.Ye(this.label)}.`);
+        if (!index_es.me(this.label)) {
+            throw new Error(`<mg-input> prop "label" is required and must be a string. Passed value: ${index_es.Ye(this.label)}.`);
         }
         else {
             this.watchAriaDescribedbyIDs();
@@ -1216,7 +1236,7 @@ const MgInputCheckboxList = (props) => (index.h("ul", { class: "mg-c-input__inpu
     var _a, _b;
     return (index.h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } },
         index.h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }),
-        index.h("label", { htmlFor: input._id, onMouseEnter: input._handleMouseEnter, onMouseLeave: input._handleMouseLeave }, input.title)));
+        index.h("label", { htmlFor: input._id }, input.title)));
 })));
 
 const mgInputCheckboxCss = ".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);word-break:break-word}.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}}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-group-container{padding:var(--mg-b-size-4) var(--mg-b-size-8);margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container{display:flex;width:unset;flex:unset;flex-wrap:wrap;column-gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-container-list{display:flex;flex-flow:row wrap;padding:0;margin:0;gap:var(--mg-b-size-4);list-style:none}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__sections{max-height:80vh;padding-right:var(--mg-b-size-8);overflow-y:auto}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header{display:flex;min-height:var(--mg-b-size-min-height);flex-wrap:wrap;flex-wrap:nowrap;align-items:center;gap:var(--mg-b-size-8);text-wrap:nowrap}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-tootlip{display:inline-block;width:auto;height:auto;margin:0}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title{display:inline;margin:0;color:var(--mg-b-color-neutral-80)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title-label{font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__section-header-title--static.mg-c-input__section-header-title{margin:0 var(--mg-b-size-12)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-value{display:inline-flex;min-width:var(--mg-b-size-min-height);min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;justify-content:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-radius:var(--mg-b-size-4);background-color:var(--mg-b-color-neutral-20);font-size:var(--mg-b-font-size)}.mg-c-input.mg-c-input--checkbox-multi .mg-c-input__input-no-result{text-align:center}.mg-c-input.mg-c-input--checkbox-multi b{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--disabled .mg-c-input__input-container b{opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--with-values .mg-c-input__input-container{gap:var(--mg-b-size-4)}.mg-c-input.mg-c-input--checkbox-multi.mg-c-input--search-mode .mg-c-input__content{display:flex;width:calc(var(--mg-b-size-floating-element-max-width) - var(--mg-b-size-16));height:calc(50*var(--mg-b-size-8));flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi:not(.mg-c-input--label-on-top) mg-tooltip:not(.mg-c-input__section-header-tootlip){margin-left:var(--mg-b-size-8)}.mg-c-input.mg-c-input--checkbox-multi mg-popover{--mg-c-card-spacing:var(--mg-b-size-8)}.mg-c-input.mg-c-input--readonly ul{display:flex;min-height:var(--mg-b-font-size);flex-flow:column wrap;padding:0;margin:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) 0 0;list-style:none;row-gap:var(--mg-b-size-8)}";
@@ -1255,6 +1275,7 @@ const MgInputCheckbox = class {
             this.updateCheckboxItems('value', Boolean(event.target.checked), item => item._id === event.target.id);
             this.updateValues();
             this.checkValidity();
+            this.setErrorMessage();
         };
         /**
          * Keyboard handler
@@ -1281,18 +1302,10 @@ const MgInputCheckbox = class {
         /**
          * Handle blur event
          */
-        this.handleBlur = (event) => {
-            if (this.handlerInProgress === 'mouseenter') {
-                event.preventDefault();
-                return;
-            }
-            // set guard
-            this.handlerInProgress = 'blur';
+        this.handleBlur = () => {
             // Check validity
             this.checkValidity();
             this.setErrorMessage();
-            // reset guard
-            this.handlerInProgress = undefined;
         };
         /**
          * Handle input search value-change event
@@ -1334,18 +1347,6 @@ const MgInputCheckbox = class {
             });
             this.updateValues();
         };
-        /**
-         * Handle input label mouseenter event
-         */
-        this.handleMouseEnter = () => {
-            this.handlerInProgress = 'mouseenter';
-        };
-        /**
-         * Handle input label leave event
-         */
-        this.handleMouseLeave = () => {
-            this.handlerInProgress = undefined;
-        };
         /**
          * Update values
          */
@@ -1354,8 +1355,6 @@ const MgInputCheckbox = class {
                 delete o._handleBlur;
                 delete o._handleInput;
                 delete o._handleKeydown;
-                delete o._handleMouseEnter;
-                delete o._handleMouseLeave;
                 delete o._id;
                 return o;
             });
@@ -1369,7 +1368,7 @@ const MgInputCheckbox = class {
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => index$1.Ve(item.title).includes(index$1.Ve(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => index_es.et(item.title).includes(index_es.et(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -1401,13 +1400,13 @@ const MgInputCheckbox = class {
          * @returns message to display
          */
         this.getSelectValuesButtonMessage = () => {
-            if (this.selectValuesButtonKey === 'editButton' && index$1.me(this.editButtonMessage)) {
+            if (this.selectValuesButtonKey === 'editButton' && index_es.me(this.editButtonMessage)) {
                 return this.editButtonMessage;
             }
-            else if (this.selectValuesButtonKey === 'showButton' && index$1.me(this.showButtonMessage)) {
+            else if (this.selectValuesButtonKey === 'showButton' && index_es.me(this.showButtonMessage)) {
                 return this.showButtonMessage;
             }
-            else if (this.selectValuesButtonKey === 'selectButton' && index$1.me(this.selectButtonMessage)) {
+            else if (this.selectValuesButtonKey === 'selectButton' && index_es.me(this.selectButtonMessage)) {
                 return this.selectButtonMessage;
             }
             else {
@@ -1476,7 +1475,7 @@ const MgInputCheckbox = class {
         this.editButtonMessage = undefined;
         this.showButtonMessage = undefined;
         this.selectButtonMessage = undefined;
-        this.classCollection = new index$1.Xe([this.baseClassName, classFieldset]);
+        this.classCollection = new index_es.Xe([this.baseClassName, classFieldset]);
         this.errorMessage = undefined;
         this.checkboxItems = [];
         this.displaySearchInput = undefined;
@@ -1486,16 +1485,16 @@ const MgInputCheckbox = class {
     }
     validateValue(newValue) {
         if (isCheckboxItems(newValue)) {
-            this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this), _handleMouseEnter: this.handleMouseEnter.bind(this), _handleMouseLeave: this.handleMouseLeave.bind(this) })));
+            this.checkboxItems = newValue.map((item, index) => (Object.assign(Object.assign({}, item), { _id: `${this.identifier}_${index}`, _handleInput: this.handleInput.bind(this), _handleBlur: this.handleBlur.bind(this), _handleKeydown: this.handleKeydown.bind(this) })));
             this.valueChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "value" is required and all values must be the same type, CheckboxItem. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateType(newValue) {
         if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
-            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-checkbox> prop "type" must be a CheckboxType. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else if (newValue === undefined) {
             this.mode = 'auto';
@@ -1584,7 +1583,7 @@ const MgInputCheckbox = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!index$1.me(errorMessage)) {
+        else if (!index_es.me(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -1593,6 +1592,17 @@ const MgInputCheckbox = class {
             this.hasDisplayedError = this.invalid;
         }
     }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = this.value.map(item => (Object.assign(Object.assign({}, item), { value: false })));
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        }
+    }
     /**
      * Method to set validity values
      * @param newValue - valid new value
@@ -1602,7 +1612,7 @@ const MgInputCheckbox = class {
         this.valid = newValue;
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.handlerInProgress === undefined || (this.handlerInProgress === 'blur' && this.valid !== oldValidValue))
+        if (this.valid !== oldValidValue)
             this.inputValid.emit(this.valid);
     }
     /**
@@ -1710,7 +1720,7 @@ const MgInputCheckbox = class {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (index.h("mg-input", { key: '2fb4ad15854041720f0810f0bcb1897f8f441f07', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (index.h("mg-input", { key: '5a6c84d1f533159645c5aec09bb6e82a7cd30cc7', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -1843,7 +1853,7 @@ const MgInputDate = class {
          * @param value - value to test
          * @returns truthy when value match the pattern
          */
-        this.isValidPattern = (value) => index$1.me(value) && index$1.He.test(value);
+        this.isValidPattern = (value) => index_es.me(value) && index_es.He.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -1851,10 +1861,10 @@ const MgInputDate = class {
          */
         this.formatHelpText = (helpText) => {
             const defaultHelpTextVariable = '{defaultHelpText}';
-            let text = index$1.me(helpText) ? helpText : this.messages.input.date.helpText;
+            let text = index_es.me(helpText) ? helpText : this.messages.input.date.helpText;
             if (text.includes(defaultHelpTextVariable))
                 text = text.replace(defaultHelpTextVariable, this.formatHelpText(this.messages.input.date.helpText));
-            return text.replace('{pattern}', this.renderPattern()).replace('{date}', index$1.ze(index$1.ct(new Date('2023-12-24')), this.systemLocale));
+            return text.replace('{pattern}', this.renderPattern()).replace('{date}', index_es.ze(index_es.ft(new Date('2023-12-24')), this.systemLocale));
         };
         /**
          * Handle input event
@@ -1946,8 +1956,8 @@ const MgInputDate = class {
                 // min, max & minMax
                 else if (['min', 'max', 'minMax'].includes(inputError)) {
                     this.errorMessage = this.messages.errors.date[inputError]
-                        .replace('{min}', index$1.ze(this.min, this.systemLocale))
-                        .replace('{max}', index$1.ze(this.max, this.systemLocale));
+                        .replace('{min}', index_es.ze(this.min, this.systemLocale))
+                        .replace('{max}', index_es.ze(this.max, this.systemLocale));
                 }
                 // wrong date format
                 // element.validity.badInput is default error message
@@ -1961,7 +1971,7 @@ const MgInputDate = class {
          * @returns translated html pattern
          */
         this.renderPattern = () => {
-            let patternLocal = index$1.at(this.systemLocale);
+            let patternLocal = index_es.ct(this.systemLocale);
             for (const key in this.messages.input.date.pattern) {
                 patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
             }
@@ -1983,7 +1993,7 @@ const MgInputDate = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-input--date']);
+        this.classCollection = new index_es.Xe(['mg-c-input--date']);
         this.errorMessage = undefined;
     }
     validateValue(newValue) {
@@ -1991,8 +2001,8 @@ const MgInputDate = class {
         if (newValue === '')
             newValue = null;
         // check value validity
-        if (newValue && !index$1.me(newValue)) {
-            throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${index$1.Ye(newValue)}.`);
+        if (newValue && !index_es.me(newValue)) {
+            throw new Error(`<mg-input-date> props 'value' must be a valid string. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else if ([null, undefined].includes(newValue) || this.isValidPattern(newValue)) {
             this.valueChange.emit(newValue);
@@ -2009,7 +2019,7 @@ const MgInputDate = class {
     }
     validateMinMax(newValue) {
         if (newValue && !this.isValidPattern(newValue)) {
-            throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-date> props 'min/max' doesn't match pattern: 'yyyy-mm-dd'. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     handleValidityChange(newValue, _oldValue, prop) {
@@ -2048,7 +2058,7 @@ const MgInputDate = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!index$1.me(errorMessage)) {
+        else if (!index_es.me(errorMessage)) {
             throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -2057,6 +2067,18 @@ const MgInputDate = class {
             this.hasDisplayedError = this.invalid;
         }
     }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = '';
+            this.checkValidity();
+            this.invalid = false;
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        }
+    }
     /**
      * Method to set validity values
      * @param newValue - valid new value
@@ -2102,7 +2124,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '38bcc2503040b03e17e49f3cb1ac27209aa50a1b', 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 && ['', undefined].includes(this.value) ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, index$1.ze(this.value, this.locale))) : (index.h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        return (index.h("mg-input", { key: '33ffeaf0b7b07cc65081891709a73a44c9454092', 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 && ['', undefined].includes(this.value) ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly ? (this.value && index.h("b", { class: "mg-c-input__readonly-value" }, index_es.ze(this.value, this.locale))) : (index.h("input", { type: "date", class: "mg-c-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }))));
@@ -2123,7 +2145,7 @@ MgInputDate.style = MgInputDateStyle0;
  * List of all possibles types
  */
 const types = ['decimal', 'integer'];
-const formats = ['none', 'number', 'currency'];
+const formats = ['none', 'number', 'currency', 'percent', 'unit'];
 
 const mgInputNumericCss = ".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__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);word-break:break-word}.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)*.6ch)}.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)*.6ch)}.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)*.6ch)}.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}}.mg-c-input .mg-c-input__box{width:auto;text-align:var(--mg-c-input-text-align, right)}";
 const MgInputNumericStyle0 = mgInputNumericCss;
@@ -2188,7 +2210,9 @@ const MgInputNumeric = class {
                     this.errorMessage = this.messages.errors[inputError];
                 }
                 else {
-                    this.errorMessage = this.messages.errors.numeric[inputError].replace('{min}', `${this.formatValue(this.min)}`).replace('{max}', `${this.formatValue(this.max)}`);
+                    const formattedMin = this.formatValue(this.min);
+                    const formattedMax = this.formatValue(this.max);
+                    this.errorMessage = this.messages.errors.numeric[inputError].replace('{min}', formattedMin).replace('{max}', formattedMax);
                 }
             }
         };
@@ -2226,9 +2250,13 @@ const MgInputNumeric = class {
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return index$1.ut(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return index_es.$t(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
-                    return index$1.ft(value, this.locale, this.currency);
+                    return index_es.ut(value, this.locale, this.currency);
+                case 'percent':
+                    return index_es.dt(value / 100, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                case 'unit':
+                    return index_es.pt(value, this.locale, this.unit, this.unitDisplay, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'none':
                     return value.toString();
             }
@@ -2274,11 +2302,13 @@ const MgInputNumeric = class {
         this.type = 'decimal';
         this.format = 'number';
         this.currency = 'EUR';
+        this.unit = undefined;
+        this.unitDisplay = 'short';
         this.integerLength = 13;
         this.decimalLength = 2;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-input--numeric']);
+        this.classCollection = new index_es.Xe(['mg-c-input--numeric']);
         this.errorMessage = undefined;
         this.hasFocus = undefined;
     }
@@ -2333,22 +2363,22 @@ const MgInputNumeric = class {
     }
     validateType(newValue) {
         if (!types.includes(newValue)) {
-            throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "type" must be one of: ${types.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     watchFormat(newValue) {
         if (!formats.includes(newValue)) {
-            throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "format" must be one of: ${formats.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateIntegerLength(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "integer-length" must be a positive number. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateDecimalLength(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-numeric> prop "decimal-length" must be a positive number, consider using prop "type" to "integer" instead. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     /**
@@ -2371,7 +2401,7 @@ const MgInputNumeric = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!index$1.me(errorMessage)) {
+        else if (!index_es.me(errorMessage)) {
             throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -2380,6 +2410,17 @@ const MgInputNumeric = class {
             this.hasDisplayedError = this.invalid;
         }
     }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = '';
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        }
+    }
     /**
      * Method to set validity values
      * @param newValue - valid new value
@@ -2466,7 +2507,7 @@ const MgInputNumeric = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '9b48fe7bf2a16f084ebddc050d90938c5d4e4b23', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
+        return (index.h("mg-input", { key: '6d34c2b7e9762cdefc5de3814ff4afd95fa4a6a6', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.readonlyValue && this.renderReadonly()
             : [
                 index.h("input", { key: "input", type: "text", class: "mg-c-input__box mg-c-input__box--width", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
@@ -2569,7 +2610,7 @@ const MgInputPassword = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-input--password']);
+        this.classCollection = new index_es.Xe(['mg-c-input--password']);
         this.errorMessage = undefined;
         this.displayPassword = false;
     }
@@ -2627,7 +2668,7 @@ const MgInputPassword = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!index$1.me(errorMessage)) {
+        else if (!index_es.me(errorMessage)) {
             throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -2636,6 +2677,17 @@ const MgInputPassword = class {
             this.hasDisplayedError = this.invalid;
         }
     }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = '';
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        }
+    }
     /**
      * Method to set validity values
      * @param newValue - valid new value
@@ -2673,7 +2725,7 @@ const MgInputPassword = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '6459a70869ba217a29ad57b79aac2e5bf2aaddfb', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (index.h("mg-input", { key: 'af313cb20a94a9c8dcf2b944c31b7ea36b2d3feb', 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 === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value !== undefined && index.h("b", { class: "mg-c-input__readonly-value" }, '•'.repeat(this.value.length))) : (index.h("span", { class: "mg-c-input__input-group" }, index.h("input", { type: this.displayPassword ? 'text' : 'password', class: "mg-c-input__box mg-c-input__box--width", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, maxlength: this.maxlength, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
                 if (el !== null)
                     this.input = el;
             } }), index.h("mg-button", { label: this.messages.input.password[this.displayPassword ? 'hide' : 'display'], disabled: this.disabled, variant: "flat", class: "mg-c-input__append-button", "is-icon": true, onClick: this.toggleDisplayPassword, "aria-controls": this.identifier }, index.h("mg-icon", { class: "mg-c-input__input-icon", icon: this.displayPassword ? 'eye-slash' : 'eye' }))))));
@@ -2774,14 +2826,15 @@ const MgInputRadio = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-input--radio', classFieldset]);
+        this.classCollection = new index_es.Xe(['mg-c-input--radio', classFieldset]);
         this.errorMessage = undefined;
         this.options = undefined;
         this.readonlyValue = undefined;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     watchValue(newValue) {
         var _a;
-        if (index$1.Je(this.items) && typeof newValue === 'string') {
+        if (index_es.Je(this.items) && typeof newValue === 'string') {
             this.readonlyValue = newValue;
         }
         else if (Array.isArray(this.items) && this.items.every(isOption$3)) {
@@ -2795,10 +2848,10 @@ const MgInputRadio = class {
     validateItems(newValue) {
         // Validate if items have required min length
         if (typeof newValue === 'object' && newValue.length < 2) {
-            throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-radio> prop "items" require at least 2 items. Passed value: ${index_es.Ye(newValue)}.`);
         }
         // String array
-        else if (index$1.Je(newValue)) {
+        else if (index_es.Je(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
         }
         // Object array
@@ -2806,7 +2859,7 @@ const MgInputRadio = class {
             this.options = newValue;
         }
         else {
-            throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-radio> prop "items" is required and all items must be the same type, string or RadioOption. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     watchInputVerticalList(newValue) {
@@ -2857,7 +2910,7 @@ const MgInputRadio = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!index$1.me(errorMessage)) {
+        else if (!index_es.me(errorMessage)) {
             throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -2866,6 +2919,17 @@ const MgInputRadio = class {
             this.hasDisplayedError = this.invalid;
         }
     }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = undefined;
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        }
+    }
     /**
      * Method to set validity values
      * @param newValue - valid new value
@@ -2906,7 +2970,7 @@ const MgInputRadio = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '228bdfa7215bf39bbdd5ca97b46ca761a3f42779', 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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (index.h("mg-input", { key: '1f27ea2672375c28b2b7afca66ebd09f8dfc2354', 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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.h("ul", { class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index$1) => (index.h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, index.h("input", { type: "radio", id: this.identifier + '_' + index$1, name: this.identifier, value: index$1, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index$1].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index$1] = el;
             } }), index.h("label", { htmlFor: this.identifier + '_' + index$1 }, input.title))))))));
@@ -3004,7 +3068,7 @@ const MgInputSelect = class {
             if (this.input.value === '') {
                 this.setValue(null);
             }
-            else if (index$1.Je(this.items) && this.items.includes(this.input.value)) {
+            else if (index_es.Je(this.items) && this.items.includes(this.input.value)) {
                 this.setValue(this.input.value);
             }
             else if (allItemsAreOptions(this.items) && typeof this.input.value === 'string' && this.items.some(this.isInputValue)) {
@@ -3078,7 +3142,7 @@ const MgInputSelect = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-input--select']);
+        this.classCollection = new index_es.Xe(['mg-c-input--select']);
         this.errorMessage = undefined;
         this.options = undefined;
         this.valueExist = undefined;
@@ -3086,7 +3150,7 @@ const MgInputSelect = class {
     }
     validateValue(newValue) {
         var _a, _b;
-        if (index$1.Je(this.items) && typeof newValue === 'string') {
+        if (index_es.Je(this.items) && typeof newValue === 'string') {
             this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) !== undefined ? this.input.value : newValue;
         }
         else if (allItemsAreOptions(this.items)) {
@@ -3103,7 +3167,7 @@ const MgInputSelect = class {
             this.options = [];
         }
         // String array
-        else if (index$1.Je(newValue)) {
+        else if (index_es.Je(newValue)) {
             if (typeof this.value === 'string')
                 this.valueExist = newValue.includes(this.value);
             this.options = newValue.map(item => ({ title: item, value: item }));
@@ -3121,7 +3185,7 @@ const MgInputSelect = class {
             }
         }
         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: ${index$1.Ye(newValue)}.`);
+            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: ${index_es.Ye(newValue)}.`);
         }
     }
     watchReadonly(newValue) {
@@ -3175,7 +3239,7 @@ const MgInputSelect = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!index$1.me(errorMessage)) {
+        else if (!index_es.me(errorMessage)) {
             throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -3184,6 +3248,17 @@ const MgInputSelect = class {
             this.hasDisplayedError = this.invalid;
         }
     }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = null;
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        }
+    }
     /**
      * Method to set validity values
      * @param newValue - valid new value
@@ -3228,7 +3303,7 @@ const MgInputSelect = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'a8d381dbc10d8a2274be86c13bf570faacbeceda', 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.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.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 (index.h("mg-input", { key: '23ce3f91b4a5abdbd9b9731a895ca38d37b8c0a5', 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.readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, this.readonlyValue)) : (index.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
@@ -3260,7 +3335,7 @@ const isOption$1 = (option) => typeof option === 'object' && typeof option.title
  * @param options - Datalist options to check.
  * @returns True if datalist is well structured.
  */
-const isDatalistOptions = (options) => index$1.Je(options) || (Array.isArray(options) && options.every(isOption$1));
+const isDatalistOptions = (options) => index_es.Je(options) || (Array.isArray(options) && options.every(isOption$1));
 const MgInputText = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -3292,7 +3367,7 @@ const MgInputText = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new index$1.Xe(this.classCollection.classes);
+            this.classCollection = new index_es.Xe(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3300,7 +3375,7 @@ const MgInputText = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new index$1.Xe(this.classCollection.classes);
+            this.classCollection = new index_es.Xe(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -3388,7 +3463,7 @@ const MgInputText = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-input--text']);
+        this.classCollection = new index_es.Xe(['mg-c-input--text']);
         this.errorMessage = undefined;
     }
     handleValue(newValue) {
@@ -3410,7 +3485,7 @@ const MgInputText = class {
     }
     validateDatalistoptions(newValue) {
         if (Boolean(newValue) && !isDatalistOptions(newValue)) {
-            throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-text> prop "datalistoptions" values must be the same type, string or OptionType. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     watchReadonly(newValue) {
@@ -3445,8 +3520,8 @@ const MgInputText = class {
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validatePattern(newValue) {
-        if (newValue !== undefined && !(index$1.me(this.pattern) && index$1.me(this.patternErrorMessage))) {
-            throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index$1.Ye(this.pattern)}'" and "patternErrorMessage='${index$1.Ye(this.patternErrorMessage)}'".`);
+        if (newValue !== undefined && !(index_es.me(this.pattern) && index_es.me(this.patternErrorMessage))) {
+            throw new Error(`<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index_es.Ye(this.pattern)}'" and "patternErrorMessage='${index_es.Ye(this.patternErrorMessage)}'".`);
         }
     }
     /**
@@ -3475,7 +3550,7 @@ const MgInputText = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!index$1.me(errorMessage)) {
+        else if (!index_es.me(errorMessage)) {
             throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -3484,6 +3559,17 @@ const MgInputText = class {
             this.hasDisplayedError = this.invalid;
         }
     }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = '';
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        }
+    }
     /**
      * Method to set validity values
      * @param newValue - valid new value
@@ -3529,7 +3615,7 @@ const MgInputText = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '717239fc622bd6d122897031a2144bd3441947d5', 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 (index.h("mg-input", { key: '6ed4f9339354571851d415755b989824f623d62d', 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()
             : [
                 index.h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
@@ -3589,7 +3675,7 @@ const MgInputTextarea = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new index$1.Xe(this.classCollection.classes);
+            this.classCollection = new index_es.Xe(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3597,7 +3683,7 @@ const MgInputTextarea = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new index$1.Xe(this.classCollection.classes);
+            this.classCollection = new index_es.Xe(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = 'blur';
             this.displayError().finally(() => {
@@ -3660,7 +3746,7 @@ const MgInputTextarea = class {
         this.valid = undefined;
         this.invalid = undefined;
         this.resizable = 'none';
-        this.classCollection = new index$1.Xe(['mg-c-input--textarea']);
+        this.classCollection = new index_es.Xe(['mg-c-input--textarea']);
         this.errorMessage = undefined;
     }
     handleValue(newValue) {
@@ -3699,8 +3785,8 @@ const MgInputTextarea = class {
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validatePattern(newValue) {
-        if (newValue !== undefined && !(index$1.me(this.pattern) && index$1.me(this.patternErrorMessage))) {
-            throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index$1.Ye(this.pattern)}'" and "patternErrorMessage='${index$1.Ye(this.patternErrorMessage)}'".`);
+        if (newValue !== undefined && !(index_es.me(this.pattern) && index_es.me(this.patternErrorMessage))) {
+            throw new Error(`<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired. Passed value: "pattern='${index_es.Ye(this.pattern)}'" and "patternErrorMessage='${index_es.Ye(this.patternErrorMessage)}'".`);
         }
     }
     validatecharacterLeftHide(newValue) {
@@ -3731,7 +3817,7 @@ const MgInputTextarea = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!index$1.me(errorMessage)) {
+        else if (!index_es.me(errorMessage)) {
             throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -3740,6 +3826,17 @@ const MgInputTextarea = class {
             this.hasDisplayedError = this.invalid;
         }
     }
+    /**
+     * Reset value, validity and error state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = '';
+            this.checkValidity();
+            this.errorMessage = undefined;
+            this.hasDisplayedError = false;
+        }
+    }
     /**
      * Method to set validity values
      * @param newValue - valid new value
@@ -3782,7 +3879,7 @@ const MgInputTextarea = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '434d00b8d1b5f066b416f777572bfae84797e79d', 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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__with-character-left" }, index.h("textarea", { class: {
+        return (index.h("mg-input", { key: '311c9e0b36a6373aff8e3ca666dd4af93c2c1137', 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 && index.h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (index.h("div", { class: "mg-c-input__with-character-left" }, index.h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
@@ -3820,11 +3917,11 @@ const MgInputTitle = class {
         this.tagName = 'label';
     }
     validateIdentifier(newValue) {
-        if (!index$1.me(newValue)) {
+        if (!index_es.me(newValue)) {
             throw new Error('<mg-input-title> prop "identifier" is required.');
         }
-        else if (!index$1.Ge(newValue)) {
-            console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        else if (!index_es.Ge(newValue)) {
+            console.error(`<mg-input-title> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateIsLegend(newValue) {
@@ -3937,12 +4034,13 @@ const MgInputToggle = class {
         this.tooltip = undefined;
         this.tooltipPosition = 'input';
         this.helpText = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-input--toggle']);
+        this.classCollection = new index_es.Xe(['mg-c-input--toggle']);
         this.options = undefined;
         this.errorMessage = undefined;
         this.valid = undefined;
         this.checked = false;
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     handleValue(newValue) {
         // Swich to the right option
         this.setChecked();
@@ -3951,10 +4049,10 @@ const MgInputToggle = class {
     }
     validateItems(newValue) {
         if (typeof newValue === 'object' && this.items.length !== 2) {
-            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" require 2 items. Passed value: ${index_es.Ye(newValue)}.`);
         }
         // String array
-        else if (index$1.Je(newValue)) {
+        else if (index_es.Je(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -3962,7 +4060,7 @@ const MgInputToggle = class {
             this.options = newValue;
         }
         else {
-            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-input-toggle> prop "items" is required and all items must be the same type: ToggleValue. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     watchIsOnOff(newValue) {
@@ -4010,7 +4108,7 @@ const MgInputToggle = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!index$1.me(errorMessage)) {
+        else if (!index_es.me(errorMessage)) {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -4019,6 +4117,17 @@ const MgInputToggle = class {
             this.setErrorMessage(valid ? undefined : errorMessage);
         }
     }
+    /**
+     * Reset value, validity, error and visual state
+     */
+    async reset() {
+        if (!this.readonly) {
+            this.value = this.options[0].value;
+            this.errorMessage = undefined;
+            this.valid = undefined;
+            this.setChecked();
+        }
+    }
     /**
      * set checked state
      */
@@ -4066,7 +4175,7 @@ const MgInputToggle = class {
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (index.h("mg-input", { key: '803566335b26e4cf70cbb4cb397db4c9688314de', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && index.h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (index.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 }, index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-2" }))))));
+        return (index.h("mg-input", { key: 'b47ba6e093e47f8405e12744576f2098943e5fbe', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && index.h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (index.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 }, index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-1" })), index.h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, index.h("slot", { name: "item-2" }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -4237,12 +4346,11 @@ const MgItemMore = class {
          */
         this.setProxyElement = (proxified) => {
             const proxy = this.moreElementMenuItem.querySelector(`[identifier="${proxified.identifier}"]`);
-            // eslint-disable-next-line @stencil-community/strict-boolean-conditions
-            if (!proxy) {
+            if (proxy === null) {
                 return;
             }
             // remove proxy id to prevent duplicate key. default html id is: '';
-            if (index$1.me(proxy.id))
+            if (index_es.me(proxy.id))
                 proxy.id = '';
             const proxyClickHandler = () => {
                 this.parentMenu
@@ -4286,7 +4394,7 @@ const MgItemMore = class {
                 // create item-more menu items element from main menu-items clones
                 this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
                 // we need to get all `mg-menu-item` linked to the cloned one to set mirror process
-                index$1.et(() => {
+                index_es.tt(() => {
                     this.setProxyElement(child);
                     if (child.querySelector('mg-menu') !== null) {
                         child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
@@ -4302,17 +4410,17 @@ const MgItemMore = class {
     }
     validateIcon(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
-            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type. Passed value: ${index_es.Ye(newValue)}.`);
     }
     validateSlotLabel(newValue) {
         if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
-            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type. Passed value: ${index_es.Ye(newValue)}.`);
         else if (typeof newValue.label !== 'string')
             this.slotlabel.label = this.messages.menuLabel;
     }
     validateSize(newValue) {
         if (newValue && !sizes$2.includes(newValue))
-            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type. Passed value: ${index_es.Ye(newValue)}.`);
     }
     /*************
      * Lifecycle *
@@ -4359,11 +4467,11 @@ const MgItemMore = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '402b3c1cb97f1502ea347c62c1e24311e683dd9b', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { key: 'ced59a0c96c37285428f809606d8cfb179c25099', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
+        return (index.h(index.Host, { key: '11c43154129c5756e80db0af3434c88cab2191f3', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { key: '38fc92410328c317fb046f4e1ec4f94175d484fb', "data-overflow-more": true, "data-size": this.parentMenu.size, identifier: "mg-item-more", ref: el => {
                 if (el !== null) {
                     this.moreElementMenuItem = el;
                 }
-            } }, index.h("mg-icon", { key: '65c5ecd4565ee1ce77e5bd02a7b38d1c0dc2181c', icon: this.icon.icon, size: this.size, slot: "image" }), index.h("span", { key: 'b8fcc9df2a3ff48114720c34fb147563a91214bc', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: '81e3a6c6429f8cb28484ba6a4f3ae54f8e9bb8de', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+            } }, index.h("mg-icon", { key: '90e21f30004e38a1a0938359276dccd7458e5e86', icon: this.icon.icon, size: this.size, slot: "image" }), index.h("span", { key: '20f846c5718a19d39ad94abf59bab54658e1ff9c', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { key: 'b52f97129e736be9164ae18b717057d1bfc0cd0a', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -4472,12 +4580,12 @@ const MgMenu = class {
     }
     validateLabel(newValue) {
         if (newValue === undefined && !this.element.hasAttribute('aria-label')) {
-            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "label" is required. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateDirection(newValue) {
         if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
-            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateItemMore(newValue) {
@@ -4490,7 +4598,7 @@ const MgMenu = class {
     }
     validateSize(newValue) {
         if (!sizes$2.includes(newValue)) {
-            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes$2.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     /*************
@@ -4614,7 +4722,7 @@ const MgMenuItem = class {
                 throw new Error(`<${this.name}> slot "label" is required.`);
             ['label', 'metadata'].forEach(slot => {
                 Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
-                    if (!index$1.me(element.textContent))
+                    if (!index_es.me(element.textContent))
                         throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
                     if ((guard && !element.hasAttribute('title')) || !guard)
                         element.setAttribute('title', element.textContent);
@@ -4683,13 +4791,13 @@ const MgMenuItem = class {
          * @returns HTML Element
          */
         this.renderSlot = () => index.h("slot", null);
-        this.identifier = index$1.Ie('mg-menu-item');
+        this.identifier = index_es.qe('mg-menu-item');
         this.href = undefined;
         this.target = undefined;
         this.status = Status$1.VISIBLE;
         this.expanded = false;
         this.size = 'medium';
-        this.navigationButtonClassList = new index$1.Xe([this.navigationButton]);
+        this.navigationButtonClassList = new index_es.Xe([this.navigationButton]);
         this.direction = undefined;
         this.isInMainMenu = undefined;
         this.isItemMore = undefined;
@@ -4697,13 +4805,13 @@ const MgMenuItem = class {
         this.displayNotificationBadge = undefined;
     }
     watchIdentifier(newValue) {
-        if (!index$1.Ge(newValue)) {
-            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.Ge(newValue)) {
+            console.error(`<mg-menu-item> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     watchTarget(newValue) {
         if (newValue && !targets.includes(newValue)) {
-            throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-link> prop "target" must be one of: ${targets.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateStatus(newValue, oldValue) {
@@ -4715,7 +4823,7 @@ const MgMenuItem = class {
     }
     validateExpanded(newValue) {
         if (typeof newValue !== 'boolean')
-            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<${this.name}> prop "expanded" must be a boolean. Passed value: ${index_es.Ye(newValue)}.`);
         // if menu-item has sub-menu we have to apply some updates:
         if (this.hasChildren) {
             const subItems = Array.from(this.element.querySelectorAll(this.name));
@@ -4843,7 +4951,7 @@ const MgMenuItem = class {
      * @returns promise process wich emit the 'item-updated' event
      */
     componentShouldUpdate() {
-        return index$1.et(() => {
+        return index_es.tt(() => {
             this.itemUpdated.emit();
         });
     }
@@ -4912,12 +5020,12 @@ const MgMessage = class {
         };
         this.variant = 'info';
         this.variantStyle = 'bar-left';
-        this.classCollection = new index$1.Xe(['mg-c-message']);
+        this.classCollection = new index_es.Xe(['mg-c-message']);
         this.hasActions = false;
     }
     watchVariant(newValue, oldValue) {
         if (!variants$1.includes(newValue)) {
-            throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-message> prop "variant" must be one of: ${variants$1.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else {
             if (newValue !== undefined)
@@ -4928,7 +5036,7 @@ const MgMessage = class {
     }
     watchVariantStyle(newValue, oldValue) {
         if (!variantStyles.includes(newValue)) {
-            throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-message> prop "variantStyle" must be one of: ${variantStyles.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else {
             if (newValue !== undefined)
@@ -4992,26 +5100,26 @@ const MgModal = class {
         this.handleClose = () => {
             this.open = false;
         };
-        this.identifier = index$1.Ie('mg-modal');
+        this.identifier = index_es.qe('mg-modal');
         this.dialogRole = dialogRoles[0];
         this.modalTitle = undefined;
         this.closeButton = false;
         this.open = false;
         this.hasActions = false;
-        this.classCollection = new index$1.Xe(['mg-c-modal']);
+        this.classCollection = new index_es.Xe(['mg-c-modal']);
     }
     watchIdentifier(newValue) {
-        if (!index$1.Ge(newValue)) {
-            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.Ge(newValue)) {
+            throw new Error(`<mg-modal> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
-            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
     }
     validateModalTitle(newValue) {
-        if (!index$1.me(newValue)) {
-            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.me(newValue)) {
+            throw new Error(`<mg-modal> prop "modalTitle" is required. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     watchOpen(newValue) {
@@ -5137,7 +5245,7 @@ const MgPagination = class {
         this.handleGoToPage = (action, disabled) => {
             !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
         };
-        this.identifier = index$1.Ie('mg-pagination');
+        this.identifier = index_es.qe('mg-pagination');
         this.label = undefined;
         this.hideNavigationLabels = undefined;
         this.hidePageCount = undefined;
@@ -5145,18 +5253,18 @@ const MgPagination = class {
         this.currentPage = 1;
     }
     watchIdentifier(newValue) {
-        if (!index$1.Ge(newValue)) {
-            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.Ge(newValue)) {
+            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateTotalPages(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateCurrentPage(newValue) {
         if (newValue < 1) {
-            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else if (newValue > this.totalPages) {
             throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
@@ -5309,7 +5417,7 @@ const MgPanel = class {
             ];
             return this.titlePosition === 'right' ? children.reverse() : children;
         };
-        this.identifier = index$1.Ie('mg-panel');
+        this.identifier = index_es.qe('mg-panel');
         this.panelTitle = undefined;
         this.titlePattern = undefined;
         this.titlePatternErrorMessage = undefined;
@@ -5318,18 +5426,18 @@ const MgPanel = class {
         this.expanded = false;
         this.expandToggleDisplay = expandToggleDisplays[0];
         this.expandToggleDisabled = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-panel']);
+        this.classCollection = new index_es.Xe(['mg-c-panel']);
         this.isEditing = false;
         this.updatedPanelTitle = undefined;
     }
     watchIdentifier(newValue) {
-        if (!index$1.Ge(newValue)) {
-            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.Ge(newValue)) {
+            console.error(`<mg-panel> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validatePanelTitle(newValue) {
-        if (!index$1.me(newValue))
-            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.me(newValue))
+            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${index_es.Ye(newValue)}.`);
         this.titleChange.emit(newValue);
     }
     validateTitlePattern(newValue) {
@@ -5338,14 +5446,14 @@ const MgPanel = class {
     }
     validateTitlePosition(newValue) {
         if (!titlePositions.includes(newValue))
-            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
     }
     handleExpanded(newValue) {
         this.expandedChange.emit(newValue);
     }
     validateExpandToggleDisplay(newValue) {
         if (!expandToggleDisplays.includes(newValue))
-            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         if (newValue === 'icon' && this.titleEditable)
             this.titleEditable = false;
     }
@@ -7284,7 +7392,7 @@ const MgPopover = class {
                 mgPopoverContent.setAttribute('id', this.identifier);
             }
         };
-        this.identifier = index$1.Ie('mg-popover');
+        this.identifier = index_es.qe('mg-popover');
         this.placement = 'bottom';
         this.arrowHide = false;
         this.closeButton = false;
@@ -7292,8 +7400,8 @@ const MgPopover = class {
         this.disabled = false;
     }
     validateIdentifier(newValue) {
-        if (!index$1.Ge(newValue)) {
-            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.Ge(newValue)) {
+            throw new Error(`<mg-popover> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
         // use renderPopoverContent to update popover-content id
         this.renderPopoverContent();
@@ -7330,7 +7438,7 @@ const MgPopover = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = index$1.Ze(window);
+        this.windows = index_es.Ze(window);
         // render mg-popover-content slot
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);
@@ -7422,7 +7530,7 @@ const MgPopoverContent = class {
             this.hideContent.emit();
         };
         this.closeButton = false;
-        this.classCollection = new index$1.Xe(['mg-c-popover-content']);
+        this.classCollection = new index_es.Xe(['mg-c-popover-content']);
     }
     /*************
      * Lifecycle *
@@ -7440,7 +7548,7 @@ const MgPopoverContent = class {
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedTitleElement = this.element.querySelector('[slot="title"]');
-        if (slottedTitleElement && !index$1.Ke(slottedTitleElement, headingTags)) {
+        if (slottedTitleElement && !index_es.Ke(slottedTitleElement, headingTags)) {
             throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);
         }
     }
@@ -7476,7 +7584,7 @@ const MgSkipLinks = class {
         this.links = undefined;
     }
     validateLinks(links) {
-        if (links === undefined || links.length === 0 || links.some(link => !index$1.me(link.href) || !link.href.startsWith('#') || !index$1.me(link.label))) {
+        if (links === undefined || links.length === 0 || links.some(link => !index_es.me(link.href) || !link.href.startsWith('#') || !index_es.me(link.label))) {
             throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
         }
     }
@@ -7495,7 +7603,7 @@ const MgSkipLinks = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("nav", { key: 'dc5eeedabd3189f40a246bd5fe6da930928e3f22', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: '178d8c46d62d8db10d43d6609efb15cbf429c207', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (index.h("nav", { key: '0b4e4d6b9481a88faae78602b07c4f5e851da517', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: 'aaa15193eb2c9e1d9ee3b2e2a7d8d0fd37836ed7', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (index.h("li", { key: link.href }, index.h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -7635,7 +7743,7 @@ const MgTabs = class {
          */
         this.resetFocus = () => {
             // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            index$1.et(() => {
+            index_es.tt(() => {
                 this.tabFocus = undefined;
                 Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
                     tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -7650,39 +7758,39 @@ const MgTabs = class {
             if (slots.length !== this.tabs.length)
                 throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
         };
-        this.identifier = index$1.Ie('mg-tabs');
+        this.identifier = index_es.qe('mg-tabs');
         this.label = undefined;
         this.size = 'medium';
         this.items = undefined;
         this.activeTab = undefined;
         this.tabs = [];
-        this.classCollection = new index$1.Xe(['mg-c-tabs']);
+        this.classCollection = new index_es.Xe(['mg-c-tabs']);
     }
     watchIdentifier(newValue) {
-        if (!index$1.Ge(newValue)) {
-            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.Ge(newValue)) {
+            console.error(`<mg-tabs> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateLabel(newValue) {
-        if (!index$1.me(newValue)) {
-            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.me(newValue)) {
+            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
         this.classCollection.add(`mg-c-tabs--size-${this.size}`);
     }
     validateItems(newValue) {
         // String array
-        if (index$1.Je(newValue))
+        if (index_es.Je(newValue))
             this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
             this.tabs = newValue;
         else
-            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${index_es.Ye(newValue)}.`);
     }
     validateActiveTab(newValue) {
         // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
@@ -7707,7 +7815,7 @@ const MgTabs = class {
             this.activeTabChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable". Passed value: ${index_es.Ye(newValue)}.`);
         }
     }
     /*************
@@ -7742,7 +7850,7 @@ const MgTabs = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: 'cbc4eade5ceffc6b6e4291ce1ee0953251b0a54d', class: this.classCollection.join() }, index.h("header", { key: '6ca55ee7a0073b08cd588b071178eeb0e5016f39', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
+        return (index.h("div", { key: '54bad50e0a610aaae267fb34384384a2aa3a2295', class: this.classCollection.join() }, index.h("header", { key: '8bc4f73112f9de115b8558a7d322398b62983fb7', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index$1) => (index.h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index$1), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -7781,11 +7889,11 @@ const MgTag = class {
         this.variant = variants[0];
         this.outline = undefined;
         this.soft = undefined;
-        this.classCollection = new index$1.Xe(['mg-c-tag']);
+        this.classCollection = new index_es.Xe(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
-            throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${index$1.Ye(newValue)}.`);
+            throw new Error(`<mg-tag> prop "variant" must be one of: ${variants.join(', ')}. Passed value: ${index_es.Ye(newValue)}.`);
         }
         else {
             if (oldValue !== undefined) {
@@ -7818,7 +7926,7 @@ const MgTag = class {
      * @param textContent - html element textContent property
      */
     validateTextContent(textContent) {
-        if (!index$1.me(textContent))
+        if (!index_es.me(textContent))
             throw new Error('<mg-tag> slot must contain a text content.');
     }
     /*************
@@ -7877,7 +7985,7 @@ const MgTooltip = class {
             // Enable the event listeners
             this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
             // hide when click outside on nextTick to prevent event to trigger after creation
-            index$1.et(() => {
+            index_es.tt(() => {
                 this.windows.forEach((localWindow) => {
                     localWindow.addEventListener('click', this.handleClickOutside, false);
                     localWindow.addEventListener('keydown', this.handlePressEscape, false);
@@ -8073,22 +8181,22 @@ const MgTooltip = class {
                 element.setAttribute('aria-describedby', `${[...new Set([...element.getAttribute('aria-describedby').split(' '), this.identifier])].join(' ')}`);
             }
         };
-        this.identifier = index$1.Ie('mg-tooltip');
+        this.identifier = index_es.qe('mg-tooltip');
         this.message = undefined;
         this.placement = 'bottom';
         this.display = false;
         this.disabled = false;
     }
     watchIdentifier(newValue) {
-        if (!index$1.Ge(newValue)) {
-            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.Ge(newValue)) {
+            throw new Error(`<mg-tooltip> prop "identifier" value is invalid. Passed value: ${index_es.Ye(newValue)}.`);
         }
         // use renderTooltipContent to update tooltip-content id
         this.renderTooltipContent();
     }
     watchMessage(newValue) {
-        if (!index$1.me(newValue)) {
-            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${index$1.Ye(newValue)}.`);
+        if (!index_es.me(newValue)) {
+            throw new Error(`<mg-tooltip> prop "message" is required and must be a string. Passed value: ${index_es.Ye(newValue)}.`);
         }
         if (this.mgTooltipContent !== undefined)
             this.mgTooltipContent.message = newValue;
@@ -8143,7 +8251,7 @@ const MgTooltip = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = index$1.Ze(window);
+        this.windows = index_es.Ze(window);
         // Get tooltip element
         this.renderTooltipContent();
         //validate properties
@@ -8161,7 +8269,7 @@ const MgTooltip = class {
         // get slotted element wich is not the tooltip
         const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
         // Get interactive element
-        const interactiveElement = slotElement.matches(index$1.Qe) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index$1.Qe);
+        const interactiveElement = slotElement.matches(index_es.Qe) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(index_es.Qe);
         this.setTooltipedElement(interactiveElement || slotElement);
         // Check if slotted element is a disabled mg-button
         // In this case we wrap the mg-button into a div to enable the tooltip