@dnncommunity/dnn-elements 0.15.1 → 0.15.2

package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, State, Prop, Event } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { CornerType } from './CornerType';
 import { getMovementFromEvent } from "../../utilities/mouseUtilities";
 /**
@@ -380,144 +380,140 @@ export class DnnImageCropper {
     return inside;
   }
   render() {
-    return (h(Host, { ref: el => this.host = el },
-      h("canvas", { ref: el => this.canvas = el }),
-      h("div", { class: "view", ref: el => this.hasPictureView = el },
-        h("div", { class: "cropper" },
-          h("img", { ref: el => this.image = el }),
-          h("div", { class: "backdrop" }),
-          h("div", { class: "crop", ref: e => this.crop = e, onMouseDown: this.handleCropMouseDown, onTouchStart: this.handleCropMouseDown },
-            h("div", { class: "nw" }),
-            h("div", { class: "ne" }),
-            h("div", { class: "se" }),
-            h("div", { class: "sw" })))),
-      h("div", { class: "view", ref: el => this.noPictureView = el },
-        h("dnn-dropzone", { allowCameraMode: true, onFilesSelected: e => this.handleNewFile(e.detail[0]), resx: {
-            capture: this.resx.capture,
-            dragAndDropFile: this.resx.dragAndDropFile,
-            or: this.resx.or,
-            takePicture: this.resx.takePicture,
-            uploadFile: this.resx.uploadFile,
-          } })),
-      h("dnn-modal", { ref: el => this.imageTooSmallModal = el, "close-text": this.resx.modalCloseText },
-        h("p", null, this.resx.imageTooSmall.replace("{width}", this.width.toString()).replace("{height}", this.height.toString())))));
+    return (h(Host, { ref: el => this.host = el }, h("canvas", { ref: el => this.canvas = el }), h("div", { class: "view", ref: el => this.hasPictureView = el }, h("div", { class: "cropper" }, h("img", { ref: el => this.image = el }), h("div", { class: "backdrop" }), h("div", { class: "crop", ref: e => this.crop = e, onMouseDown: this.handleCropMouseDown, onTouchStart: this.handleCropMouseDown }, h("div", { class: "nw" }), h("div", { class: "ne" }), h("div", { class: "se" }), h("div", { class: "sw" })))), h("div", { class: "view", ref: el => this.noPictureView = el }, h("dnn-dropzone", { allowCameraMode: true, onFilesSelected: e => this.handleNewFile(e.detail[0]), resx: {
+        capture: this.resx.capture,
+        dragAndDropFile: this.resx.dragAndDropFile,
+        or: this.resx.or,
+        takePicture: this.resx.takePicture,
+        uploadFile: this.resx.uploadFile,
+      } })), h("dnn-modal", { ref: el => this.imageTooSmallModal = el, "close-text": this.resx.modalCloseText }, h("p", null, this.resx.imageTooSmall.replace("{width}", this.width.toString()).replace("{height}", this.height.toString())))));
   }
   static get is() { return "dnn-image-cropper"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-image-cropper.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-image-cropper.css"]
-  }; }
-  static get properties() { return {
-    "width": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the desired final image width."
-      },
-      "attribute": "width",
-      "reflect": false,
-      "defaultValue": "600"
-    },
-    "height": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the desired final image height."
-      },
-      "attribute": "height",
-      "reflect": false,
-      "defaultValue": "600"
-    },
-    "resx": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "{\n    capture: string;\n    dragAndDropFile: string;\n    or: string;\n    takePicture: string;\n    uploadFile: string;\n    imageTooSmall: string;\n    modalCloseText: string;\n  }",
-        "resolved": "{ capture: string; dragAndDropFile: string; or: string; takePicture: string; uploadFile: string; imageTooSmall: string; modalCloseText: string; }",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Can be used to customize controls text.\nSome values support tokens, see default values for examples."
-      },
-      "defaultValue": "{\n    capture: \"Capture\",\n    dragAndDropFile: \"Drag and drop an image\",\n    or: \"or\",\n    takePicture: \"Take a picture\",\n    uploadFile: \"Upload an image\",\n    imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\n    modalCloseText: \"Close\",\n  }"
-    },
-    "quality": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the output quality of the corpped image (number between 0 and 1)."
+  static get originalStyleUrls() {
+    return {
+      "$": ["dnn-image-cropper.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dnn-image-cropper.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "width": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the desired final image width."
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "600"
       },
-      "attribute": "quality",
-      "reflect": false,
-      "defaultValue": "0.8"
-    },
-    "preventUndersized": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "height": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the desired final image height."
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "600"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry."
+      "resx": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    capture: string;\n    dragAndDropFile: string;\n    or: string;\n    takePicture: string;\n    uploadFile: string;\n    imageTooSmall: string;\n    modalCloseText: string;\n  }",
+          "resolved": "{ capture: string; dragAndDropFile: string; or: string; takePicture: string; uploadFile: string; imageTooSmall: string; modalCloseText: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Can be used to customize controls text.\nSome values support tokens, see default values for examples."
+        },
+        "defaultValue": "{\n    capture: \"Capture\",\n    dragAndDropFile: \"Drag and drop an image\",\n    or: \"or\",\n    takePicture: \"Take a picture\",\n    uploadFile: \"Upload an image\",\n    imageTooSmall: \"The image you are attempting to upload does not meet the minimum size requirement of {width} pixels by {height} pixels. Please upload a larger image.\",\n    modalCloseText: \"Close\",\n  }"
       },
-      "attribute": "prevent-undersized",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "view": {}
-  }; }
-  static get events() { return [{
-      "method": "imageCropChanged",
-      "name": "imageCropChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "When the image crop changes, emits the dataurl for the new cropped image."
+      "quality": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the output quality of the corpped image (number between 0 and 1)."
+        },
+        "attribute": "quality",
+        "reflect": false,
+        "defaultValue": "0.8"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "preventUndersized": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry."
+        },
+        "attribute": "prevent-undersized",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "view": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "imageCropChanged",
+        "name": "imageCropChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When the image crop changes, emits the dataurl for the new cropped image."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
 }
-//# sourceMappingURL=dnn-image-cropper.js.map
+//# sourceMappingURL=dnn-image-cropper.js.map

package/dist/collection/components/dnn-image-cropper/dnn-image-cropper.stories.js

@@ -57,4 +57,4 @@ ImageCropper.args = {
   preventUndersized: false,
   resx,
 };
-//# sourceMappingURL=dnn-image-cropper.stories.js.map
+//# sourceMappingURL=dnn-image-cropper.stories.js.map

package/dist/collection/components/dnn-modal/dnn-modal.css

@@ -34,6 +34,11 @@
   box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.5);
   display: block;
 }
+:host .overlay .modal .content {
+  max-width: 80vw;
+  max-height: 80vh;
+  overflow: auto;
+}
 :host .overlay .modal .close {
   position: absolute;
   background-color: white;

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

@@ -1,4 +1,4 @@
-import { Component, Element, Host, h, Prop, Event, Method } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class DnnModal {
   constructor() {
     /**
@@ -44,148 +44,151 @@ export class DnnModal {
     }
   }
   render() {
-    return (h(Host, null,
-      h("div", { id: "backdrop", class: this.visible ? 'overlay visible' : 'overlay', onClick: e => this.handleBackdropClick(e) },
-        h("div", { class: "modal" },
-          this.showCloseButton &&
-            h("button", { class: "close", "aria-label": this.closeText, onClick: () => this.handleDismiss() },
-              h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" },
-                h("path", { d: "M0 0h24v24H0z", fill: "none" }),
-                h("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" }))),
-          h("slot", null)))));
+    return (h(Host, null, h("div", { id: "backdrop", class: this.visible ? 'overlay visible' : 'overlay', onClick: e => this.handleBackdropClick(e) }, h("div", { class: "modal" }, this.showCloseButton &&
+      h("button", { class: "close", "aria-label": this.closeText, onClick: () => this.handleDismiss() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("path", { d: "M0 0h24v24H0z", fill: "none" }), h("path", { d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" }))), h("div", { class: "content" }, h("slot", null))))));
   }
   static get is() { return "dnn-modal"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dnn-modal.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dnn-modal.css"]
-  }; }
-  static get properties() { return {
-    "backdropDismiss": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Pass false to remove the backdrop click auto-dismiss feature."
-      },
-      "attribute": "backdrop-dismiss",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "closeText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Optionally pass the aria-label text for the close button.\nDefaults to \"Close modal\" if not provided."
-      },
-      "attribute": "close-text",
-      "reflect": false,
-      "defaultValue": "\"Close modal\""
-    },
-    "showCloseButton": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Optionally you can pass false to not show the close button.\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\nor provide your own dismissal logic in the modal content."
-      },
-      "attribute": "show-close-button",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "visible": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Reflects the visible state of the modal."
+  static get originalStyleUrls() {
+    return {
+      "$": ["dnn-modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dnn-modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "backdropDismiss": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Pass false to remove the backdrop click auto-dismiss feature."
+        },
+        "attribute": "backdrop-dismiss",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "attribute": "visible",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "dismissed",
-      "name": "dismissed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Fires when the modal is dismissed."
+      "closeText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optionally pass the aria-label text for the close button.\nDefaults to \"Close modal\" if not provided."
+        },
+        "attribute": "close-text",
+        "reflect": false,
+        "defaultValue": "\"Close modal\""
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "showCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
-        "return": "Promise<void>"
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optionally you can pass false to not show the close button.\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\nor provide your own dismissal logic in the modal content."
+        },
+        "attribute": "show-close-button",
+        "reflect": false,
+        "defaultValue": "true"
       },
-      "docs": {
-        "text": "Shows the modal",
-        "tags": []
+      "visible": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Reflects the visible state of the modal."
+        },
+        "attribute": "visible",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    },
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dismissed",
+        "name": "dismissed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fires when the modal is dismissed."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Shows the modal",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Hides the modal",
-        "tags": []
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hides the modal",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=dnn-modal.js.map
+//# sourceMappingURL=dnn-modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dnn-modal.js","sourceRoot":"","sources":["../../../src/components/dnn-modal/dnn-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAO/F,MAAM,OAAO,QAAQ;EALrB;IASE;;OAEG;IACK,oBAAe,GAAY,IAAI,CAAC;IAExC;;;OAGG;IACK,cAAS,GAAY,aAAa,CAAC;IAE3C;;;;OAIG;IACK,oBAAe,GAAa,IAAI,CAAC;IAEzC;;OAEG;IACmC,YAAO,GAAY,KAAK,CAAC;GA0DhE;EAxDC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;EACtB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAOO,aAAa;IACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAEO,mBAAmB,CAAC,CAAa;IACvC,MAAM,OAAO,GAAI,CAAC,CAAC,MAAsB,CAAC;IAC1C,IAAI,OAAO,CAAC,EAAE,KAAK,UAAU,IAAI,IAAI,CAAC,eAAe,EAAC;MACpD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACnD,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAEzC,WAAK,KAAK,EAAC,OAAO;UACf,IAAI,CAAC,eAAe;YACnB,cACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;cAEnC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;gBAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;gBAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;UAEX,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-modal',\n  styleUrl: 'dnn-modal.scss',\n  shadow: true\n})\nexport class DnnModal {\n  \n  @Element() el!: HTMLDnnModalElement;\n  \n  /**\n   * Pass false to remove the backdrop click auto-dismiss feature.\n   */\n  @Prop() backdropDismiss: boolean = true;\n\n  /**\n   * Optionally pass the aria-label text for the close button.\n   * Defaults to \"Close modal\" if not provided.\n   */\n  @Prop() closeText?: string = \"Close modal\";\n\n  /**\n   * Optionally you can pass false to not show the close button.\n   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\n   * or provide your own dismissal logic in the modal content.\n   */\n  @Prop() showCloseButton?: boolean = true;\n\n  /**\n   * Reflects the visible state of the modal.\n   */\n  @Prop({mutable: true, reflect: true}) visible: boolean = false;\n\n  /**\n   * Shows the modal\n   */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  /**\n   * Hides the modal\n   */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /**\n   * Fires when the modal is dismissed.\n   */\n  @Event() dismissed!: EventEmitter;\n\n  private handleDismiss(){\n    this.visible = false;\n    this.dismissed.emit();\n  }\n\n  private handleBackdropClick(e: MouseEvent): void {\n    const element = (e.target as HTMLElement);\n    if (element.id === \"backdrop\" && this.backdropDismiss){\n      this.handleDismiss();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"backdrop\"\n          class={this.visible ? 'overlay visible' : 'overlay'}\n          onClick={e => this.handleBackdropClick(e)}\n        >\n          <div class=\"modal\">\n            {this.showCloseButton &&\n              <button\n                class=\"close\"\n                aria-label={this.closeText}\n                onClick={() => this.handleDismiss()}\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\n              </button>\n            }\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dnn-modal.js","sourceRoot":"","sources":["../../../src/components/dnn-modal/dnn-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAO/F,MAAM,OAAO,QAAQ;EALrB;IASE;;OAEG;IACK,oBAAe,GAAY,IAAI,CAAC;IAExC;;;OAGG;IACK,cAAS,GAAY,aAAa,CAAC;IAE3C;;;;OAIG;IACK,oBAAe,GAAa,IAAI,CAAC;IAEzC;;OAEG;IACmC,YAAO,GAAY,KAAK,CAAC;GA4DhE;EA1DC;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;EACtB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAOO,aAAa;IACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAEO,mBAAmB,CAAC,CAAa;IACvC,MAAM,OAAO,GAAI,CAAC,CAAC,MAAsB,CAAC;IAC1C,IAAI,OAAO,CAAC,EAAE,KAAK,UAAU,IAAI,IAAI,CAAC,eAAe,EAAC;MACpD,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EACnD,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAEzC,WAAK,KAAK,EAAC,OAAO;UACf,IAAI,CAAC,eAAe;YACnB,cACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;cAEnC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS;gBAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE;gBAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU;UAEX,WAAK,KAAK,EAAC,SAAS;YAClB,eAAa,CACT,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'dnn-modal',\n  styleUrl: 'dnn-modal.scss',\n  shadow: true\n})\nexport class DnnModal {\n  \n  @Element() el!: HTMLDnnModalElement;\n  \n  /**\n   * Pass false to remove the backdrop click auto-dismiss feature.\n   */\n  @Prop() backdropDismiss: boolean = true;\n\n  /**\n   * Optionally pass the aria-label text for the close button.\n   * Defaults to \"Close modal\" if not provided.\n   */\n  @Prop() closeText?: string = \"Close modal\";\n\n  /**\n   * Optionally you can pass false to not show the close button.\n   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\n   * or provide your own dismissal logic in the modal content.\n   */\n  @Prop() showCloseButton?: boolean = true;\n\n  /**\n   * Reflects the visible state of the modal.\n   */\n  @Prop({mutable: true, reflect: true}) visible: boolean = false;\n\n  /**\n   * Shows the modal\n   */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  /**\n   * Hides the modal\n   */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /**\n   * Fires when the modal is dismissed.\n   */\n  @Event() dismissed!: EventEmitter;\n\n  private handleDismiss(){\n    this.visible = false;\n    this.dismissed.emit();\n  }\n\n  private handleBackdropClick(e: MouseEvent): void {\n    const element = (e.target as HTMLElement);\n    if (element.id === \"backdrop\" && this.backdropDismiss){\n      this.handleDismiss();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div id=\"backdrop\"\n          class={this.visible ? 'overlay visible' : 'overlay'}\n          onClick={e => this.handleBackdropClick(e)}\n        >\n          <div class=\"modal\">\n            {this.showCloseButton &&\n              <button\n                class=\"close\"\n                aria-label={this.closeText}\n                onClick={() => this.handleDismiss()}\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\"/></svg>\n              </button>\n            }\n            <div class=\"content\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dnn-modal/dnn-modal.stories.js

@@ -44,4 +44,4 @@ Modal.args = {
   slot: `<h1>Welcome to the DNN Modal</h1>
         <p>This is a modal component that can be used to display content to the user.</p>`
 };
-//# sourceMappingURL=dnn-modal.stories.js.map
+//# sourceMappingURL=dnn-modal.stories.js.map