@mgdis/mg-components 5.27.2 → 5.27.3

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

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e27c7ae.js');
+const index = require('./index-7bb96ccc.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
- Stencil Client Patch Browser v4.16.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.18.0 | MIT Licensed | https://stenciljs.com
  */
-const patchBrowser = () => {
-    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mg-components.cjs.js', document.baseURI).href));
-    const opts = {};
-    if (importMeta !== '') {
-        opts.resourcesUrl = new URL('.', importMeta).href;
-    }
-    return index.promiseResolve(opts);
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mg-components.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
 };
 
 patchBrowser().then(async (options) => {

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

@@ -1 +1 @@
-{"file":"mg-components.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAGA,MAAM,YAAY,GAAG,MAAM;AAa3B,IAAI,MAAM,UAAU,GAAG,+MAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAClF,IAAI,IAAI,UAAU,KAAK,EAAE,EAAE;AAC3B,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D,KAAK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACpBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/.pnpm/@stencil+core@4.16.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.16.0 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, doc, promiseResolve, H } from '@stencil/core';\nconst patchBrowser = () => {\n    // NOTE!! This fn cannot use async/await!\n    if (BUILD.isDev && !BUILD.isTesting) {\n        consoleDevInfo('Running in development mode.');\n    }\n    if (BUILD.cloneNodeFix) {\n        // opted-in to polyfill cloneNode() for slot polyfilled components\n        patchCloneNodeFix(H.prototype);\n    }\n    const scriptElm = BUILD.scriptDataOpts\n        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n            s.getAttribute('data-stencil-namespace') === NAMESPACE)\n        : null;\n    const importMeta = import.meta.url;\n    const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n    if (importMeta !== '') {\n        opts.resourcesUrl = new URL('.', importMeta).href;\n    }\n    return promiseResolve(opts);\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n    HTMLElementPrototype.cloneNode = function (deep) {\n        if (this.nodeName === 'TEMPLATE') {\n            return nativeCloneNodeFn.call(this, deep);\n        }\n        const clonedNode = nativeCloneNodeFn.call(this, false);\n        const srcChildNodes = this.childNodes;\n        if (deep) {\n            for (let i = 0; i < srcChildNodes.length; i++) {\n                // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n                if (srcChildNodes[i].nodeType !== 2) {\n                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n                }\n            }\n        }\n        return clonedNode;\n    };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
+{"file":"mg-components.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,+MAAe,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../../node_modules/.pnpm/@stencil+core@4.18.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.18.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/cjs/mg-loader.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7e27c7ae.js');
-const index$1 = require('./index-00072168.js');
+const index = require('./index-7bb96ccc.js');
+const index$1 = require('./index-8e9b0d9b.js');
 
 const mgLoaderCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host{display:block}.mg-c-loader{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;text-align:center}";
 const MgLoaderStyle0 = mgLoaderCss;
@@ -15,7 +15,7 @@ const MgLoader = class {
         this.messageHide = undefined;
     }
     watchMessage(newValue) {
-        if (newValue && !index$1.Ne(newValue))
+        if (newValue && !index$1.Pe(newValue))
             throw new Error('<mg-loader> prop "message" must be a valid string.');
     }
     /*************

package/dist/collection/collection-manifest.json

@@ -40,7 +40,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.16.0",
+    "version": "4.18.0",
     "typescriptVersion": "5.4.5"
   },
   "collections": [],

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

@@ -24,16 +24,11 @@ export class MgMenu {
                 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'); };
+        this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.itemMoreElement) === 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
@@ -69,20 +64,25 @@ export class MgMenu {
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
-            if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {
+            if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {
                 return;
             }
-            // /!\ 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.
-            let mgItemMore = this.getItemMore();
-            if (!mgItemMore) {
-                mgItemMore = document.createElement('mg-item-more');
-                mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);
-                Object.assign(mgItemMore, this.itemmore || {});
-                this.element.appendChild(mgItemMore);
+            // Insert mg-item-more outside the mg-menu shadowdom
+            if (!this.itemMoreElement) {
+                this.itemMoreElement = document.createElement('mg-item-more');
+                this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);
+                this.element.appendChild(this.itemMoreElement);
             }
-            else {
-                Object.defineProperties(mgItemMore, this.itemmore || {});
+            // update mg-item-more props
+            for (const attribute in this.itemmore) {
+                const newValue = this.itemmore[attribute];
+                // to improve rendering we use HTML attributes as much as possible
+                if (['string', 'number'].includes(typeof newValue)) {
+                    this.itemMoreElement.setAttribute(attribute, newValue);
+                }
+                else {
+                    this.itemMoreElement[attribute] = newValue;
+                }
             }
         };
         this.label = undefined;
@@ -105,6 +105,9 @@ export class MgMenu {
         if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
             throw new Error(`<${this.name}> prop "itemmore" must be paired with direction ${Direction.HORIZONTAL}.`);
         }
+        else if (newValue) {
+            this.renderMgItemMore();
+        }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
@@ -155,7 +158,7 @@ export class MgMenu {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'a5fe4a1a61b4255cc9a06217f30ef2f154fd797d', role: "list", "aria-label": this.label }, h("slot", { key: '37de5388d1cca3fa46dfbb73ab26ba6e299940b5' })));
+        return (h(Host, { key: 'a29897d754b7cbb34cc8d63b5ecb025c0d252e12', role: "list", "aria-label": this.label }, h("slot", { key: '7fc9dbd765f529e17f0c7ca2012d1b6bf86a05d9' })));
     }
     static get is() { return "mg-menu"; }
     static get encapsulation() { return "shadow"; }

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/**\n * @slot - Menu content\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,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    if (this.direction !== Direction.HORIZONTAL || this.isChildMenu) {\n      return;\n    }\n\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    let mgItemMore = this.getItemMore();\n    if (!mgItemMore) {\n      mgItemMore = document.createElement('mg-item-more');\n      mgItemMore.addEventListener('item-loaded', this.handleItemLoaded);\n      Object.assign(mgItemMore, this.itemmore || {});\n      this.element.appendChild(mgItemMore);\n    } else {\n      Object.defineProperties(mgItemMore, this.itemmore || {});\n    }\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      // when all props, states and DOM are already rendered we can render the mg-item-more\n      this.renderMgItemMore();\n      // then use mutation observer on children to improve reactivity\n      new MutationObserver(() => {\n        this.renderMgItemMore();\n      }).observe(this.element, { childList: true });\n    });\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/**\n * @slot - Menu content\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  private itemMoreElement: HTMLMgItemMoreElement;\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    } else if (newValue) {\n      this.renderMgItemMore();\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 child mg-menu-item element\n   * @returns mg-menu-item element\n   */\n  private getItemMoreMenuItem = (): HTMLMgMenuItemElement => this.itemMoreElement?.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,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    if (this.direction !== Direction.HORIZONTAL || this.isChildMenu || this.element.children.length <= 1) {\n      return;\n    }\n\n    // Insert mg-item-more outside the mg-menu shadowdom\n    if (!this.itemMoreElement) {\n      this.itemMoreElement = document.createElement('mg-item-more');\n      this.itemMoreElement.addEventListener('item-loaded', this.handleItemLoaded);\n      this.element.appendChild(this.itemMoreElement);\n    }\n\n    // update mg-item-more props\n    for (const attribute in this.itemmore) {\n      const newValue = this.itemmore[attribute];\n      // to improve rendering we use HTML attributes as much as possible\n      if (['string', 'number'].includes(typeof newValue)) {\n        this.itemMoreElement.setAttribute(attribute, newValue);\n      } else {\n        this.itemMoreElement[attribute] = newValue;\n      }\n    }\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      // when all props, states and DOM are already rendered we can render the mg-item-more\n      this.renderMgItemMore();\n      // then use mutation observer on children to improve reactivity\n      new MutationObserver(() => {\n        this.renderMgItemMore();\n      }).observe(this.element, { childList: true });\n    });\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.js

@@ -304,7 +304,8 @@ export class MgMenuItem {
             ['mg-c-menu-item__collapse-container']: true,
             ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
         });
-        return (h(Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+        return (h(Host, { key: '10b41e1b90d01a0f0df082cd9fc50884e87c2e59', role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier(), "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
+        }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
         ])));

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

@@ -1 +1 @@
-{"version":3,"file":"mg-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValidString, nextTick } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { Direction } from '../mg-menu/mg-menu.conf';\nimport { Status, targets } from './mg-menu-item.conf';\nimport type { MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport type { DirectionType, TargetType } from './mg-menu-item.conf';\nimport type { MgPopover } from '../../mg-popover/mg-popover';\nimport type { MessageType } from '../../../../locales/index.conf';\n\n/**\n * @slot - Menu item content\n * @slot image - Menu item image content\n * @slot label - Menu item label content\n * @slot information - Menu item information content\n * @slot metadata - Menu item metadata content\n */\n@Component({\n  tag: 'mg-menu-item',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css',\n  shadow: true,\n})\nexport class MgMenuItem {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu-item';\n  private readonly navigationButton = 'mg-c-menu-item__navigation-button';\n  private messages: MessageType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuItemElement;\n\n  /************\n   * Props *\n   ************/\n\n  /**\n   * Identifier is used to control mg-popover\n   */\n  @Prop() identifier = createID('mg-menu-item');\n\n  /**\n   * Define menu-item href\n   * when defined menu-item contain an anchor instead of button\n   */\n  @Prop() href?: string;\n\n  /**\n   * Define target type\n   */\n  @Prop() target?: TargetType;\n  @Watch('target')\n  watchTarget(newValue: MgMenuItem['target']): void {\n    if (newValue && !targets.includes(newValue)) {\n      throw new Error(`<mg-link> prop \"target\" must be one of: ${targets.join(', ')}`);\n    }\n  }\n\n  /**\n   * Define menu-item status.\n   */\n  @Prop({ reflect: true, mutable: true }) status?: Status = Status.VISIBLE;\n  @Watch('status')\n  validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n    if (oldValue !== undefined) {\n      this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n    }\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    this.statusChange.emit(newValue);\n  }\n\n  /**\n   * Define menu-item content expanded.\n   */\n  @Prop({ mutable: true }) expanded? = false;\n  @Watch('expanded')\n  validateExpanded(newValue: MgMenuItem['expanded']): void {\n    if (typeof newValue !== 'boolean') throw new Error(`<${this.name}> prop \"expanded\" must be a boolean.`);\n\n    // if menu-item has sub-menu we have to apply some updates:\n    if (this.hasChildren) {\n      const subItems = Array.from(this.element.querySelectorAll(this.name));\n      if (!newValue) {\n        // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content\n        subItems.forEach(item => {\n          item.expanded = false;\n        });\n      } else if (this.element.querySelector(`${this.name}[status=\"${Status.ACTIVE}\"]`) !== null) {\n        // - when expanded and contain an active item parents are expended too\n        subItems.forEach(item => {\n          if (this.hasStatus(item, Status.ACTIVE)) {\n            item.expanded = true;\n          }\n        });\n      }\n    }\n  }\n\n  /**********\n   * Events *\n   *********/\n\n  /**\n   * Emited event when status change\n   */\n  @Event({ eventName: 'status-change' }) statusChange: EventEmitter<HTMLMgMenuItemElement['status']>;\n\n  /**\n   * Emited event when item is loaded\n   */\n  @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n  /**\n   * Emited event when item is updated\n   */\n  @Event({ eventName: 'item-updated' }) itemUpdated: EventEmitter<void>;\n\n  /**********\n   * States *\n   *********/\n\n  /**\n   * Define menu-item size.\n   */\n  @State() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n  }\n\n  /**\n   * Component button classes\n   */\n  @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n  /**\n   * Parent menu direction\n   */\n  @State() direction: DirectionType;\n  @Watch('direction')\n  validateDirection(newValue: MgMenuItem['direction']): void {\n    // manage menu items style depending to parent menu horientation\n    this.element.setAttribute('data-style-direction', newValue);\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    // manage all sub levels child menu-items level with data-level attribut\n    if (this.isDirection(Direction.VERTICAL, newValue)) {\n      Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n      });\n    }\n  }\n\n  /**\n   * Does component is in main menu\n   */\n  @State() isInMainMenu: boolean;\n\n  /**\n   * Does element is item-more\n   */\n  @State() isItemMore: boolean;\n\n  /**\n   * Does component have children.\n   */\n  @State() hasChildren = false;\n  @Watch('hasChildren')\n  validateHasChildren(newValue: boolean): void {\n    if (newValue && this.element.href !== undefined) {\n      throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n    }\n  }\n\n  /**\n   * Does component should display notification badge.\n   */\n  @State() displayNotificationBadge: boolean;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Toggle expanded prop value\n   */\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Does an Element have given Status\n   * @param mgMenuItemElement - to parse\n   * @param status - to check\n   * @returns true if element with status is found\n   */\n  private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n  /**\n   * Is component contextual direction match the given direction\n   * @param direction - in parent menu\n   * @param compareWith - direction to compare with. Default: `this.direction`\n   * @returns true is direction match the direction propertie\n   */\n  private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n  /**\n   * Update displayNotificationBadge\n   * current component notification badge have priority over the slot badge when submenu contain badge\n   */\n  private updateDisplayNotificationBadge = (): void => {\n    const childMenu = this.element.querySelector('mg-menu');\n    this.displayNotificationBadge =\n      childMenu !== null &&\n      Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n  };\n\n  /**\n   * Method to control if one of component children have active status\n   * @returns truthy if component has active child\n   */\n  private hasActiveChild = (): boolean =>\n    Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n      (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n    );\n\n  /**\n   * Validate slots\n   * @param guard - prevent action with guard. Default: false.\n   */\n  private validateSlot = (guard = false): void => {\n    // slot title AND metadata validation\n    // add title on label AND metada slots due to text-overflow on these element\n    if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n    ['label', 'metadata'].forEach(slot => {\n      Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n        if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n        if ((guard && element.getAttribute('title') === null) || !guard) element.setAttribute('title', element.textContent);\n      });\n    });\n  };\n\n  /**\n   * Update status\n   * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n   */\n  private updateStatus = (guard = []): void => {\n    if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n      this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n    }\n  };\n\n  /**\n   * Init event-listeners\n   */\n  private initListeners = (): void => {\n    // manage first sub-level menu-items\n    Array.from(this.element.querySelector('mg-menu')?.children || []).forEach(item => {\n      if (item.nodeName === 'MG-MENU-ITEM') {\n        // manage child menu listener\n        item.addEventListener('status-change', () => {\n          this.updateStatus();\n        });\n      }\n    });\n  };\n\n  /**\n   * Get mg-popover identifier\n   * @returns generated mg-popover identifier\n   */\n  private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n  /**\n   * Render popover clickoutside guard for content slot\n   */\n  private updatePopoverGuard(): void {\n    if (this.displayPopover())\n      Array.from(this.element.children)\n        .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n        .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n  }\n\n  /**\n   * Condition to know if component should display a mg-popover\n   * @returns truthy if component display popover\n   */\n  private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Handle interacrtive element click\n   * @param event - click on element\n   */\n  private handleElementCLick = (event: MouseEvent): void => {\n    if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // toggle expanded when mg-menu-item has child items\n    if (this.hasChildren) this.toggleExpanded();\n  };\n\n  /**\n   * Handle popover element display-change event\n   * @param event - popover display event\n   */\n  private handlePopoverDisplay = (event: CustomEvent): void => {\n    this.expanded = event.detail;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n    // we store only matching elements\n    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n    this.messages = initLocales(this.element).messages.menuItem as MessageType;\n    this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n    // Validate props\n    this.validateStatus(this.status);\n    this.validateExpanded(this.expanded);\n    this.watchTarget(this.target);\n\n    // Validate states\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // validation\n    this.validateSlot(true);\n\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      // define menu-item context states\n      const menu = this.element.closest('mg-menu');\n      this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;\n      this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n      if (menu?.size !== undefined) this.size = menu.size;\n\n      if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n      // when main menu item contain an active item it will get the active style\n      // AND if item is in vertical menu it will be expanded\n      if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n      this.updateStatus([Status.ACTIVE]);\n      this.updateDisplayNotificationBadge();\n      this.updatePopoverGuard();\n\n      // manage child dom changes with mutationObserver and listzners\n      this.initListeners();\n\n      // emit loaded event when component is fully loaded\n      this.itemLoaded.emit();\n\n      new MutationObserver(mutationsList => {\n        if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus([Status.ACTIVE]);\n        if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n        this.updateDisplayNotificationBadge();\n        this.itemUpdated.emit();\n      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Render ineractive element\n   * @returns HTML Element\n   */\n  private renderInteractiveElement(): HTMLElement {\n    const TagName: string = this.href !== undefined ? 'a' : 'button';\n    return (\n      <TagName\n        href={this.href}\n        class={this.navigationButtonClassList.join()}\n        tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n        disabled={this.status === Status.DISABLED}\n        hidden={this.status === Status.HIDDEN}\n        target={this.href && this.target ? this.target : undefined}\n        aria-expanded={this.hasChildren && this.expanded.toString()}\n        aria-current={this.status === Status.ACTIVE && 'page'}\n        onClick={this.handleElementCLick}\n      >\n        <slot name=\"image\"></slot>\n        <div class={`${this.navigationButton}-center`}>\n          <div class={`${this.navigationButton}-text-content`}>\n            <slot name=\"label\"></slot>\n            {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n            {this.displayNotificationBadge && (\n              <span class={`${this.navigationButton}-text-content-notification`}>\n                <mg-badge label={this.messages.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n              </span>\n            )}\n            {this.target === '_blank' && [\n              <mg-icon key=\"icon-new-tab\" class={`${this.navigationButton}-new-tab`} icon=\"arrow-up-right-square\"></mg-icon>,\n              <span key=\"a11y-new-tab\" class=\"mg-u-visually-hidden\">\n                {this.messages.openNewTab}\n              </span>,\n            ]}\n          </div>\n          {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n        </div>\n        {this.hasChildren && this.href === undefined && (\n          <span\n            class={{\n              [`${this.navigationButton}-chevron`]: true,\n              [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n            }}\n          >\n            <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n\n  /**\n   * Render slot\n   * @returns HTML Element\n   */\n  private renderSlot = (): HTMLElement => <slot></slot>;\n\n  /**\n   * Emit event when component is updated\n   */\n  componentShouldUpdate(): Promise<void> {\n    return nextTick(() => {\n      this.itemUpdated.emit();\n    });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getContainerClasses = () => ({\n      ['mg-c-menu-item__collapse-container']: true,\n      ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n    });\n\n    return (\n      <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n        {this.displayPopover() ? (\n          <mg-popover display={this.expanded} placement=\"bottom-start\" arrowHide={true} onDisplay-change={this.handlePopoverDisplay} identifier={this.getPopoverIdentifier()}>\n            {this.renderInteractiveElement()}\n            <div class={getContainerClasses()} slot=\"content\">\n              {this.renderSlot()}\n            </div>\n          </mg-popover>\n        ) : (\n          [\n            this.renderInteractiveElement(),\n            <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n              {this.renderSlot()}\n            </div>,\n          ]\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/molecules/menu/mg-menu-item/mg-menu-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACtF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAMtD;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;QACrB;;sBAEc;QAEG,SAAI,GAAG,cAAc,CAAC;QACtB,qBAAgB,GAAG,mCAAmC,CAAC;QA+JxE;;oBAEY;QAEZ;;WAEG;QACK,mBAAc,GAAG,GAAS,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC,CAAC;QAEF;;;;;WAKG;QACK,cAAS,GAAG,CAAC,iBAAwC,EAAE,MAA4B,EAAW,EAAE,CAAC,iBAAiB,CAAC,MAAM,KAAK,MAAM,CAAC;QAE7I;;;;;WAKG;QACK,gBAAW,GAAG,CAAC,SAAkC,EAAE,WAAW,GAAG,IAAI,CAAC,SAAS,EAAW,EAAE,CAAC,SAAS,KAAK,WAAW,CAAC;QAE/H;;;WAGG;QACK,mCAA8B,GAAG,GAAS,EAAE;YAClD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YACxD,IAAI,CAAC,wBAAwB;gBAC3B,SAAS,KAAK,IAAI;oBAClB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,OAA8B,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,IAAI,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,CAAC;QACnK,CAAC,CAAC;QAEF;;;WAGG;QACK,mBAAc,GAAG,GAAY,EAAE;;YACrC,OAAA,KAAK,CAAC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC,IAAI,CACpE,CAAC,OAA8B,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,KAAK,cAAc,IAAI,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,IAAI,CAC7J,CAAA;SAAA,CAAC;QAEJ;;;WAGG;QACK,iBAAY,GAAG,CAAC,KAAK,GAAG,KAAK,EAAQ,EAAE;YAC7C,qCAAqC;YACrC,4EAA4E;YAC5E,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC,KAAK,SAAS;gBAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6BAA6B,CAAC,CAAC;YACvK,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACnC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAAU,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;oBAC9E,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;wBAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,WAAW,IAAI,2BAA2B,CAAC,CAAC;oBAClH,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK;wBAAE,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;gBACtH,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;WAGG;QACK,iBAAY,GAAG,CAAC,KAAK,GAAG,EAAE,EAAQ,EAAE;YAC1C,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;gBACtE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;YACvE,CAAC;QACH,CAAC,CAAC;QAEF;;WAEG;QACK,kBAAa,GAAG,GAAS,EAAE;;YACjC,oCAAoC;YACpC,KAAK,CAAC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,QAAQ,KAAI,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBAC/E,IAAI,IAAI,CAAC,QAAQ,KAAK,cAAc,EAAE,CAAC;oBACrC,6BAA6B;oBAC7B,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;wBAC1C,IAAI,CAAC,YAAY,EAAE,CAAC;oBACtB,CAAC,CAAC,CAAC;gBACL,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;WAGG;QACK,yBAAoB,GAAG,GAA4B,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,UAAU,CAAC;QAY3F;;;WAGG;QACK,mBAAc,GAAG,GAAY,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC;QAE9H;;sBAEc;QAEd;;;WAGG;QACK,uBAAkB,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACvD,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,EAAE,CAAC;gBAChF,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAC1B,CAAC;YAED,oDAAoD;YACpD,IAAI,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,cAAc,EAAE,CAAC;QAC9C,CAAC,CAAC;QAEF;;;WAGG;QACK,yBAAoB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YAC1D,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAC/B,CAAC,CAAC;QAuHF;;;WAGG;QACK,eAAU,GAAG,GAAgB,EAAE,CAAC,eAAa,CAAC;0BA7YjC,QAAQ,CAAC,cAAc,CAAC;;;sBAsBa,MAAM,CAAC,OAAO;wBAanC,KAAK;oBAkDZ,SAAS;yCAUS,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;;;;2BAgC/D,KAAK;;;IAlH5B,WAAW,CAAC,QAA8B;QACxC,IAAI,QAAQ,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC5C,MAAM,IAAI,KAAK,CAAC,2CAA2C,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACnF,CAAC;IACH,CAAC;IAOD,cAAc,CAAC,QAA8B,EAAE,QAA+B;QAC5E,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE,CAAC,CAAC;QACjF,CAAC;QACD,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE,CAAC,CAAC;QAC5E,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAOD,gBAAgB,CAAC,QAAgC;QAC/C,IAAI,OAAO,QAAQ,KAAK,SAAS;YAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,sCAAsC,CAAC,CAAC;QAExG,2DAA2D;QAC3D,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACtE,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,oGAAoG;gBACpG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;gBACxB,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,IAAI,YAAY,MAAM,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC1F,sEAAsE;gBACtE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACtB,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;wBACxC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACvB,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC;IA8BD,YAAY,CAAC,QAA4B,EAAE,QAA6B;QACtE,IAAI,CAAC,yBAAyB,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,gBAAgB,UAAU,QAAQ,EAAE,CAAC,CAAC;QACpF,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,UAAU,QAAQ,EAAE,CAAC,CAAC;IACnF,CAAC;IAYD,iBAAiB,CAAC,QAAiC;QACjD,gEAAgE;QAChE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;QAC5D,IAAI,CAAC,yBAAyB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,KAAK,QAAQ,EAAE,CAAC,CAAC;QAC5E,wEAAwE;QACxE,IAAI,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE,CAAC;YACnD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACvE,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAClE,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAiBD,mBAAmB,CAAC,QAAiB;QACnC,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YAChD,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,0DAA0D,CAAC,CAAC;QAC3F,CAAC;IACH,CAAC;IAqGD;;OAEG;IACK,kBAAkB;QACxB,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;iBAC9B,MAAM,CAAC,CAAC,KAAkB,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,KAAK,CAAC,QAAQ,KAAK,SAAS,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;iBAC7H,OAAO,CAAC,CAAC,IAAiB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC,CAAC;IACnG,CAAC;IAkCD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,+FAA+F;QAC/F,kCAAkC;QAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACxJ,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,QAAuB,CAAC;QAC3E,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,KAAK,SAAS,CAAC;QAElE,iBAAiB;QACjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACjC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE9B,kBAAkB;QAClB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACH,gBAAgB;QACd,aAAa;QACb,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAExB,sDAAsD;QACtD,iEAAiE;QACjE,mEAAmE;QACnE,OAAO,UAAU,CAAC,GAAG,EAAE;YACrB,kCAAkC;YAClC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;YAC1F,IAAI,CAAC,YAAY,GAAG,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;YACjG,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,MAAK,SAAS;gBAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAEpD,IAAI,IAAI,CAAC,UAAU;gBAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAA0B,CAAC;YAEjF,0EAA0E;YAC1E,sDAAsD;YACtD,IAAI,IAAI,CAAC,cAAc,EAAE,IAAI,IAAI,CAAC,YAAY;gBAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;YAErG,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;YACnC,IAAI,CAAC,8BAA8B,EAAE,CAAC;YACtC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,+DAA+D;YAC/D,IAAI,CAAC,aAAa,EAAE,CAAC;YAErB,mDAAmD;YACnD,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YAEvB,IAAI,gBAAgB,CAAC,aAAa,CAAC,EAAE;gBACnC,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC;oBAAE,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;gBAC5G,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,eAAe,CAAC;oBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;gBAC3F,IAAI,CAAC,8BAA8B,EAAE,CAAC;gBACtC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YAC1B,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACtG,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAED;;;OAGG;IACK,wBAAwB;QAC9B,MAAM,OAAO,GAAW,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QACjE,OAAO,CACL,EAAC,OAAO,IACN,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,yBAAyB,CAAC,IAAI,EAAE,EAC5C,QAAQ,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjF,QAAQ,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,EACzC,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,EACrC,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC3C,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,kBAC7C,IAAI,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,IAAI,MAAM,EACrD,OAAO,EAAE,IAAI,CAAC,kBAAkB;YAEhC,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC1B,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,SAAS;gBAC3C,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,eAAe;oBACjD,YAAM,IAAI,EAAC,OAAO,GAAQ;oBACzB,CAAC,IAAI,CAAC,wBAAwB,IAAI,YAAM,IAAI,EAAC,aAAa,GAAQ;oBAClE,IAAI,CAAC,wBAAwB,IAAI,CAChC,YAAM,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,4BAA4B;wBAC/D,gBAAU,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,KAAK,EAAC,GAAG,EAAC,OAAO,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,GAAY,CACnG,CACR;oBACA,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI;wBAC3B,eAAS,GAAG,EAAC,cAAc,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,UAAU,EAAE,IAAI,EAAC,uBAAuB,GAAW;wBAC9G,YAAM,GAAG,EAAC,cAAc,EAAC,KAAK,EAAC,sBAAsB,IAClD,IAAI,CAAC,QAAQ,CAAC,UAAU,CACpB;qBACR,CACG;gBACL,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,YAAM,IAAI,EAAC,UAAU,GAAQ,CACrD;YACL,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC9C,YACE,KAAK,EAAE;oBACL,CAAC,GAAG,IAAI,CAAC,gBAAgB,UAAU,CAAC,EAAE,IAAI;oBAC1C,CAAC,GAAG,IAAI,CAAC,gBAAgB,kBAAkB,CAAC,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;iBACrE;gBAED,eAAS,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,GAAW,CAC/C,CACR,CACO,CACX,CAAC;IACJ,CAAC;IAQD;;OAEG;IACH,qBAAqB;QACnB,OAAO,QAAQ,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAAC;YACjC,CAAC,oCAAoC,CAAC,EAAE,IAAI;YAC5C,CAAC,iDAAiD,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC;SACtI,CAAC,CAAC;QAEH,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,IACtD,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,CACvB,kBACE,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,IAAI,sBACG,IAAI,CAAC,oBAAoB,EAC3C,UAAU,EAAE,IAAI,CAAC,oBAAoB,EAAE,6BACf,YAAY,CAAC,yEAAyE;;YAE7G,IAAI,CAAC,wBAAwB,EAAE;YAChC,WAAK,KAAK,EAAE,mBAAmB,EAAE,EAAE,IAAI,EAAC,SAAS,IAC9C,IAAI,CAAC,UAAU,EAAE,CACd,CACK,CACd,CAAC,CAAC,CAAC,CACF;YACE,IAAI,CAAC,wBAAwB,EAAE;YAC/B,WAAK,GAAG,EAAC,oBAAoB,EAAC,KAAK,EAAE,mBAAmB,EAAE,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,QAAQ,IAC/E,IAAI,CAAC,UAAU,EAAE,CACd;SACP,CACF,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Host, Watch, Element, Event, EventEmitter } from '@stencil/core';\nimport { ClassList, createID, isValidString, nextTick } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\nimport { Direction } from '../mg-menu/mg-menu.conf';\nimport { Status, targets } from './mg-menu-item.conf';\nimport type { MenuSizeType } from '../mg-menu/mg-menu.conf';\nimport type { DirectionType, TargetType } from './mg-menu-item.conf';\nimport type { MgPopover } from '../../mg-popover/mg-popover';\nimport type { MessageType } from '../../../../locales/index.conf';\n\n/**\n * @slot - Menu item content\n * @slot image - Menu item image content\n * @slot label - Menu item label content\n * @slot information - Menu item information content\n * @slot metadata - Menu item metadata content\n */\n@Component({\n  tag: 'mg-menu-item',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-menu-item.css',\n  shadow: true,\n})\nexport class MgMenuItem {\n  /************\n   * Internal *\n   ************/\n\n  private readonly name = 'mg-menu-item';\n  private readonly navigationButton = 'mg-c-menu-item__navigation-button';\n  private messages: MessageType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMenuItemElement;\n\n  /************\n   * Props *\n   ************/\n\n  /**\n   * Identifier is used to control mg-popover\n   */\n  @Prop() identifier = createID('mg-menu-item');\n\n  /**\n   * Define menu-item href\n   * when defined menu-item contain an anchor instead of button\n   */\n  @Prop() href?: string;\n\n  /**\n   * Define target type\n   */\n  @Prop() target?: TargetType;\n  @Watch('target')\n  watchTarget(newValue: MgMenuItem['target']): void {\n    if (newValue && !targets.includes(newValue)) {\n      throw new Error(`<mg-link> prop \"target\" must be one of: ${targets.join(', ')}`);\n    }\n  }\n\n  /**\n   * Define menu-item status.\n   */\n  @Prop({ reflect: true, mutable: true }) status?: Status = Status.VISIBLE;\n  @Watch('status')\n  validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void {\n    if (oldValue !== undefined) {\n      this.navigationButtonClassList.delete(`${this.navigationButton}--${oldValue}`);\n    }\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    this.statusChange.emit(newValue);\n  }\n\n  /**\n   * Define menu-item content expanded.\n   */\n  @Prop({ mutable: true }) expanded? = false;\n  @Watch('expanded')\n  validateExpanded(newValue: MgMenuItem['expanded']): void {\n    if (typeof newValue !== 'boolean') throw new Error(`<${this.name}> prop \"expanded\" must be a boolean.`);\n\n    // if menu-item has sub-menu we have to apply some updates:\n    if (this.hasChildren) {\n      const subItems = Array.from(this.element.querySelectorAll(this.name));\n      if (!newValue) {\n        // - when main menu item is NOT expanded we need NOT expanded sub-items and NOT expanded sub-content\n        subItems.forEach(item => {\n          item.expanded = false;\n        });\n      } else if (this.element.querySelector(`${this.name}[status=\"${Status.ACTIVE}\"]`) !== null) {\n        // - when expanded and contain an active item parents are expended too\n        subItems.forEach(item => {\n          if (this.hasStatus(item, Status.ACTIVE)) {\n            item.expanded = true;\n          }\n        });\n      }\n    }\n  }\n\n  /**********\n   * Events *\n   *********/\n\n  /**\n   * Emited event when status change\n   */\n  @Event({ eventName: 'status-change' }) statusChange: EventEmitter<HTMLMgMenuItemElement['status']>;\n\n  /**\n   * Emited event when item is loaded\n   */\n  @Event({ eventName: 'item-loaded' }) itemLoaded: EventEmitter<void>;\n\n  /**\n   * Emited event when item is updated\n   */\n  @Event({ eventName: 'item-updated' }) itemUpdated: EventEmitter<void>;\n\n  /**********\n   * States *\n   *********/\n\n  /**\n   * Define menu-item size.\n   */\n  @State() size: MenuSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void {\n    this.navigationButtonClassList.delete(`${this.navigationButton}--size-${oldValue}`);\n    this.navigationButtonClassList.add(`${this.navigationButton}--size-${newValue}`);\n  }\n\n  /**\n   * Component button classes\n   */\n  @State() navigationButtonClassList: ClassList = new ClassList([this.navigationButton]);\n\n  /**\n   * Parent menu direction\n   */\n  @State() direction: DirectionType;\n  @Watch('direction')\n  validateDirection(newValue: MgMenuItem['direction']): void {\n    // manage menu items style depending to parent menu horientation\n    this.element.setAttribute('data-style-direction', newValue);\n    this.navigationButtonClassList.add(`${this.navigationButton}--${newValue}`);\n    // manage all sub levels child menu-items level with data-level attribut\n    if (this.isDirection(Direction.VERTICAL, newValue)) {\n      Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {\n        item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;\n      });\n    }\n  }\n\n  /**\n   * Does component is in main menu\n   */\n  @State() isInMainMenu: boolean;\n\n  /**\n   * Does element is item-more\n   */\n  @State() isItemMore: boolean;\n\n  /**\n   * Does component have children.\n   */\n  @State() hasChildren = false;\n  @Watch('hasChildren')\n  validateHasChildren(newValue: boolean): void {\n    if (newValue && this.element.href !== undefined) {\n      throw new Error(`<${this.name}> prop \"href\" is unauthorizied when element is a parent.`);\n    }\n  }\n\n  /**\n   * Does component should display notification badge.\n   */\n  @State() displayNotificationBadge: boolean;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Toggle expanded prop value\n   */\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Does an Element have given Status\n   * @param mgMenuItemElement - to parse\n   * @param status - to check\n   * @returns true if element with status is found\n   */\n  private hasStatus = (mgMenuItemElement: HTMLMgMenuItemElement, status: MgMenuItem['status']): boolean => mgMenuItemElement.status === status;\n\n  /**\n   * Is component contextual direction match the given direction\n   * @param direction - in parent menu\n   * @param compareWith - direction to compare with. Default: `this.direction`\n   * @returns true is direction match the direction propertie\n   */\n  private isDirection = (direction: MgMenuItem['direction'], compareWith = this.direction): boolean => direction === compareWith;\n\n  /**\n   * Update displayNotificationBadge\n   * current component notification badge have priority over the slot badge when submenu contain badge\n   */\n  private updateDisplayNotificationBadge = (): void => {\n    const childMenu = this.element.querySelector('mg-menu');\n    this.displayNotificationBadge =\n      childMenu !== null &&\n      Array.from(childMenu.children).some((subItem: HTMLMgMenuItemElement) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);\n  };\n\n  /**\n   * Method to control if one of component children have active status\n   * @returns truthy if component has active child\n   */\n  private hasActiveChild = (): boolean =>\n    Array.from(this.element.querySelector('mg-menu')?.children || []).some(\n      (element: HTMLMgMenuItemElement) => element.nodeName === 'MG-MENU-ITEM' && this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null,\n    );\n\n  /**\n   * Validate slots\n   * @param guard - prevent action with guard. Default: false.\n   */\n  private validateSlot = (guard = false): void => {\n    // slot title AND metadata validation\n    // add title on label AND metada slots due to text-overflow on these element\n    if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) throw new Error(`<${this.name}> slot \"label\" is required.`);\n    ['label', 'metadata'].forEach(slot => {\n      Array.from(this.element.querySelectorAll(`[slot=\"${slot}\"]`)).forEach(element => {\n        if (!isValidString(element.textContent)) throw new Error(`<${this.name}> slot \"${slot}\" must have text content.`);\n        if ((guard && element.getAttribute('title') === null) || !guard) element.setAttribute('title', element.textContent);\n      });\n    });\n  };\n\n  /**\n   * Update status\n   * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].\n   */\n  private updateStatus = (guard = []): void => {\n    if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {\n      this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;\n    }\n  };\n\n  /**\n   * Init event-listeners\n   */\n  private initListeners = (): void => {\n    // manage first sub-level menu-items\n    Array.from(this.element.querySelector('mg-menu')?.children || []).forEach(item => {\n      if (item.nodeName === 'MG-MENU-ITEM') {\n        // manage child menu listener\n        item.addEventListener('status-change', () => {\n          this.updateStatus();\n        });\n      }\n    });\n  };\n\n  /**\n   * Get mg-popover identifier\n   * @returns generated mg-popover identifier\n   */\n  private getPopoverIdentifier = (): MgPopover['identifier'] => `${this.identifier}-popover`;\n\n  /**\n   * Render popover clickoutside guard for content slot\n   */\n  private updatePopoverGuard(): void {\n    if (this.displayPopover())\n      Array.from(this.element.children)\n        .filter((child: HTMLElement) => child.getAttribute('slot') === null && child.nodeName !== 'MG-MENU' && Boolean(child.dataset))\n        .forEach((slot: HTMLElement) => (slot.dataset.mgPopoverGuard = this.getPopoverIdentifier()));\n  }\n\n  /**\n   * Condition to know if component should display a mg-popover\n   * @returns truthy if component display popover\n   */\n  private displayPopover = (): boolean => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Handle interacrtive element click\n   * @param event - click on element\n   */\n  private handleElementCLick = (event: MouseEvent): void => {\n    if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    // toggle expanded when mg-menu-item has child items\n    if (this.hasChildren) this.toggleExpanded();\n  };\n\n  /**\n   * Handle popover element display-change event\n   * @param event - popover display event\n   */\n  private handlePopoverDisplay = (event: CustomEvent): void => {\n    this.expanded = event.detail;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element\n    // we store only matching elements\n    this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));\n    this.messages = initLocales(this.element).messages.menuItem as MessageType;\n    this.isItemMore = this.element.dataset.overflowMore !== undefined;\n\n    // Validate props\n    this.validateStatus(this.status);\n    this.validateExpanded(this.expanded);\n    this.watchTarget(this.target);\n\n    // Validate states\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Check if component slots configuration\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // validation\n    this.validateSlot(true);\n\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      // define menu-item context states\n      const menu = this.element.closest('mg-menu');\n      this.direction = this.isItemMore || menu === null ? Direction.HORIZONTAL : menu.direction;\n      this.isInMainMenu = menu !== null && this.element.parentElement.closest('mg-menu-item') === null;\n      if (menu?.size !== undefined) this.size = menu.size;\n\n      if (this.isItemMore) this.size = this.element.dataset.size as MgMenuItem['size'];\n\n      // when main menu item contain an active item it will get the active style\n      // AND if item is in vertical menu it will be expanded\n      if (this.hasActiveChild() && this.isInMainMenu) this.expanded = this.isDirection(Direction.VERTICAL);\n\n      this.updateStatus([Status.ACTIVE]);\n      this.updateDisplayNotificationBadge();\n      this.updatePopoverGuard();\n\n      // manage child dom changes with mutationObserver and listzners\n      this.initListeners();\n\n      // emit loaded event when component is fully loaded\n      this.itemLoaded.emit();\n\n      new MutationObserver(mutationsList => {\n        if (mutationsList.some(mutation => mutation.attributeName === 'hidden')) this.updateStatus([Status.ACTIVE]);\n        if (mutationsList.some(mutation => mutation.type === 'characterData')) this.validateSlot();\n        this.updateDisplayNotificationBadge();\n        this.itemUpdated.emit();\n      }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });\n    }, 0);\n  }\n\n  /**\n   * Render ineractive element\n   * @returns HTML Element\n   */\n  private renderInteractiveElement(): HTMLElement {\n    const TagName: string = this.href !== undefined ? 'a' : 'button';\n    return (\n      <TagName\n        href={this.href}\n        class={this.navigationButtonClassList.join()}\n        tabindex={[Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined}\n        disabled={this.status === Status.DISABLED}\n        hidden={this.status === Status.HIDDEN}\n        target={this.href && this.target ? this.target : undefined}\n        aria-expanded={this.hasChildren && this.expanded.toString()}\n        aria-current={this.status === Status.ACTIVE && 'page'}\n        onClick={this.handleElementCLick}\n      >\n        <slot name=\"image\"></slot>\n        <div class={`${this.navigationButton}-center`}>\n          <div class={`${this.navigationButton}-text-content`}>\n            <slot name=\"label\"></slot>\n            {!this.displayNotificationBadge && <slot name=\"information\"></slot>}\n            {this.displayNotificationBadge && (\n              <span class={`${this.navigationButton}-text-content-notification`}>\n                <mg-badge label={this.messages.badgeLabel} value=\"!\" variant=\"text-color\" slot=\"information\"></mg-badge>\n              </span>\n            )}\n            {this.target === '_blank' && [\n              <mg-icon key=\"icon-new-tab\" class={`${this.navigationButton}-new-tab`} icon=\"arrow-up-right-square\"></mg-icon>,\n              <span key=\"a11y-new-tab\" class=\"mg-u-visually-hidden\">\n                {this.messages.openNewTab}\n              </span>,\n            ]}\n          </div>\n          {this.size !== 'regular' && <slot name=\"metadata\"></slot>}\n        </div>\n        {this.hasChildren && this.href === undefined && (\n          <span\n            class={{\n              [`${this.navigationButton}-chevron`]: true,\n              [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,\n            }}\n          >\n            <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n\n  /**\n   * Render slot\n   * @returns HTML Element\n   */\n  private renderSlot = (): HTMLElement => <slot></slot>;\n\n  /**\n   * Emit event when component is updated\n   */\n  componentShouldUpdate(): Promise<void> {\n    return nextTick(() => {\n      this.itemUpdated.emit();\n    });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const getContainerClasses = () => ({\n      ['mg-c-menu-item__collapse-container']: true,\n      ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),\n    });\n\n    return (\n      <Host role={this.isItemMore ? 'presentation' : 'listitem'}>\n        {this.displayPopover() ? (\n          <mg-popover\n            display={this.expanded}\n            placement=\"bottom-start\"\n            arrowHide={true}\n            onDisplay-change={this.handlePopoverDisplay}\n            identifier={this.getPopoverIdentifier()}\n            data-fallback-placement=\"bottom-end\" // use for the last element of the menu if it is placed on the right side\n          >\n            {this.renderInteractiveElement()}\n            <div class={getContainerClasses()} slot=\"content\">\n              {this.renderSlot()}\n            </div>\n          </mg-popover>\n        ) : (\n          [\n            this.renderInteractiveElement(),\n            <div key=\"vertical-container\" class={getContainerClasses()} hidden={!this.expanded}>\n              {this.renderSlot()}\n            </div>,\n          ]\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-item-more/mg-item-more.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { isValidString } from "@mgdis/stencil-helpers";
-import { Direction } from "../menu/mg-menu/mg-menu.conf";
+import { Direction, sizes } from "../menu/mg-menu/mg-menu.conf";
 import { OverflowBehavior } from "../../../utils/behaviors.utils";
 import { initLocales } from "../../../locales";
 export class MgItemMore {
@@ -63,7 +63,7 @@ export class MgItemMore {
             this.slotlabel.label = this.messages.menuLabel;
     }
     validateSize(newValue) {
-        if (newValue && typeof newValue !== 'string')
+        if (newValue && !sizes.includes(newValue))
             throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
     }
     /*************
@@ -112,10 +112,10 @@ export class MgItemMore {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '18e3ecec55a7078662bdb04ba6325a4d44ff1c78', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: 'e04f4b62b1ce70eeae25f959ef6aeca2e4a2690d', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
+        return (h(Host, { key: 'b490696ded183a1db05673b3e9ba9744ee134382', role: "listitem" }, this.parentMenu && (h("mg-menu-item", { key: '6f8b1967da50e77d87355cedde8aeb2327ddd0ab', "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
                 if (el)
                     this.moreElementMenuItem = el;
-            } }, h("mg-icon", { key: '8f20ef688479578ebee9eabb63644837e1d45113', icon: this.icon.icon, slot: "image" }), h("span", { key: '7a4f08410d1e85682a8c3e1935525c418a4141de', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: 'f67f53d289cf65883a3534f17fb2baaa91314a66', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
+            } }, h("mg-icon", { key: 'ddcf120831d42bc6cb9b8e147abac9ba7cbeedb6', icon: this.icon.icon, size: this.size, slot: "image" }), h("span", { key: 'fae667ee2f6ac8f4d4f85c5a8db91dede3f470e6', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '912d544f80b84b4cffa28517ffbc91d60792a460', direction: Direction.VERTICAL, label: this.messages.menuLabel, size: this.size })))));
     }
     static get is() { return "mg-item-more"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-item-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-item-more/mg-item-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { initLocales } from '../../../locales';\nimport type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport type { MessageType } from '../../../locales/index.conf';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private parentMenuItems: HTMLMgMenuItemElement[];\n  private moreElementMenuItem: HTMLMgMenuItemElement;\n  private overflowBehavior: OverflowBehavior;\n  private canRenderMgMenuItemOverflowElement = true;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon?: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel?: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.menuLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size?: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n      this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      const proxified = allMenuItem[index];\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (isValidString(proxy.id)) proxy.id = `${proxy.id}-proxy`;\n\n      // update properties and DOM when proxyfied item is updated\n      proxified.addEventListener('item-updated', (event: CustomEvent & { target: HTMLElement }) => {\n        Object.assign(proxy, event.target);\n        proxy.innerHTML = event.target.innerHTML;\n      });\n\n      // manage status change miror in proxyfied element\n      proxified.addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = initLocales(this.element).messages.itemMore as MessageType;\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Ensure parent DOM is fully rendered with timeout method before parse elements\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // ensure parent menu is fully rendered\n    return setTimeout(() => {\n      this.parentMenu = this.element.closest('mg-menu');\n    });\n  }\n\n  /**\n   * Set OverflowBehavior when parentMenu state is upate AND defined\n   */\n  componentDidUpdate(): void {\n    if (this.parentMenu && this.canRenderMgMenuItemOverflowElement) {\n      this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n      this.canRenderMgMenuItemOverflowElement = false;\n    }\n  }\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior?.disconnect();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        {this.parentMenu && (\n          <mg-menu-item\n            data-overflow-more\n            data-size={this.parentMenu.size}\n            ref={el => {\n              if (el) this.moreElementMenuItem = el;\n            }}\n          >\n            <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n              {this.slotlabel.label}\n            </span>\n            <mg-menu direction={Direction.VERTICAL} label={this.messages.menuLabel} size={this.size}></mg-menu>\n          </mg-menu-item>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-item-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-item-more/mg-item-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { isValidString } from '@mgdis/stencil-helpers';\nimport { Direction, sizes } from '../menu/mg-menu/mg-menu.conf';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { initLocales } from '../../../locales';\nimport type { IconType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport type { MessageType } from '../../../locales/index.conf';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private parentMenuItems: HTMLMgMenuItemElement[];\n  private moreElementMenuItem: HTMLMgMenuItemElement;\n  private overflowBehavior: OverflowBehavior;\n  private canRenderMgMenuItemOverflowElement = true;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon?: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel?: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.menuLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size?: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && !sizes.includes(newValue)) throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n      this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      const proxified = allMenuItem[index];\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (isValidString(proxy.id)) proxy.id = `${proxy.id}-proxy`;\n\n      // update properties and DOM when proxyfied item is updated\n      proxified.addEventListener('item-updated', (event: CustomEvent & { target: HTMLElement }) => {\n        Object.assign(proxy, event.target);\n        proxy.innerHTML = event.target.innerHTML;\n      });\n\n      // manage status change miror in proxyfied element\n      proxified.addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = initLocales(this.element).messages.itemMore as MessageType;\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Ensure parent DOM is fully rendered with timeout method before parse elements\n   * @returns timeout\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // ensure parent menu is fully rendered\n    return setTimeout(() => {\n      this.parentMenu = this.element.closest('mg-menu');\n    });\n  }\n\n  /**\n   * Set OverflowBehavior when parentMenu state is upate AND defined\n   */\n  componentDidUpdate(): void {\n    if (this.parentMenu && this.canRenderMgMenuItemOverflowElement) {\n      this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n      this.canRenderMgMenuItemOverflowElement = false;\n    }\n  }\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior?.disconnect();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        {this.parentMenu && (\n          <mg-menu-item\n            data-overflow-more\n            data-size={this.parentMenu.size}\n            ref={el => {\n              if (el) this.moreElementMenuItem = el;\n            }}\n          >\n            <mg-icon icon={this.icon.icon} size={this.size} slot=\"image\"></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n              {this.slotlabel.label}\n            </span>\n            <mg-menu direction={Direction.VERTICAL} label={this.messages.menuLabel} size={this.size}></mg-menu>\n          </mg-menu-item>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -156,6 +156,10 @@ export class MgPopover {
         // Add aria attributes
         interactiveElement.setAttribute('aria-controls', this.identifier);
         interactiveElement.setAttribute('aria-expanded', `${this.display}`);
+        const fallbackPlacements = [];
+        if (this.element.dataset.fallbackPlacement) {
+            fallbackPlacements.push(this.element.dataset.fallbackPlacement);
+        }
         // Create popperjs popover
         this.popper = createPopper(interactiveElement, this.mgPopover, {
             placement: this.placement,
@@ -170,7 +174,7 @@ export class MgPopover {
                 {
                     name: 'flip',
                     options: {
-                        fallbackPlacements: ['auto'],
+                        fallbackPlacements: [...fallbackPlacements, 'auto'],
                     },
                 },
             ],
@@ -200,7 +204,7 @@ export class MgPopover {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '788fd2a8f759f8ae9188b05395cbfc33b5b06c69' }, h("slot", { key: '9109948237f93d375e6d1b234274f8283c0260d3' }), h("slot", { key: 'e76a1093edab91746a4d3302d7976129ed7c6042', name: "content" })));
+        return (h(Host, { key: 'a01aff00a17da32a72491629ba80ec51a34cdb0e' }, h("slot", { key: 'bb314190042b65bf899e34efac1781ce9230930f' }), h("slot", { key: 'daba0b8cb0b1b3b4637bb972da309a9afb73f99e', name: "content" })));
     }
     static get is() { return "mg-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-popover.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-popover/mg-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows } from '@mgdis/stencil-helpers';\nimport { Instance as PopperInstance, createPopper, Placement } from '@popperjs/core';\n\n/**\n * @slot - Element that will display the popover\n * @slot content - popover content\n */\n@Component({\n  tag: 'mg-popover',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css',\n  shadow: true,\n})\nexport class MgPopover {\n  /************\n   * Internal *\n   ************/\n\n  private popper: PopperInstance;\n  private mgPopover: HTMLElement;\n  private mgPopoverContent: HTMLMgPopoverContentElement;\n  private windows: Window[];\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-popover');\n  @Watch('identifier')\n  validateIdentifier(): void {\n    // use renderPopoverContent to update popover-content id\n    this.renderPopoverContent();\n  }\n\n  /**\n   * Popover placement\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Hide popover arrow\n   */\n  @Prop() arrowHide = false;\n  @Watch('arrowHide')\n  validateArrowHide(newValue: MgPopover['arrowHide']): void {\n    if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n    else delete this.mgPopoverContent.dataset.arrowHide;\n  }\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgPopover['closeButton']): void {\n    this.mgPopoverContent.closeButton = newValue;\n  }\n\n  /**\n   * Display popover\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  handleDisplay(newValue: boolean): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n    this.displayChange.emit(newValue);\n  }\n\n  /**\n   * Disable popover\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Emited event when display value change\n   */\n  @Event({ eventName: 'display-change' }) displayChange: EventEmitter<HTMLMgPopoverElement['display']>;\n\n  /**\n   * Check if clicked outside of component\n   * @param event - mouse event\n   */\n  private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    if (!this.disabled && event.target.closest('mg-popover') !== this.element && !event.target.closest(`[data-mg-popover-guard=\"${this.identifier}\"]`)) this.display = false;\n  };\n\n  /**\n   * Show popover\n   */\n  private show = (): void => {\n    // Make the popover visible\n    this.mgPopover.dataset.show = '';\n    // Enable the event listeners\n    this.setPopperListeners(true);\n    // hide when click outside\n    // setTimeout is used to prevent event to trigger after creation\n    setTimeout(() => {\n      this.manageClickOutsideListeners('addEventListener');\n    });\n  };\n\n  /**\n   * Hide popover\n   */\n  private hide = (): void => {\n    // Hide the popover\n    this.mgPopover.removeAttribute('data-show');\n    // Disable the event listeners\n    this.setPopperListeners(false);\n    // Remove event listener\n    this.manageClickOutsideListeners('removeEventListener');\n  };\n\n  /**\n   * Set popper listeners\n   * @param newValue - if true enable popper listners\n   */\n  private setPopperListeners = (newValue: boolean): void => {\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }],\n    }));\n  };\n\n  /**\n   * Manage all clickOustside listeners\n   * @param action - top process on elements listeners\n   */\n  private manageClickOutsideListeners = (action: 'removeEventListener' | 'addEventListener'): void => {\n    // clickOutside listeners need to bind windows\n    // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component\n    // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.\n    // This result in the givern junction :\n    // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot =  Windows > document > [data-mg-popover-guard] > shadowRoot\n    const guardChildren = Array.from(document.querySelector(`[data-mg-popover-guard=\"${this.identifier}\"]`)?.shadowRoot?.children || new Set());\n    [...guardChildren, ...this.windows].forEach((element: Window | HTMLElement) => {\n      element[action]('click', this.clickOutside, false);\n    });\n  };\n\n  /**\n   * Handle content hide event\n   */\n  private handleHideContent = (): void => {\n    this.display = false;\n  };\n\n  /**\n   * Render popover content element\n   */\n  private renderPopoverContent = (): void => {\n    const mgPopoverContent = this.element.querySelector('mg-popover-content');\n    if (mgPopoverContent === null) {\n      this.mgPopoverContent = document.createElement('mg-popover-content');\n      this.mgPopoverContent.setAttribute('slot', 'content');\n      this.mgPopoverContent.setAttribute('id', this.identifier);\n      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n      const arrow = document.createElement('div');\n      arrow.setAttribute('slot', 'arrow');\n      arrow.dataset.popperArrow = '';\n      this.mgPopoverContent.appendChild(arrow);\n\n      // insert elements in DOM\n      ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n          this.mgPopoverContent.appendChild(slot);\n        });\n      });\n      this.element.appendChild(this.mgPopoverContent);\n    } else {\n      mgPopoverContent.setAttribute('id', this.identifier);\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.popper.update();\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n    // render mg-popover-content slot\n    this.renderPopoverContent();\n    this.validateCloseButton(this.closeButton);\n    this.validateIdentifier();\n    this.validateArrowHide(this.arrowHide);\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    // Get popover content\n    this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n    //Get interactive element (first element without slot attribute)\n    const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n    // Add aria attributes\n    interactiveElement.setAttribute('aria-controls', this.identifier);\n    interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n    // Create popperjs popover\n    this.popper = createPopper(interactiveElement, this.mgPopover, {\n      placement: this.placement,\n      strategy: 'fixed',\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 0],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['auto'],\n          },\n        },\n      ],\n    });\n\n    // add resize observer\n    [interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {\n      new ResizeObserver(() => {\n        this.popper.update();\n      }).observe(element);\n    });\n\n    // Add events to toggle display\n    interactiveElement.addEventListener('click', () => {\n      if (!this.disabled) this.display = !this.display;\n    });\n\n    // Add events to hide popover\n    this.element.addEventListener('keydown', e => {\n      if (!this.disabled && e.code === 'Escape') {\n        this.display = false;\n        interactiveElement.focus();\n      }\n    });\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-popover.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-popover/mg-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows } from '@mgdis/stencil-helpers';\nimport { Instance as PopperInstance, createPopper, Placement } from '@popperjs/core';\n\n/**\n * @slot - Element that will display the popover\n * @slot content - popover content\n */\n@Component({\n  tag: 'mg-popover',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-popover.css',\n  shadow: true,\n})\nexport class MgPopover {\n  /************\n   * Internal *\n   ************/\n\n  private popper: PopperInstance;\n  private mgPopover: HTMLElement;\n  private mgPopoverContent: HTMLMgPopoverContentElement;\n  private windows: Window[];\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-popover');\n  @Watch('identifier')\n  validateIdentifier(): void {\n    // use renderPopoverContent to update popover-content id\n    this.renderPopoverContent();\n  }\n\n  /**\n   * Popover placement\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Hide popover arrow\n   */\n  @Prop() arrowHide = false;\n  @Watch('arrowHide')\n  validateArrowHide(newValue: MgPopover['arrowHide']): void {\n    if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n    else delete this.mgPopoverContent.dataset.arrowHide;\n  }\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgPopover['closeButton']): void {\n    this.mgPopoverContent.closeButton = newValue;\n  }\n\n  /**\n   * Display popover\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  handleDisplay(newValue: boolean): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n    this.displayChange.emit(newValue);\n  }\n\n  /**\n   * Disable popover\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Emited event when display value change\n   */\n  @Event({ eventName: 'display-change' }) displayChange: EventEmitter<HTMLMgPopoverElement['display']>;\n\n  /**\n   * Check if clicked outside of component\n   * @param event - mouse event\n   */\n  private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    if (!this.disabled && event.target.closest('mg-popover') !== this.element && !event.target.closest(`[data-mg-popover-guard=\"${this.identifier}\"]`)) this.display = false;\n  };\n\n  /**\n   * Show popover\n   */\n  private show = (): void => {\n    // Make the popover visible\n    this.mgPopover.dataset.show = '';\n    // Enable the event listeners\n    this.setPopperListeners(true);\n    // hide when click outside\n    // setTimeout is used to prevent event to trigger after creation\n    setTimeout(() => {\n      this.manageClickOutsideListeners('addEventListener');\n    });\n  };\n\n  /**\n   * Hide popover\n   */\n  private hide = (): void => {\n    // Hide the popover\n    this.mgPopover.removeAttribute('data-show');\n    // Disable the event listeners\n    this.setPopperListeners(false);\n    // Remove event listener\n    this.manageClickOutsideListeners('removeEventListener');\n  };\n\n  /**\n   * Set popper listeners\n   * @param newValue - if true enable popper listners\n   */\n  private setPopperListeners = (newValue: boolean): void => {\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }],\n    }));\n  };\n\n  /**\n   * Manage all clickOustside listeners\n   * @param action - top process on elements listeners\n   */\n  private manageClickOutsideListeners = (action: 'removeEventListener' | 'addEventListener'): void => {\n    // clickOutside listeners need to bind windows\n    // AND as shawdowDom content is not include on windows listeners `event.target` we need to include popover guard content DOM if it's a web-component\n    // by doing this we can get and parse all needeed document DOM elements in clickOutside callback event.details.\n    // This result in the givern junction :\n    // Windows > document > [data-mg-popover-guard] + [data-mg-popover-guard] > shadowRoot =  Windows > document > [data-mg-popover-guard] > shadowRoot\n    const guardChildren = Array.from(document.querySelector(`[data-mg-popover-guard=\"${this.identifier}\"]`)?.shadowRoot?.children || new Set());\n    [...guardChildren, ...this.windows].forEach((element: Window | HTMLElement) => {\n      element[action]('click', this.clickOutside, false);\n    });\n  };\n\n  /**\n   * Handle content hide event\n   */\n  private handleHideContent = (): void => {\n    this.display = false;\n  };\n\n  /**\n   * Render popover content element\n   */\n  private renderPopoverContent = (): void => {\n    const mgPopoverContent = this.element.querySelector('mg-popover-content');\n    if (mgPopoverContent === null) {\n      this.mgPopoverContent = document.createElement('mg-popover-content');\n      this.mgPopoverContent.setAttribute('slot', 'content');\n      this.mgPopoverContent.setAttribute('id', this.identifier);\n      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n      const arrow = document.createElement('div');\n      arrow.setAttribute('slot', 'arrow');\n      arrow.dataset.popperArrow = '';\n      this.mgPopoverContent.appendChild(arrow);\n\n      // insert elements in DOM\n      ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n          this.mgPopoverContent.appendChild(slot);\n        });\n      });\n      this.element.appendChild(this.mgPopoverContent);\n    } else {\n      mgPopoverContent.setAttribute('id', this.identifier);\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.popper.update();\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n    // render mg-popover-content slot\n    this.renderPopoverContent();\n    this.validateCloseButton(this.closeButton);\n    this.validateIdentifier();\n    this.validateArrowHide(this.arrowHide);\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    // Get popover content\n    this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n    //Get interactive element (first element without slot attribute)\n    const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n    // Add aria attributes\n    interactiveElement.setAttribute('aria-controls', this.identifier);\n    interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n    const fallbackPlacements = [];\n    if (this.element.dataset.fallbackPlacement) {\n      fallbackPlacements.push(this.element.dataset.fallbackPlacement);\n    }\n\n    // Create popperjs popover\n    this.popper = createPopper(interactiveElement, this.mgPopover, {\n      placement: this.placement,\n      strategy: 'fixed',\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 0],\n          },\n        },\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: [...fallbackPlacements, 'auto'],\n          },\n        },\n      ],\n    });\n\n    // add resize observer\n    [interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {\n      new ResizeObserver(() => {\n        this.popper.update();\n      }).observe(element);\n    });\n\n    // Add events to toggle display\n    interactiveElement.addEventListener('click', () => {\n      if (!this.disabled) this.display = !this.display;\n    });\n\n    // Add events to hide popover\n    this.element.addEventListener('keydown', e => {\n      if (!this.disabled && e.code === 'Escape') {\n        this.display = false;\n        interactiveElement.focus();\n      }\n    });\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"]}