@mgdis/mg-components 5.19.3 → 5.20.0

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

@@ -1,282 +1,282 @@
 import { h, Host } from "@stencil/core";
 import { Direction, sizes } from "./mg-menu.conf";
 export class MgMenu {
-  constructor() {
-    /************
-     * Internal *
-     ************/
-    this.name = 'mg-menu';
-    this.menuItems = [];
-    this.focusedMenuItem = 0;
+    constructor() {
+        /************
+         * Internal *
+         ************/
+        this.name = 'mg-menu';
+        this.menuItems = [];
+        this.focusedMenuItem = 0;
+        /*************
+         * Methods *
+         *************/
+        /**
+         * Close matching menu-item
+         * @param item - menu-item to close
+         * @param condition - addionnal condition
+         */
+        this.closeMenuItem = (item, condition) => {
+            if (!this.isChildMenu && condition) {
+                item.expanded = false;
+            }
+        };
+        /**
+         * get mg-item-more element
+         * @returns mg-item-more element
+         */
+        this.getItemMore = () => this.element.querySelector('mg-item-more');
+        /**
+         * get mg-item-more child mg-menu-item element
+         * @returns mg-menu-item element
+         */
+        this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
+        /**
+         * Set item listend
+         * @param item - mg-menu-item element
+         * @param index - number
+         */
+        this.setItemListener = (item, index) => {
+            ['click', 'focus'].forEach(trigger => {
+                (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
+                    this.focusedMenuItem = index;
+                    // reset expanded on previous active menu item
+                    (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
+                        this.closeMenuItem(item, index !== this.focusedMenuItem);
+                    });
+                });
+            });
+        };
+        /**
+         * Store menu-items on component init and add listeners
+         */
+        this.initMenuItemsListeners = () => {
+            // add listeners on menu item and edit index
+            this.menuItems.forEach((item, index) => {
+                this.setItemListener(item, index);
+            });
+        };
+        /**
+         * Handle item-loaded event on mg-item-more element
+         */
+        this.handleItemLoaded = () => {
+            this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
+        };
+        /**
+         * render mg-item-more
+         */
+        this.renderMgItemMore = () => {
+            // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
+            // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
+            const item = 'mg-item-more';
+            const mgItemMore = document.createElement(item);
+            Object.assign(mgItemMore, this.itemmore);
+            mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
+            this.element.appendChild(mgItemMore);
+        };
+        this.label = undefined;
+        this.direction = Direction.HORIZONTAL;
+        this.itemmore = undefined;
+        this.size = 'regular';
+        this.isChildMenu = undefined;
+    }
+    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}.`);
+        }
+    }
+    validateItemMore(newValue) {
+        if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
+            throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
+        }
+    }
+    validateSize(newValue) {
+        if (!sizes.includes(newValue)) {
+            throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}.`);
+        }
+    }
     /*************
-     * Methods *
+     * Lifecycle *
      *************/
     /**
-     * Close matching menu-item
-     * @param item - menu-item to close
-     * @param condition - addionnal condition
-     */
-    this.closeMenuItem = (item, condition) => {
-      if (!this.isChildMenu && condition) {
-        item.expanded = false;
-      }
-    };
-    /**
-     * get mg-item-more element
-     * @returns mg-item-more element
-     */
-    this.getItemMore = () => this.element.querySelector('mg-item-more');
-    /**
-     * get mg-item-more child mg-menu-item element
-     * @returns mg-menu-item element
+     * Validate props
      */
-    this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
-    /**
-     * Set item listend
-     * @param item - mg-menu-item element
-     * @param index - number
-     */
-    this.setItemListener = (item, index) => {
-      ['click', 'focus'].forEach(trigger => {
-        (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
-          this.focusedMenuItem = index;
-          // reset expanded on previous active menu item
-          (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
-            this.closeMenuItem(item, index !== this.focusedMenuItem);
-          });
-        });
-      });
-    };
+    componentWillLoad() {
+        this.validateDirection(this.direction);
+        this.validateLabel(this.label);
+        this.validateItemMore(this.itemmore);
+        this.validateSize(this.size);
+    }
     /**
-     * Store menu-items on component init and add listeners
+     * Check if component slots configuration
+     * @returns timeout
      */
-    this.initMenuItemsListeners = () => {
-      // add listeners on menu item and edit index
-      this.menuItems.forEach((item, index) => {
-        this.setItemListener(item, index);
-      });
-    };
+    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;
+            // add mg-item-more to manage OverflowBehavior
+            if (this.direction === Direction.HORIZONTAL && !this.isChildMenu)
+                this.renderMgItemMore();
+            // use mutation observer to improve reactivity
+            new MutationObserver(entries => {
+                const mgItemMore = this.getItemMore();
+                // prevent infinit loop by exclude mg-item-more deletion entry
+                if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
+                    return;
+                else if (mgItemMore !== null) {
+                    // render a new mg-item-more
+                    mgItemMore.remove();
+                    mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);
+                    this.renderMgItemMore();
+                }
+            }).observe(this.element, { childList: true, characterData: true, subtree: true });
+        }, 0);
+    }
     /**
-     * Handle item-loaded event on mg-item-more element
+     * Add listeners to items
      */
-    this.handleItemLoaded = () => {
-      this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
-    };
+    componentDidRender() {
+        this.initMenuItemsListeners();
+    }
     /**
-     * render mg-item-more
+     * Render
+     * @returns HTML Element
      */
-    this.renderMgItemMore = () => {
-      // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
-      // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
-      const item = 'mg-item-more';
-      const mgItemMore = document.createElement(item);
-      Object.assign(mgItemMore, this.itemmore);
-      mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
-      this.element.appendChild(mgItemMore);
-    };
-    this.label = undefined;
-    this.direction = Direction.HORIZONTAL;
-    this.itemmore = undefined;
-    this.size = 'regular';
-    this.isChildMenu = undefined;
-  }
-  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}.`);
+    render() {
+        return (h(Host, { role: "list", "aria-label": this.label }, h("slot", null)));
     }
-  }
-  validateItemMore(newValue) {
-    if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
-      throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
+    static get is() { return "mg-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css"]
+        };
     }
-  }
-  validateSize(newValue) {
-    if (!sizes.includes(newValue)) {
-      throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}.`);
+    static get styleUrls() {
+        return {
+            "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css"]
+        };
     }
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Validate props
-   */
-  componentWillLoad() {
-    this.validateDirection(this.direction);
-    this.validateLabel(this.label);
-    this.validateItemMore(this.itemmore);
-    this.validateSize(this.size);
-  }
-  /**
-   * Check if component slots configuration
-   * @returns 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;
-      // add mg-item-more to manage OverflowBehavior
-      if (this.direction === Direction.HORIZONTAL && !this.isChildMenu)
-        this.renderMgItemMore();
-      // use mutation observer to improve reactivity
-      new MutationObserver(entries => {
-        const mgItemMore = this.getItemMore();
-        // prevent infinit loop by exclude mg-item-more deletion entry
-        if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
-          return;
-        else if (mgItemMore !== null) {
-          // render a new mg-item-more
-          mgItemMore.remove();
-          mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);
-          this.renderMgItemMore();
-        }
-      }).observe(this.element, { childList: true, characterData: true, subtree: true });
-    }, 0);
-  }
-  /**
-   * Add listeners to items
-   */
-  componentDidRender() {
-    this.initMenuItemsListeners();
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h(Host, { role: "list", "aria-label": this.label }, h("slot", null)));
-  }
-  static get is() { return "mg-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Menu label. Include short menu description.\nRequired for accessibility"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "direction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Direction",
-          "resolved": "Direction.HORIZONTAL | Direction.VERTICAL",
-          "references": {
-            "Direction": {
-              "location": "import",
-              "path": "./mg-menu.conf",
-              "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::Direction"
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Menu label. Include short menu description.\nRequired for accessibility"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Direction",
+                    "resolved": "Direction.HORIZONTAL | Direction.VERTICAL",
+                    "references": {
+                        "Direction": {
+                            "location": "import",
+                            "path": "./mg-menu.conf",
+                            "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::Direction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Component display direction."
+                },
+                "attribute": "direction",
+                "reflect": true,
+                "defaultValue": "Direction.HORIZONTAL"
+            },
+            "itemmore": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ItemMoreType",
+                    "resolved": "{ size: \"regular\" | \"medium\" | \"large\"; icon: IconType; slotlabel: SlotLabelType; }",
+                    "references": {
+                        "ItemMoreType": {
+                            "location": "import",
+                            "path": "./mg-menu.conf",
+                            "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::ItemMoreType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize \"mg-item-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",
+                            "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::MenuSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define mg-menu size"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'regular'"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Component display direction."
-        },
-        "attribute": "direction",
-        "reflect": true,
-        "defaultValue": "Direction.HORIZONTAL"
-      },
-      "itemmore": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "ItemMoreType",
-          "resolved": "{ size: \"regular\" | \"medium\" | \"large\"; icon: IconType; slotlabel: SlotLabelType; }",
-          "references": {
-            "ItemMoreType": {
-              "location": "import",
-              "path": "./mg-menu.conf",
-              "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::ItemMoreType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Customize \"mg-item-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",
-              "id": "src/components/molecules/menu/mg-menu/mg-menu.conf.ts::MenuSizeType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define mg-menu size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'regular'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isChildMenu": {}
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "label",
-        "methodName": "validateLabel"
-      }, {
-        "propName": "direction",
-        "methodName": "validateDirection"
-      }, {
-        "propName": "itemmore",
-        "methodName": "validateItemMore"
-      }, {
-        "propName": "size",
-        "methodName": "validateSize"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isChildMenu": {}
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "validateLabel"
+            }, {
+                "propName": "direction",
+                "methodName": "validateDirection"
+            }, {
+                "propName": "itemmore",
+                "methodName": "validateItemMore"
+            }, {
+                "propName": "size",
+                "methodName": "validateSize"
+            }];
+    }
 }
 //# sourceMappingURL=mg-menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n  tag: 'mg-menu',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n  shadow: true,\n})\nexport class MgMenu {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu';\n  private menuItems: HTMLMgMenuItemElement[] = [];\n  private focusedMenuItem = 0;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuElement;\n\n  /**\n   * Menu label. Include short menu description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgMenu['label']): void {\n    if (newValue === undefined) {\n      throw new Error(`<${this.name}> prop \"label\" is required.`);\n    }\n  }\n\n  /**\n   * Component display direction.\n   */\n  @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n  @Watch('direction')\n  validateDirection(newValue: MgMenu['direction']): void {\n    if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n    }\n  }\n\n  /**\n   * Customize \"mg-item-more\" element\n   * Used with direction: 'vertical' to manage overflow\n   */\n  @Prop() itemmore: ItemMoreType;\n  @Watch('itemmore')\n  validateItemMore(newValue: MgMenu['itemmore']): void {\n    if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n      throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n    }\n  }\n\n  /**\n   * Define mg-menu size\n   */\n  @Prop() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenu['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n    }\n  }\n\n  /**\n   * is this menu a child menu. Used for conditional render.\n   */\n  @State() isChildMenu: boolean;\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Close matching menu-item\n   * @param item - menu-item to close\n   * @param condition - addionnal condition\n   */\n  private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n    if (!this.isChildMenu && condition) {\n      item.expanded = false;\n    }\n  };\n\n  /**\n   * get mg-item-more element\n   * @returns mg-item-more element\n   */\n  private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n  /**\n   * get mg-item-more child mg-menu-item element\n   * @returns mg-menu-item element\n   */\n  private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n  /**\n   * Set item listend\n   * @param item - mg-menu-item element\n   * @param index - number\n   */\n  private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n    ['click', 'focus'].forEach(trigger => {\n      (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n        this.focusedMenuItem = index;\n        // reset expanded on previous active menu item\n        (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n          this.closeMenuItem(item, index !== this.focusedMenuItem);\n        });\n      });\n    });\n  };\n\n  /**\n   * Store menu-items on component init and add listeners\n   */\n  private initMenuItemsListeners = (): void => {\n    // add listeners on menu item and edit index\n    this.menuItems.forEach((item, index) => {\n      this.setItemListener(item, index);\n    });\n  };\n\n  /**\n   * Handle item-loaded event on mg-item-more element\n   */\n  private handleItemLoaded = (): void => {\n    this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n  };\n\n  /**\n   * render mg-item-more\n   */\n  private renderMgItemMore = (): void => {\n    // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n    // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n    const item = 'mg-item-more';\n    const mgItemMore = document.createElement(item);\n    Object.assign(mgItemMore, this.itemmore);\n    mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n    this.element.appendChild(mgItemMore);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.validateDirection(this.direction);\n    this.validateLabel(this.label);\n    this.validateItemMore(this.itemmore);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // update props and states after componentDidLoad hook\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      // store all menu-items\n      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n      // add mg-item-more to manage OverflowBehavior\n      if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n      // use mutation observer to improve reactivity\n      new MutationObserver(entries => {\n        const mgItemMore = this.getItemMore();\n        // prevent infinit loop by exclude mg-item-more deletion entry\n        if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n        else if (mgItemMore !== null) {\n          // render a new mg-item-more\n          mgItemMore.remove();\n          mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n          this.renderMgItemMore();\n        }\n      }).observe(this.element, { childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Add listeners to items\n   */\n  componentDidRender(): void {\n    this.initMenuItemsListeners();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"list\" aria-label={this.label}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-menu.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu/mg-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch, Host } from '@stencil/core';\nimport { Direction, sizes } from './mg-menu.conf';\nimport type { MenuSizeType, ItemMoreType } from './mg-menu.conf';\n\n@Component({\n  tag: 'mg-menu',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu.css',\n  shadow: true,\n})\nexport class MgMenu {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu';\n  private menuItems: HTMLMgMenuItemElement[] = [];\n  private focusedMenuItem = 0;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuElement;\n\n  /**\n   * Menu label. Include short menu description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgMenu['label']): void {\n    if (newValue === undefined) {\n      throw new Error(`<${this.name}> prop \"label\" is required.`);\n    }\n  }\n\n  /**\n   * Component display direction.\n   */\n  @Prop({ reflect: true }) direction: Direction = Direction.HORIZONTAL;\n  @Watch('direction')\n  validateDirection(newValue: MgMenu['direction']): void {\n    if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"direction\" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);\n    }\n  }\n\n  /**\n   * Customize \"mg-item-more\" element\n   * Used with direction: 'vertical' to manage overflow\n   */\n  @Prop() itemmore: ItemMoreType;\n  @Watch('itemmore')\n  validateItemMore(newValue: MgMenu['itemmore']): void {\n    if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {\n      throw new Error(`<${this.name}> prop \"itemmore\" must be paired with direction ${Direction.HORIZONTAL}.`);\n    }\n  }\n\n  /**\n   * Define mg-menu size\n   */\n  @Prop() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenu['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<${this.name}> prop \"size\" must be one of: ${sizes.join(', ')}.`);\n    }\n  }\n\n  /**\n   * is this menu a child menu. Used for conditional render.\n   */\n  @State() isChildMenu: boolean;\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Close matching menu-item\n   * @param item - menu-item to close\n   * @param condition - addionnal condition\n   */\n  private closeMenuItem = (item: HTMLMgMenuItemElement, condition: boolean): void => {\n    if (!this.isChildMenu && condition) {\n      item.expanded = false;\n    }\n  };\n\n  /**\n   * get mg-item-more element\n   * @returns mg-item-more element\n   */\n  private getItemMore = (): HTMLMgItemMoreElement => this.element.querySelector('mg-item-more');\n\n  /**\n   * get mg-item-more child mg-menu-item element\n   * @returns mg-menu-item element\n   */\n  private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.getItemMore()?.shadowRoot?.querySelector('mg-menu-item');\n\n  /**\n   * Set item listend\n   * @param item - mg-menu-item element\n   * @param index - number\n   */\n  private setItemListener = (item: HTMLMgMenuItemElement, index: MgMenu['focusedMenuItem']): void => {\n    ['click', 'focus'].forEach(trigger => {\n      (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {\n        this.focusedMenuItem = index;\n        // reset expanded on previous active menu item\n        (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {\n          this.closeMenuItem(item, index !== this.focusedMenuItem);\n        });\n      });\n    });\n  };\n\n  /**\n   * Store menu-items on component init and add listeners\n   */\n  private initMenuItemsListeners = (): void => {\n    // add listeners on menu item and edit index\n    this.menuItems.forEach((item, index) => {\n      this.setItemListener(item, index);\n    });\n  };\n\n  /**\n   * Handle item-loaded event on mg-item-more element\n   */\n  private handleItemLoaded = (): void => {\n    this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);\n  };\n\n  /**\n   * render mg-item-more\n   */\n  private renderMgItemMore = (): void => {\n    // /!\\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement\n    // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.\n    const item = 'mg-item-more';\n    const mgItemMore = document.createElement(item);\n    Object.assign(mgItemMore, this.itemmore);\n    mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n    this.element.appendChild(mgItemMore);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.validateDirection(this.direction);\n    this.validateLabel(this.label);\n    this.validateItemMore(this.itemmore);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // update props and states after componentDidLoad hook\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      // store all menu-items\n      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.isChildMenu = this.element.closest('mg-menu-item') !== null;\n\n      // add mg-item-more to manage OverflowBehavior\n      if (this.direction === Direction.HORIZONTAL && !this.isChildMenu) this.renderMgItemMore();\n\n      // use mutation observer to improve reactivity\n      new MutationObserver(entries => {\n        const mgItemMore = this.getItemMore();\n        // prevent infinit loop by exclude mg-item-more deletion entry\n        if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE'))) return;\n        else if (mgItemMore !== null) {\n          // render a new mg-item-more\n          mgItemMore.remove();\n          mgItemMore.removeEventListener('item-loaded', this.handleItemLoaded);\n          this.renderMgItemMore();\n        }\n      }).observe(this.element, { childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Add listeners to items\n   */\n  componentDidRender(): void {\n    this.initMenuItemsListeners();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"list\" aria-label={this.label}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -3,17 +3,17 @@
  */
 export var ElementPosition;
 (function (ElementPosition) {
-  ElementPosition["FIRST"] = "first";
-  ElementPosition["LAST"] = "last";
+    ElementPosition["FIRST"] = "first";
+    ElementPosition["LAST"] = "last";
 })(ElementPosition || (ElementPosition = {}));
 /**
  * Available menu item status
  */
 export var Status;
 (function (Status) {
-  Status["VISIBLE"] = "visible";
-  Status["HIDDEN"] = "hidden";
-  Status["DISABLED"] = "disabled";
-  Status["ACTIVE"] = "active";
+    Status["VISIBLE"] = "visible";
+    Status["HIDDEN"] = "hidden";
+    Status["DISABLED"] = "disabled";
+    Status["ACTIVE"] = "active";
 })(Status || (Status = {}));
 //# sourceMappingURL=mg-menu-item.conf.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mg-menu-item.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;EACzB,kCAAe,CAAA;EACf,gCAAa,CAAA;AACf,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,MAKX;AALD,WAAY,MAAM;EAChB,6BAAmB,CAAA;EACnB,2BAAiB,CAAA;EACjB,+BAAqB,CAAA;EACrB,2BAAiB,CAAA;AACnB,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB","sourcesContent":["import { MgMenu } from '../mg-menu/mg-menu';\n\n/**\n * Available menu-item positions\n */\nexport enum ElementPosition {\n  FIRST = 'first',\n  LAST = 'last',\n}\n\n/**\n * Available menu item status\n */\nexport enum Status {\n  VISIBLE = 'visible',\n  HIDDEN = 'hidden',\n  DISABLED = 'disabled',\n  ACTIVE = 'active',\n}\n\n/**\n * Direction type\n */\nexport type DirectionType = MgMenu['direction'];\n"]}
+{"version":3,"file":"mg-menu-item.conf.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.conf.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAN,IAAY,eAGX;AAHD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,gCAAa,CAAA;AACf,CAAC,EAHW,eAAe,KAAf,eAAe,QAG1B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,MAKX;AALD,WAAY,MAAM;IAChB,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,+BAAqB,CAAA;IACrB,2BAAiB,CAAA;AACnB,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB","sourcesContent":["import { MgMenu } from '../mg-menu/mg-menu';\n\n/**\n * Available menu-item positions\n */\nexport enum ElementPosition {\n  FIRST = 'first',\n  LAST = 'last',\n}\n\n/**\n * Available menu item status\n */\nexport enum Status {\n  VISIBLE = 'visible',\n  HIDDEN = 'hidden',\n  DISABLED = 'disabled',\n  ACTIVE = 'active',\n}\n\n/**\n * Direction type\n */\nexport type DirectionType = MgMenu['direction'];\n"]}