@mgdis/mg-components 5.7.0 → 5.8.0

package/dist/cjs/mg-components.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu",{"label":[1],"direction":[513],"moreitem":[16],"size":[1],"isChildMenu":[32],"hasOverflow":[32]}],[1,"mg-menu-item",{"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-card"],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[1028,"full-width"],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]]], options);
+  return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemMore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-card"],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[1028,"full-width"],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"spin":[4],"classList":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mg-item-more.cjs.entry.js

@@ -0,0 +1,273 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5e7ede97.js');
+const mgMenu_conf = require('./mg-menu.conf-9afe6571.js');
+
+/**
+ * MgItemMore type guard
+ *
+ * @param {HTMLElement} element element to control type
+ * @returns {boolean} truthy if element is mg-item-more
+ */
+const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
+var OverflowBehaviorElements;
+(function (OverflowBehaviorElements) {
+  OverflowBehaviorElements["BASE_INDEX"] = "data-overflow-base-index";
+  OverflowBehaviorElements["PROXY_INDEX"] = "data-overflow-proxy-index";
+})(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
+class OverflowBehavior {
+  constructor(element, render) {
+    this.element = element;
+    this.render = render;
+    /**********
+     * Public *
+     **********/
+    /**
+     * Disconnect ResizeObserver
+     *
+     * @returns {void}
+     */
+    this.disconnect = () => {
+      this._resizeObserver.disconnect();
+    };
+    /************
+     * Internal *
+     ************/
+    /**
+     * run overflow behavior
+     *
+     * @param {number} width width of the container. Optional.
+     * @returns {void}
+     */
+    this.run = (width) => {
+      if (this._moreElement === undefined) {
+        // set moreElement
+        this._moreElement = this.render();
+        // set children
+        this._baseChildren = this.getInteractiveItems(this.element);
+        if (isMgItemMore(this._moreElement)) {
+          this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));
+        }
+        // update children
+        this._baseChildren.forEach((child, index) => {
+          child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);
+          // set moreElement children
+          this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
+        });
+      }
+      if (width !== undefined)
+        this.updateDisplayedItems(width);
+    };
+    /**
+     * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
+     *
+     * @param {Element} element element to parse
+     * @returns {Element[]} children
+     */
+    this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
+    /**
+     * Update displayed items in container from a given available space
+     *
+     * @param {number} availableWidth available width in container to display child items
+     * @returns {void}
+     */
+    this.updateDisplayedItems = (availableWidth) => {
+      this.restoreItems();
+      const acc = { accWidth: 0, previousItem: null };
+      [...this._baseChildren, this._moreElement].forEach((child) => {
+        acc.accWidth += child.offsetWidth;
+        const isPreviousItemHidden = acc.previousItem !== null && acc.previousItem.getAttribute('hidden') !== null;
+        // if previous item is hidden AND is NOT more element we hidde current
+        // OR if item has an overflow we hidde current
+        // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
+        // ELSE current is a display item
+        this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
+        // update previous item with current item
+        acc.previousItem = child;
+      });
+    };
+    /**
+     * Utility method to know if item overflow partialy or totaly in the container
+     *
+     * @param {number} cumulateWidth previous sibling elements cumulate width + item width
+     * @param {HTMLElement} item item HTML element
+     * @param {number} availableWidth container available width
+     * @returns {boolean} truthy if element is overflow
+     */
+    this.isOverflowElement = (cumulateWidth, item, availableWidth) => {
+      if (item.previousElementSibling === null || this.isMoreElement(item))
+        return false;
+      else if (!this.isMoreElement(item.nextElementSibling))
+        return cumulateWidth + this._moreElement.offsetWidth > availableWidth;
+      else
+        return cumulateWidth > availableWidth;
+    };
+    /**
+     * Utility method to know if a given element is the 'MORE' element
+     *
+     * @param {Element} element element to match with 'MORE' element
+     * @returns {boolean} truthy if element is the 'MORE' element
+     */
+    this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
+    /**
+     * Toggle display item element
+     *
+     * @param {HTMLElement} item item to control
+     * @param {boolean} isHidden is item hidden
+     * @returns {void}
+     */
+    this.toggleItem = (item, isHidden) => {
+      const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
+      if (this.isMoreElement(item))
+        this.toggleElement(this._moreElement, isHidden);
+      else if (mgActionMenuindex >= 0) {
+        this.toggleElement(item, isHidden);
+        this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);
+      }
+    };
+    /**
+     * Toggle element's hidde attribute
+     *
+     * @param {Element} element element to toggle
+     * @param {boolean} isHidden element is hidden
+     * @returns {void}
+     */
+    this.toggleElement = (element, isHidden) => {
+      if (isHidden)
+        element.setAttribute('hidden', '');
+      else
+        element.removeAttribute('hidden');
+    };
+    /**
+     * Remove hidden attributes on all items
+     *
+     * @returns {void}
+     */
+    this.restoreItems = () => {
+      [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
+    };
+    if (this._resizeObserver === undefined) {
+      // add resize observer
+      this._resizeObserver = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+          this.run(entry.contentRect.width);
+        });
+      });
+      this._resizeObserver.observe(this.element);
+    }
+    this.run();
+  }
+}
+
+const mgItemMoreCss = ".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}";
+
+const MgItemMore = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /************
+     * Internal *
+     ************/
+    this.name = 'mg-item-more';
+    /***********
+     * Methods *
+     ***********/
+    /**
+     * render mg-item-more overflow element
+     *
+     * @returns {HTMLMgItemMoreElement} mg-item-more element
+     */
+    this.renderMgMenuItemOverflowElement = () => {
+      // create menu items proxy element from item clones
+      const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');
+      this.menuItems.forEach((child) => {
+        moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
+      });
+      const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
+      Array.from(moreElementMenuItem.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 }));
+        });
+        // add id suffix to prevent duplicate key. default html id is: '';
+        if (proxy.id.trim() !== '')
+          proxy.id = `${proxy.id}-proxy`;
+        // manage status change miror in proxy
+        allMenuItem[index].addEventListener('status-change', (event) => {
+          proxy.setAttribute('status', event.detail);
+        });
+      });
+      return this.element;
+    };
+    this.icon = { icon: 'ellipsis-vertical' };
+    this.slotlabel = { display: false };
+    this.size = undefined;
+    this.parentMenu = undefined;
+  }
+  validateIcon(newValue) {
+    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
+      throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`);
+  }
+  validateSlotLabel(newValue) {
+    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
+      throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);
+    else if (typeof newValue.label !== 'string')
+      this.slotlabel.label = this.messages.moreLabel;
+  }
+  validateSize(newValue) {
+    if (newValue && typeof newValue !== 'string')
+      throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Disconnect overflow ResizeObserver
+   *
+   * @returns {void} run overflow resize obeserver disconnexion
+   */
+  disconnectedCallback() {
+    this.overflowBehavior.disconnect();
+  }
+  /**
+   * Set variables and validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // init variables
+    this.messages = mgMenu_conf.initLocales(this.element).messages.plusMenu;
+    this.parentMenu = this.element.closest('mg-menu');
+    this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
+    // validate props
+    this.validateIcon(this.icon);
+    this.validateSlotLabel(this.slotlabel);
+    this.validateSize(this.size);
+  }
+  /**
+   * Add overflow behavior
+   *
+   * @returns {void}
+   */
+  componentDidLoad() {
+    this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (index.h(index.Host, { role: "menuitem", "aria-haspopup": "true" }, index.h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, index.h("mg-icon", { icon: this.icon.icon, slot: "image" }), index.h("span", { class: { 'sr-only': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { direction: mgMenu_conf.Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
+  }
+  get element() { return index.getElement(this); }
+  static get watchers() { return {
+    "icon": ["validateIcon"],
+    "slotlabel": ["validateSlotLabel"],
+    "size": ["validateSize"]
+  }; }
+};
+MgItemMore.style = mgItemMoreCss;
+
+exports.mg_item_more = MgItemMore;

package/dist/cjs/mg-menu.conf-9afe6571.js

@@ -0,0 +1,242 @@
+'use strict';
+
+const errors$1 = {
+	required: "This field is required.",
+	date: {
+		badInput: "The date format must be <span aria-hidden=\"true\">mm/dd/yyyy</span><span class=\"sr-only\">m m / d d / y y y y</span> and the date must be greater than {min}",
+		min: "The date cannot be earlier than {min}",
+		max: "The date cannot be later than {max}",
+		minMax: "The date must be between {min} and {max}"
+	},
+	numeric: {
+		min: "The value cannot be less than {min}",
+		max: "The value cannot be greater than {max}",
+		minMax: "The value must be between {min} et {max}"
+	}
+};
+const nbCharLeft$1 = "{counter} characters left.";
+const input$1 = {
+	select: {
+		placeholder: "Select a value"
+	}
+};
+const form$1 = {
+	required: "Fields with a <strong class=\"is-asterisk\">*</strong> are required",
+	requiredSingle: "Field with a <strong class=\"is-asterisk\">*</strong> is required",
+	allRequired: "All fields are required",
+	allRequiredSingle: "The field is required"
+};
+const message$1 = {
+	closeButton: "Close message"
+};
+const modal$1 = {
+	closeButton: "Close modal"
+};
+const pagination$1 = {
+	label: "Pagination",
+	page: "page",
+	pages: "pages",
+	nextPage: "Next page",
+	previousPage: "Previous page",
+	selectPage: "Select the page to display."
+};
+const panel$1 = {
+	editLabel: "Edit section title."
+};
+const skipLinks$1 = {
+	navLabel: "Quick access"
+};
+const general$1 = {
+	confirm: "Confirm",
+	cancel: "Cancel",
+	close: "Close",
+	next: "next",
+	previous: "previous"
+};
+const plusMenu$1 = {
+	moreLabel: "Additional menu",
+	badgeLabel: "Include notification(s)"
+};
+const actionMore$1 = {
+	label: "Actions"
+};
+const en = {
+	errors: errors$1,
+	nbCharLeft: nbCharLeft$1,
+	input: input$1,
+	form: form$1,
+	message: message$1,
+	modal: modal$1,
+	pagination: pagination$1,
+	panel: panel$1,
+	skipLinks: skipLinks$1,
+	general: general$1,
+	plusMenu: plusMenu$1,
+	actionMore: actionMore$1
+};
+
+const errors = {
+	required: "Ce champ est obligatoire.",
+	date: {
+		badInput: "Le format de la date doit être du type <span aria-hidden=\"true\">jj/mm/aaaa</span><span class=\"sr-only\">j j / m m / a a a a</span> et la date supérieure au {min}",
+		min: "La date ne peut pas être antérieure au {min}",
+		max: "La date ne peut pas être postérieure au {max}",
+		minMax: "La date doit être comprise entre le {min} et le {max}"
+	},
+	numeric: {
+		min: "La valeur ne peut pas être inférieure à {min}",
+		max: "La valeur ne peut pas être supérieure à {max}",
+		minMax: "La valeur doit être comprise entre {min} et {max}"
+	}
+};
+const nbCharLeft = "{counter} caractères disponibles.";
+const input = {
+	select: {
+		placeholder: "Sélectionnez une valeur"
+	}
+};
+const form = {
+	required: "Les champs marqués d'un <strong class=\"is-asterisk\">*</strong> sont obligatoires",
+	requiredSingle: "Le champ marqué d'un <strong class=\"is-asterisk\">*</strong> est obligatoire",
+	allRequired: "Tous les champs sont obligatoires",
+	allRequiredSingle: "Le champ est obligatoire"
+};
+const message = {
+	closeButton: "Fermer le message"
+};
+const modal = {
+	closeButton: "Fermer la modale"
+};
+const pagination = {
+	label: "Pagination",
+	page: "page",
+	pages: "pages",
+	nextPage: "Page suivante",
+	previousPage: "Page précédente",
+	selectPage: "Sélectionner la page à afficher."
+};
+const panel = {
+	editLabel: "Modifier le titre de la section."
+};
+const skipLinks = {
+	navLabel: "Accès rapide"
+};
+const general = {
+	confirm: "Valider",
+	cancel: "Annuler",
+	close: "Fermer",
+	next: "suivant",
+	previous: "précédent"
+};
+const plusMenu = {
+	moreLabel: "Menu complémentaire",
+	badgeLabel: "Notification(s) incluse(s)"
+};
+const actionMore = {
+	label: "Actions"
+};
+const fr = {
+	errors: errors,
+	nbCharLeft: nbCharLeft,
+	input: input,
+	form: form,
+	message: message,
+	modal: modal,
+	pagination: pagination,
+	panel: panel,
+	skipLinks: skipLinks,
+	general: general,
+	plusMenu: plusMenu,
+	actionMore: actionMore
+};
+
+/**
+ * Format number to the locale currency
+ *
+ * @param {number} number number to format
+ * @param {string} locale locale to apply
+ * @param {string} currency currency to apply
+ * @returns {string} formatted currency
+ */
+const localeCurrency = (number, locale, currency) => {
+  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
+};
+/**
+ * Format number to locale
+ *
+ * @param {number} number number to format
+ * @param {string} locale locale to apply
+ * @returns {string} formatted number
+ */
+const localeNumber = (number, locale) => {
+  return new Intl.NumberFormat(locale).format(number);
+};
+/**
+ * Date RegExp
+ */
+const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
+/**
+ * Locale date format
+ *
+ * @param {string} date date to format
+ * @param {string} locale locale to apply
+ * @returns {string} formatted date
+ */
+const localeDate = (date, locale) => {
+  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
+    return '';
+  }
+  return new Intl.DateTimeFormat(locale).format(new Date(date));
+};
+/**
+ * Get locale and messages
+ * We load the defined locale but for now we only support the first subtag for messages
+ *
+ * @param {HTMLElement} element element we need to get the language
+ * @param {unknown} messages messages to use
+ * @param {string} defaultLocale default messages locale
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
+ */
+const getLocaleMessages = (element, messages, defaultLocale) => {
+  // Get local
+  const closestLangAttribute = element.closest('[lang]');
+  const closestLang = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute === null || closestLangAttribute === void 0 ? void 0 : closestLangAttribute.lang);
+  const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;
+  // Only keep first subtag
+  const localeSubtag = locale.split('-').shift();
+  // Return
+  return {
+    locale,
+    messages: messages[localeSubtag] || messages[defaultLocale],
+  };
+};
+
+const defaultLocale = 'en';
+const messages = { en, fr };
+/**
+ * Get Intl object
+ *
+ * @param {HTMLElement} element element we need to get the language
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
+ */
+const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);
+
+/**
+ * Menu direction type
+ */
+exports.Direction = void 0;
+(function (Direction) {
+  Direction["VERTICAL"] = "vertical";
+  Direction["HORIZONTAL"] = "horizontal";
+})(exports.Direction || (exports.Direction = {}));
+/**
+ * List of all possibles sizes
+ */
+const sizes = ['regular', 'medium', 'large'];
+
+exports.dateRegExp = dateRegExp;
+exports.initLocales = initLocales;
+exports.localeCurrency = localeCurrency;
+exports.localeDate = localeDate;
+exports.localeNumber = localeNumber;
+exports.sizes = sizes;

package/dist/collection/collection-manifest.json

@@ -4,6 +4,8 @@
     "./components/atoms/mg-button/mg-button.js",
     "./components/atoms/mg-icon/mg-icon.js",
     "./components/molecules/menu/mg-menu/mg-menu.js",
+    "./components/molecules/mg-item-more/mg-item-more.js",
+    "./components/molecules/mg-popover/mg-popover.js",
     "./components/molecules/menu/mg-menu-item/mg-menu-item.js",
     "./components/atoms/mg-card/mg-card.js",
     "./components/atoms/mg-character-left/mg-character-left.js",
@@ -28,7 +30,6 @@
     "./components/molecules/mg-modal/mg-modal.js",
     "./components/molecules/mg-pagination/mg-pagination.js",
     "./components/molecules/mg-panel/mg-panel.js",
-    "./components/molecules/mg-popover/mg-popover.js",
     "./components/molecules/mg-skip-links/mg-skip-links.js",
     "./components/molecules/mg-tabs/mg-tabs.js"
   ],

package/dist/collection/components/atoms/mg-button/mg-button.js

@@ -101,6 +101,8 @@ export class MgButton {
     else {
       this.classList.delete(this.classDisabled);
     }
+    // emit value update
+    this.disabledChange.emit(isDisabled);
   }
   loadingHandler(newValue) {
     // we add loading style if it newvalue is true else we remove it
@@ -326,6 +328,28 @@ export class MgButton {
       "classList": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "disabledChange",
+        "name": "disabled-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emmited event when disabled change"
+        },
+        "complexType": {
+          "original": "MgButton['disabled']",
+          "resolved": "boolean",
+          "references": {
+            "MgButton": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{