@mgdis/mg-components 6.14.0 → 6.15.0

package/dist/components/mg-input2.js

@@ -1,5 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as isValidString, t as toString, a as isValideID } from './index2.js';
+import { i as isValidString, t as toString, a as isValideID, h as isObject } from './index2.js';
+import { i as initLocales } from './index3.js';
+import { d as defineCustomElement$5 } from './mg-details2.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip2.js';
@@ -17,9 +19,16 @@ const classFieldset = 'mg-c-input--fieldset';
 const classDisabled = 'mg-c-input--disabled';
 const classReadonly = 'mg-c-input--readonly';
 const classVerticalList = 'mg-c-input--vertical-list';
+/**
+ * Define cutom errors
+ */
+const CustomError = {
+    NoValue: 'noValue',
+};
 
-const mgInputCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
+const mgInputCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}/*!\n * @prop --mg-c-input-border-width: Defines the width of the input border. Default value is `--mg-b-size-border`.\n * @prop --mg-c-input-border-radius: Defines the border radius of the input. Default value is `--mg-b-size-radius`.\n * @prop --mg-c-input-color-border: Defines the color of the input border. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-placeholder-color-text: Defines the color of the placeholder text. Default value is `rgb(181, 194, 201)`.\n * @prop --mg-c-input-color-box-shadow-focus: Defines the shadow color of the input when focused. Default value is `rgba(0, 221, 255, 0.5)`.\n * @prop --mg-c-input-error-color-background: Defines the background color of the input error message. Default value is `color-mix(in srgb, var(--mg-b-color-danger), white 95%)`.\n * @prop --mg-c-input-toggle-border-radius-ratio: Defines the border radius ratio of the input toggle. Default value is `2`.\n * @prop --mg-c-input-check-size: Defines the size of the input check. Default value is `--mg-b-size-16`.\n */:host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;min-height:var(--mg-b-size-min-height);align-items:flex-start}.mg-c-input__input-container{width:100%;min-height:var(--mg-b-size-min-height)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-b-size-16);height:var(--mg-b-size-16);margin-left:var(--mg-b-size-8)}@media print{.mg-c-input__input-container mg-tooltip{display:none}}.mg-c-input__input{display:flex;min-height:var(--mg-b-size-min-height);align-items:center;justify-content:start}.mg-c-input__input mg-tooltip{align-self:baseline;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-size-16))/2)}.mg-c-input__input ::slotted(.mg-c-input__button-toggle:disabled){opacity:var(--mg-b-opacity-element-disabled)}.mg-c-input__title{display:flex;width:var(--mg-c-input-title-width, auto);flex-shrink:0;align-items:baseline;justify-content:flex-end;margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2);margin-right:var(--mg-c-input-title-horizontal-space, var(--mg-b-size-8));text-align:right}.mg-c-input__title slot[name=label]+mg-tooltip{margin-left:var(--mg-b-size-4)}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__error{--mg-c-details-spacing:0;display:inline-block;padding:var(--mg-b-size-4) var(--mg-b-size-8);border-radius:var(--mg-b-size-radius);background:var(--mg-c-input-error-color-background);color:var(--mg-b-color-danger)}.mg-c-input__error ::slotted(*),.mg-c-input__help-text ::slotted(*){font-size:var(--mg-b-font-size-small);text-align:start}:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__error,:host(:not(.mg-c-input--textarea)) .mg-c-input__input+.mg-c-input__help-text{margin-top:var(--mg-b-size-4)}:host(.mg-c-input.mg-c-input--readonly) .mg-c-input__input mg-tooltip{margin-top:calc((var(--mg-b-size-min-height) - var(--mg-b-font-size)*var(--mg-b-line-height))/2)}:host(.mg-c-input){display:flex;margin-bottom:var(--mg-c-input-margin-bottom, 0)}:host(.mg-c-input.mg-c-input--checkbox) .mg-c-input__input,:host(.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset;align-items:flex-start}:host(.mg-c-input.mg-c-input--checkbox,.mg-c-input.mg-c-input--radio) .mg-c-input__input{min-height:unset}:host(.mg-c-input.mg-c-input--fieldset:not(.mg-c-input--checkbox-multi,.mg-c-input--readonly)) .mg-c-input__input-container mg-tooltip{margin-left:var(--mg-b-size-32)}:host(.mg-c-input.mg-c-input--label-on-top){flex-direction:column}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input.mg-c-input--label-on-top) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}@media screen and (max-width: 767px){:host(.mg-c-input){flex-direction:column}:host(.mg-c-input) .mg-c-input__title{width:100%;flex:0;justify-content:flex-start;margin-top:0;margin-right:0;margin-bottom:var(--mg-b-size-4);text-align:left}:host(.mg-c-input) .mg-c-input__title ::slotted(mg-input-title){flex-shrink:1}}";
 
+const isValidErrorMessageType = (msg) => isObject(msg) && ['summary', 'details'].every(key => typeof msg[key] === 'string');
 const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLElement {
     constructor() {
         super();
@@ -27,6 +36,8 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         this.__attachShadow();
         this.slotLabel = 'label';
         this.slotError = 'error';
+        this.slotSummary = 'summary';
+        this.slotDetails = 'details';
         this.slotHelpText = 'help-text';
         // style
         this.classInput = 'mg-c-input';
@@ -68,6 +79,44 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
          * Element is disabled
          */
         this.isVerticalList = false;
+        /**
+         * Render error message details element
+         */
+        this.renderErrorDetailsMessage = (message) => {
+            var _a, _b;
+            // remove error slot if it is NOT a MG-DETAIL
+            if (((_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.nodeName) !== 'MG-DETAILS') {
+                (_b = this.errorMessageSlotElement) === null || _b === void 0 ? void 0 : _b.remove();
+            }
+            // create OR update error summary
+            let summarySlotElement = this.element.querySelector(`[slot=${this.slotError}] [slot=${this.slotSummary}]`);
+            if (summarySlotElement === null) {
+                summarySlotElement = document.createElement('span');
+                summarySlotElement.setAttribute('slot', this.slotSummary);
+            }
+            summarySlotElement.innerHTML = message.summary;
+            // create OR update error details
+            let detailsSlotElement = this.element.querySelector(`[slot=${this.slotError}] [slot=${this.slotDetails}]`);
+            if (detailsSlotElement === null) {
+                detailsSlotElement = document.createElement('p');
+                detailsSlotElement.setAttribute('slot', this.slotDetails);
+                detailsSlotElement.classList.add('mg-c-input__error-details');
+            }
+            detailsSlotElement.innerHTML = message.details;
+            // create error mg-details
+            let mgDetails = this.element.querySelector(`mg-details[slot=${this.slotError}]`);
+            if (mgDetails === null) {
+                mgDetails = document.createElement('mg-details');
+                mgDetails.classList.add('mg-c-input__error');
+                mgDetails.toggleClosed = this.messages.details.toggleClosed;
+                mgDetails.toggleOpened = this.messages.details.toggleOpened;
+                mgDetails.hideSummary = true;
+                mgDetails.appendChild(summarySlotElement);
+                mgDetails.appendChild(detailsSlotElement);
+                this.element.appendChild(mgDetails);
+            }
+            this.errorMessageSlotElement = mgDetails;
+        };
         /**
          * Get tooltip node
          * @returns mg-tooltip
@@ -105,16 +154,14 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         }
     }
     watchErrorMessage(newValue) {
-        var _a;
-        if (newValue !== undefined) {
+        if (isValidString(newValue) || isValidErrorMessageType(newValue)) {
             this.element.classList.add(this.classHasError);
-            this.renderErrorMessage();
         }
         else {
             this.element.classList.remove(this.classHasError);
-            (_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
-            this.errorMessageSlotElement = undefined;
         }
+        // update error message slot
+        this.renderErrorMessageSlot();
     }
     watchHelpText(newValue) {
         var _a;
@@ -143,14 +190,12 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         // Help text
         if (this.helpText !== undefined) {
             this.renderHelpText();
-            if (!ariaDescribedbyIDs.has(this.helpTextId))
-                ariaDescribedbyIDs.add(this.helpTextId);
+            ariaDescribedbyIDs.add(this.helpTextId);
         }
         // Error Message
         if (this.errorMessage !== undefined) {
-            this.renderErrorMessage();
-            if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
-                ariaDescribedbyIDs.add(this.helpTextErrorId);
+            this.renderErrorMessageSlot();
+            ariaDescribedbyIDs.add(this.helpTextErrorId);
         }
         this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
             if (ariaDescribedbyIDs.size > 0) {
@@ -216,17 +261,41 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         this.element.appendChild(labelSlotElement);
     }
     /**
-     * Render error message
+     * Render error message element
      */
-    renderErrorMessage() {
-        this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
-        if (this.errorMessageSlotElement === null) {
+    renderErrorStringMessage(message) {
+        var _a;
+        // remove error slot if it is a MG-DETAIL
+        if (((_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.nodeName) === 'MG-DETAILS') {
+            this.errorMessageSlotElement.remove();
+        }
+        // create element if it does NOT exist
+        else if (this.errorMessageSlotElement === null) {
             this.errorMessageSlotElement = document.createElement('div');
-            this.errorMessageSlotElement.setAttribute('slot', this.slotError);
             this.element.appendChild(this.errorMessageSlotElement);
         }
-        this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
-        this.errorMessageSlotElement.innerHTML = this.errorMessage;
+        this.errorMessageSlotElement.innerHTML = message;
+    }
+    /**
+     * Render error message slot element
+     */
+    renderErrorMessageSlot() {
+        var _a;
+        this.errorMessageSlotElement = this.element.querySelector(`[slot=${this.slotError}]`);
+        if (this.errorMessage !== undefined) {
+            if (typeof this.errorMessage === 'string') {
+                this.renderErrorStringMessage(this.errorMessage);
+            }
+            else {
+                this.renderErrorDetailsMessage(this.errorMessage);
+            }
+            this.errorMessageSlotElement.setAttribute('slot', this.slotError);
+            this.errorMessageSlotElement.setAttribute('id', this.helpTextErrorId);
+        }
+        else {
+            (_a = this.errorMessageSlotElement) === null || _a === void 0 ? void 0 : _a.remove();
+            this.errorMessageSlotElement = undefined;
+        }
     }
     /**
      * Render help text message
@@ -248,6 +317,9 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
      * Check if component props are well configured on init
      */
     componentWillLoad() {
+        // Get locales
+        this.messages = initLocales(this.element).messages;
+        // Validate
         this.watchIdentifier(this.identifier);
         this.watchLabel();
         this.watchClass();
@@ -272,7 +344,7 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: '7c4c22aaa8f8d250eafa9159a103a11e637b0cca', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '2215e7b2d96e08507579a39d8e05b3e8a3d901fb', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'a4dbf4e36dd3ae5437d6dcb05d807f4faa0924b7', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '8e382a4857f469a9d6f77cad613183798df4d1e1', class: "mg-c-input__input-container" }, h("div", { key: 'f9897f90d44aab19614d4d40d77a8eb270c92847', class: "mg-c-input__input" }, h("slot", { key: 'c8d809d4ff0d0e660849825f016f9267da3a2d7e' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'cebd6c083d088aebcdae6f032c6cdcf2387c3e27', class: "mg-c-input__help-text" }, h("slot", { key: '923fcc78b309d197e32522052b297ef0f58b1495', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: 'e706bff54ce21191a8c0940c60f6e99a91cfb9ec', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '6524debd3640df7b5e73ef4aa4415569eef1ecd8', name: this.slotError }))))));
+        return (h(Host, { key: '0641f834a725708ce254e82a86c3a75f1c183c0a', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '7d96f125694996407b8cecd9491366c39fd0d05f', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: '43720fcecc55de1cae61607b2ae2c3b224e18dbd', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '1d9c6fc50758fd2b87d9a15b9983f6e944a9851e', class: "mg-c-input__input-container" }, h("div", { key: '983153a1e0d5777d11cc61af47a4231f093d7e9e', class: "mg-c-input__input" }, h("slot", { key: 'e3ae53d7484b193538c7c5ed68d02ddf3428eff4' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: '2981238a76e52f4a9c5da6465934bb4edd653e96', class: "mg-c-input__help-text" }, h("slot", { key: 'feee3da8096260e11419b82cb2d281c8d73541d1', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '1d5a709cfe3c9a1f7da68a260dd480f189ee5301', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '4f9f9545ffbdc7c53b77c5153daaf9b15b360fd7', name: this.slotError }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -290,7 +362,7 @@ const MgInput = /*@__PURE__*/ proxyCustomElement(class MgInput extends HTMLEleme
         "isFieldset": ["watchLabel"]
     }; }
     static get style() { return mgInputCss; }
-}, [1, "mg-input", {
+}, [257, "mg-input", {
         "identifier": [1],
         "label": [1],
         "labelOnTop": [4, "label-on-top"],
@@ -323,13 +395,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-input", "mg-icon", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-input", "mg-details", "mg-icon", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-input":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, MgInput);
             }
             break;
+        case "mg-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
         case "mg-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
@@ -354,4 +431,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { MgInput as M, classDisabled as a, classFieldset as b, classReadonly as c, defineCustomElement as d, classVerticalList as e, widths as w };
+export { CustomError as C, MgInput as M, classDisabled as a, classFieldset as b, classReadonly as c, defineCustomElement as d, classVerticalList as e, widths as w };

package/dist/components/mg-item-more2.js

@@ -262,7 +262,7 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class MgMenu extends HTMLElement
         "size": ["validateSize"]
     }; }
     static get style() { return mgMenuCss; }
-}, [1, "mg-menu", {
+}, [257, "mg-menu", {
         "label": [1],
         "direction": [513],
         "itemmore": [16],
@@ -424,7 +424,7 @@ const MgItemMore = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTM
         "size": ["validateSize"]
     }; }
     static get style() { return mgItemMoreCss; }
-}, [1, "mg-item-more", {
+}, [257, "mg-item-more", {
         "icon": [16],
         "slotlabel": [16],
         "size": [1],

package/dist/components/mg-loader2.js

@@ -36,14 +36,14 @@ const MgLoader = /*@__PURE__*/ proxyCustomElement(class MgLoader extends HTMLEle
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'ad7aa5e4fa0704cf2fa174ae1ed960f72deb79e3', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '47e6df1e459a74851bf370e460438b7bdc2ed3d0', icon: "loader", spin: true }), h("span", { key: '44d36e8492401cacb911f21fc707c1de03ae7a5d', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
+        return (h("div", { key: 'b74028455b7003824fa5618b1751d05a91ab7071', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '204acdb8f881b348148020214c05269878852c4f', icon: "loader", spin: true }), h("span", { key: '40f1792354df01ec9af61ab128575ea166f34cb5', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
     }
     get element() { return this; }
     static get watchers() { return {
         "message": ["watchMessage"]
     }; }
     static get style() { return mgLoaderCss; }
-}, [1, "mg-loader", {
+}, [257, "mg-loader", {
         "message": [1],
         "messageHide": [4, "message-hide"]
     }, undefined, {

package/dist/components/mg-menu-item2.js

@@ -412,7 +412,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class MgMenuItem extends HTM
         "data-has-focus": ["watchDataHasFocus"]
     }; }
     static get style() { return mgMenuItemCss; }
-}, [1, "mg-menu-item", {
+}, [257, "mg-menu-item", {
         "identifier": [513],
         "href": [1],
         "target": [1],

package/dist/components/mg-message2.js

@@ -96,9 +96,9 @@ const MgMessage = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTMLE
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '9619c3fe51c76045c7c2ac7be24d71f317749f3d', class: this.classCollection.join() }, h("mg-card", { key: '270c8b9b0479a1762fb0b180b99bab8fcf92be40', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: '8d568740eb1a579cc8e3b447aa1df27691fd3473', class: "mg-c-message__bar" }), h("span", { key: '96bbd399ce78b312755f238d68f46c4c633b898a', class: "mg-c-message__icon" }, h("mg-icon", { key: 'ebaa2fd3d7d60ae8f9864afdb6fd0fa79e7b1d40', icon: this.getIcon() })), h("div", { key: '8ff7552abb158fa9787f8501b2068254455b8cbb', class: "mg-c-message__content" }, h("span", { key: '1af60ee247054d5ce5ae1d8bf0a33503cdebf857', class: "mg-c-message__content-slot" }, h("slot", { key: 'd35b2cca2ac8231e257972bb1251f318c10e6e2f' })), this.hasActions && [
+        return (h("div", { key: 'a113514956d6a3ef9fada1a20baa7b00843e5b96', class: this.classCollection.join() }, h("mg-card", { key: 'db894eb3d0f3cb9b18681e0925e0fd1bdcd208e2', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: '37eb3a027be82ab006fe30dd07bce88f526fc263', class: "mg-c-message__bar" }), h("span", { key: '76a3b6bf2d27ec85b3e9b7235cf5bba933ac02e2', class: "mg-c-message__icon" }, h("mg-icon", { key: '2988764c8a3d272dab5e749a8dc95643b9ead573', icon: this.getIcon() })), h("div", { key: '64e57835d18f433965eda9260efeb74055489c6e', class: "mg-c-message__content" }, h("span", { key: 'a2032d4fe0eec962cd9bb1e12119709bcb6ff53c', class: "mg-c-message__content-slot" }, h("slot", { key: 'dfe5f7315e8f8d66ccb195d8e7f7862eb803e6d9' })), this.hasActions && [
             h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
-            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '90a115e7e49ea5058da58d096184151f7aa7b7d8', name: "actions" })),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: 'db1782730e0bffb168b8ec23410e6836f572715c', name: "actions" })),
         ]))));
     }
     get element() { return this; }
@@ -107,7 +107,7 @@ const MgMessage = /*@__PURE__*/ proxyCustomElement(class MgMessage extends HTMLE
         "variantStyle": ["watchVariantStyle"]
     }; }
     static get style() { return mgMessageCss; }
-}, [1, "mg-message", {
+}, [257, "mg-message", {
         "variant": [1],
         "variantStyle": [1, "variant-style"],
         "classCollection": [32],

package/dist/components/mg-modal.js

@@ -118,11 +118,11 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
      * @returns HTML Element
      */
     render() {
-        return (h("dialog", { key: 'e104352d5cdb04886d4db6bac62ecb772c6df004', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: '783b289712deb419fa7ac4c9f371add80054af6b', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, h("mg-card", { key: 'd69679cb9118dfe4b141c1dcf6d1ef0fd53d9df9', shadow: true }, h("div", { key: '29e0a092a73d4e05c300c0840191823d3e3bbd30', class: "mg-c-modal__dialog" }, h("header", { key: 'c3a595adc778b67e5cafbbb964741ebc56c2dba5', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'f19447c5c29ae4fdaa46c2e35629622091b172d6', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'af85956cc5e16e2c8c05156a4f54f63ad35b913a', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: 'fd6aa0394f8b39bacd50e7b087f1b155c38e1bc9', icon: "cross" })))), h("h1", { key: '0e80bdf6182c01257f487741661754a1224b802d', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'c23c02cc9046545b4b851ce640ed8409fa190511', class: "mg-c-modal__content" }, h("slot", { key: 'db7c708e38ff3e7de6e4a7d299cd7a3c1e9d1e00' })), this.hasActions && (h("footer", { key: '4ba012a916db38e219287a5ea9ca7b4644dd96d9', class: "mg-c-modal__footer" }, h("slot", { key: 'c541075b02466d95defae7831c3fc7e4b786d7fc', name: "actions" })))))));
+            } }, h("mg-card", { key: 'd6006f296ab50a192229e09e6e01a3313ab69cce', shadow: true }, h("div", { key: '76bc44557dc4b4bcce40b54d5d4bfa381f7906af', class: "mg-c-modal__dialog" }, h("header", { key: '08ba473f429ae57434dd321575f9eaf97e41f7a9', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'd96baeaaefdb5541da7ee7bc58c3901b3d64ed33', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'f43486e05e337fad6e54b8a0b07b9d13aad50acc', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '3278e25d15abdefb56cc3c67e7a8ec500d90547b', icon: "cross" })))), h("h1", { key: 'd9246055be4cb938f4aff20fcdc53b3a7c119d20', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'bce8cd10a2fffdf726df6d07b9f81da1fd693038', class: "mg-c-modal__content" }, h("slot", { key: '9db561d8462fe9a3afc6be543f2ef3b189f3efd4' })), this.hasActions && (h("footer", { key: '226e235454dce60eb8b5652add3b23e1cf480fc7', class: "mg-c-modal__footer" }, h("slot", { key: '8352666de0db98e96c52a419c939574285972571', name: "actions" })))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -132,7 +132,7 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLEle
         "open": ["watchOpen"]
     }; }
     static get style() { return mgModalCss; }
-}, [1, "mg-modal", {
+}, [257, "mg-modal", {
         "identifier": [1],
         "dialogRole": [1, "dialog-role"],
         "modalTitle": [1, "modal-title"],

package/dist/components/mg-pagination.js

@@ -1,4 +1,236 @@
-import { M as MgPagination$1, d as defineCustomElement$1 } from './mg-pagination2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as createID, a as isValideID, t as toString, i as isValidString } from './index2.js';
+import { i as initLocales } from './index3.js';
+import { d as defineCustomElement$9 } from './mg-button2.js';
+import { d as defineCustomElement$8 } from './mg-details2.js';
+import { d as defineCustomElement$7 } from './mg-icon2.js';
+import { d as defineCustomElement$6 } from './mg-input2.js';
+import { d as defineCustomElement$5 } from './mg-input-select2.js';
+import { d as defineCustomElement$4 } from './mg-input-title2.js';
+import { d as defineCustomElement$3 } from './mg-tooltip2.js';
+import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
+
+const NavigationAction = {
+    NEXT: 'next',
+    PREVIOUS: 'previous',
+};
+
+const mgPaginationCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}";
+
+/**
+ * Range generator
+ *
+ * ```
+ * start by get the range length, add "+ 1" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3
+ * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]
+ * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values
+ * then with Array.from(Array(...)) we get the complete array with "index" values instead of "empty" values
+ * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]
+ * finaly we map values from "start" range and apply the "step" coefficiant,
+ * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]
+ * ```
+ *
+ * range(1, 1) = [1]
+ * range(1, 5) = [1, 2, 3, 4, 5]
+ * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]
+ * @param start - start range
+ * @param end - start end
+ * @param step - step size
+ * @returns range numbers
+ */
+const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
+const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class MgPagination extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.currentPageChange = 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.
+         */
+        this.identifier = createID('mg-pagination');
+        /**
+         * Hide navigation label
+         */
+        this.hideNavigationLabels = false;
+        /**
+         * Hide select input
+         */
+        this.hidePageCount = false;
+        /**
+         * Component total pages
+         */
+        this.totalPages = 1;
+        /**
+         * Component current page
+         */
+        this.currentPage = 1;
+        /**
+         * Change current page from target
+         * @param target - target page
+         */
+        this.goToPage = (target) => {
+            this.currentPage = target;
+        };
+        /************
+         * Handlers *
+         ************/
+        /**
+         * select handler
+         * @param event - value change event
+         */
+        this.handleSelect = (event) => {
+            const to = Number(event.target.value);
+            this.goToPage(to > 0 ? to : 1);
+        };
+        /**
+         * Go to 'previous/next' page button handler
+         * @param action - navigation action
+         * @param disabled - button disable state
+         */
+        this.handleGoToPage = (action, disabled) => {
+            !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+        };
+    }
+    watchIdentifier(newValue) {
+        if (!isValideID(newValue)) {
+            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
+        }
+    }
+    validateTotalPages(newValue) {
+        if (newValue < 1) {
+            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${toString(newValue)}.`);
+        }
+    }
+    validateCurrentPage(newValue) {
+        if (newValue < 1) {
+            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${toString(newValue)}.`);
+        }
+        else if (newValue > this.totalPages) {
+            throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
+        }
+        this.currentPageChange.emit(newValue);
+    }
+    watchPaginationMessages(newValue) {
+        if (Boolean(newValue) && (typeof newValue !== 'object' || !['next', 'previous', 'nextLabel', 'previousLabel'].every(key => isValidString(newValue[key])))) {
+            throw new Error('<mg-pagination> prop "messages" must be a valid "PaginationMessagesType".');
+        }
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if props are well configured on init
+     */
+    componentWillLoad() {
+        // Get locales
+        this.localesMessages = initLocales(this.element).messages;
+        // Validate
+        this.watchIdentifier(this.identifier);
+        this.validateTotalPages(this.totalPages);
+        this.validateCurrentPage(this.currentPage);
+        this.watchPaginationMessages(this.messages);
+        // Set default label
+        if (this.label === undefined || this.label === '') {
+            this.label = this.localesMessages.pagination.label;
+        }
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const navigationMessages = {
+            next: (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.next) !== null && _b !== void 0 ? _b : this.localesMessages.general.next,
+            previous: (_d = (_c = this.messages) === null || _c === void 0 ? void 0 : _c.previous) !== null && _d !== void 0 ? _d : this.localesMessages.general.previous,
+            nextLabel: (_f = (_e = this.messages) === null || _e === void 0 ? void 0 : _e.nextLabel) !== null && _f !== void 0 ? _f : this.localesMessages.pagination.nextLabel,
+            previousLabel: (_h = (_g = this.messages) === null || _g === void 0 ? void 0 : _g.previousLabel) !== null && _h !== void 0 ? _h : this.localesMessages.pagination.previousLabel,
+        };
+        const navigationActionButton = (disabled, action) => {
+            return (h("mg-button", { label: navigationMessages[`${action}Label`],
+                // eslint-disable-next-line react/jsx-no-bind
+                onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && navigationMessages[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
+        };
+        return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { class: "mg-c-pagination__page-count" }, h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.localesMessages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "mg-u-visually-hidden" }, this.localesMessages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, " ", this.totalPages > 1 ? this.localesMessages.pagination.pages : this.localesMessages.pagination.page)), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "identifier": ["watchIdentifier"],
+        "totalPages": ["validateTotalPages"],
+        "currentPage": ["validateCurrentPage"],
+        "messages": ["watchPaginationMessages"]
+    }; }
+    static get style() { return mgPaginationCss; }
+}, [257, "mg-pagination", {
+        "identifier": [1],
+        "label": [1025],
+        "hideNavigationLabels": [4, "hide-navigation-labels"],
+        "hidePageCount": [4, "hide-page-count"],
+        "totalPages": [2, "total-pages"],
+        "currentPage": [1538, "current-page"],
+        "messages": [16]
+    }, undefined, {
+        "identifier": ["watchIdentifier"],
+        "totalPages": ["validateTotalPages"],
+        "currentPage": ["validateCurrentPage"],
+        "messages": ["watchPaginationMessages"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-pagination", "mg-button", "mg-details", "mg-icon", "mg-input", "mg-input-select", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-pagination":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgPagination$1);
+            }
+            break;
+        case "mg-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "mg-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "mg-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "mg-input-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "mg-input-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "mg-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "mg-tooltip-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const MgPagination = MgPagination$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/mg-panel.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createID, C as ClassList, a as isValideID, t as toString, i as isValidString } from './index2.js';
 import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$a } from './mg-button2.js';
-import { d as defineCustomElement$9 } from './mg-card2.js';
-import { d as defineCustomElement$8 } from './mg-character-left2.js';
+import { d as defineCustomElement$b } from './mg-button2.js';
+import { d as defineCustomElement$a } from './mg-card2.js';
+import { d as defineCustomElement$9 } from './mg-character-left2.js';
+import { d as defineCustomElement$8 } from './mg-details2.js';
 import { d as defineCustomElement$7 } from './mg-icon2.js';
 import { d as defineCustomElement$6 } from './mg-input2.js';
 import { d as defineCustomElement$5 } from './mg-input-text2.js';
@@ -217,7 +218,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '36381ea8a92fcfc7e54c0db11edc49e033a3914f', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: 'b55169124454725f2cfc8b769f1b9c2882573112', shadow: this.shadow }, h("header", { key: '2ef537a657cb5f40fb0249a24b822a892a64aa7c', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '16705d61598a15b02f8adfd4ae42fe69c6fd9833', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '26633ede9d285e037e9aafa030d8008eeee430e8' })))));
+        return (h("section", { key: '6d9b0759cf8d6a8e94a1a6598f45fc00288ca22a', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '21b0d991daf053506097333df58d3b98ec2e5b0e', shadow: this.shadow }, h("header", { key: 'abd9dbeb13d85c9a66aac13e7b32e6a83e2ded57', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '23c74b70bd275fb18c853a1b7a0a4b4ff5a4c605', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '15561936437c960768c4954f45df4045ac3dee03' })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -230,7 +231,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         "expandToggleDisplay": ["validateExpandToggleDisplay"]
     }; }
     static get style() { return mgPanelCss; }
-}, [1, "mg-panel", {
+}, [257, "mg-panel", {
         "identifier": [1],
         "panelTitle": [1025, "panel-title"],
         "titlePattern": [1, "title-pattern"],
@@ -257,7 +258,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-panel", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input", "mg-input-text", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-panel", "mg-button", "mg-card", "mg-character-left", "mg-details", "mg-icon", "mg-input", "mg-input-text", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-panel":
             if (!customElements.get(tagName)) {
@@ -266,15 +267,20 @@ function defineCustomElement$1() {
             break;
         case "mg-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "mg-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "mg-character-left":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "mg-details":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }