@mgdis/mg-components 5.28.2 → 6.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"mg-popover-content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;QAgC3B;;WAEG;QACK,sBAAiB,GAAG,GAAS,EAAE;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;2BAjBoB,KAAK;+BAKW,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;;IAc7E;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE,CAAC;YACxE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC7F,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;gBACxC,IAAI,CAAC,WAAW,IAAI,CACnB,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB;oBACnG,gEAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb;gBACD,4DAAK,KAAK,EAAC,6BAA6B;oBACtC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACpB;YACV,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\n  shadow: true,\n})\nexport class MgPopoverContent {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-c-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-popover-content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;QAgC3B;;WAEG;QACK,sBAAiB,GAAG,GAAS,EAAE;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;2BAjBoB,KAAK;+BAKW,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;;IAc7E;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE,CAAC;YACxE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9F,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,gEAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;gBACxC,IAAI,CAAC,WAAW,IAAI,CACnB,mFAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB;oBACnG,gEAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb;gBACD,4DAAK,KAAK,EAAC,6BAA6B;oBACtC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;gBACN,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACpB;YACV,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../../locales';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\n  shadow: true,\n})\nexport class MgPopoverContent {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}.`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-c-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -12,8 +12,9 @@ export class MgPopover {
          * @param event - mouse event
          */
         this.clickOutside = (event) => {
-            if (!this.disabled && event.target.closest('mg-popover') !== this.element && !event.target.closest(`[data-mg-popover-guard="${this.identifier}"]`))
+            if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard="${this.identifier}"]`) === null) {
                 this.display = false;
+            }
         };
         /**
          * Show popover
@@ -157,7 +158,7 @@ export class MgPopover {
         interactiveElement.setAttribute('aria-controls', this.identifier);
         interactiveElement.setAttribute('aria-expanded', `${this.display}`);
         const fallbackPlacements = [];
-        if (this.element.dataset.fallbackPlacement) {
+        if (this.element.dataset.fallbackPlacement !== undefined) {
             fallbackPlacements.push(this.element.dataset.fallbackPlacement);
         }
         // Create popperjs popover
@@ -204,7 +205,7 @@ export class MgPopover {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'a01aff00a17da32a72491629ba80ec51a34cdb0e' }, h("slot", { key: 'bb314190042b65bf899e34efac1781ce9230930f' }), h("slot", { key: 'daba0b8cb0b1b3b4637bb972da309a9afb73f99e', name: "content" })));
+        return (h(Host, { key: '15fa5513044a120adeb819495d416812bb4ffcbd' }, h("slot", { key: '12494b7755e17c52358b520fca56fdf9d73916a0' }), h("slot", { key: '75476669b6b75c9325e0142dac613bdb8140ff17', 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    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"]}
+{"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}\"]`) === 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    // 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 !== undefined) {\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"]}

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

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-redundant-roles */
 import { h } from "@stencil/core";
 import { initLocales } from "../../../locales";
 import { isValidString } from "@mgdis/stencil-helpers";
@@ -37,7 +36,7 @@ export class MgSkipLinks {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '2dac1b6dab0eb2634b803240325822ea3c8bae63', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'e050de2426d080ede6a2b983ec0f9452b0e0f43b', 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: 'dc5eeedabd3189f40a246bd5fe6da930928e3f22', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '178d8c46d62d8db10d43d6609efb15cbf429c207', 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-skip-links/mg-skip-links.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-skip-links.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-skip-links/mg-skip-links.tsx"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAOvD,MAAM,OAAO,WAAW;;QAgCtB;;oBAEY;QAEZ;;;WAGG;QACK,oBAAe,GAAG,CAAC,KAAkD,EAAQ,EAAE;YACrF,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC;;;IAtBF,aAAa,CAAC,KAAiB;QAC7B,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;YAC3J,MAAM,IAAI,KAAK,CAAC,yIAAyI,CAAC,CAAC;QAC7J,CAAC;IACH,CAAC;IAoBD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ;YACzF,2DAAI,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,MAAM,IAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI;gBAChB,SAAG,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IAC5E,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC,CACC,CACD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles */\nimport { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { SkipLink } from './mg-skip-links.conf';\nimport { initLocales } from '../../../locales';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-skip-links',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-skip-links.css',\n  shadow: true,\n})\nexport class MgSkipLinks {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgSkipLinksElement;\n\n  /**\n   * Skip links\n   */\n  @Prop() links: SkipLink[];\n  @Watch('links')\n  validateLinks(links: SkipLink[]): void {\n    if (links === undefined || links.length === 0 || links.some(link => !isValidString(link.href) || !link.href.startsWith('#') || !isValidString(link.label))) {\n      throw new Error(`<mg-skip-links> prop \"links\": Cannot be empty and each link must contains an href starting with a \"#\" and a non empty label attributes.`);\n    }\n  }\n\n  /**\n   * Emited event when link is clicked\n   */\n  @Event({ eventName: 'go-to-anchor' }) goToAnchor: EventEmitter<string>;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Handle link click and emit go-to-anchor event\n   * @param event - mouse event\n   */\n  private handleLinkCLick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n    event.currentTarget.blur();\n    this.goToAnchor.emit(event.currentTarget.getAttribute('href'));\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateLinks(this.links);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <nav class=\"mg-c-skip-links\" role=\"navigation\" aria-label={this.messages.skipLinks.navLabel}>\n        <ul class=\"mg-c-skip-links__list\" role=\"list\">\n          {this.links.map(link => (\n            <li key={link.href}>\n              <a class=\"mg-c-skip-links__link\" href={link.href} onClick={this.handleLinkCLick}>\n                {link.label}\n              </a>\n            </li>\n          ))}\n        </ul>\n      </nav>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-skip-links.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-skip-links/mg-skip-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAOvD,MAAM,OAAO,WAAW;;QAgCtB;;oBAEY;QAEZ;;;WAGG;QACK,oBAAe,GAAG,CAAC,KAAkD,EAAQ,EAAE;YACrF,KAAK,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC;;;IAtBF,aAAa,CAAC,KAAiB;QAC7B,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;YAC3J,MAAM,IAAI,KAAK,CAAC,yIAAyI,CAAC,CAAC;QAC7J,CAAC;IACH,CAAC;IAoBD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ;YACzF,2DAAI,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,MAAM,IAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,UAAI,GAAG,EAAE,IAAI,CAAC,IAAI;gBAChB,SAAG,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IAC5E,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC,CACC,CACD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { SkipLink } from './mg-skip-links.conf';\nimport { initLocales } from '../../../locales';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-skip-links',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-skip-links.css',\n  shadow: true,\n})\nexport class MgSkipLinks {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgSkipLinksElement;\n\n  /**\n   * Skip links\n   */\n  @Prop() links: SkipLink[];\n  @Watch('links')\n  validateLinks(links: SkipLink[]): void {\n    if (links === undefined || links.length === 0 || links.some(link => !isValidString(link.href) || !link.href.startsWith('#') || !isValidString(link.label))) {\n      throw new Error(`<mg-skip-links> prop \"links\": Cannot be empty and each link must contains an href starting with a \"#\" and a non empty label attributes.`);\n    }\n  }\n\n  /**\n   * Emited event when link is clicked\n   */\n  @Event({ eventName: 'go-to-anchor' }) goToAnchor: EventEmitter<string>;\n\n  /***********\n   * Methods *\n   **********/\n\n  /**\n   * Handle link click and emit go-to-anchor event\n   * @param event - mouse event\n   */\n  private handleLinkCLick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n    event.currentTarget.blur();\n    this.goToAnchor.emit(event.currentTarget.getAttribute('href'));\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateLinks(this.links);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <nav class=\"mg-c-skip-links\" role=\"navigation\" aria-label={this.messages.skipLinks.navLabel}>\n        <ul class=\"mg-c-skip-links__list\" role=\"list\">\n          {this.links.map(link => (\n            <li key={link.href}>\n              <a class=\"mg-c-skip-links__link\" href={link.href} onClick={this.handleLinkCLick}>\n                {link.label}\n              </a>\n            </li>\n          ))}\n        </ul>\n      </nav>\n    );\n  }\n}\n"]}

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

@@ -1,15 +1,14 @@
 /**
  * Available tabs items status
  */
-export var Status;
-(function (Status) {
-    Status["VISIBLE"] = "visible";
-    Status["HIDDEN"] = "hidden";
-    Status["DISABLED"] = "disabled";
-    Status["ACTIVE"] = "active";
-})(Status || (Status = {}));
+export const Status = {
+    VISIBLE: 'visible',
+    HIDDEN: 'hidden',
+    DISABLED: 'disabled',
+    ACTIVE: 'active',
+};
 /**
  * List of all possibles sizes
  */
-export const sizes = ['regular', 'large'];
+export const sizes = ['medium', 'large'];
 //# sourceMappingURL=mg-tabs.conf.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mg-tabs.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.conf.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,CAAN,IAAY,MAKX;AALD,WAAY,MAAM;IAChB,6BAAmB,CAAA;IACnB,2BAAiB,CAAA;IACjB,+BAAqB,CAAA;IACrB,2BAAiB,CAAA;AACnB,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB;AAaD;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport { MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/**\n * Available tabs items status\n */\nexport enum Status {\n  VISIBLE = 'visible',\n  HIDDEN = 'hidden',\n  DISABLED = 'disabled',\n  ACTIVE = 'active',\n}\n\n/**\n * type TabItem\n * use to match tabs items\n */\nexport type TabItem = {\n  label: string;\n  icon?: MgIcon['icon'];\n  badge?: Pick<MgBadge, 'value' | 'variant' | 'label'> & { role: 'notification' | 'information' };\n  status: Status;\n};\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'large'] as const;\n\n/**\n * Variant type from variants\n */\nexport type SizeType = (typeof sizes)[number];\n"]}
+{"version":3,"file":"mg-tabs.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.conf.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAA+B;IAChD,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;CACjB,CAAC;AAaF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import type { Size, Status as StatusType } from '../../../types';\nimport type { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport type { MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/**\n * Available tabs items status\n */\nexport const Status: Record<string, StatusType> = {\n  VISIBLE: 'visible',\n  HIDDEN: 'hidden',\n  DISABLED: 'disabled',\n  ACTIVE: 'active',\n};\n\n/**\n * type TabItem\n * use to match tabs items\n */\nexport type TabItem = {\n  label: string;\n  icon?: MgIcon['icon'];\n  badge?: Pick<MgBadge, 'value' | 'variant' | 'label'> & { role: 'notification' | 'information' };\n  status: StatusType;\n};\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['medium', 'large'] as const;\n\n/**\n * Variant type from variants\n */\nexport type SizeType = Size & (typeof sizes)[number];\n"]}

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { createID, ClassList, allItemsAreString, isValidString, nextTick } from "@mgdis/stencil-helpers";
+import { createID, ClassList, allItemsAreString, isValidString, nextTick, toString } from "@mgdis/stencil-helpers";
 import { sizes, Status } from "./mg-tabs.conf";
 /**
  * type TabItem validation function
@@ -103,6 +103,14 @@ export class MgTabs {
                 this.resetFocus();
             }
         };
+        /**
+         * Reset focus on document click
+         * @param event - mouse event
+         */
+        this.handleDocumentClick = (event) => {
+            if (event.target.closest('mg-tabs') !== this.element)
+                this.resetFocus();
+        };
         /**
          * Method to reset focus behavior
          */
@@ -125,7 +133,7 @@ export class MgTabs {
         };
         this.identifier = createID('mg-tabs');
         this.label = undefined;
-        this.size = 'regular';
+        this.size = 'medium';
         this.items = undefined;
         this.activeTab = undefined;
         this.tabs = [];
@@ -133,12 +141,12 @@ export class MgTabs {
     }
     validateLabel(newValue) {
         if (!isValidString(newValue)) {
-            throw new Error('<mg-tabs> prop "label" is required.');
+            throw new Error(`<mg-tabs> prop "label" is required and must be a string. Passed value: ${toString(newValue)}.`);
         }
     }
     validateSize(newValue) {
         if (!sizes.includes(newValue)) {
-            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
+            throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
         }
         this.classCollection.add(`mg-c-tabs--size-${this.size}`);
     }
@@ -150,7 +158,7 @@ export class MgTabs {
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
             this.tabs = newValue;
         else
-            throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
+            throw new Error(`<mg-tabs> prop "items" is required and all items must be the same type: TabItem. Passed value: ${toString(newValue)}.`);
     }
     validateActiveTab(newValue) {
         // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
@@ -175,7 +183,7 @@ export class MgTabs {
             this.activeTabChange.emit(newValue);
         }
         else {
-            throw new Error(`<mg-tabs> prop "activeTab" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be "activable".`);
+            throw new Error(`<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)}.`);
         }
     }
     /*************
@@ -196,17 +204,20 @@ export class MgTabs {
      * add listners
      */
     componentDidLoad() {
-        document.addEventListener('click', (event) => {
-            if (event.target.closest('mg-tabs') !== this.element)
-                this.resetFocus();
-        }, false);
+        document.addEventListener('click', this.handleDocumentClick, false);
+    }
+    /**
+     * remove listeners
+     */
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.handleDocumentClick);
     }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '9327c6fb0d13d41d82b50e2f4f79696916ef142f', class: this.classCollection.join() }, h("header", { key: 'b783c343af1e817a2ab231d803e8ecf32df52566', 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: '921ed990aa94ee26f04e8877bf7f5b88cef84516', class: this.classCollection.join() }, h("header", { key: '00cd0666617678f005459c2aa3005d0c6319429b', 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),
@@ -268,7 +279,7 @@ export class MgTabs {
                 "mutable": false,
                 "complexType": {
                     "original": "SizeType",
-                    "resolved": "\"large\" | \"regular\"",
+                    "resolved": "\"large\" | \"medium\"",
                     "references": {
                         "SizeType": {
                             "location": "import",
@@ -285,7 +296,7 @@ export class MgTabs {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "'regular'"
+                "defaultValue": "'medium'"
             },
             "items": {
                 "type": "unknown",

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 } 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\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.');\n    }\n  }\n\n  /**\n   * Define tabs size\n   */\n  @Prop() size: SizeType = 'regular';\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(', ')}`);\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.');\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(`<mg-tabs> prop \"activeTab\" must be a number between ${this.startIndex} and ${this.tabs.length} and new value must be \"activable\".`);\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: 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: 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   * 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.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(\n      'click',\n      (event: MouseEvent & { target: HTMLElement }) => {\n        if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n      },\n      false,\n    );\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 } 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\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.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

@@ -63,7 +63,7 @@
     "allRequired": "All fields are required",
     "allRequiredSingle": "The field is required"
   },
-  "message": {
+  "alert": {
     "closeButton": "Close message"
   },
   "modal": {

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

@@ -63,7 +63,7 @@
     "allRequired": "Tous les champs sont obligatoires",
     "allRequiredSingle": "Le champ est obligatoire"
   },
-  "message": {
+  "alert": {
     "closeButton": "Fermer le message"
   },
   "modal": {

package/dist/collection/types/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/collection/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Defines the possible values for size\n */\nexport type Size = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';\n\n/**\n * Defines the possible values for variant\n */\nexport type Variant = 'info' | 'success' | 'warning' | 'danger' | 'danger-alt' | 'primary' | 'secondary' | 'app' | 'light' | 'dark' | 'flat' | 'text-color' | 'link';\n\n/**\n * Defines the possible values for variantStyle\n */\nexport type VariantStyle = 'icon' | 'background' | 'bar-left' | 'full';\n\n/**\n * Defines the possible values for input error\n */\nexport type InputError = 'min' | 'max' | 'minMax' | 'required' | 'badInput';\n\n/**\n * Defines the possible values for status\n */\nexport type Status = 'visible' | 'hidden' | 'disabled' | 'active';\n\n/**\n * Define option type\n */\nexport type Option = {\n  title: string;\n  value: unknown;\n};\n"]}

package/dist/collection/utils/behaviors.utils.js

@@ -4,11 +4,10 @@
  * @returns truthy if element is mg-item-more
  */
 const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
-export var OverflowBehaviorElements;
-(function (OverflowBehaviorElements) {
-    OverflowBehaviorElements["BASE_INDEX"] = "data-overflow-base-index";
-    OverflowBehaviorElements["PROXY_INDEX"] = "data-overflow-proxy-index";
-})(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
+export const OverflowBehaviorElements = {
+    BASE_INDEX: 'data-overflow-base-index',
+    PROXY_INDEX: 'data-overflow-proxy-index',
+};
 export class OverflowBehavior {
     constructor(element, render) {
         this.element = element;
@@ -64,9 +63,9 @@ export class OverflowBehavior {
             [...this._baseChildren, this._moreElement].forEach((child) => {
                 acc.accWidth += child.offsetWidth;
                 const hasPreviuosItem = acc.previousItem !== null;
-                const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;
-                // if previous item is hidden AND is NOT more element we hidde current
-                // OR if item has an overflow we hidde current
+                const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.hasAttribute('hidden');
+                // if previous item is hidden AND is NOT more element we hide current
+                // OR if item has an overflow we hide current
                 // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
                 // ELSE current is a display item
                 this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
@@ -110,7 +109,7 @@ export class OverflowBehavior {
             }
         };
         /**
-         * Toggle element's hidde attribute
+         * Toggle element's hide attribute
          * @param element - element to toggle
          * @param isHidden - element is hidden
          */

package/dist/collection/utils/behaviors.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"behaviors.utils.js","sourceRoot":"","sources":["../../src/utils/behaviors.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n  BASE_INDEX = 'data-overflow-base-index',\n  PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(\n    private element: Element,\n    private render: () => HTMLElement,\n  ) {\n    if (this._resizeObserver === undefined) {\n      // add resize observer\n      this._resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => {\n          this.run(entry.contentRect.width);\n        });\n      });\n      this._resizeObserver.observe(this.element);\n    }\n    this.run();\n  }\n\n  /**********\n   * Public *\n   **********/\n\n  /**\n   * Disconnect ResizeObserver\n   */\n  public disconnect = (): void => {\n    this._resizeObserver.disconnect();\n  };\n\n  /************\n   * Internal *\n   ************/\n\n  /**\n   * run overflow behavior\n   * @param width - width of the container. Optional.\n   */\n  private run = (width?: number): void => {\n    if (this._moreElement === undefined) {\n      // set moreElement\n      this._moreElement = this.render();\n\n      // set children\n      this._baseChildren = this.getInteractiveItems(this.element);\n      if (isMgItemMore(this._moreElement)) {\n        this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n      }\n\n      // update children\n      this._baseChildren.forEach((child, index) => {\n        child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n        // set moreElement children\n        this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n      });\n    }\n\n    if (width !== undefined) this.updateDisplayedItems(width);\n  };\n\n  /**\n   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n   * @param element - element to parse\n   * @returns children\n   */\n  private getInteractiveItems = (element: Element) =>\n    (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n  /**\n   * Update displayed items in container from a given available space\n   * @param availableWidth - available width in container to display child items\n   */\n  private updateDisplayedItems = (availableWidth: number): void => {\n    this.restoreItems();\n    const acc = { accWidth: 0, previousItem: null };\n    [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement | HTMLMgItemMoreElement) => {\n      acc.accWidth += child.offsetWidth;\n      const hasPreviuosItem = acc.previousItem !== null;\n      const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;\n      // if previous item is hidden AND is NOT more element we hidde current\n      // OR if item has an overflow we hidde current\n      // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n      // ELSE current is a display item\n      this.toggleItem(\n        child,\n        (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden),\n      );\n\n      // update previous item with current item\n      acc.previousItem = child;\n    });\n  };\n\n  /**\n   * Utility method to know if item overflow partialy or totaly in the container\n   * @param cumulateWidth - previous sibling elements cumulate width + item width\n   * @param item - item HTML element\n   * @param availableWidth - container available width\n   * @returns truthy if element is overflow\n   */\n  private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n    if (item.previousElementSibling === null || this.isMoreElement(item)) return false;\n    else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n    else return cumulateWidth > availableWidth;\n  };\n\n  /**\n   * Utility method to know if a given element is the 'MORE' element\n   * @param element - element to match with 'MORE' element\n   * @returns truthy if element is the 'MORE' element\n   */\n  private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n  /**\n   * Toggle display item element\n   * @param item - item to control\n   * @param isHidden - is item hidden\n   */\n  private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n    const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n    if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n    else if (mgActionMenuindex >= 0) {\n      this.toggleElement(item, isHidden);\n      this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n    }\n  };\n\n  /**\n   * Toggle element's hidde attribute\n   * @param element - element to toggle\n   * @param isHidden - element is hidden\n   */\n  private toggleElement = (element: Element, isHidden: boolean): void => {\n    if (isHidden) element.setAttribute('hidden', '');\n    else element.removeAttribute('hidden');\n  };\n\n  /**\n   * Remove hidden attributes on all items\n   */\n  private restoreItems = (): void => {\n    [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n  };\n}\n"]}
+{"version":3,"file":"behaviors.utils.js","sourceRoot":"","sources":["../../src/utils/behaviors.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport const OverflowBehaviorElements = {\n  BASE_INDEX: 'data-overflow-base-index',\n  PROXY_INDEX: 'data-overflow-proxy-index',\n};\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(\n    private element: Element,\n    private render: () => HTMLElement,\n  ) {\n    if (this._resizeObserver === undefined) {\n      // add resize observer\n      this._resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => {\n          this.run(entry.contentRect.width);\n        });\n      });\n      this._resizeObserver.observe(this.element);\n    }\n    this.run();\n  }\n\n  /**********\n   * Public *\n   **********/\n\n  /**\n   * Disconnect ResizeObserver\n   */\n  public disconnect = (): void => {\n    this._resizeObserver.disconnect();\n  };\n\n  /************\n   * Internal *\n   ************/\n\n  /**\n   * run overflow behavior\n   * @param width - width of the container. Optional.\n   */\n  private run = (width?: number): void => {\n    if (this._moreElement === undefined) {\n      // set moreElement\n      this._moreElement = this.render();\n\n      // set children\n      this._baseChildren = this.getInteractiveItems(this.element);\n      if (isMgItemMore(this._moreElement)) {\n        this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n      }\n\n      // update children\n      this._baseChildren.forEach((child, index) => {\n        child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n        // set moreElement children\n        this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n      });\n    }\n\n    if (width !== undefined) this.updateDisplayedItems(width);\n  };\n\n  /**\n   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n   * @param element - element to parse\n   * @returns children\n   */\n  private getInteractiveItems = (element: Element) =>\n    (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n  /**\n   * Update displayed items in container from a given available space\n   * @param availableWidth - available width in container to display child items\n   */\n  private updateDisplayedItems = (availableWidth: number): void => {\n    this.restoreItems();\n    const acc = { accWidth: 0, previousItem: null };\n    [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement | HTMLMgItemMoreElement) => {\n      acc.accWidth += child.offsetWidth;\n      const hasPreviuosItem = acc.previousItem !== null;\n      const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.hasAttribute('hidden');\n      // if previous item is hidden AND is NOT more element we hide current\n      // OR if item has an overflow we hide current\n      // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n      // ELSE current is a display item\n      this.toggleItem(\n        child,\n        (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden),\n      );\n\n      // update previous item with current item\n      acc.previousItem = child;\n    });\n  };\n\n  /**\n   * Utility method to know if item overflow partialy or totaly in the container\n   * @param cumulateWidth - previous sibling elements cumulate width + item width\n   * @param item - item HTML element\n   * @param availableWidth - container available width\n   * @returns truthy if element is overflow\n   */\n  private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n    if (item.previousElementSibling === null || this.isMoreElement(item)) return false;\n    else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n    else return cumulateWidth > availableWidth;\n  };\n\n  /**\n   * Utility method to know if a given element is the 'MORE' element\n   * @param element - element to match with 'MORE' element\n   * @returns truthy if element is the 'MORE' element\n   */\n  private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n  /**\n   * Toggle display item element\n   * @param item - item to control\n   * @param isHidden - is item hidden\n   */\n  private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n    const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n    if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n    else if (mgActionMenuindex >= 0) {\n      this.toggleElement(item, isHidden);\n      this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n    }\n  };\n\n  /**\n   * Toggle element's hide attribute\n   * @param element - element to toggle\n   * @param isHidden - element is hidden\n   */\n  private toggleElement = (element: Element, isHidden: boolean): void => {\n    if (isHidden) element.setAttribute('hidden', '');\n    else element.removeAttribute('hidden');\n  };\n\n  /**\n   * Remove hidden attributes on all items\n   */\n  private restoreItems = (): void => {\n    [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n  };\n}\n"]}

package/dist/collection/utils/playwright.fixture.js

@@ -9,11 +9,11 @@ export const test = base.extend({
             }, html);
         };
         // Add lib JS
-        await page.addScriptTag({ url: 'http://localhost:3333/build/mg-components.esm.js', type: 'module' });
+        await page.addScriptTag({ url: 'http://localhost:8080/mg-components/dist/mg-components//mg-components.esm.js', type: 'module' });
         // Add lib CSS
-        await page.addStyleTag({ url: 'http://localhost:3333/build/mg-components.css' });
+        await page.addStyleTag({ url: 'http://localhost:8080/mg-components/dist/mg-components//mg-components.css' });
         // Add screenshot CSS
-        await page.addStyleTag({ content: '.e2e-screenshot{display:inline-block}' });
+        await page.addStyleTag({ content: 'body{margin:0;--mg-b-font-family:"Ubuntu",sans-serif}.e2e-screenshot{display:inline-block}' });
         // Make sure everything is loaded
         await page.waitForLoadState('networkidle');
         await page.locator('html.hydrated').waitFor({ state: 'attached' });

package/dist/collection/utils/playwright.fixture.js.map

@@ -1 +1 @@
-{"version":3,"file":"playwright.fixture.js","sourceRoot":"","sources":["../../src/utils/playwright.fixture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAiB;IAC9C,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;QAC5B,2DAA2D;QAC3D,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE,IAAY,EAAE,EAAE;YACvC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAY,EAAE,EAAE;gBACnC,0BAA0B;gBAC1B,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,gCAAgC,IAAI,SAAS,CAAC;YAC1E,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC;QACF,aAAa;QACb,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,kDAAkD,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;QACrG,cAAc;QACd,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,+CAA+C,EAAE,CAAC,CAAC;QACjF,qBAAqB;QACrB,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,uCAAuC,EAAE,CAAC,CAAC;QAC7E,iCAAiC;QACjC,MAAM,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAC3C,MAAM,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;QACnE,oBAAoB;QACpB,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;CACF,CAAC,CAAC","sourcesContent":["import { test as base } from '@playwright/test';\n\nexport const test = base.extend<{ page: void }>({\n  page: async ({ page }, use) => {\n    // Override setContent method to keep style and script tags\n    page.setContent = async (html: string) => {\n      await page.evaluate((html: string) => {\n        // Add content to the body\n        document.body.innerHTML = `<span class=\"e2e-screenshot\">${html}</span>`;\n      }, html);\n    };\n    // Add lib JS\n    await page.addScriptTag({ url: 'http://localhost:3333/build/mg-components.esm.js', type: 'module' });\n    // Add lib CSS\n    await page.addStyleTag({ url: 'http://localhost:3333/build/mg-components.css' });\n    // Add screenshot CSS\n    await page.addStyleTag({ content: '.e2e-screenshot{display:inline-block}' });\n    // Make sure everything is loaded\n    await page.waitForLoadState('networkidle');\n    await page.locator('html.hydrated').waitFor({ state: 'attached' });\n    // Use extended page\n    await use(page);\n  },\n});\n"]}
+{"version":3,"file":"playwright.fixture.js","sourceRoot":"","sources":["../../src/utils/playwright.fixture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEhD,MAAM,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAiB;IAC9C,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;QAC5B,2DAA2D;QAC3D,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE,IAAY,EAAE,EAAE;YACvC,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAY,EAAE,EAAE;gBACnC,0BAA0B;gBAC1B,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,gCAAgC,IAAI,SAAS,CAAC;YAC1E,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC;QACF,aAAa;QACb,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,8EAA8E,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;QACjI,cAAc;QACd,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,2EAA2E,EAAE,CAAC,CAAC;QAC7G,qBAAqB;QACrB,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,4FAA4F,EAAE,CAAC,CAAC;QAClI,iCAAiC;QACjC,MAAM,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAC3C,MAAM,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;QACnE,oBAAoB;QACpB,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC;CACF,CAAC,CAAC","sourcesContent":["import { test as base } from '@playwright/test';\n\nexport const test = base.extend<{ page: void }>({\n  page: async ({ page }, use) => {\n    // Override setContent method to keep style and script tags\n    page.setContent = async (html: string) => {\n      await page.evaluate((html: string) => {\n        // Add content to the body\n        document.body.innerHTML = `<span class=\"e2e-screenshot\">${html}</span>`;\n      }, html);\n    };\n    // Add lib JS\n    await page.addScriptTag({ url: 'http://localhost:8080/mg-components/dist/mg-components//mg-components.esm.js', type: 'module' });\n    // Add lib CSS\n    await page.addStyleTag({ url: 'http://localhost:8080/mg-components/dist/mg-components//mg-components.css' });\n    // Add screenshot CSS\n    await page.addStyleTag({ content: 'body{margin:0;--mg-b-font-family:\"Ubuntu\",sans-serif}.e2e-screenshot{display:inline-block}' });\n    // Make sure everything is loaded\n    await page.waitForLoadState('networkidle');\n    await page.locator('html.hydrated').waitFor({ state: 'attached' });\n    // Use extended page\n    await use(page);\n  },\n});\n"]}