@orangelogic/design-system 2.108.0 → 2.110.0

package/library/components/cropper.js

@@ -1,12 +1,963 @@
-import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.CRO4Odto.js";
-import "../chunks/asset-link-format.B0c92pSs.js";
-import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/lit-element.jLBm65_O.js";
-import "../chunks/state.CSDxrqLd.js";
-import "../chunks/query.BBf1UFkC.js";
-import "../chunks/when.Dr1es41R.js";
-import { C as l } from "../chunks/cropper.CMfBGsNv.js";
+import { n as S, C as be } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as ye } from "../chunks/component.styles.CRO4Odto.js";
+import { U as N } from "../chunks/asset-link-format.B0c92pSs.js";
+import { c as Re } from "../chunks/custom-element.L4WJXn1j.js";
+import { i as _e, x as te } from "../chunks/lit-element.jLBm65_O.js";
+import { r as ve } from "../chunks/state.CSDxrqLd.js";
+import { e as De } from "../chunks/query.BBf1UFkC.js";
+import { n as ae } from "../chunks/when.Dr1es41R.js";
+import { r as w, j as f, w as Me, R as ke, a as ze } from "../chunks/jsx-runtime.CTpPVMxj.js";
+import { c as He, r as je, a as Se } from "../chunks/image.9qwbjGNb.js";
+import { r as $e } from "../chunks/number.B4PQLJIg.js";
+import { d as se } from "../chunks/debounce.C_J-9zJi.js";
+const Ie = _e`:host{--rc-drag-handle-size:12px;--rc-drag-handle-mobile-size:24px;--rc-drag-handle-bg-colour:#0003;--rc-drag-bar-size:6px;--rc-border-color:#ffffffb3;--rc-focus-color:#08f;width:100%;height:100%;display:block;position:relative}.cropper{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;container-type:size}.loading-container{z-index:1000;background-color:#00000080;width:100%;height:100%;position:absolute;top:0;left:0}.loading-container .loading{width:100%;height:100%;position:absolute}.loading-container .loading__skeleton{--border-radius:0;width:100%;height:100%}.loading-container .loading__spinner{--track-width:.2rem;font-size:var(--cx-font-size-3x-large);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cropper--portrait .cropper__image{max-width:100cqw;max-height:100cqh}.cropper__image{width:auto;max-width:100%;height:auto;max-height:100%;display:block}.cropper__image--loading{opacity:0}@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}.ReactCrop{cursor:crosshair;isolation:isolate;max-width:100%;display:inline-block;position:relative}.cropper--multiple .ReactCrop:before{content:"";z-index:-1;background:var(--cx-color-neutral-300);border-radius:2px;position:absolute;inset:0;transform:translate(-8px,-8px)}.ReactCrop *,.ReactCrop :before,.ReactCrop :after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--loading,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{max-height:inherit;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{width:auto;max-width:100%;height:auto;max-height:100%;display:block}.ReactCrop:not(.ReactCrop--disabled):not(.ReactCrop--loading) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled):not(.ReactCrop--loading) .ReactCrop__child-wrapper>video,.ReactCrop:not(.ReactCrop--disabled):not(.ReactCrop--loading) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{pointer-events:none;width:calc(100% + .5px);height:calc(100% + .5px);position:absolute;inset:0}.ReactCrop__crop-selection{cursor:move;position:absolute;top:0;left:0;transform:translateZ(0)}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit;display:none}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";border:1px solid var(--rc-border-color);opacity:.3;position:absolute;inset:-1px}.ReactCrop--no-animate .ReactCrop__crop-selection,.ReactCrop--loading .ReactCrop__crop-selection{outline:1px dashed #fff}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection,.ReactCrop--loading .ReactCrop__crop-selection){color:#fff;background-image:linear-gradient(90deg,#fff 50%,#444 50%),linear-gradient(90deg,#fff 50%,#444 50%),linear-gradient(#fff 50%,#444 50%),linear-gradient(#fff 50%,#444 50%);background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:10px 1px,10px 1px,1px 10px,1px 10px;animation:1s linear infinite marching-ants}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--disabled .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";background-color:#fff6;display:block;position:absolute}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6667%}.ReactCrop__drag-handle{width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color);position:absolute}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{cursor:nw-resize;top:0;left:0;transform:translate(-50%,-50%)}.ReactCrop .ord-n{cursor:n-resize;top:0;left:50%;transform:translate(-50%,-50%)}.ReactCrop .ord-ne{cursor:ne-resize;top:0;right:0;transform:translate(50%,-50%)}.ReactCrop .ord-e{cursor:e-resize;top:50%;right:0;transform:translate(50%,-50%)}.ReactCrop .ord-se{cursor:se-resize;bottom:0;right:0;transform:translate(50%,50%)}.ReactCrop .ord-s{cursor:s-resize;bottom:0;left:50%;transform:translate(-50%,50%)}.ReactCrop .ord-sw{cursor:sw-resize;bottom:0;left:0;transform:translate(-50%,50%)}.ReactCrop .ord-w{cursor:w-resize;top:50%;left:0;transform:translate(-50%,-50%)}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{width:100%;height:var(--rc-drag-bar-size);top:0;left:0;transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{width:var(--rc-drag-bar-size);height:100%;top:0;right:0;transform:translate(50%)}.ReactCrop__drag-bar.ord-s{width:100%;height:var(--rc-drag-bar-size);bottom:0;left:0;transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{width:var(--rc-drag-bar-size);height:100%;top:0;left:0;transform:translate(-50%)}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media (pointer:coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}`, q = {
+  height: 0,
+  unit: "px",
+  width: 0,
+  x: 0,
+  y: 0
+}, W = (h, e, t) => Math.min(Math.max(h, e), t), Pe = (...h) => h.filter((e) => e && typeof e == "string").join(" "), he = (h, e) => h === e || h.width === e.width && h.height === e.height && h.x === e.x && h.y === e.y && h.unit === e.unit;
+function Ye(h, e, t, r) {
+  const i = j(h, t, r);
+  return h.width && (i.height = i.width / e), h.height && (i.width = i.height * e), i.y + i.height > r && (i.height = r - i.y, i.width = i.height * e), i.x + i.width > t && (i.width = t - i.x, i.height = i.width / e), h.unit === "%" ? P(i, t, r) : i;
+}
+function Le(h, e, t) {
+  const r = j(h, e, t);
+  return r.x = (e - r.width) / 2, r.y = (t - r.height) / 2, h.unit === "%" ? P(r, e, t) : r;
+}
+function P(h, e, t) {
+  return h.unit === "%" ? { ...q, ...h, unit: "%" } : {
+    height: h.height ? h.height / t * 100 : 0,
+    unit: "%",
+    width: h.width ? h.width / e * 100 : 0,
+    x: h.x ? h.x / e * 100 : 0,
+    y: h.y ? h.y / t * 100 : 0
+  };
+}
+function j(h, e, t) {
+  return h.unit ? h.unit === "px" ? { ...q, ...h, unit: "px" } : {
+    height: h.height ? h.height * t / 100 : 0,
+    unit: "px",
+    width: h.width ? h.width * e / 100 : 0,
+    x: h.x ? h.x * e / 100 : 0,
+    y: h.y ? h.y * t / 100 : 0
+  } : { ...q, ...h, unit: "px" };
+}
+function ce(h, e, t, r, i, s = 0, a = 0, l = r, c = i) {
+  const o = { ...h };
+  let d = Math.min(s, r), p = Math.min(a, i), g = Math.min(l, r), u = Math.min(c, i);
+  e && (e > 1 ? (d = a ? a * e : d, p = d / e, g = l * e) : (p = s ? s / e : p, d = p * e, u = c / e)), o.y < 0 && (o.height = Math.max(
+    o.height + o.y,
+    p
+  ), o.y = 0), o.x < 0 && (o.width = Math.max(
+    o.width + o.x,
+    d
+  ), o.x = 0);
+  const n = r - (o.x + o.width);
+  n < 0 && (o.x = Math.min(o.x, r - d), o.width += n);
+  const x = i - (o.y + o.height);
+  if (x < 0 && (o.y = Math.min(o.y, i - p), o.height += x), o.width < d && ((t === "sw" || t == "nw") && (o.x -= d - o.width), o.width = d), o.height < p && ((t === "nw" || t == "ne") && (o.y -= p - o.height), o.height = p), o.width > g && ((t === "sw" || t == "nw") && (o.x -= g - o.width), o.width = g), o.height > u && ((t === "nw" || t == "ne") && (o.y -= u - o.height), o.height = u), e) {
+    const b = o.width / o.height;
+    if (b < e) {
+      const v = Math.max(o.width / e, p);
+      (t === "nw" || t == "ne") && (o.y -= v - o.height), o.height = v;
+    } else if (b > e) {
+      const v = Math.max(o.height * e, d);
+      (t === "sw" || t == "nw") && (o.x -= v - o.width), o.width = v;
+    }
+  }
+  return o;
+}
+function Xe(h, e, t, r) {
+  const i = { ...h };
+  return e === "ArrowLeft" ? r === "nw" ? (i.x -= t, i.y -= t, i.width += t, i.height += t) : r === "w" ? (i.x -= t, i.width += t) : r === "sw" ? (i.x -= t, i.width += t, i.height += t) : r === "ne" ? (i.y += t, i.width -= t, i.height -= t) : r === "e" ? i.width -= t : r === "se" && (i.width -= t, i.height -= t) : e === "ArrowRight" && (r === "nw" ? (i.x += t, i.y += t, i.width -= t, i.height -= t) : r === "w" ? (i.x += t, i.width -= t) : r === "sw" ? (i.x += t, i.width -= t, i.height -= t) : r === "ne" ? (i.y -= t, i.width += t, i.height += t) : r === "e" ? i.width += t : r === "se" && (i.width += t, i.height += t)), e === "ArrowUp" ? r === "nw" ? (i.x -= t, i.y -= t, i.width += t, i.height += t) : r === "n" ? (i.y -= t, i.height += t) : r === "ne" ? (i.y -= t, i.width += t, i.height += t) : r === "sw" ? (i.x += t, i.width -= t, i.height -= t) : r === "s" ? i.height -= t : r === "se" && (i.width -= t, i.height -= t) : e === "ArrowDown" && (r === "nw" ? (i.x += t, i.y += t, i.width -= t, i.height -= t) : r === "n" ? (i.y += t, i.height -= t) : r === "ne" ? (i.y += t, i.width -= t, i.height -= t) : r === "sw" ? (i.x -= t, i.width += t, i.height += t) : r === "s" ? i.height += t : r === "se" && (i.width += t, i.height += t)), i;
+}
+const A = { capture: !0, passive: !1 };
+let Ee = 0;
+const _ = class _ extends w.PureComponent {
+  constructor() {
+    super(...arguments), this.docMoveBound = !1, this.mouseDownOnCrop = !1, this.dragStarted = !1, this.evData = {
+      clientX: 0,
+      clientY: 0,
+      isResize: !0,
+      startClientX: 0,
+      startClientY: 0,
+      startCropHeight: 0,
+      startCropWidth: 0,
+      startCropX: 0,
+      startCropY: 0
+    }, this.componentRef = w.createRef(), this.mediaRef = w.createRef(), this.initChangeCalled = !1, this.instanceId = `rc-${Ee++}`, this.state = {
+      cropIsActive: !1,
+      newCropIsBeingDrawn: !1
+    }, this.onCropPointerDown = (e) => {
+      const { crop: t, disabled: r, loading: i } = this.props, s = this.getBox();
+      if (!t)
+        return;
+      const a = j(t, s.width, s.height);
+      if (r || i)
+        return;
+      e.cancelable && e.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({
+        preventScroll: !0
+      });
+      const l = e.target.dataset.ord, c = !!l;
+      let o = e.clientX, d = e.clientY, p = a.x, g = a.y;
+      if (l) {
+        const u = e.clientX - s.x, n = e.clientY - s.y;
+        let x = 0, b = 0;
+        l === "ne" || l == "e" ? (x = u - (a.x + a.width), b = n - a.y, p = a.x, g = a.y + a.height) : l === "se" || l === "s" ? (x = u - (a.x + a.width), b = n - (a.y + a.height), p = a.x, g = a.y) : l === "sw" || l == "w" ? (x = u - a.x, b = n - (a.y + a.height), p = a.x + a.width, g = a.y) : (l === "nw" || l == "n") && (x = u - a.x, b = n - a.y, p = a.x + a.width, g = a.y + a.height), o = p + s.x + x, d = g + s.y + b;
+      }
+      this.evData = {
+        clientX: e.clientX,
+        clientY: e.clientY,
+        isResize: c,
+        ord: l,
+        startClientX: o,
+        startClientY: d,
+        startCropHeight: a.height,
+        startCropWidth: a.width,
+        startCropX: p,
+        startCropY: g
+      }, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
+    }, this.onComponentPointerDown = (e) => {
+      const { crop: t, disabled: r, keepSelection: i, loading: s, locked: a, onChange: l } = this.props, c = this.getBox();
+      if (r || a || s || i && t)
+        return;
+      e.cancelable && e.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({
+        preventScroll: !0
+      });
+      const o = e.clientX - c.x, d = e.clientY - c.y, p = {
+        height: 0,
+        unit: "px",
+        width: 0,
+        x: o,
+        y: d
+      };
+      this.evData = {
+        clientX: e.clientX,
+        clientY: e.clientY,
+        isResize: !0,
+        startClientX: e.clientX,
+        startClientY: e.clientY,
+        startCropHeight: 0,
+        startCropWidth: 0,
+        startCropX: o,
+        startCropY: d
+      }, this.mouseDownOnCrop = !0, l(
+        j(p, c.width, c.height),
+        P(p, c.width, c.height)
+      ), this.setState({ cropIsActive: !0, newCropIsBeingDrawn: !0 });
+    }, this.onDocPointerMove = (e) => {
+      const { crop: t, disabled: r, loading: i, onChange: s, onDragStart: a } = this.props, l = this.getBox();
+      if (r || i || !t || !this.mouseDownOnCrop)
+        return;
+      e.cancelable && e.preventDefault(), this.dragStarted || (this.dragStarted = !0);
+      const { evData: c } = this;
+      c.clientX = e.clientX, c.clientY = e.clientY;
+      let o;
+      c.isResize ? o = this.resizeCrop() : (o = this.dragCrop(), a && a(e)), he(t, o) || s(
+        j(o, l.width, l.height),
+        P(o, l.width, l.height)
+      );
+    }, this.onComponentKeyDown = (e) => {
+      const { crop: t, disabled: r, loading: i, onChange: s, onComplete: a } = this.props;
+      if (r || i)
+        return;
+      const l = e.key;
+      let c = !1;
+      if (!t)
+        return;
+      const o = this.getBox(), d = this.makePixelCrop(o), g = (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ? _.nudgeStepLarge : e.shiftKey ? _.nudgeStepMedium : _.nudgeStep;
+      if (l === "ArrowLeft" ? (d.x -= g, c = !0) : l === "ArrowRight" ? (d.x += g, c = !0) : l === "ArrowUp" ? (d.y -= g, c = !0) : l === "ArrowDown" && (d.y += g, c = !0), c) {
+        e.cancelable && e.preventDefault(), d.x = W(d.x, 0, o.width - d.width), d.y = W(d.y, 0, o.height - d.height);
+        const u = j(d, o.width, o.height), n = P(d, o.width, o.height);
+        s(u, n), a && a(u, n);
+      }
+    }, this.onHandlerKeyDown = (e, t) => {
+      const {
+        aspect: r = 0,
+        crop: i,
+        disabled: s,
+        loading: a,
+        maxHeight: l,
+        maxWidth: c,
+        minHeight: o = 0,
+        minWidth: d = 0,
+        onChange: p,
+        onComplete: g
+      } = this.props, u = this.getBox();
+      if (s || a || !i)
+        return;
+      if (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight")
+        e.stopPropagation(), e.preventDefault();
+      else
+        return;
+      const x = (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) ? _.nudgeStepLarge : e.shiftKey ? _.nudgeStepMedium : _.nudgeStep, b = j(i, u.width, u.height), v = Xe(b, e.key, x, t), C = ce(
+        v,
+        r,
+        t,
+        u.width,
+        u.height,
+        d,
+        o,
+        c,
+        l
+      );
+      if (!he(i, C)) {
+        const D = P(
+          C,
+          u.width,
+          u.height
+        );
+        p(C, D), g && g(C, D);
+      }
+    }, this.onDocPointerDone = (e) => {
+      const { crop: t, disabled: r, loading: i, onComplete: s, onDragEnd: a } = this.props, l = this.getBox();
+      this.unbindDocMove(), !(r || i || !t) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, a && a(e), s && s(
+        j(t, l.width, l.height),
+        P(t, l.width, l.height)
+      ), this.setState({ cropIsActive: !1, newCropIsBeingDrawn: !1 }));
+    }, this.onDragFocus = () => {
+      this.componentRef.current?.scrollTo(0, 0);
+    };
+  }
+  get document() {
+    return document;
+  }
+  // We unfortunately get the bounding box every time as x+y changes
+  // due to scrolling.
+  getBox() {
+    const e = this.mediaRef.current;
+    if (!e)
+      return { height: 0, width: 0, x: 0, y: 0 };
+    const { height: t, width: r, x: i, y: s } = e.getBoundingClientRect();
+    return { height: t, width: r, x: i, y: s };
+  }
+  componentDidUpdate(e) {
+    const { crop: t, onComplete: r } = this.props;
+    if (r && !e.crop && t) {
+      const { height: i, width: s } = this.getBox();
+      s && i && r(
+        j(t, s, i),
+        P(t, s, i)
+      );
+    }
+  }
+  componentWillUnmount() {
+    this.resizeObserver && this.resizeObserver.disconnect(), this.unbindDocMove();
+  }
+  bindDocMove() {
+    this.docMoveBound || (this.document.addEventListener(
+      "pointermove",
+      this.onDocPointerMove,
+      A
+    ), this.document.addEventListener(
+      "pointerup",
+      this.onDocPointerDone,
+      A
+    ), this.document.addEventListener(
+      "pointercancel",
+      this.onDocPointerDone,
+      A
+    ), this.docMoveBound = !0);
+  }
+  unbindDocMove() {
+    this.docMoveBound && (this.document.removeEventListener(
+      "pointermove",
+      this.onDocPointerMove,
+      A
+    ), this.document.removeEventListener(
+      "pointerup",
+      this.onDocPointerDone,
+      A
+    ), this.document.removeEventListener(
+      "pointercancel",
+      this.onDocPointerDone,
+      A
+    ), this.docMoveBound = !1);
+  }
+  getCropStyle() {
+    const { crop: e } = this.props;
+    if (e)
+      return {
+        height: `${e.height}${e.unit}`,
+        left: `${e.x}${e.unit}`,
+        top: `${e.y}${e.unit}`,
+        width: `${e.width}${e.unit}`
+      };
+  }
+  dragCrop() {
+    const { evData: e } = this, t = this.getBox(), r = this.makePixelCrop(t), i = e.clientX - e.startClientX, s = e.clientY - e.startClientY;
+    return r.x = W(
+      e.startCropX + i,
+      0,
+      t.width - r.width
+    ), r.y = W(
+      e.startCropY + s,
+      0,
+      t.height - r.height
+    ), r;
+  }
+  getPointRegion(e, t, r, i) {
+    const { evData: s } = this, a = s.clientX - e.x, l = s.clientY - e.y;
+    let c;
+    i && t ? c = t === "nw" || t === "n" || t === "ne" : c = l < s.startCropY;
+    let o;
+    return r && t ? o = t === "nw" || t === "w" || t === "sw" : o = a < s.startCropX, o ? c ? "nw" : "sw" : c ? "ne" : "se";
+  }
+  resolveMinDimensions(e, t, r = 0, i = 0) {
+    const s = Math.min(r, e.width), a = Math.min(i, e.height);
+    return !t || !s && !a ? [s, a] : t > 1 ? s ? [s, s / t] : [a * t, a] : a ? [a * t, a] : [s, s / t];
+  }
+  resizeCrop() {
+    const { evData: e } = this, {
+      aspect: t = 0,
+      centerCrop: r,
+      maxHeight: i,
+      maxWidth: s
+    } = this.props, a = this.getBox(), [l, c] = this.resolveMinDimensions(
+      a,
+      t,
+      this.props.minWidth,
+      this.props.minHeight
+    );
+    let o = this.makePixelCrop(a);
+    const d = this.getPointRegion(a, e.ord, l, c), p = e.ord || d;
+    let g = e.clientX - e.startClientX, u = e.clientY - e.startClientY;
+    (l && p === "nw" || p === "w" || p === "sw") && (g = Math.min(g, -l)), (c && p === "nw" || p === "n" || p === "ne") && (u = Math.min(u, -c));
+    const n = {
+      height: 0,
+      unit: "px",
+      width: 0,
+      x: 0,
+      y: 0
+    };
+    if (r) {
+      const b = a.width / 2, v = a.height / 2;
+      if (d === "ne") {
+        const C = e.startCropWidth + (g - e.startCropWidth) * 2, D = e.startCropHeight - (e.startCropHeight + u) * 2;
+        n.width = Math.min(Math.max(20, C), a.width), n.height = Math.min(Math.max(20, D), a.height), n.x = b - n.width / 2, n.y = v - n.height / 2;
+      } else if (d === "se") {
+        const C = e.startCropWidth + (g - e.startCropWidth) * 2, D = e.startCropHeight + (u - e.startCropHeight) * 2;
+        n.width = Math.min(Math.max(20, C), a.width), n.height = Math.min(Math.max(20, D), a.height), n.x = b - n.width / 2, n.y = v - n.height / 2;
+      } else if (d === "sw") {
+        const C = e.startCropWidth - (e.startCropWidth + g) * 2, D = e.startCropHeight - (e.startCropHeight - u) * 2;
+        n.width = Math.min(Math.max(20, C), a.width), n.height = Math.min(Math.max(20, D), a.height), n.x = b - n.width / 2, n.y = v - n.height / 2;
+      } else if (d === "nw") {
+        const C = e.startCropWidth - (e.startCropWidth + g) * 2, D = e.startCropHeight - (e.startCropHeight + u) * 2;
+        n.width = Math.min(Math.max(20, C), a.width), n.height = Math.min(Math.max(20, D), a.height), n.x = b - n.width / 2, n.y = v - n.height / 2;
+      }
+      if (t && n.width && n.height) {
+        const C = n.height * t, D = n.width / t;
+        C <= n.width ? n.width = C : n.height = D, n.x = b - n.width / 2, n.y = v - n.height / 2;
+      }
+    } else
+      d === "ne" ? (n.x = e.startCropX, n.width = g, t ? (n.height = n.width / t, n.y = e.startCropY - n.height) : (n.height = Math.abs(u), n.y = e.startCropY - n.height)) : d === "se" ? (n.x = e.startCropX, n.y = e.startCropY, n.width = g, t ? n.height = n.width / t : n.height = u) : d === "sw" ? (n.x = e.startCropX + g, n.y = e.startCropY, n.width = Math.abs(g), t ? n.height = n.width / t : n.height = u) : d === "nw" && (n.x = e.startCropX + g, n.width = Math.abs(g), t ? (n.height = n.width / t, n.y = e.startCropY - n.height) : (n.height = Math.abs(u), n.y = e.startCropY + u));
+    const x = ce(
+      n,
+      t,
+      d,
+      a.width,
+      a.height,
+      l,
+      c,
+      s,
+      i
+    );
+    return t || _.xyOrds.indexOf(p) > -1 ? o = x : _.xOrds.indexOf(p) > -1 ? (o.x = x.x, o.width = x.width) : _.yOrds.indexOf(p) > -1 && (o.y = x.y, o.height = x.height), o.x = W(o.x, 0, a.width - o.width), o.y = W(o.y, 0, a.height - o.height), o;
+  }
+  renderCropSelection() {
+    const {
+      ariaLabels: e = _.defaultProps.ariaLabels,
+      crop: t,
+      disabled: r,
+      locked: i,
+      renderSelectionAddon: s,
+      ruleOfThirds: a
+    } = this.props, l = this.getCropStyle();
+    if (t)
+      return /* @__PURE__ */ f.jsxs(
+        "div",
+        {
+          style: l,
+          className: "ReactCrop__crop-selection",
+          onPointerDown: this.onCropPointerDown,
+          "aria-label": e.cropArea,
+          tabIndex: 0,
+          onKeyDown: this.onComponentKeyDown,
+          role: "group",
+          children: [
+            !r && !i && /* @__PURE__ */ f.jsxs("div", { className: "ReactCrop__drag-elements", onFocus: this.onDragFocus, children: [
+              /* @__PURE__ */ f.jsx("div", { className: "ReactCrop__drag-bar ord-n", "data-ord": "n" }),
+              /* @__PURE__ */ f.jsx("div", { className: "ReactCrop__drag-bar ord-e", "data-ord": "e" }),
+              /* @__PURE__ */ f.jsx("div", { className: "ReactCrop__drag-bar ord-s", "data-ord": "s" }),
+              /* @__PURE__ */ f.jsx("div", { className: "ReactCrop__drag-bar ord-w", "data-ord": "w" }),
+              /* @__PURE__ */ f.jsx(
+                "div",
+                {
+                  className: "ReactCrop__drag-handle ord-nw",
+                  "data-ord": "nw",
+                  tabIndex: 0,
+                  "aria-label": e.nwDragHandle,
+                  onKeyDown: (c) => this.onHandlerKeyDown(c, "nw"),
+                  role: "button"
+                }
+              ),
+              /* @__PURE__ */ f.jsx(
+                "div",
+                {
+                  className: "ReactCrop__drag-handle ord-n",
+                  "data-ord": "n",
+                  tabIndex: 0,
+                  "aria-label": e.nDragHandle,
+                  onKeyDown: (c) => this.onHandlerKeyDown(c, "n"),
+                  role: "button"
+                }
+              ),
+              /* @__PURE__ */ f.jsx(
+                "div",
+                {
+                  className: "ReactCrop__drag-handle ord-ne",
+                  "data-ord": "ne",
+                  tabIndex: 0,
+                  "aria-label": e.neDragHandle,
+                  onKeyDown: (c) => this.onHandlerKeyDown(c, "ne"),
+                  role: "button"
+                }
+              ),
+              /* @__PURE__ */ f.jsx(
+                "div",
+                {
+                  className: "ReactCrop__drag-handle ord-e",
+                  "data-ord": "e",
+                  tabIndex: 0,
+                  "aria-label": e.eDragHandle,
+                  onKeyDown: (c) => this.onHandlerKeyDown(c, "e"),
+                  role: "button"
+                }
+              ),
+              /* @__PURE__ */ f.jsx(
+                "div",
+                {
+                  className: "ReactCrop__drag-handle ord-se",
+                  "data-ord": "se",
+                  tabIndex: 0,
+                  "aria-label": e.seDragHandle,
+                  onKeyDown: (c) => this.onHandlerKeyDown(c, "se"),
+                  role: "button"
+                }
+              ),
+              /* @__PURE__ */ f.jsx(
+                "div",
+                {
+                  className: "ReactCrop__drag-handle ord-s",
+                  "data-ord": "s",
+                  tabIndex: 0,
+                  "aria-label": e.sDragHandle,
+                  onKeyDown: (c) => this.onHandlerKeyDown(c, "s"),
+                  role: "button"
+                }
+              ),
+              /* @__PURE__ */ f.jsx(
+                "div",
+                {
+                  className: "ReactCrop__drag-handle ord-sw",
+                  "data-ord": "sw",
+                  tabIndex: 0,
+                  "aria-label": e.swDragHandle,
+                  onKeyDown: (c) => this.onHandlerKeyDown(c, "sw"),
+                  role: "button"
+                }
+              ),
+              /* @__PURE__ */ f.jsx(
+                "div",
+                {
+                  className: "ReactCrop__drag-handle ord-w",
+                  "data-ord": "w",
+                  tabIndex: 0,
+                  "aria-label": e.wDragHandle,
+                  onKeyDown: (c) => this.onHandlerKeyDown(c, "w"),
+                  role: "button"
+                }
+              )
+            ] }),
+            s && /* @__PURE__ */ f.jsx(
+              "div",
+              {
+                className: "ReactCrop__selection-addon",
+                onPointerDown: (c) => c.stopPropagation(),
+                children: s(this.state)
+              }
+            ),
+            a && /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
+              /* @__PURE__ */ f.jsx("div", { className: "ReactCrop__rule-of-thirds-hz" }),
+              /* @__PURE__ */ f.jsx("div", { className: "ReactCrop__rule-of-thirds-vt" })
+            ] })
+          ]
+        }
+      );
+  }
+  makePixelCrop(e) {
+    const t = { ...q, ...this.props.crop || {} };
+    return j(t, e.width, e.height);
+  }
+  render() {
+    const {
+      aspect: e,
+      children: t,
+      circularCrop: r,
+      className: i,
+      crop: s,
+      disabled: a,
+      loading: l,
+      locked: c,
+      ruleOfThirds: o,
+      style: d
+    } = this.props, { cropIsActive: p, newCropIsBeingDrawn: g } = this.state, u = s ? this.renderCropSelection() : null, n = Pe(
+      "ReactCrop",
+      i,
+      p && "ReactCrop--active",
+      a && "ReactCrop--disabled",
+      c && "ReactCrop--locked",
+      g && "ReactCrop--new-crop",
+      s && e && "ReactCrop--fixed-aspect",
+      s && r && "ReactCrop--circular-crop",
+      s && o && "ReactCrop--rule-of-thirds",
+      !this.dragStarted && s && !s.width && !s.height && "ReactCrop--invisible-crop",
+      r && "ReactCrop--no-animate",
+      l && "ReactCrop--loading"
+    );
+    let x;
+    if (s) {
+      let b = /* @__PURE__ */ f.jsx(
+        "rect",
+        {
+          x: `${s.x}${s.unit}`,
+          y: `${s.y}${s.unit}`,
+          width: `${s.width}${s.unit}`,
+          height: `${s.height}${s.unit}`,
+          fill: "black"
+        }
+      );
+      r && (b = /* @__PURE__ */ f.jsx(
+        "ellipse",
+        {
+          cx: `${s.x + s.width / 2}${s.unit}`,
+          cy: `${s.y + s.height / 2}${s.unit}`,
+          rx: `${s.width / 2}${s.unit}`,
+          ry: `${s.height / 2}${s.unit}`,
+          fill: "black"
+        }
+      )), x = /* @__PURE__ */ f.jsxs("svg", { className: "ReactCrop__crop-mask", width: "100%", height: "100%", children: [
+        /* @__PURE__ */ f.jsx("defs", { children: /* @__PURE__ */ f.jsxs("mask", { id: `hole-${this.instanceId}`, children: [
+          /* @__PURE__ */ f.jsx("rect", { width: "100%", height: "100%", fill: "white" }),
+          b
+        ] }) }),
+        /* @__PURE__ */ f.jsx(
+          "rect",
+          {
+            fill: "black",
+            fillOpacity: 0.5,
+            width: "100%",
+            height: "100%",
+            mask: `url(#hole-${this.instanceId})`
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ f.jsxs("div", { ref: this.componentRef, className: n, style: d, children: [
+      /* @__PURE__ */ f.jsx(
+        "div",
+        {
+          ref: this.mediaRef,
+          className: "ReactCrop__child-wrapper",
+          onPointerDown: this.onComponentPointerDown,
+          children: t
+        }
+      ),
+      x,
+      u
+    ] });
+  }
+};
+_.xOrds = ["e", "w"], _.yOrds = ["n", "s"], _.xyOrds = ["nw", "ne", "se", "sw"], _.nudgeStep = 1, _.nudgeStepMedium = 10, _.nudgeStepLarge = 100, _.defaultProps = {
+  ariaLabels: {
+    cropArea: "Use the arrow keys to move the crop selection area",
+    eDragHandle: "Use the up and down arrow keys to move the east drag handle to change the crop selection area",
+    nDragHandle: "Use the up and down arrow keys to move the north drag handle to change the crop selection area",
+    neDragHandle: "Use the arrow keys to move the north east drag handle to change the crop selection area",
+    nwDragHandle: "Use the arrow keys to move the north west drag handle to change the crop selection area",
+    sDragHandle: "Use the up and down arrow keys to move the south drag handle to change the crop selection area",
+    seDragHandle: "Use the arrow keys to move the south east drag handle to change the crop selection area",
+    swDragHandle: "Use the arrow keys to move the south west drag handle to change the crop selection area",
+    wDragHandle: "Use the up and down arrow keys to move the west drag handle to change the crop selection area"
+  }
+};
+let ie = _;
+function le(h, e, t, r = 100) {
+  return Le(
+    Ye(
+      {
+        unit: "%",
+        width: r
+      },
+      t,
+      h,
+      e
+    ),
+    h,
+    e
+  );
+}
+const We = w.forwardRef(
+  ({
+    cropper: h,
+    disabled: e,
+    fillImage: t,
+    image: r,
+    loadable: i,
+    loading: s,
+    multiple: a,
+    resizer: l,
+    rotation: c,
+    useInternalLoading: o
+  }, d) => {
+    const [p, g] = w.useState(!1), [u, n] = w.useState(e), [x, b] = w.useState(!1), [v, C] = w.useState({
+      height: 0,
+      unit: N.AspectRatio,
+      width: 0,
+      x: 0,
+      y: 0
+    }), [D, B] = w.useState(r?.url ?? ""), [U, V] = w.useState({
+      height: 0,
+      width: 0
+    }), [de, pe] = w.useState({
+      height: r?.height ?? 0,
+      width: r?.width ?? 0
+    }), M = w.useRef(null), T = w.useRef(r?.url ?? ""), Z = w.useRef(null), G = w.useRef({
+      height: r?.height ?? 0,
+      width: r?.width ?? 0
+    }), $ = w.useRef(null);
+    G.current = { ...de };
+    const O = w.useCallback(() => {
+      $.current && clearTimeout($.current), $.current = setTimeout(() => {
+        $.current = null, g(!0);
+      }, 1e3);
+    }, []), L = w.useCallback(() => {
+      $.current ? (clearTimeout($.current), $.current = null) : g(!1);
+    }, []);
+    w.useEffect(() => () => {
+      $.current && clearTimeout($.current);
+    }, []);
+    const R = w.useMemo(() => r, [r.url, r.width, r.height, r.rotation, r.extension, r.originalUrl, r.x, r.y]), I = w.useMemo(() => l, [l.width, l.height, l.maxWidth, l.maxHeight]), J = w.useCallback(() => {
+      if (!M.current)
+        return { maxHeight: 0, maxWidth: 0 };
+      let m = 0, y = 0;
+      const H = R.width / R.height, X = M.current.clientWidth / M.current.clientHeight;
+      return H > X ? (m = M.current.clientWidth, y = m / H) : (y = M.current.clientHeight, m = y * H), { maxHeight: y, maxWidth: m };
+    }, [R.width, R.height]);
+    w.useEffect(() => {
+      C({
+        height: h.percentageHeight,
+        unit: N.AspectRatio,
+        width: h.percentageWidth,
+        x: h.x,
+        y: h.y
+      });
+    }, [h]), w.useEffect(() => {
+      const { height: m, width: y } = I, H = (Y, K) => e ? I.width !== G.current.width || I.height !== G.current.height : y < Y || m < K, E = se(async () => {
+        if (c !== 0)
+          return;
+        const { maxHeight: Y, maxWidth: K } = J(), fe = H(K, Y);
+        if (!i || !fe && T.current) {
+          B(R.url), n(e), L();
+          return;
+        }
+        const ne = T.current !== R.url;
+        ne && O();
+        const F = e && !t, { height: me, width: Ce } = He(R.width, R.height, y, m), { url: xe } = await je(
+          R.url,
+          F && I.width || K,
+          F && I.height || Y,
+          M.current?.clientWidth ?? window.innerWidth,
+          M.current?.clientHeight ?? window.innerHeight
+        );
+        B(xe), V({
+          height: F ? I.height : me,
+          width: F ? I.width : Ce
+        }), n(e), ne || L(), T.current = R.url;
+      }, 300, { leading: !1 });
+      return E(), () => E.cancel();
+    }, [e, R, i, J, I, c, t, O, L, n]), w.useEffect(() => {
+      const y = se(async () => {
+        if (i && c !== 0) {
+          O();
+          const { height: X, width: E } = $e(
+            R.width,
+            R.height,
+            c
+          ), Y = await Se(
+            {
+              height: R.height,
+              url: R.url,
+              width: R.width
+            },
+            c
+          );
+          B(Y), V({
+            height: X,
+            width: E
+          }), n(e), T.current = R.url;
+        } else
+          i ? O() : B(R.url);
+      }, 300, { leading: !1 });
+      return y(), () => y.cancel();
+    }, [R, i, c, e, J, O, L]);
+    const re = w.useCallback(() => {
+      C({
+        height: 100,
+        unit: "%",
+        width: 100,
+        x: 0,
+        y: 0
+      });
+    }, []), ge = w.useCallback(
+      (m, y) => {
+        e || C(y);
+      },
+      [e]
+    ), oe = w.useCallback(
+      (m) => {
+        if (!Z.current)
+          return;
+        const { naturalHeight: y, naturalWidth: H } = m.currentTarget;
+        if (pe({
+          height: y,
+          width: H
+        }), V({
+          height: y,
+          width: H
+        }), h.unit === N.AspectRatio) {
+          const { height: X, width: E } = m.currentTarget;
+          C(
+            le(E, X, h.width / h.height)
+          );
+        } else
+          C({
+            height: 100,
+            unit: "%",
+            width: 100,
+            x: 0,
+            y: 0
+          });
+        L();
+      },
+      [h.height, h.unit, h.width, L]
+    );
+    w.useEffect(() => {
+      re();
+    }, [e, re]), w.useEffect(() => {
+      if (!M.current || !i)
+        return;
+      const m = new CustomEvent("cx-cropper-loading-change", {
+        bubbles: !0,
+        cancelable: !1,
+        composed: !0,
+        detail: p
+      });
+      M.current.dispatchEvent(m), p || b(!0);
+    }, [p, i]);
+    const Q = w.useMemo(() => h.focusMode === "center", [h.focusMode]), ee = w.useCallback(
+      (m, y) => {
+        const H = new CustomEvent("cx-cropper-crop-complete", {
+          bubbles: !0,
+          cancelable: !1,
+          composed: !0,
+          detail: {
+            croppedArea: y
+          }
+        });
+        M.current?.dispatchEvent(H);
+      },
+      []
+    );
+    w.useEffect(() => {
+      if (Q) {
+        const m = le(
+          r.width,
+          r.height,
+          h.width / h.height,
+          h.percentageWidth
+        );
+        C(m), ee(void 0, m);
+      }
+    }, [
+      Q,
+      h.percentageWidth,
+      h.width,
+      h.height,
+      r.width,
+      r.height,
+      ee
+    ]);
+    const ue = w.useCallback((m) => {
+      const y = new CustomEvent("cx-cropper-crop-drag-start", {
+        bubbles: !0,
+        cancelable: !1,
+        composed: !0,
+        detail: {
+          clientX: m.clientX,
+          clientY: m.clientY
+        }
+      });
+      M.current?.dispatchEvent(y);
+    }, []), we = w.useMemo(() => {
+      if (!M.current)
+        return !1;
+      const m = U.height / U.width, y = M.current.clientHeight / M.current.clientWidth;
+      return m > y;
+    }, [U.height, U.width]);
+    return /* @__PURE__ */ f.jsx(
+      "div",
+      {
+        ref: M,
+        className: `cropper cropper--${we ? "portrait" : "landscape"}${a ? " cropper--multiple" : ""}`,
+        children: i ? /* @__PURE__ */ f.jsx(
+          ie,
+          {
+            aspect: h.keepAspectRatio || h.unit === N.AspectRatio ? h.width / h.height : void 0,
+            crop: v,
+            centerCrop: Q,
+            disabled: u,
+            loading: s || o && p,
+            keepSelection: !0,
+            ruleOfThirds: !0,
+            onChange: ge,
+            onComplete: ee,
+            onDragStart: ue,
+            style: {
+              cursor: u ? "default" : "move",
+              pointerEvents: u ? "none" : "auto"
+            },
+            children: /* @__PURE__ */ f.jsx(
+              "img",
+              {
+                className: "cropper__image",
+                src: D,
+                alt: "Cropped",
+                ref: Z,
+                onLoad: oe
+              }
+            )
+          },
+          R.url
+        ) : /* @__PURE__ */ f.jsx(
+          "img",
+          {
+            className: `cropper__image ${p && !x ? "cropper__image--loading" : ""}`,
+            src: D,
+            alt: "Cropped",
+            ref: Z,
+            onLoad: oe
+          }
+        )
+      }
+    );
+  }
+);
+var Ae = Object.defineProperty, Oe = Object.getOwnPropertyDescriptor, z = (h, e, t, r) => {
+  for (var i = r > 1 ? void 0 : r ? Oe(e, t) : e, s = h.length - 1, a; s >= 0; s--)
+    (a = h[s]) && (i = (r ? a(e, t, i) : a(i)) || i);
+  return r && i && Ae(e, t, i), i;
+};
+const Ke = Me(We, ze, ke, {
+  // @ts-expect-error type error
+  props: {
+    cropper: "object",
+    disabled: "boolean",
+    fillImage: "boolean",
+    image: "object",
+    loadable: "boolean",
+    loading: "boolean",
+    multiple: "boolean",
+    ref: "object",
+    resizer: "object",
+    rotation: "number",
+    useInternalLoading: "boolean"
+  }
+});
+customElements.get("custom-cropper") || customElements.define("custom-cropper", Ke);
+let k = class extends be {
+  constructor() {
+    super(...arguments), this.cropper = {
+      height: 0,
+      keepAspectRatio: !0,
+      percentageHeight: 0,
+      percentageWidth: 0,
+      unit: N.Pixel,
+      width: 0,
+      x: 0,
+      y: 0
+    }, this.image = void 0, this.resizer = {
+      height: 0,
+      width: 0
+    }, this.rotation = 0, this.fillImage = !1, this.disabled = !1, this.loadable = !1, this.loading = !1, this.multiple = !1, this.useInternalLoading = !1, this.showLoading = !0;
+  }
+  handleLoadingChange(h) {
+    h.detail || (this.showLoading = h.detail);
+  }
+  render() {
+    return te`
+      ${ae(
+      this.image,
+      () => te`<custom-cropper .ref=${this} .cropper=${this.cropper} .image=${this.image} .loadable=${this.loadable} .resizer=${this.resizer} .rotation=${this.rotation} .disabled=${this.disabled} .loading=${this.loading} .fillImage=${this.fillImage} .useInternalLoading=${this.useInternalLoading} .multiple=${this.multiple} @cx-cropper-loading-change=${this.handleLoadingChange}></custom-cropper>`
+    )}
+      ${ae(
+      this.showLoading,
+      () => te`<div class="loading-container"><div class="loading"><cx-skeleton class="loading__skeleton"></cx-skeleton><cx-spinner class="loading__spinner"></cx-spinner></div></div>`
+    )}
+    `;
+  }
+};
+k.styles = [ye, Ie];
+z([
+  De("custom-cropper")
+], k.prototype, "cropperEl", 2);
+z([
+  S({ type: Object })
+], k.prototype, "cropper", 2);
+z([
+  S({ type: Object })
+], k.prototype, "image", 2);
+z([
+  S({ type: Object })
+], k.prototype, "resizer", 2);
+z([
+  S({ reflect: !0, type: Number })
+], k.prototype, "rotation", 2);
+z([
+  S({ attribute: "fill-image", reflect: !0, type: Boolean })
+], k.prototype, "fillImage", 2);
+z([
+  S({ reflect: !0, type: Boolean })
+], k.prototype, "disabled", 2);
+z([
+  S({ reflect: !0, type: Boolean })
+], k.prototype, "loadable", 2);
+z([
+  S({ reflect: !0, type: Boolean })
+], k.prototype, "loading", 2);
+z([
+  S({ reflect: !0, type: Boolean })
+], k.prototype, "multiple", 2);
+z([
+  S({ attribute: "use-internal-loading", reflect: !0, type: Boolean })
+], k.prototype, "useInternalLoading", 2);
+z([
+  ve()
+], k.prototype, "showLoading", 2);
+k = z([
+  Re("cx-cropper")
+], k);
 export {
-  l as default
+  k as default
 };