@scania/tegel 0.0.51 → 0.0.52

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

@@ -1,267 +1,267 @@
-import { h, Host, } from '@stencil/core';
-export class Modal {
-  constructor() {
-    /** Emits a close event and then close the modal if it is not prevented. */
-    this.handleClose = (event) => {
-      const closeEvent = this.sddsClose.emit(event);
-      if (!closeEvent.defaultPrevented) {
-        this.isShown = false;
-      }
-    };
-    this.handleShow = () => {
-      this.isShown = true;
-    };
-    /** Adds an event listener to the reference element that shows/closes the modal. */
-    this.initializeReferenceElement = (referenceEl) => {
-      if (referenceEl) {
-        referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
-          if (this.isShown) {
-            this.handleClose(event);
-          }
-          else {
-            this.handleShow();
-          }
-        });
-      }
-    };
-    /** Check if there is a referenceElement or selector and adds event listener to them if so. */
-    this.setShowButton = () => {
-      var _a;
-      if (this.selector || this.referenceEl) {
-        const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-        if (referenceEl) {
-          this.initializeReferenceElement(referenceEl);
-        }
-      }
-    };
-    this.prevent = false;
-    this.size = 'md';
-    this.actions = 'static';
-    this.selector = undefined;
-    this.referenceEl = undefined;
-    this.show = undefined;
-    this.isShown = false;
-  }
-  /** Shows the modal.  */
-  async showModal() {
-    this.handleShow();
-  }
-  /** Closes the modal. */
-  async closeModal() {
-    this.handleClose();
-  }
-  connectedCallback() {
-    if (this.show !== null) {
-      this.isShown = this.show;
-    }
-    this.setDissmissButtons();
-    this.setShowButton();
-  }
-  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
-  handleOverlayClick(event) {
-    const targetList = event.composedPath();
-    const target = targetList[0];
-    if (target.classList[0] === 'sdds-modal-close' ||
-      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
-      this.handleClose(event);
-    }
-  }
-  /** Adds an event listener to the dismiss buttons that closes the modal. */
-  setDissmissButtons() {
-    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
-      dismissButton.addEventListener('click', (event) => {
-        this.handleClose(event);
-      });
-    });
-  }
-  render() {
-    return (h(Host, { onClick: (event) => {
-        this.handleOverlayClick(event);
-      }, class: `sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, h("div", { class: "sdds-modal-header" }, h("slot", { name: "sdds-modal-headline" }), h("button", { class: "sdds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("sdds-icon", { name: "cross", size: "20px" }))), h("div", { class: "sdds-modal-body" }, h("slot", { name: "sdds-modal-body" })), h("div", { class: "sdds-modal-actions" }, h("slot", { name: "sdds-modal-actions" })))));
-  }
-  static get is() { return "sdds-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["modal.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["modal.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "prevent": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disables closing modal on clicking on overlay area."
-        },
-        "attribute": "prevent",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xs' | 'sm' | 'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of modal"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'md'"
-      },
-      "actions": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sticky' | 'static'",
-          "resolved": "\"static\" | \"sticky\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sticky or Static Actions"
-        },
-        "attribute": "actions",
-        "reflect": false,
-        "defaultValue": "'static'"
-      },
-      "selector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "CSS selector for the element that will show the modal."
-        },
-        "attribute": "selector",
-        "reflect": false
-      },
-      "referenceEl": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement",
-          "resolved": "HTMLElement",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Element that will show the modal (takes priority over selector)"
-        }
-      },
-      "show": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls whether the modal is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
-        },
-        "attribute": "show",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isShown": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sddsClose",
-        "name": "sddsClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitts when the modal is closed."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "showModal": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the modal.",
-          "tags": []
-        }
-      },
-      "closeModal": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Closes the modal.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}
-//# sourceMappingURL=modal.js.map
+import { h, Host, } from '@stencil/core';
+export class Modal {
+  constructor() {
+    /** Emits a close event and then close the modal if it is not prevented. */
+    this.handleClose = (event) => {
+      const closeEvent = this.sddsClose.emit(event);
+      if (!closeEvent.defaultPrevented) {
+        this.isShown = false;
+      }
+    };
+    this.handleShow = () => {
+      this.isShown = true;
+    };
+    /** Adds an event listener to the reference element that shows/closes the modal. */
+    this.initializeReferenceElement = (referenceEl) => {
+      if (referenceEl) {
+        referenceEl.addEventListener('click', (event) => {
+          event.stopPropagation();
+          if (this.isShown) {
+            this.handleClose(event);
+          }
+          else {
+            this.handleShow();
+          }
+        });
+      }
+    };
+    /** Check if there is a referenceElement or selector and adds event listener to them if so. */
+    this.setShowButton = () => {
+      var _a;
+      if (this.selector || this.referenceEl) {
+        const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+        if (referenceEl) {
+          this.initializeReferenceElement(referenceEl);
+        }
+      }
+    };
+    this.prevent = false;
+    this.size = 'md';
+    this.actions = 'static';
+    this.selector = undefined;
+    this.referenceEl = undefined;
+    this.show = undefined;
+    this.isShown = false;
+  }
+  /** Shows the modal.  */
+  async showModal() {
+    this.handleShow();
+  }
+  /** Closes the modal. */
+  async closeModal() {
+    this.handleClose();
+  }
+  connectedCallback() {
+    if (this.show !== null) {
+      this.isShown = this.show;
+    }
+    this.setDissmissButtons();
+    this.setShowButton();
+  }
+  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
+  handleOverlayClick(event) {
+    const targetList = event.composedPath();
+    const target = targetList[0];
+    if (target.classList[0] === 'sdds-modal-close' ||
+      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
+      this.handleClose(event);
+    }
+  }
+  /** Adds an event listener to the dismiss buttons that closes the modal. */
+  setDissmissButtons() {
+    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
+      dismissButton.addEventListener('click', (event) => {
+        this.handleClose(event);
+      });
+    });
+  }
+  render() {
+    return (h(Host, { onClick: (event) => {
+        this.handleOverlayClick(event);
+      }, class: `sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, h("div", { class: "sdds-modal-header" }, h("slot", { name: "sdds-modal-headline" }), h("button", { class: "sdds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("sdds-icon", { name: "cross", size: "20px" }))), h("div", { class: "sdds-modal-body" }, h("slot", { name: "sdds-modal-body" })), h("div", { class: "sdds-modal-actions" }, h("slot", { name: "sdds-modal-actions" })))));
+  }
+  static get is() { return "sdds-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "prevent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables closing modal on clicking on overlay area."
+        },
+        "attribute": "prevent",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xs' | 'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of modal"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'md'"
+      },
+      "actions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sticky' | 'static'",
+          "resolved": "\"static\" | \"sticky\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sticky or Static Actions"
+        },
+        "attribute": "actions",
+        "reflect": false,
+        "defaultValue": "'static'"
+      },
+      "selector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "CSS selector for the element that will show the modal."
+        },
+        "attribute": "selector",
+        "reflect": false
+      },
+      "referenceEl": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Element that will show the modal (takes priority over selector)"
+        }
+      },
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls whether the modal is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
+        },
+        "attribute": "show",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isShown": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsClose",
+        "name": "sddsClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitts when the modal is closed."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "showModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Shows the modal.",
+          "tags": []
+        }
+      },
+      "closeModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Closes the modal.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=modal.js.map