@dnncommunity/dnn-elements 0.13.0-beta.1

package/dist/dnn/dnn-dropzone.entry.js

@@ -0,0 +1,149 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-6c0764e5.js';
+
+const dnnDropzoneCss = ":host{--border-color:var(--dnn-color-tertiary-contrast, lightgray);--border-radius:var(--dnn-controls-radius, 5px);--drop-background-color:var(--dnn-color-tertiary, lightblue);display:flex;flex-direction:column;gap:1rem;text-align:center;border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:1rem;transition:all 300ms ease-in-out}:host(.dropping){background-color:var(--drop-background-color)}p{margin:0;padding:0}button{display:flex;justify-content:center;align-items:center;border:0px;margin:0;padding:0;background-color:transparent}button:hover{cursor:pointer}button svg{margin-right:0.5rem}label.upload-file{display:flex;justify-content:center;align-items:center;cursor:pointer}label.upload-file input{display:none}.video-preview{display:flex;flex-direction:column;align-items:center}.video-preview button{margin:1rem}";
+
+let DnnDropzone = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filesSelected = createEvent(this, "filesSelected", 7);
+    /** Localization strings */
+    this.resx = {
+      dragAndDropFile: "Drag and drop a file",
+      capture: "Capture",
+      or: "or",
+      takePicture: "Take a picture",
+      uploadFile: "Upload a file",
+    };
+    /**
+     * If true, will allow the user to take a snapshot
+     * using the device camera. (only works over https).
+     */
+    this.allowCameraMode = false;
+    /**
+     * Specifies the jpeg quality for when the device
+     * camera is used to generate a picture.
+     * Needs to be a number between 0 and 1 and defaults to 0.8
+     */
+    this.captureQuality = 0.8;
+    this.canTakeSnapshots = false;
+    this.takingPicture = false;
+    this.handleDragOver = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "copy";
+      this.dropzone.classList.add("dropping");
+    };
+    this.handleDrop = (dropEvent) => {
+      dropEvent.stopPropagation();
+      dropEvent.preventDefault();
+      const files = dropEvent.dataTransfer.files;
+      if (this.hasInvalidExtensions(files)) {
+        return;
+      }
+      var fileList = this.getFilesFromFileList(files);
+      this.filesSelected.emit(fileList);
+    };
+  }
+  componentDidLoad() {
+    if (this.allowCameraMode) {
+      this.checkIfBrowserCanTakeSnapshots()
+        .then(result => this.canTakeSnapshots = result);
+    }
+    if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0) {
+      var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);
+      var extensionsList = extensionsWithDots.join(",");
+      this.fileInput.accept = extensionsList;
+    }
+  }
+  checkIfBrowserCanTakeSnapshots() {
+    return new Promise((resolve) => {
+      const mediaDevices = navigator.mediaDevices;
+      if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {
+        resolve(false);
+      }
+      mediaDevices.enumerateDevices()
+        .then(devices => {
+        var result = devices.some(device => device.kind == "videoinput");
+        resolve(result);
+      });
+    });
+  }
+  getFilesFromFileList(files) {
+    var fileList = [];
+    for (let index = 0; index < files.length; index++) {
+      const file = files[index];
+      fileList.push(file);
+    }
+    return fileList;
+  }
+  handleUploadButton(element) {
+    let files = this.getFilesFromFileList(element.files);
+    this.filesSelected.emit(files);
+  }
+  hasInvalidExtensions(files) {
+    var hasInvalid = false;
+    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
+      const file = files[fileIndex];
+      var regex = /(?:\.([^.]+))?$/;
+      const fileExtension = regex.exec(file.name)[1];
+      if (fileExtension == undefined) {
+        hasInvalid = true;
+      }
+      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)) {
+        hasInvalid = true;
+      }
+      return hasInvalid;
+    }
+  }
+  takeSnapshot() {
+    this.takingPicture = true;
+    navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+      .then(stream => {
+      stream;
+      this.videoPreview.srcObject = stream;
+      this.videoPreview.play()
+        .then(() => {
+        this.videoSettings = stream.getVideoTracks()[0].getSettings();
+      });
+    })
+      .catch(error => alert(error));
+  }
+  applySnapshot() {
+    var canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    canvas.width = this.videoSettings.width;
+    canvas.height = this.videoSettings.height;
+    context.drawImage(this.videoPreview, 0, 0);
+    canvas.toBlob(blob => {
+      var file = new File([blob], "image.jpeg", { type: "image/jpeg" });
+      this.takingPicture = false;
+      var fileList = [file];
+      this.filesSelected.emit(fileList);
+    }, "image/jpeg", this.captureQuality);
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    return (h(Host, { ref: e => this.dropzone = e, class: "dropzone", onDragOver: this.handleDragOver, onDrop: this.handleDrop, onDragLeave: () => this.dropzone.classList.remove("dropping") }, !this.takingPicture &&
+      [
+        h("p", null, (_a = this.resx) === null || _a === void 0 ? void 0 : _a.dragAndDropFile),
+        h("p", null, "- ", (_b = this.resx) === null || _b === void 0 ? void 0 :
+          _b.or, " -"),
+        h("label", { class: "upload-file" }, h("input", { type: "file", ref: el => this.fileInput = el, onChange: e => this.handleUploadButton(e.target) }), h("span", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#000000" }, h("g", null, h("rect", { fill: "none", height: "24", width: "24" })), h("g", null, h("path", { d: "M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z" })))), "\u00A0", (_c = this.resx) === null || _c === void 0 ? void 0 :
+          _c.uploadFile),
+        this.canTakeSnapshots &&
+          [
+            h("p", null, "- ", (_d = this.resx) === null || _d === void 0 ? void 0 :
+              _d.or, " -"),
+            h("button", { onClick: () => this.takeSnapshot() }, 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("circle", { cx: "12", cy: "12", r: "3.2" }), h("path", { d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), (_e = this.resx) === null || _e === void 0 ? void 0 :
+              _e.takePicture)
+          ]
+      ], this.takingPicture &&
+      h("div", { class: "video-preview" }, h("video", { ref: e => this.videoPreview = e }), h("button", { onClick: () => this.applySnapshot() }, 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("circle", { cx: "12", cy: "12", r: "3.2" }), h("path", { d: "M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" })), "\u00A0", (_f = this.resx) === null || _f === void 0 ? void 0 :
+        _f.capture))));
+  }
+};
+DnnDropzone.style = dnnDropzoneCss;
+
+export { DnnDropzone as dnn_dropzone };
+
+//# sourceMappingURL=dnn-dropzone.entry.js.map

package/dist/dnn/dnn-dropzone.entry.js.map

@@ -0,0 +1 @@
+{"file":"dnn-dropzone.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-dropzone/dnn-dropzone.scss?tag=dnn-dropzone&encapsulation=shadow","./src/components/dnn-dropzone/dnn-dropzone.tsx"],"sourcesContent":["\r\n:host {\r\n  /** \r\n  * @prop --border-color: The color of the border.\r\n  * @prop --border-radius: The radius of the controls borders.\r\n  * @prop --drop-background-color: The color of the background when a file is dropping.\r\n  */\r\n  --border-color: var(--dnn-color-tertiary-contrast, lightgray);\r\n  --border-radius: var(--dnn-controls-radius, 5px);\r\n  --drop-background-color: var(--dnn-color-tertiary, lightblue);\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 1rem;\r\n  text-align: center;\r\n  border: 2px dashed var(--border-color);\r\n  border-radius: var(--border-radius);\r\n  padding: 1rem;\r\n  transition: all 300ms ease-in-out;\r\n}\r\n\r\n:host(.dropping){\r\n  background-color: var(--drop-background-color);\r\n}\r\np{\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\nbutton{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  border: 0px;\r\n  margin: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  &:hover{\r\n    cursor: pointer;\r\n  }\r\n  svg{\r\n    margin-right: 0.5rem;\r\n  }\r\n}\r\nlabel.upload-file{\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  input{\r\n    display: none;\r\n  }\r\n}\r\n.video-preview{\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  button{\r\n    margin: 1rem;\r\n  }\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-dropzone',\r\n  styleUrl: 'dnn-dropzone.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnDropzone {\r\n  /** Localization strings */\r\n  @Prop() resx:{\r\n    dragAndDropFile: string;\r\n    capture: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n  } = {\r\n    dragAndDropFile: \"Drag and drop a file\",\r\n    capture: \"Capture\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload a file\",\r\n  }\r\n\r\n  /** A list of allowed file extensions.\r\n   * If not specified, any file is allowed.\r\n   * Ex: [\"jpg\", \"jped\", \"gif\", \"png\"]\r\n   */\r\n  @Prop() allowedExtensions: string[];\r\n\r\n  /**\r\n   * If true, will allow the user to take a snapshot\r\n   * using the device camera. (only works over https).\r\n   */\r\n  @Prop() allowCameraMode: boolean = false;\r\n\r\n  /**\r\n   * Specifies the jpeg quality for when the device\r\n   * camera is used to generate a picture.\r\n   * Needs to be a number between 0 and 1 and defaults to 0.8\r\n   */\r\n  @Prop() captureQuality: number = 0.8;\r\n\r\n  /** Fires when file were selected. */\r\n  @Event() filesSelected: EventEmitter<File[]>;\r\n  \r\n  @State() canTakeSnapshots: boolean = false;\r\n\r\n  @State() takingPicture: boolean = false;\r\n  \r\n  private dropzone: HTMLElement;\r\n  private fileInput: HTMLInputElement;\r\n  private videoPreview: HTMLVideoElement;\r\n  private videoSettings!: MediaTrackSettings;\r\n\r\n\r\n  componentDidLoad() {\r\n    if (this.allowCameraMode){\r\n      this.checkIfBrowserCanTakeSnapshots()\r\n      .then(result => this.canTakeSnapshots = result);\r\n    }\r\n    if (this.allowedExtensions != undefined && this.allowedExtensions.length > 0){\r\n      var extensionsWithDots = this.allowedExtensions.map(e => `.${e}`);\r\n      var extensionsList = extensionsWithDots.join(\",\");\r\n      this.fileInput.accept = extensionsList;\r\n    }\r\n  }\r\n\r\n  private checkIfBrowserCanTakeSnapshots(): Promise<boolean> {\r\n    return new Promise((resolve) => {\r\n      const mediaDevices = navigator.mediaDevices;\r\n      if (mediaDevices == undefined || mediaDevices.enumerateDevices == undefined) {\r\n        resolve(false);\r\n      }\r\n      mediaDevices.enumerateDevices()\r\n        .then(devices => {\r\n          var result = devices.some(device => device.kind == \"videoinput\");\r\n          resolve(result);\r\n        });\r\n    });\r\n  }\r\n\r\n  private getFilesFromFileList(files: FileList) : File[] {\r\n    var fileList: File[] = [];\r\n    for (let index = 0; index < files.length; index++) {\r\n      const file = files[index];\r\n      fileList.push(file);\r\n    }\r\n\r\n    return fileList;\r\n  }\r\n\r\n  private handleUploadButton(element: HTMLInputElement): void {\r\n    let files = this.getFilesFromFileList(element.files);\r\n\r\n    this.filesSelected.emit(files);\r\n  }\r\n\r\n  private handleDragOver = (event: DragEvent) => \r\n  {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    event.dataTransfer.dropEffect = \"copy\";\r\n    this.dropzone.classList.add(\"dropping\");\r\n  };\r\n\r\n  private hasInvalidExtensions(files: FileList): boolean{\r\n    var hasInvalid = false;\r\n    for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {\r\n      const file = files[fileIndex];\r\n      var regex = /(?:\\.([^.]+))?$/;\r\n      const fileExtension = regex.exec(file.name)[1];\r\n      if (fileExtension == undefined){\r\n        hasInvalid = true;\r\n      }\r\n\r\n      if (this.allowedExtensions != undefined && !this.allowedExtensions.includes(fileExtension)){\r\n        hasInvalid = true;\r\n      }\r\n\r\n      return hasInvalid;\r\n    }\r\n  }\r\n\r\n  private handleDrop = (dropEvent: DragEvent) => {\r\n    dropEvent.stopPropagation();\r\n    dropEvent.preventDefault();\r\n    const files = dropEvent.dataTransfer.files;\r\n\r\n    if (this.hasInvalidExtensions(files)){\r\n      return;\r\n    }\r\n    var fileList = this.getFilesFromFileList(files);\r\n    this.filesSelected.emit(fileList);\r\n  };\r\n\r\n  private takeSnapshot(): void {\r\n    this.takingPicture = true;\r\n    navigator.mediaDevices.getUserMedia({video: true, audio: false})\r\n    .then(stream => {\r\n      stream\r\n      this.videoPreview.srcObject = stream;\r\n      this.videoPreview.play()\r\n      .then(() => {\r\n        this.videoSettings = stream.getVideoTracks()[0].getSettings();\r\n      });\r\n    })\r\n    .catch(error => alert(error));\r\n  }\r\n\r\n  private applySnapshot(): void {\r\n    var canvas = document.createElement(\"canvas\");\r\n    const context = canvas.getContext(\"2d\");\r\n    canvas.width = this.videoSettings.width;\r\n    canvas.height = this.videoSettings.height;\r\n    context.drawImage(this.videoPreview, 0, 0);\r\n    canvas.toBlob(blob => {\r\n      var file = new File([blob], \"image.jpeg\", {type:\"image/jpeg\"});\r\n      this.takingPicture = false;\r\n      \r\n      var fileList = [file];\r\n      this.filesSelected.emit(fileList)\r\n    }, \"image/jpeg\", this.captureQuality);\r\n  }\r\n  \r\n  render() {\r\n    return (\r\n      <Host\r\n        ref={e => this.dropzone = e}\r\n        class=\"dropzone\"\r\n        onDragOver={this.handleDragOver}\r\n        onDrop={this.handleDrop}\r\n        onDragLeave={() => this.dropzone.classList.remove(\"dropping\")}\r\n      >\r\n        {!this.takingPicture &&\r\n          [\r\n            <p>{this.resx?.dragAndDropFile}</p>\r\n          ,\r\n            <p>- {this.resx?.or} -</p>\r\n          ,\r\n            <label class=\"upload-file\">\r\n              <input\r\n                type=\"file\"\r\n                ref={el => this.fileInput = el}\r\n                onChange={e => this.handleUploadButton(e.target as HTMLInputElement)}\r\n              >\r\n              </input>\r\n              <span>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"#000000\"><g><rect fill=\"none\" height=\"24\" width=\"24\"/></g><g><path d=\"M5,20h14v-2H5V20z M5,10h4v6h6v-6h4l-7-7L5,10z\"/></g></svg>\r\n              </span>\r\n              &nbsp;\r\n              {this.resx?.uploadFile}\r\n            </label>\r\n            ,\r\n            this.canTakeSnapshots &&\r\n              [\r\n                <p>- {this.resx?.or} -</p>\r\n                ,\r\n                <button\r\n                  onClick={() => this.takeSnapshot()}\r\n                >\r\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\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"/></svg>\r\n                  {this.resx?.takePicture}\r\n                </button>\r\n              ]\r\n          ]\r\n        }\r\n        {this.takingPicture &&\r\n          <div class=\"video-preview\">\r\n            <video ref={e => this.videoPreview = e} />\r\n            <button\r\n              onClick={() => this.applySnapshot()}\r\n            >\r\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\"/><circle cx=\"12\" cy=\"12\" r=\"3.2\"/><path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z\"/></svg>&nbsp;\r\n              {this.resx?.capture}\r\n            </button>\r\n          </div>\r\n        }\r\n      </Host>\r\n    );\r\n  }\r\n\r\n}\r\n"],"version":3}

package/dist/dnn/dnn-image-cropper.entry.js

@@ -0,0 +1,420 @@
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-6c0764e5.js';
+
+var CornerType;
+(function (CornerType) {
+  CornerType[CornerType["nw"] = 0] = "nw";
+  CornerType[CornerType["ne"] = 1] = "ne";
+  CornerType[CornerType["se"] = 2] = "se";
+  CornerType[CornerType["sw"] = 3] = "sw";
+})(CornerType || (CornerType = {}));
+;
+
+const dnnImageCropperCss = ":host{display:block}canvas{display:none}.view{visibility:hidden;opacity:0;height:0;overflow:hidden;transition:all 300ms ease-in-out}.view.visible{visibility:visible;opacity:1;height:initial;overflow:visible}.view .cropper{position:relative;width:100%}.view .cropper img{width:100%;display:block;margin:0 auto}.view .cropper .backdrop{backdrop-filter:saturate(0.5);backdrop-filter:brightness(0.5);position:absolute;left:0;top:0;width:100%;height:100%}.view .cropper .crop{position:absolute;top:0;left:0;width:100%;height:100%;outline:2px dashed white;box-shadow:black 0 0 0px 2px;backdrop-filter:saturate(2);backdrop-filter:brightness(2);cursor:move}.view .cropper .crop>div{width:20px;height:20px;background-color:white;border:2px solid rgba(0, 0, 0, 0.5);position:absolute}.view .cropper .crop>div.nw,.view .cropper .crop>div.ne{top:-17px}.view .cropper .crop>div.ne,.view .cropper .crop>div.se{right:-17px}.view .cropper .crop>div.se,.view .cropper .crop>div.sw{bottom:-17px}.view .cropper .crop>div.sw,.view .cropper .crop>div.nw{left:-17px}.view .cropper .crop>div.nw,.view .cropper .crop>div.se{cursor:nwse-resize}.view .cropper .crop>div.ne,.view .cropper .crop>div.sw{cursor:nesw-resize}dnn-modal{--max-width:512px}";
+
+let DnnImageCropper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.imageCropChanged = createEvent(this, "imageCropChanged", 7);
+    /** Sets the desired final image width. */
+    this.width = 600;
+    /** Sets the desired final image height. */
+    this.height = 600;
+    /** Can be used to customize controls text.
+     * Some values support tokens, see default values for examples.
+    */
+    this.resx = {
+      capture: "Capture",
+      dragAndDropFile: "Drag and drop an image",
+      or: "or",
+      takePicture: "Take a picture",
+      uploadFile: "Upload an image",
+      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.",
+      modalCloseText: "Close",
+    };
+    /** Sets the output quality of the corpped image (number between 0 and 1). */
+    this.quality = 0.8;
+    /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */
+    this.preventUndersized = false;
+    this.handleCropMouseDown = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      const element = event.target;
+      const className = element.classList[0];
+      document.addEventListener("mouseup", this.handleImageCropFinished, false);
+      document.addEventListener("touchend", this.handleImageCropFinished, false);
+      switch (className) {
+        case "crop":
+          document.addEventListener("mousemove", this.handleCropDrag, false);
+          document.addEventListener("touchmove", this.handleCropDrag, false);
+          document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleCropDrag));
+          document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleCropDrag));
+          break;
+        case "nw":
+          document.addEventListener("mousemove", this.handleNwMouseMove, false);
+          document.addEventListener("touchmove", this.handleNwMouseMove, false);
+          document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleNwMouseMove));
+          document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleNwMouseMove));
+          break;
+        case "ne":
+          document.addEventListener("mousemove", this.handleNeMouseMove, false);
+          document.addEventListener("touchmove", this.handleNeMouseMove, false);
+          document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleNeMouseMove));
+          document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleNeMouseMove));
+          break;
+        case "se":
+          document.addEventListener("mousemove", this.handleSeMouseMove, false);
+          document.addEventListener("touchmove", this.handleSeMouseMove, false);
+          document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleSeMouseMove));
+          document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleSeMouseMove));
+          break;
+        case "sw":
+          document.addEventListener("mousemove", this.handleSwMouseMove, false);
+          document.addEventListener("touchmove", this.handleSwMouseMove, false);
+          document.addEventListener("mouseup", () => document.removeEventListener("mousemove", this.handleSwMouseMove));
+          document.addEventListener("touchend", () => document.removeEventListener("touchmove", this.handleSwMouseMove));
+          break;
+        default:
+          break;
+      }
+    };
+    this.handleImageCropFinished = (_ev) => {
+      this.emitImage();
+      document.removeEventListener("mouseup", this.handleImageCropFinished);
+      this.previousTouch = undefined;
+    };
+    this.handleNwMouseMove = (event) => {
+      this.handleCornerDrag(event, CornerType.nw);
+    };
+    this.handleNeMouseMove = (event) => {
+      this.handleCornerDrag(event, CornerType.ne);
+    };
+    this.handleSeMouseMove = (event) => {
+      this.handleCornerDrag(event, CornerType.se);
+    };
+    this.handleSwMouseMove = (event) => {
+      this.handleCornerDrag(event, CornerType.sw);
+    };
+    this.handleCornerDrag = (event, corner) => {
+      if (!this.isMouseStillInTarget(event)) {
+        return;
+      }
+      let { left, top } = this.getCornerLeftTop(corner);
+      let newWidth = 0;
+      let newHeight = 0;
+      let orientation = "horizontal";
+      const wantedRatio = this.width / this.height;
+      const cropRect = this.crop.getBoundingClientRect();
+      const imageRect = this.image.getBoundingClientRect();
+      let { movementX, movementY } = this.getMouvementFromEvent(event);
+      if (Math.abs(movementX) < Math.abs(movementY)) {
+        orientation = "vertical";
+      }
+      if (orientation == "horizontal") {
+        switch (corner) {
+          case CornerType.nw:
+          case CornerType.sw:
+            newWidth = cropRect.width - movementX;
+            newHeight = newWidth / wantedRatio;
+            break;
+          case CornerType.ne:
+          case CornerType.se:
+            newWidth = cropRect.width + movementX;
+            newHeight = newWidth / wantedRatio;
+            break;
+          default:
+            break;
+        }
+      }
+      else {
+        switch (corner) {
+          case CornerType.nw:
+          case CornerType.ne:
+            newHeight = cropRect.height - movementY;
+            newWidth = newHeight * wantedRatio;
+            break;
+          case CornerType.se:
+          case CornerType.sw:
+            newHeight = cropRect.height + movementY;
+            newWidth = newHeight * wantedRatio;
+            break;
+          default:
+            break;
+        }
+      }
+      switch (corner) {
+        case CornerType.ne:
+        case CornerType.nw:
+          const topOffset = cropRect.height - newHeight;
+          top = this.crop.offsetTop + topOffset;
+        default:
+          break;
+      }
+      switch (corner) {
+        case CornerType.nw:
+        case CornerType.sw:
+          const leftOffset = cropRect.width - newWidth;
+          left = this.crop.offsetLeft + leftOffset;
+          if (left < 0)
+            left = 0;
+          if (left > imageRect.width)
+            left = imageRect.width;
+          if (top < 0)
+            top = 0;
+          if (top > imageRect.height)
+            top = imageRect.height;
+          if (left + newWidth > imageRect.width)
+            newWidth = imageRect.width - left;
+          if (top + newHeight > imageRect.height)
+            newHeight = imageRect.height - top;
+          break;
+        case CornerType.ne:
+        case CornerType.se:
+          if (top < 0)
+            top = 0;
+          if (top > imageRect.height)
+            top = imageRect.height;
+          if (left + newWidth > imageRect.width)
+            newWidth = imageRect.width - left;
+          if (top + newHeight > imageRect.height)
+            newHeight = imageRect.height - top;
+          break;
+        default:
+          break;
+      }
+      if (newWidth / newHeight != wantedRatio) {
+        return;
+      }
+      if (this.preventUndersized) {
+        const zoomRatio = this.image.width / this.image.naturalWidth;
+        if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height) {
+          return;
+        }
+      }
+      switch (corner) {
+        case CornerType.ne:
+          this.crop.style.top = `${top}px`;
+          this.crop.style.width = `${newWidth}px`;
+          this.crop.style.height = `${newHeight}px`;
+          break;
+        case CornerType.nw:
+          this.crop.style.left = `${left}px`;
+          this.crop.style.top = `${top}px`;
+          this.crop.style.width = `${newWidth}px`;
+          this.crop.style.height = `${newHeight}px`;
+          break;
+        case CornerType.se:
+          this.crop.style.width = `${newWidth}px`;
+          this.crop.style.height = `${newHeight}px`;
+          break;
+        case CornerType.sw:
+          this.crop.style.left = `${left}px`;
+          this.crop.style.width = `${newWidth}px`;
+          this.crop.style.height = `${newHeight}px`;
+          break;
+        default:
+          break;
+      }
+    };
+    this.handleCropDrag = (ev) => {
+      if (!this.isMouseStillInTarget(ev)) {
+        return;
+      }
+      let { movementX, movementY } = this.getMouvementFromEvent(ev);
+      let newLeft = this.crop.offsetLeft + movementX;
+      let newTop = this.crop.offsetTop + movementY;
+      var imageRect = this.image.getBoundingClientRect();
+      var cropRect = this.crop.getBoundingClientRect();
+      if (newLeft < 0) {
+        newLeft = 0;
+      }
+      if (newTop < 0) {
+        newTop = 0;
+      }
+      if (newLeft + cropRect.width > imageRect.width) {
+        newLeft = this.crop.offsetLeft;
+      }
+      if (newTop + cropRect.height > imageRect.height) {
+        newTop = this.crop.offsetTop;
+      }
+      this.crop.style.left = newLeft + "px";
+      this.crop.style.top = newTop + "px";
+    };
+  }
+  componentDidLoad() {
+    this.setView("noPictureView");
+  }
+  setView(newView) {
+    const views = this.host.shadowRoot.querySelectorAll(".view");
+    views.forEach(v => v.classList.remove("visible"));
+    switch (newView) {
+      case "noPictureView":
+        this.noPictureView.classList.add("visible");
+        break;
+      case "hasPictureView":
+        this.hasPictureView.classList.add("visible");
+        break;
+      default:
+        break;
+    }
+    this.view = newView;
+  }
+  initCrop() {
+    var wantedRatio = this.width / this.height;
+    var imageRect = this.image.getBoundingClientRect();
+    var imageRatio = imageRect.width / imageRect.height;
+    if (wantedRatio > imageRatio) {
+      var wantedHeight = imageRect.width / wantedRatio;
+      var diff = imageRect.height - wantedHeight;
+      this.crop.style.top = Math.round(diff / 2).toString() + "px";
+      this.crop.style.height = Math.round(wantedHeight).toString() + "px";
+    }
+    else {
+      var wantedWidth = imageRect.height * wantedRatio;
+      var diff = imageRect.width - wantedWidth;
+      this.crop.style.left = Math.round(diff / 2).toString() + "px";
+      this.crop.style.width = Math.round(wantedWidth).toString() + "px";
+    }
+  }
+  setImage() {
+    this.image.addEventListener('load', () => {
+      this.initCrop();
+      this.emitImage();
+    });
+    this.image.src = this.canvas.toDataURL();
+  }
+  handleNewFile(file) {
+    if (file.type.split('/')[0] != "image") {
+      return;
+    }
+    var reader = new FileReader();
+    reader.onload = readerLoadEvent => {
+      var img = new Image();
+      img.onload = () => {
+        this.canvas.width = img.width;
+        this.canvas.height = img.height;
+        if (this.preventUndersized && (img.width < this.width || img.height < this.height)) {
+          this.imageTooSmallModal.show();
+          return;
+        }
+        var ctx = this.canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0);
+        this.setView("hasPictureView");
+        this.setImage();
+      };
+      img.src = readerLoadEvent.target.result.toString();
+    };
+    reader.readAsDataURL(file);
+  }
+  emitImage() {
+    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;
+    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;
+    var cropRect = this.crop.getBoundingClientRect();
+    var width = cropRect.width / this.image.width * this.image.naturalWidth;
+    var height = cropRect.height / this.image.height * this.image.naturalHeight;
+    if (x < 0)
+      x = 0;
+    if (x > this.image.naturalWidth)
+      x = this.image.naturalWidth;
+    if (y < 0)
+      y = 0;
+    if (y > this.image.naturalWidth)
+      y = this.image.naturalWidth;
+    if (width > this.image.naturalWidth)
+      width = this.image.naturalWidth;
+    if (height > this.image.naturalHeight)
+      height = this.image.naturalHeight;
+    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);
+    this.imageCropChanged.emit(dataUrl);
+  }
+  generateCroppedImage(x, y, width, height, desiredWidth, desiredHeight) {
+    this.canvas.width = desiredWidth;
+    this.canvas.height = desiredHeight;
+    const context = this.canvas.getContext("2d");
+    context.clearRect(0, 0, desiredWidth, desiredHeight);
+    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);
+    return this.canvas.toDataURL("image/jpeg", this.quality);
+  }
+  getCornerLeftTop(corner) {
+    let left = 0;
+    let top = 0;
+    switch (corner) {
+      case CornerType.se:
+        left = this.crop.offsetLeft;
+        top = this.crop.offsetTop;
+        break;
+      case CornerType.sw:
+        top = this.crop.offsetTop;
+        break;
+      default:
+        break;
+    }
+    return { top, left };
+  }
+  getMouvementFromEvent(event) {
+    let movementX = 0;
+    let movementY = 0;
+    if (event instanceof MouseEvent) {
+      movementX = event.movementX;
+      movementY = event.movementY;
+    }
+    if (typeof TouchEvent !== "undefined") {
+      if (event instanceof TouchEvent) {
+        let touch = event.touches[0];
+        if (this.previousTouch != undefined) {
+          movementX = touch.pageX - this.previousTouch.pageX;
+          movementY = touch.pageY - this.previousTouch.pageY;
+        }
+        this.previousTouch = touch;
+      }
+    }
+    return { movementX, movementY };
+  }
+  isMouseStillInTarget(event) {
+    var inside = false;
+    let mouseX;
+    let mouseY;
+    const imageRect = this.image.getBoundingClientRect();
+    if (event instanceof MouseEvent) {
+      mouseX = event.clientX;
+      mouseY = event.clientY;
+    }
+    if (typeof TouchEvent !== "undefined") {
+      if (event instanceof TouchEvent) {
+        var touch = event.touches[0];
+        mouseX = touch.clientX;
+        mouseY = touch.clientY;
+      }
+    }
+    if (mouseX >= imageRect.x &&
+      mouseY >= imageRect.y &&
+      mouseX <= imageRect.left + imageRect.width &&
+      mouseY <= imageRect.top + imageRect.height) {
+      inside = true;
+    }
+    var corners = this.crop.querySelectorAll("div");
+    corners.forEach(corner => {
+      var cornerRect = corner.getBoundingClientRect();
+      if (mouseX >= cornerRect.x &&
+        mouseY >= cornerRect.y &&
+        mouseX <= cornerRect.left + cornerRect.width &&
+        mouseY <= cornerRect.top + cornerRect.height) {
+        inside = true;
+      }
+    });
+    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())))));
+  }
+};
+DnnImageCropper.style = dnnImageCropperCss;
+
+export { DnnImageCropper as dnn_image_cropper };
+
+//# sourceMappingURL=dnn-image-cropper.entry.js.map