@orangelogic/design-system 2.0.0-29DUO2-beta-1

package/library/chunks/image.CBjclAIZ.js

@@ -0,0 +1,1284 @@
+import { x as T, i as se, E as Le } from "./lit-element.jLBm65_O.js";
+import { C as Re, n as m } from "./lib-cortex-element.CVMmyPMC.js";
+import { r as H } from "./state.CSDxrqLd.js";
+import { e as X } from "./query.BBf1UFkC.js";
+import { E as He, b as de, a as $e } from "./index.Cpamj0jB.js";
+import { c as We } from "./component.styles.DMSLciL5.js";
+import { c as Ae } from "./custom-element.L4WJXn1j.js";
+import { d as Oe } from "./debounce.DaHuiSGU.js";
+import { L as Me } from "./i18n.Bge6Wbrz.js";
+import { w as q } from "./watch.q1sEjPWL.js";
+import { e as j } from "./class-map.BiVq-cVR.js";
+import { o as De } from "./if-defined.BRoBj_Rp.js";
+import { o as je } from "./style-map.llVFPd__.js";
+import { n as V } from "./when.Dr1es41R.js";
+import Te from "../components/icon.js";
+import Be from "../components/popup.js";
+import Ze from "../components/resize-observer.js";
+import Ie from "../components/skeleton.js";
+import Ne from "../components/space.js";
+var Pe = /* @__PURE__ */ ((e) => (e.Bottom = "bottom", e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.BottomRight = "bottom-right", e.CenterCenter = "center-center", e.CenterLeft = "center-left", e.CenterRight = "center-right", e.Left = "left", e.Right = "right", e.Top = "top", e.TopCenter = "top-center", e.TopLeft = "top-left", e.TopRight = "top-right", e))(Pe || {}), Y = /* @__PURE__ */ ((e) => (e.Jump = "jump", e.None = "none", e.TextReveal = "text-reveal", e.Zoom = "zoom", e))(Y || {}), ge = /* @__PURE__ */ ((e) => (e.PopOut = "pop-out", e.WithinBorders = "within-borders", e))(ge || {}), ue = /* @__PURE__ */ ((e) => (e.Fade = "fade", e.Slide = "slide", e))(ue || {}), ne = /* @__PURE__ */ ((e) => (e.Auto = "auto", e.Fixed = "fixed", e))(ne || {}), Ve = Object.defineProperty, E = (e, t, o, h) => {
+  for (var r = void 0, g = e.length - 1, p; g >= 0; g--)
+    (p = e[g]) && (r = p(t, o, r) || r);
+  return r && Ve(t, o, r), r;
+};
+class S extends Re {
+  constructor() {
+    super(...arguments), this.hasEvent = !1, this.easing = He.Linear, this.highlightBorder = !1, this.highlightColorOverlay = !1, this.highlightDropShadow = !1, this.highlightBackground = !1, this.highlightOpacity = !1, this.effect = Y.None, this.textRevealStyle = ue.Slide, this.zoomStyle = ge.WithinBorders, this.hasSlotContent = !1, this.isCustomSlot = !1, this.isHovering = !1;
+  }
+  get easeCSSVariable() {
+    return de[this.easing] || de.linear;
+  }
+  getHighlighterClass() {
+    return {
+      highlighter: !0,
+      [`highlighter--effect-${this.effect}`]: !0,
+      [`highlighter--zoom-style-${this.zoomStyle}`]: !0,
+      "highlighter--background": this.highlightBackground,
+      "highlighter--border": this.highlightBorder,
+      "highlighter--color-overlay": this.highlightColorOverlay,
+      "highlighter--drop-shadow": this.highlightDropShadow,
+      "highlighter--opacity": this.highlightOpacity
+    };
+  }
+  /**
+   * Check if the slot has actual content (not just whitespace).
+   */
+  handleSlotChange() {
+    if (this.slotEl) {
+      const t = this.slotEl.assignedElements({ flatten: !0 });
+      this.hasSlotContent = t.length > 0, this.isCustomSlot = !t.some(
+        (o) => o.hasAttribute("data-item-id")
+      );
+    } else
+      this.hasSlotContent = this.childElementCount > 0, this.isCustomSlot = !0;
+  }
+}
+E([
+  X("slot")
+], S.prototype, "slotEl");
+E([
+  m({ attribute: "has-event", reflect: !0, type: Boolean })
+], S.prototype, "hasEvent");
+E([
+  m({ reflect: !0, type: String })
+], S.prototype, "easing");
+E([
+  m({ attribute: "highlight-border", reflect: !0, type: Boolean })
+], S.prototype, "highlightBorder");
+E([
+  m({
+    attribute: "highlight-color-overlay",
+    reflect: !0,
+    type: Boolean
+  })
+], S.prototype, "highlightColorOverlay");
+E([
+  m({
+    attribute: "highlight-drop-shadow",
+    reflect: !0,
+    type: Boolean
+  })
+], S.prototype, "highlightDropShadow");
+E([
+  m({ attribute: "highlight-background", reflect: !0, type: Boolean })
+], S.prototype, "highlightBackground");
+E([
+  m({ attribute: "highlight-opacity", reflect: !0, type: Boolean })
+], S.prototype, "highlightOpacity");
+E([
+  m({ attribute: "effect", reflect: !0, type: String })
+], S.prototype, "effect");
+E([
+  m({
+    attribute: "text-reveal-style",
+    reflect: !0,
+    type: String
+  })
+], S.prototype, "textRevealStyle");
+E([
+  m({
+    attribute: "zoom-style",
+    reflect: !0,
+    type: String
+  })
+], S.prototype, "zoomStyle");
+E([
+  H()
+], S.prototype, "hasSlotContent");
+E([
+  H()
+], S.prototype, "isCustomSlot");
+E([
+  H()
+], S.prototype, "isHovering");
+var Fe = Object.defineProperty, O = (e, t, o, h) => {
+  for (var r = void 0, g = e.length - 1, p; g >= 0; g--)
+    (p = e[g]) && (r = p(t, o, r) || r);
+  return r && Fe(t, o, r), r;
+};
+class A extends S {
+  constructor() {
+    super(), this.width = "", this.height = "", this.resizable = !1, this.heightMode = ne.Fixed, this.noLimit = !1, this.isResizeActive = !1, this.isResizing = !1, this.resizeSize = {
+      height: 0,
+      width: 0
+    }, this.maxWidth = 0, this.maxHeight = 0, this.minWidth = 0, this.minHeight = 0, this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+  }
+  get ratio() {
+    const t = this.clientWidth || 0, o = this.clientHeight || 0;
+    return !t || !o ? 1 : t / o;
+  }
+  get keepRatio() {
+    return this.heightMode === ne.Auto;
+  }
+  handleDocumentMouseDown(t) {
+    const o = t.composedPath();
+    this.containingElement && !o.includes(this.containingElement) && this.stopResizing();
+  }
+  startResizing() {
+    !this.resizable || this.isResizeActive || (this.isResizeActive = !0, this.ownerDocument.addEventListener(
+      "mousedown",
+      this.handleDocumentMouseDown
+    ));
+  }
+  stopResizing() {
+    this.isResizeActive = !1, this.ownerDocument.removeEventListener(
+      "mousedown",
+      this.handleDocumentMouseDown
+    );
+  }
+  handleResizeDragging(t, o = !1, h = !1) {
+    t.preventDefault(), t.stopPropagation(), this.maxWidth = Number.parseInt(getComputedStyle(this).getPropertyValue("--max-width")) || this.parentElement?.clientWidth || 1 / 0, this.maxHeight = Number.parseInt(
+      getComputedStyle(this).getPropertyValue("--max-height")
+    ) || 1 / 0, this.minWidth = Number.parseInt(getComputedStyle(this).getPropertyValue("--min-width")) || 40, this.minHeight = Number.parseInt(
+      getComputedStyle(this).getPropertyValue("--min-height")
+    ) || 40, this.isResizing = !0;
+    const r = { x: t.pageX, y: t.pageY };
+    let g = 0, p = 0;
+    const C = {
+      height: this.containingElement?.clientHeight || 0,
+      width: this.containingElement?.clientWidth || 0
+    };
+    if (!this.noLimit && this.parentElement) {
+      const $ = getComputedStyle(this.parentElement), f = $.getPropertyValue("padding-left").trim() || "0px", v = $.getPropertyValue("padding-right").trim() || "0px", M = Number(f.replace("px", "")), y = Number(v.replace("px", "")), R = getComputedStyle(this.parentElement).getPropertyValue("--padding").trim() || "0px", k = Number(R.replace("px", "")), te = Math.max(
+        M + y,
+        k * 2
+      );
+      this.maxWidth = Math.max(this.maxWidth - te, 0);
+    }
+    this.emit("cx-resize-start", {
+      detail: {
+        element: this,
+        event: t
+      }
+    });
+    const Z = ($) => {
+      g = Number(C.width) + (o ? r.x - $.pageX : $.pageX - r.x), p = Number(C.height) + (h ? r.y - $.pageY : $.pageY - r.y), this.keepRatio && (p >= g / this.ratio && (p = g / this.ratio), g >= p * this.ratio && (g = p * this.ratio));
+      let f = g, v = p;
+      if (this.keepRatio) {
+        const M = this.maxWidth ?? 1 / 0, y = this.maxHeight ?? 1 / 0;
+        let R = Math.min(f, M), k = R / this.ratio;
+        k > y && (k = y, R = k * this.ratio), f = R, v = k;
+      } else
+        f = this.maxWidth ? Math.min(f, this.maxWidth) : f, v = this.maxHeight ? Math.min(v, this.maxHeight) : v;
+      this.resizeSize = {
+        height: Math.round(v),
+        width: Math.round(f)
+      }, this.keepRatio ? (this.minHeight && this.resizeSize.height < this.minHeight && (this.resizeSize.height = this.minHeight, this.resizeSize.width = Math.round(this.minHeight * this.ratio)), this.minWidth && this.resizeSize.width < this.minWidth && (this.resizeSize.width = this.minWidth, this.resizeSize.height = Math.round(this.minWidth / this.ratio))) : (this.minHeight && this.resizeSize.height < this.minHeight && (this.resizeSize.height = this.minHeight), this.minWidth && this.resizeSize.width < this.minWidth && (this.resizeSize.width = this.minWidth));
+    }, I = ($) => {
+      if (g > 0 && p > 0) {
+        let f = g, v = p;
+        if (this.keepRatio) {
+          const M = this.maxWidth ?? 1 / 0, y = this.maxHeight ?? 1 / 0;
+          let R = Math.min(f, M), k = R / this.ratio;
+          k > y && (k = y, R = k * this.ratio), f = R, v = k;
+        } else
+          f = this.maxWidth ? Math.min(f, this.maxWidth) : f, v = this.maxHeight ? Math.min(v, this.maxHeight) : v;
+        this.keepRatio ? (this.minHeight && v < this.minHeight && (v = this.minHeight, f = Math.round(this.minHeight * this.ratio)), this.minWidth && f < this.minWidth && (f = this.minWidth, v = Math.round(this.minWidth / this.ratio))) : (this.minHeight && v < this.minHeight && (v = this.minHeight), this.minWidth && f < this.minWidth && (f = this.minWidth)), this.width = `${Math.round(f)}px`, this.height = `${Math.round(v)}px`, this.resizeSize = {
+          height: 0,
+          width: 0
+        }, this.isResizing = !1;
+      }
+      this.emit("cx-resize-end", {
+        detail: {
+          element: this,
+          event: $
+        }
+      }), this.ownerDocument.defaultView?.removeEventListener(
+        "mousemove",
+        Z
+      );
+    };
+    this.ownerDocument.defaultView?.addEventListener(
+      "mousemove",
+      Z
+    ), this.ownerDocument.defaultView?.addEventListener("mouseup", I, {
+      once: !0
+    });
+  }
+  handleResizeDraggingTopLeft(t) {
+    this.handleResizeDragging(t, !0, !0);
+  }
+  handleResizeDraggingTopRight(t) {
+    this.handleResizeDragging(t, !1, !0);
+  }
+  handleResizeDraggingBottomLeft(t) {
+    this.handleResizeDragging(t, !0, !1);
+  }
+  handleResizeDraggingBottomRight(t) {
+    this.handleResizeDragging(t, !1, !1);
+  }
+  renderResizer() {
+    return T`
+      <div
+        class="resizer resizer--top-left"
+        @mousedown=${this.handleResizeDraggingTopLeft}
+      ></div>
+      <div
+        class="resizer resizer--top-right"
+        @mousedown=${this.handleResizeDraggingTopRight}
+      ></div>
+      <div
+        class="resizer resizer--bottom-left"
+        @mousedown=${this.handleResizeDraggingBottomLeft}
+      ></div>
+      <div
+        class="resizer resizer--bottom-right"
+        @mousedown=${this.handleResizeDraggingBottomRight}
+      ></div>
+    `;
+  }
+}
+O([
+  X('[part="base"]')
+], A.prototype, "containingElement");
+O([
+  m({ reflect: !0, type: String })
+], A.prototype, "width");
+O([
+  m({ reflect: !0, type: String })
+], A.prototype, "height");
+O([
+  m({ type: Boolean })
+], A.prototype, "resizable");
+O([
+  m({ attribute: "height-mode", reflect: !0, type: String })
+], A.prototype, "heightMode");
+O([
+  m({ attribute: "no-limit", reflect: !0, type: Boolean })
+], A.prototype, "noLimit");
+O([
+  H()
+], A.prototype, "isResizeActive");
+O([
+  H()
+], A.prototype, "isResizing");
+O([
+  H()
+], A.prototype, "resizeSize");
+const _e = se`
+  .resizer {
+    background-color: var(--cx-color-primary);
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    z-index: 100;
+  }
+
+  .resizer--top-left {
+    top: calc(-1px - var(--border-width, 0px));
+    left: calc(-1px - var(--border-width, 0px));
+    cursor: nw-resize;
+  }
+
+  .resizer--top-right {
+    top: calc(-1px - var(--border-width, 0px));
+    right: calc(-1px - var(--border-width, 0px));
+    cursor: ne-resize;
+  }
+
+  .resizer--bottom-left {
+    bottom: calc(-1px - var(--border-width, 0px));
+    left: calc(-1px - var(--border-width, 0px));
+    cursor: sw-resize;
+  }
+
+  .resizer--bottom-right {
+    bottom: calc(-1px - var(--border-width, 0px));
+    right: calc(-1px - var(--border-width, 0px));
+    cursor: se-resize;
+  }
+`;
+var U = /* @__PURE__ */ ((e) => (e.Automatic = "automatic", e.Manual = "manual", e))(U || {});
+/*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */
+var B = Object.assign || function(e) {
+  for (var t = 1; t < arguments.length; t++) {
+    var o = arguments[t];
+    for (var h in o)
+      Object.prototype.hasOwnProperty.call(o, h) && (e[h] = o[h]);
+  }
+  return e;
+}, Q = function(t) {
+  return t.tagName === "IMG";
+}, Ue = function(t) {
+  return NodeList.prototype.isPrototypeOf(t);
+}, ee = function(t) {
+  return t && t.nodeType === 1;
+}, me = function(t) {
+  var o = t.currentSrc || t.src;
+  return o.substr(-4).toLowerCase() === ".svg";
+}, ce = function(t) {
+  try {
+    return Array.isArray(t) ? t.filter(Q) : Ue(t) ? [].slice.call(t).filter(Q) : ee(t) ? [t].filter(Q) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(Q) : [];
+  } catch {
+    throw new TypeError(`The provided selector is invalid.
+Expects a CSS selector, a Node element, a NodeList or an array.
+See: https://github.com/francoischalifour/medium-zoom`);
+  }
+}, Ye = function(t) {
+  var o = document.createElement("div");
+  return o.classList.add("medium-zoom-overlay"), o.style.background = t, o;
+}, qe = function(t) {
+  var o = t.getBoundingClientRect(), h = o.top, r = o.left, g = o.width, p = o.height, C = t.cloneNode(), Z = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, I = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+  return C.removeAttribute("id"), C.style.position = "absolute", C.style.top = h + Z + "px", C.style.left = r + I + "px", C.style.width = g + "px", C.style.height = p + "px", C.style.transform = "", C;
+}, F = function(t, o) {
+  var h = B({
+    bubbles: !1,
+    cancelable: !1,
+    detail: void 0
+  }, o);
+  if (typeof window.CustomEvent == "function")
+    return new CustomEvent(t, h);
+  var r = document.createEvent("CustomEvent");
+  return r.initCustomEvent(t, h.bubbles, h.cancelable, h.detail), r;
+}, Xe = function e(t) {
+  var o = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, h = window.Promise || function(a) {
+    function n() {
+    }
+    a(n, n);
+  }, r = function(a) {
+    var n = a.target;
+    if (n === J) {
+      y();
+      return;
+    }
+    L.indexOf(n) !== -1 && R({ target: n });
+  }, g = function() {
+    if (!(N || !i.original)) {
+      var a = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+      Math.abs(he - a) > d.scrollOffset && setTimeout(y, 150);
+    }
+  }, p = function(a) {
+    var n = a.key || a.keyCode;
+    (n === "Escape" || n === "Esc" || n === 27) && y();
+  }, C = function() {
+    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a;
+    if (a.background && (J.style.background = a.background), a.container && a.container instanceof Object && (n.container = B({}, d.container, a.container)), a.template) {
+      var u = ee(a.template) ? a.template : document.querySelector(a.template);
+      n.template = u;
+    }
+    return d = B({}, d, n), L.forEach(function(z) {
+      z.dispatchEvent(F("medium-zoom:update", {
+        detail: { zoom: b }
+      }));
+    }), b;
+  }, Z = function() {
+    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return e(B({}, d, a));
+  }, I = function() {
+    for (var a = arguments.length, n = Array(a), u = 0; u < a; u++)
+      n[u] = arguments[u];
+    var z = n.reduce(function(s, w) {
+      return [].concat(s, ce(w));
+    }, []);
+    return z.filter(function(s) {
+      return L.indexOf(s) === -1;
+    }).forEach(function(s) {
+      L.push(s), s.classList.add("medium-zoom-image");
+    }), K.forEach(function(s) {
+      var w = s.type, W = s.listener, P = s.options;
+      z.forEach(function(D) {
+        D.addEventListener(w, W, P);
+      });
+    }), b;
+  }, $ = function() {
+    for (var a = arguments.length, n = Array(a), u = 0; u < a; u++)
+      n[u] = arguments[u];
+    i.zoomed && y();
+    var z = n.length > 0 ? n.reduce(function(s, w) {
+      return [].concat(s, ce(w));
+    }, []) : L;
+    return z.forEach(function(s) {
+      s.classList.remove("medium-zoom-image"), s.dispatchEvent(F("medium-zoom:detach", {
+        detail: { zoom: b }
+      }));
+    }), L = L.filter(function(s) {
+      return z.indexOf(s) === -1;
+    }), b;
+  }, f = function(a, n) {
+    var u = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    return L.forEach(function(z) {
+      z.addEventListener("medium-zoom:" + a, n, u);
+    }), K.push({ type: "medium-zoom:" + a, listener: n, options: u }), b;
+  }, v = function(a, n) {
+    var u = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    return L.forEach(function(z) {
+      z.removeEventListener("medium-zoom:" + a, n, u);
+    }), K = K.filter(function(z) {
+      return !(z.type === "medium-zoom:" + a && z.listener.toString() === n.toString());
+    }), b;
+  }, M = function() {
+    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target, u = function() {
+      var s = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight,
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+      }, w = void 0, W = void 0;
+      if (d.container)
+        if (d.container instanceof Object)
+          s = B({}, s, d.container), w = s.width - s.left - s.right - d.margin * 2, W = s.height - s.top - s.bottom - d.margin * 2;
+        else {
+          var P = ee(d.container) ? d.container : document.querySelector(d.container), D = P.getBoundingClientRect(), ie = D.width, fe = D.height, ve = D.left, ze = D.top;
+          s = B({}, s, {
+            width: ie,
+            height: fe,
+            left: ve,
+            top: ze
+          });
+        }
+      w = w || s.width - d.margin * 2, W = W || s.height - d.margin * 2;
+      var _ = i.zoomedHd || i.original, ye = me(_) ? w : _.naturalWidth || w, be = me(_) ? W : _.naturalHeight || W, G = _.getBoundingClientRect(), xe = G.top, we = G.left, oe = G.width, re = G.height, Se = Math.min(Math.max(oe, ye), w) / oe, Ee = Math.min(Math.max(re, be), W) / re, ae = Math.min(Se, Ee), Ce = (-we + (w - oe) / 2 + d.margin + s.left) / ae, ke = (-xe + (W - re) / 2 + d.margin + s.top) / ae, le = "scale(" + ae + ") translate3d(" + Ce + "px, " + ke + "px, 0)";
+      i.zoomed.style.transform = le, i.zoomedHd && (i.zoomedHd.style.transform = le);
+    };
+    return new h(function(z) {
+      if (n && L.indexOf(n) === -1) {
+        z(b);
+        return;
+      }
+      var s = function ie() {
+        N = !1, i.zoomed.removeEventListener("transitionend", ie), i.original.dispatchEvent(F("medium-zoom:opened", {
+          detail: { zoom: b }
+        })), z(b);
+      };
+      if (i.zoomed) {
+        z(b);
+        return;
+      }
+      if (n)
+        i.original = n;
+      else if (L.length > 0) {
+        var w = L;
+        i.original = w[0];
+      } else {
+        z(b);
+        return;
+      }
+      if (i.original.dispatchEvent(F("medium-zoom:open", {
+        detail: { zoom: b }
+      })), he = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, N = !0, i.zoomed = qe(i.original), document.body.appendChild(J), d.template) {
+        var W = ee(d.template) ? d.template : document.querySelector(d.template);
+        i.template = document.createElement("div"), i.template.appendChild(W.content.cloneNode(!0)), document.body.appendChild(i.template);
+      }
+      if (i.original.parentElement && i.original.parentElement.tagName === "PICTURE" && i.original.currentSrc && (i.zoomed.src = i.original.currentSrc), document.body.appendChild(i.zoomed), window.requestAnimationFrame(function() {
+        document.body.classList.add("medium-zoom--opened");
+      }), i.original.classList.add("medium-zoom-image--hidden"), i.zoomed.classList.add("medium-zoom-image--opened"), i.zoomed.addEventListener("click", y), i.zoomed.addEventListener("transitionend", s), i.original.getAttribute("data-zoom-src")) {
+        i.zoomedHd = i.zoomed.cloneNode(), i.zoomedHd.removeAttribute("srcset"), i.zoomedHd.removeAttribute("sizes"), i.zoomedHd.removeAttribute("loading"), i.zoomedHd.src = i.zoomed.getAttribute("data-zoom-src"), i.zoomedHd.onerror = function() {
+          clearInterval(P), console.warn("Unable to reach the zoom image target " + i.zoomedHd.src), i.zoomedHd = null, u();
+        };
+        var P = setInterval(function() {
+          i.zoomedHd.complete && (clearInterval(P), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), u());
+        }, 10);
+      } else if (i.original.hasAttribute("srcset")) {
+        i.zoomedHd = i.zoomed.cloneNode(), i.zoomedHd.removeAttribute("sizes"), i.zoomedHd.removeAttribute("loading");
+        var D = i.zoomedHd.addEventListener("load", function() {
+          i.zoomedHd.removeEventListener("load", D), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", y), document.body.appendChild(i.zoomedHd), u();
+        });
+      } else
+        u();
+    });
+  }, y = function() {
+    return new h(function(a) {
+      if (N || !i.original) {
+        a(b);
+        return;
+      }
+      var n = function u() {
+        i.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(i.zoomed), i.zoomedHd && document.body.removeChild(i.zoomedHd), document.body.removeChild(J), i.zoomed.classList.remove("medium-zoom-image--opened"), i.template && document.body.removeChild(i.template), N = !1, i.zoomed.removeEventListener("transitionend", u), i.original.dispatchEvent(F("medium-zoom:closed", {
+          detail: { zoom: b }
+        })), i.original = null, i.zoomed = null, i.zoomedHd = null, i.template = null, a(b);
+      };
+      N = !0, document.body.classList.remove("medium-zoom--opened"), i.zoomed.style.transform = "", i.zoomedHd && (i.zoomedHd.style.transform = ""), i.template && (i.template.style.transition = "opacity 150ms", i.template.style.opacity = 0), i.original.dispatchEvent(F("medium-zoom:close", {
+        detail: { zoom: b }
+      })), i.zoomed.addEventListener("transitionend", n);
+    });
+  }, R = function() {
+    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target;
+    return i.original ? y() : M({ target: n });
+  }, k = function() {
+    return d;
+  }, te = function() {
+    return L;
+  }, pe = function() {
+    return i.original;
+  }, L = [], K = [], N = !1, he = 0, d = o, i = {
+    original: null,
+    zoomed: null,
+    zoomedHd: null,
+    template: null
+    // If the selector is omitted, it's replaced by the options
+  };
+  Object.prototype.toString.call(t) === "[object Object]" ? d = t : (t || typeof t == "string") && I(t), d = B({
+    margin: 0,
+    background: "#fff",
+    scrollOffset: 40,
+    container: null,
+    template: null
+  }, d);
+  var J = Ye(d.background);
+  document.addEventListener("click", r), document.addEventListener("keyup", p), document.addEventListener("scroll", g), window.addEventListener("resize", y);
+  var b = {
+    open: M,
+    close: y,
+    toggle: R,
+    update: C,
+    clone: Z,
+    attach: I,
+    detach: $,
+    on: f,
+    off: v,
+    getOptions: k,
+    getImages: te,
+    getZoomedImage: pe
+  };
+  return b;
+};
+function Ke(e, t) {
+  t === void 0 && (t = {});
+  var o = t.insertAt;
+  if (!(typeof document > "u")) {
+    var h = document.head || document.getElementsByTagName("head")[0], r = document.createElement("style");
+    r.type = "text/css", o === "top" && h.firstChild ? h.insertBefore(r, h.firstChild) : h.appendChild(r), r.styleSheet ? r.styleSheet.cssText = e : r.appendChild(document.createTextNode(e));
+  }
+}
+var Je = ".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}";
+Ke(Je);
+const Ge = se`
+  :host([effect='jump']) .container,
+  :host([effect='text-reveal']) .container,
+  :host([effect='zoom']) .container {
+    overflow: initial;
+  }
+
+  :host([effect='jump']) .highlighter {
+    transition:
+      all var(--transition-duration, 0.5s) var(--easing, linear),
+      transform var(--transition-transform-duration, 0.5s) var(--easing, linear);
+  }
+
+  :host([effect='jump']) .highlighter:hover {
+    transform: translateY(
+      calc(var(--highlightable-item-effect-jump-distance, 0) * -1)
+    );
+  }
+
+  .highlighter--effect-text-reveal,
+  :host([effect='zoom']) .highlighter--zoom-style-within-borders {
+    overflow: hidden;
+  }
+
+  :host([effect='zoom'][zoom-style='pop-out']) .highlighter:hover {
+    z-index: 3;
+    animation: none;
+  }
+
+  :host([effect='zoom'][zoom-style='pop-out']) .highlighter:not(:hover) {
+    animation: drop-z var(--transition-transform-duration) forwards;
+  }
+
+  @keyframes drop-z {
+    0% {
+      z-index: 2;
+    }
+
+    99% {
+      z-index: 2;
+    }
+
+    100% {
+      z-index: 0;
+    }
+  }
+
+  .highlighter--can-hover:hover::after,
+  .highlighter--selected::after,
+  .highlighter--color-overlay::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    transition: all var(--transition-duration, 0.5s) var(--easing, linear);
+  }
+
+  .highlighter--can-hover:hover::after,
+  .highlighter--selected::after {
+    outline: 2px solid var(--cx-color-primary);
+  }
+
+  .highlighter--border:hover .image {
+    border-color: var(
+      --highlightable-item-highlight-border-color,
+      var(--cx-color-primary)
+    );
+  }
+
+  .highlighter--color-overlay::after {
+    border-radius: var(--border-radius, none);
+  }
+
+  .highlighter--color-overlay:hover::after {
+    background-color: var(
+      --highlightable-item-highlight-color-overlay-color,
+      transparent
+    );
+  }
+
+  .highlighter--drop-shadow:hover .image {
+    box-shadow: var(--highlightable-item-highlight-drop-shadow, none);
+  }
+
+  .highlighter--background:hover .highlightable-item {
+    --content-background-color: var(
+      --highlightable-item-highlight-background,
+      transparent
+    );
+    --highlightable-item-background-color: var(
+      --highlightable-item-highlight-background,
+      transparent
+    );
+  }
+
+  .highlighter--opacity {
+    opacity: var(--highlightable-item-highlight-opacity, 1);
+  }
+
+  :host([effect='zoom'][zoom-style='within-borders']) .highlighter .image,
+  :host([effect='zoom'][zoom-style='pop-out']) .highlighter {
+    transition: transform var(--transition-transform-duration, 0.5s)
+      var(--easing, linear);
+  }
+
+  :host([effect='zoom'][zoom-style='within-borders']) .highlighter:hover .image,
+  :host([effect='zoom'][zoom-style='pop-out']) .highlighter:hover {
+    transform: scale(var(--highlightable-item-effect-zoom-scale, 1));
+  }
+
+  .highlightable-item {
+    transition:
+      background-color var(--transition-duration, 0.5s) var(--easing, linear),
+      border-color var(--transition-duration, 0.5s) var(--easing, linear),
+      box-shadow var(--transition-duration, 0.5s) var(--easing, linear),
+      opacity var(--transition-duration, 0.5s) var(--easing, linear),
+      transform var(--transition-transform-duration, 0.5s) var(--easing, linear),
+      visibility var(--transition-duration, 0.5s) var(--easing, linear);
+  }
+`, Qe = se`
+  :host {
+    --justify-content: flex-start;
+    --border-radius: 0px;
+    --border: 0px;
+    --padding: 0px;
+    --details-color: light-dark(
+      var(--cx-color-neutral-1000),
+      var(--cx-color-neutral-0)
+    );
+    --details-font-size: 16px;
+    --details-letter-spacing: 0px;
+    --details-line-height: 1.5;
+    --details-text-align: left;
+    --easing: ease-in-out;
+    --header-text-align: left;
+    --header-font-size: 24px;
+    --header-line-height: 1.5;
+    --header-letter-spacing: 0px;
+    --header-color: light-dark(
+      var(--cx-color-neutral-1000),
+      var(--cx-color-neutral-0)
+    );
+    --content-background-color: light-dark(#00000070, #00000070);
+    --content-margin: 0px;
+    --content-min-height: 50px;
+    --content-padding: 5px 10px 5px 10px;
+    --content-width: 200px;
+    --content-border: 0;
+    --content-border-radius: 0px;
+    --transition-duration: 0.5s;
+    --image-min-width: 0px;
+    --image-max-width: 1000px;
+    --image-min-height: 0px;
+    --image-max-height: 500px;
+    --highlightable-item-highlight-border-color: var(--cx-color-primary);
+    --highlightable-item-highlight-color-overlay-color: transparent;
+    --highlightable-item-highlight-drop-shadow: 0 0 0 0
+      light-dark(transparent, transparent);
+    --highlightable-item-highlight-background: transparent;
+    --highlightable-item-highlight-siblings-fade-out-opacity: 0.5;
+    --highlightable-item-effect-zoom-scale: 1.1;
+    --highlightable-item-effect-zoom-overflow: hidden;
+    --highlightable-item-effect-text-reveal-distance: 30px;
+    --highlightable-item-effect-jump-distance: 10px;
+    --transition-transform-duration: 0.5s;
+
+    display: flex;
+    width: var(--width, 100%);
+    height: var(--height, auto);
+    max-height: 100%;
+  }
+
+  ${Ge}
+
+  :host([block]) {
+    width: 100%;
+  }
+
+  :host([height-mode='auto']) {
+    height: auto;
+  }
+
+  .container {
+    container-name: asset-container;
+    container-type: inline-size;
+    padding: var(--padding, 0px);
+    position: relative;
+    width: 100%;
+    max-height: 100%;
+    border-color: var(--border-color, transparent);
+    border-style: var(--border-style, solid);
+    border-width: var(--border-width, 0px);
+    overflow: hidden;
+  }
+
+  .container:has(.highlighter:focus-visible) {
+    outline: var(--cx-focus-ring);
+    outline-offset: var(--cx-focus-ring-offset);
+  }
+
+  .container--empty {
+    height: var(--height, 300px);
+    min-height: var(--min-height, 100%);
+  }
+
+  .container--empty::before {
+    align-items: center;
+    background-color: #000000;
+    color: #ffffff;
+    content: attr(data-empty-label);
+    display: flex;
+    font-family: var(--cx-font-sans);
+    font-size: clamp(
+      var(--cx-font-size-x-small),
+      4cqw,
+      var(--cx-font-size-large)
+    );
+    font-weight: var(--cx-font-weight-semibold);
+    height: 100%;
+    justify-content: center;
+    line-height: 1;
+    text-align: center;
+    text-shadow: 0.05em 0.05em 0.1em #000;
+    vertical-align: middle;
+    width: 100%;
+  }
+
+  .container--empty.container--loading::before {
+    content: '';
+  }
+
+  .container--resizing {
+    outline: 2px dashed var(--cx-color-primary);
+    user-select: none;
+  }
+
+  .highlighter {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .highlighter:focus-visible {
+    outline: none;
+  }
+
+  .highlightable-item {
+    background-color: var(--highlightable-item-background-color);
+    display: flex;
+    align-items: center;
+    justify-content: var(--justify-content);
+    width: 100%;
+    height: 100%;
+  }
+
+  .highlightable-item--has-action {
+    cursor: pointer;
+  }
+
+  .image {
+    border-radius: var(--border-radius);
+    border: var(--border) solid;
+    display: block;
+    transition: inherit;
+  }
+
+  .image--fill {
+    object-fit: fill;
+  }
+
+  .image--contain {
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .image--cover {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+
+  .image--none {
+    object-fit: none;
+  }
+
+  .image--scale-down {
+    object-fit: scale-down;
+  }
+
+  .image--hidden {
+    display: none;
+  }
+
+  .image--can-zoom {
+    cursor: zoom-in;
+  }
+
+  .image--has-action {
+    cursor: pointer;
+  }
+
+  .image--contain.image--landscape {
+    width: 100%;
+    height: auto;
+  }
+
+  .image--contain.image--portrait {
+    width: auto;
+    height: 100%;
+  }
+
+  .popup-container::part(popup) {
+    z-index: -1;
+  }
+
+  .zoom-image {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    opacity: 1;
+  }
+
+  .zoom-image-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: -1;
+  }
+
+  .zoom-image--hidden {
+    opacity: 0;
+  }
+
+  .medium-zoom-image--hidden {
+    opacity: 0;
+  }
+
+  .skeleton {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .skeleton cx-skeleton {
+    width: 100%;
+    height: 100%;
+    --border-radius: 0;
+  }
+
+  .fallback {
+    position: relative;
+  }
+
+  .fallback cx-icon {
+    --font-size: var(--cx-font-size-4x-large);
+  }
+`;
+var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, c = (e, t, o, h) => {
+  for (var r = h > 1 ? void 0 : h ? tt(t, o) : t, g = e.length - 1, p; g >= 0; g--)
+    (p = e[g]) && (r = (h ? p(t, o, r) : p(r)) || r);
+  return h && r && et(t, o, r), r;
+};
+let l = class extends A {
+  constructor() {
+    super(...arguments), this.localize = new Me(this), this.isLoaded = !1, this.isError = !1, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = $e.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = U.Automatic, this.isZoomed = !1, this.imageRatio = 1, this.parsedAlt = "", this.parsedAltDarkMode = "", this.zoom = null, this.lastPatchedWidth = null;
+  }
+  get currentAltValue() {
+    return this.alt;
+  }
+  get currentSrc() {
+    return this.src;
+  }
+  get highlighterTabindex() {
+    return this.hasZoomAction && this.clickHandlerType === U.Automatic ? "0" : void 0;
+  }
+  get highlighterRole() {
+    return this.hasZoomAction && this.clickHandlerType === U.Automatic ? "button" : "img";
+  }
+  get highlighterClass() {
+    return {
+      "highlightable-item": !0,
+      "highlightable-item--effect-text-reveal": this.effect === Y.TextReveal,
+      [`highlightable-item--text-reveal-style-${this.textRevealStyle}`]: !0
+    };
+  }
+  get imageClass() {
+    let e = "landscape", t = this.ratio;
+    const o = this.width.endsWith("%") ? this.clientWidth : Number.parseFloat(this.width), h = this.isResizing ? this.resizeSize.width : o, r = this.isResizing ? this.resizeSize.height : Number.parseFloat(this.height);
+    return h && r && (t = h / r), t > this.imageRatio && (e = "portrait"), {
+      image: !0,
+      [`image--${this.objectFit}`]: !0,
+      [`image--${e}`]: !0,
+      [`image--height-${this.heightMode}`]: !0,
+      "image--can-zoom": this.canZoom,
+      "image--has-action": this.hasZoomAction,
+      "image--hidden": !this.currentSrc && !this.placeholder || this.isError && this.fallback
+    };
+  }
+  /**
+   * Whether the image have zoom action.
+   */
+  get hasZoomAction() {
+    return this.canZoom;
+  }
+  runFirstUpdated() {
+    this.theme = this.getTheme();
+  }
+  runConnectedCallback() {
+    this.hasUpdated && this.requestUpdate("canZoom");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.zoom && this.zoom.detach();
+  }
+  /**
+   * Handle mouse enter event.
+   */
+  handleMouseEnter() {
+    this.isHovering = !0;
+  }
+  /**
+   * Handle mouse leave event.
+   */
+  handleMouseLeave() {
+    this.isHovering = !1;
+  }
+  /**
+   * If image is currently zoomed, close the zoom.
+   */
+  handleBlur() {
+    this.isZoomed && this.zoom?.close();
+  }
+  handleKeyDown(e) {
+    e.target === this.highlighterElement && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.highlighterElement.click());
+  }
+  async handleCanZoomChange() {
+    await this.updateComplete, this.hasZoomAction ? this.initZoom() : (this.zoom?.detach(), this.zoom = null);
+  }
+  async handleObjectFitChange() {
+    await this.updateComplete, this.requestUpdate();
+  }
+  handleSrcChange() {
+    this.isLoaded = !1, this.isError = !1;
+  }
+  async initZoom() {
+    this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = Xe(this.zoomImageElement, {
+      background: "light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8))",
+      margin: 0,
+      scrollOffset: 0
+    }), this.zoom.on("open", () => {
+      this.emit("cx-image-zoom-open"), this.isZoomed = !0;
+    }), this.zoom.on("close", () => {
+      this.emit("cx-image-zoom-close"), this.isZoomed = !1;
+    }));
+  }
+  handleLoad(e) {
+    const t = e?.currentTarget ?? this.imageElement;
+    if (!t)
+      return;
+    const { naturalHeight: o, naturalWidth: h } = t;
+    this.imageRatio = h / o, this.isLoaded || (this.emit("cx-load"), this.isLoaded = !0, this.isError = !1);
+  }
+  handleError() {
+    this.emit("cx-error"), this.isLoaded = !0, this.isError = !0;
+  }
+  handleSizeChange() {
+    const e = this.isResizing ? `${this.resizeSize.width}px` : this.width, t = this.isResizing ? `${this.resizeSize.height}px` : this.height;
+    this.width || this.isResizing ? this.style.setProperty("--width", e) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", t) : this.style.removeProperty("--height");
+  }
+  handleResize(e) {
+    const { entries: t } = e.detail;
+    for (const o of t)
+      o.target === this.highlighterElement && this.width.endsWith("%") && !this.isResizing && Math.abs(o.contentRect.width - (this.lastPatchedWidth ?? 0)) > 1 && this.updateLastPatchedWidth(o.contentRect.width);
+  }
+  updateLastPatchedWidth(e) {
+    this.lastPatchedWidth = e, this.requestUpdate();
+  }
+  /**
+   * Support CMS5 click action for the image.
+   */
+  handleClickAction(e) {
+    !(e.target instanceof HTMLElement) || this.clickHandlerType === U.Manual || this.canZoom && this.openZoom();
+  }
+  updated(e) {
+    super.updated(e), (e.has("width") || e.has("height") || e.has("resizeSize")) && this.handleSizeChange();
+  }
+  openZoom() {
+    this.zoom && this.zoom.open();
+  }
+  renderContent() {
+    const e = this.currentSrc, t = this.currentAltValue;
+    return T`
+      <div
+        part="content"
+        slot="anchor"
+        class=${j(this.highlighterClass)}
+      >
+        <img
+          part="image"
+          class=${j(this.imageClass)}
+          src=${e || this.placeholder}
+          alt=${t}
+          aria-label=${t}
+          crossorigin="anonymous"
+          @load=${this.handleLoad}
+          @error=${this.handleError}
+          loading=${this.htmlLoading}
+        />
+      </div>
+    `;
+  }
+  render() {
+    const e = this.hasZoomAction, t = this.currentAltValue, o = !this.currentSrc && !this.placeholder;
+    return T`<div
+      part="base"
+      class=${j({
+      container: !0,
+      "container--empty": o,
+      "container--loading": this.loading,
+      "container--resizing": this.resizable && this.isResizeActive
+    })}
+      style=${je({
+      "--easing": this.easeCSSVariable
+    })}
+      data-empty-label=${this.localize.term("emptyImage")}
+      @click=${this.startResizing}
+      @keydown=${this.handleKeyDown}
+    >
+      <cx-resize-observer @cx-resize=${this.handleResize}>
+        <div
+          part="highlighter"
+          tabindex=${De(this.highlighterTabindex)}
+          role=${this.highlighterRole}
+          aria-label=${t}
+          aria-roledescription=${this.localize.term("image")}
+          class=${j(o ? {} : this.getHighlighterClass())}
+          @click=${this.handleClickAction}
+          @mouseenter=${this.handleMouseEnter}
+          @mouseleave=${this.handleMouseLeave}
+          @blur=${this.handleBlur}
+        >
+          ${V(
+      o,
+      () => Le,
+      () => V(
+        this.effect === Y.Jump || this.effect === Y.Zoom,
+        () => T`
+                  <cx-popup
+                    class="popup-container"
+                    strategy="absolute"
+                    active
+                    placement="center"
+                    sync="both"
+                  >
+                    ${this.renderContent()}
+                  </cx-popup>
+                `,
+        () => this.renderContent()
+      )
+    )}
+          <div class="zoom-image-container">
+            ${V(
+      e,
+      () => T`<img
+                  part="zoom-image"
+                  class=${j({
+        "zoom-image": !0,
+        "zoom-image--hidden": !this.isZoomed
+      })}
+                  src=${this.currentSrc || this.placeholder}
+                  alt=""
+                  aria-hidden="true"
+                  decoding="async"
+                  draggable="false"
+                  crossorigin="anonymous"
+                />`
+    )}
+          </div>
+          ${V(
+      this.skeleton && !this.isLoaded && !this.isError || this.loading,
+      () => T`
+                <slot name="skeleton" part="skeleton">
+                  <div
+                    class=${j({
+        skeleton: !0
+      })}
+                  >
+                    <cx-skeleton effect="sheen"></cx-skeleton>
+                  </div>
+                </slot>
+              `
+    )}
+          ${V(this.isError && this.fallback, () => T`
+              <slot name="fallback" part="fallback">
+                <cx-space
+                  class=${j({ fallback: !0 })}
+                  direction="column"
+                  align-items="center"
+                  justify-content="center"
+                >
+                  <cx-icon name="hide_image" part="fallback-icon"> </cx-icon>
+                </cx-space>
+              </slot>
+            `)}
+        </div>
+      </cx-resize-observer>
+      ${V(this.resizable && this.isResizeActive, () => this.renderResizer())}
+    </div>`;
+  }
+};
+l.styles = [We, _e, Qe];
+l.dependencies = {
+  "cx-icon": Te,
+  "cx-popup": Be,
+  "cx-resize-observer": Ze,
+  "cx-skeleton": Ie,
+  "cx-space": Ne
+};
+c([
+  X(".image")
+], l.prototype, "imageElement", 2);
+c([
+  X(".zoom-image")
+], l.prototype, "zoomImageElement", 2);
+c([
+  X(".highlighter")
+], l.prototype, "highlighterElement", 2);
+c([
+  H()
+], l.prototype, "isLoaded", 2);
+c([
+  H()
+], l.prototype, "isError", 2);
+c([
+  m({ reflect: !0, type: String })
+], l.prototype, "src", 2);
+c([
+  m({ reflect: !0, type: String })
+], l.prototype, "placeholder", 2);
+c([
+  m({ reflect: !0, type: String })
+], l.prototype, "alt", 2);
+c([
+  m({ attribute: "object-fit", reflect: !0 })
+], l.prototype, "objectFit", 2);
+c([
+  m({ reflect: !0, type: Boolean })
+], l.prototype, "skeleton", 2);
+c([
+  m({ reflect: !0, type: Boolean })
+], l.prototype, "fallback", 2);
+c([
+  m({ attribute: "can-zoom", reflect: !0, type: Boolean })
+], l.prototype, "canZoom", 2);
+c([
+  m({ reflect: !0, type: Boolean })
+], l.prototype, "loading", 2);
+c([
+  m({ reflect: !0, type: Boolean })
+], l.prototype, "block", 2);
+c([
+  m({ attribute: "html-loading", reflect: !0, type: String })
+], l.prototype, "htmlLoading", 2);
+c([
+  m({ attribute: "click-handler-type", reflect: !0, type: String })
+], l.prototype, "clickHandlerType", 2);
+c([
+  H()
+], l.prototype, "isZoomed", 2);
+c([
+  H()
+], l.prototype, "imageRatio", 2);
+c([
+  H()
+], l.prototype, "parsedAlt", 2);
+c([
+  H()
+], l.prototype, "parsedAltDarkMode", 2);
+c([
+  q("isLoaded"),
+  q("canZoom", { waitUntilFirstUpdate: !0 })
+], l.prototype, "handleCanZoomChange", 1);
+c([
+  q("objectFit", { waitUntilFirstUpdate: !0 })
+], l.prototype, "handleObjectFitChange", 1);
+c([
+  q("src"),
+  q("srcDarkMode")
+], l.prototype, "handleSrcChange", 1);
+c([
+  Oe(100)
+], l.prototype, "updateLastPatchedWidth", 1);
+l = c([
+  Ae("cx-image")
+], l);
+export {
+  l as C,
+  Pe as H,
+  A as R,
+  S as a,
+  Y as b,
+  U as c,
+  ue as d,
+  ge as e,
+  ne as f,
+  _e as r
+};