@mgdis/mg-components 6.13.1 → 6.14.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CATFkm3O.js');
+var index = require('./index-DzBkSgSK.js');
 var index$1 = require('./index-DUJwxnoi.js');
 var index$2 = require('./index-CwjAofQ1.js');
 var events_utils = require('./events.utils-D5SAtkpQ.js');
@@ -284,7 +284,7 @@ const mgButtonCss = "/*!\n * @prop --mg-c-button-border-radius: Defines the bord
 const MgButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.disabledChange = index.createEvent(this, "disabled-change");
+        this.disabledChange = index.createEvent(this, "disabled-change", 7);
         /************
          * Internal *
          ************/
@@ -497,22 +497,66 @@ const MgButton = class {
 };
 MgButton.style = mgButtonCss;
 
-const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid color-mix(in srgb, var(--mg-b-color-dark), transparent 95%)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default));box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
+/**
+ * List of all possibles radius size
+ */
+const radiusSizes = ['xsmall', 'small', 'medium'];
+
+const mgCardCss = "/*!\n * @prop --mg-c-card-overflow: Defines the overflow property for the card. Unset by default, fallback on `--mg-c-card-overflow-default`.\n * @prop --mg-c-card-overflow-default: Defines the default overflow property for the card. Unset by default.\n * @prop --mg-c-card-min-width: Defines the min-width property for the card. Unset by default.\n * @prop --mg-c-card-max-width: Defines the max-width property for the card. Unset by default.\n * @prop --mg-c-card-spacing: Defines the padding property for the card. Unset by default, fallback on `--mg-c-card-spacing-default`.\n * @prop --mg-c-card-spacing-default: Defines the default padding property for the card. Default value: `--mg-b-size-16`.\n * @prop --mg-c-card-border: Defines the border property for the card. Unset by default, fallback on `--mg-c-card-border-default`.\n * @prop --mg-c-card-border-default: Defines the default border property for the card. Default value: `var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)`.\n * @prop --mg-c-card-border-radius: Defines the border radius property for the card. Unset by default, fallback on `--mg-c-card-border-radius-default`.\n * @prop --mg-c-card-border-radius-default: Defines the default border radius property for the card. Default value: `--mg-b-size-12`.\n * @prop --mg-c-card-color-background: Defines the background property for the card. Unset by default, fallback on `--mg-c-card-color-background-default`.\n * @prop --mg-c-card-color-background-default: Defines the default background property for the card. Default value: `--mg-b-color-light`.\n * @prop --mg-c-card-box-shadow: Defines the box shadow property for the card. Unset by default, fallback on `--mg-c-card-box-shadow-default`.\n * @prop --mg-c-card-box-shadow-default: Defines the default box shadow property for the card. Default value: `--mg-b-box-shadow`.\n */.mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-4)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-8)}";
 
 const MgCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Add box-shadow style
+         */
+        this.shadow = false;
+        /**
+         * Define the border radius size
+         */
+        this.radiusSize = 'medium';
+        /**
+         * Component classes
+         */
+        this.classCollection = new index$1.ClassList(['mg-c-card']);
+    }
+    watchShadow(newValue) {
+        if (newValue) {
+            this.classCollection.add('mg-c-card--shadow');
+        }
+        else {
+            this.classCollection.delete('mg-c-card--shadow');
+        }
+    }
+    watchRadiusSize(newValue, oldValue) {
+        if (oldValue !== undefined && radiusSizes.includes(oldValue)) {
+            this.classCollection.delete(`mg-c-card--radius-${oldValue}`);
+        }
+        if (radiusSizes.includes(newValue)) {
+            this.classCollection.add(`mg-c-card--radius-${newValue}`);
+        }
     }
     /*************
      * Lifecycle *
      *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.watchShadow(this.shadow);
+        this.watchRadiusSize(this.radiusSize);
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, index.h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
+        return (index.h("div", { key: '6f83c5f7f9e0aacf502e407450cfdf039635a1f1', class: this.classCollection.join() }, index.h("slot", { key: '6bf8c02d3c3c9d0719e45af96b41f54289e31961' })));
     }
+    static get watchers() { return {
+        "shadow": ["watchShadow"],
+        "radiusSize": ["watchRadiusSize"]
+    }; }
 };
 MgCard.style = mgCardCss;
 
@@ -567,7 +611,7 @@ const mgDetailsCss = ".mg-u-visually-hidden{position:absolute !important;overflo
 const MgDetails = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.expandedChange = index.createEvent(this, "expanded-change");
+        this.expandedChange = index.createEvent(this, "expanded-change", 7);
         /**
          * Hide summary element
          */
@@ -666,9 +710,9 @@ const mgFormCss = ".mg-u-form-legacy{--mg-c-form-inputs-title-width:calc(100% /
 const MgForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.formValid = index.createEvent(this, "form-valid");
-        this.formSubmit = index.createEvent(this, "form-submit");
-        this.formReset = index.createEvent(this, "form-reset");
+        this.formValid = index.createEvent(this, "form-valid", 7);
+        this.formSubmit = index.createEvent(this, "form-submit", 7);
+        this.formReset = index.createEvent(this, "form-reset", 7);
         // Classes
         this.classAllRequired = 'mg-c-form--all-required';
         this.classLabelOnTop = 'mg-c-form--label-on-top';
@@ -1178,6 +1222,10 @@ const MgInput = class {
          * Define if input is required
          */
         this.required = false;
+        /**
+         * Define aria-describedby ids to link with
+         */
+        this.ariaDescribedbyIDs = [];
         /**
          * Element is fieldset
          */
@@ -1253,8 +1301,17 @@ const MgInput = class {
         }
     }
     watchAriaDescribedbyIDs() {
-        if (this.isReadonly)
+        if (this.isReadonly) {
+            return;
+        }
+        else if (typeof this.ariaDescribedbyIDs === 'string') {
+            this.ariaDescribedbyIDs = this.ariaDescribedbyIDs.split(' ');
             return;
+        }
+        else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every(entry => typeof entry === 'string'))) {
+            this.ariaDescribedbyIDs = [];
+            return;
+        }
         // a11y IDs
         const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
         // Help text
@@ -1389,7 +1446,7 @@ const MgInput = class {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (index.h(index.Host, { key: 'fb239d1d75a2fe4f2f7796e75fd3949e58c37882', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: '0a0b36084782d57db0571b56798d87f8597e1256', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: 'd89b8b8818b24c0798c1b2dab37faf0d1573dfa1', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), index.h("div", { key: '61fd67410d42d49e22f14f9dbff6a20446f2b8bf', class: "mg-c-input__input-container" }, index.h("div", { key: 'becf5ed690f1d67782c7c3ebd4c1f6ac304d39ed', class: "mg-c-input__input" }, index.h("slot", { key: '92b902d304351938a538fa8a35cdda0f9ad4d932' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (index.h("div", { key: 'fcec4c1057241286ed5e2791d09b642d454fceed', class: "mg-c-input__help-text" }, index.h("slot", { key: '8b219b2d34a73371a0edfe6d545e3023cd4b3621', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (index.h("div", { key: '644c00027e4a7ba82eadb6a149c58a451c1768d3', class: "mg-c-input__error", "aria-live": "assertive" }, index.h("slot", { key: '612d6bcd7ee465ff671e76b8764044a72459d3d8', name: this.slotError }))))));
+        return (index.h(index.Host, { key: '7c4c22aaa8f8d250eafa9159a103a11e637b0cca', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, index.h("div", { key: '2215e7b2d96e08507579a39d8e05b3e8a3d901fb', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, index.h("slot", { key: 'a4dbf4e36dd3ae5437d6dcb05d807f4faa0924b7', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), index.h("div", { key: '8e382a4857f469a9d6f77cad613183798df4d1e1', class: "mg-c-input__input-container" }, index.h("div", { key: 'f9897f90d44aab19614d4d40d77a8eb270c92847', class: "mg-c-input__input" }, index.h("slot", { key: 'c8d809d4ff0d0e660849825f016f9267da3a2d7e' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (index.h("div", { key: 'cebd6c083d088aebcdae6f032c6cdcf2387c3e27', class: "mg-c-input__help-text" }, index.h("slot", { key: '923fcc78b309d197e32522052b297ef0f58b1495', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (index.h("div", { key: 'e706bff54ce21191a8c0940c60f6e99a91cfb9ec', class: "mg-c-input__error", "aria-live": "assertive" }, index.h("slot", { key: '6524debd3640df7b5e73ef4aa4415569eef1ecd8', name: this.slotError }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -1445,8 +1502,8 @@ const isCheckboxItems = (items) => Array.isArray(items) &&
 const MgInputCheckbox = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "value-change");
-        this.inputValid = index.createEvent(this, "input-valid");
+        this.valueChange = index.createEvent(this, "value-change", 7);
+        this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         this.mode = 'custom';
@@ -1981,7 +2038,7 @@ const MgInputCheckbox = class {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (index.h("mg-input", { key: '172d56836709aa7acb69bb1b00d71366fad1858a', 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: 'a6afc33b5c437000945fca2d825526123a7c4fdf', label: this.label, identifier: this.identifier, class: this.classCollection.join(), 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 {
@@ -2002,7 +2059,7 @@ MgInputCheckbox.style = mgInputCheckboxCss;
 const MgInputCheckboxPaginated = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.massAction = index.createEvent(this, "mass-action");
+        this.massAction = index.createEvent(this, "mass-action", 7);
         /*************
          * Constantes *
          *************/
@@ -2122,8 +2179,8 @@ const mgInputDateCss = ".mg-c-input__readonly-value{min-height:var(--mg-b-font-s
 const MgInputDate = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "value-change");
-        this.inputValid = index.createEvent(this, "input-valid");
+        this.valueChange = index.createEvent(this, "value-change", 7);
+        this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         /**
@@ -2480,7 +2537,7 @@ const MgInputDate = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '9afadd8001b3db8101678116996a28c88fc047be', 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 === null ? '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$2.localeDate(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: '1c9a935b76acf5c3ca6a2f53904f31508d265b49', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === null ? '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$2.localeDate(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;
             } }))));
@@ -2508,8 +2565,8 @@ const mgInputNumericCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);b
 const MgInputNumeric = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "value-change");
-        this.inputValid = index.createEvent(this, "input-valid");
+        this.valueChange = index.createEvent(this, "value-change", 7);
+        this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         /**
@@ -2958,7 +3015,7 @@ const MgInputNumeric = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '4b882a2d468ea59b1ece7cb59cdb8372ce4d2299', 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.formatHelpText(this.helpText), errorMessage: this.errorMessage }, this.readonly
+        return (index.h("mg-input", { key: '61da1f6ccfcb9932895dc79e7e189fca7083a4ee', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.formatHelpText(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, autocomplete: "off", "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
@@ -2990,8 +3047,8 @@ const mgInputPasswordCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);
 const MgInputPassword = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "value-change");
-        this.inputValid = index.createEvent(this, "input-valid");
+        this.valueChange = index.createEvent(this, "value-change", 7);
+        this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         /**
@@ -3225,7 +3282,7 @@ const MgInputPassword = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '00d40d4c4c8b9ca57e9c9f34575e69ec535aea22', 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: 'b10f4e1d629bc56d0505739d19047a2b73c6baaa', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === 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' }))))));
@@ -3252,8 +3309,8 @@ const isOption$3 = (option) => typeof option === 'object' && typeof option.title
 const MgInputRadio = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "value-change");
-        this.inputValid = index.createEvent(this, "input-valid");
+        this.valueChange = index.createEvent(this, "value-change", 7);
+        this.inputValid = index.createEvent(this, "input-valid", 7);
         /************
          * Internal *
          ************/
@@ -3516,7 +3573,7 @@ const MgInputRadio = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '9460e2802454e18c1f79ebc63bef0b5e4712acf8', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: [], labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && 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: '704aded91c21206a8b8ccced19a1a9c1ad55745e', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && !this.value ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.readonlyValue && 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))))))));
@@ -3580,8 +3637,8 @@ const groupOptions = (acc, { group, title, value, disabled }) => {
 const MgInputSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "value-change");
-        this.inputValid = index.createEvent(this, "input-valid");
+        this.valueChange = index.createEvent(this, "value-change", 7);
+        this.inputValid = index.createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
         /**
@@ -3625,6 +3682,22 @@ const MgInputSelect = class {
          * Component classes
          */
         this.classCollection = new index$1.ClassList(['mg-c-input--select']);
+        /**
+         * Method to get readonly value from value
+         * @returns readonly value
+         */
+        this.getReadonlyValue = () => {
+            var _a;
+            if (index$1.allItemsAreString(this.items) && typeof this.value === 'string') {
+                return this.items.find(item => item === this.value);
+            }
+            else if (allItemsAreOptions(this.items)) {
+                return (_a = this.items.find(item => item.value === this.value)) === null || _a === void 0 ? void 0 : _a.title;
+            }
+            else {
+                return null;
+            }
+        };
         /**
          * Handle input event
          */
@@ -3698,16 +3771,6 @@ const MgInputSelect = class {
         this.renderOption = (option) => (index.h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     }
     validateValue(newValue) {
-        var _a, _b;
-        if (index$1.allItemsAreString(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)) {
-            this.readonlyValue = (_b = this.items.find(item => item.value === newValue)) === null || _b === void 0 ? void 0 : _b.title;
-        }
-        else {
-            this.readonlyValue = null;
-        }
         setTimeout(() => {
             this.checkValidity();
             if (this.hasDisplayedError) {
@@ -3889,7 +3952,8 @@ const MgInputSelect = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: 'c755e68979b8cb479f409c0ac99d4fc47d1e4c25', 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) => {
+        const readonlyValue = this.getReadonlyValue();
+        return (index.h("mg-input", { key: '2a0599578526b7c110b8f8e01dcb233ed2d523cf', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue === null ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (readonlyValue && index.h("b", { class: "mg-c-input__readonly-value" }, 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
@@ -3932,8 +3996,8 @@ const isDatalistOptions = (options) => index$1.allItemsAreString(options) || (Ar
 const MgInputText = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "value-change");
-        this.inputValid = index.createEvent(this, "input-valid");
+        this.valueChange = index.createEvent(this, "value-change", 7);
+        this.inputValid = index.createEvent(this, "input-valid", 7);
         /************
          * Internal *
          ************/
@@ -4279,7 +4343,7 @@ const MgInputText = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '76e332d40fea8e1897da15271989f29d710c6550', 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: 'e8249550f7077c38f87b768ef68837dec35cd08e', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly
             ? this.value && this.renderReadonly()
             : [
                 index.h("div", { key: "input", class: "mg-c-input__with-character-left", style: {
@@ -4313,8 +4377,8 @@ const mgInputTextareaCss = ".mg-c-input__box{height:var(--mg-b-size-min-height);
 const MgInputTextarea = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "value-change");
-        this.inputValid = index.createEvent(this, "input-valid");
+        this.valueChange = index.createEvent(this, "value-change", 7);
+        this.inputValid = index.createEvent(this, "input-valid", 7);
         /************
          * Internal *
          ************/
@@ -4600,7 +4664,7 @@ const MgInputTextarea = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("mg-input", { key: '7bcbb8d4ca3244f2278ebad0b85f83be0187a996', 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: 'b52470b9b12c35a62d656609ea345a0545d2429b', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && 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',
@@ -4687,8 +4751,8 @@ const isOption = (option) => typeof option === 'object' && typeof option.title =
 const MgInputToggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChange = index.createEvent(this, "value-change");
-        this.inputValid = index.createEvent(this, "input-valid");
+        this.valueChange = index.createEvent(this, "value-change", 7);
+        this.inputValid = index.createEvent(this, "input-valid", 7);
         // Classes
         this.classIsActive = 'mg-c-input--toggle-is-active';
         this.classOnOff = 'mg-c-input--toggle-on-off';
@@ -4933,7 +4997,7 @@ const MgInputToggle = class {
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (index.h("mg-input", { key: '2e92c411cfa6fdcbcc6ed0546eed6e804ed4d9cb', 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, ref: el => {
+        return (index.h("mg-input", { key: '3cfa56cd1d8fdaba4e505027db7fae0385bac941', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && 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, ref: el => {
                 if (el !== null)
                     this.button = el;
             } }, 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" }))))));
@@ -5300,8 +5364,8 @@ const mgMenuItemCss = ".mg-u-visually-hidden{position:absolute !important;overfl
 const MgMenuItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.itemLoaded = index.createEvent(this, "item-loaded");
-        this.itemUpdated = index.createEvent(this, "item-updated");
+        this.itemLoaded = index.createEvent(this, "item-loaded", 7);
+        this.itemUpdated = index.createEvent(this, "item-updated", 7);
         /************
          * Internal *
          ************/
@@ -5764,9 +5828,9 @@ const MgMessage = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: '9619c3fe51c76045c7c2ac7be24d71f317749f3d', class: this.classCollection.join() }, index.h("mg-card", { key: '264ece9455a04e709420042e4a5e3c972c1c6256' }, this.variantStyle === 'bar-left' && index.h("span", { key: 'd12be7accbf0311403664b5f33652eb79a3855b4', class: "mg-c-message__bar" }), index.h("span", { key: 'ed663ad3888290e2294daaa43b1a68b99842eb20', class: "mg-c-message__icon" }, index.h("mg-icon", { key: '02df83b0a8a298a20bc9db592535c6e7995a4ecf', icon: this.getIcon() })), index.h("div", { key: '25c971ba1b7a8db1f78534d445217c0e6f50412f', class: "mg-c-message__content" }, index.h("span", { key: 'a5284e22d723656dd8d24ebc13bce03533ccb5b0', class: "mg-c-message__content-slot" }, index.h("slot", { key: 'acedd0b59ac7c3a9b42749fdaf7dcbb5ce28d9ce' })), this.hasActions && [
+        return (index.h("div", { key: '9619c3fe51c76045c7c2ac7be24d71f317749f3d', class: this.classCollection.join() }, index.h("mg-card", { key: '270c8b9b0479a1762fb0b180b99bab8fcf92be40', shadow: true }, this.variantStyle === 'bar-left' && index.h("span", { key: '8d568740eb1a579cc8e3b447aa1df27691fd3473', class: "mg-c-message__bar" }), index.h("span", { key: '96bbd399ce78b312755f238d68f46c4c633b898a', class: "mg-c-message__icon" }, index.h("mg-icon", { key: 'ebaa2fd3d7d60ae8f9864afdb6fd0fa79e7b1d40', icon: this.getIcon() })), index.h("div", { key: '8ff7552abb158fa9787f8501b2068254455b8cbb', class: "mg-c-message__content" }, index.h("span", { key: '1af60ee247054d5ce5ae1d8bf0a33503cdebf857', class: "mg-c-message__content-slot" }, index.h("slot", { key: 'd35b2cca2ac8231e257972bb1251f318c10e6e2f' })), this.hasActions && [
             index.h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
-            index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '0f3aaf3952d94f3ddc12396a6c85eeae8e6a8ef3', name: "actions" })),
+            index.h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, index.h("slot", { key: '90a115e7e49ea5058da58d096184151f7aa7b7d8', name: "actions" })),
         ]))));
     }
     get element() { return index.getElement(this); }
@@ -5787,9 +5851,9 @@ const mgModalCss = "/*!\n * @prop --mg-c-modal-border-radius: Defines the border
 const MgModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.componentShow = index.createEvent(this, "component-show");
-        this.componentHide = index.createEvent(this, "component-hide");
-        this.componentClose = index.createEvent(this, "component-close");
+        this.componentShow = index.createEvent(this, "component-show", 7);
+        this.componentHide = index.createEvent(this, "component-hide", 7);
+        this.componentClose = index.createEvent(this, "component-close", 7);
         // IDs
         this.titleId = '';
         /**
@@ -5892,7 +5956,7 @@ const MgModal = class {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, index.h("mg-card", { key: '550675acefcd45e712d0416735edfe7ab6eb984b' }, index.h("div", { key: '1a59b6a7a1625a525cebc8677a18173d6b0056d4', class: "mg-c-modal__dialog" }, index.h("header", { key: '004e82cce949cc3ff0e169ca0d165b5f9100dbd0', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: '22d81e390737de328b91f376c63ac9c436d91e88', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: '72966c2c2baf30c3a64c6db16ccf51729ddcc48a', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { key: '717d8230a2ea28b8f33c3ea1ccc89b5086e752d3', icon: "cross" })))), index.h("h1", { key: 'c407ca5450274370080fa41655b609706ee619fc', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), index.h("article", { key: 'c5a7567b54f24ea68cf2974318f8b36bb6df6269', class: "mg-c-modal__content" }, index.h("slot", { key: 'deca806c3ea6f2edb4b6a2182e41ad4cb973e1df' })), this.hasActions && (index.h("footer", { key: 'f8ec65acea48b0bb1ab2b4872507dbbef9964f5e', class: "mg-c-modal__footer" }, index.h("slot", { key: 'bfd435583763a1582c51a3cdeca35ea5e236c5ad', name: "actions" })))))));
+            } }, index.h("mg-card", { key: 'd69679cb9118dfe4b141c1dcf6d1ef0fd53d9df9', shadow: true }, index.h("div", { key: '29e0a092a73d4e05c300c0840191823d3e3bbd30', class: "mg-c-modal__dialog" }, index.h("header", { key: 'c3a595adc778b67e5cafbbb964741ebc56c2dba5', class: "mg-c-modal__header" }, this.closeButton && (index.h("span", { key: 'f19447c5c29ae4fdaa46c2e35629622091b172d6', class: "mg-c-modal__close-button" }, index.h("mg-button", { key: 'af85956cc5e16e2c8c05156a4f54f63ad35b913a', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, index.h("mg-icon", { key: 'fd6aa0394f8b39bacd50e7b087f1b155c38e1bc9', icon: "cross" })))), index.h("h1", { key: '0e80bdf6182c01257f487741661754a1224b802d', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), index.h("article", { key: 'c23c02cc9046545b4b851ce640ed8409fa190511', class: "mg-c-modal__content" }, index.h("slot", { key: 'db7c708e38ff3e7de6e4a7d299cd7a3c1e9d1e00' })), this.hasActions && (index.h("footer", { key: '4ba012a916db38e219287a5ea9ca7b4644dd96d9', class: "mg-c-modal__footer" }, index.h("slot", { key: 'c541075b02466d95defae7831c3fc7e4b786d7fc', name: "actions" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -5936,7 +6000,7 @@ const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - st
 const MgPagination = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.currentPageChange = index.createEvent(this, "current-page-change");
+        this.currentPageChange = index.createEvent(this, "current-page-change", 7);
         /**
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
@@ -6066,13 +6130,13 @@ const expandToggleDisplays = ['text', 'icon'];
  */
 const titlePositions = ['left', 'right'];
 
-const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel. Default value: `color-mix(in srgb, var(--mg-b-color-info), white 97%)`.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-border:none;--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
+const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-border:none;--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
 
 const MgPanel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.titleChange = index.createEvent(this, "title-change");
-        this.expandedChange = index.createEvent(this, "expanded-change");
+        this.titleChange = index.createEvent(this, "title-change", 7);
+        this.expandedChange = index.createEvent(this, "expanded-change", 7);
         /**
          * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          * If not set, it will be created.
@@ -6098,6 +6162,10 @@ const MgPanel = class {
          * Disable possibility to toggle expand
          */
         this.expandToggleDisabled = false;
+        /**
+         * Add box-shadow style
+         */
+        this.shadow = false;
         /**
          * Component classes
          */
@@ -6257,7 +6325,7 @@ const MgPanel = class {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (index.h("section", { key: '6aae78aba1165a5e84ea58168b545bd804615dc6', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: '588fc4a2a0445bea2a60a05a5bfe58efbbf02670' }, index.h("header", { key: '42e75406706c913e5c33a192c49659d927fabea7', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: '18f81805215284977a31e7320a260110b51b2e5a', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: '789b4432247cc58a11df789cdf748f9e0e306565' })))));
+        return (index.h("section", { key: '36381ea8a92fcfc7e54c0db11edc49e033a3914f', class: this.classCollection.join(), id: this.identifier }, index.h("mg-card", { key: 'b55169124454725f2cfc8b769f1b9c2882573112', shadow: this.shadow }, index.h("header", { key: '2ef537a657cb5f40fb0249a24b822a892a64aa7c', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), index.h("article", { key: '16705d61598a15b02f8adfd4ae42fe69c6fd9833', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, index.h("slot", { key: '26633ede9d285e037e9aafa030d8008eeee430e8' })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8066,8 +8134,8 @@ const mgPopoverCss = "/*!\n * @prop --mg-c-popover-color-background: Defines the
 const MgPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.displayChange = index.createEvent(this, "display-change");
-        this.componentClose = index.createEvent(this, "component-close");
+        this.displayChange = index.createEvent(this, "display-change", 7);
+        this.componentClose = index.createEvent(this, "component-close", 7);
         /**
          * Sets an `id` attribute.
          * Needed by the input for accessibility `aria-decribedby`.
@@ -8319,7 +8387,7 @@ const mgPopoverContentCss = ":host{position:relative;z-index:2000;display:none;p
 const MgPopoverContent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.hideContent = index.createEvent(this, "hide-content");
+        this.hideContent = index.createEvent(this, "hide-content", 7);
         /**
          * Define if popover has a cross button
          */
@@ -8360,7 +8428,7 @@ const MgPopoverContent = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: 'c87fe52d52b80954170963fd1378b3a05313f9c6' }, index.h("mg-card", { key: '814aeebb329016ba553c941d85397872b6a729aa', class: this.classCollection.join() }, this.closeButton && (index.h("mg-button", { key: '5b2598be40fe42fd135b2969193d44265ebe7970', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { key: 'e96557893047b803c212d89d859f312a9e467ba1', icon: "cross" }))), index.h("div", { key: 'ba71f91050872644e778e6f4a1659e2b446111ed', class: "mg-c-popover-content__title" }, index.h("slot", { key: '2200f5ee095635af0ac283a645a2f65e5139a7e0', name: "title" })), index.h("slot", { key: 'cc80f376937761c563fc73055aa4288e9b54eef4', name: "content" })), index.h("slot", { key: 'b4cbdb1e109eaade8053d34cf6840c7474675ba5', name: "arrow" })));
+        return (index.h(index.Host, { key: 'c87fe52d52b80954170963fd1378b3a05313f9c6' }, index.h("mg-card", { key: 'a38755a5a7055d4bd4166531326b1be245d2906f', class: this.classCollection.join(), shadow: true }, this.closeButton && (index.h("mg-button", { key: '823e99beb15aa19f6f2f7cee2c5e1088cc116425', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, index.h("mg-icon", { key: '70daf81e59533585b6a051a6d97539a75833432e', icon: "cross" }))), index.h("div", { key: 'cccf70c8fba6906e6724629642383fad0c98656e', class: "mg-c-popover-content__title" }, index.h("slot", { key: 'b05acb47b32d27d1629d39451e4a786d2f404406', name: "title" })), index.h("slot", { key: '40de167b1fb77c7d8fc557f60cf176c0991e991d', name: "content" })), index.h("slot", { key: 'c6c1305d5ff51d2af0d56b1199731cd41645c99d', name: "arrow" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -8371,7 +8439,7 @@ const mgSkipLinksCss = ".mg-c-skip-links{position:absolute;display:flex;min-heig
 const MgSkipLinks = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.goToAnchor = index.createEvent(this, "go-to-anchor");
+        this.goToAnchor = index.createEvent(this, "go-to-anchor", 7);
         /***********
          * Methods *
          **********/
@@ -8380,8 +8448,9 @@ const MgSkipLinks = class {
          * @param event - mouse event
          */
         this.handleLinkCLick = (event) => {
-            event.currentTarget.blur();
-            this.goToAnchor.emit(event.currentTarget.getAttribute('href'));
+            const element = event.currentTarget;
+            element.blur();
+            this.goToAnchor.emit(element.getAttribute('href'));
         };
     }
     validateLinks(links) {
@@ -8404,7 +8473,7 @@ const MgSkipLinks = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("nav", { key: '334bfc3fdd2749ad172b03168f2d00d6c5d26a2f', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: 'dc9e2202c955f0ff582ae3fe9cd0b48542eb3c10', 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: '9df42d332b207abf989ef73f3c83ebbcfcf222a6', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, index.h("ul", { key: '0185490dbd3dfb08b534a898fe779850ce96c427', 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 {
@@ -8626,7 +8695,7 @@ const MgTable = class {
             });
         }
         // Add alignment to columns
-        this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];
+        this.element.shadowRoot.adoptedStyleSheets.push(this.alignmentStylesheet);
         // Create div wrapper for responsive behavior
         const divWrapper = document.createElement('div');
         divWrapper.setAttribute('class', this.componentWrapperClass);
@@ -8716,7 +8785,7 @@ const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'stri
 const MgTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.activeTabChange = index.createEvent(this, "active-tab-change");
+        this.activeTabChange = index.createEvent(this, "active-tab-change", 7);
         /************
          * Internal *
          ************/
@@ -8938,7 +9007,7 @@ const MgTabs = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: '0e61cfdaa48e7d24adc1d427bf0b202c67948530', class: this.classCollection.join() }, index.h("header", { key: 'd43836e3daef98d1dad558ab12dd1f4310c7cfcd', 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: '06dd97d9d4e77f606dee3c4a8960b51265345666', class: this.classCollection.join() }, index.h("header", { key: 'ea3771bdfe8576bb8b443823a2c338a51ed3ba69', 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),
@@ -9493,6 +9562,3 @@ exports.mg_tabs = MgTabs;
 exports.mg_tag = MgTag;
 exports.mg_tooltip = MgTooltip;
 exports.mg_tooltip_content = MgTooltipContent;
-//# sourceMappingURL=mg-action-more.mg-badge.mg-button.mg-card.mg-character-left.mg-details.mg-divider.mg-form.mg-icon.mg-illustrated-message.mg-input.mg-input-checkbox.mg-input-checkbox-paginated.mg-input-date.mg-input-numeric.mg-input-password.mg-input-radio.mg-input-select.mg-input-text.mg-input-textarea.mg-input-title.mg-input-toggle.mg-item-more.mg-menu.mg-menu-item.mg-message.mg-modal.mg-pagination.mg-panel.mg-popover.mg-popover-content.mg-skip-links.mg-table.mg-tabs.mg-tag.mg-tooltip.mg-tooltip-content.entry.cjs.js.map
-
-//# sourceMappingURL=mg-action-more_37.cjs.entry.js.map