@dnncommunity/dnn-elements 0.14.1 → 0.15.0-beta.3

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

@@ -2,405 +2,405 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-aff4d89a.js');
-const mouseUtilities = require('./mouseUtilities-75be531a.js');
+const index = require('./index-d53702a3.js');
+const mouseUtilities = require('./mouseUtilities-ecd5ecf7.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 = {}));
+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;-webkit-transition:all 300ms ease-in-out;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{-webkit-backdrop-filter:saturate(0.5);backdrop-filter:saturate(0.5);-webkit-backdrop-filter:brightness(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;-webkit-box-shadow:black 0 0 0px 2px;box-shadow:black 0 0 0px 2px;-webkit-backdrop-filter:saturate(2);backdrop-filter:saturate(2);-webkit-backdrop-filter:brightness(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) {
-    index.registerInstance(this, hostRef);
-    this.imageCropChanged = index.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 } = mouseUtilities.getMovementFromEvent(event, this.previousTouch);
-      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 } = mouseUtilities.getMovementFromEvent(ev, this.previousTouch);
-      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() {
-    requestAnimationFrame(() => {
-      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 };
-  }
-  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 (index.h(index.Host, { ref: el => this.host = el }, index.h("canvas", { ref: el => this.canvas = el }), index.h("div", { class: "view", ref: el => this.hasPictureView = el }, index.h("div", { class: "cropper" }, index.h("img", { ref: el => this.image = el }), index.h("div", { class: "backdrop" }), index.h("div", { class: "crop", ref: e => this.crop = e, onMouseDown: this.handleCropMouseDown, onTouchStart: this.handleCropMouseDown }, index.h("div", { class: "nw" }), index.h("div", { class: "ne" }), index.h("div", { class: "se" }), index.h("div", { class: "sw" })))), index.h("div", { class: "view", ref: el => this.noPictureView = el }, index.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,
-      } })), index.h("dnn-modal", { ref: el => this.imageTooSmallModal = el, "close-text": this.resx.modalCloseText }, index.h("p", null, this.resx.imageTooSmall.replace("{width}", this.width.toString()).replace("{height}", this.height.toString())))));
-  }
-};
+const DnnImageCropper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.imageCropChanged = index.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 } = mouseUtilities.getMovementFromEvent(event, this.previousTouch);
+      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 } = mouseUtilities.getMovementFromEvent(ev, this.previousTouch);
+      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() {
+    requestAnimationFrame(() => {
+      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 };
+  }
+  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 (index.h(index.Host, { ref: el => this.host = el }, index.h("canvas", { ref: el => this.canvas = el }), index.h("div", { class: "view", ref: el => this.hasPictureView = el }, index.h("div", { class: "cropper" }, index.h("img", { ref: el => this.image = el }), index.h("div", { class: "backdrop" }), index.h("div", { class: "crop", ref: e => this.crop = e, onMouseDown: this.handleCropMouseDown, onTouchStart: this.handleCropMouseDown }, index.h("div", { class: "nw" }), index.h("div", { class: "ne" }), index.h("div", { class: "se" }), index.h("div", { class: "sw" })))), index.h("div", { class: "view", ref: el => this.noPictureView = el }, index.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,
+      } })), index.h("dnn-modal", { ref: el => this.imageTooSmallModal = el, "close-text": this.resx.modalCloseText }, index.h("p", null, this.resx.imageTooSmall.replace("{width}", this.width.toString()).replace("{height}", this.height.toString())))));
+  }
+};
 DnnImageCropper.style = dnnImageCropperCss;
 
 exports.dnn_image_cropper = DnnImageCropper;