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

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

@@ -1 +1 @@
-{"file":"dnn-image-cropper.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-image-cropper/CornerType.ts","./src/components/dnn-image-cropper/dnn-image-cropper.scss?tag=dnn-image-cropper&encapsulation=shadow","./src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"sourcesContent":["export enum CornerType {\r\n    \"nw\",\r\n    \"ne\",\r\n    \"se\",\r\n    \"sw\",\r\n};",":host {\r\n  display: block;\r\n}\r\ncanvas {\r\n  display: none;\r\n}\r\n.view{\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  height: 0;\r\n  overflow: hidden;\r\n  transition: all 300ms ease-in-out;\r\n  &.visible{\r\n    visibility: visible;\r\n    opacity: 1;\r\n    height: initial;\r\n    overflow: visible;\r\n  }\r\n  .cropper{\r\n    position: relative;\r\n    width: 100%;\r\n    img{\r\n      width: 100%;\r\n      display: block;\r\n      margin: 0 auto;\r\n    }\r\n    .backdrop{\r\n      backdrop-filter: saturate(0.5);\r\n      backdrop-filter: brightness(0.5);\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n    .crop{\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      outline: 2px dashed white;\r\n      box-shadow: black 0 0 0px 2px;\r\n      backdrop-filter: saturate(2);\r\n      backdrop-filter: brightness(2);\r\n      cursor: move;\r\n      >div{\r\n        width: 20px;\r\n        height: 20px;\r\n        background-color: white;\r\n        border: 2px solid rgba(0,0,0,0.5);\r\n        position: absolute;\r\n        &.nw, &.ne{\r\n          top: -17px;\r\n        }\r\n        &.ne, &.se{\r\n          right: -17px;\r\n        }\r\n        &.se, &.sw{\r\n          bottom: -17px;\r\n        }\r\n        &.sw, &.nw{\r\n          left: -17px;\r\n        }\r\n        &.nw, &.se{\r\n          cursor: nwse-resize;\r\n        }\r\n        &.ne, &.sw{\r\n          cursor: nesw-resize;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndnn-modal{\r\n  --max-width: 512px;\r\n}","import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n  tag: 'dnn-image-cropper',\r\n  styleUrl: 'dnn-image-cropper.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n  /** Sets the desired final image width. */\r\n  @Prop() width: number = 600;\r\n\r\n  /** Sets the desired final image height. */\r\n  @Prop() height: number = 600;\r\n\r\n  /** Can be used to customize controls text.\r\n   * Some values support tokens, see default values for examples.\r\n  */\r\n  @Prop() resx: {\r\n    capture: string;\r\n    dragAndDropFile: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n    imageTooSmall: string;\r\n    modalCloseText: string;\r\n  } = {\r\n    capture: \"Capture\",\r\n    dragAndDropFile: \"Drag and drop an image\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload an image\",\r\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.\",\r\n    modalCloseText: \"Close\",\r\n  }\r\n\r\n  /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n  @Prop() quality: number = 0.8;\r\n\r\n  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n  @Prop() preventUndersized: boolean = false;\r\n\r\n  /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n  @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n  @State() view: IComponentInterfaces[\"View\"];\r\n  \r\n  private host: HTMLElement;\r\n  private hasPictureView: HTMLDivElement;\r\n  private noPictureView: HTMLDivElement;\r\n  private canvas: HTMLCanvasElement;\r\n  private image: HTMLImageElement;\r\n  private crop: HTMLDivElement;\r\n  private previousTouch: Touch;\r\n  private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      this.setView(\"noPictureView\");\r\n    })\r\n  }\r\n\r\n  private setView(newView: IComponentInterfaces[\"View\"]){\r\n    const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n    views.forEach(v =>\r\n      v.classList.remove(\"visible\"));\r\n    switch (newView) {\r\n      case \"noPictureView\":\r\n        this.noPictureView.classList.add(\"visible\");\r\n        break;\r\n      case \"hasPictureView\":\r\n        this.hasPictureView.classList.add(\"visible\");\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    this.view = newView;\r\n  }\r\n\r\n  private initCrop(){\r\n    var wantedRatio = this.width / this.height;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var imageRatio = imageRect.width / imageRect.height;\r\n    \r\n    if (wantedRatio > imageRatio){\r\n        var wantedHeight = imageRect.width / wantedRatio;\r\n        var diff = imageRect.height - wantedHeight;\r\n        this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n    }\r\n    else{\r\n      var wantedWidth = imageRect.height * wantedRatio;\r\n      var diff = imageRect.width - wantedWidth;\r\n        this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n    }\r\n  }\r\n\r\n  private setImage(){\r\n    this.image.addEventListener('load', () => {\r\n      this.initCrop();\r\n      this.emitImage();\r\n    })\r\n    this.image.src = this.canvas.toDataURL();\r\n  }\r\n\r\n  private handleNewFile(file: File): void {\r\n    if (file.type.split('/')[0] != \"image\"){\r\n      return;\r\n    }\r\n    \r\n    var reader = new FileReader();\r\n    reader.onload = readerLoadEvent => {\r\n      var img = new Image();\r\n      img.onload = () => {\r\n        this.canvas.width = img.width;\r\n        this.canvas.height = img.height;\r\n        if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n          this.imageTooSmallModal.show();\r\n          return;\r\n        }\r\n        var ctx = this.canvas.getContext(\"2d\");\r\n        ctx.drawImage(img,0,0);\r\n        this.setView(\"hasPictureView\");\r\n        this.setImage();\r\n      }\r\n      img.src = readerLoadEvent.target.result.toString();\r\n    }\r\n    reader.readAsDataURL(file);\r\n  }\r\n\r\n  private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    const element = event.target as HTMLElement;\r\n    const className = element.classList[0];\r\n\r\n    document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n    document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n    switch (className) {\r\n      case \"crop\":\r\n        document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n        document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n        break;\r\n      case \"nw\":\r\n        document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n        break;\r\n      case \"ne\":\r\n        document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n        break\r\n      case \"se\":\r\n        document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n        break;\r\n      case \"sw\":\r\n        document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  private handleImageCropFinished = (_ev: MouseEvent) => {\r\n    this.emitImage();\r\n    document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n    this.previousTouch = undefined;\r\n  }\r\n\r\n  private emitImage() {\r\n    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n    var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n    if (x < 0)\r\n      x = 0;\r\n    if (x > this.image.naturalWidth)\r\n      x = this.image.naturalWidth;\r\n    if (y < 0)\r\n      y = 0;\r\n    if (y > this.image.naturalWidth)\r\n      y = this.image.naturalWidth;\r\n    if (width > this.image.naturalWidth)\r\n      width = this.image.naturalWidth;\r\n    if (height > this.image.naturalHeight)\r\n      height = this.image.naturalHeight;\r\n\r\n    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n    this.imageCropChanged.emit(dataUrl);\r\n  }\r\n\r\n  private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n    this.canvas.width = desiredWidth;\r\n    this.canvas.height = desiredHeight;\r\n    const context = this.canvas.getContext(\"2d\");\r\n    context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n    return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n  }\r\n\r\n  private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.nw);\r\n  }\r\n\r\n  private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.ne);\r\n  }\r\n\r\n  private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.se);\r\n  }\r\n\r\n  private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.sw);\r\n  }\r\n\r\n  private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n    if (!this.isMouseStillInTarget(event)){\r\n      return;\r\n    }\r\n    \r\n    let {left, top} = this.getCornerLeftTop(corner);\r\n    let newWidth = 0;\r\n    let newHeight = 0;\r\n    let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n    const wantedRatio = this.width / this.height;\r\n    const cropRect = this.crop.getBoundingClientRect();\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);\r\n    if (Math.abs(movementX) < Math.abs(movementY)){\r\n      orientation = \"vertical\";\r\n    }\r\n\r\n    if (orientation == \"horizontal\"){\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.sw:\r\n          newWidth = cropRect.width - movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        case CornerType.ne:\r\n        case CornerType.se:\r\n          newWidth = cropRect.width + movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    } else{\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.ne:\r\n          newHeight = cropRect.height - movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        case CornerType.se:\r\n        case CornerType.sw:\r\n          newHeight = cropRect.height + movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n      case CornerType.nw:\r\n        const topOffset = cropRect.height - newHeight;\r\n        top = this.crop.offsetTop + topOffset;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.nw:\r\n      case CornerType.sw:\r\n        const leftOffset = cropRect.width - newWidth;\r\n        left = this.crop.offsetLeft + leftOffset;\r\n        if (left < 0) left = 0;\r\n        if (left > imageRect.width) left = imageRect.width;\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      case CornerType.ne:\r\n      case CornerType.se:\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (newWidth / newHeight != wantedRatio){\r\n      return;\r\n    }\r\n\r\n    if (this.preventUndersized){\r\n      const zoomRatio = this.image.width / this.image.naturalWidth;\r\n      if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n        return;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.nw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.se:\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.sw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n    let left = 0;\r\n    let top = 0;\r\n    switch (corner) {\r\n      case CornerType.se:\r\n        left = this.crop.offsetLeft;\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      case CornerType.sw:\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    return {top, left};\r\n  }\r\n\r\n  private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n    if (!this.isMouseStillInTarget(ev)){\r\n      return;\r\n    }\r\n    let {movementX, movementY} = getMovementFromEvent(ev, this.previousTouch);\r\n    let newLeft = this.crop.offsetLeft + movementX;\r\n    let newTop = this.crop.offsetTop + movementY;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newTop < 0){\r\n      newTop = 0;\r\n    }\r\n    if (newLeft + cropRect.width > imageRect.width){\r\n      newLeft = this.crop.offsetLeft;\r\n    }\r\n    if (newTop + cropRect.height > imageRect.height){\r\n      newTop = this.crop.offsetTop;\r\n    }\r\n    this.crop.style.left = newLeft + \"px\";\r\n    this.crop.style.top = newTop + \"px\";\r\n  };\r\n\r\n  private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n    var inside = false;\r\n    let mouseX: number;\r\n    let mouseY: number;\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    \r\n    if (event instanceof MouseEvent){\r\n      mouseX = event.clientX;\r\n      mouseY = event.clientY;\r\n    }\r\n\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent){\r\n        var touch = event.touches[0];\r\n        mouseX = touch.clientX;\r\n        mouseY = touch.clientY;\r\n      }\r\n    }\r\n    \r\n    if (\r\n      mouseX >= imageRect.x &&\r\n      mouseY >= imageRect.y &&\r\n      mouseX <= imageRect.left + imageRect.width &&\r\n      mouseY <= imageRect.top + imageRect.height)\r\n    {\r\n      inside = true;\r\n    }\r\n\r\n    var corners = this.crop.querySelectorAll(\"div\");\r\n    corners.forEach(corner =>{\r\n      var cornerRect = corner.getBoundingClientRect();\r\n      if (\r\n        mouseX >= cornerRect.x &&\r\n        mouseY >= cornerRect.y &&\r\n        mouseX <= cornerRect.left + cornerRect.width &&\r\n        mouseY <= cornerRect.top + cornerRect.height)\r\n        {\r\n          inside = true;\r\n        }\r\n    })\r\n\r\n    return inside;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host ref={el => this.host = el}>\r\n        <canvas ref={el => this.canvas = el} />\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.hasPictureView = el}\r\n        >\r\n          <div class=\"cropper\">\r\n            <img ref={el => this.image = el} />\r\n            <div class=\"backdrop\" />\r\n            <div\r\n              class=\"crop\"\r\n              ref={e => this.crop = e}\r\n              onMouseDown={this.handleCropMouseDown}\r\n              onTouchStart={this.handleCropMouseDown}\r\n            >\r\n              <div class=\"nw\" />\r\n              <div class=\"ne\" />\r\n              <div class=\"se\" />\r\n              <div class=\"sw\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.noPictureView = el}>\r\n            <dnn-dropzone\r\n              allowCameraMode\r\n              onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n              resx={\r\n                {\r\n                  capture: this.resx.capture,\r\n                  dragAndDropFile: this.resx.dragAndDropFile,\r\n                  or: this.resx.or,\r\n                  takePicture: this.resx.takePicture,\r\n                  uploadFile: this.resx.uploadFile,\r\n                }\r\n              }\r\n            />\r\n        </div>\r\n        <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n          <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n        </dnn-modal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n  View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}"],"version":3}
+{"file":"dnn-image-cropper.entry.esm.js","mappings":"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","names":[],"sources":["./src/components/dnn-image-cropper/CornerType.ts","./src/components/dnn-image-cropper/dnn-image-cropper.scss?tag=dnn-image-cropper&encapsulation=shadow","./src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"sourcesContent":["export enum CornerType {\r\n    \"nw\",\r\n    \"ne\",\r\n    \"se\",\r\n    \"sw\",\r\n};",":host {\n  display: block;\n}\ncanvas {\n  display: none;\n}\n.view{\n  visibility: hidden;\n  opacity: 0;\n  height: 0;\n  overflow: hidden;\n  transition: all 300ms ease-in-out;\n  &.visible{\n    visibility: visible;\n    opacity: 1;\n    height: initial;\n    overflow: visible;\n  }\n  .cropper{\n    position: relative;\n    width: 100%;\n    img{\n      width: 100%;\n      display: block;\n      margin: 0 auto;\n    }\n    .backdrop{\n      backdrop-filter: saturate(0.5);\n      backdrop-filter: brightness(0.5);\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n    }\n    .crop{\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      outline: 2px dashed white;\n      box-shadow: black 0 0 0px 2px;\n      backdrop-filter: saturate(2);\n      backdrop-filter: brightness(2);\n      cursor: move;\n      >div{\n        width: 20px;\n        height: 20px;\n        background-color: white;\n        border: 2px solid rgba(0,0,0,0.5);\n        position: absolute;\n        &.nw, &.ne{\n          top: -17px;\n        }\n        &.ne, &.se{\n          right: -17px;\n        }\n        &.se, &.sw{\n          bottom: -17px;\n        }\n        &.sw, &.nw{\n          left: -17px;\n        }\n        &.nw, &.se{\n          cursor: nwse-resize;\n        }\n        &.ne, &.sw{\n          cursor: nesw-resize;\n        }\n      }\n    }\n  }\n}\ndnn-modal{\n  --max-width: 512px;\n}","import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\nimport { CornerType } from './CornerType';\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\n\n/**\n * Allows cropping an image in-browser with the option to enforce a specific final size.\n * All computation happens in the browser and the final image is emmited\n * in an event that has a data-url of the image.\n */\n@Component({\n  tag: 'dnn-image-cropper',\n  styleUrl: 'dnn-image-cropper.scss',\n  shadow: true,\n})\nexport class DnnImageCropper {\n  /** Sets the desired final image width. */\n  @Prop() width: number = 600;\n\n  /** Sets the desired final image height. */\n  @Prop() height: number = 600;\n\n  /** Can be used to customize controls text.\n   * Some values support tokens, see default values for examples.\n  */\n  @Prop() resx: {\n    capture: string;\n    dragAndDropFile: string;\n    or: string;\n    takePicture: string;\n    uploadFile: string;\n    imageTooSmall: string;\n    modalCloseText: string;\n  } = {\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  }\n\n  /** Sets the output quality of the corpped image (number between 0 and 1). */\n  @Prop() quality: number = 0.8;\n\n  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\n  @Prop() preventUndersized: boolean = false;\n\n  /** When the image crop changes, emits the dataurl for the new cropped image. */\n  @Event() imageCropChanged: EventEmitter<string>;\n\n  @State() view: IComponentInterfaces[\"View\"];\n  \n  private host: HTMLElement;\n  private hasPictureView: HTMLDivElement;\n  private noPictureView: HTMLDivElement;\n  private canvas: HTMLCanvasElement;\n  private image: HTMLImageElement;\n  private crop: HTMLDivElement;\n  private previousTouch: Touch;\n  private imageTooSmallModal!: HTMLDnnModalElement;\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.setView(\"noPictureView\");\n    })\n  }\n\n  private setView(newView: IComponentInterfaces[\"View\"]){\n    const views = this.host.shadowRoot.querySelectorAll(\".view\");\n    views.forEach(v =>\n      v.classList.remove(\"visible\"));\n    switch (newView) {\n      case \"noPictureView\":\n        this.noPictureView.classList.add(\"visible\");\n        break;\n      case \"hasPictureView\":\n        this.hasPictureView.classList.add(\"visible\");\n        break;\n      default:\n        break;\n    }\n    this.view = newView;\n  }\n\n  private initCrop(){\n    var wantedRatio = this.width / this.height;\n    var imageRect = this.image.getBoundingClientRect();\n    var imageRatio = imageRect.width / imageRect.height;\n    \n    if (wantedRatio > imageRatio){\n        var wantedHeight = imageRect.width / wantedRatio;\n        var diff = imageRect.height - wantedHeight;\n        this.crop.style.top = Math.round(diff/2).toString() + \"px\";\n        this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\n    }\n    else{\n      var wantedWidth = imageRect.height * wantedRatio;\n      var diff = imageRect.width - wantedWidth;\n        this.crop.style.left = Math.round(diff/2).toString() + \"px\";\n        this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\n    }\n  }\n\n  private setImage(){\n    this.image.addEventListener('load', () => {\n      this.initCrop();\n      this.emitImage();\n    })\n    this.image.src = this.canvas.toDataURL();\n  }\n\n  private handleNewFile(file: File): void {\n    if (file.type.split('/')[0] != \"image\"){\n      return;\n    }\n    \n    var reader = new FileReader();\n    reader.onload = readerLoadEvent => {\n      var img = new Image();\n      img.onload = () => {\n        this.canvas.width = img.width;\n        this.canvas.height = img.height;\n        if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\n          this.imageTooSmallModal.show();\n          return;\n        }\n        var ctx = this.canvas.getContext(\"2d\");\n        ctx.drawImage(img,0,0);\n        this.setView(\"hasPictureView\");\n        this.setImage();\n      }\n      img.src = readerLoadEvent.target.result.toString();\n    }\n    reader.readAsDataURL(file);\n  }\n\n  private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n    const element = event.target as HTMLElement;\n    const className = element.classList[0];\n\n    document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\n    document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\n    switch (className) {\n      case \"crop\":\n        document.addEventListener(\"mousemove\", this.handleCropDrag, false);\n        document.addEventListener(\"touchmove\", this.handleCropDrag, false)\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\n        break;\n      case \"nw\":\n        document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\n        document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\n        break;\n      case \"ne\":\n        document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\n        document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\n        break\n      case \"se\":\n        document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\n        document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\n        break;\n      case \"sw\":\n        document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\n        document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\n        break;\n      default:\n        break;\n    }\n  };\n\n  private handleImageCropFinished = (_ev: MouseEvent) => {\n    this.emitImage();\n    document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\n    this.previousTouch = undefined;\n  }\n\n  private emitImage() {\n    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\n    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\n\n    var cropRect = this.crop.getBoundingClientRect();\n    var width = cropRect.width / this.image.width * this.image.naturalWidth;\n    var height = cropRect.height / this.image.height * this.image.naturalHeight;\n\n    if (x < 0)\n      x = 0;\n    if (x > this.image.naturalWidth)\n      x = this.image.naturalWidth;\n    if (y < 0)\n      y = 0;\n    if (y > this.image.naturalWidth)\n      y = this.image.naturalWidth;\n    if (width > this.image.naturalWidth)\n      width = this.image.naturalWidth;\n    if (height > this.image.naturalHeight)\n      height = this.image.naturalHeight;\n\n    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\n    this.imageCropChanged.emit(dataUrl);\n  }\n\n  private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\n    this.canvas.width = desiredWidth;\n    this.canvas.height = desiredHeight;\n    const context = this.canvas.getContext(\"2d\");\n    context.clearRect(0, 0, desiredWidth, desiredHeight);\n    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\n\n    return this.canvas.toDataURL(\"image/jpeg\", this.quality);\n  }\n\n  private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\n    this.handleCornerDrag(event, CornerType.nw);\n  }\n\n  private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\n    this.handleCornerDrag(event, CornerType.ne);\n  }\n\n  private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\n    this.handleCornerDrag(event, CornerType.se);\n  }\n\n  private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\n    this.handleCornerDrag(event, CornerType.sw);\n  }\n\n  private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\n    if (!this.isMouseStillInTarget(event)){\n      return;\n    }\n    \n    let {left, top} = this.getCornerLeftTop(corner);\n    let newWidth = 0;\n    let newHeight = 0;\n    let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n    const wantedRatio = this.width / this.height;\n    const cropRect = this.crop.getBoundingClientRect();\n    const imageRect = this.image.getBoundingClientRect();\n    let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);\n    if (Math.abs(movementX) < Math.abs(movementY)){\n      orientation = \"vertical\";\n    }\n\n    if (orientation == \"horizontal\"){\n      switch (corner) {\n        case CornerType.nw:\n        case CornerType.sw:\n          newWidth = cropRect.width - movementX;\n          newHeight = newWidth / wantedRatio;\n          break;\n        case CornerType.ne:\n        case CornerType.se:\n          newWidth = cropRect.width + movementX;\n          newHeight = newWidth / wantedRatio;\n          break;\n        default:\n          break;\n      }\n    } else{\n      switch (corner) {\n        case CornerType.nw:\n        case CornerType.ne:\n          newHeight = cropRect.height - movementY;\n          newWidth = newHeight * wantedRatio;\n          break;\n        case CornerType.se:\n        case CornerType.sw:\n          newHeight = cropRect.height + movementY;\n          newWidth = newHeight * wantedRatio;\n          break;\n        default:\n          break;\n      }\n    }\n\n    switch (corner) {\n      case CornerType.ne:\n      case CornerType.nw:\n        const topOffset = cropRect.height - newHeight;\n        top = this.crop.offsetTop + topOffset;\n      default:\n        break;\n    }\n\n    switch (corner) {\n      case CornerType.nw:\n      case CornerType.sw:\n        const leftOffset = cropRect.width - newWidth;\n        left = this.crop.offsetLeft + leftOffset;\n        if (left < 0) left = 0;\n        if (left > imageRect.width) left = imageRect.width;\n        if (top < 0) top = 0;\n        if (top > imageRect.height) top = imageRect.height;\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\n        break;\n      case CornerType.ne:\n      case CornerType.se:\n        if (top < 0) top = 0;\n        if (top > imageRect.height) top = imageRect.height;\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\n        break;\n      default:\n        break;\n    }\n\n    if (newWidth / newHeight != wantedRatio){\n      return;\n    }\n\n    if (this.preventUndersized){\n      const zoomRatio = this.image.width / this.image.naturalWidth;\n      if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\n        return;\n      }\n    }\n\n    switch (corner) {\n      case CornerType.ne:\n        this.crop.style.top = `${top}px`;\n        this.crop.style.width = `${newWidth}px`;\n        this.crop.style.height = `${newHeight}px`;\n        break;\n      case CornerType.nw:\n        this.crop.style.left = `${left}px`;\n        this.crop.style.top = `${top}px`;\n        this.crop.style.width = `${newWidth}px`;\n        this.crop.style.height = `${newHeight}px`;\n        break;\n      case CornerType.se:\n        this.crop.style.width = `${newWidth}px`;\n        this.crop.style.height = `${newHeight}px`;\n        break;\n      case CornerType.sw:\n        this.crop.style.left = `${left}px`;\n        this.crop.style.width = `${newWidth}px`;\n        this.crop.style.height = `${newHeight}px`;\n        break;\n      default:\n        break;\n    }\n  }\n\n  private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\n    let left = 0;\n    let top = 0;\n    switch (corner) {\n      case CornerType.se:\n        left = this.crop.offsetLeft;\n        top = this.crop.offsetTop;\n        break;\n      case CornerType.sw:\n        top = this.crop.offsetTop;\n        break;\n      default:\n        break;\n    }\n    return {top, left};\n  }\n\n  private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\n    if (!this.isMouseStillInTarget(ev)){\n      return;\n    }\n    let {movementX, movementY} = getMovementFromEvent(ev, this.previousTouch);\n    let newLeft = this.crop.offsetLeft + movementX;\n    let newTop = this.crop.offsetTop + movementY;\n    var imageRect = this.image.getBoundingClientRect();\n    var cropRect = this.crop.getBoundingClientRect();\n    if (newLeft < 0){\n      newLeft = 0;\n    }\n    if (newTop < 0){\n      newTop = 0;\n    }\n    if (newLeft + cropRect.width > imageRect.width){\n      newLeft = this.crop.offsetLeft;\n    }\n    if (newTop + cropRect.height > imageRect.height){\n      newTop = this.crop.offsetTop;\n    }\n    this.crop.style.left = newLeft + \"px\";\n    this.crop.style.top = newTop + \"px\";\n  };\n\n  private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\n    var inside = false;\n    let mouseX: number;\n    let mouseY: number;\n    const imageRect = this.image.getBoundingClientRect();\n    \n    if (event instanceof MouseEvent){\n      mouseX = event.clientX;\n      mouseY = event.clientY;\n    }\n\n    if (typeof TouchEvent !== \"undefined\"){\n      if (event instanceof TouchEvent){\n        var touch = event.touches[0];\n        mouseX = touch.clientX;\n        mouseY = touch.clientY;\n      }\n    }\n    \n    if (\n      mouseX >= imageRect.x &&\n      mouseY >= imageRect.y &&\n      mouseX <= imageRect.left + imageRect.width &&\n      mouseY <= imageRect.top + imageRect.height)\n    {\n      inside = true;\n    }\n\n    var corners = this.crop.querySelectorAll(\"div\");\n    corners.forEach(corner =>{\n      var cornerRect = corner.getBoundingClientRect();\n      if (\n        mouseX >= cornerRect.x &&\n        mouseY >= cornerRect.y &&\n        mouseX <= cornerRect.left + cornerRect.width &&\n        mouseY <= cornerRect.top + cornerRect.height)\n        {\n          inside = true;\n        }\n    })\n\n    return inside;\n  }\n\n  render() {\n    return (\n      <Host ref={el => this.host = el}>\n        <canvas ref={el => this.canvas = el} />\n        <div\n          class=\"view\"\n          ref={el => this.hasPictureView = el}\n        >\n          <div class=\"cropper\">\n            <img ref={el => this.image = el} />\n            <div class=\"backdrop\" />\n            <div\n              class=\"crop\"\n              ref={e => this.crop = e}\n              onMouseDown={this.handleCropMouseDown}\n              onTouchStart={this.handleCropMouseDown}\n            >\n              <div class=\"nw\" />\n              <div class=\"ne\" />\n              <div class=\"se\" />\n              <div class=\"sw\" />\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"view\"\n          ref={el => this.noPictureView = el}>\n            <dnn-dropzone\n              allowCameraMode\n              onFilesSelected={e => this.handleNewFile(e.detail[0])}\n              resx={\n                {\n                  capture: this.resx.capture,\n                  dragAndDropFile: this.resx.dragAndDropFile,\n                  or: this.resx.or,\n                  takePicture: this.resx.takePicture,\n                  uploadFile: this.resx.uploadFile,\n                }\n              }\n            />\n        </div>\n        <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\n          <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\n        </dnn-modal>\n      </Host>\n    );\n  }\n}\n\ninterface IComponentInterfaces\n{\n  View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\n}"],"version":3}

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

@@ -1,2 +1,2 @@
-System.register(["./index-a3a55419.system.js","./mouseUtilities-e7e4e78f.system.js"],(function(e){"use strict";var t,i,o,r,n;return{setters:[function(e){t=e.r;i=e.e;o=e.h;r=e.f},function(e){n=e.g}],execute:function(){var a;(function(e){e[e["nw"]=0]="nw";e[e["ne"]=1]="ne";e[e["se"]=2]="se";e[e["sw"]=3]="sw"})(a||(a={}));var s=":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}";var h=e("dnn_image_cropper",function(){function e(e){var o=this;t(this,e);this.imageCropChanged=i(this,"imageCropChanged",7);this.width=600;this.height=600;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"};this.quality=.8;this.preventUndersized=false;this.handleCropMouseDown=function(e){e.stopPropagation();e.preventDefault();var t=e.target;var i=t.classList[0];document.addEventListener("mouseup",o.handleImageCropFinished,false);document.addEventListener("touchend",o.handleImageCropFinished,false);switch(i){case"crop":document.addEventListener("mousemove",o.handleCropDrag,false);document.addEventListener("touchmove",o.handleCropDrag,false);document.addEventListener("mouseup",(function(){return document.removeEventListener("mousemove",o.handleCropDrag)}));document.addEventListener("touchend",(function(){return document.removeEventListener("touchmove",o.handleCropDrag)}));break;case"nw":document.addEventListener("mousemove",o.handleNwMouseMove,false);document.addEventListener("touchmove",o.handleNwMouseMove,false);document.addEventListener("mouseup",(function(){return document.removeEventListener("mousemove",o.handleNwMouseMove)}));document.addEventListener("touchend",(function(){return document.removeEventListener("touchmove",o.handleNwMouseMove)}));break;case"ne":document.addEventListener("mousemove",o.handleNeMouseMove,false);document.addEventListener("touchmove",o.handleNeMouseMove,false);document.addEventListener("mouseup",(function(){return document.removeEventListener("mousemove",o.handleNeMouseMove)}));document.addEventListener("touchend",(function(){return document.removeEventListener("touchmove",o.handleNeMouseMove)}));break;case"se":document.addEventListener("mousemove",o.handleSeMouseMove,false);document.addEventListener("touchmove",o.handleSeMouseMove,false);document.addEventListener("mouseup",(function(){return document.removeEventListener("mousemove",o.handleSeMouseMove)}));document.addEventListener("touchend",(function(){return document.removeEventListener("touchmove",o.handleSeMouseMove)}));break;case"sw":document.addEventListener("mousemove",o.handleSwMouseMove,false);document.addEventListener("touchmove",o.handleSwMouseMove,false);document.addEventListener("mouseup",(function(){return document.removeEventListener("mousemove",o.handleSwMouseMove)}));document.addEventListener("touchend",(function(){return document.removeEventListener("touchmove",o.handleSwMouseMove)}));break;default:break}};this.handleImageCropFinished=function(e){o.emitImage();document.removeEventListener("mouseup",o.handleImageCropFinished);o.previousTouch=undefined};this.handleNwMouseMove=function(e){o.handleCornerDrag(e,a.nw)};this.handleNeMouseMove=function(e){o.handleCornerDrag(e,a.ne)};this.handleSeMouseMove=function(e){o.handleCornerDrag(e,a.se)};this.handleSwMouseMove=function(e){o.handleCornerDrag(e,a.sw)};this.handleCornerDrag=function(e,t){if(!o.isMouseStillInTarget(e)){return}var i=o.getCornerLeftTop(t),r=i.left,s=i.top;var h=0;var d=0;var c="horizontal";var u=o.width/o.height;var p=o.crop.getBoundingClientRect();var l=o.image.getBoundingClientRect();var v=n(e,o.previousTouch),m=v.movementX,f=v.movementY;if(Math.abs(m)<Math.abs(f)){c="vertical"}if(c=="horizontal"){switch(t){case a.nw:case a.sw:h=p.width-m;d=h/u;break;case a.ne:case a.se:h=p.width+m;d=h/u;break;default:break}}else{switch(t){case a.nw:case a.ne:d=p.height-f;h=d*u;break;case a.se:case a.sw:d=p.height+f;h=d*u;break;default:break}}switch(t){case a.ne:case a.nw:var g=p.height-d;s=o.crop.offsetTop+g;default:break}switch(t){case a.nw:case a.sw:var w=p.width-h;r=o.crop.offsetLeft+w;if(r<0)r=0;if(r>l.width)r=l.width;if(s<0)s=0;if(s>l.height)s=l.height;if(r+h>l.width)h=l.width-r;if(s+d>l.height)d=l.height-s;break;case a.ne:case a.se:if(s<0)s=0;if(s>l.height)s=l.height;if(r+h>l.width)h=l.width-r;if(s+d>l.height)d=l.height-s;break;default:break}if(h/d!=u){return}if(o.preventUndersized){var b=o.image.width/o.image.naturalWidth;if(h/b<o.width||d/b<o.height){return}}switch(t){case a.ne:o.crop.style.top=s+"px";o.crop.style.width=h+"px";o.crop.style.height=d+"px";break;case a.nw:o.crop.style.left=r+"px";o.crop.style.top=s+"px";o.crop.style.width=h+"px";o.crop.style.height=d+"px";break;case a.se:o.crop.style.width=h+"px";o.crop.style.height=d+"px";break;case a.sw:o.crop.style.left=r+"px";o.crop.style.width=h+"px";o.crop.style.height=d+"px";break;default:break}};this.handleCropDrag=function(e){if(!o.isMouseStillInTarget(e)){return}var t=n(e,o.previousTouch),i=t.movementX,r=t.movementY;var a=o.crop.offsetLeft+i;var s=o.crop.offsetTop+r;var h=o.image.getBoundingClientRect();var d=o.crop.getBoundingClientRect();if(a<0){a=0}if(s<0){s=0}if(a+d.width>h.width){a=o.crop.offsetLeft}if(s+d.height>h.height){s=o.crop.offsetTop}o.crop.style.left=a+"px";o.crop.style.top=s+"px"}}e.prototype.componentDidLoad=function(){var e=this;requestAnimationFrame((function(){e.setView("noPictureView")}))};e.prototype.setView=function(e){var t=this.host.shadowRoot.querySelectorAll(".view");t.forEach((function(e){return e.classList.remove("visible")}));switch(e){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break;default:break}this.view=e};e.prototype.initCrop=function(){var e=this.width/this.height;var t=this.image.getBoundingClientRect();var i=t.width/t.height;if(e>i){var o=t.width/e;var r=t.height-o;this.crop.style.top=Math.round(r/2).toString()+"px";this.crop.style.height=Math.round(o).toString()+"px"}else{var n=t.height*e;var r=t.width-n;this.crop.style.left=Math.round(r/2).toString()+"px";this.crop.style.width=Math.round(n).toString()+"px"}};e.prototype.setImage=function(){var e=this;this.image.addEventListener("load",(function(){e.initCrop();e.emitImage()}));this.image.src=this.canvas.toDataURL()};e.prototype.handleNewFile=function(e){var t=this;if(e.type.split("/")[0]!="image"){return}var i=new FileReader;i.onload=function(e){var i=new Image;i.onload=function(){t.canvas.width=i.width;t.canvas.height=i.height;if(t.preventUndersized&&(i.width<t.width||i.height<t.height)){t.imageTooSmallModal.show();return}var e=t.canvas.getContext("2d");e.drawImage(i,0,0);t.setView("hasPictureView");t.setImage()};i.src=e.target.result.toString()};i.readAsDataURL(e)};e.prototype.emitImage=function(){var e=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var t=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var i=this.crop.getBoundingClientRect();var o=i.width/this.image.width*this.image.naturalWidth;var r=i.height/this.image.height*this.image.naturalHeight;if(e<0)e=0;if(e>this.image.naturalWidth)e=this.image.naturalWidth;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(o>this.image.naturalWidth)o=this.image.naturalWidth;if(r>this.image.naturalHeight)r=this.image.naturalHeight;var n=this.generateCroppedImage(e,t,o,r,this.width,this.height);this.imageCropChanged.emit(n)};e.prototype.generateCroppedImage=function(e,t,i,o,r,n){this.canvas.width=r;this.canvas.height=n;var a=this.canvas.getContext("2d");a.clearRect(0,0,r,n);a.drawImage(this.image,e,t,i,o,0,0,r,n);return this.canvas.toDataURL("image/jpeg",this.quality)};e.prototype.getCornerLeftTop=function(e){var t=0;var i=0;switch(e){case a.se:t=this.crop.offsetLeft;i=this.crop.offsetTop;break;case a.sw:i=this.crop.offsetTop;break;default:break}return{top:i,left:t}};e.prototype.isMouseStillInTarget=function(e){var t=false;var i;var o;var r=this.image.getBoundingClientRect();if(e instanceof MouseEvent){i=e.clientX;o=e.clientY}if(typeof TouchEvent!=="undefined"){if(e instanceof TouchEvent){var n=e.touches[0];i=n.clientX;o=n.clientY}}if(i>=r.x&&o>=r.y&&i<=r.left+r.width&&o<=r.top+r.height){t=true}var a=this.crop.querySelectorAll("div");a.forEach((function(e){var r=e.getBoundingClientRect();if(i>=r.x&&o>=r.y&&i<=r.left+r.width&&o<=r.top+r.height){t=true}}));return t};e.prototype.render=function(){var e=this;return o(r,{ref:function(t){return e.host=t}},o("canvas",{ref:function(t){return e.canvas=t}}),o("div",{class:"view",ref:function(t){return e.hasPictureView=t}},o("div",{class:"cropper"},o("img",{ref:function(t){return e.image=t}}),o("div",{class:"backdrop"}),o("div",{class:"crop",ref:function(t){return e.crop=t},onMouseDown:this.handleCropMouseDown,onTouchStart:this.handleCropMouseDown},o("div",{class:"nw"}),o("div",{class:"ne"}),o("div",{class:"se"}),o("div",{class:"sw"})))),o("div",{class:"view",ref:function(t){return e.noPictureView=t}},o("dnn-dropzone",{allowCameraMode:true,onFilesSelected:function(t){return e.handleNewFile(t.detail[0])},resx:{capture:this.resx.capture,dragAndDropFile:this.resx.dragAndDropFile,or:this.resx.or,takePicture:this.resx.takePicture,uploadFile:this.resx.uploadFile}})),o("dnn-modal",{ref:function(t){return e.imageTooSmallModal=t},"close-text":this.resx.modalCloseText},o("p",null,this.resx.imageTooSmall.replace("{width}",this.width.toString()).replace("{height}",this.height.toString()))))};return e}());h.style=s}}}));
+System.register(["./index-c3cc3b5b.system.js","./mouseUtilities-233ad7e3.system.js"],(function(e){"use strict";var t,i,o,r,n;return{setters:[function(e){t=e.r;i=e.e;o=e.h;r=e.f},function(e){n=e.g}],execute:function(){var a;(function(e){e[e["nw"]=0]="nw";e[e["ne"]=1]="ne";e[e["se"]=2]="se";e[e["sw"]=3]="sw"})(a||(a={}));var s=":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}";var h=e("dnn_image_cropper",function(){function e(e){var o=this;t(this,e);this.imageCropChanged=i(this,"imageCropChanged",7);this.width=600;this.height=600;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"};this.quality=.8;this.preventUndersized=false;this.handleCropMouseDown=function(e){e.stopPropagation();e.preventDefault();var t=e.target;var i=t.classList[0];document.addEventListener("mouseup",o.handleImageCropFinished,false);document.addEventListener("touchend",o.handleImageCropFinished,false);switch(i){case"crop":document.addEventListener("mousemove",o.handleCropDrag,false);document.addEventListener("touchmove",o.handleCropDrag,false);document.addEventListener("mouseup",(function(){return document.removeEventListener("mousemove",o.handleCropDrag)}));document.addEventListener("touchend",(function(){return document.removeEventListener("touchmove",o.handleCropDrag)}));break;case"nw":document.addEventListener("mousemove",o.handleNwMouseMove,false);document.addEventListener("touchmove",o.handleNwMouseMove,false);document.addEventListener("mouseup",(function(){return document.removeEventListener("mousemove",o.handleNwMouseMove)}));document.addEventListener("touchend",(function(){return document.removeEventListener("touchmove",o.handleNwMouseMove)}));break;case"ne":document.addEventListener("mousemove",o.handleNeMouseMove,false);document.addEventListener("touchmove",o.handleNeMouseMove,false);document.addEventListener("mouseup",(function(){return document.removeEventListener("mousemove",o.handleNeMouseMove)}));document.addEventListener("touchend",(function(){return document.removeEventListener("touchmove",o.handleNeMouseMove)}));break;case"se":document.addEventListener("mousemove",o.handleSeMouseMove,false);document.addEventListener("touchmove",o.handleSeMouseMove,false);document.addEventListener("mouseup",(function(){return document.removeEventListener("mousemove",o.handleSeMouseMove)}));document.addEventListener("touchend",(function(){return document.removeEventListener("touchmove",o.handleSeMouseMove)}));break;case"sw":document.addEventListener("mousemove",o.handleSwMouseMove,false);document.addEventListener("touchmove",o.handleSwMouseMove,false);document.addEventListener("mouseup",(function(){return document.removeEventListener("mousemove",o.handleSwMouseMove)}));document.addEventListener("touchend",(function(){return document.removeEventListener("touchmove",o.handleSwMouseMove)}));break;default:break}};this.handleImageCropFinished=function(e){o.emitImage();document.removeEventListener("mouseup",o.handleImageCropFinished);o.previousTouch=undefined};this.handleNwMouseMove=function(e){o.handleCornerDrag(e,a.nw)};this.handleNeMouseMove=function(e){o.handleCornerDrag(e,a.ne)};this.handleSeMouseMove=function(e){o.handleCornerDrag(e,a.se)};this.handleSwMouseMove=function(e){o.handleCornerDrag(e,a.sw)};this.handleCornerDrag=function(e,t){if(!o.isMouseStillInTarget(e)){return}var i=o.getCornerLeftTop(t),r=i.left,s=i.top;var h=0;var c=0;var d="horizontal";var u=o.width/o.height;var p=o.crop.getBoundingClientRect();var l=o.image.getBoundingClientRect();var v=n(e,o.previousTouch),m=v.movementX,f=v.movementY;if(Math.abs(m)<Math.abs(f)){d="vertical"}if(d=="horizontal"){switch(t){case a.nw:case a.sw:h=p.width-m;c=h/u;break;case a.ne:case a.se:h=p.width+m;c=h/u;break;default:break}}else{switch(t){case a.nw:case a.ne:c=p.height-f;h=c*u;break;case a.se:case a.sw:c=p.height+f;h=c*u;break;default:break}}switch(t){case a.ne:case a.nw:var g=p.height-c;s=o.crop.offsetTop+g;default:break}switch(t){case a.nw:case a.sw:var w=p.width-h;r=o.crop.offsetLeft+w;if(r<0)r=0;if(r>l.width)r=l.width;if(s<0)s=0;if(s>l.height)s=l.height;if(r+h>l.width)h=l.width-r;if(s+c>l.height)c=l.height-s;break;case a.ne:case a.se:if(s<0)s=0;if(s>l.height)s=l.height;if(r+h>l.width)h=l.width-r;if(s+c>l.height)c=l.height-s;break;default:break}if(h/c!=u){return}if(o.preventUndersized){var b=o.image.width/o.image.naturalWidth;if(h/b<o.width||c/b<o.height){return}}switch(t){case a.ne:o.crop.style.top="".concat(s,"px");o.crop.style.width="".concat(h,"px");o.crop.style.height="".concat(c,"px");break;case a.nw:o.crop.style.left="".concat(r,"px");o.crop.style.top="".concat(s,"px");o.crop.style.width="".concat(h,"px");o.crop.style.height="".concat(c,"px");break;case a.se:o.crop.style.width="".concat(h,"px");o.crop.style.height="".concat(c,"px");break;case a.sw:o.crop.style.left="".concat(r,"px");o.crop.style.width="".concat(h,"px");o.crop.style.height="".concat(c,"px");break;default:break}};this.handleCropDrag=function(e){if(!o.isMouseStillInTarget(e)){return}var t=n(e,o.previousTouch),i=t.movementX,r=t.movementY;var a=o.crop.offsetLeft+i;var s=o.crop.offsetTop+r;var h=o.image.getBoundingClientRect();var c=o.crop.getBoundingClientRect();if(a<0){a=0}if(s<0){s=0}if(a+c.width>h.width){a=o.crop.offsetLeft}if(s+c.height>h.height){s=o.crop.offsetTop}o.crop.style.left=a+"px";o.crop.style.top=s+"px"}}e.prototype.componentDidLoad=function(){var e=this;requestAnimationFrame((function(){e.setView("noPictureView")}))};e.prototype.setView=function(e){var t=this.host.shadowRoot.querySelectorAll(".view");t.forEach((function(e){return e.classList.remove("visible")}));switch(e){case"noPictureView":this.noPictureView.classList.add("visible");break;case"hasPictureView":this.hasPictureView.classList.add("visible");break;default:break}this.view=e};e.prototype.initCrop=function(){var e=this.width/this.height;var t=this.image.getBoundingClientRect();var i=t.width/t.height;if(e>i){var o=t.width/e;var r=t.height-o;this.crop.style.top=Math.round(r/2).toString()+"px";this.crop.style.height=Math.round(o).toString()+"px"}else{var n=t.height*e;var r=t.width-n;this.crop.style.left=Math.round(r/2).toString()+"px";this.crop.style.width=Math.round(n).toString()+"px"}};e.prototype.setImage=function(){var e=this;this.image.addEventListener("load",(function(){e.initCrop();e.emitImage()}));this.image.src=this.canvas.toDataURL()};e.prototype.handleNewFile=function(e){var t=this;if(e.type.split("/")[0]!="image"){return}var i=new FileReader;i.onload=function(e){var i=new Image;i.onload=function(){t.canvas.width=i.width;t.canvas.height=i.height;if(t.preventUndersized&&(i.width<t.width||i.height<t.height)){t.imageTooSmallModal.show();return}var e=t.canvas.getContext("2d");e.drawImage(i,0,0);t.setView("hasPictureView");t.setImage()};i.src=e.target.result.toString()};i.readAsDataURL(e)};e.prototype.emitImage=function(){var e=this.crop.offsetLeft/this.image.width*this.image.naturalWidth;var t=this.crop.offsetTop/this.image.height*this.image.naturalHeight;var i=this.crop.getBoundingClientRect();var o=i.width/this.image.width*this.image.naturalWidth;var r=i.height/this.image.height*this.image.naturalHeight;if(e<0)e=0;if(e>this.image.naturalWidth)e=this.image.naturalWidth;if(t<0)t=0;if(t>this.image.naturalWidth)t=this.image.naturalWidth;if(o>this.image.naturalWidth)o=this.image.naturalWidth;if(r>this.image.naturalHeight)r=this.image.naturalHeight;var n=this.generateCroppedImage(e,t,o,r,this.width,this.height);this.imageCropChanged.emit(n)};e.prototype.generateCroppedImage=function(e,t,i,o,r,n){this.canvas.width=r;this.canvas.height=n;var a=this.canvas.getContext("2d");a.clearRect(0,0,r,n);a.drawImage(this.image,e,t,i,o,0,0,r,n);return this.canvas.toDataURL("image/jpeg",this.quality)};e.prototype.getCornerLeftTop=function(e){var t=0;var i=0;switch(e){case a.se:t=this.crop.offsetLeft;i=this.crop.offsetTop;break;case a.sw:i=this.crop.offsetTop;break;default:break}return{top:i,left:t}};e.prototype.isMouseStillInTarget=function(e){var t=false;var i;var o;var r=this.image.getBoundingClientRect();if(e instanceof MouseEvent){i=e.clientX;o=e.clientY}if(typeof TouchEvent!=="undefined"){if(e instanceof TouchEvent){var n=e.touches[0];i=n.clientX;o=n.clientY}}if(i>=r.x&&o>=r.y&&i<=r.left+r.width&&o<=r.top+r.height){t=true}var a=this.crop.querySelectorAll("div");a.forEach((function(e){var r=e.getBoundingClientRect();if(i>=r.x&&o>=r.y&&i<=r.left+r.width&&o<=r.top+r.height){t=true}}));return t};e.prototype.render=function(){var e=this;return o(r,{ref:function(t){return e.host=t}},o("canvas",{ref:function(t){return e.canvas=t}}),o("div",{class:"view",ref:function(t){return e.hasPictureView=t}},o("div",{class:"cropper"},o("img",{ref:function(t){return e.image=t}}),o("div",{class:"backdrop"}),o("div",{class:"crop",ref:function(t){return e.crop=t},onMouseDown:this.handleCropMouseDown,onTouchStart:this.handleCropMouseDown},o("div",{class:"nw"}),o("div",{class:"ne"}),o("div",{class:"se"}),o("div",{class:"sw"})))),o("div",{class:"view",ref:function(t){return e.noPictureView=t}},o("dnn-dropzone",{allowCameraMode:true,onFilesSelected:function(t){return e.handleNewFile(t.detail[0])},resx:{capture:this.resx.capture,dragAndDropFile:this.resx.dragAndDropFile,or:this.resx.or,takePicture:this.resx.takePicture,uploadFile:this.resx.uploadFile}})),o("dnn-modal",{ref:function(t){return e.imageTooSmallModal=t},"close-text":this.resx.modalCloseText},o("p",null,this.resx.imageTooSmall.replace("{width}",this.width.toString()).replace("{height}",this.height.toString()))))};return e}());h.style=s}}}));
 //# sourceMappingURL=dnn-image-cropper.system.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["src/components/dnn-image-cropper/CornerType.ts","src/components/dnn-image-cropper/dnn-image-cropper.scss?tag=dnn-image-cropper&encapsulation=shadow","src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"names":["CornerType","dnnImageCropperCss","DnnImageCropper","exports","class_1","hostRef","_this","this","width","height","resx","capture","dragAndDropFile","or","takePicture","uploadFile","imageTooSmall","modalCloseText","quality","preventUndersized","handleCropMouseDown","event","stopPropagation","preventDefault","element","target","className","classList","document","addEventListener","handleImageCropFinished","handleCropDrag","removeEventListener","handleNwMouseMove","handleNeMouseMove","handleSeMouseMove","handleSwMouseMove","_ev","emitImage","previousTouch","undefined","handleCornerDrag","nw","ne","se","sw","corner","isMouseStillInTarget","_a","getCornerLeftTop","left","top","newWidth","newHeight","orientation","wantedRatio","cropRect","crop","getBoundingClientRect","imageRect","image","_b","getMovementFromEvent","movementX","movementY","Math","abs","topOffset","offsetTop","leftOffset","offsetLeft","zoomRatio","naturalWidth","style","ev","newLeft","newTop","prototype","componentDidLoad","requestAnimationFrame","setView","newView","views","host","shadowRoot","querySelectorAll","forEach","v","remove","noPictureView","add","hasPictureView","view","initCrop","imageRatio","wantedHeight","diff","round","toString","wantedWidth","setImage","src","canvas","toDataURL","handleNewFile","file","type","split","reader","FileReader","onload","readerLoadEvent","img","Image","imageTooSmallModal","show","ctx","getContext","drawImage","result","readAsDataURL","x","y","naturalHeight","dataUrl","generateCroppedImage","imageCropChanged","emit","desiredWidth","desiredHeight","context","clearRect","inside","mouseX","mouseY","MouseEvent","clientX","clientY","TouchEvent","touch","touches","corners","cornerRect","render","h","Host","ref","el","class","e","onMouseDown","onTouchStart","allowCameraMode","onFilesSelected","detail","close-text","replace"],"mappings":"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","sourcesContent":["export enum CornerType {\r\n    \"nw\",\r\n    \"ne\",\r\n    \"se\",\r\n    \"sw\",\r\n};",":host {\r\n  display: block;\r\n}\r\ncanvas {\r\n  display: none;\r\n}\r\n.view{\r\n  visibility: hidden;\r\n  opacity: 0;\r\n  height: 0;\r\n  overflow: hidden;\r\n  transition: all 300ms ease-in-out;\r\n  &.visible{\r\n    visibility: visible;\r\n    opacity: 1;\r\n    height: initial;\r\n    overflow: visible;\r\n  }\r\n  .cropper{\r\n    position: relative;\r\n    width: 100%;\r\n    img{\r\n      width: 100%;\r\n      display: block;\r\n      margin: 0 auto;\r\n    }\r\n    .backdrop{\r\n      backdrop-filter: saturate(0.5);\r\n      backdrop-filter: brightness(0.5);\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n    .crop{\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      outline: 2px dashed white;\r\n      box-shadow: black 0 0 0px 2px;\r\n      backdrop-filter: saturate(2);\r\n      backdrop-filter: brightness(2);\r\n      cursor: move;\r\n      >div{\r\n        width: 20px;\r\n        height: 20px;\r\n        background-color: white;\r\n        border: 2px solid rgba(0,0,0,0.5);\r\n        position: absolute;\r\n        &.nw, &.ne{\r\n          top: -17px;\r\n        }\r\n        &.ne, &.se{\r\n          right: -17px;\r\n        }\r\n        &.se, &.sw{\r\n          bottom: -17px;\r\n        }\r\n        &.sw, &.nw{\r\n          left: -17px;\r\n        }\r\n        &.nw, &.se{\r\n          cursor: nwse-resize;\r\n        }\r\n        &.ne, &.sw{\r\n          cursor: nesw-resize;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\ndnn-modal{\r\n  --max-width: 512px;\r\n}","import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport { CornerType } from './CornerType';\r\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\r\n\r\n/**\r\n * Allows cropping an image in-browser with the option to enforce a specific final size.\r\n * All computation happens in the browser and the final image is emmited\r\n * in an event that has a data-url of the image.\r\n */\r\n@Component({\r\n  tag: 'dnn-image-cropper',\r\n  styleUrl: 'dnn-image-cropper.scss',\r\n  shadow: true,\r\n})\r\nexport class DnnImageCropper {\r\n  /** Sets the desired final image width. */\r\n  @Prop() width: number = 600;\r\n\r\n  /** Sets the desired final image height. */\r\n  @Prop() height: number = 600;\r\n\r\n  /** Can be used to customize controls text.\r\n   * Some values support tokens, see default values for examples.\r\n  */\r\n  @Prop() resx: {\r\n    capture: string;\r\n    dragAndDropFile: string;\r\n    or: string;\r\n    takePicture: string;\r\n    uploadFile: string;\r\n    imageTooSmall: string;\r\n    modalCloseText: string;\r\n  } = {\r\n    capture: \"Capture\",\r\n    dragAndDropFile: \"Drag and drop an image\",\r\n    or: \"or\",\r\n    takePicture: \"Take a picture\",\r\n    uploadFile: \"Upload an image\",\r\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.\",\r\n    modalCloseText: \"Close\",\r\n  }\r\n\r\n  /** Sets the output quality of the corpped image (number between 0 and 1). */\r\n  @Prop() quality: number = 0.8;\r\n\r\n  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\r\n  @Prop() preventUndersized: boolean = false;\r\n\r\n  /** When the image crop changes, emits the dataurl for the new cropped image. */\r\n  @Event() imageCropChanged: EventEmitter<string>;\r\n\r\n  @State() view: IComponentInterfaces[\"View\"];\r\n  \r\n  private host: HTMLElement;\r\n  private hasPictureView: HTMLDivElement;\r\n  private noPictureView: HTMLDivElement;\r\n  private canvas: HTMLCanvasElement;\r\n  private image: HTMLImageElement;\r\n  private crop: HTMLDivElement;\r\n  private previousTouch: Touch;\r\n  private imageTooSmallModal!: HTMLDnnModalElement;\r\n\r\n  componentDidLoad() {\r\n    requestAnimationFrame(() => {\r\n      this.setView(\"noPictureView\");\r\n    })\r\n  }\r\n\r\n  private setView(newView: IComponentInterfaces[\"View\"]){\r\n    const views = this.host.shadowRoot.querySelectorAll(\".view\");\r\n    views.forEach(v =>\r\n      v.classList.remove(\"visible\"));\r\n    switch (newView) {\r\n      case \"noPictureView\":\r\n        this.noPictureView.classList.add(\"visible\");\r\n        break;\r\n      case \"hasPictureView\":\r\n        this.hasPictureView.classList.add(\"visible\");\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    this.view = newView;\r\n  }\r\n\r\n  private initCrop(){\r\n    var wantedRatio = this.width / this.height;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var imageRatio = imageRect.width / imageRect.height;\r\n    \r\n    if (wantedRatio > imageRatio){\r\n        var wantedHeight = imageRect.width / wantedRatio;\r\n        var diff = imageRect.height - wantedHeight;\r\n        this.crop.style.top = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\r\n    }\r\n    else{\r\n      var wantedWidth = imageRect.height * wantedRatio;\r\n      var diff = imageRect.width - wantedWidth;\r\n        this.crop.style.left = Math.round(diff/2).toString() + \"px\";\r\n        this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\r\n    }\r\n  }\r\n\r\n  private setImage(){\r\n    this.image.addEventListener('load', () => {\r\n      this.initCrop();\r\n      this.emitImage();\r\n    })\r\n    this.image.src = this.canvas.toDataURL();\r\n  }\r\n\r\n  private handleNewFile(file: File): void {\r\n    if (file.type.split('/')[0] != \"image\"){\r\n      return;\r\n    }\r\n    \r\n    var reader = new FileReader();\r\n    reader.onload = readerLoadEvent => {\r\n      var img = new Image();\r\n      img.onload = () => {\r\n        this.canvas.width = img.width;\r\n        this.canvas.height = img.height;\r\n        if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\r\n          this.imageTooSmallModal.show();\r\n          return;\r\n        }\r\n        var ctx = this.canvas.getContext(\"2d\");\r\n        ctx.drawImage(img,0,0);\r\n        this.setView(\"hasPictureView\");\r\n        this.setImage();\r\n      }\r\n      img.src = readerLoadEvent.target.result.toString();\r\n    }\r\n    reader.readAsDataURL(file);\r\n  }\r\n\r\n  private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    const element = event.target as HTMLElement;\r\n    const className = element.classList[0];\r\n\r\n    document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\r\n    document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\r\n    switch (className) {\r\n      case \"crop\":\r\n        document.addEventListener(\"mousemove\", this.handleCropDrag, false);\r\n        document.addEventListener(\"touchmove\", this.handleCropDrag, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\r\n        break;\r\n      case \"nw\":\r\n        document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\r\n        break;\r\n      case \"ne\":\r\n        document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\r\n        break\r\n      case \"se\":\r\n        document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\r\n        break;\r\n      case \"sw\":\r\n        document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\r\n        document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\r\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\r\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  private handleImageCropFinished = (_ev: MouseEvent) => {\r\n    this.emitImage();\r\n    document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\r\n    this.previousTouch = undefined;\r\n  }\r\n\r\n  private emitImage() {\r\n    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\r\n    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\r\n\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    var width = cropRect.width / this.image.width * this.image.naturalWidth;\r\n    var height = cropRect.height / this.image.height * this.image.naturalHeight;\r\n\r\n    if (x < 0)\r\n      x = 0;\r\n    if (x > this.image.naturalWidth)\r\n      x = this.image.naturalWidth;\r\n    if (y < 0)\r\n      y = 0;\r\n    if (y > this.image.naturalWidth)\r\n      y = this.image.naturalWidth;\r\n    if (width > this.image.naturalWidth)\r\n      width = this.image.naturalWidth;\r\n    if (height > this.image.naturalHeight)\r\n      height = this.image.naturalHeight;\r\n\r\n    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\r\n    this.imageCropChanged.emit(dataUrl);\r\n  }\r\n\r\n  private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\r\n    this.canvas.width = desiredWidth;\r\n    this.canvas.height = desiredHeight;\r\n    const context = this.canvas.getContext(\"2d\");\r\n    context.clearRect(0, 0, desiredWidth, desiredHeight);\r\n    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\r\n\r\n    return this.canvas.toDataURL(\"image/jpeg\", this.quality);\r\n  }\r\n\r\n  private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.nw);\r\n  }\r\n\r\n  private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.ne);\r\n  }\r\n\r\n  private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.se);\r\n  }\r\n\r\n  private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\r\n    this.handleCornerDrag(event, CornerType.sw);\r\n  }\r\n\r\n  private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\r\n    if (!this.isMouseStillInTarget(event)){\r\n      return;\r\n    }\r\n    \r\n    let {left, top} = this.getCornerLeftTop(corner);\r\n    let newWidth = 0;\r\n    let newHeight = 0;\r\n    let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\r\n    const wantedRatio = this.width / this.height;\r\n    const cropRect = this.crop.getBoundingClientRect();\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);\r\n    if (Math.abs(movementX) < Math.abs(movementY)){\r\n      orientation = \"vertical\";\r\n    }\r\n\r\n    if (orientation == \"horizontal\"){\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.sw:\r\n          newWidth = cropRect.width - movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        case CornerType.ne:\r\n        case CornerType.se:\r\n          newWidth = cropRect.width + movementX;\r\n          newHeight = newWidth / wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    } else{\r\n      switch (corner) {\r\n        case CornerType.nw:\r\n        case CornerType.ne:\r\n          newHeight = cropRect.height - movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        case CornerType.se:\r\n        case CornerType.sw:\r\n          newHeight = cropRect.height + movementY;\r\n          newWidth = newHeight * wantedRatio;\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n      case CornerType.nw:\r\n        const topOffset = cropRect.height - newHeight;\r\n        top = this.crop.offsetTop + topOffset;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.nw:\r\n      case CornerType.sw:\r\n        const leftOffset = cropRect.width - newWidth;\r\n        left = this.crop.offsetLeft + leftOffset;\r\n        if (left < 0) left = 0;\r\n        if (left > imageRect.width) left = imageRect.width;\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      case CornerType.ne:\r\n      case CornerType.se:\r\n        if (top < 0) top = 0;\r\n        if (top > imageRect.height) top = imageRect.height;\r\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\r\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n\r\n    if (newWidth / newHeight != wantedRatio){\r\n      return;\r\n    }\r\n\r\n    if (this.preventUndersized){\r\n      const zoomRatio = this.image.width / this.image.naturalWidth;\r\n      if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\r\n        return;\r\n      }\r\n    }\r\n\r\n    switch (corner) {\r\n      case CornerType.ne:\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.nw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.top = `${top}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.se:\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      case CornerType.sw:\r\n        this.crop.style.left = `${left}px`;\r\n        this.crop.style.width = `${newWidth}px`;\r\n        this.crop.style.height = `${newHeight}px`;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\r\n    let left = 0;\r\n    let top = 0;\r\n    switch (corner) {\r\n      case CornerType.se:\r\n        left = this.crop.offsetLeft;\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      case CornerType.sw:\r\n        top = this.crop.offsetTop;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n    return {top, left};\r\n  }\r\n\r\n  private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\r\n    if (!this.isMouseStillInTarget(ev)){\r\n      return;\r\n    }\r\n    let {movementX, movementY} = getMovementFromEvent(ev, this.previousTouch);\r\n    let newLeft = this.crop.offsetLeft + movementX;\r\n    let newTop = this.crop.offsetTop + movementY;\r\n    var imageRect = this.image.getBoundingClientRect();\r\n    var cropRect = this.crop.getBoundingClientRect();\r\n    if (newLeft < 0){\r\n      newLeft = 0;\r\n    }\r\n    if (newTop < 0){\r\n      newTop = 0;\r\n    }\r\n    if (newLeft + cropRect.width > imageRect.width){\r\n      newLeft = this.crop.offsetLeft;\r\n    }\r\n    if (newTop + cropRect.height > imageRect.height){\r\n      newTop = this.crop.offsetTop;\r\n    }\r\n    this.crop.style.left = newLeft + \"px\";\r\n    this.crop.style.top = newTop + \"px\";\r\n  };\r\n\r\n  private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\r\n    var inside = false;\r\n    let mouseX: number;\r\n    let mouseY: number;\r\n    const imageRect = this.image.getBoundingClientRect();\r\n    \r\n    if (event instanceof MouseEvent){\r\n      mouseX = event.clientX;\r\n      mouseY = event.clientY;\r\n    }\r\n\r\n    if (typeof TouchEvent !== \"undefined\"){\r\n      if (event instanceof TouchEvent){\r\n        var touch = event.touches[0];\r\n        mouseX = touch.clientX;\r\n        mouseY = touch.clientY;\r\n      }\r\n    }\r\n    \r\n    if (\r\n      mouseX >= imageRect.x &&\r\n      mouseY >= imageRect.y &&\r\n      mouseX <= imageRect.left + imageRect.width &&\r\n      mouseY <= imageRect.top + imageRect.height)\r\n    {\r\n      inside = true;\r\n    }\r\n\r\n    var corners = this.crop.querySelectorAll(\"div\");\r\n    corners.forEach(corner =>{\r\n      var cornerRect = corner.getBoundingClientRect();\r\n      if (\r\n        mouseX >= cornerRect.x &&\r\n        mouseY >= cornerRect.y &&\r\n        mouseX <= cornerRect.left + cornerRect.width &&\r\n        mouseY <= cornerRect.top + cornerRect.height)\r\n        {\r\n          inside = true;\r\n        }\r\n    })\r\n\r\n    return inside;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host ref={el => this.host = el}>\r\n        <canvas ref={el => this.canvas = el} />\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.hasPictureView = el}\r\n        >\r\n          <div class=\"cropper\">\r\n            <img ref={el => this.image = el} />\r\n            <div class=\"backdrop\" />\r\n            <div\r\n              class=\"crop\"\r\n              ref={e => this.crop = e}\r\n              onMouseDown={this.handleCropMouseDown}\r\n              onTouchStart={this.handleCropMouseDown}\r\n            >\r\n              <div class=\"nw\" />\r\n              <div class=\"ne\" />\r\n              <div class=\"se\" />\r\n              <div class=\"sw\" />\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"view\"\r\n          ref={el => this.noPictureView = el}>\r\n            <dnn-dropzone\r\n              allowCameraMode\r\n              onFilesSelected={e => this.handleNewFile(e.detail[0])}\r\n              resx={\r\n                {\r\n                  capture: this.resx.capture,\r\n                  dragAndDropFile: this.resx.dragAndDropFile,\r\n                  or: this.resx.or,\r\n                  takePicture: this.resx.takePicture,\r\n                  uploadFile: this.resx.uploadFile,\r\n                }\r\n              }\r\n            />\r\n        </div>\r\n        <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\r\n          <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\r\n        </dnn-modal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n\r\ninterface IComponentInterfaces\r\n{\r\n  View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\r\n}"]}
+{"version":3,"sources":["src/components/dnn-image-cropper/CornerType.ts","src/components/dnn-image-cropper/dnn-image-cropper.scss?tag=dnn-image-cropper&encapsulation=shadow","src/components/dnn-image-cropper/dnn-image-cropper.tsx"],"names":["CornerType","dnnImageCropperCss","DnnImageCropper","exports","class_1","hostRef","_this","this","width","height","resx","capture","dragAndDropFile","or","takePicture","uploadFile","imageTooSmall","modalCloseText","quality","preventUndersized","handleCropMouseDown","event","stopPropagation","preventDefault","element","target","className","classList","document","addEventListener","handleImageCropFinished","handleCropDrag","removeEventListener","handleNwMouseMove","handleNeMouseMove","handleSeMouseMove","handleSwMouseMove","_ev","emitImage","previousTouch","undefined","handleCornerDrag","nw","ne","se","sw","corner","isMouseStillInTarget","_a","getCornerLeftTop","left","top","newWidth","newHeight","orientation","wantedRatio","cropRect","crop","getBoundingClientRect","imageRect","image","_b","getMovementFromEvent","movementX","movementY","Math","abs","topOffset","offsetTop","leftOffset","offsetLeft","zoomRatio","naturalWidth","style","concat","ev","newLeft","newTop","prototype","componentDidLoad","requestAnimationFrame","setView","newView","views","host","shadowRoot","querySelectorAll","forEach","v","remove","noPictureView","add","hasPictureView","view","initCrop","imageRatio","wantedHeight","diff","round","toString","wantedWidth","setImage","src","canvas","toDataURL","handleNewFile","file","type","split","reader","FileReader","onload","readerLoadEvent","img","Image","imageTooSmallModal","show","ctx","getContext","drawImage","result","readAsDataURL","x","y","naturalHeight","dataUrl","generateCroppedImage","imageCropChanged","emit","desiredWidth","desiredHeight","context","clearRect","inside","mouseX","mouseY","MouseEvent","clientX","clientY","TouchEvent","touch","touches","corners","cornerRect","render","h","Host","ref","el","class","e","onMouseDown","onTouchStart","allowCameraMode","onFilesSelected","detail","close-text","replace"],"mappings":"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","sourcesContent":["export enum CornerType {\r\n    \"nw\",\r\n    \"ne\",\r\n    \"se\",\r\n    \"sw\",\r\n};",":host {\n  display: block;\n}\ncanvas {\n  display: none;\n}\n.view{\n  visibility: hidden;\n  opacity: 0;\n  height: 0;\n  overflow: hidden;\n  transition: all 300ms ease-in-out;\n  &.visible{\n    visibility: visible;\n    opacity: 1;\n    height: initial;\n    overflow: visible;\n  }\n  .cropper{\n    position: relative;\n    width: 100%;\n    img{\n      width: 100%;\n      display: block;\n      margin: 0 auto;\n    }\n    .backdrop{\n      backdrop-filter: saturate(0.5);\n      backdrop-filter: brightness(0.5);\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: 100%;\n      height: 100%;\n    }\n    .crop{\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      outline: 2px dashed white;\n      box-shadow: black 0 0 0px 2px;\n      backdrop-filter: saturate(2);\n      backdrop-filter: brightness(2);\n      cursor: move;\n      >div{\n        width: 20px;\n        height: 20px;\n        background-color: white;\n        border: 2px solid rgba(0,0,0,0.5);\n        position: absolute;\n        &.nw, &.ne{\n          top: -17px;\n        }\n        &.ne, &.se{\n          right: -17px;\n        }\n        &.se, &.sw{\n          bottom: -17px;\n        }\n        &.sw, &.nw{\n          left: -17px;\n        }\n        &.nw, &.se{\n          cursor: nwse-resize;\n        }\n        &.ne, &.sw{\n          cursor: nesw-resize;\n        }\n      }\n    }\n  }\n}\ndnn-modal{\n  --max-width: 512px;\n}","import { Component, Host, h, State, Prop, Event, EventEmitter } from '@stencil/core';\nimport { CornerType } from './CornerType';\nimport { getMovementFromEvent } from \"../../utilities/mouseUtilities\";\n\n/**\n * Allows cropping an image in-browser with the option to enforce a specific final size.\n * All computation happens in the browser and the final image is emmited\n * in an event that has a data-url of the image.\n */\n@Component({\n  tag: 'dnn-image-cropper',\n  styleUrl: 'dnn-image-cropper.scss',\n  shadow: true,\n})\nexport class DnnImageCropper {\n  /** Sets the desired final image width. */\n  @Prop() width: number = 600;\n\n  /** Sets the desired final image height. */\n  @Prop() height: number = 600;\n\n  /** Can be used to customize controls text.\n   * Some values support tokens, see default values for examples.\n  */\n  @Prop() resx: {\n    capture: string;\n    dragAndDropFile: string;\n    or: string;\n    takePicture: string;\n    uploadFile: string;\n    imageTooSmall: string;\n    modalCloseText: string;\n  } = {\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  }\n\n  /** Sets the output quality of the corpped image (number between 0 and 1). */\n  @Prop() quality: number = 0.8;\n\n  /** When set to true, prevents cropping an image smaller than the required size, which would blow pixel and make the final picture look blurry. */\n  @Prop() preventUndersized: boolean = false;\n\n  /** When the image crop changes, emits the dataurl for the new cropped image. */\n  @Event() imageCropChanged: EventEmitter<string>;\n\n  @State() view: IComponentInterfaces[\"View\"];\n  \n  private host: HTMLElement;\n  private hasPictureView: HTMLDivElement;\n  private noPictureView: HTMLDivElement;\n  private canvas: HTMLCanvasElement;\n  private image: HTMLImageElement;\n  private crop: HTMLDivElement;\n  private previousTouch: Touch;\n  private imageTooSmallModal!: HTMLDnnModalElement;\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.setView(\"noPictureView\");\n    })\n  }\n\n  private setView(newView: IComponentInterfaces[\"View\"]){\n    const views = this.host.shadowRoot.querySelectorAll(\".view\");\n    views.forEach(v =>\n      v.classList.remove(\"visible\"));\n    switch (newView) {\n      case \"noPictureView\":\n        this.noPictureView.classList.add(\"visible\");\n        break;\n      case \"hasPictureView\":\n        this.hasPictureView.classList.add(\"visible\");\n        break;\n      default:\n        break;\n    }\n    this.view = newView;\n  }\n\n  private initCrop(){\n    var wantedRatio = this.width / this.height;\n    var imageRect = this.image.getBoundingClientRect();\n    var imageRatio = imageRect.width / imageRect.height;\n    \n    if (wantedRatio > imageRatio){\n        var wantedHeight = imageRect.width / wantedRatio;\n        var diff = imageRect.height - wantedHeight;\n        this.crop.style.top = Math.round(diff/2).toString() + \"px\";\n        this.crop.style.height = Math.round(wantedHeight).toString() + \"px\";\n    }\n    else{\n      var wantedWidth = imageRect.height * wantedRatio;\n      var diff = imageRect.width - wantedWidth;\n        this.crop.style.left = Math.round(diff/2).toString() + \"px\";\n        this.crop.style.width = Math.round(wantedWidth).toString() + \"px\";\n    }\n  }\n\n  private setImage(){\n    this.image.addEventListener('load', () => {\n      this.initCrop();\n      this.emitImage();\n    })\n    this.image.src = this.canvas.toDataURL();\n  }\n\n  private handleNewFile(file: File): void {\n    if (file.type.split('/')[0] != \"image\"){\n      return;\n    }\n    \n    var reader = new FileReader();\n    reader.onload = readerLoadEvent => {\n      var img = new Image();\n      img.onload = () => {\n        this.canvas.width = img.width;\n        this.canvas.height = img.height;\n        if (this.preventUndersized && (img.width < this.width || img.height< this.height)){\n          this.imageTooSmallModal.show();\n          return;\n        }\n        var ctx = this.canvas.getContext(\"2d\");\n        ctx.drawImage(img,0,0);\n        this.setView(\"hasPictureView\");\n        this.setImage();\n      }\n      img.src = readerLoadEvent.target.result.toString();\n    }\n    reader.readAsDataURL(file);\n  }\n\n  private handleCropMouseDown = (event: MouseEvent | TouchEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n    const element = event.target as HTMLElement;\n    const className = element.classList[0];\n\n    document.addEventListener(\"mouseup\", this.handleImageCropFinished, false);\n    document.addEventListener(\"touchend\", this.handleImageCropFinished, false);\n    switch (className) {\n      case \"crop\":\n        document.addEventListener(\"mousemove\", this.handleCropDrag, false);\n        document.addEventListener(\"touchmove\", this.handleCropDrag, false)\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleCropDrag));\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleCropDrag));\n        break;\n      case \"nw\":\n        document.addEventListener(\"mousemove\", this.handleNwMouseMove, false);\n        document.addEventListener(\"touchmove\", this.handleNwMouseMove, false)\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNwMouseMove));\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNwMouseMove));\n        break;\n      case \"ne\":\n        document.addEventListener(\"mousemove\", this.handleNeMouseMove, false);\n        document.addEventListener(\"touchmove\", this.handleNeMouseMove, false)\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleNeMouseMove));\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleNeMouseMove));\n        break\n      case \"se\":\n        document.addEventListener(\"mousemove\", this.handleSeMouseMove, false);\n        document.addEventListener(\"touchmove\", this.handleSeMouseMove, false)\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSeMouseMove));\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSeMouseMove));\n        break;\n      case \"sw\":\n        document.addEventListener(\"mousemove\", this.handleSwMouseMove, false);\n        document.addEventListener(\"touchmove\", this.handleSwMouseMove, false)\n        document.addEventListener(\"mouseup\", () => document.removeEventListener(\"mousemove\", this.handleSwMouseMove));\n        document.addEventListener(\"touchend\", () => document.removeEventListener(\"touchmove\", this.handleSwMouseMove));\n        break;\n      default:\n        break;\n    }\n  };\n\n  private handleImageCropFinished = (_ev: MouseEvent) => {\n    this.emitImage();\n    document.removeEventListener(\"mouseup\", this.handleImageCropFinished);\n    this.previousTouch = undefined;\n  }\n\n  private emitImage() {\n    var x = this.crop.offsetLeft / this.image.width * this.image.naturalWidth;\n    var y = this.crop.offsetTop / this.image.height * this.image.naturalHeight;\n\n    var cropRect = this.crop.getBoundingClientRect();\n    var width = cropRect.width / this.image.width * this.image.naturalWidth;\n    var height = cropRect.height / this.image.height * this.image.naturalHeight;\n\n    if (x < 0)\n      x = 0;\n    if (x > this.image.naturalWidth)\n      x = this.image.naturalWidth;\n    if (y < 0)\n      y = 0;\n    if (y > this.image.naturalWidth)\n      y = this.image.naturalWidth;\n    if (width > this.image.naturalWidth)\n      width = this.image.naturalWidth;\n    if (height > this.image.naturalHeight)\n      height = this.image.naturalHeight;\n\n    var dataUrl = this.generateCroppedImage(x, y, width, height, this.width, this.height);\n    this.imageCropChanged.emit(dataUrl);\n  }\n\n  private generateCroppedImage(x: number, y: number, width: number, height: number, desiredWidth: number, desiredHeight: number) {\n    this.canvas.width = desiredWidth;\n    this.canvas.height = desiredHeight;\n    const context = this.canvas.getContext(\"2d\");\n    context.clearRect(0, 0, desiredWidth, desiredHeight);\n    context.drawImage(this.image, x, y, width, height, 0, 0, desiredWidth, desiredHeight);\n\n    return this.canvas.toDataURL(\"image/jpeg\", this.quality);\n  }\n\n  private handleNwMouseMove = (event: MouseEvent | TouchEvent) => {\n    this.handleCornerDrag(event, CornerType.nw);\n  }\n\n  private handleNeMouseMove = (event: MouseEvent | TouchEvent) => {\n    this.handleCornerDrag(event, CornerType.ne);\n  }\n\n  private handleSeMouseMove = (event: MouseEvent | TouchEvent) => {\n    this.handleCornerDrag(event, CornerType.se);\n  }\n\n  private handleSwMouseMove = (event: MouseEvent | TouchEvent) => {\n    this.handleCornerDrag(event, CornerType.sw);\n  }\n\n  private handleCornerDrag = (event: MouseEvent | TouchEvent, corner: CornerType) => {\n    if (!this.isMouseStillInTarget(event)){\n      return;\n    }\n    \n    let {left, top} = this.getCornerLeftTop(corner);\n    let newWidth = 0;\n    let newHeight = 0;\n    let orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n    const wantedRatio = this.width / this.height;\n    const cropRect = this.crop.getBoundingClientRect();\n    const imageRect = this.image.getBoundingClientRect();\n    let { movementX, movementY } = getMovementFromEvent(event, this.previousTouch);\n    if (Math.abs(movementX) < Math.abs(movementY)){\n      orientation = \"vertical\";\n    }\n\n    if (orientation == \"horizontal\"){\n      switch (corner) {\n        case CornerType.nw:\n        case CornerType.sw:\n          newWidth = cropRect.width - movementX;\n          newHeight = newWidth / wantedRatio;\n          break;\n        case CornerType.ne:\n        case CornerType.se:\n          newWidth = cropRect.width + movementX;\n          newHeight = newWidth / wantedRatio;\n          break;\n        default:\n          break;\n      }\n    } else{\n      switch (corner) {\n        case CornerType.nw:\n        case CornerType.ne:\n          newHeight = cropRect.height - movementY;\n          newWidth = newHeight * wantedRatio;\n          break;\n        case CornerType.se:\n        case CornerType.sw:\n          newHeight = cropRect.height + movementY;\n          newWidth = newHeight * wantedRatio;\n          break;\n        default:\n          break;\n      }\n    }\n\n    switch (corner) {\n      case CornerType.ne:\n      case CornerType.nw:\n        const topOffset = cropRect.height - newHeight;\n        top = this.crop.offsetTop + topOffset;\n      default:\n        break;\n    }\n\n    switch (corner) {\n      case CornerType.nw:\n      case CornerType.sw:\n        const leftOffset = cropRect.width - newWidth;\n        left = this.crop.offsetLeft + leftOffset;\n        if (left < 0) left = 0;\n        if (left > imageRect.width) left = imageRect.width;\n        if (top < 0) top = 0;\n        if (top > imageRect.height) top = imageRect.height;\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\n        break;\n      case CornerType.ne:\n      case CornerType.se:\n        if (top < 0) top = 0;\n        if (top > imageRect.height) top = imageRect.height;\n        if (left + newWidth > imageRect.width) newWidth = imageRect.width - left;\n        if (top + newHeight > imageRect.height) newHeight = imageRect.height - top;\n        break;\n      default:\n        break;\n    }\n\n    if (newWidth / newHeight != wantedRatio){\n      return;\n    }\n\n    if (this.preventUndersized){\n      const zoomRatio = this.image.width / this.image.naturalWidth;\n      if (newWidth / zoomRatio < this.width || newHeight / zoomRatio < this.height){\n        return;\n      }\n    }\n\n    switch (corner) {\n      case CornerType.ne:\n        this.crop.style.top = `${top}px`;\n        this.crop.style.width = `${newWidth}px`;\n        this.crop.style.height = `${newHeight}px`;\n        break;\n      case CornerType.nw:\n        this.crop.style.left = `${left}px`;\n        this.crop.style.top = `${top}px`;\n        this.crop.style.width = `${newWidth}px`;\n        this.crop.style.height = `${newHeight}px`;\n        break;\n      case CornerType.se:\n        this.crop.style.width = `${newWidth}px`;\n        this.crop.style.height = `${newHeight}px`;\n        break;\n      case CornerType.sw:\n        this.crop.style.left = `${left}px`;\n        this.crop.style.width = `${newWidth}px`;\n        this.crop.style.height = `${newHeight}px`;\n        break;\n      default:\n        break;\n    }\n  }\n\n  private getCornerLeftTop(corner: CornerType): { left: number; top: number; } {\n    let left = 0;\n    let top = 0;\n    switch (corner) {\n      case CornerType.se:\n        left = this.crop.offsetLeft;\n        top = this.crop.offsetTop;\n        break;\n      case CornerType.sw:\n        top = this.crop.offsetTop;\n        break;\n      default:\n        break;\n    }\n    return {top, left};\n  }\n\n  private handleCropDrag = (ev: MouseEvent | TouchEvent) => {\n    if (!this.isMouseStillInTarget(ev)){\n      return;\n    }\n    let {movementX, movementY} = getMovementFromEvent(ev, this.previousTouch);\n    let newLeft = this.crop.offsetLeft + movementX;\n    let newTop = this.crop.offsetTop + movementY;\n    var imageRect = this.image.getBoundingClientRect();\n    var cropRect = this.crop.getBoundingClientRect();\n    if (newLeft < 0){\n      newLeft = 0;\n    }\n    if (newTop < 0){\n      newTop = 0;\n    }\n    if (newLeft + cropRect.width > imageRect.width){\n      newLeft = this.crop.offsetLeft;\n    }\n    if (newTop + cropRect.height > imageRect.height){\n      newTop = this.crop.offsetTop;\n    }\n    this.crop.style.left = newLeft + \"px\";\n    this.crop.style.top = newTop + \"px\";\n  };\n\n  private isMouseStillInTarget(event: MouseEvent | TouchEvent) {\n    var inside = false;\n    let mouseX: number;\n    let mouseY: number;\n    const imageRect = this.image.getBoundingClientRect();\n    \n    if (event instanceof MouseEvent){\n      mouseX = event.clientX;\n      mouseY = event.clientY;\n    }\n\n    if (typeof TouchEvent !== \"undefined\"){\n      if (event instanceof TouchEvent){\n        var touch = event.touches[0];\n        mouseX = touch.clientX;\n        mouseY = touch.clientY;\n      }\n    }\n    \n    if (\n      mouseX >= imageRect.x &&\n      mouseY >= imageRect.y &&\n      mouseX <= imageRect.left + imageRect.width &&\n      mouseY <= imageRect.top + imageRect.height)\n    {\n      inside = true;\n    }\n\n    var corners = this.crop.querySelectorAll(\"div\");\n    corners.forEach(corner =>{\n      var cornerRect = corner.getBoundingClientRect();\n      if (\n        mouseX >= cornerRect.x &&\n        mouseY >= cornerRect.y &&\n        mouseX <= cornerRect.left + cornerRect.width &&\n        mouseY <= cornerRect.top + cornerRect.height)\n        {\n          inside = true;\n        }\n    })\n\n    return inside;\n  }\n\n  render() {\n    return (\n      <Host ref={el => this.host = el}>\n        <canvas ref={el => this.canvas = el} />\n        <div\n          class=\"view\"\n          ref={el => this.hasPictureView = el}\n        >\n          <div class=\"cropper\">\n            <img ref={el => this.image = el} />\n            <div class=\"backdrop\" />\n            <div\n              class=\"crop\"\n              ref={e => this.crop = e}\n              onMouseDown={this.handleCropMouseDown}\n              onTouchStart={this.handleCropMouseDown}\n            >\n              <div class=\"nw\" />\n              <div class=\"ne\" />\n              <div class=\"se\" />\n              <div class=\"sw\" />\n            </div>\n          </div>\n        </div>\n        <div\n          class=\"view\"\n          ref={el => this.noPictureView = el}>\n            <dnn-dropzone\n              allowCameraMode\n              onFilesSelected={e => this.handleNewFile(e.detail[0])}\n              resx={\n                {\n                  capture: this.resx.capture,\n                  dragAndDropFile: this.resx.dragAndDropFile,\n                  or: this.resx.or,\n                  takePicture: this.resx.takePicture,\n                  uploadFile: this.resx.uploadFile,\n                }\n              }\n            />\n        </div>\n        <dnn-modal ref={el => this.imageTooSmallModal = el} close-text={this.resx.modalCloseText}>\n          <p>{this.resx.imageTooSmall.replace(\"{width}\", this.width.toString()).replace(\"{height}\", this.height.toString())}</p>\n        </dnn-modal>\n      </Host>\n    );\n  }\n}\n\ninterface IComponentInterfaces\n{\n  View: \"noPictureView\" | \"takingPictureView\" | \"hasPictureView\" | \"hasCroppedPictureView\";\n}"]}

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

@@ -1,56 +1,59 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-b5a28c1d.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-20e42ad7.js';
 
 const dnnModalCss = ":host{display:block}:host .overlay{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";
 
-let DnnModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dismissed = createEvent(this, "dismissed", 7);
-    /**
-     * Pass false to remove the backdrop click auto-dismiss feature.
-     */
-    this.backdropDismiss = true;
-    /**
-     * Optionally pass the aria-label text for the close button.
-     * Defaults to "Close modal" if not provided.
-     */
-    this.closeText = "Close modal";
-    /**
-     * Optionally you can pass false to not show the close button.
-     * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop
-     * or provide your own dismissal logic in the modal content.
-     */
-    this.showCloseButton = true;
-    this.visible = false;
-  }
-  /**
-   * Shows the modal
-   */
-  async show() {
-    this.visible = true;
-  }
-  /**
-   * Hides the modal
-   */
-  async hide() {
-    this.visible = false;
-  }
-  handleDismiss() {
-    this.visible = false;
-    this.dismissed.emit();
-  }
-  handleBackdropClick(e) {
-    const element = e.target;
-    if (element.id === "backdrop" && this.backdropDismiss) {
-      this.handleDismiss();
-    }
-  }
-  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)))));
-  }
-  get el() { return getElement(this); }
-};
+const DnnModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dismissed = createEvent(this, "dismissed", 7);
+    /**
+     * Pass false to remove the backdrop click auto-dismiss feature.
+     */
+    this.backdropDismiss = true;
+    /**
+     * Optionally pass the aria-label text for the close button.
+     * Defaults to "Close modal" if not provided.
+     */
+    this.closeText = "Close modal";
+    /**
+     * Optionally you can pass false to not show the close button.
+     * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop
+     * or provide your own dismissal logic in the modal content.
+     */
+    this.showCloseButton = true;
+    /**
+     * Reflects the visible state of the modal.
+     */
+    this.visible = false;
+  }
+  /**
+   * Shows the modal
+   */
+  async show() {
+    this.visible = true;
+  }
+  /**
+   * Hides the modal
+   */
+  async hide() {
+    this.visible = false;
+  }
+  handleDismiss() {
+    this.visible = false;
+    this.dismissed.emit();
+  }
+  handleBackdropClick(e) {
+    const element = e.target;
+    if (element.id === "backdrop" && this.backdropDismiss) {
+      this.handleDismiss();
+    }
+  }
+  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)))));
+  }
+  get el() { return getElement(this); }
+};
 DnnModal.style = dnnModalCss;
 
 export { DnnModal as dnn_modal };

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

@@ -1 +1 @@
-{"file":"dnn-modal.entry.esm.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ulDAAulD;;ICO9lD,QAAQ;EALrB;;;;;;IAYU,oBAAe,GAAY,IAAI,CAAC;;;;;IAMhC,cAAS,GAAY,aAAa,CAAC;;;;;;IAOnC,oBAAe,GAAa,IAAI,CAAC;IAEhC,YAAO,GAAY,KAAK,CAAC;GA0DnC;;;;EApDC,MAAM,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAOO,aAAa;IACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;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;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,SAAS,EACnD,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAEzC,WAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,eAAe;MACnB,cACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAEnC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU,EAEX,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-modal/dnn-modal.scss?tag=dnn-modal&encapsulation=shadow","./src/components/dnn-modal/dnn-modal.tsx"],"sourcesContent":[":host {\r\n  /**\r\n   * @prop --max-width: The maximum width of the module.\r\n  */\r\n  display: block;\r\n  .overlay{\r\n    background-color: rgba(0,0,0,0.5);\r\n    position: fixed;\r\n    top:0;\r\n    left:0;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 1;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    backdrop-filter: blur(2px);\r\n    transition: all 300ms ease-in-out;\r\n    visibility: hidden;\r\n    opacity: 0;\r\n    .modal{\r\n      max-width: var(--max-width, 1200px);\r\n      background-color: white;\r\n      padding: 30px;\r\n      transform: scale(2);\r\n      transition: all 300ms ease-in-out;\r\n      z-index: 2;\r\n      position: relative;\r\n      margin: 10%;\r\n      max-height: 80%;\r\n      border-radius: var(--dnn-controls-radius, 5px);\r\n      box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.5);\r\n      display: block;\r\n      .close{\r\n        position: absolute;\r\n        background-color:white;\r\n        border: 2px solid white;\r\n        border-radius: 50%;\r\n        padding: 0;\r\n        margin: 0;\r\n        top: -12px;\r\n        right: -12px;\r\n        outline: none;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        &:focus, &:hover{\r\n          box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);\r\n        }\r\n        svg{\r\n          width: 24px;\r\n          height: 24px;\r\n          color: grey;\r\n        }\r\n      }\r\n    }\r\n    &.visible{\r\n      visibility: visible;\r\n      opacity: 1;\r\n      .modal{\r\n        transform: scale(1);\r\n        box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);\r\n        display: block;\r\n      }\r\n    }\r\n  }\r\n}","import { Component, Element, Host, h, Prop, Event, EventEmitter, Method, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dnn-modal',\r\n  styleUrl: 'dnn-modal.scss',\r\n  shadow: true\r\n})\r\nexport class DnnModal {\r\n  \r\n  @Element() el!: HTMLDnnModalElement;\r\n  \r\n  /**\r\n   * Pass false to remove the backdrop click auto-dismiss feature.\r\n   */\r\n  @Prop() backdropDismiss: boolean = true;\r\n\r\n  /**\r\n   * Optionally pass the aria-label text for the close button.\r\n   * Defaults to \"Close modal\" if not provided.\r\n   */\r\n  @Prop() closeText?: string = \"Close modal\";\r\n\r\n  /**\r\n   * Optionally you can pass false to not show the close button.\r\n   * If you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\n   * or provide your own dismissal logic in the modal content.\r\n   */\r\n  @Prop() showCloseButton?: boolean = true;\r\n\r\n  @State() visible: boolean = false;\r\n\r\n  /**\r\n   * Shows the modal\r\n   */\r\n  @Method()\r\n  async show() {\r\n    this.visible = true;\r\n  }\r\n\r\n  /**\r\n   * Hides the modal\r\n   */\r\n  @Method()\r\n  async hide() {\r\n    this.visible = false;\r\n  }\r\n\r\n  /**\r\n   * Fires when the modal is dismissed.\r\n   */\r\n  @Event() dismissed!: EventEmitter;\r\n\r\n  private handleDismiss(){\r\n    this.visible = false;\r\n    this.dismissed.emit();\r\n  }\r\n\r\n  private handleBackdropClick(e: MouseEvent): void {\r\n    const element = (e.target as HTMLElement);\r\n    if (element.id === \"backdrop\" && this.backdropDismiss){\r\n      this.handleDismiss();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"backdrop\"\r\n          class={this.visible ? 'overlay visible' : 'overlay'}\r\n          onClick={e => this.handleBackdropClick(e)}\r\n        >\r\n          <div class=\"modal\">\r\n            {this.showCloseButton &&\r\n              <button\r\n                class=\"close\"\r\n                aria-label={this.closeText}\r\n                onClick={() => this.handleDismiss()}\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\"/><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>\r\n              </button>\r\n            }\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dnn-modal.entry.esm.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ulDAAulD;;MCO9lD,QAAQ;EALrB;;;;;;IAYU,oBAAe,GAAY,IAAI,CAAC;;;;;IAMhC,cAAS,GAAY,aAAa,CAAC;;;;;;IAOnC,oBAAe,GAAa,IAAI,CAAC;;;;IAKH,YAAO,GAAY,KAAK,CAAC;GA0DhE;;;;EApDC,MAAM,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAOO,aAAa;IACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;GACvB;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;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,EAAE,EAAC,UAAU,EAChB,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,SAAS,EACnD,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAEzC,WAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,eAAe;MACnB,cACE,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,IAEnC,WAAK,KAAK,EAAC,4BAA4B,EAAC,MAAM,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,IAAC,YAAM,CAAC,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAE,EAAA,YAAM,CAAC,EAAC,iLAAiL,GAAE,CAAM,CACrU,EAEX,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/dnn-modal/dnn-modal.scss?tag=dnn-modal&encapsulation=shadow","./src/components/dnn-modal/dnn-modal.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --max-width: The maximum width of the module.\n  */\n  display: block;\n  .overlay{\n    background-color: rgba(0,0,0,0.5);\n    position: fixed;\n    top:0;\n    left:0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    backdrop-filter: blur(2px);\n    transition: all 300ms ease-in-out;\n    visibility: hidden;\n    opacity: 0;\n    .modal{\n      max-width: var(--max-width, 1200px);\n      background-color: white;\n      padding: 30px;\n      transform: scale(2);\n      transition: all 300ms ease-in-out;\n      z-index: 2;\n      position: relative;\n      margin: 10%;\n      max-height: 80%;\n      border-radius: var(--dnn-controls-radius, 5px);\n      box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.5);\n      display: block;\n      .close{\n        position: absolute;\n        background-color:white;\n        border: 2px solid white;\n        border-radius: 50%;\n        padding: 0;\n        margin: 0;\n        top: -12px;\n        right: -12px;\n        outline: none;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        &:focus, &:hover{\n          box-shadow: 0 0 2px 2px var(--dnn-color-primary, blue);\n        }\n        svg{\n          width: 24px;\n          height: 24px;\n          color: grey;\n        }\n      }\n    }\n    &.visible{\n      visibility: visible;\n      opacity: 1;\n      .modal{\n        transform: scale(1);\n        box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);\n        display: block;\n      }\n    }\n  }\n}","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}

package/dist/dnn/dnn-modal.system.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,i,o){function r(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,n){function s(e){try{l(o.next(e))}catch(e){n(e)}}function a(e){try{l(o["throw"](e))}catch(e){n(e)}}function l(e){e.done?i(e.value):r(e.value).then(s,a)}l((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},o,r,n,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(e){return function(t){return l([e,t])}}function l(s){if(o)throw new TypeError("Generator is already executing.");while(i)try{if(o=1,r&&(n=s[0]&2?r["return"]:s[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,s[1])).done)return n;if(r=0,n)s=[s[0]&2,n.value];switch(s[0]){case 0:case 1:n=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;r=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!n||s[1]>n[0]&&s[1]<n[3])){i.label=s[1];break}if(s[0]===6&&i.label<n[1]){i.label=n[1];n=s;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(s);break}if(n[2])i.ops.pop();i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e];r=0}finally{o=n=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./index-a3a55419.system.js"],(function(e){"use strict";var t,i,o,r,n;return{setters:[function(e){t=e.r;i=e.e;o=e.h;r=e.f;n=e.g}],execute:function(){var s=":host{display:block}:host .overlay{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";var a=e("dnn_modal",function(){function e(e){t(this,e);this.dismissed=i(this,"dismissed",7);this.backdropDismiss=true;this.closeText="Close modal";this.showCloseButton=true;this.visible=false}e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.visible=true;return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.visible=false;return[2]}))}))};e.prototype.handleDismiss=function(){this.visible=false;this.dismissed.emit()};e.prototype.handleBackdropClick=function(e){var t=e.target;if(t.id==="backdrop"&&this.backdropDismiss){this.handleDismiss()}};e.prototype.render=function(){var e=this;return o(r,null,o("div",{id:"backdrop",class:this.visible?"overlay visible":"overlay",onClick:function(t){return e.handleBackdropClick(t)}},o("div",{class:"modal"},this.showCloseButton&&o("button",{class:"close","aria-label":this.closeText,onClick:function(){return e.handleDismiss()}},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("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"}))),o("slot",null))))};Object.defineProperty(e.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());a.style=s}}}));
+var __awaiter=this&&this.__awaiter||function(e,t,i,o){function r(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,n){function s(e){try{l(o.next(e))}catch(e){n(e)}}function a(e){try{l(o["throw"](e))}catch(e){n(e)}}function l(e){e.done?i(e.value):r(e.value).then(s,a)}l((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},o,r,n,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(e){return function(t){return l([e,t])}}function l(s){if(o)throw new TypeError("Generator is already executing.");while(i)try{if(o=1,r&&(n=s[0]&2?r["return"]:s[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,s[1])).done)return n;if(r=0,n)s=[s[0]&2,n.value];switch(s[0]){case 0:case 1:n=s;break;case 4:i.label++;return{value:s[1],done:false};case 5:i.label++;r=s[1];s=[0];continue;case 7:s=i.ops.pop();i.trys.pop();continue;default:if(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(s[0]===6||s[0]===2)){i=0;continue}if(s[0]===3&&(!n||s[1]>n[0]&&s[1]<n[3])){i.label=s[1];break}if(s[0]===6&&i.label<n[1]){i.label=n[1];n=s;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(s);break}if(n[2])i.ops.pop();i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e];r=0}finally{o=n=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};System.register(["./index-c3cc3b5b.system.js"],(function(e){"use strict";var t,i,o,r,n;return{setters:[function(e){t=e.r;i=e.e;o=e.h;r=e.f;n=e.g}],execute:function(){var s=":host{display:block}:host .overlay{background-color:rgba(0, 0, 0, 0.5);position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;visibility:hidden;opacity:0}:host .overlay .modal{max-width:var(--max-width, 1200px);background-color:white;padding:30px;-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;z-index:2;position:relative;margin:10%;max-height:80%;border-radius:var(--dnn-controls-radius, 5px);-webkit-box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);box-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.5);display:block}:host .overlay .modal .close{position:absolute;background-color:white;border:2px solid white;border-radius:50%;padding:0;margin:0;top:-12px;right:-12px;outline:none;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .overlay .modal .close:focus,:host .overlay .modal .close:hover{-webkit-box-shadow:0 0 2px 2px var(--dnn-color-primary, blue);box-shadow:0 0 2px 2px var(--dnn-color-primary, blue)}:host .overlay .modal .close svg{width:24px;height:24px;color:grey}:host .overlay.visible{visibility:visible;opacity:1}:host .overlay.visible .modal{-webkit-transform:scale(1);transform:scale(1);-webkit-box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.5);display:block}";var a=e("dnn_modal",function(){function e(e){t(this,e);this.dismissed=i(this,"dismissed",7);this.backdropDismiss=true;this.closeText="Close modal";this.showCloseButton=true;this.visible=false}e.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.visible=true;return[2]}))}))};e.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.visible=false;return[2]}))}))};e.prototype.handleDismiss=function(){this.visible=false;this.dismissed.emit()};e.prototype.handleBackdropClick=function(e){var t=e.target;if(t.id==="backdrop"&&this.backdropDismiss){this.handleDismiss()}};e.prototype.render=function(){var e=this;return o(r,null,o("div",{id:"backdrop",class:this.visible?"overlay visible":"overlay",onClick:function(t){return e.handleBackdropClick(t)}},o("div",{class:"modal"},this.showCloseButton&&o("button",{class:"close","aria-label":this.closeText,onClick:function(){return e.handleDismiss()}},o("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 0 24 24",width:"24px",fill:"#000000"},o("path",{d:"M0 0h24v24H0z",fill:"none"}),o("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"}))),o("slot",null))))};Object.defineProperty(e.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());a.style=s}}}));
 //# sourceMappingURL=dnn-modal.system.entry.js.map