@mgdis/mg-components 5.5.0 → 5.7.0

package/dist/components/mg-menu2.js

@@ -0,0 +1,247 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { O as OverflowBehaviorElements, D as Direction, i as isMoreItem, s as sizes, a as OverflowBehavior, d as defineCustomElement$2 } from './mg-menu-item2.js';
+import { i as initLocales } from './index2.js';
+import { d as defineCustomElement$6 } from './mg-badge2.js';
+import { d as defineCustomElement$5 } from './mg-button2.js';
+import { d as defineCustomElement$4 } from './mg-card2.js';
+import { d as defineCustomElement$3 } from './mg-icon2.js';
+import { d as defineCustomElement$1 } from './mg-popover2.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /************
+     * Internal *
+     ************/
+    this.name = 'mg-menu';
+    this.menuItems = [];
+    this.focusedMenuItem = 0;
+    /**
+     * Close matching menu-item
+     *
+     * @param {HTMLElement} item menu-item to close
+     * @param {boolean} condition addionnal condition
+     * @returns {void}
+     */
+    this.closeMenuItem = (item, condition) => {
+      if (!this.isChildMenu && condition) {
+        item.expanded = false;
+      }
+    };
+    /*************
+     * Methods *
+     *************/
+    /**
+     * Store menu-items on component init and add listeners
+     *
+     * @returns {void}
+     */
+    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, () => {
+            this.focusedMenuItem = menuItemIndex;
+            // reset expanded on previous active menu item
+            this.menuItems.forEach((item, index) => {
+              this.closeMenuItem(item, index !== this.focusedMenuItem);
+            });
+          });
+        });
+      });
+    };
+    /**
+     * 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.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) {
+      throw new Error(`<${this.name}> prop "label" is required.`);
+    }
+  }
+  validateDirection(newValue) {
+    if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
+      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 *
+   *************/
+  /**
+   * Validate props
+   *
+   * @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
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentDidLoad() {
+    // update props and states after componentDidLoad hook
+    // return a promise to process action only in the FIRST render().
+    // https://stenciljs.com/docs/component-lifecycle#componentwillload
+    return setTimeout(() => {
+      // 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;
+      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), this.hasOverflow && isMoreItem(this.moreitem) && this.renderMgMenuItemMore()));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "label": ["validateLabel"],
+    "direction": ["validateDirection"],
+    "moreitem": ["validateMoreItem"],
+    "size": ["validateSize"]
+  }; }
+  static get style() { return mgMenuCss; }
+}, [1, "mg-menu", {
+    "label": [1],
+    "direction": [513],
+    "moreitem": [16],
+    "size": [1],
+    "isChildMenu": [32],
+    "hasOverflow": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  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);
+      }
+      break;
+    case "mg-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "mg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "mg-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "mg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement();
+      }
+      break;
+    case "mg-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "mg-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { MgMenu as M, defineCustomElement as d };

package/dist/components/mg-message.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$2 } from './mg-icon2.js';
  */
 const variants = ['info', 'warning', 'success', 'danger'];
 
-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,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() {
@@ -28,22 +28,49 @@ 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;
     /**
-     * Handle close button
+     * Set timer
+     *
+     * @returns {void}
      */
-    this.handleClose = () => {
-      this.hide = true;
+    this.setTimer = () => {
+      this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
     };
     /**
-     * Hide component whith delay
+     * Clear timer
+     *
+     * @returns {void}
      */
-    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);
-      }
+    this.clearTimer = () => {
+      clearTimeout(this.storedTimer);
+    };
+    /**
+     * Event to add on element
+     *
+     * @param {MouseEvent | FocusEvent} event  event
+     * @returns {void}
+     */
+    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;
     };
     /**
      * Get icon corresponding to variant
@@ -77,7 +104,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
-      throw new Error(`<mg-message> prop "variant" must be one of : ${variants.join(', ')}`);
+      throw new Error(`<mg-message> prop "variant" must be one of: ${variants.join(', ')}`);
     }
     else {
       if (oldValue !== undefined) {
@@ -96,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 *

package/dist/components/mg-modal.js

@@ -5,7 +5,7 @@ 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 = ":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:hsla(var(--color-light), 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}";
+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() {

package/dist/components/mg-pagination.js

@@ -76,6 +76,7 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     this.identifier = createID('mg-pagination');
     this.label = undefined;
+    this.hideNavigationLabels = undefined;
     this.totalPages = 1;
     this.currentPage = 1;
   }
@@ -120,7 +121,7 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   render() {
     const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
+      onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
     return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   get element() { return this; }
@@ -132,6 +133,7 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
 }, [1, "mg-pagination", {
     "identifier": [1],
     "label": [1025],
+    "hideNavigationLabels": [4, "hide-navigation-labels"],
     "totalPages": [2, "total-pages"],
     "currentPage": [1538, "current-page"]
   }]);

package/dist/components/mg-panel.js

@@ -9,7 +9,7 @@ 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 = ":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}";
+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() {
@@ -91,13 +91,13 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
-          h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
+          h("mg-button", { key: "edit-button", "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
         ];
       }
       if (this.titleEditable && this.isEditing) {
         return [
           collapseButton(),
-          h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
+          h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
         ];
       }
       return collapseButton();

package/dist/components/mg-popover.js

@@ -1,193 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as createID, i as isTagName } from './components.utils.js';
-import { i as initLocales } from './index2.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';
-import { c as createPopper } from './popper.js';
-
-const mgPopoverCss = ":host{--mg-card-padding:1.5rem;--mg-card-border:none;--mg-card-border-radius:0.5rem;--mg-card-background:hsl(var(--mg-popover-background-color));position:relative;display:contents}:host::slotted(*){display:inline-block}.mg-popover{display:none;z-index:2000;color:hsl(var(--mg-popover-font-color))}.mg-popover mg-card{z-index:-1}.mg-popover[data-show]{display:block}.mg-popover mg-button{float:right;margin-right:calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);margin-top:calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);margin-left:3rem}.mg-popover__arrow,.mg-popover__arrow::before{position:absolute;width:2rem;height:2rem;z-index:2000;background:hsl(var(--mg-popover-background-color))}.mg-popover__arrow{visibility:hidden}.mg-popover__arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.mg-popover[data-popper-placement^=top]>.mg-popover__arrow{bottom:-6px}.mg-popover[data-popper-placement^=bottom]>.mg-popover__arrow{top:-6px}.mg-popover[data-popper-placement^=left]>.mg-popover__arrow{right:-6px}.mg-popover[data-popper-placement^=right]>.mg-popover__arrow{left:-6px}.mg-popover__title ::slotted([slot=title]){margin:0 0 1rem !important;font-size:var(--mg-popover-title-font-size) !important;font-weight:600}";
-
-const MgPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.displayChange = createEvent(this, "display-change", 7);
-    this.closeButtonId = '';
-    /**
-     * Check if clicked outside of component
-     *
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
-     */
-    this.clickOutside = (event) => {
-      if (!this.disabled && event.target.closest(`mg-popover`) !== this.element) {
-        this.display = false;
-      }
-    };
-    /**
-     * Show popover
-     *
-     * @returns {void}
-     */
-    this.show = () => {
-      // Make the popover visible
-      this.popover.setAttribute('data-show', '');
-      // Enable the event listeners
-      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
-      // Update its position
-      this.popper.update();
-      // hide when click outside
-      // setTimeout is used to prevent event to trigger after creation
-      setTimeout(() => {
-        document.addEventListener('click', this.clickOutside, false);
-      }, 0);
-    };
-    /**
-     * Hide popover
-     *
-     * @returns {void}
-     */
-    this.hide = () => {
-      // Hide the popover
-      this.popover.removeAttribute('data-show');
-      // Disable the event listeners
-      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
-      // Remove event listener
-      document.removeEventListener('click', this.clickOutside, false);
-    };
-    /**
-     * Handle action for close button
-     *
-     * @returns {void}
-     */
-    this.handleCloseButton = () => {
-      this.display = false;
-    };
-    this.identifier = createID('mg-popover');
-    this.placement = 'bottom';
-    this.closeButton = false;
-    this.display = false;
-    this.disabled = false;
-  }
-  handleDisplay(newValue) {
-    if (newValue) {
-      this.show();
-    }
-    else {
-      this.hide();
-    }
-    this.displayChange.emit(newValue);
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void} timeout
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = initLocales(this.element).messages;
-  }
-  /**
-   * Check if component props are well configured on init
-   *
-   * @returns {void}
-   */
-  componentDidLoad() {
-    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    const slottedTitleElement = this.element.querySelector('[slot="title"]');
-    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {
-      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);
-    }
-    // Set close button id
-    if (this.closeButton) {
-      this.closeButtonId = `${this.identifier}-close-button`;
-    }
-    // Get popover content
-    this.popover = this.element.shadowRoot.getElementById(this.identifier);
-    //Get interactive element (first element without slot attribute)
-    const interactiveElement = this.element.querySelector(':not([slot])');
-    // Add aria attributes
-    interactiveElement.setAttribute('aria-controls', this.identifier);
-    interactiveElement.setAttribute('aria-expanded', `${this.display}`);
-    // Create popperjs popover
-    this.popper = createPopper(interactiveElement, this.popover, {
-      placement: this.placement,
-      strategy: 'fixed',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 10],
-          },
-        },
-      ],
-    });
-    // Add events to toggle display
-    interactiveElement.addEventListener('click', () => {
-      if (!this.disabled)
-        this.display = !this.display;
-    });
-    // Add events to hide popover
-    this.element.addEventListener('keydown', e => {
-      if (!this.disabled && e.code === 'Escape')
-        this.display = false;
-    });
-    this.handleDisplay(this.display);
-  }
-  /**
-   * Render
-   *
-   * @returns {HTMLElement} HTML Element
-   */
-  render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, h("mg-card", null, !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "display": ["handleDisplay"]
-  }; }
-  static get style() { return mgPopoverCss; }
-}, [1, "mg-popover", {
-    "identifier": [1],
-    "placement": [1],
-    "closeButton": [4, "close-button"],
-    "display": [1028],
-    "disabled": [1028]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-popover", "mg-button", "mg-card", "mg-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-popover":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgPopover$1);
-      }
-      break;
-    case "mg-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "mg-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { M as MgPopover$1, d as defineCustomElement$1 } from './mg-popover2.js';
 
 const MgPopover = MgPopover$1;
 const defineCustomElement = defineCustomElement$1;