@mgdis/mg-components 5.28.1 → 5.29.0

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-9ed65b6d.js';
-import { C as Ce, i as initLocales, H as He, I as Ie, G as Ge, B as Be, q as qe, h as he, y as ye, Z as Ze, Q as Qe, J as Je, Y as Ye, P as Pe, W as We, z as ze } from './index-817d7645.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-0df3b137.js';
+import { z as ze, i as initLocales, I as Ie, Z as Ze, Y as Ye, X as Xe, J as Je, W as We, H as He, l as lt, n as nt, a as it, b as at, G as Ge, K as Ke, Q as Qe } from './index-eed80cc2.js';
 
 /**
  * Available menu-item positions
@@ -75,7 +75,7 @@ const MgActionMore = class {
          ************/
         this.name = 'mg-action-more';
         this.classBase = 'mg-c-action-more';
-        this.mgPopoverIdentifier = Ce(this.name);
+        this.mgPopoverIdentifier = ze(this.name);
         /************
          * Methods *
          ***********/
@@ -199,7 +199,7 @@ const MgBadge = class {
         this.label = undefined;
         this.variant = variants$5[0];
         this.outline = undefined;
-        this.classCollection = new He(['mg-c-badge']);
+        this.classCollection = new Ie(['mg-c-badge']);
     }
     validateValue(newValue) {
         if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
@@ -207,7 +207,7 @@ const MgBadge = class {
         }
     }
     validateLabel(newValue) {
-        if (!Ie(newValue)) {
+        if (!Ze(newValue)) {
             throw new Error('<mg-badge> prop "label" is required.');
         }
     }
@@ -318,7 +318,7 @@ const MgButton = class {
         this.isIcon = false;
         this.disableOnClick = false;
         this.loading = false;
-        this.classCollection = new He(['mg-c-button']);
+        this.classCollection = new Ie(['mg-c-button']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants$4.includes(newValue)) {
@@ -377,7 +377,7 @@ const MgButton = class {
         this.validateFullWidth(this.fullWidth);
         if (this.isIcon) {
             this.classCollection.add(`mg-c-button--icon`);
-            if (!Ie(this.label)) {
+            if (!Ze(this.label)) {
                 throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
             }
         }
@@ -389,7 +389,7 @@ const MgButton = class {
      * Add listners
      */
     componentDidLoad() {
-        Ge(() => {
+        Ye(() => {
             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;
@@ -406,7 +406,7 @@ const MgButton = class {
      */
     render() {
         var _a;
-        return (h(Host, { key: '8aa45a51510eccbb021e452d540c77844f3f4792', 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 }, h("div", { key: '9743ead1b9fd1f70ef0690087806a1767c5825b0', class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { key: '543718fe45ad3e1901c4ef0c39b98705aa9fd64e', icon: "loader", spin: true }), h("div", { key: '21bc8c1a14f93db8b2373864a18da5c651e1ac4d', class: "mg-c-button__content" }, h("slot", { key: 'd16d710b4cb94ec1b7e3dfee2d4a70ee059528b4' })))));
+        return (h(Host, { key: '1b54d5a3ae7656215f0f60dcebf13caed4afe09e', 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 }, h("div", { key: 'ee66e5b1d78d7344634e736b39e29640de8c5755', class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { key: '6da3bfa9accafda3cf1d960d229bf3d75abc9250', icon: "loader", spin: true }), h("div", { key: '9ab6e8910210543fc7c0745d63f0e260003aa000', class: "mg-c-button__content" }, h("slot", { key: '44ba371bb96f86632f084610cdffb0b0fafa3980' })))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -448,7 +448,7 @@ const MgCard = class {
         };
         this.variant = undefined;
         this.variantStyle = undefined;
-        this.classCollection = new He([this.classBase]);
+        this.classCollection = new Ie([this.classBase]);
     }
     validateVariant(newValue, oldValue) {
         if (newValue && !variants$3.includes(newValue))
@@ -553,7 +553,7 @@ const MgDetails = class {
         this.expanded = false;
     }
     validateTitles(newValue) {
-        if (!Ie(newValue)) {
+        if (!Ze(newValue)) {
             throw new Error('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
         }
     }
@@ -711,7 +711,7 @@ const MgForm = class {
                 }
             });
         };
-        this.identifier = Ce('mg-form');
+        this.identifier = ze('mg-form');
         this.name = this.identifier;
         this.readonly = false;
         this.requiredMessage = undefined;
@@ -720,7 +720,7 @@ const MgForm = class {
         this.disabled = false;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new He(['mg-c-form']);
+        this.classCollection = new Ie(['mg-c-form']);
         this.requiredMessageText = undefined;
     }
     validateRequiredMessage(newValue) {
@@ -861,7 +861,7 @@ const MgIcon = class {
         this.variant = undefined;
         this.variantStyle = undefined;
         this.spin = false;
-        this.classCollection = new He(['mg-c-icon']);
+        this.classCollection = new Ie(['mg-c-icon']);
     }
     validateIcon(newValue, oldValue) {
         if (!Object.keys(icons).includes(newValue))
@@ -960,7 +960,7 @@ const MgIllustratedMessage = class {
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedIllustrations = this.element.querySelectorAll('[slot="illustration"]');
-        if (!Be(this.element.querySelector('[slot="title"]'), headingTags)) {
+        if (!Xe(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) {
@@ -1061,7 +1061,7 @@ const MgInput = class {
         this.isVerticalList = false;
     }
     watchIdentifier(newValue) {
-        if (!Ie(newValue)) {
+        if (!Ze(newValue)) {
             throw new Error('<mg-input> prop "identifier" is required.');
         }
         else {
@@ -1146,7 +1146,7 @@ const MgInput = class {
      */
     // eslint-disable-next-line @stencil-community/no-unused-watch
     watchLabel() {
-        if (!Ie(this.label)) {
+        if (!Ze(this.label)) {
             throw new Error('<mg-input> prop "label" is required.');
         }
         else {
@@ -1301,9 +1301,7 @@ var SelectValuesButtonKey;
  * @param props - MgInputCheckboxList Interface Props
  * @returns input template
  */
-const MgInputCheckboxList = (props) => (
-// eslint-disable-next-line jsx-a11y/no-redundant-roles
-h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-describedby": props.displaySearchInput ? 'search-results' : undefined, "aria-label": props.displaySearchInput ? props.messages.searchResults : undefined, "aria-live": props.displaySearchInput ? 'polite' : undefined, id: props.id }, props.checkboxes.map(input => {
+const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__input-group-container", role: "list", "aria-describedby": props.displaySearchInput ? 'search-results' : undefined, "aria-label": props.displaySearchInput ? props.messages.searchResults : undefined, "aria-live": props.displaySearchInput ? 'polite' : undefined, id: props.id }, props.checkboxes.map(input => {
     var _a, _b;
     return (h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } },
         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 }),
@@ -1460,7 +1458,7 @@ const MgInputCheckbox = class {
          * Method to update searchResults
          */
         this.updateSearchResults = () => {
-            this.searchResults = this.checkboxItems.filter(item => qe(item.title).includes(qe(this.searchValue)));
+            this.searchResults = this.checkboxItems.filter(item => Je(item.title).includes(Je(this.searchValue)));
         };
         /**
          * Method to validate if one of inputs value is checked id required
@@ -1534,7 +1532,7 @@ const MgInputCheckbox = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new He([this.baseClassName, classFieldset]);
+        this.classCollection = new Ie([this.baseClassName, classFieldset]);
         this.errorMessage = undefined;
         this.checkboxItems = [];
         this.displaySearchInput = undefined;
@@ -1642,7 +1640,7 @@ const MgInputCheckbox = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Ie(errorMessage)) {
+        else if (!Ze(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -1755,7 +1753,7 @@ const MgInputCheckbox = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '619a108d13b49c7b74dded7afa759202aa909abb', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonlyValue: this.value.filter(({ value }) => value).map(({ title }) => title), tooltip: !this.readonly ? this.tooltip : undefined, tooltipPosition: this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, this.type === 'checkbox' || this.readonly ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
+        return (h("mg-input", { key: 'c0b23390de51d9be03440d1afbb0a058af4b8207', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, readonlyValue: this.value.filter(({ value }) => value).map(({ title }) => title), tooltip: !this.readonly ? this.tooltip : undefined, tooltipPosition: this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, this.type === 'checkbox' || this.readonly ? (h(MgInputCheckboxList, { checkboxes: this.checkboxItems, displaySearchInput: this.displaySearchInput, messages: this.messages.input.checkbox, id: "checkboxes-list", disabled: this.disabled, name: this.name, invalid: this.invalid })) : (this.renderCheckboxMulti())));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -1905,7 +1903,7 @@ const MgInputDate = class {
          * @param value - value to test
          * @returns truthy when value match the pattern
          */
-        this.isValidPattern = (value) => Ie(value) && he.test(value);
+        this.isValidPattern = (value) => Ze(value) && We.test(value);
         /**
          * Format help text to display
          * @param helpText - help text format
@@ -1913,10 +1911,10 @@ const MgInputDate = class {
          */
         this.formatHelpText = (helpText) => {
             const defaultHelpTextVariable = '{defaultHelpText}';
-            let text = Ie(helpText) ? helpText : this.messages.input.date.helpText;
+            let text = Ze(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}', ye(Ze(new Date('2023-12-24')), this.systemLocale));
+            return text.replace('{pattern}', this.renderPattern()).replace('{date}', He(lt(new Date('2023-12-24')), this.systemLocale));
         };
         /**
          * Handle input event
@@ -2008,8 +2006,8 @@ const MgInputDate = class {
                 // min, max & minMax
                 else if ([InputError$1.MIN, InputError$1.MAX, InputError$1.MINMAX].includes(inputError)) {
                     this.errorMessage = this.messages.errors.date[inputError]
-                        .replace('{min}', ye(this.min, this.systemLocale))
-                        .replace('{max}', ye(this.max, this.systemLocale));
+                        .replace('{min}', He(this.min, this.systemLocale))
+                        .replace('{max}', He(this.max, this.systemLocale));
                 }
                 // wrong date format
                 // element.validity.badInput is default error message
@@ -2023,7 +2021,7 @@ const MgInputDate = class {
          * @returns translated html pattern
          */
         this.renderPattern = () => {
-            let patternLocal = Qe(this.systemLocale);
+            let patternLocal = nt(this.systemLocale);
             for (const key in this.messages.input.date.pattern) {
                 patternLocal = patternLocal.replace(key, this.messages.input.date.pattern[key]);
             }
@@ -2045,7 +2043,7 @@ const MgInputDate = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new He(['mg-c-input--date']);
+        this.classCollection = new Ie(['mg-c-input--date']);
         this.errorMessage = undefined;
     }
     validateValue(newValue) {
@@ -2053,7 +2051,7 @@ const MgInputDate = class {
         if (newValue === '')
             newValue = null;
         // check value validity
-        if (newValue && !Ie(newValue)) {
+        if (newValue && !Ze(newValue)) {
             throw new Error("<mg-input-date> props 'value' must be a valid string");
         }
         else if (!newValue || (newValue && this.isValidPattern(newValue))) {
@@ -2110,7 +2108,7 @@ const MgInputDate = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Ie(errorMessage)) {
+        else if (!Ze(errorMessage)) {
             throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2164,7 +2162,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: ye(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', 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 (h("mg-input", { key: 'f38d79cb71311149b4d15885b65cd8f025dde15d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: He(this.value, this.locale), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.formatHelpText(this.helpText), errorMessage: this.errorMessage }, h("input", { key: '67bf6f0ad58ee1a506ffd0d3d41d5954db68465c', 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;
             } })));
@@ -2295,9 +2293,9 @@ const MgInputNumeric = class {
         this.formatValue = (value) => {
             switch (this.format) {
                 case 'number':
-                    return Ye(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
+                    return at(value, this.locale, this.type === 'decimal' ? this.decimalLength : undefined);
                 case 'currency':
-                    return Je(value, this.locale, this.currency);
+                    return it(value, this.locale, this.currency);
                 case 'none':
                     return value.toString();
             }
@@ -2334,7 +2332,7 @@ const MgInputNumeric = class {
         this.decimalLength = 2;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new He(['mg-c-input--numeric']);
+        this.classCollection = new Ie(['mg-c-input--numeric']);
         this.errorMessage = undefined;
         this.hasFocus = undefined;
     }
@@ -2430,7 +2428,7 @@ const MgInputNumeric = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Ie(errorMessage)) {
+        else if (!Ze(errorMessage)) {
             throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2623,7 +2621,7 @@ const MgInputPassword = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new He(['mg-c-input--password']);
+        this.classCollection = new Ie(['mg-c-input--password']);
         this.errorMessage = undefined;
         this.displayPassword = false;
     }
@@ -2681,7 +2679,7 @@ const MgInputPassword = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Ie(errorMessage)) {
+        else if (!Ze(errorMessage)) {
             throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2828,11 +2826,22 @@ const MgInputRadio = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new He(['mg-c-input--radio', classFieldset]);
+        this.classCollection = new Ie(['mg-c-input--radio', classFieldset]);
         this.errorMessage = undefined;
         this.options = undefined;
+        this.readonlyValue = undefined;
     }
-    handleValue(newValue) {
+    watchValue(newValue) {
+        var _a;
+        if (Ge(this.items) && typeof newValue === 'string') {
+            this.readonlyValue = newValue;
+        }
+        else if (this.items.every(isOption$2)) {
+            this.readonlyValue = (_a = this.items.find(item => item.value === newValue)) === null || _a === void 0 ? void 0 : _a.title;
+        }
+        else {
+            this.readonlyValue = null;
+        }
         this.valueChange.emit(newValue);
     }
     validateItems(newValue) {
@@ -2841,7 +2850,7 @@ const MgInputRadio = class {
             throw new Error('<mg-input-radio> prop "items" require at least 2 items.');
         }
         // String array
-        else if (Pe(newValue)) {
+        else if (Ge(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item, disabled: this.disabled }));
         }
         // Object array
@@ -2900,7 +2909,7 @@ const MgInputRadio = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Ie(errorMessage)) {
+        else if (!Ze(errorMessage)) {
             throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -2936,6 +2945,7 @@ const MgInputRadio = class {
         this.watchInputVerticalList(this.inputVerticalList);
         this.watchReadonly(this.readonly);
         this.watchDisabled(this.disabled);
+        this.watchValue(this.value);
         // Check validity when component is ready
         // return a promise to process action only in the FIRST render().
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -2948,15 +2958,14 @@ const MgInputRadio = class {
      * @returns HTML Element
      */
     render() {
-        var _a;
-        return (h("mg-input", { key: 'a987bc86a4bf97aead796cd7c91110cc0e3c90df', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("ul", { key: 'e5e249a744ecb1f09cdbe7f9ec9d8f44b8b20ece', class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
+        return (h("mg-input", { key: '5c091907a3ac41d272fe2486de715f3a0bd59565', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("ul", { key: 'bae1b7f3b6310dcd22448928117e77763c158070', class: "mg-c-input__input-group-container", role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: (el) => {
                 if (el !== null)
                     this.inputs[index] = el;
             } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
-        "value": ["handleValue"],
+        "value": ["watchValue"],
         "items": ["validateItems"],
         "inputVerticalList": ["watchInputVerticalList"],
         "readonly": ["watchReadonly", "handleValidityChange"],
@@ -3047,7 +3056,7 @@ const MgInputSelect = class {
             if (this.input.value === '') {
                 this.setValue(null);
             }
-            else if (Pe(this.items) && this.items.includes(this.input.value)) {
+            else if (Ge(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)) {
@@ -3121,7 +3130,7 @@ const MgInputSelect = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new He(['mg-c-input--select']);
+        this.classCollection = new Ie(['mg-c-input--select']);
         this.errorMessage = undefined;
         this.options = undefined;
         this.valueExist = undefined;
@@ -3129,7 +3138,7 @@ const MgInputSelect = class {
     }
     validateValue(newValue) {
         var _a, _b;
-        if (Pe(this.items) && typeof newValue === 'string') {
+        if (Ge(this.items) && typeof newValue === 'string') {
             this.readonlyValue = ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) ? this.input.value : newValue;
         }
         else if (allItemsAreOptions(this.items)) {
@@ -3146,7 +3155,7 @@ const MgInputSelect = class {
             this.options = [];
         }
         // String array
-        else if (Pe(newValue)) {
+        else if (Ge(newValue)) {
             if (typeof this.value === 'string')
                 this.valueExist = newValue.includes(this.value);
             this.options = newValue.map(item => ({ title: item, value: item }));
@@ -3218,7 +3227,7 @@ const MgInputSelect = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Ie(errorMessage)) {
+        else if (!Ze(errorMessage)) {
             throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3271,11 +3280,11 @@ const MgInputSelect = class {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: 'b6e431b881062928dfff44b35b40e2c16a8c56fc', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("select", { key: '964162aae800e85cf9801c67c264736061fd80c6', class: "mg-c-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
+        return (h("mg-input", { key: 'a5826f3afc824d081a9bef4237a1d0dbd440a2f3', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonlyValue: this.readonlyValue, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, h("select", { key: '709c0a75f1a644b306dcc37207369d0e3a9463e4', 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
-        h("option", { key: '9c24f8983858810541a0a626a5705ac9d05e26e0', value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption$1(option) && this.renderOption(option))))));
+        h("option", { key: '9e5f8961c712a4bee4ffd1656ae89a78ced5181b', value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => isOptGroup(option) ? (h("optgroup", { label: option.group, key: option.group }, option.options.map(this.renderOption))) : (isOption$1(option) && this.renderOption(option))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -3330,7 +3339,7 @@ const MgInputText = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new He(this.classCollection.classes);
+            this.classCollection = new Ie(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3338,7 +3347,7 @@ const MgInputText = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new He(this.classCollection.classes);
+            this.classCollection = new Ie(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = Handler.BLUR;
             this.displayError().finally(() => {
@@ -3413,7 +3422,7 @@ const MgInputText = class {
         this.helpText = undefined;
         this.valid = undefined;
         this.invalid = undefined;
-        this.classCollection = new He(['mg-c-input--text']);
+        this.classCollection = new Ie(['mg-c-input--text']);
         this.errorMessage = undefined;
     }
     handleValue(newValue) {
@@ -3464,7 +3473,7 @@ const MgInputText = class {
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validatePattern(newValue) {
-        if (newValue !== undefined && !(Ie(this.pattern) && Ie(this.patternErrorMessage))) {
+        if (newValue !== undefined && !(Ze(this.pattern) && Ze(this.patternErrorMessage))) {
             throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
         }
     }
@@ -3494,7 +3503,7 @@ const MgInputText = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Ie(errorMessage)) {
+        else if (!Ze(errorMessage)) {
             throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3603,7 +3612,7 @@ const MgInputTextarea = class {
          */
         this.handleFocus = () => {
             this.classCollection.add(this.classFocus);
-            this.classCollection = new He(this.classCollection.classes);
+            this.classCollection = new Ie(this.classCollection.classes);
         };
         /**
          * Handle blur event
@@ -3611,7 +3620,7 @@ const MgInputTextarea = class {
         this.handleBlur = () => {
             // Manage focus
             this.classCollection.delete(this.classFocus);
-            this.classCollection = new He(this.classCollection.classes);
+            this.classCollection = new Ie(this.classCollection.classes);
             // Display Error
             this.handlerInProgress = Handler.BLUR;
             this.displayError().finally(() => {
@@ -3674,7 +3683,7 @@ const MgInputTextarea = class {
         this.valid = undefined;
         this.invalid = undefined;
         this.resizable = 'none';
-        this.classCollection = new He(['mg-c-input--textarea']);
+        this.classCollection = new Ie(['mg-c-input--textarea']);
         this.errorMessage = undefined;
     }
     handleValue(newValue) {
@@ -3713,7 +3722,7 @@ const MgInputTextarea = class {
             this.classCollection.add(`mg-c-input--width-${this.mgWidth}`);
     }
     validatePattern(newValue) {
-        if (newValue !== undefined && !(Ie(this.pattern) && Ie(this.patternErrorMessage))) {
+        if (newValue !== undefined && !(Ze(this.pattern) && Ze(this.patternErrorMessage))) {
             throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
         }
     }
@@ -3745,7 +3754,7 @@ const MgInputTextarea = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Ie(errorMessage)) {
+        else if (!Ze(errorMessage)) {
             throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -3834,7 +3843,7 @@ const MgInputTitle = class {
         this.tagName = 'label';
     }
     validateIdentifier(newValue) {
-        if (!Ie(newValue)) {
+        if (!Ze(newValue)) {
             throw new Error('<mg-input-title> prop "identifier" is required.');
         }
     }
@@ -3948,7 +3957,7 @@ const MgInputToggle = class {
         this.tooltip = undefined;
         this.tooltipPosition = 'input';
         this.helpText = undefined;
-        this.classCollection = new He(['mg-c-input--toggle']);
+        this.classCollection = new Ie(['mg-c-input--toggle']);
         this.options = undefined;
         this.errorMessage = undefined;
         this.valid = undefined;
@@ -3965,7 +3974,7 @@ const MgInputToggle = class {
             throw new Error('<mg-input-toggle> prop "items" require 2 items.');
         }
         // String array
-        else if (Pe(newValue)) {
+        else if (Ge(newValue)) {
             this.options = newValue.map(item => ({ title: item, value: item }));
         }
         // Object array
@@ -4021,7 +4030,7 @@ const MgInputToggle = class {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
         }
-        else if (!Ie(errorMessage)) {
+        else if (!Ze(errorMessage)) {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
         }
         else {
@@ -4252,7 +4261,7 @@ const MgItemMore = class {
             if (!proxy)
                 return;
             // remove proxy id to prevent duplicate key. default html id is: '';
-            if (Ie(proxy.id))
+            if (Ze(proxy.id))
                 proxy.id = '';
             const proxyClickHandler = () => {
                 this.parentMenu
@@ -4296,7 +4305,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
-                Ge(() => {
+                Ye(() => {
                     if (child.querySelector('mg-menu')) {
                         child.querySelectorAll('mg-menu-item').forEach(this.setProxyElement);
                     }
@@ -4622,7 +4631,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 (!Ie(element.textContent))
+                    if (!Ze(element.textContent))
                         throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
                     if ((guard && element.getAttribute('title') === null) || !guard)
                         element.setAttribute('title', element.textContent);
@@ -4691,13 +4700,13 @@ const MgMenuItem = class {
          * @returns HTML Element
          */
         this.renderSlot = () => h("slot", null);
-        this.identifier = Ce('mg-menu-item');
+        this.identifier = ze('mg-menu-item');
         this.href = undefined;
         this.target = undefined;
         this.status = Status$1.VISIBLE;
         this.expanded = false;
         this.size = 'regular';
-        this.navigationButtonClassList = new He([this.navigationButton]);
+        this.navigationButtonClassList = new Ie([this.navigationButton]);
         this.direction = undefined;
         this.isInMainMenu = undefined;
         this.isItemMore = undefined;
@@ -4844,7 +4853,7 @@ const MgMenuItem = class {
      * Emit event when component is updated
      */
     componentShouldUpdate() {
-        return Ge(() => {
+        return Ye(() => {
             this.itemUpdated.emit();
         });
     }
@@ -4951,13 +4960,13 @@ const MgMessage = class {
                     return 'exclamation-circle';
             }
         };
-        this.identifier = Ce('mg-message');
+        this.identifier = ze('mg-message');
         this.delay = undefined;
         this.variant = variants$1[0];
         this.closeButton = false;
         this.hide = false;
         this.noAriaRole = undefined;
-        this.classCollection = new He(['mg-c-message']);
+        this.classCollection = new Ie(['mg-c-message']);
         this.hasActions = false;
     }
     validateDelay(newValue) {
@@ -5100,12 +5109,12 @@ const MgModal = class {
          */
         this.setFocus = () => {
             // Get all focusable elements
-            const slottedFocusableElements = Array.from(this.element.querySelectorAll(We));
+            const slottedFocusableElements = Array.from(this.element.querySelectorAll(Ke));
             // If close button is enabled or at least one of the slotted element is focusable
             if (this.closeButton || slottedFocusableElements.length > 0) {
                 // Check if slotted focusable elements have shadowDom with focusable elements
                 this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {
-                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(We) || focusableElement : focusableElement);
+                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(Ke) || focusableElement : focusableElement);
                     return acc;
                 }, []);
                 // When close button is enabled it's the first focusable element.
@@ -5127,21 +5136,21 @@ const MgModal = class {
         this.handleClose = () => {
             this.hide = true;
         };
-        this.identifier = Ce('mg-modal');
+        this.identifier = ze('mg-modal');
         this.dialogRole = dialogRoles[0];
         this.modalTitle = undefined;
         this.closeButton = false;
         this.hide = undefined;
         this.hasActions = false;
         this.hasContent = false;
-        this.classCollection = new He(['mg-c-modal']);
+        this.classCollection = new Ie(['mg-c-modal']);
     }
     validateDialogRole(newValue) {
         if (!dialogRoles.includes(newValue))
             throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
     }
     validateModalTitle(newValue) {
-        if (!Ie(newValue)) {
+        if (!Ze(newValue)) {
             throw new Error('<mg-modal> prop "modalTitle" is required.');
         }
     }
@@ -5288,7 +5297,7 @@ const MgPagination = class {
         this.handleGoToPage = (action, disabled) => {
             !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
         };
-        this.identifier = Ce('mg-pagination');
+        this.identifier = ze('mg-pagination');
         this.label = undefined;
         this.hideNavigationLabels = undefined;
         this.hidePageCount = undefined;
@@ -5453,7 +5462,7 @@ const MgPanel = class {
             ];
             return this.titlePosition === 'right' ? children.reverse() : children;
         };
-        this.identifier = Ce('mg-panel');
+        this.identifier = ze('mg-panel');
         this.panelTitle = undefined;
         this.titlePattern = undefined;
         this.titlePatternErrorMessage = undefined;
@@ -5462,12 +5471,12 @@ const MgPanel = class {
         this.expanded = false;
         this.expandToggleDisplay = expandToggleDisplays[0];
         this.expandToggleDisabled = undefined;
-        this.classCollection = new He(['mg-c-panel']);
+        this.classCollection = new Ie(['mg-c-panel']);
         this.isEditing = false;
         this.updatedPanelTitle = undefined;
     }
     validatePanelTitle(newValue) {
-        if (!Ie(newValue))
+        if (!Ze(newValue))
             throw new Error('<mg-panel> prop "panelTitle" is required.');
         this.titleChange.emit(newValue);
     }
@@ -7418,7 +7427,7 @@ const MgPopover = class {
                 mgPopoverContent.setAttribute('id', this.identifier);
             }
         };
-        this.identifier = Ce('mg-popover');
+        this.identifier = ze('mg-popover');
         this.placement = 'bottom';
         this.arrowHide = false;
         this.closeButton = false;
@@ -7461,7 +7470,7 @@ const MgPopover = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = ze(window);
+        this.windows = Qe(window);
         // render mg-popover-content slot
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);
@@ -7553,7 +7562,7 @@ const MgPopoverContent = class {
             this.hideContent.emit();
         };
         this.closeButton = false;
-        this.classCollection = new He(['mg-c-popover-content']);
+        this.classCollection = new Ie(['mg-c-popover-content']);
     }
     /*************
      * Lifecycle *
@@ -7571,7 +7580,7 @@ const MgPopoverContent = class {
     componentDidLoad() {
         const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
         const slottedTitleElement = this.element.querySelector('[slot="title"]');
-        if (slottedTitleElement && !Be(slottedTitleElement, headingTags)) {
+        if (slottedTitleElement && !Xe(slottedTitleElement, headingTags)) {
             throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
         }
     }
@@ -7607,7 +7616,7 @@ const MgSkipLinks = class {
         this.links = undefined;
     }
     validateLinks(links) {
-        if (links === undefined || links.length === 0 || links.some(link => !Ie(link.href) || !link.href.startsWith('#') || !Ie(link.label))) {
+        if (links === undefined || links.length === 0 || links.some(link => !Ze(link.href) || !link.href.startsWith('#') || !Ze(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.`);
         }
     }
@@ -7626,7 +7635,7 @@ const MgSkipLinks = class {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '2dac1b6dab0eb2634b803240325822ea3c8bae63', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'e050de2426d080ede6a2b983ec0f9452b0e0f43b', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (h("nav", { key: 'e5a7020edfe2e491af48785f3d9fa9bede770ae5', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'da692631900bb61269803e93718d0dacdb6a5e8a', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -7759,7 +7768,7 @@ const MgTabs = class {
          */
         this.resetFocus = () => {
             // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
-            Ge(() => {
+            Ye(() => {
                 this.tabFocus = undefined;
                 Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {
                     tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');
@@ -7774,16 +7783,16 @@ const MgTabs = class {
             if (slots.length !== this.tabs.length)
                 throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
         };
-        this.identifier = Ce('mg-tabs');
+        this.identifier = ze('mg-tabs');
         this.label = undefined;
         this.size = 'regular';
         this.items = undefined;
         this.activeTab = undefined;
         this.tabs = [];
-        this.classCollection = new He(['mg-c-tabs']);
+        this.classCollection = new Ie(['mg-c-tabs']);
     }
     validateLabel(newValue) {
-        if (!Ie(newValue)) {
+        if (!Ze(newValue)) {
             throw new Error('<mg-tabs> prop "label" is required.');
         }
     }
@@ -7795,7 +7804,7 @@ const MgTabs = class {
     }
     validateItems(newValue) {
         // String array
-        if (Pe(newValue))
+        if (Ge(newValue))
             this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
@@ -7895,7 +7904,7 @@ const MgTag = class {
         this.variant = variants[0];
         this.outline = undefined;
         this.soft = undefined;
-        this.classCollection = new He(['mg-c-tag']);
+        this.classCollection = new Ie(['mg-c-tag']);
     }
     validateVariant(newValue, oldValue) {
         if (!variants.includes(newValue)) {
@@ -7932,7 +7941,7 @@ const MgTag = class {
      * @param textContent - html element textContent property
      */
     validateTextContent(textContent) {
-        if (!Ie(textContent))
+        if (!Ze(textContent))
             throw new Error('<mg-tag> slot must contain a text content.');
     }
     /*************
@@ -7992,7 +8001,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
-            Ge(() => {
+            Ye(() => {
                 this.windows.forEach((localWindow) => {
                     localWindow.addEventListener('click', this.handleClickOutside, false);
                     localWindow.addEventListener('keydown', this.handlePressEscape, false);
@@ -8182,7 +8191,7 @@ const MgTooltip = class {
                 element.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
             }
         };
-        this.identifier = Ce('mg-tooltip');
+        this.identifier = ze('mg-tooltip');
         this.message = undefined;
         this.placement = 'bottom';
         this.display = false;
@@ -8193,7 +8202,7 @@ const MgTooltip = class {
         this.renderTooltipContent();
     }
     watchMessage(newValue) {
-        if (!Ie(newValue)) {
+        if (!Ze(newValue)) {
             throw new Error('<mg-tooltip> prop "message" is required.');
         }
         this.mgTooltipContent.message = newValue;
@@ -8248,7 +8257,7 @@ const MgTooltip = class {
      */
     componentWillLoad() {
         // Get windows to attach events
-        this.windows = ze(window);
+        this.windows = Qe(window);
         // Get tooltip element
         this.renderTooltipContent();
         //validate properties
@@ -8266,7 +8275,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(We) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(We);
+        const interactiveElement = slotElement.matches(Ke) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(Ke);
         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