@mgdis/mg-components 6.9.0 → 6.10.1

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

@@ -1,7 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { createID, getWindows, isValideID, toString } from "@mgdis/stencil-helpers";
-import { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow } from "@floating-ui/dom";
-import { isFloatingUIPlacement, sides, alignments } from "./mg-popover.conf";
+import { createPopper } from "@popperjs/core";
 /**
  * @slot - Element that will display the popover
  * @slot content - popover content
@@ -43,16 +42,6 @@ export class MgPopover {
                 this.display = false;
             }
         };
-        /**
-         * Update aria-expanded attribute on interactive element
-         * @param expanded - expanded state
-         */
-        this.updateAriaExpanded = (expanded) => {
-            const interactiveElement = this.element.querySelector(':not([slot])');
-            if (interactiveElement !== null) {
-                interactiveElement.setAttribute('aria-expanded', String(expanded));
-            }
-        };
         /**
          * Show popover
          */
@@ -60,7 +49,9 @@ export class MgPopover {
             // Make the popover visible
             this.mgPopover.dataset.show = '';
             // Update aria-expanded
-            this.updateAriaExpanded(true);
+            this.interactiveElement.setAttribute('aria-expanded', 'true');
+            // Enable the event listeners
+            this.setPopperListeners(true);
             // hide when click outside
             // setTimeout is used to prevent event to trigger after creation
             setTimeout(() => {
@@ -74,10 +65,19 @@ export class MgPopover {
             // Hide the popover
             this.mgPopover.removeAttribute('data-show');
             // Update aria-expanded
-            this.updateAriaExpanded(false);
+            this.interactiveElement.setAttribute('aria-expanded', 'false');
+            // Disable the event listeners
+            this.setPopperListeners(false);
             // Remove event listener
             this.manageClickOutsideListeners('removeEventListener');
         };
+        /**
+         * Set popper listeners
+         * @param newValue - if true enable popper listners
+         */
+        this.setPopperListeners = (newValue) => {
+            this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }] })));
+        };
         /**
          * Manage all clickOustside listeners
          * @param action - top process on elements listeners
@@ -115,7 +115,7 @@ export class MgPopover {
                 this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
                 const arrow = document.createElement('div');
                 arrow.setAttribute('slot', 'arrow');
-                arrow.dataset.floatingArrow = '';
+                arrow.dataset.popperArrow = '';
                 this.mgPopoverContent.appendChild(arrow);
                 // insert elements in DOM
                 ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
@@ -129,83 +129,6 @@ export class MgPopover {
                 mgPopoverContent.setAttribute('id', this.identifier);
             }
         };
-        /**
-         * Get alternative placements ordered by proximity to initial placement
-         * First check fallbackPlacement attribute, then generate alternatives:
-         * 1. Same side with different alignments (start, center, end)
-         * 2. Other sides in order
-         * @param placement - initial placement
-         * @returns array of alternative placements
-         */
-        this.getClosestPlacements = (placement) => {
-            // First check if fallbackPlacement attribute is defined
-            const fallbackPlacements = (this.element.dataset.fallbackPlacement || '')
-                .split(',')
-                .map(t => t.trim())
-                .filter(isFloatingUIPlacement);
-            if (fallbackPlacements.length > 0)
-                return Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement);
-            // Extract side from placement (e.g. "top" from "top-start")
-            const [side] = placement.split('-');
-            // Generate placements for same side with different alignments
-            const currentSidePlacements = alignments.map(alignment => (alignment !== null ? `${side}-${alignment}` : side));
-            // Return unique placements: current side variants first, then other sides
-            return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);
-        };
-        /**
-         * Set up Floating UI positioning and arrow behavior
-         * @param interactiveElement - Element that triggers the popover
-         */
-        this.setFloatingUI = (interactiveElement) => {
-            this.floatingUICleanup = autoUpdate(interactiveElement, this.mgPopover, () => {
-                computePosition(interactiveElement, this.mgPopover, {
-                    placement: this.placement,
-                    strategy: 'fixed',
-                    middleware: [
-                        offset(0),
-                        flip({
-                            fallbackPlacements: this.getClosestPlacements(this.placement),
-                        }),
-                        shift({
-                            limiter: limitShift(),
-                        }),
-                        arrow({
-                            element: this.mgPopover.querySelector('[data-floating-arrow]'),
-                        }),
-                    ],
-                }).then(({ x, y, placement, middlewareData }) => {
-                    Object.assign(this.mgPopover.style, {
-                        position: 'fixed',
-                        top: '0',
-                        left: '0',
-                        transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`,
-                    });
-                    // Update arrow style
-                    const staticSide = {
-                        top: 'bottom',
-                        right: 'left',
-                        bottom: 'top',
-                        left: 'right',
-                    }[placement.split('-')[0]];
-                    const arrowElement = this.mgPopover.querySelector('[data-floating-arrow]');
-                    const { x: arrowX, y: arrowY } = middlewareData.arrow;
-                    // https://floating-ui.com/docs/arrow
-                    // Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
-                    // Due to this, either x or y will be undefined, depending on the side of placement.
-                    // The above code uses `isNaN` to check for null and undefined simultaneously.
-                    // Don't remove `isNaN`, because either value can be falsy (0), causing a bug!
-                    const numberToPx = (number) => (!isNaN(number) ? `${number}px` : '');
-                    if (arrowElement !== null)
-                        Object.assign(arrowElement.style, {
-                            position: 'absolute',
-                            left: numberToPx(arrowX),
-                            top: numberToPx(arrowY),
-                            [staticSide]: '1px',
-                        });
-                    this.mgPopover.setAttribute('data-placement', placement);
-                });
-            });
-        };
     }
     validateIdentifier(newValue) {
         if (!isValideID(newValue)) {
@@ -214,10 +137,6 @@ export class MgPopover {
         // use renderPopoverContent to update popover-content id
         this.renderPopoverContent();
     }
-    watchPlacement(newValue) {
-        if (!isFloatingUIPlacement(newValue))
-            this.placement = 'bottom';
-    }
     validateArrowHide(newValue) {
         if (newValue)
             this.mgPopoverContent.dataset.arrowHide = '';
@@ -243,7 +162,7 @@ export class MgPopover {
      * update popper position after props change on component did update hook to benefit from render ended
      */
     componentDidUpdate() {
-        this.floatingUICleanup();
+        this.popper.update();
     }
     /**
      * Check if component props are well configured on init
@@ -256,7 +175,6 @@ export class MgPopover {
         this.validateCloseButton(this.closeButton);
         this.validateIdentifier(this.identifier);
         this.validateArrowHide(this.arrowHide);
-        this.watchPlacement(this.placement);
     }
     /**
      * Check if component props are well configured on init
@@ -264,26 +182,42 @@ export class MgPopover {
     componentDidLoad() {
         // Get popover content
         this.mgPopover = this.element.querySelector(`#${this.identifier}`);
-        // Get interactive element (first element without slot attribute)
-        const interactiveElement = this.element.querySelector(':not([slot])');
+        //Get interactive element (first element without slot attribute)
+        this.interactiveElement = this.element.querySelector(':not([slot])');
         // Add aria attributes
-        interactiveElement.setAttribute('aria-controls', this.identifier);
-        interactiveElement.setAttribute('aria-expanded', `${this.display}`);
-        // Initial styles configuration
-        Object.assign(this.mgPopover.style, {
-            position: 'fixed',
+        this.interactiveElement.setAttribute('aria-controls', this.identifier);
+        this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);
+        const fallbackPlacements = [];
+        if (this.element.dataset.fallbackPlacement !== undefined) {
+            fallbackPlacements.push(this.element.dataset.fallbackPlacement);
+        }
+        // Create popperjs popover
+        this.popper = createPopper(this.interactiveElement, this.mgPopover, {
+            placement: this.placement,
+            strategy: 'fixed',
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: [0, 0],
+                    },
+                },
+                {
+                    name: 'flip',
+                    options: {
+                        fallbackPlacements: [...fallbackPlacements, 'auto'],
+                    },
+                },
+            ],
         });
-        // Create Floating UI instance
-        this.setFloatingUI(interactiveElement);
-        // Add resize observer
-        [interactiveElement, this.mgPopoverContent].forEach(element => {
+        // add resize observer
+        [this.interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {
             new ResizeObserver(() => {
-                this.floatingUICleanup();
-                this.setFloatingUI(interactiveElement);
+                this.popper.update();
             }).observe(element);
         });
         // Add events to toggle display
-        interactiveElement.addEventListener('click', () => {
+        this.interactiveElement.addEventListener('click', () => {
             if (!this.disabled)
                 this.display = !this.display;
         });
@@ -298,24 +232,17 @@ export class MgPopover {
             if (!this.disabled && e.code === 'Escape') {
                 this.display = false;
                 this.componentClose.emit();
-                interactiveElement.focus();
+                this.interactiveElement.focus();
             }
         });
         this.handleDisplay(this.display);
     }
-    /**
-     * Cleanup when component is disconnected
-     */
-    disconnectedCallback() {
-        // Cleanup Floating UI instance
-        this.floatingUICleanup();
-    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'a2c883c6f1458bfc76d77d944afe99210d0ecdb3' }, h("slot", { key: 'c3d2e25f47c5761be6594cb6cd487e4960e5d30b' }), h("slot", { key: '93bb53d3eac2c2b966eacb00b772faa403b5a86c', name: "content" })));
+        return (h(Host, { key: '59f4be0c4d8f066a2f5c6197f237b4bb802fa4fa' }, h("slot", { key: 'bcaaa47052d360711722b9f617b93a4f0f148ca8' }), h("slot", { key: '598390c0e09b27edc2f2a77e29ee2a501a6ecdf8', name: "content" })));
     }
     static get is() { return "mg-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -353,15 +280,15 @@ export class MgPopover {
             },
             "placement": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
-                    "original": "PopoverPlacementType",
+                    "original": "Placement",
                     "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
                     "references": {
-                        "PopoverPlacementType": {
+                        "Placement": {
                             "location": "import",
-                            "path": "./mg-popover.conf",
-                            "id": "src/components/molecules/mg-popover/mg-popover.conf.tsx::PopoverPlacementType"
+                            "path": "@popperjs/core",
+                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement"
                         }
                     }
                 },
@@ -502,9 +429,6 @@ export class MgPopover {
         return [{
                 "propName": "identifier",
                 "methodName": "validateIdentifier"
-            }, {
-                "propName": "placement",
-                "methodName": "watchPlacement"
             }, {
                 "propName": "arrowHide",
                 "methodName": "validateArrowHide"

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, isValideID, toString } from '@mgdis/stencil-helpers';\nimport { computePosition, autoUpdate, flip, shift, limitShift, offset, arrow, type Placement } from '@floating-ui/dom';\nimport { isFloatingUIPlacement, type PopoverPlacementType, sides, alignments } from './mg-popover.conf';\n\n/**\n * @slot - Element that will display the popover\n * @slot content - popover content\n * @slot title - popover title\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 mgPopover: HTMLElement;\n  private mgPopoverContent: HTMLMgPopoverContentElement;\n  private windows: Window[];\n  private floatingUICleanup: ReturnType<typeof autoUpdate>;\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(newValue: MgPopover['identifier']): void {\n    if (!isValideID(newValue)) {\n      throw new Error(`<mg-popover> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n    // use renderPopoverContent to update popover-content id\n    this.renderPopoverContent();\n  }\n\n  /**\n   * Popover placement\n   */\n  @Prop({ mutable: true }) placement: PopoverPlacementType = 'bottom';\n  @Watch('placement')\n  watchPlacement(newValue): void {\n    if (!isFloatingUIPlacement(newValue)) this.placement = 'bottom';\n  }\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   * Emmited event when popover is closed\n   */\n  @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\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}\"]`) === null) {\n      this.display = false;\n    }\n  };\n\n  /**\n   * Update aria-expanded attribute on interactive element\n   * @param expanded - expanded state\n   */\n  private updateAriaExpanded = (expanded: boolean): void => {\n    const interactiveElement = this.element.querySelector(':not([slot])');\n    if (interactiveElement !== null) {\n      interactiveElement.setAttribute('aria-expanded', String(expanded));\n    }\n  };\n\n  /**\n   * Show popover\n   */\n  private show = (): void => {\n    // Make the popover visible\n    this.mgPopover.dataset.show = '';\n    // Update aria-expanded\n    this.updateAriaExpanded(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    // Update aria-expanded\n    this.updateAriaExpanded(false);\n    // Remove event listener\n    this.manageClickOutsideListeners('removeEventListener');\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      if (element !== null) {\n        element[action]('click', this.clickOutside, false);\n      }\n    });\n  };\n\n  /**\n   * Handle content hide event\n   */\n  private handleHideContent = (): void => {\n    this.display = false;\n    this.componentClose.emit();\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.floatingArrow = '';\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   * Get alternative placements ordered by proximity to initial placement\n   * First check fallbackPlacement attribute, then generate alternatives:\n   * 1. Same side with different alignments (start, center, end)\n   * 2. Other sides in order\n   * @param placement - initial placement\n   * @returns array of alternative placements\n   */\n  private getClosestPlacements = (placement: PopoverPlacementType): Placement[] => {\n    // First check if fallbackPlacement attribute is defined\n    const fallbackPlacements = (this.element.dataset.fallbackPlacement || '')\n      .split(',')\n      .map(t => t.trim())\n      .filter(isFloatingUIPlacement);\n    if (fallbackPlacements.length > 0) return Array.from(new Set([...fallbackPlacements, ...sides]).values()).filter(isFloatingUIPlacement);\n\n    // Extract side from placement (e.g. \"top\" from \"top-start\")\n    const [side] = placement.split('-');\n\n    // Generate placements for same side with different alignments\n    const currentSidePlacements = alignments.map(alignment => (alignment !== null ? `${side}-${alignment}` : side));\n\n    // Return unique placements: current side variants first, then other sides\n    return Array.from(new Set([...currentSidePlacements, ...sides.filter(otherSide => otherSide !== side)])).filter(isFloatingUIPlacement);\n  };\n\n  /**\n   * Set up Floating UI positioning and arrow behavior\n   * @param interactiveElement - Element that triggers the popover\n   */\n  private setFloatingUI = (interactiveElement: HTMLElement): void => {\n    this.floatingUICleanup = autoUpdate(interactiveElement, this.mgPopover, () => {\n      computePosition(interactiveElement, this.mgPopover, {\n        placement: this.placement as Placement,\n        strategy: 'fixed',\n        middleware: [\n          offset(0),\n          flip({\n            fallbackPlacements: this.getClosestPlacements(this.placement),\n          }),\n          shift({\n            limiter: limitShift(),\n          }),\n          arrow({\n            element: this.mgPopover.querySelector('[data-floating-arrow]'),\n          }),\n        ],\n      }).then(({ x, y, placement, middlewareData }) => {\n        Object.assign(this.mgPopover.style, {\n          position: 'fixed',\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`,\n        });\n\n        // Update arrow style\n        const staticSide = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        const arrowElement: HTMLElement = this.mgPopover.querySelector('[data-floating-arrow]');\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n        // https://floating-ui.com/docs/arrow\n        // Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.\n        // Due to this, either x or y will be undefined, depending on the side of placement.\n        // The above code uses `isNaN` to check for null and undefined simultaneously.\n        // Don't remove `isNaN`, because either value can be falsy (0), causing a bug!\n        const numberToPx = (number: number): string => (!isNaN(number) ? `${number}px` : '');\n\n        if (arrowElement !== null)\n          Object.assign(arrowElement.style, {\n            position: 'absolute',\n            left: numberToPx(arrowX),\n            top: numberToPx(arrowY),\n            [staticSide]: '1px',\n          });\n\n        this.mgPopover.setAttribute('data-placement', placement);\n      });\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.floatingUICleanup();\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(this.identifier);\n    this.validateArrowHide(this.arrowHide);\n    this.watchPlacement(this.placement);\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\n    // Add aria attributes\n    interactiveElement.setAttribute('aria-controls', this.identifier);\n    interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n    // Initial styles configuration\n    Object.assign(this.mgPopover.style, {\n      position: 'fixed',\n    });\n\n    // Create Floating UI instance\n    this.setFloatingUI(interactiveElement);\n\n    // Add resize observer\n    [interactiveElement, this.mgPopoverContent].forEach(element => {\n      new ResizeObserver(() => {\n        this.floatingUICleanup();\n        this.setFloatingUI(interactiveElement);\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    this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }): void => {\n      const target = event.target.closest('[popovertargetaction]');\n      if (this.display === true && target !== null && target.getAttribute('popovertargetaction') === 'hide') {\n        this.display = false;\n      }\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        this.componentClose.emit();\n        interactiveElement.focus();\n      }\n    });\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * Cleanup when component is disconnected\n   */\n  disconnectedCallback(): void {\n    // Cleanup Floating UI instance\n    this.floatingUICleanup();\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, isValideID, toString } 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 * @slot title - popover title\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  private interactiveElement: HTMLElement;\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(newValue: MgPopover['identifier']): void {\n    if (!isValideID(newValue)) {\n      throw new Error(`<mg-popover> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\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   * Emmited event when popover is closed\n   */\n  @Event({ eventName: 'component-close' }) componentClose: EventEmitter<void>;\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}\"]`) === null) {\n      this.display = false;\n    }\n  };\n\n  /**\n   * Show popover\n   */\n  private show = (): void => {\n    // Make the popover visible\n    this.mgPopover.dataset.show = '';\n    // Update aria-expanded\n    this.interactiveElement.setAttribute('aria-expanded', 'true');\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    // Update aria-expanded\n    this.interactiveElement.setAttribute('aria-expanded', 'false');\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      if (element !== null) {\n        element[action]('click', this.clickOutside, false);\n      }\n    });\n  };\n\n  /**\n   * Handle content hide event\n   */\n  private handleHideContent = (): void => {\n    this.display = false;\n    this.componentClose.emit();\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(this.identifier);\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    this.interactiveElement = this.element.querySelector(':not([slot])');\n    // Add aria attributes\n    this.interactiveElement.setAttribute('aria-controls', this.identifier);\n    this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n    const fallbackPlacements = [];\n    if (this.element.dataset.fallbackPlacement !== undefined) {\n      fallbackPlacements.push(this.element.dataset.fallbackPlacement);\n    }\n\n    // Create popperjs popover\n    this.popper = createPopper(this.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    [this.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    this.interactiveElement.addEventListener('click', () => {\n      if (!this.disabled) this.display = !this.display;\n    });\n\n    this.element.addEventListener('click', (event: MouseEvent & { target: HTMLElement }): void => {\n      const target = event.target.closest('[popovertargetaction]');\n      if (this.display === true && target !== null && target.getAttribute('popovertargetaction') === 'hide') {\n        this.display = false;\n      }\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        this.componentClose.emit();\n        this.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"]}

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

@@ -65,7 +65,7 @@ export class MgProgress {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '53468a3432308e0e255a2a3ed8164091a414ba99', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: 'c96350a559b88cbe3ff8db5df277284034772ac9', class: "mg-c-progress" }, h("div", { key: '9a5cb4e8f0d18ea2ba26b3689035e00ce2a52a15', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: 'fb1908f24f86754a3a7359669205e86e7e44c6ab', class: "mg-c-progress__fill", style: {
+        return (h(Host, { key: 'c2a8b5264af27dab4f81981a6d20d04d572321db', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '1ab08ca9582182c7c2e9cf1041e68cfd38390e3b', class: "mg-c-progress" }, h("div", { key: '95044f35b5fcc1b5eb380828acc3935ff30c6c1f', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '4d3588379c0b1a135dd9118fd2cb3c00c9dd31cb', class: "mg-c-progress__fill", style: {
                 width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
             } })))));
     }

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js

@@ -35,7 +35,7 @@ export class MgSkipLinks {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '4c0d14ec373d8e987c876ed89923e754af312bfb', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '52117cbae84014f7e59fbcebc6489d73f28dd68d', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (h("nav", { key: '0b4e4d6b9481a88faae78602b07c4f5e851da517', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'aaa15193eb2c9e1d9ee3b2e2a7d8d0fd37836ed7', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     static get is() { return "mg-skip-links"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID } from "@mgdis/stencil-helpers";
 import { sizes, Status } from "./mg-tabs.conf";
+import { Keys } from "../../../utils/events.utils";
 /**
  * type TabItem validation function
  * @param tab - tab item
@@ -88,18 +89,18 @@ export class MgTabs {
          */
         this.handleKeydown = (event) => {
             const parent = event.target.parentElement;
-            if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
+            if ([Keys.ARROWLEFT, Keys.ARROWRIGHT].includes(event.key)) {
                 this.tabFocus = Number(event.target.dataset.index);
                 parent.querySelector(`[data-index="${this.tabFocus}"]`).setAttribute('tabindex', '-1');
                 // Move right
-                if (event.key === 'ArrowRight') {
+                if (event.key === Keys.ARROWRIGHT) {
                     this.tabFocus++;
                     // If we're at the end, go to the start
                     if (this.tabFocus > this.tabs.length)
                         this.tabFocus = this.startIndex;
                     // Move left
                 }
-                else if (event.key === 'ArrowLeft') {
+                else if (event.key === Keys.ARROWLEFT) {
                     this.tabFocus--;
                     // If we're at the start, move to the end
                     if (this.tabFocus < this.startIndex)
@@ -116,7 +117,7 @@ export class MgTabs {
                     parentButtonElement.focus();
                 }
             }
-            else if (event.key === 'Tab') {
+            else if (event.key === Keys.TAB) {
                 this.resetFocus();
             }
         };
@@ -233,7 +234,7 @@ export class MgTabs {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'e4b89ce00f76cc556f72acbfd4b08ef90fd50a9c', class: this.classCollection.join() }, h("header", { key: 'c9c3434335e28103c1128f4bef926602e182cf14', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+        return (h("div", { key: '558c5ba517bef98ba711dd8992f901768d6770de', class: this.classCollection.join() }, h("header", { key: '0d36d49d51bbbb78bbf68c05e47271349fc58b96', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),

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

@@ -1 +1 @@
-{"version":3,"file":"mg-tabs.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { TabItem, sizes, Status, SizeType } from './mg-tabs.conf';\n\n/**\n * type TabItem validation function\n * @param tab - tab item\n * @returns tab item type is valid\n */\nconst isTabItem = (tab: unknown): tab is TabItem => typeof tab === 'object' && typeof (tab as TabItem).label === 'string';\n\n/**\n * @slot tab_content-n - Tab content, where `n` represents the position of the tab content. It starts at 1.\n */\n@Component({\n  tag: 'mg-tabs',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css',\n  shadow: true,\n})\nexport class MgTabs {\n  /************\n   * Internal *\n   ************/\n\n  // classes\n  private readonly tabPanel = 'panel';\n  private readonly buttonTabBaseClass = 'mg-c-tabs__navigation-button';\n\n  // variables\n  private tabFocus: number;\n  private startIndex = 1;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTabsElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-tabs');\n  @Watch('identifier')\n  watchIdentifier(newValue: MgTabs['identifier']): void {\n    if (!isValideID(newValue)) {\n      console.error(`<mg-tabs> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\n  /**\n   * Tabs label. Include short tabs description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgTabs['label']): void {\n    if (!isValidString(newValue)) {\n      throw new Error(`<mg-tabs> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define tabs size\n   */\n  @Prop() size: SizeType = 'medium';\n  @Watch('size')\n  validateSize(newValue: MgTabs['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-tabs> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n    this.classCollection.add(`mg-c-tabs--size-${this.size}`);\n  }\n\n  /**\n   * Tabs items\n   */\n  @Prop() items!: string[] | TabItem[];\n  @Watch('items')\n  validateItems(newValue: MgTabs['items']): void {\n    // String array\n    if (allItemsAreString(newValue)) this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));\n    // Object array\n    else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem)) this.tabs = newValue;\n    else throw new Error(`<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Active tab number\n   */\n  @Prop({ reflect: true, mutable: true }) activeTab: number;\n  @Watch('activeTab')\n  validateActiveTab(newValue: MgTabs['activeTab']): void {\n    // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value\n    // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update\n    if (newValue === undefined) {\n      this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))\n        ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))\n        : this.startIndex;\n    } else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {\n      // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE\n      this.tabs.forEach((tab, index) => {\n        const isNewActiveTab = index === newValue - this.startIndex;\n        // reset active tabs\n        if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab) tab.status = Status.VISIBLE;\n        // set active tab from given tab key\n        else if (this.isActivableTab(tab) && isNewActiveTab) tab.status = Status.ACTIVE;\n      });\n      // emit change active tab key event\n      this.activeTabChange.emit(newValue);\n    } else {\n      throw new Error(\n        `<mg-tabs> prop \"activeTab\" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be \"activable\". Passed value: ${toString(newValue)}.`,\n      );\n    }\n  }\n\n  /**\n   * Component tabs\n   */\n  @State() tabs: TabItem[] = [];\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-tabs']);\n\n  /**\n   * Emited event when active tab change\n   */\n  @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<HTMLMgTabsElement['activeTab']>;\n\n  /**\n   * Validate that new tab status can be `Status.ACTIVE`\n   * @param tab - tab item\n   * @returns true when tab match condition to get a `Status.ACTIVE`\n   */\n  private isActivableTab = (tab: TabItem): boolean => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);\n\n  /**\n   * Method to know if given tab has the given status\n   * @param tab - item tab key to set to ACTIVE status\n   * @param status - status to valide\n   * @returns status comparaison\n   */\n  private tabHasStatus = (tab: TabItem, status: TabItem['status']): boolean => tab.status === status;\n\n  /**\n   * Method to get element id from index\n   * @param element - to get id\n   * @param index - to generate id\n   * @returns generated element id\n   */\n  private getElementId = (element: string, index: number): string => `${element}-${this.getTabItemIndex(index)}`;\n\n  /**\n   * Method to get tab item index\n   * @param index - to get\n   * @returns index\n   */\n  private getTabItemIndex = (index: number): number => index + this.startIndex;\n\n  /**\n   * Handle click events on tabs\n   * @param event - mouse event\n   */\n  private handleClick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n    const tabId = event.currentTarget.dataset.index;\n    if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {\n      event.preventDefault();\n    } else {\n      this.activeTab = Number(tabId);\n      this.tabFocus = undefined;\n    }\n  };\n\n  /**\n   * get navigation button class from given status\n   * @param status - button tab status\n   * @returns button class/selector variant\n   */\n  private getNavigationButtonClass = (status: TabItem['status']): string => `${this.buttonTabBaseClass}--${status}`;\n\n  /**\n   * Handle keyboard event on tabs\n   * @param event - mouse event\n   */\n  private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n    const parent = event.target.parentElement;\n    if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n      this.tabFocus = Number(event.target.dataset.index);\n      parent.querySelector(`[data-index=\"${this.tabFocus}\"]`).setAttribute('tabindex', '-1');\n\n      // Move right\n      if (event.key === 'ArrowRight') {\n        this.tabFocus++;\n        // If we're at the end, go to the start\n        if (this.tabFocus > this.tabs.length) this.tabFocus = this.startIndex;\n        // Move left\n      } else if (event.key === 'ArrowLeft') {\n        this.tabFocus--;\n        // If we're at the start, move to the end\n        if (this.tabFocus < this.startIndex) this.tabFocus = this.tabs.length;\n      }\n\n      const parentButtonElement: HTMLButtonElement = parent.querySelector(`[data-index=\"${this.tabFocus}\"]`);\n      // if focus item is ['hidden'] we recursively repeat action\n      if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {\n        parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));\n        // else run focus methods on tabFocus element\n      } else {\n        parentButtonElement.setAttribute('tabindex', '0');\n        parentButtonElement.focus();\n      }\n    } else if (event.key === 'Tab') {\n      this.resetFocus();\n    }\n  };\n\n  /**\n   * Reset focus on document click\n   * @param event - mouse event\n   */\n  private handleDocumentClick = (event: MouseEvent & { target: HTMLElement }): void => {\n    if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n  };\n\n  /**\n   * Method to reset focus behavior\n   */\n  private resetFocus = (): void => {\n    // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process\n    nextTick(() => {\n      this.tabFocus = undefined;\n      Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n        tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');\n      });\n    });\n  };\n\n  /**\n   * Validate slots setting\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children).filter(slot => slot.getAttribute('slot')?.includes('tab_content-'));\n    if (slots.length !== this.tabs.length) throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check tabs format\n    this.watchIdentifier(this.identifier);\n    this.validateLabel(this.label);\n    this.validateItems(this.items);\n    this.validateActiveTab(this.activeTab);\n    this.validateSize(this.size);\n    this.validateSlots();\n  }\n\n  /**\n   * add listners\n   */\n  componentDidLoad(): void {\n    document.addEventListener('click', this.handleDocumentClick, false);\n  }\n\n  /**\n   * remove listeners\n   */\n  disconnectedCallback(): void {\n    document.removeEventListener('keydown', this.handleDocumentClick);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        <header role=\"tablist\" aria-label={this.label} class=\"mg-c-tabs__header\">\n          {this.tabs.map((tab, index) => (\n            <button\n              key={tab.label}\n              role=\"tab\"\n              id={this.getElementId(this.identifier, index)}\n              class={{\n                [`${this.buttonTabBaseClass}`]: true,\n                [`${this.buttonTabBaseClass}--horizontal`]: true,\n                [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),\n                [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),\n                [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),\n              }}\n              tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n              aria-selected={this.tabHasStatus(tab, Status.ACTIVE).toString()}\n              aria-controls={this.getElementId(this.tabPanel, index)}\n              aria-disabled={this.tabHasStatus(tab, Status.DISABLED)}\n              onClick={this.handleClick}\n              onKeyDown={this.handleKeydown}\n              data-index={this.getTabItemIndex(index)}\n            >\n              {tab.icon !== undefined && <mg-icon icon={tab.icon}></mg-icon>}\n              {tab.label}\n              {tab.badge !== undefined && <mg-badge variant=\"text-color\" value={tab.badge.value} label={tab.badge.label} outline={tab.badge.role === 'information'}></mg-badge>}\n            </button>\n          ))}\n        </header>\n        {this.tabs.map((tab, index) => (\n          <article\n            key={tab.label}\n            role=\"tabpanel\"\n            id={this.getElementId(this.tabPanel, index)}\n            hidden={!this.tabHasStatus(tab, Status.ACTIVE)}\n            aria-labelledby={this.getElementId(this.identifier, index)}\n            tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n            class=\"mg-c-tabs__content-container\"\n          >\n            <slot name={this.getElementId('tab_content', index)}></slot>\n          </article>\n        ))}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-tabs.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID } from '@mgdis/stencil-helpers';\nimport { TabItem, sizes, Status, SizeType } from './mg-tabs.conf';\nimport { Keys } from '../../../utils/events.utils';\n\n/**\n * type TabItem validation function\n * @param tab - tab item\n * @returns tab item type is valid\n */\nconst isTabItem = (tab: unknown): tab is TabItem => typeof tab === 'object' && typeof (tab as TabItem).label === 'string';\n\n/**\n * @slot tab_content-n - Tab content, where `n` represents the position of the tab content. It starts at 1.\n */\n@Component({\n  tag: 'mg-tabs',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-tabs.css',\n  shadow: true,\n})\nexport class MgTabs {\n  /************\n   * Internal *\n   ************/\n\n  // classes\n  private readonly tabPanel = 'panel';\n  private readonly buttonTabBaseClass = 'mg-c-tabs__navigation-button';\n\n  // variables\n  private tabFocus: number;\n  private startIndex = 1;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTabsElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-tabs');\n  @Watch('identifier')\n  watchIdentifier(newValue: MgTabs['identifier']): void {\n    if (!isValideID(newValue)) {\n      console.error(`<mg-tabs> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\n  /**\n   * Tabs label. Include short tabs description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgTabs['label']): void {\n    if (!isValidString(newValue)) {\n      throw new Error(`<mg-tabs> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define tabs size\n   */\n  @Prop() size: SizeType = 'medium';\n  @Watch('size')\n  validateSize(newValue: MgTabs['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-tabs> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n    }\n    this.classCollection.add(`mg-c-tabs--size-${this.size}`);\n  }\n\n  /**\n   * Tabs items\n   */\n  @Prop() items!: string[] | TabItem[];\n  @Watch('items')\n  validateItems(newValue: MgTabs['items']): void {\n    // String array\n    if (allItemsAreString(newValue)) this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));\n    // Object array\n    else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem)) this.tabs = newValue;\n    else throw new Error(`<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);\n  }\n\n  /**\n   * Active tab number\n   */\n  @Prop({ reflect: true, mutable: true }) activeTab: number;\n  @Watch('activeTab')\n  validateActiveTab(newValue: MgTabs['activeTab']): void {\n    // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value\n    // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update\n    if (newValue === undefined) {\n      this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))\n        ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))\n        : this.startIndex;\n    } else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {\n      // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE\n      this.tabs.forEach((tab, index) => {\n        const isNewActiveTab = index === newValue - this.startIndex;\n        // reset active tabs\n        if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab) tab.status = Status.VISIBLE;\n        // set active tab from given tab key\n        else if (this.isActivableTab(tab) && isNewActiveTab) tab.status = Status.ACTIVE;\n      });\n      // emit change active tab key event\n      this.activeTabChange.emit(newValue);\n    } else {\n      throw new Error(\n        `<mg-tabs> prop \"activeTab\" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be \"activable\". Passed value: ${toString(newValue)}.`,\n      );\n    }\n  }\n\n  /**\n   * Component tabs\n   */\n  @State() tabs: TabItem[] = [];\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-tabs']);\n\n  /**\n   * Emited event when active tab change\n   */\n  @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<HTMLMgTabsElement['activeTab']>;\n\n  /**\n   * Validate that new tab status can be `Status.ACTIVE`\n   * @param tab - tab item\n   * @returns true when tab match condition to get a `Status.ACTIVE`\n   */\n  private isActivableTab = (tab: TabItem): boolean => [undefined, Status.ACTIVE, Status.VISIBLE].includes(tab.status);\n\n  /**\n   * Method to know if given tab has the given status\n   * @param tab - item tab key to set to ACTIVE status\n   * @param status - status to valide\n   * @returns status comparaison\n   */\n  private tabHasStatus = (tab: TabItem, status: TabItem['status']): boolean => tab.status === status;\n\n  /**\n   * Method to get element id from index\n   * @param element - to get id\n   * @param index - to generate id\n   * @returns generated element id\n   */\n  private getElementId = (element: string, index: number): string => `${element}-${this.getTabItemIndex(index)}`;\n\n  /**\n   * Method to get tab item index\n   * @param index - to get\n   * @returns index\n   */\n  private getTabItemIndex = (index: number): number => index + this.startIndex;\n\n  /**\n   * Handle click events on tabs\n   * @param event - mouse event\n   */\n  private handleClick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n    const tabId = event.currentTarget.dataset.index;\n    if (!this.isActivableTab(this.tabs[Number(tabId) - this.startIndex])) {\n      event.preventDefault();\n    } else {\n      this.activeTab = Number(tabId);\n      this.tabFocus = undefined;\n    }\n  };\n\n  /**\n   * get navigation button class from given status\n   * @param status - button tab status\n   * @returns button class/selector variant\n   */\n  private getNavigationButtonClass = (status: TabItem['status']): string => `${this.buttonTabBaseClass}--${status}`;\n\n  /**\n   * Handle keyboard event on tabs\n   * @param event - mouse event\n   */\n  private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n    const parent = event.target.parentElement;\n    if ([Keys.ARROWLEFT, Keys.ARROWRIGHT].includes(event.key)) {\n      this.tabFocus = Number(event.target.dataset.index);\n      parent.querySelector(`[data-index=\"${this.tabFocus}\"]`).setAttribute('tabindex', '-1');\n\n      // Move right\n      if (event.key === Keys.ARROWRIGHT) {\n        this.tabFocus++;\n        // If we're at the end, go to the start\n        if (this.tabFocus > this.tabs.length) this.tabFocus = this.startIndex;\n        // Move left\n      } else if (event.key === Keys.ARROWLEFT) {\n        this.tabFocus--;\n        // If we're at the start, move to the end\n        if (this.tabFocus < this.startIndex) this.tabFocus = this.tabs.length;\n      }\n\n      const parentButtonElement: HTMLButtonElement = parent.querySelector(`[data-index=\"${this.tabFocus}\"]`);\n      // if focus item is ['hidden'] we recursively repeat action\n      if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {\n        parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));\n        // else run focus methods on tabFocus element\n      } else {\n        parentButtonElement.setAttribute('tabindex', '0');\n        parentButtonElement.focus();\n      }\n    } else if (event.key === Keys.TAB) {\n      this.resetFocus();\n    }\n  };\n\n  /**\n   * Reset focus on document click\n   * @param event - mouse event\n   */\n  private handleDocumentClick = (event: MouseEvent & { target: HTMLElement }): void => {\n    if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n  };\n\n  /**\n   * Method to reset focus behavior\n   */\n  private resetFocus = (): void => {\n    // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process\n    nextTick(() => {\n      this.tabFocus = undefined;\n      Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n        tab.setAttribute('tabindex', this.activeTab - this.startIndex !== index ? '-1' : '0');\n      });\n    });\n  };\n\n  /**\n   * Validate slots setting\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children).filter(slot => slot.getAttribute('slot')?.includes('tab_content-'));\n    if (slots.length !== this.tabs.length) throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check tabs format\n    this.watchIdentifier(this.identifier);\n    this.validateLabel(this.label);\n    this.validateItems(this.items);\n    this.validateActiveTab(this.activeTab);\n    this.validateSize(this.size);\n    this.validateSlots();\n  }\n\n  /**\n   * add listners\n   */\n  componentDidLoad(): void {\n    document.addEventListener('click', this.handleDocumentClick, false);\n  }\n\n  /**\n   * remove listeners\n   */\n  disconnectedCallback(): void {\n    document.removeEventListener('keydown', this.handleDocumentClick);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        <header role=\"tablist\" aria-label={this.label} class=\"mg-c-tabs__header\">\n          {this.tabs.map((tab, index) => (\n            <button\n              key={tab.label}\n              role=\"tab\"\n              id={this.getElementId(this.identifier, index)}\n              class={{\n                [`${this.buttonTabBaseClass}`]: true,\n                [`${this.buttonTabBaseClass}--horizontal`]: true,\n                [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),\n                [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),\n                [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),\n              }}\n              tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n              aria-selected={this.tabHasStatus(tab, Status.ACTIVE).toString()}\n              aria-controls={this.getElementId(this.tabPanel, index)}\n              aria-disabled={this.tabHasStatus(tab, Status.DISABLED)}\n              onClick={this.handleClick}\n              onKeyDown={this.handleKeydown}\n              data-index={this.getTabItemIndex(index)}\n            >\n              {tab.icon !== undefined && <mg-icon icon={tab.icon}></mg-icon>}\n              {tab.label}\n              {tab.badge !== undefined && <mg-badge variant=\"text-color\" value={tab.badge.value} label={tab.badge.label} outline={tab.badge.role === 'information'}></mg-badge>}\n            </button>\n          ))}\n        </header>\n        {this.tabs.map((tab, index) => (\n          <article\n            key={tab.label}\n            role=\"tabpanel\"\n            id={this.getElementId(this.tabPanel, index)}\n            hidden={!this.tabHasStatus(tab, Status.ACTIVE)}\n            aria-labelledby={this.getElementId(this.identifier, index)}\n            tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n            class=\"mg-c-tabs__content-container\"\n          >\n            <slot name={this.getElementId('tab_content', index)}></slot>\n          </article>\n        ))}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/locales/en/messages.json

@@ -60,6 +60,12 @@
       "display": "Display password value",
       "hide": "Hide password value"
     },
+    "combobox": {
+      "notFound": "No elements match your input",
+      "notAvailable": "No elements available",
+      "loadMore": "Load more",
+      "search": "Search…"
+    },
     "text": {
       "helpText": {
         "email": "Expected format: name@example.com",
@@ -106,7 +112,8 @@
     "cancel": "Cancel",
     "close": "Close",
     "next": "next",
-    "previous": "previous"
+    "previous": "previous",
+    "reset": "reset"
   },
   "menuItem": {
     "badgeLabel": "Include notification(s)",

package/dist/collection/locales/fr/messages.json

@@ -60,6 +60,12 @@
       "display": "Afficher le mot de passe",
       "hide": "Masquer le mot de passe"
     },
+    "combobox": {
+      "notFound": "Aucun élément ne correspondont a votre saisie",
+      "notAvailable": "Aucun élément disponible",
+      "loadMore": "Afficher plus",
+      "search": "Recherche…"
+    },
     "text": {
       "helpText": {
         "email": "Format attendu : nom@exemple.fr",
@@ -106,7 +112,8 @@
     "cancel": "Annuler",
     "close": "Fermer",
     "next": "suivant",
-    "previous": "précédent"
+    "previous": "précédent",
+    "reset": "réinitialiser"
   },
   "menuItem": {
     "badgeLabel": "Notification(s) incluse(s)",