@mgdis/mg-components 5.4.0 → 5.6.0

package/dist/components/mg-menu.js

@@ -1,7 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as Direction } from './mg-menu.conf.js';
+import { O as OverflowBehaviorElements, D as Direction, i as isMoreItem, s as sizes, a as OverflowBehavior, d as defineCustomElement$3 } from './mg-menu-item2.js';
+import { i as initLocales } from './index2.js';
+import { d as defineCustomElement$7 } from './mg-badge2.js';
+import { d as defineCustomElement$6 } from './mg-button2.js';
+import { d as defineCustomElement$5 } from './mg-card2.js';
+import { d as defineCustomElement$4 } from './mg-icon2.js';
+import { d as defineCustomElement$2 } from './mg-popover2.js';
 
-const mgMenuCss = ":host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){flex-direction:column;height:100%;overflow-y:auto}";
+const mgMenuCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex;background-color:hsl(var(--mg-menu-background-color-hsl, var(--color-light)))}:host([direction=vertical]){flex-direction:column;height:100%;overflow-y:auto}";
 
 const MgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -12,15 +18,12 @@ const MgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * Internal *
      ************/
     this.name = 'mg-menu';
+    this.menuItems = [];
     this.focusedMenuItem = 0;
-    /**
-     * Component display direction. Default: "horizontal"
-     */
-    this.direction = Direction.HORIZONTAL;
     /**
      * Close matching menu-item
      *
-     * @param {HTMLMgMenuItemElement} item menu-item to close
+     * @param {HTMLElement} item menu-item to close
      * @param {boolean} condition addionnal condition
      * @returns {void}
      */
@@ -29,18 +32,19 @@ const MgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         item.expanded = false;
       }
     };
+    /*************
+     * Methods *
+     *************/
     /**
      * Store menu-items on component init and add listeners
+     *
+     * @returns {void}
      */
-    this.initMenuItems = () => {
-      // store all menu-items
-      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
+    this.initMenuItemsListeners = () => {
       // add listeners on menu item and edit index
       this.menuItems.forEach((item, menuItemIndex) => {
         ['click', 'focus'].forEach(trigger => {
-          (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, (event) => {
-            event.preventDefault();
-            event.stopPropagation();
+          (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
             this.focusedMenuItem = menuItemIndex;
             // reset expanded on previous active menu item
             this.menuItems.forEach((item, index) => {
@@ -50,6 +54,47 @@ const MgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         });
       });
     };
+    /**
+     * render mg-menu-more
+     *
+     * @returns {HTMLElement} formated mg-menu-item element
+     */
+    this.renderMgMenuMore = () => {
+      const moreElement = this.element.shadowRoot.querySelector(`[${OverflowBehaviorElements.MORE}]`);
+      this.menuItems.forEach((child) => {
+        const proxy = child.cloneNode(true);
+        moreElement.querySelector('mg-menu').appendChild(proxy);
+      });
+      const allMenuItem = Array.from(this.element.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
+      Array.from(moreElement.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
+        // manage click on proxy to mirror it on initial element
+        proxy.addEventListener('click', () => {
+          (allMenuItem[index].shadowRoot.querySelector('a') || allMenuItem[index].shadowRoot.querySelector('button')).dispatchEvent(new MouseEvent('click', { bubbles: true }));
+        });
+        // manage status change miror in proxy
+        allMenuItem[index].addEventListener('status-change', (event) => {
+          proxy.setAttribute('status', event.detail);
+          this.overflowBehavior.updateActiveStatus();
+        });
+      });
+      this.element.appendChild(moreElement);
+      return this.element.querySelector(`[${OverflowBehaviorElements.MORE}]`);
+    };
+    /**
+     * Render mg-menu-item more element for overflow behavior
+     *
+     * @returns {HTMLElement} rendered mg-menu-item more element
+     */
+    this.renderMgMenuItemMore = () => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      return (h("mg-menu-item", { "data-overflow-more": true }, h("mg-icon", { icon: ((_b = (_a = this.moreitem) === null || _a === void 0 ? void 0 : _a.mgIcon) === null || _b === void 0 ? void 0 : _b.icon) || 'ellipsis-vertical', slot: "image" }), h("span", { class: { 'sr-only': !((_d = (_c = this.moreitem) === null || _c === void 0 ? void 0 : _c.slotLabel) === null || _d === void 0 ? void 0 : _d.display) }, slot: "label" }, ((_f = (_e = this.moreitem) === null || _e === void 0 ? void 0 : _e.slotLabel) === null || _f === void 0 ? void 0 : _f.label) || this.messages.moreLabel), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: (_g = this.moreitem) === null || _g === void 0 ? void 0 : _g.size })));
+    };
+    this.label = undefined;
+    this.direction = Direction.HORIZONTAL;
+    this.moreitem = undefined;
+    this.size = 'regular';
+    this.isChildMenu = undefined;
+    this.hasOverflow = false;
   }
   validateLabel(newValue) {
     if (newValue === undefined) {
@@ -61,6 +106,19 @@ const MgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       throw new Error(`<${this.name}> prop "direction" must be one of : ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
     }
   }
+  validateMoreItem(newValue) {
+    if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
+      throw new Error(`<${this.name}> prop "moreitem" must be paired with direction ${Direction.HORIZONTAL}.`);
+    }
+    else if (newValue !== undefined && !isMoreItem(newValue)) {
+      throw new Error(`<${this.name}> prop "moreitem" must match MoreItemType.`);
+    }
+  }
+  validateSize(newValue) {
+    if (!sizes.includes(newValue)) {
+      throw new Error(`<${this.name}> prop "size" must be one of : ${sizes.join(', ')}.`);
+    }
+  }
   /*************
    * Lifecycle *
    *************/
@@ -70,8 +128,12 @@ const MgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {void}
    */
   componentWillLoad() {
+    this.messages = initLocales(this.element).messages.plusMenu;
+    // validation
     this.validateDirection(this.direction);
     this.validateLabel(this.label);
+    this.validateMoreItem(this.moreitem);
+    this.validateSize(this.size);
   }
   /**
    * Check if component slots configuration
@@ -83,50 +145,102 @@ const MgMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
     return setTimeout(() => {
-      this.initMenuItems();
+      // store all menu-items
+      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
       this.isChildMenu = this.element.closest('mg-menu-item') !== null;
-      // click outside management for child vertical menu
-      if (!this.isChildMenu && this.direction === Direction.HORIZONTAL) {
-        document.addEventListener('click', (event) => {
-          if (event.target.closest('mg-menu') === null) {
-            this.menuItems.forEach(item => {
-              this.closeMenuItem(item, this.direction === Direction.HORIZONTAL);
-            });
-          }
-        });
-      }
+      this.hasOverflow = this.direction === Direction.HORIZONTAL && !this.isChildMenu;
+      if (this.hasOverflow && isMoreItem(this.moreitem))
+        this.overflowBehavior = new OverflowBehavior(this.element, this.renderMgMenuMore);
     }, 0);
   }
+  /**
+   * Check add listeners to childs
+   *
+   * @returns {void}
+   */
+  componentDidRender() {
+    // add menu items listeners
+    this.initMenuItemsListeners();
+  }
+  /**
+   * Disconnect overflow ResizeObserver
+   *
+   * @returns {void} run overflow resize obeserver disconnexion
+   */
+  disconnectedCallback() {
+    if (this.hasOverflow)
+      this.overflowBehavior.disconnect();
+  }
   /**
    * Render
    *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)));
+    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null), this.hasOverflow && isMoreItem(this.moreitem) && this.renderMgMenuItemMore()));
   }
   get element() { return this; }
   static get watchers() { return {
     "label": ["validateLabel"],
-    "direction": ["validateDirection"]
+    "direction": ["validateDirection"],
+    "moreitem": ["validateMoreItem"],
+    "size": ["validateSize"]
   }; }
   static get style() { return mgMenuCss; }
 }, [1, "mg-menu", {
     "label": [1],
     "direction": [513],
-    "isChildMenu": [32]
+    "moreitem": [16],
+    "size": [1],
+    "isChildMenu": [32],
+    "hasOverflow": [32]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-menu"];
+  const components = ["mg-menu", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-menu", "mg-menu-item", "mg-popover"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-menu":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, MgMenu$1);
       }
       break;
+    case "mg-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "mg-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "mg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "mg-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+    case "mg-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 defineCustomElement$1();

package/dist/components/mg-message.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createID, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$3 } from './mg-button2.js';
+import { d as defineCustomElement$4 } from './mg-button2.js';
+import { d as defineCustomElement$3 } from './mg-card2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
 /**
@@ -9,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const variants = ['info', 'warning', 'success', 'danger'];
 
-const mgMessageCss = ".mg-message{display:inline-block;position:relative;box-sizing:border-box;min-height:var(--default-size);overflow:hidden;background-color:white;border-radius:var(--mg-message-border-radius);box-shadow:var(--box-shadow)}.mg-message::before{content:\"\";position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info::before{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning::before{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success::before{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger::before{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{padding-right:3.4rem}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message,mg-message{max-width:100%}";
+const mgMessageCss = ":host{--mg-card-padding:0;--mg-card-border-radius:var(--mg-message-border-radius);--mg-card-border:none;--mg-card-overflow:hidden}.mg-message{display:inline-block;min-height:var(--default-size)}.mg-message__bar{position:absolute;top:0;left:0;width:0.3rem;height:100%}.mg-message.mg-message--info .mg-message__bar{background-color:hsl(var(--color-info))}.mg-message.mg-message--info .mg-message__icon{color:hsl(var(--color-info))}.mg-message.mg-message--warning .mg-message__bar{background-color:hsl(var(--color-warning))}.mg-message.mg-message--warning .mg-message__icon{color:hsl(var(--color-warning))}.mg-message.mg-message--success .mg-message__bar{background-color:hsl(var(--color-success))}.mg-message.mg-message--success .mg-message__icon{color:hsl(var(--color-success))}.mg-message.mg-message--danger .mg-message__bar{background-color:hsl(var(--color-danger))}.mg-message.mg-message--danger .mg-message__icon{color:hsl(var(--color-danger))}.mg-message.mg-message--close-button{--mg-card-padding:0 3.4rem 0 0}.mg-message.mg-message--hide{display:none}.mg-message ::slotted(*){margin:0;padding:0}.mg-message__icon{position:absolute;top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);left:1.3rem;line-height:1}.mg-message__content{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:stretch;padding:0 1rem 0 3.8rem}.mg-message__content-slot{flex-grow:1;margin:0.84rem 0}.mg-message__content-separator{display:inline-block;width:4.5rem;height:0}.mg-message__content-actions-slot{padding:1rem 0;text-align:right}.mg-message__close-button{position:absolute;top:0;right:0}.mg-message ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default)}.mg-message,mg-message{max-width:100%}";
 
 const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -27,49 +28,50 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
+    // Manage hover
+    this.isFocused = false;
+    this.isHovered = false;
     /**
-     * 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-message');
-    /**
-     * Message variant
-     */
-    this.variant = variants[0]; // info
-    /**
-     * Define if message has a cross button
-     * RG 01: https://jira.mgdis.fr/browse/PDA9-140
-     */
-    this.closeButton = false;
-    /**
-     * Define if message is hidden
+     * Set timer
+     *
+     * @returns {void}
      */
-    this.hide = false;
+    this.setTimer = () => {
+      this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
+    };
     /**
-     * Component classes
+     * Clear timer
+     *
+     * @returns {void}
      */
-    this.classList = new ClassList(['mg-message']);
+    this.clearTimer = () => {
+      clearTimeout(this.storedTimer);
+    };
     /**
-     * Define if component is using actions slot
+     * Event to add on element
+     *
+     * @param {MouseEvent | FocusEvent} event  event
+     * @returns {void}
      */
-    this.hasActions = false;
+    this.timerEvents = (event) => {
+      this.clearTimer();
+      const isMouseEvent = event.type === 'mouseenter';
+      // Needed to ensure we don't start the timer
+      this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
+      // Restart timer when loose focus AND mouse leave
+      this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
+        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
+        // Start timer if needed
+        if (!this.isFocused && !this.isHovered)
+          this.setTimer();
+      }, { once: true });
+    };
     /**
      * Handle close button
      */
     this.handleClose = () => {
       this.hide = true;
     };
-    /**
-     * Hide component whith delay
-     */
-    this.hideWithDelay = () => {
-      if (this.delay > 0 && this.hide !== true) {
-        this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
-      }
-      else if (this.storedTimer !== null) {
-        clearTimeout(this.storedTimer);
-      }
-    };
     /**
      * Get icon corresponding to variant
      *
@@ -87,6 +89,13 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           return 'exclamation-circle';
       }
     };
+    this.identifier = createID('mg-message');
+    this.delay = undefined;
+    this.variant = variants[0];
+    this.closeButton = false;
+    this.hide = false;
+    this.classList = new ClassList(['mg-message']);
+    this.hasActions = false;
   }
   validateDelay(newValue) {
     if (newValue && newValue < 2) {
@@ -114,12 +123,26 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (newValue) {
       this.componentHide.emit();
       this.classList.add(this.classHide);
+      // Remove event Listener
+      ['focusin', 'mouseenter'].forEach(event => {
+        this.element.removeEventListener(event, this.timerEvents);
+      });
+      // Clear Timer
+      this.clearTimer();
     }
     else {
       this.componentShow.emit();
       this.classList.delete(this.classHide);
+      // If delay is set
+      if (this.delay > 1) {
+        // Start timer
+        this.setTimer();
+        // Stop timer when get focus or mouse enter
+        ['focusin', 'mouseenter'].forEach(event => {
+          this.element.addEventListener(event, this.timerEvents);
+        });
+      }
     }
-    this.hideWithDelay();
   }
   /*************
    * Lifecycle *
@@ -148,7 +171,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", null, h("span", { class: "mg-message__bar" }), h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -171,7 +194,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-message", "mg-button", "mg-icon"];
+  const components = ["mg-message", "mg-button", "mg-card", "mg-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-message":
       if (!customElements.get(tagName)) {
@@ -179,6 +202,11 @@ function defineCustomElement$1() {
       }
       break;
     case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "mg-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/mg-modal.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createID, C as ClassList, f as focusableElements } from './components.utils.js';
+import { f as focusableElements, c as createID, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$3 } from './mg-button2.js';
+import { d as defineCustomElement$4 } from './mg-button2.js';
+import { d as defineCustomElement$3 } from './mg-card2.js';
 import { d as defineCustomElement$2 } from './mg-icon2.js';
 
-const mgModalCss = ".mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsla(var(--color-light), 85%)}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;padding:1.5rem 2.5rem;width:60rem;height:fit-content;max-width:100%;max-height:100%;box-sizing:border-box;background-color:hsl(var(--color-light));box-shadow:var(--box-shadow);border-radius:var(--mg-modal-border-radius)}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}";
+const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;padding:2rem 0;background-color:hsl(var(--color-light), 0.85)}.mg-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-modal__dialog{display:flex;position:relative;flex-direction:column;align-self:center;row-gap:3rem;height:fit-content;max-height:100%}.mg-modal__header{margin-bottom:0.5rem}.mg-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-modal__close-button{float:right;height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1)}.mg-modal__content{overflow-y:auto}.mg-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-modal.mg-modal--hide{display:none}.mg-modal ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default)}";
 
 const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,31 +19,6 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     // IDs
     this.closeButtonId = '';
     this.titleId = '';
-    /**
-     * 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-modal');
-    /**
-     * Define if modal has a cross button
-     */
-    this.closeButton = false;
-    /**
-     * Define if modal is hidden
-     */
-    this.hide = false;
-    /**
-     * Define if component is using actions slot
-     */
-    this.hasActions = false;
-    /**
-     * Define if component is using content slot
-     */
-    this.hasContent = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-modal']);
     this.setFocus = () => {
       // Get all focusable elements
       this.modalFocusableElements = Array.from(this.element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
@@ -85,6 +61,13 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.handleClose = () => {
       this.hide = true;
     };
+    this.identifier = createID('mg-modal');
+    this.modalTitle = undefined;
+    this.closeButton = false;
+    this.hide = false;
+    this.hasActions = false;
+    this.hasContent = false;
+    this.classList = new ClassList(['mg-modal']);
   }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -160,7 +143,7 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("article", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" }))))));
+    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -181,7 +164,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-modal", "mg-button", "mg-icon"];
+  const components = ["mg-modal", "mg-button", "mg-card", "mg-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-modal":
       if (!customElements.get(tagName)) {
@@ -189,6 +172,11 @@ function defineCustomElement$1() {
       }
       break;
     case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "mg-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/mg-pagination.js

@@ -42,19 +42,6 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     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');
-    /**
-     * Component total pages
-     */
-    this.totalPages = 1;
-    /**
-     * Component current page
-     */
-    this.currentPage = 1;
     /**
      * Change current page from target
      *
@@ -87,6 +74,10 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.handleGoToPage = (action, disabled) => {
       !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
     };
+    this.identifier = createID('mg-pagination');
+    this.label = undefined;
+    this.totalPages = 1;
+    this.currentPage = 1;
   }
   validateTotalPages(newValue) {
     if (newValue < 1) {

package/dist/components/mg-panel.js

@@ -1,14 +1,15 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createID, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
-import { d as defineCustomElement$7 } from './mg-button2.js';
+import { d as defineCustomElement$8 } from './mg-button2.js';
+import { d as defineCustomElement$7 } from './mg-card2.js';
 import { d as defineCustomElement$6 } from './mg-character-left2.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-text2.js';
 import { d as defineCustomElement$3 } from './mg-input-title2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip2.js';
 
-const mgPanelCss = ".mg-panel{background-color:hsl(var(--mg-panel-background));border-radius:var(--mg-panel-border-radius);box-shadow:var(--mg-panel-box-shadow)}.mg-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header-left,.mg-panel__header-right{display:flex;margin:0.3rem 0}.mg-panel__header-right{padding-left:0.3rem;flex:1 auto}.mg-panel__header-left mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-left mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-left.mg-panel__header-left--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}";
+const mgPanelCss = ":host{--mg-card-border:none;--mg-card-padding:0;--mg-card-border-radius:var(--mg-panel-border-radius);--mg-card-background:hsl(var(--mg-panel-background));--mg-card-box-shadow:var(--mg-panel-box-shadow)}.mg-panel__header{display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 1rem 0 0.3rem;align-items:flex-start}.mg-panel__header-left,.mg-panel__header-right{display:flex;margin:0.3rem 0}.mg-panel__header-right{padding-left:0.3rem;flex:1 auto;min-height:var(--default-size);align-items:center}.mg-panel__header-left mg-input-text{flex-grow:1;margin-left:0.3rem}.mg-panel__header-left mg-button+mg-button:not([slot=append-input]){margin-left:0.3rem}.mg-panel__header-left.mg-panel__header-left--full{flex:1 1 auto}.mg-panel__collapse-button-content{--font-size:1.4rem;--mg-button-font-weight:600}.mg-panel__content{padding:var(--mg-panel-content-padding)}.mg-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;gap:1rem;margin-left:auto}.mg-panel ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default)}";
 
 const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -17,27 +18,6 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     this.titleChange = createEvent(this, "title-change", 7);
     this.expandedChange = 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.
-     */
-    this.identifier = createID('mg-panel');
-    /**
-     * Panel is opened
-     */
-    this.expanded = false;
-    /**
-     * Panel title is editabled
-     */
-    this.titleEditable = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-panel']);
-    /**
-     * Title is in edition mode
-     */
-    this.isEditing = false;
     /************
      * Methods *
      ************/
@@ -122,6 +102,16 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
       return collapseButton();
     };
+    this.identifier = createID('mg-panel');
+    this.panelTitle = undefined;
+    this.titlePattern = undefined;
+    this.titlePatternErrorMessage = undefined;
+    this.expanded = false;
+    this.expandToggleDisabled = undefined;
+    this.titleEditable = false;
+    this.classList = new ClassList(['mg-panel']);
+    this.isEditing = false;
+    this.updatedPanelTitle = undefined;
   }
   validatePanelTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -172,7 +162,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("section", { class: this.classList.join(), id: this.identifier }, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null))));
+    return (h("section", { class: this.classList.join(), id: this.identifier }, h("mg-card", null, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null)))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -197,7 +187,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-panel", "mg-button", "mg-character-left", "mg-icon", "mg-input-text", "mg-input-title", "mg-tooltip"];
+  const components = ["mg-panel", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input-text", "mg-input-title", "mg-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-panel":
       if (!customElements.get(tagName)) {
@@ -205,6 +195,11 @@ function defineCustomElement$1() {
       }
       break;
     case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "mg-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }