@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -3,334 +3,334 @@ import { createID, ClassList, focusableElements, isValidString } from "../../../
 import { initLocales } from "../../../locales";
 import { dialogRoles } from "./mg-modal.conf";
 export class MgModal {
-  constructor() {
-    /************
-     * 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() {
+        /************
+         * 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
+     */
+    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
      */
-    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.');
+    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 });
     }
-  }
-  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);
+    /**
+     * 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" })))))));
     }
-    else if (newValue === false) {
-      this.componentShow.emit();
-      this.classCollection.delete(this.classHide);
-      document.body.style.overflow = 'hidden';
-      this.setFocus();
+    static get is() { return "mg-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css"]
+        };
     }
-  }
-  /**
-   * 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;
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css"]
+        };
     }
-  }
-  /*************
-   * 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" })))))));
-  }
-  static get is() { return "mg-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-modal.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
-        },
-        "attribute": "identifier",
-        "reflect": false,
-        "defaultValue": "createID('mg-modal')"
-      },
-      "dialogRole": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DialogRoleType",
-          "resolved": "\"alertdialog\" | \"dialog\"",
-          "references": {
-            "DialogRoleType": {
-              "location": "import",
-              "path": "./mg-modal.conf",
-              "id": "src/components/molecules/mg-modal/mg-modal.conf.ts::DialogRoleType"
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "createID('mg-modal')"
+            },
+            "dialogRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DialogRoleType",
+                    "resolved": "\"alertdialog\" | \"dialog\"",
+                    "references": {
+                        "DialogRoleType": {
+                            "location": "import",
+                            "path": "./mg-modal.conf",
+                            "id": "src/components/molecules/mg-modal/mg-modal.conf.ts::DialogRoleType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modal dialog role."
+                },
+                "attribute": "dialog-role",
+                "reflect": false,
+                "defaultValue": "dialogRoles[0]"
+            },
+            "modalTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displayed modal title"
+                },
+                "attribute": "modal-title",
+                "reflect": false
+            },
+            "closeButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if modal has a cross button"
+                },
+                "attribute": "close-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hide": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if modal is hidden"
+                },
+                "attribute": "hide",
+                "reflect": false
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Modal dialog role."
-        },
-        "attribute": "dialog-role",
-        "reflect": false,
-        "defaultValue": "dialogRoles[0]"
-      },
-      "modalTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Displayed modal title"
-        },
-        "attribute": "modal-title",
-        "reflect": false
-      },
-      "closeButton": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if modal has a cross button"
-        },
-        "attribute": "close-button",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "hide": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if modal is hidden"
-        },
-        "attribute": "hide",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasActions": {},
-      "hasContent": {},
-      "classCollection": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "componentShow",
-        "name": "component-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emmited event when modal is diplayed"
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }, {
-        "method": "componentHide",
-        "name": "component-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emmited event when modal is hidden"
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "dialogRole",
-        "methodName": "validateDialogRole"
-      }, {
-        "propName": "modalTitle",
-        "methodName": "validateModalTitle"
-      }, {
-        "propName": "hide",
-        "methodName": "validateHide"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "handleKeyDown",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "hasActions": {},
+            "hasContent": {},
+            "classCollection": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "componentShow",
+                "name": "component-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emmited event when modal is diplayed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "componentHide",
+                "name": "component-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emmited event when modal is hidden"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "dialogRole",
+                "methodName": "validateDialogRole"
+            }, {
+                "propName": "modalTitle",
+                "methodName": "validateModalTitle"
+            }, {
+                "propName": "hide",
+                "methodName": "validateHide"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=mg-modal.js.map