var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
import { u as uuidv4 } from "../chunks/chunk.dcf-utility.js?v=6.1.1";
import { D as DCFCollapsibleFieldsets, U as UNLCollapsibleFieldset } from "../chunks/chunk.unl-collapsible-fieldset.js?v=6.1.1";
class DCFImageCropper {
  static {
    __name(this, "DCFImageCropper");
  }
  uuid = uuidv4();
  cropperElement = null;
  cropperCanvas = null;
  cropperCanvasContext = null;
  imageSource = null;
  imageToBeCropped = null;
  statusElement = null;
  guideFieldsetElement = null;
  gridGuidesCheckbox = null;
  gridGuides = !1;
  centerGuidesCheckbox = null;
  centerGuides = !1;
  cropperScaleRange = null;
  croppedX = -1;
  croppedY = -1;
  croppedScale = 100;
  minCroppedScale = 25;
  cropperMaxWidth = -1;
  croppedRatio = 1;
  canvasSize = 300;
  croppedImageOutputWidth = 1e3;
  imagePreviews = [];
  mouseState = {
    down: !1,
    moved: !1,
    downX: -1,
    croppedX: -1,
    downY: -1,
    croppedY: -1
  };
  constructor(imageCropper, options = {}) {
    if (this.cropperElement = imageCropper, (this.cropperElement.getAttribute("id") === "" || this.cropperElement.getAttribute("id") === null) && this.cropperElement.setAttribute("id", this.uuid.concat("-image-cropper-container")), this.imageSource = document.getElementById(this.cropperElement.dataset.imageCropperInput), this.imageSource === null)
      throw new Error("Missing image cropper file input");
    switch (this.canvasSize = parseInt(this.cropperElement.dataset.maxCanvasWidth, 10), (this.canvasSize <= 20 || isNaN(this.canvasSize)) && (this.canvasSize = 300), this.croppedImageOutputWidth = parseInt(this.cropperElement.dataset.croppedImageOutputWidth, 10), (this.croppedImageOutputWidth <= 20 || isNaN(this.croppedImageOutputWidth)) && (this.croppedImageOutputWidth = 1e3), this.cropperElement.dataset.ratio) {
      case "1x1":
        this.croppedRatio = 1;
        break;
      case "16x9":
        this.croppedRatio = 16 / 9;
        break;
      case "9x16":
        this.croppedRatio = 9 / 16;
        break;
      case "3x4":
        this.croppedRatio = 3 / 4;
        break;
      case "4x3":
        this.croppedRatio = 4 / 3;
        break;
      default:
        this.croppedRatio = 1;
    }
    this.#setInnerHTMLCropper(), this.statusElement = document.getElementById(this.uuid.concat("-image-cropper-status")), this.imagePreviews = document.querySelectorAll(`.dcf-image-cropper-preview[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`), this.#setInnerHTMLPreviews(), this.cropperCanvas = document.getElementById(this.uuid.concat("-image-cropper-canvas")), this.cropperCanvasContext = this.cropperCanvas.getContext("2d"), this.cropperScaleRange = document.getElementById(this.uuid.concat("-image-cropper-scale")), this.guideFieldsetElement = document.getElementById(this.uuid.concat("-image-cropper-guides")), this.#setUpEventListeners(), options.collapsibleFieldset === void 0 ? new DCFCollapsibleFieldsets(this.guideFieldsetElement, options) : new options.collapsibleFieldset(this.guideFieldsetElement, options), this.#changeState(), this.cropperElement.classList.add("dcf-image-cropper-initialized"), this.cropperElement.removeAttribute("hidden"), this.imagePreviews.forEach((previewElement) => {
      previewElement.removeAttribute("hidden");
    }), this.cropperElement.dispatchEvent(new CustomEvent(DCFImageCropper.events("imageCropperReady"), {
      detail: {
        classInstance: this
      }
    }));
  }
  // The names of the events to be used easily
  static events(name) {
    const events = {
      imageCropperReady: "imageCropperReady"
    };
    return Object.freeze(events), name in events ? events[name] : void 0;
  }
  /**
   * Sets the inner HTML to the cropped element
   * @returns { Void }
   */
  #setInnerHTMLCropper() {
    this.cropperElement.innerHTML = `
<div class="dcf-image-cropper-no-image">
    <p>No image selected</p>
</div>
<section
    class="dcf-image-cropper-yes-image dcf-d-none"
    aria-labelledby="${this.uuid.concat("-image-cropper-title")}"
>
    <p id="${this.uuid.concat("-image-cropper-title")}" class="dcf-sr-only">Image Cropper Tool</p>
    <div class="dcf-d-flex dcf-flex-row-rev dcf-flex-wrap dcf-jc-center dcf-ai-center dcf-gap-3 dcf-mb-3">
        <div class="dcf-d-flex dcf-flex-col dcf-jc-center dcf-ai-center dcf-mb-3">
            <p>Preview</p>
            <div
                class="dcf-image-cropper-preview"
                data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"
                data-max-canvas-width="${this.canvasSize / 3}"
                hidden
            ></div>
        </div>
        <canvas
            id="${this.uuid.concat("-image-cropper-canvas")}"
            class="dcf-b-grey dcf-b-2 dcf-b-solid"
            height="225"
            width="300"
            tabindex="0"
            aria-label="Image Crop Area Display"
            role="img"
            aria-describedby="${this.uuid.concat("-image-cropper-instructions")}"
        ></canvas>
    </div>
    <div id="${this.uuid.concat("-image-cropper-status")}" role="status" aria-live="polite" class="dcf-sr-only"></div>

    <div class="dcf-input-group dcf-col-gap-vw dcf-mb-3">
        <label for="${this.uuid.concat("-image-cropper-scale")}">Selection size: </label>
        <input
            id="${this.uuid.concat("-image-cropper-scale")}"
            type="range" min="${this.minCroppedScale}"
            max="100"
            value="100"
            aria-controls="${this.uuid.concat("-image-cropper-canvas")}">
    </div>

    <fieldset class="dcf-collapsible-fieldset" data-start-expanded="false" id="${this.uuid.concat("-image-cropper-guides")}">
        <legend>Guides</legend>
        <div class="dcf-d-flex dcf-flex-row dcf-gap-3">
            <div class="dcf-input-checkbox">
                <input
                    id="${this.uuid.concat("-image-cropper-grid-guides")}"
                    type="checkbox"
                    aria-controls="${this.uuid.concat("-image-cropper-canvas")}"
                >
                <label for="${this.uuid.concat("-image-cropper-grid-guides")}">Grid guides </label>
            </div>
            <div class="dcf-input-checkbox">
                <input
                    id="${this.uuid.concat("-image-cropper-center-guides")}"
                    type="checkbox"
                    aria-controls="${this.uuid.concat("-image-cropper-canvas")}"
                >
                <label for="${this.uuid.concat("-image-cropper-center-guides")}">Center guides </label>
            </div>
        </div>
    </fieldset>

    <p id="${this.uuid.concat("-image-cropper-instructions")}" class="dcf-txt-sm dcf-mt-3">
        To select a portion of your image, click and drag the cropped area to position
        it, or use the arrow keys for precise adjustments. Modify the size of the cropped area
        using the slider or fine-tune with the plus and minus buttons for a personalized fit.
        Toggle on the guides to help align your cropped area perfectly.
    </p>
</section>`;
  }
  /**
   * Sets the inner HTML for all the preview elements
   * @returns { Void }
   */
  #setInnerHTMLPreviews() {
    this.imagePreviews.forEach((previewElement, index) => {
      previewElement.innerHTML = `
<div class="dcf-image-cropper-yes-image dcf-d-none">
    <canvas
        id="${this.uuid.concat(`-image-cropper-preview-canvas-${index}`)}"
        class="dcf-b-grey dcf-b-2 dcf-b-solid"
        height="225"
        width="300"
        aria-label="Cropped Image Preview"
        role="img"></canvas>
</div>
`;
    });
  }
  /**
   * Sets up event listeners for the various interactive elements
   * @returns { Void }
   */
  #setUpEventListeners() {
    this.imageSource.addEventListener("change", this.#changeState.bind(this)), this.cropperScaleRange.addEventListener("input", () => {
      this.updateScale();
    }), this.guideFieldsetElement.addEventListener("collapsibleFieldsetReady", () => {
      this.gridGuidesCheckbox = document.getElementById(this.uuid.concat("-image-cropper-grid-guides")), this.gridGuidesCheckbox.addEventListener("change", () => {
        this.gridGuides = this.gridGuidesCheckbox.checked, this.#draw();
      }), this.centerGuidesCheckbox = document.getElementById(this.uuid.concat("-image-cropper-center-guides")), this.centerGuidesCheckbox.addEventListener("change", () => {
        this.centerGuides = this.centerGuidesCheckbox.checked, this.#draw();
      });
    }), this.cropperCanvas.addEventListener("mousedown", (event) => {
      event.preventDefault(), this.mouseState.down = !0, this.mouseState.moved = !1, this.mouseState.downX = event.clientX, this.mouseState.croppedX = this.croppedX, this.mouseState.downY = event.clientY, this.mouseState.croppedY = this.croppedY;
    }), this.cropperCanvas.addEventListener("mousemove", (event) => {
      if (!this.mouseState.down)
        return;
      event.preventDefault(), this.mouseState.moved = !0;
      const deltaX = event.clientX - this.mouseState.downX, deltaY = event.clientY - this.mouseState.downY;
      this.croppedX = this.mouseState.croppedX + deltaX, this.croppedY = this.mouseState.croppedY + deltaY, this.#checkIfBoxIsInBounds(), this.#draw(), this.#syncInputs(), this.mouseState.downX = event.clientX, this.mouseState.croppedX = this.croppedX, this.mouseState.downY = event.clientY, this.mouseState.croppedY = this.croppedY;
    }), this.cropperCanvas.addEventListener("mouseup", (event) => {
      if (this.mouseState.down) {
        if (event.preventDefault(), !this.mouseState.moved) {
          const boundingRect = this.cropperCanvas.getBoundingClientRect();
          this.croppedX = this.mouseState.downX - boundingRect.x, this.croppedY = this.mouseState.downY - boundingRect.y, this.#checkIfBoxIsInBounds(), this.#draw(), this.#syncInputs();
        }
        this.mouseState.down = !1, this.mouseState.moved = !1, this.mouseState.downX = -1, this.mouseState.croppedX = -1, this.mouseState.downY = -1, this.mouseState.croppedY = -1;
      }
    }), this.cropperCanvas.addEventListener("mouseleave", () => {
      this.mouseState.down && (this.mouseState.down = !1, this.mouseState.moved = !1, this.mouseState.downX = -1, this.mouseState.croppedX = -1, this.mouseState.downY = -1, this.mouseState.croppedY = -1);
    }), this.cropperElement.addEventListener("keydown", (event) => {
      switch (event.key) {
        case "ArrowRight":
          this.moveRight(), event.preventDefault();
          break;
        case "ArrowLeft":
          this.moveLeft(), event.preventDefault();
          break;
        case "ArrowDown":
          this.moveDown(), event.preventDefault();
          break;
        case "ArrowUp":
          this.moveUp(), event.preventDefault();
          break;
        case "+":
        case "=":
          this.grow(), event.preventDefault();
          break;
        case "-":
        case "_":
          this.shrink(), event.preventDefault();
          break;
      }
    });
  }
  /**
   * When the image source changes this will update the component's state
   * @returns { Void }
   */
  async #changeState() {
    if (this.imageSource.value === "") {
      this.cropperElement.querySelector(".dcf-image-cropper-yes-image").classList.add("dcf-d-none"), this.cropperElement.querySelector(".dcf-image-cropper-no-image").classList.remove("dcf-d-none"), this.imagePreviews.forEach((previewElement) => {
        previewElement.querySelector(".dcf-image-cropper-yes-image").classList.add("dcf-d-none");
      }), this.#clearInputs();
      return;
    }
    this.imageToBeCropped = await this.#getSrcImage(), this.#setUpCanvas(), this.croppedX = 0, this.croppedY = 0, this.croppedScale = 100, this.#draw(), this.cropperElement.querySelector(".dcf-image-cropper-yes-image").classList.remove("dcf-d-none"), this.cropperElement.querySelector(".dcf-image-cropper-no-image").classList.add("dcf-d-none"), this.imagePreviews.forEach((previewElement) => {
      previewElement.querySelector(".dcf-image-cropper-yes-image").classList.remove("dcf-d-none");
    }), this.#syncInputs();
  }
  /**
   * Update the scale value based on the input range
   * - This also re-draws canvases and syncs inputs
   * @returns { Void }
   */
  updateScale() {
    this.croppedScale = parseInt(this.cropperScaleRange.value, 10), this.#checkIfBoxIsInBounds(), this.#draw(), this.#syncInputs();
  }
  /**
   * Move the selected area up by inputted amount
   * - This also re-draws canvases and syncs inputs
   * @returns { Void }
   */
  moveUp(delta = 5) {
    this.croppedY -= delta, this.#checkIfBoxIsInBounds(), this.#draw(), this.#syncInputs();
  }
  /**
   * Move the selected area down by inputted amount
   * - This also re-draws canvases and syncs inputs
   * @returns { Void }
   */
  moveDown(delta = 5) {
    this.croppedY += delta, this.#checkIfBoxIsInBounds(), this.#draw(), this.#syncInputs();
  }
  /**
   * Move the selected area left by inputted amount
   * - This also re-draws canvases and syncs inputs
   * @returns { Void }
   */
  moveLeft(delta = 5) {
    this.croppedX -= delta, this.#checkIfBoxIsInBounds(), this.#draw(), this.#syncInputs();
  }
  /**
   * Move the selected area right by inputted amount
   * - This also re-draws canvases and syncs inputs
   * @returns { Void }
   */
  moveRight(delta = 5) {
    this.croppedX += delta, this.#checkIfBoxIsInBounds(), this.#draw(), this.#syncInputs();
  }
  /**
   * Grows the selected area by inputted amount
   * - This also re-draws canvases and syncs inputs
   * @returns { Void }
   */
  grow(delta = 5) {
    this.croppedScale += delta, this.#checkIfBoxIsInBounds(), this.#draw(), this.#syncInputs();
  }
  /**
   * Shrinks the selected area by inputted amount
   * - This also re-draws canvases and syncs inputs
   * @returns { Void }
   */
  shrink(delta = 5) {
    this.croppedScale -= delta, this.#checkIfBoxIsInBounds(), this.#draw(), this.#syncInputs();
  }
  /**
   * Checks and fixes position of the selected area to avoid it going outside the image
   * @returns { Void }
   */
  #checkIfBoxIsInBounds() {
    this.croppedScale < this.minCroppedScale && (this.croppedScale = this.minCroppedScale), this.croppedScale > 100 && (this.croppedScale = 100);
    const croppedWidth = this.cropperMaxWidth * (this.croppedScale / 100), croppedHeight = this.cropperMaxWidth * (this.croppedScale / 100) / this.croppedRatio;
    this.croppedX > this.cropperCanvas.width - croppedWidth && (this.croppedX = this.cropperCanvas.width - croppedWidth), this.croppedY > this.cropperCanvas.height - croppedHeight && (this.croppedY = this.cropperCanvas.height - croppedHeight), this.croppedY < 0 && (this.croppedY = 0), this.croppedX < 0 && (this.croppedX = 0);
  }
  /**
   * Draw the image, selected area, and preview images on their canvases
   * @returns { Void }
   */
  #draw() {
    this.cropperCanvasContext.drawImage(
      this.imageToBeCropped,
      0,
      0,
      this.cropperCanvas.width,
      this.cropperCanvas.height
    ), this.cropperCanvasContext.strokeStyle = "black", this.cropperCanvasContext.lineWidth = 4, this.#drawLines(), this.cropperCanvasContext.strokeStyle = "white", this.cropperCanvasContext.lineWidth = 2, this.#drawLines();
    const croppedWidth = this.cropperMaxWidth * (this.croppedScale / 100), croppedHeight = this.cropperMaxWidth * (this.croppedScale / 100) / this.croppedRatio;
    this.imagePreviews.forEach((previewElement) => {
      const previewCanvas = previewElement.querySelector("canvas"), previewContext = previewCanvas.getContext("2d");
      let previewSize = parseInt(previewElement.dataset.maxCanvasWidth, 10);
      previewSize <= 20 && (previewSize = this.canvasSize), this.croppedRatio > 1 ? (previewCanvas.width = previewSize, previewCanvas.height = previewSize / this.croppedRatio) : (previewCanvas.width = previewSize / (1 / this.croppedRatio), previewCanvas.height = previewSize);
      const scaleX = this.imageToBeCropped.width / this.cropperCanvas.width, scaleY = this.imageToBeCropped.height / this.cropperCanvas.height, scaledX = this.croppedX * scaleX, scaledY = this.croppedY * scaleY, scaledWidth = croppedWidth * scaleX, scaledHeight = croppedHeight * scaleY;
      previewContext.drawImage(
        this.imageToBeCropped,
        scaledX,
        scaledY,
        scaledWidth,
        scaledHeight,
        // source rect (in original image)
        0,
        0,
        previewCanvas.width,
        previewCanvas.height
        // destination rect (fit to preview canvas)
      );
    });
  }
  /**
   * Inner function for #draw which only will draw the lines
   * This logic is used multiple times for the black and white lines
   */
  #drawLines() {
    const croppedWidth = this.cropperMaxWidth * (this.croppedScale / 100), croppedHeight = this.cropperMaxWidth * (this.croppedScale / 100) / this.croppedRatio;
    this.centerGuides && (this.cropperCanvasContext.beginPath(), this.cropperCanvasContext.moveTo(this.croppedX, this.croppedY), this.cropperCanvasContext.lineTo(this.croppedX + croppedWidth, this.croppedY + croppedHeight), this.cropperCanvasContext.moveTo(this.croppedX, this.croppedY + croppedHeight), this.cropperCanvasContext.lineTo(this.croppedX + croppedWidth, this.croppedY), this.cropperCanvasContext.stroke()), this.gridGuides && (this.cropperCanvasContext.beginPath(), this.cropperCanvasContext.moveTo(this.croppedX + croppedWidth / 3, this.croppedY), this.cropperCanvasContext.lineTo(this.croppedX + croppedWidth / 3, this.croppedY + croppedHeight), this.cropperCanvasContext.moveTo(this.croppedX + 2 * croppedWidth / 3, this.croppedY), this.cropperCanvasContext.lineTo(this.croppedX + 2 * croppedWidth / 3, this.croppedY + croppedHeight), this.cropperCanvasContext.moveTo(this.croppedX, this.croppedY + croppedHeight / 3), this.cropperCanvasContext.lineTo(this.croppedX + croppedWidth, this.croppedY + croppedHeight / 3), this.cropperCanvasContext.moveTo(this.croppedX, this.croppedY + 2 * croppedHeight / 3), this.cropperCanvasContext.lineTo(this.croppedX + croppedWidth, this.croppedY + 2 * croppedHeight / 3), this.cropperCanvasContext.stroke()), this.cropperCanvasContext.strokeRect(this.croppedX, this.croppedY, croppedWidth, croppedHeight);
  }
  /**
   * Resets all inputs and status to default state where there is no image
   * @returns { Void }
   */
  #clearInputs() {
    this.cropperScaleRange.value = "100", this.statusElement.innerText = "", document.querySelectorAll(`.dcf-image-cropper-x[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = "-1";
    }), document.querySelectorAll(`.dcf-image-cropper-x2[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = "-1";
    }), document.querySelectorAll(`.dcf-image-cropper-y[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = "-1";
    }), document.querySelectorAll(`.dcf-image-cropper-y2[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = "-1";
    }), document.querySelectorAll(`.dcf-image-cropper-width[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = "-1";
    }), document.querySelectorAll(`.dcf-image-cropper-height[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = "-1";
    }), document.querySelectorAll(`.dcf-image-cropper-ratio[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = this.croppedRatio.toFixed(2);
    }), document.querySelectorAll(`.dcf-image-cropper-ratio-text[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      switch (this.croppedRatio.toFixed(2)) {
        case (3 / 4).toFixed(2):
          inputElement.value = "3x4";
          break;
        case (4 / 3).toFixed(2):
          inputElement.value = "4x3";
          break;
        case (9 / 16).toFixed(2):
          inputElement.value = "9x16";
          break;
        case (16 / 9).toFixed(2):
          inputElement.value = "16x9";
          break;
        default:
          inputElement.value = "1x1";
      }
    }), document.querySelectorAll(`.dcf-image-cropper-cropped-image[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = "";
    });
  }
  /**
   * Updates all inputs and status to match the current state of the cropped area
   * @returns { Void }
   */
  #syncInputs() {
    this.cropperScaleRange.value = this.croppedScale;
    const scaleX = this.imageToBeCropped.width / this.cropperCanvas.width, scaleY = this.imageToBeCropped.height / this.cropperCanvas.height, croppedWidth = this.cropperMaxWidth * (this.croppedScale / 100), croppedHeight = this.cropperMaxWidth * (this.croppedScale / 100) / this.croppedRatio, xPos = (scaleX * this.croppedX).toFixed(2), yPos = (scaleY * this.croppedY).toFixed(2), width = (scaleX * croppedWidth).toFixed(2);
    let aspectRatio = "1x1";
    switch (this.croppedRatio.toFixed(2)) {
      case (3 / 4).toFixed(2):
        aspectRatio = "3x4";
        break;
      case (4 / 3).toFixed(2):
        aspectRatio = "4x3";
        break;
      case (9 / 16).toFixed(2):
        aspectRatio = "9x16";
        break;
      case (16 / 9).toFixed(2):
        aspectRatio = "16x9";
        break;
      default:
        aspectRatio = "1x1";
    }
    this.statusElement.innerText = `Cropped area moved to ${xPos}, ${yPos} with a width of ${width} in an aspect ratio of ${aspectRatio}.`, document.querySelectorAll(`.dcf-image-cropper-x[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = xPos;
    }), document.querySelectorAll(`.dcf-image-cropper-x2[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = (scaleX * (this.croppedX + croppedWidth)).toFixed(2);
    }), document.querySelectorAll(`.dcf-image-cropper-y[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = yPos;
    }), document.querySelectorAll(`.dcf-image-cropper-y2[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = (scaleY * (this.croppedY + croppedHeight)).toFixed(2);
    }), document.querySelectorAll(`.dcf-image-cropper-width[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = width;
    }), document.querySelectorAll(`.dcf-image-cropper-height[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = (scaleY * croppedHeight).toFixed(2);
    }), document.querySelectorAll(`.dcf-image-cropper-ratio[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = this.croppedRatio.toFixed(2);
    }), document.querySelectorAll(`.dcf-image-cropper-ratio-text[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`).forEach((inputElement) => {
      inputElement.value = aspectRatio;
    });
    const croppedImageInputs = document.querySelectorAll(`.dcf-image-cropper-cropped-image[data-image-cropper-input="${this.cropperElement.dataset.imageCropperInput}"]`);
    croppedImageInputs.length > 0 && this.#getCroppedImageSrc().then((croppedImageFile) => {
      croppedImageInputs.forEach((inputElement) => {
        const dataTransferObj = new DataTransfer();
        dataTransferObj.items.add(croppedImageFile), inputElement.files = dataTransferObj.files;
      });
    });
  }
  /**
   * Sets up the cropper canvas to match the aspect ratio of the of the image to be cropped
   * @returns { Void }
   */
  #setUpCanvas() {
    const aspectRatio = this.imageToBeCropped.width / this.imageToBeCropped.height;
    this.imageToBeCropped.width > this.imageToBeCropped.height ? (this.cropperCanvas.width = this.canvasSize, this.cropperCanvas.height = this.canvasSize / aspectRatio) : (this.cropperCanvas.width = this.canvasSize / (1 / aspectRatio), this.cropperCanvas.height = this.canvasSize), this.cropperCanvas.width / this.croppedRatio > this.cropperCanvas.height ? this.cropperMaxWidth = this.cropperCanvas.height / (1 / this.croppedRatio) : this.cropperMaxWidth = this.cropperCanvas.width;
  }
  /**
   * Gets the image file for the inputted image
   * @returns { Promise<HTMLImageElement> }
   */
  #getSrcImage() {
    return new Promise((resolve, reject) => {
      this.imageSource.files[0] === void 0 && reject();
      const imageFile = this.imageSource.files[0], imageFileURL = URL.createObjectURL(imageFile), imageObj = new Image();
      imageObj.onload = () => {
        URL.revokeObjectURL(imageFileURL), resolve(imageObj);
      }, imageObj.src = imageFileURL;
    });
  }
  /**
   * Gets the cropped image file based on the inputted image and the selected area
   * @async
   * @returns { Promise<File> }
   */
  async #getCroppedImageSrc() {
    const hiddenCanvas = document.createElement("canvas"), hiddenCanvasContext = hiddenCanvas.getContext("2d");
    hiddenCanvas.width = this.croppedImageOutputWidth, hiddenCanvas.height = this.croppedImageOutputWidth / this.croppedRatio;
    const croppedWidth = this.cropperMaxWidth * (this.croppedScale / 100), croppedHeight = this.cropperMaxWidth * (this.croppedScale / 100) / this.croppedRatio, scaleX = this.imageToBeCropped.width / this.cropperCanvas.width, scaleY = this.imageToBeCropped.height / this.cropperCanvas.height, scaledX = this.croppedX * scaleX, scaledY = this.croppedY * scaleY, scaledWidth = croppedWidth * scaleX, scaledHeight = croppedHeight * scaleY;
    hiddenCanvasContext.drawImage(
      this.imageToBeCropped,
      scaledX,
      scaledY,
      scaledWidth,
      scaledHeight,
      // source rect (in original image)
      0,
      0,
      hiddenCanvas.width,
      hiddenCanvas.height
      // destination rect (fit to preview canvas)
    );
    const blob = await new Promise((resolve) => hiddenCanvas.toBlob(resolve, this.imageToBeCropped.type));
    return new File([blob], "cropped_image", { type: this.imageToBeCropped.type });
  }
}
class UNLImageCropper extends DCFImageCropper {
  static {
    __name(this, "UNLImageCropper");
  }
  constructor(imageCropper, options = {}) {
    "collapsibleFieldset" in options || (options.collapsibleFieldset = UNLCollapsibleFieldset), super(imageCropper, options), window.UNL = window.UNL || {}, window.UNL.classes = window.UNL.classes || {}, window.UNL.classes[this.cropperElement.getAttribute("id")] = this, this.cropperElement.dispatchEvent(new Event("UNLClassReady"));
  }
}
export {
  UNLImageCropper as default
};
//# sourceMappingURL=component.image-cropper.js.map
