@mgdis/mg-components 5.4.0 → 5.6.0

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js

@@ -1,20 +1,19 @@
 import { h, Host } from '@stencil/core';
-import { Direction } from './mg-menu.conf';
+import { OverflowBehavior, OverflowBehaviorElements } from '../../../../utils/behaviors.utils';
+import { Direction, isMoreItem, sizes } from './mg-menu.conf';
+import { initLocales } from '../../../../locales';
 export class MgMenu {
   constructor() {
     /************
      * 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}
      */
@@ -23,18 +22,19 @@ export class MgMenu {
         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) => {
@@ -44,6 +44,47 @@ export class MgMenu {
         });
       });
     };
+    /**
+     * 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) {
@@ -55,6 +96,19 @@ export class MgMenu {
       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 *
    *************/
@@ -64,8 +118,12 @@ export class MgMenu {
    * @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
@@ -77,27 +135,39 @@ export class MgMenu {
     // 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()));
   }
   static get is() { return "mg-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -152,12 +222,56 @@ export class MgMenu {
         "attribute": "direction",
         "reflect": true,
         "defaultValue": "Direction.HORIZONTAL"
+      },
+      "moreitem": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "MoreItemType",
+          "resolved": "{ mgIcon?: { icon: string; }; slotLabel?: { label?: string; display?: boolean; }; size?: \"regular\" | \"large\" | \"medium\"; }",
+          "references": {
+            "MoreItemType": {
+              "location": "import",
+              "path": "./mg-menu.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Customize mg-menu \"more element\"\nUsed with direction: 'vertical' to manage overflow"
+        }
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "MenuSizeType",
+          "resolved": "\"large\" | \"medium\" | \"regular\"",
+          "references": {
+            "MenuSizeType": {
+              "location": "import",
+              "path": "./mg-menu.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define mg-menu size\nDefault: 'regular'"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'regular'"
       }
     };
   }
   static get states() {
     return {
-      "isChildMenu": {}
+      "isChildMenu": {},
+      "hasOverflow": {}
     };
   }
   static get elementRef() { return "element"; }
@@ -168,6 +282,12 @@ export class MgMenu {
       }, {
         "propName": "direction",
         "methodName": "validateDirection"
+      }, {
+        "propName": "moreitem",
+        "methodName": "validateMoreItem"
+      }, {
+        "propName": "size",
+        "methodName": "validateSize"
       }];
   }
 }

package/dist/collection/components/molecules/menu/mg-menu-item/doc/mg-menu-item.stories.js

@@ -1,8 +1,9 @@
 import { h } from '@stencil/core';
 import { filterArgs } from '../../../../../../.storybook/utils';
+import { Direction } from '../../mg-menu/mg-menu.conf';
 export default {
   component: 'mg-menu-item',
-  title: 'Beta/menus/mg-menu-item',
+  title: 'Beta/Menus/mg-menu-item',
 };
 /**
  * Template
@@ -14,19 +15,20 @@ export default {
 const Template = (args) => h("mg-menu-item", Object.assign({}, filterArgs(args)), args.slot);
 export const MgMenuItem = Template.bind({});
 MgMenuItem.args = {
-  identifier: 'identifier',
   slot: h("span", { slot: "label" }, "My label"),
 };
+export const MgMenuItemAsLink = Template.bind({});
+MgMenuItemAsLink.args = Object.assign({ href: './' }, MgMenuItem.args);
 export const MgMenuItemWhitIcon = Template.bind({});
-MgMenuItemWhitIcon.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-icon", { icon: "user", slot: "illustration" })] });
+MgMenuItemWhitIcon.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-icon", { icon: "user", slot: "image" })] });
 export const MgMenuItemWhitBadge = Template.bind({});
 MgMenuItemWhitBadge.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-badge", { value: "2", label: "hello", slot: "information" })] });
 export const MgMenuItemWhitBadgeAndIcon = Template.bind({});
-MgMenuItemWhitBadgeAndIcon.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-badge", { value: "2", label: "hello", slot: "information" }), h("mg-icon", { icon: "user", slot: "illustration" })] });
+MgMenuItemWhitBadgeAndIcon.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-badge", { value: "2", label: "hello", slot: "information" }), h("mg-icon", { icon: "user", slot: "image" })] });
 export const MgMenuItemWhitMetadata = Template.bind({});
 MgMenuItemWhitMetadata.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("span", { slot: "metadata" }, "My metadata")] });
 export const MgMenuItemWhithSubmenu = Template.bind({});
 MgMenuItemWhithSubmenu.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [
     h("span", { slot: "label" }, "My label"),
-    h("mg-menu-vertical", { label: "submenu" }, h("mg-menu-item", null, h("span", { slot: "label" }, "Subitem 1")), h("mg-menu-item", null, h("mg-icon", { icon: "user", slot: "illustration" }), h("span", { slot: "label" }, "Subitem 2")), h("mg-menu-item", null, h("span", { slot: "label" }, "Subitem 3"), h("mg-icon", { icon: "user", slot: "illustration" }), h("mg-badge", { value: "2", label: "hello", slot: "information" }))),
+    h("mg-menu", { direction: Direction.VERTICAL, label: "submenu" }, h("mg-menu-item", null, h("span", { slot: "label" }, "Subitem 1")), h("mg-menu-item", null, h("mg-icon", { icon: "user", slot: "image" }), h("span", { slot: "label" }, "Subitem 2")), h("mg-menu-item", null, h("span", { slot: "label" }, "Subitem 3"), h("mg-icon", { icon: "user", slot: "image" }), h("mg-badge", { value: "2", label: "hello", slot: "information" }))),
   ] });

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.conf.js

@@ -16,7 +16,3 @@ export var Status;
   Status["DISABLED"] = "disabled";
   Status["ACTIVE"] = "active";
 })(Status || (Status = {}));
-/**
- * List of all possibles sizes
- */
-export const sizes = ['regular', 'medium', 'large'];

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css

@@ -28,6 +28,7 @@
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding: 1rem 2rem;
+  height: calc(3.8rem);
 }
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -35,7 +36,7 @@
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=label]),
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular ::slotted([slot=metadata]) {
-  font-size: 1.3rem;
+  font-size: var(--font-size);
 }
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular.mg-menu-item__navigation-button--horizontal {
@@ -48,7 +49,8 @@
 
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
-  padding: 1.5rem 3rem;
+  padding: 1rem 3rem;
+  height: calc(5.1rem);
 }
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -56,11 +58,11 @@
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=label]),
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium ::slotted([slot=metadata]) {
-  font-size: 1.5rem;
+  font-size: calc(var(--font-size) + 0.2rem);
 }
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--horizontal {
-  padding-bottom: calc(1.5rem - 0.3rem);
+  padding-bottom: calc(1rem - 0.3rem);
 }
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium.mg-menu-item__navigation-button--vertical {
@@ -69,7 +71,8 @@
 
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
-  padding: 2.5rem 4rem;
+  padding: 1rem 4rem;
+  height: calc(7.1rem);
 }
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -77,11 +80,11 @@
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=label]),
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large ::slotted([slot=metadata]) {
-  font-size: 1.5rem;
+  font-size: calc(var(--font-size) + 0.2rem);
 }
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--horizontal,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--horizontal {
-  padding-bottom: calc(2.5rem - 0.3rem);
+  padding-bottom: calc(1rem - 0.3rem);
 }
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button.mg-menu-item__navigation-button--vertical,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large.mg-menu-item__navigation-button--vertical {
@@ -91,28 +94,30 @@
 .mg-menu-item__navigation-button {
   display: flex;
   align-items: center;
-  column-gap: 1rem;
+  column-gap: var(--mg-menu-item-navigation-button-column-gap, 1rem);
   background-color: unset;
   border: none;
   font-family: var(--font-family);
   color: hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));
   line-height: var(--line-height);
   text-decoration: none;
+  white-space: nowrap;
+  box-sizing: border-box;
   cursor: pointer;
 }
 .mg-menu-item__navigation-button:disabled, .mg-menu-item__navigation-button--disabled {
   cursor: default;
-  opacity: 30%;
+  opacity: 0.3;
 }
 .mg-menu-item__navigation-button:focus-visible {
   z-index: 10;
 }
-.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled), .mg-menu-item__navigation-button:focus:not(.mg-menu-item__navigation-button--disabled) {
-  background-color: hsla(var(--mg-menu-item-focused-background-color-hsl), 10%);
+.mg-menu-item__navigation-button:hover:not(.mg-menu-item__navigation-button--disabled), .mg-menu-item__navigation-button:focus-visible:not(.mg-menu-item__navigation-button--disabled) {
+  background-color: hsl(var(--mg-menu-item-focused-background-color-hsl), 0.1);
 }
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--active {
   color: hsl(var(--mg-menu-item-color-active-hsl));
-  font-weight: 700;
+  font-weight: 600;
 }
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--active.mg-menu-item__navigation-button--horizontal {
   border-bottom-color: hsl(var(--mg-menu-item-border-color-active-hsl));
@@ -277,16 +282,16 @@
 :host {
   position: relative;
   display: flex;
-}
-
-:host([data-style-position-last]) .mg-menu-item__collapse-container {
-  left: unset;
-  right: 0;
+  --mg-popover-padding-vertical: 0;
+  --mg-popover-padding-horizontal: 0;
 }
 
 :host([data-style-direction-vertical]) {
   flex-direction: column;
 }
+:host([data-style-direction-vertical]) .mg-menu-item__navigation-button {
+  width: 100%;
+}
 :host([data-style-direction-vertical]) .mg-menu-item__collapse-container {
   left: unset;
   top: unset;
@@ -298,20 +303,29 @@
 }
 
 :host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level {
-  box-shadow: var(--box-shadow);
   background-color: hsl(var(--color-light));
 }
 :host([data-style-direction-horizontal]) .mg-menu-item__collapse-container.mg-menu-item__collapse-container--first-level ::slotted(mg-menu) {
   padding: 1rem 0;
 }
 
+:host([data-overflow-more]) {
+  --mg-menu-item-navigation-button-column-gap: 0;
+}
+:host([data-overflow-more]) .mg-menu-item__navigation-button-chevron {
+  display: none;
+}
+:host([data-overflow-more]) .mg-menu-item__navigation-button-text-content ::slotted([slot=information]) {
+  margin-left: 0;
+}
+:host([data-overflow-more]) ::slotted(mg-menu) {
+  --mg-menu-item-navigation-button-column-gap: 1rem;
+}
+
 .mg-menu-item {
   max-width: var(--mg-menu-item-navigation-button-max-width);
 }
 .mg-menu-item__collapse-container {
-  position: absolute;
-  top: 100%;
-  left: 0;
   width: max-content;
   z-index: 10;
 }
@@ -321,9 +335,12 @@
 .mg-menu-item__navigation-button-text-content {
   width: 100%;
   display: flex;
+  align-items: center;
 }
+.mg-menu-item__navigation-button-text-content-notification,
 .mg-menu-item__navigation-button-text-content ::slotted([slot=information]) {
   margin-left: 1rem;
+  font-size: var(--font-size);
 }
 .mg-menu-item__navigation-button-chevron {
   margin-left: auto;
@@ -340,4 +357,17 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+::slotted(*) {
+  display: flex;
+  flex-direction: column;
+}
+
+:host([status=disabled]) {
+  pointer-events: none;
+}
+
+:host([hidden]) {
+  display: none;
 }