@orangelogic/design-system 2.104.0 → 2.106.0

package/library/chunks/image.DdtDzup6.js

@@ -0,0 +1,821 @@
+import { r as ze, R as xe, H as Y } from "./resizable-component.styles.sAhMVN1H.js";
+import { c as we } from "./component.styles.CRO4Odto.js";
+import { a as Ee } from "./index.Cpamj0jB.js";
+import { c as ke } from "./custom-element.L4WJXn1j.js";
+import { d as Ce } from "./debounce.CIEhztrj.js";
+import { L as Le } from "./i18n.DmmFsjwP.js";
+import { w as Z } from "./watch.CThbualB.js";
+import { E as te, i as ie, x as C } from "./lit-element.jLBm65_O.js";
+import { n as y } from "./lib-cortex-element.CVMmyPMC.js";
+import { r as $ } from "./state.CSDxrqLd.js";
+import { e as K } from "./query.BBf1UFkC.js";
+import { e as L } from "./class-map.BiVq-cVR.js";
+import { o as Se } from "./if-defined.BRoBj_Rp.js";
+import { e as $e, i as He } from "./directive.oAbCiebi.js";
+import { m as Te } from "./directive-helpers.Dm4rc594.js";
+import { o as Ae } from "./style-map.llVFPd__.js";
+import { n as A } from "./when.Dr1es41R.js";
+import Oe from "../components/icon.js";
+import Re from "../components/popup.js";
+import je from "../components/resize-observer.js";
+import Ze from "../components/skeleton.js";
+import _e from "../components/space.js";
+var j = /* @__PURE__ */ ((i) => (i.Automatic = "automatic", i.Manual = "manual", i))(j || {});
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Ie = $e(class extends He {
+  constructor() {
+    super(...arguments), this.key = te;
+  }
+  render(i, t) {
+    return this.key = i, t;
+  }
+  update(i, [t, r]) {
+    return t !== this.key && (Te(i), this.key = t), r;
+  }
+});
+/*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */
+var S = Object.assign || function(i) {
+  for (var t = 1; t < arguments.length; t++) {
+    var r = arguments[t];
+    for (var l in r)
+      Object.prototype.hasOwnProperty.call(r, l) && (i[l] = r[l]);
+  }
+  return i;
+}, N = function(t) {
+  return t.tagName === "IMG";
+}, Me = function(t) {
+  return NodeList.prototype.isPrototypeOf(t);
+}, F = function(t) {
+  return t && t.nodeType === 1;
+}, Q = function(t) {
+  var r = t.currentSrc || t.src;
+  return r.substr(-4).toLowerCase() === ".svg";
+}, ee = function(t) {
+  try {
+    return Array.isArray(t) ? t.filter(N) : Me(t) ? [].slice.call(t).filter(N) : F(t) ? [t].filter(N) : typeof t == "string" ? [].slice.call(document.querySelectorAll(t)).filter(N) : [];
+  } 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`);
+  }
+}, Pe = function(t) {
+  var r = document.createElement("div");
+  return r.classList.add("medium-zoom-overlay"), r.style.background = t, r;
+}, Ne = function(t) {
+  var r = t.getBoundingClientRect(), l = r.top, c = r.left, E = r.width, k = r.height, z = t.cloneNode(), W = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, _ = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+  return z.removeAttribute("id"), z.style.position = "absolute", z.style.top = l + W + "px", z.style.left = c + _ + "px", z.style.width = E + "px", z.style.height = k + "px", z.style.transform = "", z;
+}, O = function(t, r) {
+  var l = S({
+    bubbles: !1,
+    cancelable: !1,
+    detail: void 0
+  }, r);
+  if (typeof window.CustomEvent == "function")
+    return new CustomEvent(t, l);
+  var c = document.createEvent("CustomEvent");
+  return c.initCustomEvent(t, l.bubbles, l.cancelable, l.detail), c;
+}, Fe = function i(t) {
+  var r = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, l = window.Promise || function(o) {
+    function a() {
+    }
+    o(a, a);
+  }, c = function(o) {
+    var a = o.target;
+    if (a === M) {
+      x();
+      return;
+    }
+    v.indexOf(a) !== -1 && X({ target: a });
+  }, E = function() {
+    if (!(H || !e.original)) {
+      var o = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+      Math.abs(G - o) > d.scrollOffset && setTimeout(x, 150);
+    }
+  }, k = function(o) {
+    var a = o.key || o.keyCode;
+    (a === "Escape" || a === "Esc" || a === 27) && x();
+  }, z = function() {
+    var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, a = o;
+    if (o.background && (M.style.background = o.background), o.container && o.container instanceof Object && (a.container = S({}, d.container, o.container)), o.template) {
+      var m = F(o.template) ? o.template : document.querySelector(o.template);
+      a.template = m;
+    }
+    return d = S({}, d, a), v.forEach(function(g) {
+      g.dispatchEvent(O("medium-zoom:update", {
+        detail: { zoom: u }
+      }));
+    }), u;
+  }, W = function() {
+    var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    return i(S({}, d, o));
+  }, _ = function() {
+    for (var o = arguments.length, a = Array(o), m = 0; m < o; m++)
+      a[m] = arguments[m];
+    var g = a.reduce(function(n, f) {
+      return [].concat(n, ee(f));
+    }, []);
+    return g.filter(function(n) {
+      return v.indexOf(n) === -1;
+    }).forEach(function(n) {
+      v.push(n), n.classList.add("medium-zoom-image");
+    }), I.forEach(function(n) {
+      var f = n.type, b = n.listener, T = n.options;
+      g.forEach(function(w) {
+        w.addEventListener(f, b, T);
+      });
+    }), u;
+  }, oe = function() {
+    for (var o = arguments.length, a = Array(o), m = 0; m < o; m++)
+      a[m] = arguments[m];
+    e.zoomed && x();
+    var g = a.length > 0 ? a.reduce(function(n, f) {
+      return [].concat(n, ee(f));
+    }, []) : v;
+    return g.forEach(function(n) {
+      n.classList.remove("medium-zoom-image"), n.dispatchEvent(O("medium-zoom:detach", {
+        detail: { zoom: u }
+      }));
+    }), v = v.filter(function(n) {
+      return g.indexOf(n) === -1;
+    }), u;
+  }, re = function(o, a) {
+    var m = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    return v.forEach(function(g) {
+      g.addEventListener("medium-zoom:" + o, a, m);
+    }), I.push({ type: "medium-zoom:" + o, listener: a, options: m }), u;
+  }, ae = function(o, a) {
+    var m = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    return v.forEach(function(g) {
+      g.removeEventListener("medium-zoom:" + o, a, m);
+    }), I = I.filter(function(g) {
+      return !(g.type === "medium-zoom:" + o && g.listener.toString() === a.toString());
+    }), u;
+  }, V = function() {
+    var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, a = o.target, m = function() {
+      var n = {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight,
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+      }, f = void 0, b = void 0;
+      if (d.container)
+        if (d.container instanceof Object)
+          n = S({}, n, d.container), f = n.width - n.left - n.right - d.margin * 2, b = n.height - n.top - n.bottom - d.margin * 2;
+        else {
+          var T = F(d.container) ? d.container : document.querySelector(d.container), w = T.getBoundingClientRect(), U = w.width, he = w.height, de = w.left, ce = w.top;
+          n = S({}, n, {
+            width: U,
+            height: he,
+            left: de,
+            top: ce
+          });
+        }
+      f = f || n.width - d.margin * 2, b = b || n.height - d.margin * 2;
+      var R = e.zoomedHd || e.original, me = Q(R) ? f : R.naturalWidth || f, ge = Q(R) ? b : R.naturalHeight || b, P = R.getBoundingClientRect(), ue = P.top, pe = P.left, B = P.width, q = P.height, fe = Math.min(Math.max(B, me), f) / B, ve = Math.min(Math.max(q, ge), b) / q, D = Math.min(fe, ve), ye = (-pe + (f - B) / 2 + d.margin + n.left) / D, be = (-ue + (b - q) / 2 + d.margin + n.top) / D, J = "scale(" + D + ") translate3d(" + ye + "px, " + be + "px, 0)";
+      e.zoomed.style.transform = J, e.zoomedHd && (e.zoomedHd.style.transform = J);
+    };
+    return new l(function(g) {
+      if (a && v.indexOf(a) === -1) {
+        g(u);
+        return;
+      }
+      var n = function U() {
+        H = !1, e.zoomed.removeEventListener("transitionend", U), e.original.dispatchEvent(O("medium-zoom:opened", {
+          detail: { zoom: u }
+        })), g(u);
+      };
+      if (e.zoomed) {
+        g(u);
+        return;
+      }
+      if (a)
+        e.original = a;
+      else if (v.length > 0) {
+        var f = v;
+        e.original = f[0];
+      } else {
+        g(u);
+        return;
+      }
+      if (e.original.dispatchEvent(O("medium-zoom:open", {
+        detail: { zoom: u }
+      })), G = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0, H = !0, e.zoomed = Ne(e.original), document.body.appendChild(M), d.template) {
+        var b = F(d.template) ? d.template : document.querySelector(d.template);
+        e.template = document.createElement("div"), e.template.appendChild(b.content.cloneNode(!0)), document.body.appendChild(e.template);
+      }
+      if (e.original.parentElement && e.original.parentElement.tagName === "PICTURE" && e.original.currentSrc && (e.zoomed.src = e.original.currentSrc), document.body.appendChild(e.zoomed), window.requestAnimationFrame(function() {
+        document.body.classList.add("medium-zoom--opened");
+      }), e.original.classList.add("medium-zoom-image--hidden"), e.zoomed.classList.add("medium-zoom-image--opened"), e.zoomed.addEventListener("click", x), e.zoomed.addEventListener("transitionend", n), e.original.getAttribute("data-zoom-src")) {
+        e.zoomedHd = e.zoomed.cloneNode(), e.zoomedHd.removeAttribute("srcset"), e.zoomedHd.removeAttribute("sizes"), e.zoomedHd.removeAttribute("loading"), e.zoomedHd.src = e.zoomed.getAttribute("data-zoom-src"), e.zoomedHd.onerror = function() {
+          clearInterval(T), console.warn("Unable to reach the zoom image target " + e.zoomedHd.src), e.zoomedHd = null, m();
+        };
+        var T = setInterval(function() {
+          e.zoomedHd.complete && (clearInterval(T), e.zoomedHd.classList.add("medium-zoom-image--opened"), e.zoomedHd.addEventListener("click", x), document.body.appendChild(e.zoomedHd), m());
+        }, 10);
+      } else if (e.original.hasAttribute("srcset")) {
+        e.zoomedHd = e.zoomed.cloneNode(), e.zoomedHd.removeAttribute("sizes"), e.zoomedHd.removeAttribute("loading");
+        var w = e.zoomedHd.addEventListener("load", function() {
+          e.zoomedHd.removeEventListener("load", w), e.zoomedHd.classList.add("medium-zoom-image--opened"), e.zoomedHd.addEventListener("click", x), document.body.appendChild(e.zoomedHd), m();
+        });
+      } else
+        m();
+    });
+  }, x = function() {
+    return new l(function(o) {
+      if (H || !e.original) {
+        o(u);
+        return;
+      }
+      var a = function m() {
+        e.original.classList.remove("medium-zoom-image--hidden"), document.body.removeChild(e.zoomed), e.zoomedHd && document.body.removeChild(e.zoomedHd), document.body.removeChild(M), e.zoomed.classList.remove("medium-zoom-image--opened"), e.template && document.body.removeChild(e.template), H = !1, e.zoomed.removeEventListener("transitionend", m), e.original.dispatchEvent(O("medium-zoom:closed", {
+          detail: { zoom: u }
+        })), e.original = null, e.zoomed = null, e.zoomedHd = null, e.template = null, o(u);
+      };
+      H = !0, document.body.classList.remove("medium-zoom--opened"), e.zoomed.style.transform = "", e.zoomedHd && (e.zoomedHd.style.transform = ""), e.template && (e.template.style.transition = "opacity 150ms", e.template.style.opacity = 0), e.original.dispatchEvent(O("medium-zoom:close", {
+        detail: { zoom: u }
+      })), e.zoomed.addEventListener("transitionend", a);
+    });
+  }, X = function() {
+    var o = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, a = o.target;
+    return e.original ? x() : V({ target: a });
+  }, ne = function() {
+    return d;
+  }, se = function() {
+    return v;
+  }, le = function() {
+    return e.original;
+  }, v = [], I = [], H = !1, G = 0, d = r, e = {
+    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") && _(t), d = S({
+    margin: 0,
+    background: "#fff",
+    scrollOffset: 40,
+    container: null,
+    template: null
+  }, d);
+  var M = Pe(d.background);
+  document.addEventListener("click", c), document.addEventListener("keyup", k), document.addEventListener("scroll", E), window.addEventListener("resize", x);
+  var u = {
+    open: V,
+    close: x,
+    toggle: X,
+    update: z,
+    clone: W,
+    attach: _,
+    detach: oe,
+    on: re,
+    off: ae,
+    getOptions: ne,
+    getImages: se,
+    getZoomedImage: le
+  };
+  return u;
+};
+function We(i, t) {
+  t === void 0 && (t = {});
+  var r = t.insertAt;
+  if (!(typeof document > "u")) {
+    var l = document.head || document.getElementsByTagName("head")[0], c = document.createElement("style");
+    c.type = "text/css", r === "top" && l.firstChild ? l.insertBefore(c, l.firstChild) : l.appendChild(c), c.styleSheet ? c.styleSheet.cssText = i : c.appendChild(document.createTextNode(i));
+  }
+}
+var Ue = ".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}";
+We(Ue);
+const Be = ie`: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)}`, qe = ie`
+  :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%;
+  }
+
+  ${Be}
+
+  :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 De = Object.defineProperty, Ye = Object.getOwnPropertyDescriptor, h = (i, t, r, l) => {
+  for (var c = l > 1 ? void 0 : l ? Ye(t, r) : t, E = i.length - 1, k; E >= 0; E--)
+    (k = i[E]) && (c = (l ? k(t, r, c) : k(c)) || c);
+  return l && c && De(t, r, c), c;
+};
+let s = class extends xe {
+  constructor() {
+    super(...arguments), this.localize = new Le(this), this._retryCount = 0, this._retryTimer = null, this.isLoaded = !1, this.isError = !1, this._retryIndex = 0, this.src = "", this.placeholder = "", this.alt = "", this.objectFit = Ee.Fill, this.skeleton = !1, this.fallback = !1, this.canZoom = !1, this.loading = !1, this.block = !1, this.htmlLoading = "lazy", this.clickHandlerType = j.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 === j.Automatic ? "0" : void 0;
+  }
+  get highlighterRole() {
+    return this.hasZoomAction && this.clickHandlerType === j.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 i = "landscape", t = this.ratio;
+    const r = this.width.endsWith("%") ? this.clientWidth : Number.parseFloat(this.width), l = this.isResizing ? this.resizeSize.width : r, c = this.isResizing ? this.resizeSize.height : Number.parseFloat(this.height);
+    return l && c && (t = l / c), t > this.imageRatio && (i = "portrait"), {
+      image: !0,
+      [`image--${this.objectFit}`]: !0,
+      [`image--${i}`]: !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(i) {
+    i.target === this.highlighterElement && (i.key === "Enter" || i.key === " ") && (i.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 i = Math.min(1e3 * Math.pow(2, this._retryCount - 1), 1e4);
+    this._retryTimer = setTimeout(() => {
+      this._retryTimer = null, this._retryIndex += 1;
+    }, i);
+  }
+  async initZoom() {
+    this.zoomImageElement && !this.zoom && this.isLoaded && (this.zoom = Fe(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(i) {
+    const t = i?.currentTarget ?? this.imageElement;
+    if (!t)
+      return;
+    const { naturalHeight: r, naturalWidth: l } = t;
+    this.imageRatio = l / r, 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 i = 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", i) : this.style.removeProperty("--width"), this.height || this.isResizing ? this.style.setProperty("--height", t) : this.style.removeProperty("--height");
+  }
+  handleResize(i) {
+    const { entries: t } = i.detail;
+    for (const r of t)
+      r.target === this.highlighterElement && this.width.endsWith("%") && !this.isResizing && Math.abs(r.contentRect.width - (this.lastPatchedWidth ?? 0)) > 1 && this.updateLastPatchedWidth(r.contentRect.width);
+  }
+  updateLastPatchedWidth(i) {
+    this.lastPatchedWidth = i, this.requestUpdate();
+  }
+  /**
+   * Support CMS5 click action for the image.
+   */
+  handleClickAction(i) {
+    !(i.target instanceof HTMLElement) || this.clickHandlerType === j.Manual || this.canZoom && this.openZoom();
+  }
+  updated(i) {
+    super.updated(i), (i.has("width") || i.has("height") || i.has("resizeSize")) && this.handleSizeChange();
+  }
+  openZoom() {
+    this.zoom && this.zoom.open();
+  }
+  renderContent() {
+    const i = this.currentSrc, t = this.currentAltValue;
+    return C`<div part="content" slot="anchor" class=${L(this.highlighterClass)}>${Ie(
+      this._retryIndex,
+      C`<img part="image" class=${L(this.imageClass)} src=${i || this.placeholder} alt=${t} aria-label=${t} crossorigin="anonymous" @load=${this.handleLoad} @error=${this.handleError} loading=${this.htmlLoading}>`
+    )}</div>`;
+  }
+  render() {
+    const i = this.hasZoomAction, t = this.currentAltValue, r = !this.currentSrc && !this.placeholder;
+    return C`<div part="base" class=${L({
+      container: !0,
+      "container--empty": r,
+      "container--loading": this.loading,
+      "container--resizing": this.resizable && this.isResizeActive
+    })} style=${Ae({
+      "--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=${Se(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${L(r ? {} : this.getHighlighterClass())} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${A(
+      r,
+      () => te,
+      () => A(
+        this.effect === Y.Jump || this.effect === Y.Zoom,
+        () => C`<cx-popup class="popup-container" strategy="absolute" active placement="center" sync="both">${this.renderContent()}</cx-popup>`,
+        () => this.renderContent()
+      )
+    )}<div class="zoom-image-container">${A(
+      i,
+      () => C`<img part="zoom-image" class=${L({
+        "zoom-image": !0,
+        "zoom-image--hidden": !this.isZoomed
+      })} src=${this.currentSrc || this.placeholder} alt="" aria-hidden="true" decoding="async" draggable="false" crossorigin="anonymous">`
+    )}</div>${A(
+      this.skeleton && !this.isLoaded && !this.isError || this.loading,
+      () => C`<slot name="skeleton" part="skeleton"><div class=${L({
+        skeleton: !0
+      })}><cx-skeleton effect="sheen"></cx-skeleton></div></slot>`
+    )}
+          ${A(this.isError && this.fallback, () => C`<slot name="fallback" part="fallback"><cx-space class=${L({ 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>${A(this.resizable && this.isResizeActive, () => this.renderResizer())}</div>`;
+  }
+};
+s.styles = [we, ze, qe];
+s.dependencies = {
+  "cx-icon": Oe,
+  "cx-popup": Re,
+  "cx-resize-observer": je,
+  "cx-skeleton": Ze,
+  "cx-space": _e
+};
+h([
+  K(".image")
+], s.prototype, "imageElement", 2);
+h([
+  K(".zoom-image")
+], s.prototype, "zoomImageElement", 2);
+h([
+  K(".highlighter")
+], s.prototype, "highlighterElement", 2);
+h([
+  $()
+], s.prototype, "isLoaded", 2);
+h([
+  $()
+], s.prototype, "isError", 2);
+h([
+  $()
+], s.prototype, "_retryIndex", 2);
+h([
+  y({ reflect: !0, type: String })
+], s.prototype, "src", 2);
+h([
+  y({ reflect: !0, type: String })
+], s.prototype, "placeholder", 2);
+h([
+  y({ reflect: !0, type: String })
+], s.prototype, "alt", 2);
+h([
+  y({ attribute: "object-fit", reflect: !0 })
+], s.prototype, "objectFit", 2);
+h([
+  y({ reflect: !0, type: Boolean })
+], s.prototype, "skeleton", 2);
+h([
+  y({ reflect: !0, type: Boolean })
+], s.prototype, "fallback", 2);
+h([
+  y({ attribute: "can-zoom", reflect: !0, type: Boolean })
+], s.prototype, "canZoom", 2);
+h([
+  y({ reflect: !0, type: Boolean })
+], s.prototype, "loading", 2);
+h([
+  y({ reflect: !0, type: Boolean })
+], s.prototype, "block", 2);
+h([
+  y({ attribute: "html-loading", reflect: !0, type: String })
+], s.prototype, "htmlLoading", 2);
+h([
+  y({ attribute: "click-handler-type", reflect: !0, type: String })
+], s.prototype, "clickHandlerType", 2);
+h([
+  y({ attribute: "retry-on-error", type: Boolean })
+], s.prototype, "retryOnError", 2);
+h([
+  y({ attribute: "max-retries", type: Number })
+], s.prototype, "maxRetries", 2);
+h([
+  $()
+], s.prototype, "isZoomed", 2);
+h([
+  $()
+], s.prototype, "imageRatio", 2);
+h([
+  $()
+], s.prototype, "parsedAlt", 2);
+h([
+  $()
+], s.prototype, "parsedAltDarkMode", 2);
+h([
+  Z("isLoaded"),
+  Z("canZoom", { waitUntilFirstUpdate: !0 })
+], s.prototype, "handleCanZoomChange", 1);
+h([
+  Z("objectFit", { waitUntilFirstUpdate: !0 })
+], s.prototype, "handleObjectFitChange", 1);
+h([
+  Z("src"),
+  Z("srcDarkMode")
+], s.prototype, "handleSrcChange", 1);
+h([
+  Ce(100)
+], s.prototype, "updateLastPatchedWidth", 1);
+s = h([
+  ke("cx-image")
+], s);
+export {
+  s as C,
+  j as a
+};