@mgdis/mg-components 5.27.0 → 5.27.2

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

@@ -1 +1 @@
-{"version":3,"file":"mg-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '@mgdis/stencil-helpers';\nimport { variants, VariantType } from './mg-message.conf';\nimport { initLocales } from '../../../locales';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n@Component({\n  tag: 'mg-message',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n  shadow: true,\n})\nexport class MgMessage {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classHide = 'mg-c-message--hide';\n\n  // IDs\n  private closeButtonId = '';\n\n  // Stored timer setted when hide action is run from setTimeOut\n  private storedTimer: ReturnType<typeof setTimeout> = null;\n\n  // Manage hover\n  private isFocused = false;\n  private isHovered = false;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMessageElement;\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-message');\n\n  /**\n   * Add a delay to hide/close message when it passed\n   * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)\n   */\n  @Prop() delay?: number;\n  @Watch('delay')\n  validateDelay(newValue: MgMessage['delay']): void {\n    if (newValue !== undefined && newValue < 2) {\n      throw new Error(`<mg-message> prop \"delay\" must be greater than 2 seconds.`);\n    }\n  }\n\n  /**\n   * Message variant\n   */\n  @Prop() variant: VariantType = variants[0]; // info\n  @Watch('variant')\n  validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-message--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-message--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if message has a cross button\n   * RG 01: https://jira.mgdis.fr/browse/PDA9-140\n   */\n  @Prop({ mutable: true }) closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgMessage['closeButton']): void {\n    if (newValue && this.hasActions) {\n      this.closeButton = false;\n      throw new Error('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n    }\n  }\n\n  /**\n   * Define if message is hidden\n   */\n  @Prop({ mutable: true }) hide = false;\n  @Watch('hide')\n  validateHide(newValue: MgMessage['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      // Remove event Listener\n      ['focusin', 'mouseenter'].forEach(event => {\n        this.element.removeEventListener(event, this.timerEvents);\n      });\n      // Clear Timer\n      this.clearTimer();\n    } else {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      // If delay is set\n      if (this.delay > 1) {\n        // Start timer\n        this.setTimer();\n        // Stop timer when get focus or mouse enter\n        ['focusin', 'mouseenter'].forEach(event => {\n          this.element.addEventListener(event, this.timerEvents);\n        });\n      }\n    }\n  }\n\n  /**\n   * Define if aria role is unset\n   * For a11y reasons, `<mg-message />` was design for `alert` needs with attached semantic role: `status`, `alert`.\n   * By toggle this props to `true`, you can unset the role to benefit from the template without any semantic role.\n   * Be careful to set the mode according to the context needs.\n   */\n  @Prop() noAriaRole?: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Emited event when message is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emited event when message is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Set timer\n   */\n  private setTimer = (): void => {\n    this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);\n  };\n\n  /**\n   * Clear timer\n   */\n  private clearTimer = (): void => {\n    clearTimeout(this.storedTimer);\n  };\n\n  /**\n   * Event to add on element\n   * @param event - event\n   */\n  private timerEvents = (event: MouseEvent | FocusEvent): void => {\n    this.clearTimer();\n    const isMouseEvent: boolean = event.type === 'mouseenter';\n    // Needed to ensure we don't start the timer\n    this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n    // Restart timer when loose focus AND mouse leave\n    this.element.addEventListener(\n      isMouseEvent ? 'mouseleave' : 'focusout',\n      eventOut => {\n        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n        // Start timer if needed\n        if (!this.isFocused && !this.isHovered) this.setTimer();\n      },\n      { once: true },\n    );\n  };\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /**\n   * Get icon corresponding to variant\n   * @returns icon\n   */\n  private getIcon = (): MgIcon['icon'] => {\n    switch (this.variant) {\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'exclamation-triangle';\n      case 'success':\n        return 'check-circle';\n      case 'danger':\n        return 'exclamation-circle';\n      default:\n        break;\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateVariant(this.variant);\n    // Check if close button is an can be activated\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.validateCloseButton(this.closeButton);\n    if (this.closeButton) {\n      this.classCollection.add('mg-c-message--close-button');\n      this.closeButtonId = `${this.identifier}-close-button`;\n    }\n    this.validateDelay(this.delay);\n    this.validateHide(this.hide);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    let role;\n\n    if (!this.noAriaRole) role = this.variant === 'info' ? 'status' : 'alert';\n\n    return (\n      <div id={this.identifier} class={this.classCollection.join()} role={role}>\n        <mg-card variant={this.variant} variant-style=\"bar-left\">\n          <span class=\"mg-c-message__icon\">\n            <mg-icon icon={this.getIcon()}></mg-icon>\n          </span>\n          <div class=\"mg-c-message__content\">\n            <span class=\"mg-c-message__content-slot\">\n              <slot></slot>\n            </span>\n            {this.hasActions && <span class=\"mg-c-message__content-separator\"></span>}\n            {this.hasActions && (\n              <span class=\"mg-c-message__content-actions-slot\">\n                <slot name=\"actions\"></slot>\n              </span>\n            )}\n          </div>\n          {this.closeButton && (\n            <span class=\"mg-c-message__close-button\">\n              <mg-button identifier={this.closeButtonId} is-icon variant=\"flat\" label={this.messages.message.closeButton} onClick={this.handleClose}>\n                <mg-icon icon=\"cross\"></mg-icon>\n              </mg-button>\n            </span>\n          )}\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '@mgdis/stencil-helpers';\nimport { variants, VariantType } from './mg-message.conf';\nimport { initLocales } from '../../../locales';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/*\n * @slot - Message content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-message',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-message.css',\n  shadow: true,\n})\nexport class MgMessage {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classHide = 'mg-c-message--hide';\n\n  // IDs\n  private closeButtonId = '';\n\n  // Stored timer setted when hide action is run from setTimeOut\n  private storedTimer: ReturnType<typeof setTimeout> = null;\n\n  // Manage hover\n  private isFocused = false;\n  private isHovered = false;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMessageElement;\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-message');\n\n  /**\n   * Add a delay to hide/close message when it passed\n   * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)\n   */\n  @Prop() delay?: number;\n  @Watch('delay')\n  validateDelay(newValue: MgMessage['delay']): void {\n    if (newValue !== undefined && newValue < 2) {\n      throw new Error(`<mg-message> prop \"delay\" must be greater than 2 seconds.`);\n    }\n  }\n\n  /**\n   * Message variant\n   */\n  @Prop() variant: VariantType = variants[0]; // info\n  @Watch('variant')\n  validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-message--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-message--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if message has a cross button\n   * RG 01: https://jira.mgdis.fr/browse/PDA9-140\n   */\n  @Prop({ mutable: true }) closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgMessage['closeButton']): void {\n    if (newValue && this.hasActions) {\n      this.closeButton = false;\n      throw new Error('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n    }\n  }\n\n  /**\n   * Define if message is hidden\n   */\n  @Prop({ mutable: true }) hide = false;\n  @Watch('hide')\n  validateHide(newValue: MgMessage['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      // Remove event Listener\n      ['focusin', 'mouseenter'].forEach(event => {\n        this.element.removeEventListener(event, this.timerEvents);\n      });\n      // Clear Timer\n      this.clearTimer();\n    } else {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      // If delay is set\n      if (this.delay > 1) {\n        // Start timer\n        this.setTimer();\n        // Stop timer when get focus or mouse enter\n        ['focusin', 'mouseenter'].forEach(event => {\n          this.element.addEventListener(event, this.timerEvents);\n        });\n      }\n    }\n  }\n\n  /**\n   * Define if aria role is unset\n   * For a11y reasons, `<mg-message />` was design for `alert` needs with attached semantic role: `status`, `alert`.\n   * By toggle this props to `true`, you can unset the role to benefit from the template without any semantic role.\n   * Be careful to set the mode according to the context needs.\n   */\n  @Prop() noAriaRole?: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-message']);\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Emited event when message is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emited event when message is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Set timer\n   */\n  private setTimer = (): void => {\n    this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);\n  };\n\n  /**\n   * Clear timer\n   */\n  private clearTimer = (): void => {\n    clearTimeout(this.storedTimer);\n  };\n\n  /**\n   * Event to add on element\n   * @param event - event\n   */\n  private timerEvents = (event: MouseEvent | FocusEvent): void => {\n    this.clearTimer();\n    const isMouseEvent: boolean = event.type === 'mouseenter';\n    // Needed to ensure we don't start the timer\n    this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n    // Restart timer when loose focus AND mouse leave\n    this.element.addEventListener(\n      isMouseEvent ? 'mouseleave' : 'focusout',\n      eventOut => {\n        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n        // Start timer if needed\n        if (!this.isFocused && !this.isHovered) this.setTimer();\n      },\n      { once: true },\n    );\n  };\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /**\n   * Get icon corresponding to variant\n   * @returns icon\n   */\n  private getIcon = (): MgIcon['icon'] => {\n    switch (this.variant) {\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'exclamation-triangle';\n      case 'success':\n        return 'check-circle';\n      case 'danger':\n        return 'exclamation-circle';\n      default:\n        break;\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateVariant(this.variant);\n    // Check if close button is an can be activated\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.validateCloseButton(this.closeButton);\n    if (this.closeButton) {\n      this.classCollection.add('mg-c-message--close-button');\n      this.closeButtonId = `${this.identifier}-close-button`;\n    }\n    this.validateDelay(this.delay);\n    this.validateHide(this.hide);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    let role;\n\n    if (!this.noAriaRole) role = this.variant === 'info' ? 'status' : 'alert';\n\n    return (\n      <div id={this.identifier} class={this.classCollection.join()} role={role}>\n        <mg-card variant={this.variant} variant-style=\"bar-left\">\n          <span class=\"mg-c-message__icon\">\n            <mg-icon icon={this.getIcon()}></mg-icon>\n          </span>\n          <div class=\"mg-c-message__content\">\n            <span class=\"mg-c-message__content-slot\">\n              <slot></slot>\n            </span>\n            {this.hasActions && <span class=\"mg-c-message__content-separator\"></span>}\n            {this.hasActions && (\n              <span class=\"mg-c-message__content-actions-slot\">\n                <slot name=\"actions\"></slot>\n              </span>\n            )}\n          </div>\n          {this.closeButton && (\n            <span class=\"mg-c-message__close-button\">\n              <mg-button identifier={this.closeButtonId} is-icon variant=\"flat\" label={this.messages.message.closeButton} onClick={this.handleClose}>\n                <mg-icon icon=\"cross\"></mg-icon>\n              </mg-button>\n            </span>\n          )}\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -2,6 +2,10 @@ import { h } from "@stencil/core";
 import { createID, ClassList, focusableElements, isValidString } from "@mgdis/stencil-helpers";
 import { initLocales } from "../../../locales";
 import { dialogRoles } from "./mg-modal.conf";
+/*
+ * @slot content - Modal content
+ * @slot actions - Actions content
+ */
 export class MgModal {
     constructor() {
         /************
@@ -152,14 +156,14 @@ export class MgModal {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'cc3a33438dcf5ec90831f5bb39ddb0de558063ab', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: '18a6cf3cd69c667573489b051de9f15aa853784d' }, h("div", { key: '5e856e4a0ed625ffa1879d35efa27b5292ea3f11', class: "mg-c-modal__dialog" }, h("header", { key: 'fb701088cdd08194f68cf22920cd1d30ef24db0b', class: "mg-c-modal__header" }, this.closeButton && (h("span", { class: "mg-c-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
+        return (h("div", { key: '472cae1bd3a5291e14265d00ee594c726f179a1f', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", { key: '870e59e1126988fefe5c04380b5bbd593e8629af' }, h("div", { key: '9d49127cf8bf68b55549f379b760c6597b1a2d6c', class: "mg-c-modal__dialog" }, h("header", { key: 'b8629ece3524f5dd64b248080fa06f21980ddf7b', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'f38d648290d1db901fb2cc09ae8b8ed13bf7e0b6', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'b12aecfd77b5fb7588c3b2f6487c10c2cba9f097', identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
                 if (el !== null) {
                     // store closeButton Element
                     this.closeButtonElement = el;
                     // add close button element to modalFocusableElements when it is render
                     this.modalFocusableElements.unshift(this.closeButtonElement);
                 }
-            } }, h("mg-icon", { icon: "cross" })))), h("h1", { key: '2b99fc7fc7440a3c9899a88f1bd138a36500df94', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-c-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-c-modal__footer" }, h("slot", { name: "actions" })))))));
+            } }, h("mg-icon", { key: '2e5590b14d6b4da659f4f6d8630606a9bafdb9c6', icon: "cross" })))), h("h1", { key: '6ca12328af9955d0716c330c32004c68cca11b4c', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { key: '0873f01de1bfe75c2e91ea89b762d433006e7878', class: "mg-c-modal__content" }, h("slot", { key: 'dd8fd2e6527d640c40261dcbae76846d107337dc', name: "content" }))), this.hasActions && (h("footer", { key: 'e97c6d3ad9bbca892afcabeb5b15e63425d05070', class: "mg-c-modal__footer" }, h("slot", { key: 'c865f0b4244f5ea4ed5e7733813a8b10bc985504', name: "actions" })))))));
     }
     static get is() { return "mg-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-modal/mg-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n@Component({\n  tag: 'mg-modal',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css',\n  shadow: true,\n})\nexport class MgModal {\n  /************\n   * Internal *\n   ************/\n\n  // Modal focusable elements\n  private modalFocusableElements: HTMLElement[] = [];\n  private closeButtonElement: HTMLMgButtonElement;\n\n  // Classes\n  private readonly classHide = 'mg-c-modal--hide';\n\n  // IDs\n  private titleId = '';\n\n  // Locales\n  private messages;\n\n  // body overflow default\n  private bodyOverflow: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgModalElement;\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-modal');\n\n  /**\n   * Modal dialog role.\n   */\n  @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n  @Watch('dialogRole')\n  validateDialogRole(newValue: MgModal['dialogRole']): void {\n    if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n  }\n\n  /**\n   * Displayed modal title\n   */\n  @Prop() modalTitle!: string;\n  @Watch('modalTitle')\n  validateModalTitle(newValue: MgModal['modalTitle']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-modal> prop \"modalTitle\" is required.');\n    }\n  }\n\n  /**\n   * Define if modal has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Define if modal is hidden\n   */\n  @Prop({ mutable: true }) hide: boolean;\n  @Watch('hide')\n  validateHide(newValue: MgModal['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      document.body.style.overflow = this.bodyOverflow;\n      // reset focus handlers\n      this.getLastFocusableElement()?.removeEventListener('keydown', this.handleLastFocusableElement);\n      if (this.modalFocusableElements.length > 0) this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);\n    } else if (newValue === false) {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      document.body.style.overflow = 'hidden';\n      this.setFocus();\n    }\n  }\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Define if component is using content slot\n   */\n  @State() hasContent = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-modal']);\n\n  /**\n   * Emmited event when modal is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emmited event when modal is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Handle 'escape' key down\n   * @param event - keydown event\n   */\n  @Listen('keydown', {\n    target: 'window',\n  })\n  handleKeyDown(event: KeyboardEvent): void {\n    // we can use 'Escape button\" when this not a blocking modal, induced by closeButton value.\n    if (this.closeButton && event.key === 'Escape') {\n      this.hide = true;\n    }\n  }\n\n  /**\n   * Handle last focusable element\n   * @param event - keyboard event\n   */\n  private handleLastFocusableElement = (event): void => {\n    if (event.key === 'Tab' && !event.shiftKey) {\n      event.preventDefault();\n      this.modalFocusableElements[0].focus();\n    }\n  };\n\n  /**\n   * Handle first focusable element\n   * @param event - keyboard event\n   */\n  private handleFirstFocusableElement = (event): void => {\n    if (event.key === 'Tab' && event.shiftKey) {\n      event.preventDefault();\n      this.getLastFocusableElement().focus();\n    }\n  };\n\n  /**\n   * Get last focusablmeElement\n   * @returns last modal focusable element\n   */\n  private getLastFocusableElement = (): HTMLElement | null => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);\n\n  /**\n   * Method to manage focus on modal focusable elements\n   */\n  private setFocus = (): void => {\n    // Get all focusable elements\n    const slottedFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n    // If close button is enabled or at least one of the slotted element is focusable\n    if (this.closeButton || slottedFocusableElements.length > 0) {\n      // Check if slotted focusable elements have shadowDom with focusable elements\n      this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {\n        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);\n        return acc;\n      }, []);\n      // When close button is enabled it's the first focusable element.\n      if (this.closeButton && this.closeButtonElement !== undefined) {\n        this.modalFocusableElements.unshift(this.closeButtonElement);\n      }\n      // Add event listener on last element\n      this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);\n      // Add event listener on first element (case shift + tab)\n      this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);\n    }\n  };\n\n  /*************\n   * Handlers *\n   *************/\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Store body overflow\n    this.bodyOverflow = document.body.style.overflow;\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.hasContent = this.element.querySelector('[slot=\"content\"]') !== null;\n    this.titleId = `${this.identifier}-title`;\n    this.validateModalTitle(this.modalTitle);\n    this.validateHide(this.hide);\n    this.validateDialogRole(this.dialogRole);\n  }\n\n  /**\n   * Add observer on component to set focus when displayed\n   */\n  componentDidLoad(): void {\n    new MutationObserver(mutationList => {\n      // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation\n      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes((mutation.target as HTMLElement).ariaHidden))) {\n        // Set focus on first element\n        this.modalFocusableElements[0].focus();\n      }\n    }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div role={this.dialogRole} id={this.identifier} class={this.classCollection.join()} tabindex=\"-1\" aria-labelledby={this.titleId} aria-modal=\"true\" aria-hidden={this.hide}>\n        <mg-card>\n          <div class=\"mg-c-modal__dialog\">\n            <header class=\"mg-c-modal__header\">\n              {this.closeButton && (\n                <span class=\"mg-c-modal__close-button\">\n                  <mg-button\n                    identifier={`${this.identifier}-close-button`}\n                    is-icon\n                    variant=\"flat\"\n                    label={this.messages.modal.closeButton}\n                    onClick={this.handleClose}\n                    ref={(el: HTMLMgButtonElement) => {\n                      if (el !== null) {\n                        // store closeButton Element\n                        this.closeButtonElement = el;\n                        // add close button element to modalFocusableElements when it is render\n                        this.modalFocusableElements.unshift(this.closeButtonElement);\n                      }\n                    }}\n                  >\n                    <mg-icon icon=\"cross\"></mg-icon>\n                  </mg-button>\n                </span>\n              )}\n              <h1 class=\"mg-c-modal__title\" id={this.titleId}>\n                {this.modalTitle}\n              </h1>\n            </header>\n\n            {this.hasContent && (\n              <article class=\"mg-c-modal__content\">\n                <slot name=\"content\"></slot>\n              </article>\n            )}\n\n            {this.hasActions && (\n              <footer class=\"mg-c-modal__footer\">\n                <slot name=\"actions\"></slot>\n              </footer>\n            )}\n          </div>\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-modal.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-modal/mg-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { DialogRoleType, dialogRoles } from './mg-modal.conf';\n\n/*\n * @slot content - Modal content\n * @slot actions - Actions content\n */\n@Component({\n  tag: 'mg-modal',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css',\n  shadow: true,\n})\nexport class MgModal {\n  /************\n   * Internal *\n   ************/\n\n  // Modal focusable elements\n  private modalFocusableElements: HTMLElement[] = [];\n  private closeButtonElement: HTMLMgButtonElement;\n\n  // Classes\n  private readonly classHide = 'mg-c-modal--hide';\n\n  // IDs\n  private titleId = '';\n\n  // Locales\n  private messages;\n\n  // body overflow default\n  private bodyOverflow: string;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgModalElement;\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-modal');\n\n  /**\n   * Modal dialog role.\n   */\n  @Prop() dialogRole: DialogRoleType = dialogRoles[0];\n  @Watch('dialogRole')\n  validateDialogRole(newValue: MgModal['dialogRole']): void {\n    if (!dialogRoles.includes(newValue)) throw new Error(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n  }\n\n  /**\n   * Displayed modal title\n   */\n  @Prop() modalTitle!: string;\n  @Watch('modalTitle')\n  validateModalTitle(newValue: MgModal['modalTitle']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-modal> prop \"modalTitle\" is required.');\n    }\n  }\n\n  /**\n   * Define if modal has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Define if modal is hidden\n   */\n  @Prop({ mutable: true }) hide: boolean;\n  @Watch('hide')\n  validateHide(newValue: MgModal['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      document.body.style.overflow = this.bodyOverflow;\n      // reset focus handlers\n      this.getLastFocusableElement()?.removeEventListener('keydown', this.handleLastFocusableElement);\n      if (this.modalFocusableElements.length > 0) this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);\n    } else if (newValue === false) {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      document.body.style.overflow = 'hidden';\n      this.setFocus();\n    }\n  }\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Define if component is using content slot\n   */\n  @State() hasContent = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-modal']);\n\n  /**\n   * Emmited event when modal is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<void>;\n\n  /**\n   * Emmited event when modal is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<void>;\n\n  /**\n   * Handle 'escape' key down\n   * @param event - keydown event\n   */\n  @Listen('keydown', {\n    target: 'window',\n  })\n  handleKeyDown(event: KeyboardEvent): void {\n    // we can use 'Escape button\" when this not a blocking modal, induced by closeButton value.\n    if (this.closeButton && event.key === 'Escape') {\n      this.hide = true;\n    }\n  }\n\n  /**\n   * Handle last focusable element\n   * @param event - keyboard event\n   */\n  private handleLastFocusableElement = (event): void => {\n    if (event.key === 'Tab' && !event.shiftKey) {\n      event.preventDefault();\n      this.modalFocusableElements[0].focus();\n    }\n  };\n\n  /**\n   * Handle first focusable element\n   * @param event - keyboard event\n   */\n  private handleFirstFocusableElement = (event): void => {\n    if (event.key === 'Tab' && event.shiftKey) {\n      event.preventDefault();\n      this.getLastFocusableElement().focus();\n    }\n  };\n\n  /**\n   * Get last focusablmeElement\n   * @returns last modal focusable element\n   */\n  private getLastFocusableElement = (): HTMLElement | null => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);\n\n  /**\n   * Method to manage focus on modal focusable elements\n   */\n  private setFocus = (): void => {\n    // Get all focusable elements\n    const slottedFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n    // If close button is enabled or at least one of the slotted element is focusable\n    if (this.closeButton || slottedFocusableElements.length > 0) {\n      // Check if slotted focusable elements have shadowDom with focusable elements\n      this.modalFocusableElements = slottedFocusableElements.reduce((acc, focusableElement) => {\n        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);\n        return acc;\n      }, []);\n      // When close button is enabled it's the first focusable element.\n      if (this.closeButton && this.closeButtonElement !== undefined) {\n        this.modalFocusableElements.unshift(this.closeButtonElement);\n      }\n      // Add event listener on last element\n      this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);\n      // Add event listener on first element (case shift + tab)\n      this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);\n    }\n  };\n\n  /*************\n   * Handlers *\n   *************/\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Store body overflow\n    this.bodyOverflow = document.body.style.overflow;\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.hasContent = this.element.querySelector('[slot=\"content\"]') !== null;\n    this.titleId = `${this.identifier}-title`;\n    this.validateModalTitle(this.modalTitle);\n    this.validateHide(this.hide);\n    this.validateDialogRole(this.dialogRole);\n  }\n\n  /**\n   * Add observer on component to set focus when displayed\n   */\n  componentDidLoad(): void {\n    new MutationObserver(mutationList => {\n      // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation\n      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes((mutation.target as HTMLElement).ariaHidden))) {\n        // Set focus on first element\n        this.modalFocusableElements[0].focus();\n      }\n    }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div role={this.dialogRole} id={this.identifier} class={this.classCollection.join()} tabindex=\"-1\" aria-labelledby={this.titleId} aria-modal=\"true\" aria-hidden={this.hide}>\n        <mg-card>\n          <div class=\"mg-c-modal__dialog\">\n            <header class=\"mg-c-modal__header\">\n              {this.closeButton && (\n                <span class=\"mg-c-modal__close-button\">\n                  <mg-button\n                    identifier={`${this.identifier}-close-button`}\n                    is-icon\n                    variant=\"flat\"\n                    label={this.messages.modal.closeButton}\n                    onClick={this.handleClose}\n                    ref={(el: HTMLMgButtonElement) => {\n                      if (el !== null) {\n                        // store closeButton Element\n                        this.closeButtonElement = el;\n                        // add close button element to modalFocusableElements when it is render\n                        this.modalFocusableElements.unshift(this.closeButtonElement);\n                      }\n                    }}\n                  >\n                    <mg-icon icon=\"cross\"></mg-icon>\n                  </mg-button>\n                </span>\n              )}\n              <h1 class=\"mg-c-modal__title\" id={this.titleId}>\n                {this.modalTitle}\n              </h1>\n            </header>\n\n            {this.hasContent && (\n              <article class=\"mg-c-modal__content\">\n                <slot name=\"content\"></slot>\n              </article>\n            )}\n\n            {this.hasActions && (\n              <footer class=\"mg-c-modal__footer\">\n                <slot name=\"actions\"></slot>\n              </footer>\n            )}\n          </div>\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -95,10 +95,10 @@ export class MgPagination {
      * @returns HTML Element
      */
     render() {
-        const navigationActionButton = (disabled, action) => (h("mg-button", { key: '762b566216021bdfdcbfea249c7a1dbfa409c831', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
+        const navigationActionButton = (disabled, action) => (h("mg-button", { key: 'b708c70615e0fb49d1628dc6cf83e54ea5ab0a61', identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
             // eslint-disable-next-line react/jsx-no-bind
-            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
-        return (h(Host, { key: '9bfc7cd582798b28f847f1be74bc966a10afaf01', hidden: this.totalPages < 2 }, h("nav", { key: 'e79017c814781d4452868bb2f50a71682c4da1f1', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { key: '5e9cdd8126ee7d00db9199d5b738d76f651c8585', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: '55d248aabdc782a0e3a06b28fd2df36aca4733b0', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+            onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { key: '1c8375c68fd7729fb7ea91220ffb4f7267ac3a47', icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { key: '1af0c20c2d5ce86e593b2eca82dee410a782c193', icon: "chevron-right" })));
+        return (h(Host, { key: '4490a0b9d3c0ac55519d052b4d76ab8f682f0f3a', hidden: this.totalPages < 2 }, h("nav", { key: 'eaf362cd327e88290f3af5dcfd1d46fff6178ff9', role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { key: '06c9786c833302a4ee88ed7f2217875112ee7a20', identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { key: '7877dbee55a509b13c8cf881154d96bbe1c5cee7', class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { key: 'd4615625b40108526f7aaa8f8a8505b2a61e43e9', class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
     }
     static get is() { return "mg-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-pagination.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,IAAI,GAAG,CAAC,EAAY,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;AAO3J,MAAM,OAAO,YAAY;;QAsEvB;;;WAGG;QACK,aAAQ,GAAG,CAAC,MAAc,EAAQ,EAAE;YAC1C,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;QAC5B,CAAC,CAAC;QAEF;;sBAEc;QAEd;;;WAGG;QACK,iBAAY,GAAG,CAAC,KAAgD,EAAQ,EAAE;YAChF,MAAM,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACtC,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF;;;;WAIG;QACK,mBAAc,GAAG,CAAC,MAAc,EAAE,QAAiB,EAAQ,EAAE;YACnE,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;QAC7G,CAAC,CAAC;0BA7E2B,QAAQ,CAAC,eAAe,CAAC;;;;0BAqBjC,CAAC;2BAWgC,CAAC;;IATvD,kBAAkB,CAAC,QAAgB;QACjC,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;QAC9E,CAAC;IACH,CAAC;IAOD,mBAAmB,CAAC,QAAgB;QAClC,IAAI,QAAQ,GAAG,CAAC,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;QAC/E,CAAC;aAAM,IAAI,QAAQ,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YACtC,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAC;QAC3F,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAqCD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;QACnD,WAAW;QACX,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC3C,oBAAoB;QACpB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YAClD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC;QAC9C,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,sBAAsB,GAAG,CAAC,QAAiB,EAAE,MAAc,EAAE,EAAE,CAAC,CACpE,kEACE,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,WAAW,MAAM,EAAE,EACjD,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAG,MAAM,MAAM,CAAC;YAChD,6CAA6C;YAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,CAAC,EACpD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,IAAI,CAAC,oBAAoB;YAEhC,MAAM,KAAK,gBAAgB,CAAC,QAAQ,IAAI,eAAS,IAAI,EAAC,cAAc,GAAW;YAC/E,CAAC,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC;YAC3D,MAAM,KAAK,gBAAgB,CAAC,IAAI,IAAI,eAAS,IAAI,EAAC,eAAe,GAAW,CACnE,CACb,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,MAAM,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC;YAC/B,4DAAK,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,KAAK,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,kCAAkC,EAAE,IAAI,CAAC,aAAa,EAAE;gBAC3J,sBAAsB,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC;gBACxE,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,uBACE,UAAU,EAAE,GAAG,IAAI,CAAC,UAAU,SAAS,EACvC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAC7D,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,UAAU,gBAC9B,IAAI,qBACC,IAAI,CAAC,YAAY,EAClC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,6BAEjB,CACpB;gBACD,6DAAM,KAAK,EAAC,sBAAsB;oBAC/B,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI;;oBAAG,IAAI,CAAC,WAAW,CAC5C;gBACP,6DAAM,KAAK,EAAE,EAAE,sBAAsB,EAAE,IAAI,CAAC,aAAa,EAAE;;oBACtD,IAAI,CAAC,UAAU;;oBAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CACpG;gBACN,sBAAsB,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAC/E,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '@mgdis/stencil-helpers';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n  tag: 'mg-pagination',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n  shadow: true,\n})\nexport class MgPagination {\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: HTMLMgPaginationElement;\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-pagination');\n\n  /**\n   * Panignation label. Is a short description.\n   * Customize default value can be usefull to improve accessibility\n   */\n  @Prop({ mutable: true }) label: string;\n\n  /**\n   * Hide navigation label\n   */\n  @Prop() hideNavigationLabels?: boolean;\n\n  /**\n   * Hide select input\n   */\n  @Prop() hidePageCount?: boolean;\n\n  /**\n   * Component total pages\n   */\n  @Prop() totalPages = 1;\n  @Watch('totalPages')\n  validateTotalPages(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n    }\n  }\n\n  /**\n   * Component current page\n   */\n  @Prop({ reflect: true, mutable: true }) currentPage = 1;\n  @Watch('currentPage')\n  validateCurrentPage(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n    } else if (newValue > this.totalPages) {\n      throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n    }\n\n    this.currentPageChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when current page change\n   */\n  @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n  /**\n   * Change current page from target\n   * @param target - target page\n   */\n  private goToPage = (target: number): void => {\n    this.currentPage = target;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * select handler\n   * @param event - value change event\n   */\n  private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n    const to = Number(event.target.value);\n    this.goToPage(to > 0 ? to : 1);\n  };\n\n  /**\n   * Go to 'previous/next' page button handler\n   * @param action - navigation action\n   * @param disabled - button disable state\n   */\n  private handleGoToPage = (action: string, disabled: boolean): void => {\n    !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateTotalPages(this.totalPages);\n    this.validateCurrentPage(this.currentPage);\n    // Set default label\n    if (this.label === undefined || this.label === '') {\n      this.label = this.messages.pagination.label;\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const navigationActionButton = (disabled: boolean, action: string) => (\n      <mg-button\n        identifier={`${this.identifier}-button-${action}`}\n        label={this.messages.pagination[`${action}Page`]}\n        // eslint-disable-next-line react/jsx-no-bind\n        onClick={() => this.handleGoToPage(action, disabled)}\n        disabled={disabled}\n        variant=\"flat\"\n        isIcon={this.hideNavigationLabels}\n      >\n        {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n        {!this.hideNavigationLabels && this.messages.general[action]}\n        {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n      </mg-button>\n    );\n\n    return (\n      <Host hidden={this.totalPages < 2}>\n        <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n          {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n          {!this.hidePageCount && (\n            <mg-input-select\n              identifier={`${this.identifier}-select`}\n              items={range(1, this.totalPages).map(page => page.toString())}\n              label={this.messages.pagination.selectPage}\n              label-hide={true}\n              on-value-change={this.handleSelect}\n              value={this.currentPage.toString()}\n              placeholder-hide\n            ></mg-input-select>\n          )}\n          <span class=\"mg-u-visually-hidden\">\n            {this.messages.pagination.page} {this.currentPage}\n          </span>\n          <span class={{ 'mg-u-visually-hidden': this.hidePageCount }}>\n            / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n          </span>\n          {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-pagination.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '@mgdis/stencil-helpers';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/**\n * Range generator\n *\n * ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n *\n * range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n */\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);\n\n@Component({\n  tag: 'mg-pagination',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n  shadow: true,\n})\nexport class MgPagination {\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: HTMLMgPaginationElement;\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-pagination');\n\n  /**\n   * Panignation label. Is a short description.\n   * Customize default value can be usefull to improve accessibility\n   */\n  @Prop({ mutable: true }) label: string;\n\n  /**\n   * Hide navigation label\n   */\n  @Prop() hideNavigationLabels?: boolean;\n\n  /**\n   * Hide select input\n   */\n  @Prop() hidePageCount?: boolean;\n\n  /**\n   * Component total pages\n   */\n  @Prop() totalPages = 1;\n  @Watch('totalPages')\n  validateTotalPages(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n    }\n  }\n\n  /**\n   * Component current page\n   */\n  @Prop({ reflect: true, mutable: true }) currentPage = 1;\n  @Watch('currentPage')\n  validateCurrentPage(newValue: number): void {\n    if (newValue < 1) {\n      throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n    } else if (newValue > this.totalPages) {\n      throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n    }\n\n    this.currentPageChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when current page change\n   */\n  @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n  /**\n   * Change current page from target\n   * @param target - target page\n   */\n  private goToPage = (target: number): void => {\n    this.currentPage = target;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * select handler\n   * @param event - value change event\n   */\n  private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n    const to = Number(event.target.value);\n    this.goToPage(to > 0 ? to : 1);\n  };\n\n  /**\n   * Go to 'previous/next' page button handler\n   * @param action - navigation action\n   * @param disabled - button disable state\n   */\n  private handleGoToPage = (action: string, disabled: boolean): void => {\n    !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateTotalPages(this.totalPages);\n    this.validateCurrentPage(this.currentPage);\n    // Set default label\n    if (this.label === undefined || this.label === '') {\n      this.label = this.messages.pagination.label;\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const navigationActionButton = (disabled: boolean, action: string) => (\n      <mg-button\n        identifier={`${this.identifier}-button-${action}`}\n        label={this.messages.pagination[`${action}Page`]}\n        // eslint-disable-next-line react/jsx-no-bind\n        onClick={() => this.handleGoToPage(action, disabled)}\n        disabled={disabled}\n        variant=\"flat\"\n        isIcon={this.hideNavigationLabels}\n      >\n        {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n        {!this.hideNavigationLabels && this.messages.general[action]}\n        {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n      </mg-button>\n    );\n\n    return (\n      <Host hidden={this.totalPages < 2}>\n        <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n          {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n          {!this.hidePageCount && (\n            <mg-input-select\n              identifier={`${this.identifier}-select`}\n              items={range(1, this.totalPages).map(page => page.toString())}\n              label={this.messages.pagination.selectPage}\n              label-hide={true}\n              on-value-change={this.handleSelect}\n              value={this.currentPage.toString()}\n              placeholder-hide\n            ></mg-input-select>\n          )}\n          <span class=\"mg-u-visually-hidden\">\n            {this.messages.pagination.page} {this.currentPage}\n          </span>\n          <span class={{ 'mg-u-visually-hidden': this.hidePageCount }}>\n            / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n          </span>\n          {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -2,6 +2,10 @@ import { h } from "@stencil/core";
 import { createID, ClassList, isValidString } from "@mgdis/stencil-helpers";
 import { initLocales } from "../../../locales";
 import { expandToggleDisplays, titlePositions } from "./mg-panel.conf";
+/*
+ * @slot - Panel content
+ * @slot header-right - Header right panel content
+ */
 export class MgPanel {
     constructor() {
         /************
@@ -161,7 +165,7 @@ export class MgPanel {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '0f4e6da36c14880761294b950aef7273fb3b254e', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '3f604c637fb25eb7a236efb26d4c9da7c106cada' }, h("header", { key: '86b24eee8ab6a59789579ccee766e34ce1b60206', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '054a9aee122a1273aa431750daa15d2e5cfec316', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: 'b2daff9ba6ebe460c849f33e019bfd6583376451' })))));
+        return (h("section", { key: 'd01136210425cb7790aab87d6c137ba74fc02af5', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '84084da775de623fd20c069de5e49d2542755907' }, h("header", { key: '9f3ef1d0d7b2dc275d0c7b39175e0f775cbb1e1b', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '4b6cd2b1b604515d657368642fe21b21eb33b55b', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '45db8591e0b85ed5e9704dc1a42fa75d24e96e39' })))));
     }
     static get is() { return "mg-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n@Component({\n  tag: 'mg-panel',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n  shadow: true,\n})\nexport class MgPanel {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private editInputElement: HTMLMgInputTextElement;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPanelElement;\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-panel');\n\n  /**\n   * Panel title\n   */\n  @Prop({ mutable: true }) panelTitle!: string;\n  @Watch('panelTitle')\n  validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n    if (!isValidString(newValue)) throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n    this.titleChange.emit(newValue);\n  }\n\n  /**\n   * Panel title pattern\n   */\n  @Prop() titlePattern?: string;\n\n  /**\n   * Panel title pattern error message\n   */\n  @Prop() titlePatternErrorMessage?: string;\n  @Watch('titlePattern')\n  @Watch('titlePatternErrorMessage')\n  validateTitlePattern(newValue: string): void {\n    if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n  }\n\n  /**\n   * Define if panel title is editable\n   */\n  @Prop({ mutable: true }) titleEditable = false;\n\n  /**\n   * Define title position\n   */\n  @Prop() titlePosition: TitlePositionType = titlePositions[0];\n  @Watch('titlePosition')\n  validateTitlePosition(newValue: MgPanel['titlePosition']) {\n    if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n  }\n\n  /**\n   * Panel is opened\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: MgPanel['expanded']): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Define expand toggle button display\n   */\n  @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n  @Watch('expandToggleDisplay')\n  validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n    if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n    if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n  }\n\n  /**\n   * Disable possibility to toggle expand\n   */\n  @Prop() expandToggleDisabled?: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n  /**\n   * Title is in edition mode\n   */\n  @State() isEditing = false;\n\n  /**\n   * Cache for updated panel title before validation\n   */\n  @State() updatedPanelTitle: string;\n\n  /**\n   * Emmited event when title change\n   */\n  @Event({ eventName: 'title-change' }) titleChange: EventEmitter<HTMLMgPanelElement['panelTitle']>;\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgPanelElement['expanded']>;\n\n  /************\n   * Methods *\n   ************/\n\n  /**\n   * Toggle is editing state\n   */\n  private toggleIsEditing = (): void => {\n    this.isEditing = !this.isEditing;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Collapse button click handler\n   */\n  private handleCollapseButton = (): void => {\n    if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n  };\n\n  /**\n   * Edit button click handler\n   */\n  private handleEditButton = (): void => {\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Update title handler\n   * @param event - input value change event\n   */\n  private handleUpdateTitle = (event: CustomEvent<string>): void => {\n    this.updatedPanelTitle = event.detail;\n  };\n\n  /**\n   * Cancel edition button handler\n   */\n  private handleCancelEditButton = (): void => {\n    this.updatedPanelTitle = undefined;\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Validate edition button handler\n   */\n  private handleValidateEditButton = (): void => {\n    if (!this.editInputElement.valid) return;\n    if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n    this.toggleIsEditing();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateTitlePattern(this.titlePattern);\n    this.validateTitlePattern(this.titlePatternErrorMessage);\n    this.validatePanelTitle(this.panelTitle);\n    this.validateExpandToggleDisplay(this.expandToggleDisplay);\n    this.validateTitlePosition(this.titlePosition);\n  }\n\n  /**\n   * Edit DOM after render\n   */\n  componentDidRender(): void {\n    // when we are editing we get focus on edition input\n    if (this.isEditing) this.editInputElement.setFocus();\n  }\n\n  /*************\n   * Render *\n   *************/\n\n  /**\n   * Render collapse button\n   * @returns collpase button\n   */\n  private renderCollapseButton = (): HTMLMgButtonElement => (\n    <mg-button\n      onClick={this.handleCollapseButton}\n      variant=\"flat\"\n      identifier={`${this.identifier}-collapse-button`}\n      aria-expanded={this.expanded.toString()}\n      aria-controls={`${this.identifier}-content`}\n      disabled={this.expandToggleDisabled}\n      isIcon={this.expandToggleDisplay === 'icon'}\n      label={this.panelTitle}\n    >\n      <span class=\"mg-c-panel__collapse-button-content\">\n        <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n        {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n      </span>\n    </mg-button>\n  );\n\n  /**\n   * Render edit button\n   * @returns edit Button\n   */\n  private renderEditButton = (): HTMLMgButtonElement => (\n    <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n      <mg-icon icon=\"pen\"></mg-icon>\n    </mg-button>\n  );\n\n  /**\n   * Render input button\n   * @returns edit title input\n   */\n  private renderEditInput = (): HTMLMgInputTextElement => (\n    <mg-input-text\n      key=\"edition-input\"\n      label={this.messages.panel.editLabel}\n      label-hide\n      value={this.panelTitle}\n      onValue-change={this.handleUpdateTitle}\n      displayCharacterLeft={false}\n      pattern={this.titlePattern}\n      pattern-error-message={this.titlePatternErrorMessage}\n      identifier={`${this.identifier}-edition-input`}\n      ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n    >\n      <mg-button\n        slot=\"append-input\"\n        label={this.messages.general.cancel}\n        is-icon\n        variant=\"secondary\"\n        onClick={this.handleCancelEditButton}\n        identifier={`${this.identifier}-edition-button-cancel`}\n      >\n        <mg-icon icon=\"cross\"></mg-icon>\n      </mg-button>\n      <mg-button\n        slot=\"append-input\"\n        label={this.messages.general.confirm}\n        is-icon\n        variant=\"secondary\"\n        onClick={this.handleValidateEditButton}\n        identifier={`${this.identifier}-edition-button-validate`}\n      >\n        <mg-icon icon=\"check\"></mg-icon>\n      </mg-button>\n    </mg-input-text>\n  );\n\n  /**\n   * Render title\n   * @returns title element\n   */\n  private renderTitle = (): HTMLElement[] => {\n    const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n    if (this.titleEditable) {\n      if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n      else elementsToRender.push(this.renderEditInput());\n    }\n\n    return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n  };\n\n  /**\n   * Render header children\n   * @returns header child\n   */\n  private renderHeaderChildren = (): HTMLElement[] => {\n    const children = [\n      <div\n        class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n        key={this.panelTitle}\n      >\n        {this.renderTitle()}\n      </div>,\n      <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n        <slot name=\"header-right\"></slot>\n      </div>,\n    ];\n    return this.titlePosition === 'right' ? children.reverse() : children;\n  };\n\n  /**\n   * Render component\n   * @returns rendered component\n   */\n  render(): HTMLElement {\n    const headerId = `${this.identifier}-header`;\n    return (\n      <section class={this.classCollection.join()} id={this.identifier}>\n        <mg-card>\n          <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n            {this.renderHeaderChildren()}\n          </header>\n          <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n            <slot></slot>\n          </article>\n        </mg-card>\n      </section>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString } from '@mgdis/stencil-helpers';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n/*\n * @slot - Panel content\n * @slot header-right - Header right panel content\n */\n@Component({\n  tag: 'mg-panel',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n  shadow: true,\n})\nexport class MgPanel {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private editInputElement: HTMLMgInputTextElement;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPanelElement;\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-panel');\n\n  /**\n   * Panel title\n   */\n  @Prop({ mutable: true }) panelTitle!: string;\n  @Watch('panelTitle')\n  validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n    if (!isValidString(newValue)) throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n    this.titleChange.emit(newValue);\n  }\n\n  /**\n   * Panel title pattern\n   */\n  @Prop() titlePattern?: string;\n\n  /**\n   * Panel title pattern error message\n   */\n  @Prop() titlePatternErrorMessage?: string;\n  @Watch('titlePattern')\n  @Watch('titlePatternErrorMessage')\n  validateTitlePattern(newValue: string): void {\n    if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n  }\n\n  /**\n   * Define if panel title is editable\n   */\n  @Prop({ mutable: true }) titleEditable = false;\n\n  /**\n   * Define title position\n   */\n  @Prop() titlePosition: TitlePositionType = titlePositions[0];\n  @Watch('titlePosition')\n  validateTitlePosition(newValue: MgPanel['titlePosition']) {\n    if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n  }\n\n  /**\n   * Panel is opened\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: MgPanel['expanded']): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Define expand toggle button display\n   */\n  @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n  @Watch('expandToggleDisplay')\n  validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n    if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n    if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n  }\n\n  /**\n   * Disable possibility to toggle expand\n   */\n  @Prop() expandToggleDisabled?: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n  /**\n   * Title is in edition mode\n   */\n  @State() isEditing = false;\n\n  /**\n   * Cache for updated panel title before validation\n   */\n  @State() updatedPanelTitle: string;\n\n  /**\n   * Emmited event when title change\n   */\n  @Event({ eventName: 'title-change' }) titleChange: EventEmitter<HTMLMgPanelElement['panelTitle']>;\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<HTMLMgPanelElement['expanded']>;\n\n  /************\n   * Methods *\n   ************/\n\n  /**\n   * Toggle is editing state\n   */\n  private toggleIsEditing = (): void => {\n    this.isEditing = !this.isEditing;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Collapse button click handler\n   */\n  private handleCollapseButton = (): void => {\n    if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n  };\n\n  /**\n   * Edit button click handler\n   */\n  private handleEditButton = (): void => {\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Update title handler\n   * @param event - input value change event\n   */\n  private handleUpdateTitle = (event: CustomEvent<string>): void => {\n    this.updatedPanelTitle = event.detail;\n  };\n\n  /**\n   * Cancel edition button handler\n   */\n  private handleCancelEditButton = (): void => {\n    this.updatedPanelTitle = undefined;\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Validate edition button handler\n   */\n  private handleValidateEditButton = (): void => {\n    if (!this.editInputElement.valid) return;\n    if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n    this.toggleIsEditing();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateTitlePattern(this.titlePattern);\n    this.validateTitlePattern(this.titlePatternErrorMessage);\n    this.validatePanelTitle(this.panelTitle);\n    this.validateExpandToggleDisplay(this.expandToggleDisplay);\n    this.validateTitlePosition(this.titlePosition);\n  }\n\n  /**\n   * Edit DOM after render\n   */\n  componentDidRender(): void {\n    // when we are editing we get focus on edition input\n    if (this.isEditing) this.editInputElement.setFocus();\n  }\n\n  /*************\n   * Render *\n   *************/\n\n  /**\n   * Render collapse button\n   * @returns collpase button\n   */\n  private renderCollapseButton = (): HTMLMgButtonElement => (\n    <mg-button\n      onClick={this.handleCollapseButton}\n      variant=\"flat\"\n      identifier={`${this.identifier}-collapse-button`}\n      aria-expanded={this.expanded.toString()}\n      aria-controls={`${this.identifier}-content`}\n      disabled={this.expandToggleDisabled}\n      isIcon={this.expandToggleDisplay === 'icon'}\n      label={this.panelTitle}\n    >\n      <span class=\"mg-c-panel__collapse-button-content\">\n        <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n        {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n      </span>\n    </mg-button>\n  );\n\n  /**\n   * Render edit button\n   * @returns edit Button\n   */\n  private renderEditButton = (): HTMLMgButtonElement => (\n    <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n      <mg-icon icon=\"pen\"></mg-icon>\n    </mg-button>\n  );\n\n  /**\n   * Render input button\n   * @returns edit title input\n   */\n  private renderEditInput = (): HTMLMgInputTextElement => (\n    <mg-input-text\n      key=\"edition-input\"\n      label={this.messages.panel.editLabel}\n      label-hide\n      value={this.panelTitle}\n      onValue-change={this.handleUpdateTitle}\n      displayCharacterLeft={false}\n      pattern={this.titlePattern}\n      pattern-error-message={this.titlePatternErrorMessage}\n      identifier={`${this.identifier}-edition-input`}\n      ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n    >\n      <mg-button\n        slot=\"append-input\"\n        label={this.messages.general.cancel}\n        is-icon\n        variant=\"secondary\"\n        onClick={this.handleCancelEditButton}\n        identifier={`${this.identifier}-edition-button-cancel`}\n      >\n        <mg-icon icon=\"cross\"></mg-icon>\n      </mg-button>\n      <mg-button\n        slot=\"append-input\"\n        label={this.messages.general.confirm}\n        is-icon\n        variant=\"secondary\"\n        onClick={this.handleValidateEditButton}\n        identifier={`${this.identifier}-edition-button-validate`}\n      >\n        <mg-icon icon=\"check\"></mg-icon>\n      </mg-button>\n    </mg-input-text>\n  );\n\n  /**\n   * Render title\n   * @returns title element\n   */\n  private renderTitle = (): HTMLElement[] => {\n    const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n    if (this.titleEditable) {\n      if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n      else elementsToRender.push(this.renderEditInput());\n    }\n\n    return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n  };\n\n  /**\n   * Render header children\n   * @returns header child\n   */\n  private renderHeaderChildren = (): HTMLElement[] => {\n    const children = [\n      <div\n        class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n        key={this.panelTitle}\n      >\n        {this.renderTitle()}\n      </div>,\n      <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n        <slot name=\"header-right\"></slot>\n      </div>,\n    ];\n    return this.titlePosition === 'right' ? children.reverse() : children;\n  };\n\n  /**\n   * Render component\n   * @returns rendered component\n   */\n  render(): HTMLElement {\n    const headerId = `${this.identifier}-header`;\n    return (\n      <section class={this.classCollection.join()} id={this.identifier}>\n        <mg-card>\n          <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n            {this.renderHeaderChildren()}\n          </header>\n          <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n            <slot></slot>\n          </article>\n        </mg-card>\n      </section>\n    );\n  }\n}\n"]}

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

@@ -1,6 +1,9 @@
 import { Host, h } from "@stencil/core";
 import { isTagName, ClassList } from "@mgdis/stencil-helpers";
 import { initLocales } from "../../../../locales";
+/**
+ * @internal
+ */
 export class MgPopoverContent {
     constructor() {
         /**
@@ -37,7 +40,7 @@ export class MgPopoverContent {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'e7344c0999adb28766413b2b5cdb2a682d0761ac' }, h("mg-card", { key: '04e73d6b68b89bd915a5ce9ebcc6a4c06742b6f1', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { key: 'e2d30d49368722078c32edb5d95191fa2f03af22', class: "mg-c-popover-content__title" }, h("slot", { key: '0aee7ff2b06f57ff5256a2420c75ed987b48975b', name: "title" })), h("slot", { key: '2d2ec48ad494aeec5554572dbd3b1620856ac5ba', name: "content" })), h("slot", { key: '90d1985eeaf2d7424b9418d2e7ce26ef6bc35efe', name: "arrow" })));
+        return (h(Host, { key: 'ffe73fca1c2d8ffa0f5ac2359b50a453b37df7be' }, h("mg-card", { key: 'f6e04d90892104abf496cf3ca3a601cb747346c9', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { key: '53b6f7360b07321c0433fb2f44f1b1dd9016f204', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: 'aa638786bca9af815d36e1de905559d60e68e44c', icon: "cross" }))), h("div", { key: '0b9f1319e409a0b1d75d16236806fd024c8b804e', class: "mg-c-popover-content__title" }, h("slot", { key: '7f52704d2ed49ea048ffd06b763a238d288ccaf3', name: "title" })), h("slot", { key: '7a2fd6b013e592acb616793439b2f4e8458ec372', name: "content" })), h("slot", { key: 'ceb0a6453ece1b861fe5ab3d63e803b1f41cb148', name: "arrow" })));
     }
     static get is() { return "mg-popover-content"; }
     static get encapsulation() { return "shadow"; }

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;AAOlD,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,kCAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB;oBACnG,eAAS,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@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,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"]}

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

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

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

@@ -37,7 +37,7 @@ export class MgSkipLinks {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: 'c66cf3fb09a459865bb10f21a7f1b7c1c04eec87', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'a8855a047dc8352df52ac16ca9c9a4b7ccf100c0', 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: '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)))))));
     }
     static get is() { return "mg-skip-links"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,6 +7,9 @@ import { sizes, Status } from "./mg-tabs.conf";
  * @returns tab item type is valid
  */
 const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
+/**
+ * @slot tab_content-n - Tab content, where `n` represents the position of the tab content. It starts at 1.
+ */
 export class MgTabs {
     constructor() {
         /************
@@ -203,7 +206,7 @@ export class MgTabs {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '0a0e2fdcb11b2dd79803cc114a429b2ef4cc3c89', class: this.classCollection.join() }, h("header", { key: '332ba66756df3c83dcec8daf2d83386f5f93a6bb', 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: '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: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),