@mgdis/mg-components 5.27.1 → 5.27.3

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/*\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"]}
+{"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

@@ -165,7 +165,7 @@ export class MgPanel {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '75509a6a7fdba04cea71380d46f5d0b66bbc9602', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '8ec07f87babeae31db85b5181d5884119010e8ce' }, h("header", { key: '045e43ab54c95691e1c4b758504bffc995f63340', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '096d93e147c30c6ece4a6a3f5ee3acff05dc5143', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '37f2d61903662b519e583eca0ca90c044386e539' })))));
+        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-popover/mg-popover-content/mg-popover-content.js

@@ -40,7 +40,7 @@ export class MgPopoverContent {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'e2ec01fc83727038047673eb89fa7a1fc6b90abe' }, h("mg-card", { key: '2ba199e78605edc19a6a0ddefb5a6749d80f6119', 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: '1b6275e0da818d3f5606a9a49974f85b2aedda8a', class: "mg-c-popover-content__title" }, h("slot", { key: '6205bd6ccfba59e5526388b2f24251f5ff6cb6dc', name: "title" })), h("slot", { key: 'f1bc97234ef01af903e1c507bc79805ad252f02e', name: "content" })), h("slot", { key: '5f1a1a4fd2b0e86384b2b3d46da2d408fcec2e4e', 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;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,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/**\n * @internal\n */\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-popover-content.css',\n  shadow: true,\n})\nexport class MgPopoverContent {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<void>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-c-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-popover-content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AAMH,MAAM,OAAO,gBAAgB;;QAgC3B;;WAEG;QACK,sBAAiB,GAAG,GAAS,EAAE;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;2BAjBoB,KAAK;+BAKW,IAAI,SAAS,CAAC,CAAC,sBAAsB,CAAC,CAAC;;IAc7E;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,cAAc;QACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACrD,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE,CAAC;YACxE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,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

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

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

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

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

@@ -206,7 +206,7 @@ export class MgTabs {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '6aa138347fc29ccb2ebadc034a50ad6daa61fcee', class: this.classCollection.join() }, h("header", { key: 'c5a350bd2e66f3fad27eec61d51dcd7aebd8e5c2', 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),

package/dist/components/index.es.js

@@ -1,31 +1,31 @@
-var ie = Object.defineProperty;
-var ce = (t, e, s) => e in t ? ie(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s;
-var p = (t, e, s) => (ce(t, typeof e != "symbol" ? e + "" : e, s), s);
-const Re = (t = "", e = 10) => {
-  const s = new Uint8Array(e);
+var ae = Object.defineProperty;
+var fe = (e, t, s) => t in e ? ae(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var g = (e, t, s) => (fe(e, typeof t != "symbol" ? t + "" : t, s), s);
+const Ne = (e = "", t = 10) => {
+  const s = new Uint8Array(t);
   crypto.getRandomValues(s);
-  const r = Array.from(s).map((n) => n.toString(16).padStart(2, "0")).join("").slice(0, e);
-  return t !== "" ? `${t}-${r}` : r;
+  const r = Array.from(s).map((l) => l.toString(16).padStart(2, "0")).join("").slice(0, t);
+  return e !== "" ? `${e}-${r}` : r;
 };
-class Me {
-  constructor(e = []) {
+class Be {
+  constructor(t = []) {
     /**
      * Available classes
      */
-    p(this, "classes");
+    g(this, "classes");
     /**
      * Add class
      * @param className - class name to add
      */
-    p(this, "add", (e) => {
-      this.has(e) || this.classes.push(e);
+    g(this, "add", (t) => {
+      this.has(t) || this.classes.push(t);
     });
     /**
      * Delete class
      * @param className - class name to delete
      */
-    p(this, "delete", (e) => {
-      const s = this.classes.indexOf(e);
+    g(this, "delete", (t) => {
+      const s = this.classes.indexOf(t);
       s > -1 && this.classes.splice(s, 1);
     });
     /**
@@ -33,43 +33,83 @@ class Me {
      * @param className - class name to check
      * @returns class name is in the list
      */
-    p(this, "has", (e) => this.classes.includes(e));
+    g(this, "has", (t) => this.classes.includes(t));
     /**
      * Join classes seperated by spaces
      * @returns joined values
      */
-    p(this, "join", () => this.classes.join(" "));
-    this.classes = e;
+    g(this, "join", () => this.classes.join(" "));
+    this.classes = t;
   }
 }
-const Oe = (t) => Array.isArray(t) && t.every((e) => typeof e == "string"), Fe = (t, e) => e.includes(t == null ? void 0 : t.tagName.toLowerCase()), De = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier], mg-button', _e = (t) => {
-  const e = I(t), s = X(t);
-  return [t, ...e, ...s];
-}, I = (t, e = []) => {
-  if (t.self !== t.top)
+const Ue = (e) => Array.isArray(e) && e.every((t) => typeof t == "string"), Ce = (e, t) => t.includes(e == null ? void 0 : e.tagName.toLowerCase()), He = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier], mg-button', we = (e) => {
+  const t = X(e), s = K(e);
+  return [e, ...t, ...s];
+}, X = (e, t = []) => {
+  if (e.self !== e.top)
     try {
-      const s = t.parent;
-      return s ? (e.push(s), I(s, e)) : e;
+      const s = e.parent;
+      return s ? (t.push(s), X(s, t)) : t;
     } catch (s) {
-      return console.error("Different hosts between iframes:", s), e;
+      return console.error("Different hosts between iframes:", s), t;
     }
-  return e;
-}, X = (t, e = []) => {
-  if (t.frames.length > 0)
-    for (const s of Array.from(t.frames))
-      e.push(s), X(s, e);
-  return e;
-}, Be = (t) => typeof t == "string" && t.trim() !== "", Ne = (t) => typeof t == "string" ? t.toLocaleLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036f]/g, "") : t, Ue = async (t) => t(), Pe = (t) => {
-  const e = { value: "2023", pattern: "yyyy" }, s = { value: "12", pattern: "mm" }, r = { value: "24", pattern: "dd" };
-  return ge([e.value, s.value, r.value].join("-"), t).replace(e.value, e.pattern).replace(s.value, s.pattern).replace(r.value, r.pattern);
-}, We = (t) => t.toISOString().split("T")[0], ue = (t, e, s) => {
-  const r = t.closest("[lang]"), n = Intl.NumberFormat.supportedLocalesOf(r == null ? void 0 : r.lang), l = n.length > 0 && typeof n[0] == "string" ? n[0] : navigator.language || s, o = l.split("-").shift();
+  return t;
+}, K = (e, t = []) => {
+  if (e.frames.length > 0)
+    for (const s of Array.from(e.frames))
+      t.push(s), K(s, t);
+  return t;
+}, Pe = (e) => typeof e == "string" && e.trim() !== "", We = (e) => typeof e == "string" ? e.toLocaleLowerCase().normalize("NFD").replaceAll(/[\u0300-\u036f]/g, "") : e, ze = async (e) => e(), Ge = (e) => {
+  const t = { value: "2023", pattern: "yyyy" }, s = { value: "12", pattern: "mm" }, r = { value: "24", pattern: "dd" };
+  return ge([t.value, s.value, r.value].join("-"), e).replace(t.value, t.pattern).replace(s.value, s.pattern).replace(r.value, r.pattern);
+}, Xe = (e) => e.toISOString().split("T")[0], de = (e, t, s) => {
+  const r = e.closest("[lang]"), l = Intl.NumberFormat.supportedLocalesOf(r == null ? void 0 : r.lang), i = l.length > 0 && typeof l[0] == "string" ? l[0] : navigator.language || s, n = i.split("-").shift();
   return {
-    locale: l,
-    messages: e[o] || e[s]
+    locale: i,
+    messages: t[n] || t[s]
   };
-}, ze = (t, e, s) => new Intl.NumberFormat(e, { style: "currency", currency: s }).format(t), qe = (t, e, s = 0) => new Intl.NumberFormat(e, { minimumFractionDigits: s }).format(s > 0 ? Number(t == null ? void 0 : t.toFixed(s)) : t), de = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/, ge = (t, e) => typeof t != "string" || t === "" || !de.test(t) ? "" : new Intl.DateTimeFormat(e).format(new Date(t)), we = (t, e) => (s) => ue(s, t, e);
+}, Ke = (e, t, s) => new Intl.NumberFormat(t, { style: "currency", currency: s }).format(e), Qe = (e, t, s = 0) => new Intl.NumberFormat(t, { minimumFractionDigits: s }).format(s > 0 ? Number(e == null ? void 0 : e.toFixed(s)) : e), pe = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/, ge = (e, t) => typeof e != "string" || e === "" || !pe.test(e) ? "" : new Intl.DateTimeFormat(t).format(new Date(e)), Je = (e, t) => (s) => de(s, e, t);
+var ve = Object.defineProperty, he = (e, t) => {
+  for (var s in t)
+    ve(e, s, { get: t[s], enumerable: !0 });
+}, Se = {};
+he(Se, {
+  err: () => Z,
+  map: () => ke,
+  ok: () => D,
+  unwrap: () => Te,
+  unwrapErr: () => xe
+});
+var D = (e) => ({
+  isOk: !0,
+  isErr: !1,
+  value: e
+}), Z = (e) => ({
+  isOk: !1,
+  isErr: !0,
+  value: e
+});
+function ke(e, t) {
+  if (e.isOk) {
+    const s = t(e.value);
+    return s instanceof Promise ? s.then((r) => D(r)) : D(s);
+  }
+  if (e.isErr) {
+    const s = e.value;
+    return Z(s);
+  }
+  throw "should never get here";
+}
+var Te = (e) => {
+  if (e.isOk)
+    return e.value;
+  throw e.value;
+}, xe = (e) => {
+  if (e.isErr)
+    return e.value;
+  throw e.value;
+};
 
-export { Be as B, De as D, Fe as F, Me as M, Ne as N, Oe as O, Pe as P, Re as R, Ue as U, We as W, _e as _, de as d, ge as g, qe as q, we as w, ze as z };
+export { Be as B, Ce as C, Ge as G, He as H, Je as J, Ke as K, Ne as N, Pe as P, Qe as Q, Ue as U, We as W, Xe as X, ge as g, pe as p, we as w, ze as z };
 
 //# sourceMappingURL=index.es.js.map