@siemens/ix 1.6.2 → 2.0.0-beta.0

package/dist/collection/components/modal/modal.js

@@ -8,61 +8,43 @@
  */
 import { h, Host, } from '@stencil/core';
 import anime from 'animejs';
+import { a11yBoolean, a11yHostAttributes } from '../utils/a11y';
 import Animation from '../utils/animation';
-let modalInstanceId = 0;
-function getNextModalInstanceId() {
-  return `ix-modal-instance-${++modalInstanceId}`;
-}
 export class Modal {
   constructor() {
-    this.modalId = getNextModalInstanceId();
-    this.onKeydown = this.handleKeydown.bind(this);
+    this.ariaAttributes = {};
+    this.size = '360';
     this.animation = true;
-    this.ariaDescribedBy = undefined;
-    this.ariaLabelledBy = 'modal-title';
     this.backdrop = true;
-    this.backdropClass = undefined;
+    this.closeOnBackdropClick = false;
     this.beforeDismiss = undefined;
     this.centered = false;
-    this.content = undefined;
     this.keyboard = true;
-    this.icon = undefined;
-    this.iconColor = 'color-std-text';
-    this.modalDialogClass = undefined;
-    this.scrollable = true;
-    this.size = 'sm';
-    this.headerTitle = undefined;
-    this.windowClass = undefined;
-  }
-  get modal() {
-    return this.hostElement.querySelector('.modal');
-  }
-  get modalDialog() {
-    return this.modal.querySelector('.modal-dialog');
   }
-  get modalContent() {
-    return this.modalDialog.querySelector('.modal-content');
+  get dialog() {
+    return this.hostElement.shadowRoot.querySelector('dialog');
   }
-  get modalBackdrop() {
-    return this.hostElement.querySelector('.backdrop');
-  }
-  slideDown(modal) {
+  slideInModal() {
     const duration = this.animation ? Animation.mediumTime : 0;
+    let transformY = this.centered ? '-50' : 40;
     anime({
-      targets: modal,
+      targets: this.dialog,
       duration,
       opacity: [0, 1],
-      translateY: ['-100%', 0],
+      translateY: [0, transformY],
+      translateX: ['-50%', '-50%'],
       easing: 'easeOutSine',
     });
   }
-  slideUp(modal, completeCallback) {
+  slideOutModal(completeCallback) {
     const duration = this.animation ? Animation.mediumTime : 0;
+    let transformY = this.centered ? '-50' : 40;
     anime({
-      targets: modal,
+      targets: this.dialog,
       duration,
       opacity: [1, 0],
-      translateY: [0, '-100%'],
+      translateY: [transformY, 0],
+      translateX: ['-50%', '-50%'],
       easing: 'easeInSine',
       complete: () => {
         if (completeCallback) {
@@ -71,76 +53,74 @@ export class Modal {
       },
     });
   }
-  onBackdropClick(event) {
-    const target = event.target;
-    if (target.classList.contains('backdrop')) {
-      this.dismiss(event);
-    }
-  }
-  componentDidLoad() {
-    if (this.backdrop === 'static') {
-      this.modalBackdrop.addEventListener('click', (event) => this.onBackdropClick(event));
-    }
-    if (this.backdropClass) {
-      this.modalBackdrop.classList.add(this.backdropClass);
-    }
-    if (this.modalDialogClass) {
-      this.modalDialog.classList.add(this.modalDialogClass);
+  onModalClick(event) {
+    const rect = this.dialog.getBoundingClientRect();
+    const isClickOutside = rect.top <= event.clientY &&
+      event.clientY <= rect.top + rect.height &&
+      rect.left <= event.clientX &&
+      event.clientX <= rect.left + rect.width;
+    if (!isClickOutside && this.closeOnBackdropClick) {
+      this.dismissModal();
     }
-    if (this.windowClass) {
-      this.modal.classList.add(this.windowClass);
-    }
-    if (this.keyboard) {
-      window.addEventListener('keydown', this.onKeydown);
-    }
-    this.slideDown(this.modalContent);
   }
-  handleKeydown(ev) {
-    if (ev.key === 'Escape') {
-      this.dismiss(ev.key);
-    }
-  }
-  disconnectedCallback() {
-    window.removeEventListener('keydown', this.onKeydown);
+  /**
+   * Show the dialog
+   */
+  async showModal() {
+    this.dialog.showModal();
   }
   /**
-   * Dismiss modal instance
-   * @param reason
+   * Dismiss the dialog
    */
-  async dismiss(reason) {
-    if (this.beforeDismiss) {
-      const result = await this.beforeDismiss(reason);
-      if (result !== false) {
-        this.slideUp(this.modalContent, () => this.dismissed.emit(reason));
-      }
+  async dismissModal(reason) {
+    let allowDismiss = true;
+    if (this.beforeDismiss !== undefined) {
+      allowDismiss = await this.beforeDismiss(reason);
     }
-    else {
-      this.slideUp(this.modalContent, () => this.dismissed.emit(reason));
+    if (!allowDismiss) {
+      return;
     }
+    this.slideOutModal(() => {
+      this.dialog.close(JSON.stringify({
+        type: 'dismiss',
+        reason,
+      }, null, 2));
+      this.dialogDismiss.emit(reason);
+    });
   }
   /**
-   * Close modal
-   * @param result
+   * Close the dialog
    */
-  async close(result) {
-    this.slideUp(this.modalContent, () => this.closed.emit(result));
+  async closeModal(reason) {
+    this.slideOutModal(() => {
+      this.dialog.close(JSON.stringify({
+        type: 'close',
+        reason,
+      }, null, 2));
+      this.dialogClose.emit(reason);
+    });
+  }
+  componentDidLoad() {
+    this.slideInModal();
+  }
+  componentWillLoad() {
+    this.ariaAttributes = a11yHostAttributes(this.hostElement);
   }
   render() {
-    return (h(Host, { id: this.modalId }, h("div", { class: {
-        animation: this.animation,
-        modal: true,
-        backdrop: this.backdrop === 'static' || this.backdrop,
-        'align-items-center': this.centered,
-        scrollable: this.scrollable,
-      }, "aria-describedby": this.ariaDescribedBy, "aria-labelledby": this.ariaLabelledBy }, h("div", { class: {
-        'modal-dialog': true,
-        'modal-sm': this.size === 'sm',
-        'modal-lg': this.size === 'lg',
-        'modal-xl': this.size === 'xl',
-      } }, h("div", { class: "modal-content" }, this.icon === undefined || this.icon === '' ? ('') : (h("div", { class: "state-icon-container" }, h("ix-icon", { name: this.icon, size: "32", color: this.iconColor }))), h("div", { class: "slot-container" }, h("slot", null)))))));
+    return (h(Host, { class: {
+        'no-backdrop': this.backdrop === false,
+        'align-center': this.centered,
+      } }, h("div", { class: "dialog-backdrop" }, h("dialog", { "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: `modal modal-size-${this.size}`, onKeyDown: (e) => {
+        if (e.key === 'Escape' && this.keyboard === false) {
+          e.preventDefault();
+        }
+      }, onClick: (event) => this.onModalClick(event), onCancel: (e) => {
+        e.preventDefault();
+        this.dismissModal();
+      } }, h("slot", null)))));
   }
   static get is() { return "ix-modal"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["modal.scss"]
@@ -153,93 +133,88 @@ export class Modal {
   }
   static get properties() {
     return {
-      "animation": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Should the modal be animtated"
-        },
-        "attribute": "animation",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "ariaDescribedBy": {
+      "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IxModalSize",
+          "resolved": "\"360\" | \"480\" | \"600\" | \"720\" | \"840\" | \"full-width\"",
+          "references": {
+            "IxModalSize": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/modal/modal.tsx"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": ""
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Modal size"
         },
-        "attribute": "aria-described-by",
-        "reflect": false
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'360'"
       },
-      "ariaLabelledBy": {
-        "type": "string",
+      "animation": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Should the modal be animated"
         },
-        "attribute": "aria-labelled-by",
+        "attribute": "animation",
         "reflect": false,
-        "defaultValue": "'modal-title'"
+        "defaultValue": "true"
       },
       "backdrop": {
-        "type": "any",
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "boolean | 'static'",
-          "resolved": "\"static\" | boolean",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Adds a dimming layer to the modal.\nThis should only be used when it it necessary to focus the user's attention to the dialog content (e.g. errors, warnings, complex tasks)."
+          "text": "Show a backdrop behind the modal dialog"
         },
         "attribute": "backdrop",
         "reflect": false,
         "defaultValue": "true"
       },
-      "backdropClass": {
-        "type": "string",
+      "closeOnBackdropClick": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "Backdrop class"
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Dismiss modal on backdrop click"
         },
-        "attribute": "backdrop-class",
-        "reflect": false
+        "attribute": "close-on-backdrop-click",
+        "reflect": false,
+        "defaultValue": "false"
       },
       "beforeDismiss": {
         "type": "unknown",
@@ -257,7 +232,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "BeforeDismiss callback"
+          "text": "Is called before the modal is dismissed.\n\n- Return `true` to proceed in dismissing the modal\n- Return `false` to abort in dismissing the modal"
         }
       },
       "centered": {
@@ -278,27 +253,6 @@ export class Modal {
         "reflect": false,
         "defaultValue": "false"
       },
-      "content": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement | string",
-          "resolved": "HTMLElement | string",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Content of modal"
-        },
-        "attribute": "content",
-        "reflect": false
-      },
       "keyboard": {
         "type": "boolean",
         "mutable": false,
@@ -311,151 +265,24 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ESC close modal dialog"
+          "text": "Use ESC to dismiss the modal"
         },
         "attribute": "keyboard",
         "reflect": false,
         "defaultValue": "true"
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Optional icon displayed next to the title"
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "iconColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "NotificationColor",
-          "resolved": "\"color-alarm\" | \"color-info\" | \"color-std-text\" | \"color-success\" | \"color-warning\"",
-          "references": {
-            "NotificationColor": {
-              "location": "import",
-              "path": "../utils/notification-color"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Color of the header {@see ix-icon}"
-        },
-        "attribute": "icon-color",
-        "reflect": false,
-        "defaultValue": "'color-std-text'"
-      },
-      "modalDialogClass": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Modal dialog class"
-        },
-        "attribute": "modal-dialog-class",
-        "reflect": false
-      },
-      "scrollable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Modal scollable"
-        },
-        "attribute": "scrollable",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sm' | 'lg' | 'xl'",
-          "resolved": "\"lg\" | \"sm\" | \"xl\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Modal size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'sm'"
-      },
-      "headerTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Header title"
-        },
-        "attribute": "header-title",
-        "reflect": false
-      },
-      "windowClass": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Window class"
-        },
-        "attribute": "window-class",
-        "reflect": false
       }
     };
   }
   static get events() {
     return [{
-        "method": "closed",
-        "name": "closed",
+        "method": "dialogClose",
+        "name": "dialogClose",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Modal closed"
+          "text": "Dialog close"
         },
         "complexType": {
           "original": "any",
@@ -463,14 +290,14 @@ export class Modal {
           "references": {}
         }
       }, {
-        "method": "dismissed",
-        "name": "dismissed",
+        "method": "dialogDismiss",
+        "name": "dialogDismiss",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Modal dismissed"
+          "text": "Dialog cancel"
         },
         "complexType": {
           "original": "any",
@@ -481,14 +308,27 @@ export class Modal {
   }
   static get methods() {
     return {
-      "dismiss": {
+      "showModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Show the dialog",
+          "tags": []
+        }
+      },
+      "dismissModal": {
         "complexType": {
           "signature": "<T = any>(reason?: T) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "reason"
-                }],
+              "tags": [],
               "text": ""
             }],
           "references": {
@@ -502,21 +342,15 @@ export class Modal {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Dismiss modal instance",
-          "tags": [{
-              "name": "param",
-              "text": "reason"
-            }]
+          "text": "Dismiss the dialog",
+          "tags": []
         }
       },
-      "close": {
+      "closeModal": {
         "complexType": {
-          "signature": "<T = any>(result: T) => Promise<void>",
+          "signature": "<T = any>(reason: T) => Promise<void>",
           "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "result"
-                }],
+              "tags": [],
               "text": ""
             }],
           "references": {
@@ -530,11 +364,8 @@ export class Modal {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Close modal",
-          "tags": [{
-              "name": "param",
-              "text": "result"
-            }]
+          "text": "Close the dialog",
+          "tags": []
         }
       }
     };

package/dist/collection/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { NotificationColor } from '../utils/notification-color';\n\nlet modalInstanceId = 0;\n\nfunction getNextModalInstanceId() {\n  return `ix-modal-instance-${++modalInstanceId}`;\n}\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  scoped: true,\n})\nexport class Modal {\n  @Element() hostElement: HTMLIxModalElement;\n\n  /**\n   * Should the modal be animtated\n   */\n  @Prop() animation = true;\n\n  /**\n   *\n   */\n  @Prop() ariaDescribedBy: string;\n\n  /**\n   *\n   */\n  @Prop() ariaLabelledBy = 'modal-title';\n\n  /**\n   * Adds a dimming layer to the modal.\n   * This should only be used when it it necessary to focus the user's attention to the dialog content (e.g. errors, warnings, complex tasks).\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Backdrop class\n   */\n  @Prop() backdropClass: string;\n\n  /**\n   * BeforeDismiss callback\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Content of modal\n   */\n  @Prop() content: HTMLElement | string;\n\n  /**\n   * ESC close modal dialog\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * Optional icon displayed next to the title\n   */\n  @Prop() icon: string;\n\n  /**\n   * Color of the header {@see ix-icon}\n   */\n  @Prop() iconColor: NotificationColor = 'color-std-text';\n\n  /**\n   * Modal dialog class\n   */\n  @Prop() modalDialogClass: string;\n\n  /**\n   * Modal scollable\n   */\n  @Prop() scrollable = true;\n\n  /**\n   * Modal size\n   */\n  @Prop() size: 'sm' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Header title\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * Window class\n   */\n  @Prop() windowClass: string;\n\n  /**\n   * Modal closed\n   */\n  @Event() closed: EventEmitter;\n\n  /**\n   * Modal dismissed\n   */\n  @Event() dismissed: EventEmitter;\n\n  private modalId = getNextModalInstanceId();\n  private readonly onKeydown = this.handleKeydown.bind(this);\n\n  get modal() {\n    return this.hostElement.querySelector('.modal');\n  }\n\n  get modalDialog() {\n    return this.modal.querySelector('.modal-dialog');\n  }\n\n  get modalContent() {\n    return this.modalDialog.querySelector('.modal-content');\n  }\n\n  get modalBackdrop() {\n    return this.hostElement.querySelector('.backdrop');\n  }\n\n  private slideDown(modal: any) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    anime({\n      targets: modal,\n      duration,\n      opacity: [0, 1],\n      translateY: ['-100%', 0],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideUp(modal: any, completeCallback?: any) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    anime({\n      targets: modal,\n      duration,\n      opacity: [1, 0],\n      translateY: [0, '-100%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onBackdropClick(event: Event) {\n    const target = event.target as Element;\n    if (target.classList.contains('backdrop')) {\n      this.dismiss(event);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.backdrop === 'static') {\n      this.modalBackdrop.addEventListener('click', (event) =>\n        this.onBackdropClick(event)\n      );\n    }\n\n    if (this.backdropClass) {\n      this.modalBackdrop.classList.add(this.backdropClass);\n    }\n\n    if (this.modalDialogClass) {\n      this.modalDialog.classList.add(this.modalDialogClass);\n    }\n\n    if (this.windowClass) {\n      this.modal.classList.add(this.windowClass);\n    }\n\n    if (this.keyboard) {\n      window.addEventListener('keydown', this.onKeydown);\n    }\n\n    this.slideDown(this.modalContent);\n  }\n\n  private handleKeydown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.dismiss(ev.key);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('keydown', this.onKeydown);\n  }\n\n  /**\n   * Dismiss modal instance\n   * @param reason\n   */\n  @Method()\n  async dismiss<T = any>(reason?: T) {\n    if (this.beforeDismiss) {\n      const result = await this.beforeDismiss(reason);\n      if (result !== false) {\n        this.slideUp(this.modalContent, () => this.dismissed.emit(reason));\n      }\n    } else {\n      this.slideUp(this.modalContent, () => this.dismissed.emit(reason));\n    }\n  }\n\n  /**\n   * Close modal\n   * @param result\n   */\n  @Method()\n  async close<T = any>(result: T) {\n    this.slideUp(this.modalContent, () => this.closed.emit(result));\n  }\n\n  render() {\n    return (\n      <Host id={this.modalId}>\n        <div\n          class={{\n            animation: this.animation,\n            modal: true,\n            backdrop: this.backdrop === 'static' || this.backdrop,\n            'align-items-center': this.centered,\n            scrollable: this.scrollable,\n          }}\n          aria-describedby={this.ariaDescribedBy}\n          aria-labelledby={this.ariaLabelledBy}\n        >\n          <div\n            class={{\n              'modal-dialog': true,\n              'modal-sm': this.size === 'sm',\n              'modal-lg': this.size === 'lg',\n              'modal-xl': this.size === 'xl',\n            }}\n          >\n            <div class=\"modal-content\">\n              {this.icon === undefined || this.icon === '' ? (\n                ''\n              ) : (\n                <div class=\"state-icon-container\">\n                  <ix-icon\n                    name={this.icon}\n                    size=\"32\"\n                    color={this.iconColor}\n                  ></ix-icon>\n                </div>\n              )}\n              <div class=\"slot-container\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   *\n   * @since 2.0.0\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal be animated\n   */\n  @Prop() animation = true;\n\n  /**\n   * Show a backdrop behind the modal dialog\n   */\n  @Prop() backdrop = true;\n\n  /**\n   * Dismiss modal on backdrop click\n   *\n   * @since 2.0.0\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Use ESC to dismiss the modal\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss: EventEmitter;\n\n  get dialog() {\n    return this.hostElement.shadowRoot.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    const rect = this.dialog.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    this.dialog.showModal();\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={`modal modal-size-${this.size}`}\n            onKeyDown={(e) => {\n              if (e.key === 'Escape' && this.keyboard === false) {\n                e.preventDefault();\n              }\n            }}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}