@mgdis/mg-components 5.19.2 → 5.20.0

package/dist/components/mg-modal.js

@@ -13,216 +13,216 @@ const dialogRoles = ['dialog', 'alertdialog'];
 const mgModalCss = ":host{--mg-card-border-radius:var(--mg-modal-border-radius);--mg-card-padding:1.5rem 2.5rem;--mg-card-border:none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)*var(--line-height))/2*-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2*-1);float:right}.mg-c-modal__content{overflow-y:auto}.mg-c-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::slotted(*){--mg-card-border:var(--mg-card-border-default);--mg-card-padding:var(--mg-card-padding-default);--mg-card-border-radius:var(--mg-card-border-radius-default);--mg-card-background:var(--mg-card-background-default);--mg-card-box-shadow:var(--mg-card-box-shadow-default);--mg-card-max-width:unset;--mg-card-min-width:unset}";
 
 const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class MgModal extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.componentShow = createEvent(this, "component-show", 7);
-    this.componentHide = createEvent(this, "component-hide", 7);
-    /************
-     * Internal *
-     ************/
-    // Modal focusable elements
-    this.modalFocusableElements = [];
-    // Classes
-    this.classHide = 'mg-c-modal--hide';
-    // IDs
-    this.titleId = '';
-    /**
-     * Handle last focusable element
-     * @param event - keyboard event
-     */
-    this.handleLastFocusableElement = (event) => {
-      if (event.key === 'Tab' && !event.shiftKey) {
-        event.preventDefault();
-        this.modalFocusableElements[0].focus();
-      }
-    };
-    /**
-     * Handle first focusable element
-     * @param event - keyboard event
-     */
-    this.handleFirstFocusableElement = (event) => {
-      if (event.key === 'Tab' && event.shiftKey) {
-        event.preventDefault();
-        this.getLastFocusableElement().focus();
-      }
-    };
-    /**
-     * Get last focusablmeElement
-     * @returns last modal focusable element
-     */
-    this.getLastFocusableElement = () => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.componentShow = createEvent(this, "component-show", 7);
+        this.componentHide = createEvent(this, "component-hide", 7);
+        /************
+         * Internal *
+         ************/
+        // Modal focusable elements
+        this.modalFocusableElements = [];
+        // Classes
+        this.classHide = 'mg-c-modal--hide';
+        // IDs
+        this.titleId = '';
+        /**
+         * Handle last focusable element
+         * @param event - keyboard event
+         */
+        this.handleLastFocusableElement = (event) => {
+            if (event.key === 'Tab' && !event.shiftKey) {
+                event.preventDefault();
+                this.modalFocusableElements[0].focus();
+            }
+        };
+        /**
+         * Handle first focusable element
+         * @param event - keyboard event
+         */
+        this.handleFirstFocusableElement = (event) => {
+            if (event.key === 'Tab' && event.shiftKey) {
+                event.preventDefault();
+                this.getLastFocusableElement().focus();
+            }
+        };
+        /**
+         * Get last focusablmeElement
+         * @returns last modal focusable element
+         */
+        this.getLastFocusableElement = () => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);
+        /**
+         * Method to manage focus on modal focusable elements
+         */
+        this.setFocus = () => {
+            // Get all focusable elements
+            const allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));
+            // If at least one
+            if (allFocusableElements.length > 0) {
+                this.modalFocusableElements = allFocusableElements.reduce((acc, focusableElement) => {
+                    acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
+                    return acc;
+                }, []);
+                // When close button is enabled it's the first focusable element.
+                if (this.closeButton && this.closeButtonElement !== undefined) {
+                    this.modalFocusableElements.unshift(this.closeButtonElement);
+                }
+                // Add event listener on last element
+                this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);
+                // Add event listener on first element (case shift + tab)
+                this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);
+            }
+        };
+        /*************
+         * Handlers *
+         *************/
+        /**
+         * Handle close button
+         */
+        this.handleClose = () => {
+            this.hide = true;
+        };
+        this.identifier = createID('mg-modal');
+        this.dialogRole = dialogRoles[0];
+        this.modalTitle = undefined;
+        this.closeButton = false;
+        this.hide = undefined;
+        this.hasActions = false;
+        this.hasContent = false;
+        this.classCollection = new ClassList(['mg-c-modal']);
+    }
+    validateDialogRole(newValue) {
+        if (!dialogRoles.includes(newValue))
+            throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
+    }
+    validateModalTitle(newValue) {
+        if (!isValidString(newValue)) {
+            throw new Error('<mg-modal> prop "modalTitle" is required.');
+        }
+    }
+    validateHide(newValue) {
+        var _a;
+        if (newValue) {
+            this.componentHide.emit();
+            this.classCollection.add(this.classHide);
+            document.body.style.overflow = this.bodyOverflow;
+            // reset focus handlers
+            (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleLastFocusableElement);
+            if (this.modalFocusableElements.length > 0)
+                this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
+        }
+        else if (newValue === false) {
+            this.componentShow.emit();
+            this.classCollection.delete(this.classHide);
+            document.body.style.overflow = 'hidden';
+            this.setFocus();
+        }
+    }
     /**
-     * Method to manage focus on modal focusable elements
+     * Handle 'escape' key down
+     * @param event - keydown event
      */
-    this.setFocus = () => {
-      // Get all focusable elements
-      const allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));
-      // If at least one
-      if (allFocusableElements.length > 0) {
-        this.modalFocusableElements = allFocusableElements.reduce((acc, focusableElement) => {
-          acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
-          return acc;
-        }, []);
-        // When close button is enabled it's the first focusable element.
-        if (this.closeButton && this.closeButtonElement !== undefined) {
-          this.modalFocusableElements.unshift(this.closeButtonElement);
+    handleKeyDown(event) {
+        // we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
+        if (this.closeButton && event.key === 'Escape') {
+            this.hide = true;
         }
-        // Add event listener on last element
-        this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);
-        // Add event listener on first element (case shift + tab)
-        this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);
-      }
-    };
+    }
     /*************
-     * Handlers *
+     * Lifecycle *
      *************/
     /**
-     * Handle close button
+     * Check if component props are well configured on init
      */
-    this.handleClose = () => {
-      this.hide = true;
-    };
-    this.identifier = createID('mg-modal');
-    this.dialogRole = dialogRoles[0];
-    this.modalTitle = undefined;
-    this.closeButton = false;
-    this.hide = undefined;
-    this.hasActions = false;
-    this.hasContent = false;
-    this.classCollection = new ClassList(['mg-c-modal']);
-  }
-  validateDialogRole(newValue) {
-    if (!dialogRoles.includes(newValue))
-      throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
-  }
-  validateModalTitle(newValue) {
-    if (!isValidString(newValue)) {
-      throw new Error('<mg-modal> prop "modalTitle" is required.');
+    componentWillLoad() {
+        // Store body overflow
+        this.bodyOverflow = document.body.style.overflow;
+        // Get locales
+        this.messages = initLocales(this.element).messages;
+        // Validate
+        this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
+        this.hasContent = this.element.querySelector('[slot="content"]') !== null;
+        this.titleId = `${this.identifier}-title`;
+        this.validateModalTitle(this.modalTitle);
+        this.validateHide(this.hide);
+        this.validateDialogRole(this.dialogRole);
     }
-  }
-  validateHide(newValue) {
-    var _a;
-    if (newValue) {
-      this.componentHide.emit();
-      this.classCollection.add(this.classHide);
-      document.body.style.overflow = this.bodyOverflow;
-      // reset focus handlers
-      (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleLastFocusableElement);
-      if (this.modalFocusableElements.length > 0)
-        this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
-    }
-    else if (newValue === false) {
-      this.componentShow.emit();
-      this.classCollection.delete(this.classHide);
-      document.body.style.overflow = 'hidden';
-      this.setFocus();
+    /**
+     * Add observer on component to set focus when displayed
+     */
+    componentDidLoad() {
+        new MutationObserver(mutationList => {
+            // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation
+            if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes(mutation.target.ariaHidden))) {
+                // Set focus on first element
+                this.modalFocusableElements[0].focus();
+            }
+        }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
     }
-  }
-  /**
-   * Handle 'escape' key down
-   * @param event - keydown event
-   */
-  handleKeyDown(event) {
-    // we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
-    if (this.closeButton && event.key === 'Escape') {
-      this.hide = true;
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("div", { 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", null, h("div", { class: "mg-c-modal__dialog" }, h("header", { 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) => {
+                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", { 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" })))))));
     }
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad() {
-    // Store body overflow
-    this.bodyOverflow = document.body.style.overflow;
-    // Get locales
-    this.messages = initLocales(this.element).messages;
-    // Validate
-    this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
-    this.hasContent = this.element.querySelector('[slot="content"]') !== null;
-    this.titleId = `${this.identifier}-title`;
-    this.validateModalTitle(this.modalTitle);
-    this.validateHide(this.hide);
-    this.validateDialogRole(this.dialogRole);
-  }
-  /**
-   * Add observer on component to set focus when displayed
-   */
-  componentDidLoad() {
-    new MutationObserver(mutationList => {
-      // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation
-      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes(mutation.target.ariaHidden))) {
-        // Set focus on first element
-        this.modalFocusableElements[0].focus();
-      }
-    }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h("div", { 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", null, h("div", { class: "mg-c-modal__dialog" }, h("header", { 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) => {
-        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", { 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" })))))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "dialogRole": ["validateDialogRole"],
-    "modalTitle": ["validateModalTitle"],
-    "hide": ["validateHide"]
-  }; }
-  static get style() { return mgModalCss; }
+    get element() { return this; }
+    static get watchers() { return {
+        "dialogRole": ["validateDialogRole"],
+        "modalTitle": ["validateModalTitle"],
+        "hide": ["validateHide"]
+    }; }
+    static get style() { return mgModalCss; }
 }, [1, "mg-modal", {
-    "identifier": [1],
-    "dialogRole": [1, "dialog-role"],
-    "modalTitle": [1, "modal-title"],
-    "closeButton": [4, "close-button"],
-    "hide": [1028],
-    "hasActions": [32],
-    "hasContent": [32],
-    "classCollection": [32]
-  }, [[8, "keydown", "handleKeyDown"]], {
-    "dialogRole": ["validateDialogRole"],
-    "modalTitle": ["validateModalTitle"],
-    "hide": ["validateHide"]
-  }]);
+        "identifier": [1],
+        "dialogRole": [1, "dialog-role"],
+        "modalTitle": [1, "modal-title"],
+        "closeButton": [4, "close-button"],
+        "hide": [1028],
+        "hasActions": [32],
+        "hasContent": [32],
+        "classCollection": [32]
+    }, [[8, "keydown", "handleKeyDown"]], {
+        "dialogRole": ["validateDialogRole"],
+        "modalTitle": ["validateModalTitle"],
+        "hide": ["validateHide"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-modal", "mg-button", "mg-card", "mg-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-modal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgModal$1);
-      }
-      break;
-    case "mg-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "mg-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-modal", "mg-button", "mg-card", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgModal$1);
+            }
+            break;
+        case "mg-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "mg-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();
 

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

@@ -1 +1 @@
-{"file":"mg-modal.js","mappings":"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","names":["MgModal"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","../styles/dist/components/mg-modal.css?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/**\n * List of all possibles dialog roles\n */\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/**\n * DialogRole type from dialog roles\n */\nexport type DialogRoleType = (typeof dialogRoles)[number];\n",":host{--mg-card-border-radius: var(--mg-modal-border-radius);--mg-card-padding: 1.5rem 2.5rem;--mg-card-border: none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)*var(--line-height))/2*-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2*-1);float:right}.mg-c-modal__content{overflow-y:auto}.mg-c-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::slotted(*){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}/*# sourceMappingURL=mg-modal.css.map */\n","import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements, isValidString } from '../../../utils/components.utils';\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<string>;\n\n  /**\n   * Emmited event when modal is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\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 allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n    // If at least one\n    if (allFocusableElements.length > 0) {\n      this.modalFocusableElements = allFocusableElements.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","mappings":"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","names":["MgModal"],"sources":["src/components/molecules/mg-modal/mg-modal.conf.ts","../styles/dist/components/mg-modal.css?tag=mg-modal&encapsulation=shadow","src/components/molecules/mg-modal/mg-modal.tsx"],"sourcesContent":["/**\n * List of all possibles dialog roles\n */\nexport const dialogRoles = ['dialog', 'alertdialog'] as const;\n\n/**\n * DialogRole type from dialog roles\n */\nexport type DialogRoleType = (typeof dialogRoles)[number];\n",":host{--mg-card-border-radius: var(--mg-modal-border-radius);--mg-card-padding: 1.5rem 2.5rem;--mg-card-border: none}.mg-c-modal{position:fixed;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem 0;background-color:hsl(var(--color-light)/85%);inset:0}.mg-c-modal mg-card{display:flex;width:60rem;max-width:100%;max-height:100%}.mg-c-modal__dialog{position:relative;display:flex;height:fit-content;max-height:100%;flex-direction:column;align-self:center;row-gap:3rem}.mg-c-modal__header{margin-bottom:.5rem}.mg-c-modal__title{margin:0;font-family:var(--font-family-heading);font-size:var(--mg-modal-title-font-size);font-weight:600}.mg-c-modal__close-button{height:var(--mg-modal-title-font-size);margin-top:calc((var(--default-size) - var(--mg-modal-title-font-size)*var(--line-height))/2*-1);margin-right:calc((var(--default-size) - var(--mg-icon-regular-size))/2*-1);float:right}.mg-c-modal__content{overflow-y:auto}.mg-c-modal__content::slotted(*){font-size:var(--mg-modal-content-font-size)}.mg-c-modal.mg-c-modal--hide{display:none}.mg-c-modal ::slotted(*){--mg-card-border: var(--mg-card-border-default);--mg-card-padding: var(--mg-card-padding-default);--mg-card-border-radius: var(--mg-card-border-radius-default);--mg-card-background: var(--mg-card-background-default);--mg-card-box-shadow: var(--mg-card-box-shadow-default);--mg-card-max-width: unset;--mg-card-min-width: unset}/*# sourceMappingURL=mg-modal.css.map */\n","import { Component, h, Prop, State, Watch, Element, Event, EventEmitter, Listen } from '@stencil/core';\nimport { createID, ClassList, focusableElements, isValidString } from '../../../utils/components.utils';\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 allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));\n    // If at least one\n    if (allFocusableElements.length > 0) {\n      this.modalFocusableElements = allFocusableElements.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}

package/dist/components/mg-pagination.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface MgPagination extends Components.MgPagination, HTMLElement {}
 export const MgPagination: {
-  prototype: MgPagination;
-  new (): MgPagination;
+    prototype: MgPagination;
+    new (): MgPagination;
 };
 /**
  * Used to define this component and all nested components recursively.