import { x as D, i as se, E as ge } from "./lit-element.jLBm65_O.js";
import { C as Le, n as d } from "./lib-cortex-element.CVMmyPMC.js";
import { r as L } 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.CRO4Odto.js";
import { c as Oe } from "./custom-element.L4WJXn1j.js";
import { d as Te } from "./debounce.DaHuiSGU.js";
import { L as Ae } from "./i18n.BABe9hN4.js";
import { w as q } from "./watch.BCJD77bD.js";
import { e as j } from "./class-map.BiVq-cVR.js";
import { o as Me } from "./if-defined.BRoBj_Rp.js";
import { e as De, i as je } from "./directive.oAbCiebi.js";
import { m as Be } from "./directive-helpers.Dm4rc594.js";
import { o as Ie } from "./style-map.llVFPd__.js";
import { n as P } from "./when.Dr1es41R.js";
import _e from "../components/icon.js";
import Ze from "../components/popup.js";
import Ne from "../components/resize-observer.js";
import Pe from "../components/skeleton.js";
import Ve from "../components/space.js";
var Fe = /* @__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))(Fe || {}), Y = /* @__PURE__ */ ((e) => (e.Jump = "jump", e.None = "none", e.TextReveal = "text-reveal", e.Zoom = "zoom", e))(Y || {}), ue = /* @__PURE__ */ ((e) => (e.PopOut = "pop-out", e.WithinBorders = "within-borders", e))(ue || {}), pe = /* @__PURE__ */ ((e) => (e.Fade = "fade", e.Slide = "slide", e))(pe || {}), ne = /* @__PURE__ */ ((e) => (e.Auto = "auto", e.Fixed = "fixed", e))(ne || {}), Ue = Object.defineProperty, C = (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 && Ue(t, o, r), r;
};
class S extends Le {
  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 = pe.Slide, this.zoomStyle = ue.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;
  }
}
C([
  X("slot")
], S.prototype, "slotEl");
C([
  d({ attribute: "has-event", reflect: !0, type: Boolean })
], S.prototype, "hasEvent");
C([
  d({ reflect: !0, type: String })
], S.prototype, "easing");
C([
  d({ attribute: "highlight-border", reflect: !0, type: Boolean })
], S.prototype, "highlightBorder");
C([
  d({
    attribute: "highlight-color-overlay",
    reflect: !0,
    type: Boolean
  })
], S.prototype, "highlightColorOverlay");
C([
  d({
    attribute: "highlight-drop-shadow",
    reflect: !0,
    type: Boolean
  })
], S.prototype, "highlightDropShadow");
C([
  d({ attribute: "highlight-background", reflect: !0, type: Boolean })
], S.prototype, "highlightBackground");
C([
  d({ attribute: "highlight-opacity", reflect: !0, type: Boolean })
], S.prototype, "highlightOpacity");
C([
  d({ attribute: "effect", reflect: !0, type: String })
], S.prototype, "effect");
C([
  d({
    attribute: "text-reveal-style",
    reflect: !0,
    type: String
  })
], S.prototype, "textRevealStyle");
C([
  d({
    attribute: "zoom-style",
    reflect: !0,
    type: String
  })
], S.prototype, "zoomStyle");
C([
  L()
], S.prototype, "hasSlotContent");
C([
  L()
], S.prototype, "isCustomSlot");
C([
  L()
], S.prototype, "isHovering");
var Ye = Object.defineProperty, T = (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 && Ye(t, o, r), r;
};
class O extends S {
  constructor() {
    super(), this.width = "", this.height = "", this.resizable = !1, this.heightMode = ne.Fixed, this.noLimit = !1, this.parentContainer = null, 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.parentContainer?.clientWidth || 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 E = {
      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", A = Number(f.replace("px", "")), z = Number(v.replace("px", "")), H = getComputedStyle(this.parentElement).getPropertyValue("--padding").trim() || "0px", k = Number(H.replace("px", "")), te = Math.max(
        A + z,
        k * 2
      );
      this.maxWidth = Math.max(this.maxWidth - te, 0);
    }
    this.emit("cx-resize-start", {
      detail: {
        element: this,
        event: t
      }
    });
    const I = ($) => {
      g = Number(E.width) + (o ? r.x - $.pageX : $.pageX - r.x), p = Number(E.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 A = this.maxWidth ?? 1 / 0, z = this.maxHeight ?? 1 / 0;
        let H = Math.min(f, A), k = H / this.ratio;
        k > z && (k = z, H = k * this.ratio), f = H, 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));
    }, _ = ($) => {
      if (g > 0 && p > 0) {
        let f = g, v = p;
        if (this.keepRatio) {
          const A = this.maxWidth ?? 1 / 0, z = this.maxHeight ?? 1 / 0;
          let H = Math.min(f, A), k = H / this.ratio;
          k > z && (k = z, H = k * this.ratio), f = H, 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",
        I
      );
    };
    this.ownerDocument.defaultView?.addEventListener(
      "mousemove",
      I
    ), this.ownerDocument.defaultView?.addEventListener("mouseup", _, {
      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 D`<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>`;
  }
}
T([
  X('[part="base"]')
], O.prototype, "containingElement");
T([
  d({ reflect: !0, type: String })
], O.prototype, "width");
T([
  d({ reflect: !0, type: String })
], O.prototype, "height");
T([
  d({ type: Boolean })
], O.prototype, "resizable");
T([
  d({ attribute: "height-mode", reflect: !0, type: String })
], O.prototype, "heightMode");
T([
  d({ attribute: "no-limit", reflect: !0, type: Boolean })
], O.prototype, "noLimit");
T([
  d({ attribute: !1, type: Object })
], O.prototype, "parentContainer");
T([
  L()
], O.prototype, "isResizeActive");
T([
  L()
], O.prototype, "isResizing");
T([
  L()
], O.prototype, "resizeSize");
const qe = se`.resizer{background-color:var(--cx-color-primary);z-index:100;width:8px;height:8px;position:absolute}.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 || {});
/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const Xe = De(class extends je {
  constructor() {
    super(...arguments), this.key = ge;
  }
  render(e, t) {
    return this.key = e, t;
  }
  update(e, [t, o]) {
    return t !== this.key && (Be(e), this.key = t), o;
  }
});
/*! 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";
}, Ke = 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) : Ke(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`);
  }
}, Je = function(t) {
  var o = document.createElement("div");
  return o.classList.add("medium-zoom-overlay"), o.style.background = t, o;
}, Ge = function(t) {
  var o = t.getBoundingClientRect(), h = o.top, r = o.left, g = o.width, p = o.height, E = t.cloneNode(), I = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, _ = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
  return E.removeAttribute("id"), E.style.position = "absolute", E.style.top = h + I + "px", E.style.left = r + _ + "px", E.style.width = g + "px", E.style.height = p + "px", E.style.transform = "", E;
}, V = 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;
}, Qe = 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) {
      z();
      return;
    }
    R.indexOf(n) !== -1 && H({ target: n });
  }, g = function() {
    if (!(Z || !i.original)) {
      var a = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
      Math.abs(he - a) > c.scrollOffset && setTimeout(z, 150);
    }
  }, p = function(a) {
    var n = a.key || a.keyCode;
    (n === "Escape" || n === "Esc" || n === 27) && z();
  }, E = 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({}, c.container, a.container)), a.template) {
      var u = ee(a.template) ? a.template : document.querySelector(a.template);
      n.template = u;
    }
    return c = B({}, c, n), R.forEach(function(y) {
      y.dispatchEvent(V("medium-zoom:update", {
        detail: { zoom: b }
      }));
    }), b;
  }, I = function() {
    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
    return e(B({}, c, a));
  }, _ = function() {
    for (var a = arguments.length, n = Array(a), u = 0; u < a; u++)
      n[u] = arguments[u];
    var y = n.reduce(function(s, w) {
      return [].concat(s, ce(w));
    }, []);
    return y.filter(function(s) {
      return R.indexOf(s) === -1;
    }).forEach(function(s) {
      R.push(s), s.classList.add("medium-zoom-image");
    }), K.forEach(function(s) {
      var w = s.type, W = s.listener, N = s.options;
      y.forEach(function(M) {
        M.addEventListener(w, W, N);
      });
    }), b;
  }, $ = function() {
    for (var a = arguments.length, n = Array(a), u = 0; u < a; u++)
      n[u] = arguments[u];
    i.zoomed && z();
    var y = n.length > 0 ? n.reduce(function(s, w) {
      return [].concat(s, ce(w));
    }, []) : R;
    return y.forEach(function(s) {
      s.classList.remove("medium-zoom-image"), s.dispatchEvent(V("medium-zoom:detach", {
        detail: { zoom: b }
      }));
    }), R = R.filter(function(s) {
      return y.indexOf(s) === -1;
    }), b;
  }, f = function(a, n) {
    var u = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
    return R.forEach(function(y) {
      y.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 R.forEach(function(y) {
      y.removeEventListener("medium-zoom:" + a, n, u);
    }), K = K.filter(function(y) {
      return !(y.type === "medium-zoom:" + a && y.listener.toString() === n.toString());
    }), b;
  }, A = 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 (c.container)
        if (c.container instanceof Object)
          s = B({}, s, c.container), w = s.width - s.left - s.right - c.margin * 2, W = s.height - s.top - s.bottom - c.margin * 2;
        else {
          var N = ee(c.container) ? c.container : document.querySelector(c.container), M = N.getBoundingClientRect(), ie = M.width, ve = M.height, ye = M.left, ze = M.top;
          s = B({}, s, {
            width: ie,
            height: ve,
            left: ye,
            top: ze
          });
        }
      w = w || s.width - c.margin * 2, W = W || s.height - c.margin * 2;
      var F = i.zoomedHd || i.original, be = me(F) ? w : F.naturalWidth || w, xe = me(F) ? W : F.naturalHeight || W, G = F.getBoundingClientRect(), we = G.top, Se = G.left, oe = G.width, re = G.height, Ce = Math.min(Math.max(oe, be), w) / oe, Ee = Math.min(Math.max(re, xe), W) / re, ae = Math.min(Ce, Ee), ke = (-Se + (w - oe) / 2 + c.margin + s.left) / ae, Re = (-we + (W - re) / 2 + c.margin + s.top) / ae, le = "scale(" + ae + ") translate3d(" + ke + "px, " + Re + "px, 0)";
      i.zoomed.style.transform = le, i.zoomedHd && (i.zoomedHd.style.transform = le);
    };
    return new h(function(y) {
      if (n && R.indexOf(n) === -1) {
        y(b);
        return;
      }
      var s = function ie() {
        Z = !1, i.zoomed.removeEventListener("transitionend", ie), i.original.dispatchEvent(V("medium-zoom:opened", {
          detail: { zoom: b }
        })), y(b);
      };
      if (i.zoomed) {
        y(b);
        return;
      }
      if (n)
        i.original = n;
      else if (R.length > 0) {
        var w = R;
        i.original = w[0];
      } else {
        y(b);
        return;
      }
      if (i.original.dispatchEvent(V("medium-zoom:open", {
        detail: { zoom: b }
      })), he = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, Z = !0, i.zoomed = Ge(i.original), document.body.appendChild(J), c.template) {
        var W = ee(c.template) ? c.template : document.querySelector(c.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", z), 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(N), console.warn("Unable to reach the zoom image target " + i.zoomedHd.src), i.zoomedHd = null, u();
        };
        var N = setInterval(function() {
          i.zoomedHd.complete && (clearInterval(N), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", z), 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 M = i.zoomedHd.addEventListener("load", function() {
          i.zoomedHd.removeEventListener("load", M), i.zoomedHd.classList.add("medium-zoom-image--opened"), i.zoomedHd.addEventListener("click", z), document.body.appendChild(i.zoomedHd), u();
        });
      } else
        u();
    });
  }, z = function() {
    return new h(function(a) {
      if (Z || !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), Z = !1, i.zoomed.removeEventListener("transitionend", u), i.original.dispatchEvent(V("medium-zoom:closed", {
          detail: { zoom: b }
        })), i.original = null, i.zoomed = null, i.zoomedHd = null, i.template = null, a(b);
      };
      Z = !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(V("medium-zoom:close", {
        detail: { zoom: b }
      })), i.zoomed.addEventListener("transitionend", n);
    });
  }, H = function() {
    var a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, n = a.target;
    return i.original ? z() : A({ target: n });
  }, k = function() {
    return c;
  }, te = function() {
    return R;
  }, fe = function() {
    return i.original;
  }, R = [], K = [], Z = !1, he = 0, c = 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]" ? c = t : (t || typeof t == "string") && _(t), c = B({
    margin: 0,
    background: "#fff",
    scrollOffset: 40,
    container: null,
    template: null
  }, c);
  var J = Je(c.background);
  document.addEventListener("click", r), document.addEventListener("keyup", p), document.addEventListener("scroll", g), window.addEventListener("resize", z);
  var b = {
    open: A,
    close: z,
    toggle: H,
    update: E,
    clone: I,
    attach: _,
    detach: $,
    on: f,
    off: v,
    getOptions: k,
    getImages: te,
    getZoomedImage: fe
  };
  return b;
};
function et(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 tt = ".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}";
et(tt);
const it = 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,.5s) var(--easing,linear), transform var(--transition-transform-duration,.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}to{z-index:0}}.highlighter--can-hover:hover:after,.highlighter--selected:after,.highlighter--color-overlay:after{content:"";pointer-events:none;width:100%;height:100%;transition:all var(--transition-duration,.5s) var(--easing,linear);position:absolute;top:0;left:0}.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,.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,.5s) var(--easing,linear), border-color var(--transition-duration,.5s) var(--easing,linear), box-shadow var(--transition-duration,.5s) var(--easing,linear), opacity var(--transition-duration,.5s) var(--easing,linear), transform var(--transition-transform-duration,.5s) var(--easing,linear), visibility var(--transition-duration,.5s) var(--easing,linear)}`, ot = 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%;
  }

  ${it}

  :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 rt = Object.defineProperty, at = Object.getOwnPropertyDescriptor, m = (e, t, o, h) => {
  for (var r = h > 1 ? void 0 : h ? at(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 && rt(t, o, r), r;
};
let l = class extends O {
  constructor() {
    super(...arguments), this.localize = new Ae(this), this._retryCount = 0, this._retryTimer = null, this.isLoaded = !1, this.isError = !1, this._retryIndex = 0, 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.retryOnError = !1, this.maxRetries = 3, 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(), this.clearRetryTimer();
  }
  /**
   * 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, this._retryCount = 0, this._retryIndex = 0, this.clearRetryTimer();
  }
  clearRetryTimer() {
    this._retryTimer !== null && (clearTimeout(this._retryTimer), this._retryTimer = null);
  }
  scheduleRetry() {
    const e = Math.min(1e3 * Math.pow(2, this._retryCount - 1), 1e4);
    this._retryTimer = setTimeout(() => {
      this._retryTimer = null, this._retryIndex += 1;
    }, e);
  }
  async initZoom() {
    this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = Qe(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() {
    if (this.retryOnError && this._retryCount < this.maxRetries) {
      this._retryCount += 1, this.scheduleRetry();
      return;
    }
    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 D`<div part="content" slot="anchor" class=${j(this.highlighterClass)}>${Xe(
      this._retryIndex,
      D`<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 D`<div part="base" class=${j({
      container: !0,
      "container--empty": o,
      "container--loading": this.loading,
      "container--resizing": this.resizable && this.isResizeActive
    })} style=${Ie({
      "--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=${Me(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}>${P(
      o,
      () => ge,
      () => P(
        this.effect === Y.Jump || this.effect === Y.Zoom,
        () => D`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
        () => this.renderContent()
      )
    )}<div class="zoom-image-container">${P(
      e,
      () => D`<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>${P(
      this.skeleton && !this.isLoaded && !this.isError || this.loading,
      () => D`<slot name="skeleton" part="skeleton"><div class=${j({
        skeleton: !0
      })}><cx-skeleton effect="sheen"></cx-skeleton></div></slot>`
    )}
          ${P(this.isError && this.fallback, () => D`<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>${P(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
  }
};
l.styles = [We, qe, ot];
l.dependencies = {
  "cx-icon": _e,
  "cx-popup": Ze,
  "cx-resize-observer": Ne,
  "cx-skeleton": Pe,
  "cx-space": Ve
};
m([
  X(".image")
], l.prototype, "imageElement", 2);
m([
  X(".zoom-image")
], l.prototype, "zoomImageElement", 2);
m([
  X(".highlighter")
], l.prototype, "highlighterElement", 2);
m([
  L()
], l.prototype, "isLoaded", 2);
m([
  L()
], l.prototype, "isError", 2);
m([
  L()
], l.prototype, "_retryIndex", 2);
m([
  d({ reflect: !0, type: String })
], l.prototype, "src", 2);
m([
  d({ reflect: !0, type: String })
], l.prototype, "placeholder", 2);
m([
  d({ reflect: !0, type: String })
], l.prototype, "alt", 2);
m([
  d({ attribute: "object-fit", reflect: !0 })
], l.prototype, "objectFit", 2);
m([
  d({ reflect: !0, type: Boolean })
], l.prototype, "skeleton", 2);
m([
  d({ reflect: !0, type: Boolean })
], l.prototype, "fallback", 2);
m([
  d({ attribute: "can-zoom", reflect: !0, type: Boolean })
], l.prototype, "canZoom", 2);
m([
  d({ reflect: !0, type: Boolean })
], l.prototype, "loading", 2);
m([
  d({ reflect: !0, type: Boolean })
], l.prototype, "block", 2);
m([
  d({ attribute: "html-loading", reflect: !0, type: String })
], l.prototype, "htmlLoading", 2);
m([
  d({ attribute: "click-handler-type", reflect: !0, type: String })
], l.prototype, "clickHandlerType", 2);
m([
  d({ attribute: "retry-on-error", type: Boolean })
], l.prototype, "retryOnError", 2);
m([
  d({ attribute: "max-retries", type: Number })
], l.prototype, "maxRetries", 2);
m([
  L()
], l.prototype, "isZoomed", 2);
m([
  L()
], l.prototype, "imageRatio", 2);
m([
  L()
], l.prototype, "parsedAlt", 2);
m([
  L()
], l.prototype, "parsedAltDarkMode", 2);
m([
  q("isLoaded"),
  q("canZoom", { waitUntilFirstUpdate: !0 })
], l.prototype, "handleCanZoomChange", 1);
m([
  q("objectFit", { waitUntilFirstUpdate: !0 })
], l.prototype, "handleObjectFitChange", 1);
m([
  q("src"),
  q("srcDarkMode")
], l.prototype, "handleSrcChange", 1);
m([
  Te(100)
], l.prototype, "updateLastPatchedWidth", 1);
l = m([
  Oe("cx-image")
], l);
export {
  l as C,
  Fe as H,
  O as R,
  S as a,
  Y as b,
  U as c,
  pe as d,
  ue as e,
  ne as f,
  qe as r
};
