@orangelogic/design-system 2.192.0 → 2.193.0

package/library/chunks/{color-swatch-group.NOcRP-23.js → color-swatch-group.BpEQJM1b.js}

@@ -48,7 +48,7 @@ import "./form.DSsy3Fcy.js";
 import "./purify.es.BIuh5IAZ.js";
 import { D as Ur, a as sa, t as oa, b as Kr } from "./date-picker.BGHn6qg8.js";
 import { D as Ti } from "./content-builder.BX4pHujE.js";
-import "./transformation.BfIEi4p4.js";
+import "./transformation.CkwgrwKQ.js";
 import { s as P, h as Bo, b as Ui, c as lo } from "./string.CfI2ejyR.js";
 import { a as ra } from "./_commonjsHelpers.DQNKXVTB.js";
 import { d as na } from "./debounce.Bv1rtE8D.js";

package/library/chunks/{document-viewer.CRluR-_W.js → document-viewer.DZsbpf0x.js}

@@ -25,7 +25,7 @@ import { w as watch } from "./watch.DJF5K-8U.js";
 import "./date-picker.BGHn6qg8.js";
 import { f as fetchCortexApi } from "./content-builder.BX4pHujE.js";
 import "./unsafe-html.Dff7-rCx.js";
-import "./transformation.BfIEi4p4.js";
+import "./transformation.CkwgrwKQ.js";
 import { r as reactExports, a as React, j as jsxRuntimeExports, w, R as ReactDOM } from "./jsx-runtime.CTpPVMxj.js";
 import { a as getDefaultExportFromCjs, c as commonjsGlobal } from "./_commonjsHelpers.DQNKXVTB.js";
 import { r as require$$0 } from "./___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
@@ -35,7 +35,7 @@ import { a as ObjectFit } from "./index.Cpamj0jB.js";
 import { r as r$1 } from "./state.CSDxrqLd.js";
 import { e } from "./class-map.BiVq-cVR.js";
 import { n as n$1 } from "./when.Dr1es41R.js";
-import { C as CxImage } from "./image.CiQwSDfe.js";
+import { C as CxImage } from "./image.BSvc6eti.js";
 var BookReaderMode$1 = /* @__PURE__ */ ((l) => (l.Image = "Image", l.Pdf = "Pdf", l))(BookReaderMode$1 || {}), BookReaderViewMode = /* @__PURE__ */ ((l) => (l.FourPage = "FourPage", l.OnePage = "OnePage", l.TwoPage = "TwoPage", l))(BookReaderViewMode || {});
 function commonjsRequire(l) {
   throw new Error('Could not dynamically require "' + l + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');

package/library/chunks/{image.CiQwSDfe.js → image.BSvc6eti.js}

@@ -575,13 +575,17 @@ let n = class extends Re {
       [`image--height-${this.heightMode}`]: !0,
       "image--can-zoom": this.canZoom,
       "image--has-action": this.hasZoomAction,
-      "image--hidden": !this.currentSrc && !this.placeholder || this.isError || this.isRetrying
+      "image--hidden": this.isEmpty || this.isError || this.isRetrying
     };
   }
   /** The crossorigin value for the `<img>`; `undefined` (attribute omitted) when `noCrossorigin` is set. */
   get crossorigin() {
     return this.noCrossorigin ? void 0 : "anonymous";
   }
+  /** Whether there is nothing to display: no source and no placeholder to stand in for one. */
+  get isEmpty() {
+    return !this.currentSrc && !this.placeholder;
+  }
   /**
    * Whether to hold the box with a skeleton rather than the loaded image.
    *
@@ -591,7 +595,7 @@ let n = class extends Re {
    * which reads as a layout change on an image-heavy page.
    */
   get showPlaceholderSkeleton() {
-    return this.isError ? !1 : this.skeleton && !this.isLoaded || this.loading || this.isRetrying;
+    return this.isError ? !1 : this.isEmpty ? this.loading : this.skeleton && !this.isLoaded || this.loading || this.isRetrying;
   }
   /**
    * Whether the image have zoom action.
@@ -713,16 +717,16 @@ let n = class extends Re {
     )}</div>`;
   }
   render() {
-    const i = this.hasZoomAction, t = this.currentAltValue, o = !this.currentSrc && !this.placeholder;
+    const i = this.hasZoomAction, t = this.currentAltValue;
     return L`<div part="base" class=${S({
       container: !0,
-      "container--empty": o,
+      "container--empty": this.isEmpty,
       "container--loading": this.loading,
       "container--resizing": this.resizable && this.isResizeActive
     })} style=${Me({
       "--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=${R(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${S(o ? {} : this.getHighlighterClass(this.isError))} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${A(
-      o,
+    })} data-empty-label=${this.localize.term("emptyImage")} @click=${this.startResizing} @keydown=${this.handleKeyDown}><cx-resize-observer @cx-resize=${this.handleResize}><div part="highlighter" tabindex=${R(this.highlighterTabindex)} role=${this.highlighterRole} aria-label=${t} aria-roledescription=${this.localize.term("image")} class=${S(this.isEmpty ? {} : this.getHighlighterClass(this.isError))} @click=${this.handleClickAction} @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave} @blur=${this.handleBlur}>${A(
+      this.isEmpty,
       () => X,
       () => A(
         this.effect === K.Jump || this.effect === K.Zoom,

package/library/chunks/transformation.CkwgrwKQ.js

@@ -0,0 +1,312 @@
+import { C as $, T as m, U as p } from "./asset-link-format.ClaYu_v8.js";
+import { P as y } from "./position-picker.DjnhxIKF.js";
+const g = "/AssetLink/", N = {
+  [y.BottomCenter]: $.South,
+  [y.BottomLeft]: $.Southwest,
+  [y.BottomRight]: $.Southeast,
+  [y.CenterCenter]: $.Center,
+  [y.CenterLeft]: $.West,
+  [y.CenterRight]: $.East,
+  [y.TopCenter]: $.North,
+  [y.TopLeft]: $.Northwest,
+  [y.TopRight]: $.Northeast
+}, R = "/t/", S = [400, 800, 1200, 1600, 2400], E = 0.15;
+function O({
+  asset: t,
+  baseUrl: n,
+  extension: i,
+  options: d,
+  parameters: u,
+  transformations: r,
+  useSession: l = ""
+}) {
+  if (n == null)
+    return "";
+  let s = n;
+  const h = r?.findLast(
+    (c) => c.key === m.Quality
+  );
+  if (h && (r = [
+    ...r?.filter(
+      (c) => c.key !== m.Quality
+    ) || [],
+    h
+  ]), r) {
+    const c = [];
+    for (let e = 0; e < r.length; e++) {
+      const f = r[e];
+      if (f.key === m.Rotate) {
+        let o = f.value.rotation ?? 0;
+        for (; r[e + 1]?.key === m.Rotate; )
+          e++, o += r[e].value.rotation ?? 0;
+        o !== 0 && c.push({ key: m.Rotate, value: { rotation: o } });
+      } else
+        c.push(f);
+    }
+    r = c;
+  }
+  r && r.length > 0 && (s += "/t/"), r?.forEach(({ key: c, value: e }) => {
+    if (c === m.Resize) {
+      if (e.unit === p.AspectRatio && e.ratioWidth && e.ratioHeight) {
+        s += `re_ar_${e.ratioWidth}:${e.ratioHeight}/`;
+        return;
+      }
+      const f = [
+        ...[
+          {
+            key: "re_w_",
+            value: Math.round(e.width ?? 0)
+          },
+          {
+            key: "re_h_",
+            value: Math.round(e.height ?? 0)
+          }
+        ].filter((o) => o.value !== void 0).map((o) => ({
+          key: o.key,
+          value: Math.round(Number(o.value))
+        })),
+        {
+          key: "re_rm_",
+          value: "stretch"
+        }
+      ];
+      f.forEach(({ key: o, value: _ }, k) => {
+        s += `${o}${_}${k < f.length - 1 ? "," : ""}`;
+      }), s += "/";
+    }
+    if (c === m.Crop) {
+      const f = e.unit === p.AspectRatio && !!e.ratioWidth && !!e.ratioHeight, o = !e.disabledSize && !f, _ = o && (e.x !== void 0 || e.y !== void 0), k = [
+        ...[
+          {
+            key: "c_",
+            value: e.mode
+          },
+          ...f ? [
+            {
+              key: "ar_",
+              value: `${e.ratioWidth}:${e.ratioHeight}`
+            }
+          ] : [],
+          ...o ? [
+            {
+              key: "c_w_",
+              value: Math.round(e.width ?? 0)
+            },
+            {
+              key: "c_h_",
+              value: Math.round(e.height ?? 0)
+            },
+            {
+              key: "c_x_",
+              value: Math.round(e.x ?? 0) === 0 && d?.omitZeroXY ? void 0 : Math.round(e.x ?? 0)
+            },
+            {
+              key: "c_y_",
+              value: Math.round(e.y ?? 0) === 0 && d?.omitZeroXY ? void 0 : Math.round(e.y ?? 0)
+            }
+          ] : [],
+          ...!_ && e.focusMode && e.focusMode !== "manual" ? [
+            {
+              key: e.isFocusModeAuto ? "acm_" : "c_g_",
+              value: e.focusMode
+            }
+          ] : [],
+          ...!_ && e.focusMode === "manual" && e.position ? [
+            {
+              key: "c_g_",
+              value: N[e.position]
+            }
+          ] : []
+        ].filter((T) => T.value !== void 0 && T.value !== null).map((T) => ({
+          key: T.key,
+          value: T.value
+        })),
+        ...f ? [] : [
+          {
+            key: "c_whu_",
+            value: "pixel"
+          }
+        ]
+      ];
+      k.forEach(({ key: T, value: v }, x) => {
+        const I = ["c_w_", "c_h_", "c_x_", "c_y_"].includes(T);
+        s += `${T}${I ? Math.round(Number(v)) : v}${x < k.length - 1 ? "," : ""}`;
+      }), s += "/";
+    }
+    if (c === m.Rotate && ([
+      {
+        key: "r_a_",
+        value: e.rotation
+      }
+    ].filter((o) => o.value !== void 0).map((o) => ({
+      key: o.key,
+      value: Math.round(Number(o.value))
+    })).forEach(({ key: o, value: _ }) => {
+      s += `${o}${_}`;
+    }), s += "/"), c === m.Quality) {
+      const f = [
+        {
+          key: "q_level_",
+          value: e.quality
+        }
+      ].filter((o) => o.value !== void 0).map((o) => ({
+        key: o.key,
+        value: Math.round(Number(o.value))
+      }));
+      f.forEach(({ key: o, value: _ }, k) => {
+        s += `${o}${_}${k < f.length - 1 ? "," : ""}`;
+      }), s += "/";
+    }
+    if (c === m.Metadata) {
+      const f = [
+        {
+          key: "fl_keep_metadata",
+          value: e.keepMetadata
+        }
+      ].filter((o) => o.value !== void 0).map((o) => ({ key: o.key, value: o.value }));
+      f.forEach(({ key: o }, _) => {
+        s += `${o}${_ < f.length - 1 ? "," : ""}`;
+      }), s += "/";
+    }
+  }), i && (s += `${t?.identifier ?? crypto.randomUUID()}${i}`);
+  const a = [];
+  return u && u.length > 0 && u.forEach(({ key: c, value: e }) => {
+    a.push(
+      `${encodeURIComponent(c.trim())}=${encodeURIComponent(e.trim())}`
+    );
+  }), n && l && a.push(`UseSession=${encodeURIComponent(l)}`), a.length > 0 && (s += `?${a.join("&")}`), s.endsWith("/") && (s = s.slice(0, -1)), s;
+}
+function z(t, n) {
+  if (!t || !n?.length)
+    return t;
+  const i = O({ baseUrl: "", transformations: n }).replace(
+    /\/t\//g,
+    ""
+  );
+  if (!i)
+    return t;
+  const d = t.indexOf(g);
+  if (d < 0)
+    return `${t}/t/${i}`;
+  const u = t.slice(0, d + g.length), r = t.slice(d + g.length), l = r.indexOf("/t/");
+  if (l >= 0) {
+    const h = r.slice(0, l);
+    return `${u}${h}/t/${i}`;
+  }
+  const s = r.indexOf("/");
+  if (s >= 0) {
+    const h = r.slice(0, s), a = r.slice(s);
+    return `${u}${h}/t/${i}${a}`;
+  }
+  return `${t}/t/${i}`;
+}
+function F(t) {
+  return `re_w_${Math.round(t)}`;
+}
+function C(t, n) {
+  if (!t || !Number.isFinite(n) || n <= 0)
+    return t;
+  const i = t.indexOf(g);
+  if (i < 0)
+    return t;
+  const d = F(n), u = t.slice(0, i + g.length), r = t.slice(i + g.length), l = r.indexOf(R);
+  if (l >= 0) {
+    const h = r.slice(0, l), a = r.slice(
+      l + R.length
+    );
+    return `${u}${h}${R}${d}/${a}`;
+  }
+  const s = r.indexOf("/");
+  if (s >= 0) {
+    const h = r.slice(0, s), a = r.slice(s);
+    return `${u}${h}${R}${d}${a}`;
+  }
+  return `${u}${r}${R}${d}`;
+}
+function W(t) {
+  const n = t.indexOf(g);
+  return n < 0 ? !1 : t.slice(n + g.length).includes(R);
+}
+const A = "TRX", M = "TR1", w = /* @__PURE__ */ new Set(["gif", "png", "tif", "tiff"]);
+function b(t) {
+  if (!t)
+    return "";
+  const n = t.trim().toLowerCase();
+  return n.startsWith(".") ? n.slice(1) : n;
+}
+function L(t) {
+  return b(t) === "gif";
+}
+const U = 10 * 1024 * 1024, B = {
+  b: 1,
+  byte: 1,
+  bytes: 1,
+  gb: 1024 ** 3,
+  kb: 1024,
+  mb: 1024 ** 2,
+  tb: 1024 ** 4
+};
+function G(t) {
+  if (typeof t == "number")
+    return Number.isFinite(t) && t >= 0 ? t : void 0;
+  if (!t)
+    return;
+  const n = /^\s*([\d.,]+)\s*([a-z]*)\s*$/i.exec(t);
+  if (!n)
+    return;
+  const i = Number(n[1].replace(/,/g, ""));
+  if (!Number.isFinite(i) || i < 0)
+    return;
+  const d = n[2].toLowerCase();
+  if (!d)
+    return i;
+  const u = B[d];
+  return u === void 0 ? void 0 : i * u;
+}
+function D(t, n) {
+  if (t)
+    return;
+  const i = typeof n == "number" ? n : Number(n ?? "");
+  return Number.isFinite(i) && i > 0 ? i : void 0;
+}
+function X(t, n) {
+  if (!w.has(b(t)))
+    return M;
+  const i = G(n);
+  return i !== void 0 && i > U ? M : A;
+}
+function Y(t, n = {}) {
+  if (!t.includes(g) || W(t) || n.format === A && L(n.extension))
+    return "";
+  const { maxWidth: i, widths: d = S } = n, u = [...d].filter((a) => Number.isFinite(a) && a > 0).sort((a, c) => a - c);
+  if (u.length === 0)
+    return "";
+  let r = u;
+  if (i !== void 0 && Number.isFinite(i) && i > 0) {
+    const a = u.filter((c) => c <= i);
+    r = a.length > 0 ? a : [u[0]];
+  }
+  const l = i !== void 0 && Number.isFinite(i) && i > 0, h = (l ? r.filter(
+    (a) => i > a * (1 + E)
+  ) : r).map(
+    (a) => `${C(t, a)} ${a}w`
+  );
+  return l && h.push(`${t} ${i}w`), h.join(", ");
+}
+function H(t, n = 100) {
+  return !Number.isFinite(t) || t <= 0 ? "" : `${Math.ceil(t / n) * n}px`;
+}
+export {
+  M as A,
+  S,
+  D as a,
+  Y as b,
+  z as c,
+  O as d,
+  H as e,
+  C as f,
+  U as g,
+  W as h,
+  G as p,
+  X as r
+};

package/library/components/asset-link-format.js

@@ -3,7 +3,7 @@ import "../chunks/button.BnkkUqiI.js";
 import "./space.js";
 import "../chunks/typography.IqHbnd3C.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { C as h } from "../chunks/asset-link-format.CDd4iPA2.js";
+import { C as h } from "../chunks/asset-link-format.BX1hdLgZ.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/asset-link-format.ClaYu_v8.js";
 import "../chunks/position-picker.DjnhxIKF.js";
@@ -11,7 +11,7 @@ import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.DbXTTLXx.js";
 import "../chunks/watch.DJF5K-8U.js";
 import "../chunks/number.Cx2ncfJJ.js";
-import "../chunks/transformation.BfIEi4p4.js";
+import "../chunks/transformation.CkwgrwKQ.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/when.Dr1es41R.js";

package/library/components/atoms.js

@@ -20,7 +20,7 @@ import { default as W } from "./details.js";
 import { default as Y } from "./diff.js";
 import { C as _ } from "../chunks/dialog.B6hZ7fvn.js";
 import { default as oe } from "./divider.js";
-import { C as ae } from "../chunks/document-viewer.CRluR-_W.js";
+import { C as ae } from "../chunks/document-viewer.DZsbpf0x.js";
 import { C as xe } from "../chunks/dot-pagination.BqGFeFXK.js";
 import { default as me } from "./dot-status.js";
 import { default as pe } from "./drawer.js";
@@ -39,7 +39,7 @@ import { f } from "../chunks/icon.CpHbi8tH.js";
 import { C as Fe } from "../chunks/icon.CpHbi8tH.js";
 import { C as Oe } from "../chunks/icon-button.CVrxJcZq.js";
 import { C as Ee } from "../chunks/iframe.-GCTFas1.js";
-import { C as Le } from "../chunks/image.CiQwSDfe.js";
+import { C as Le } from "../chunks/image.BSvc6eti.js";
 import { default as je } from "./image-comparer.js";
 import { default as Qe } from "./include.js";
 import { C as qe } from "../chunks/input.33UmFGqR.js";

package/library/components/color-swatch-group.js

@@ -3,7 +3,7 @@ import "../chunks/typography.IqHbnd3C.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/color-swatch.D6Gg5bpz.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as v } from "../chunks/color-swatch-group.NOcRP-23.js";
+import { C as v } from "../chunks/color-swatch-group.BpEQJM1b.js";
 import "../chunks/content-builder.BX4pHujE.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";

package/library/components/document-viewer.js

@@ -1,5 +1,5 @@
 import "../chunks/resizable-component.styles.CAfXABBc.js";
-import { C as b } from "../chunks/document-viewer.CRluR-_W.js";
+import { C as b } from "../chunks/document-viewer.DZsbpf0x.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/index.Cpamj0jB.js";
 import "../chunks/custom-element.L4WJXn1j.js";
@@ -10,7 +10,7 @@ import "../chunks/state.CSDxrqLd.js";
 import "../chunks/class-map.BiVq-cVR.js";
 import "../chunks/when.Dr1es41R.js";
 import "../chunks/icon.CpHbi8tH.js";
-import "../chunks/image.CiQwSDfe.js";
+import "../chunks/image.BSvc6eti.js";
 import "../chunks/typography.IqHbnd3C.js";
 export {
   b as default

package/library/components/image.js

@@ -1,7 +1,7 @@
 import "../chunks/resizable-component.styles.CAfXABBc.js";
 import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/index.Cpamj0jB.js";
-import { C as w } from "../chunks/image.CiQwSDfe.js";
+import { C as w } from "../chunks/image.BSvc6eti.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";
 import "../chunks/i18n.DbXTTLXx.js";

package/library/components/masonry.js

@@ -1,32 +1,32 @@
-import _ from "./grid.js";
-import v from "./grid-item.js";
-import { C as $ } from "../chunks/icon-button.CVrxJcZq.js";
-import { C as S } from "../chunks/image.CiQwSDfe.js";
-import C from "./space.js";
-import I from "./tooltip.js";
-import { n as o, C as w } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as k } from "../chunks/component.styles.CRO4Odto.js";
+import v from "./grid.js";
+import $ from "./grid-item.js";
+import { C as S } from "../chunks/icon-button.CVrxJcZq.js";
+import { C } from "../chunks/image.BSvc6eti.js";
+import I from "./space.js";
+import w from "./tooltip.js";
+import { n as o, C as k } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as F } from "../chunks/component.styles.CRO4Odto.js";
 import { a as b } from "../chunks/index.Cpamj0jB.js";
 import { c as A } from "../chunks/custom-element.L4WJXn1j.js";
-import { w as F } from "../chunks/watch.DJF5K-8U.js";
-import { r as U, b as f } from "../chunks/transformation.BfIEi4p4.js";
-import { i as z, x as n } from "../chunks/lit-element.jLBm65_O.js";
+import { w as U } from "../chunks/watch.DJF5K-8U.js";
+import { r as z, b as f, a as _ } from "../chunks/transformation.CkwgrwKQ.js";
+import { i as E, x as n } from "../chunks/lit-element.jLBm65_O.js";
 import { r as x } from "../chunks/state.CSDxrqLd.js";
-import { e as E } from "../chunks/query.BBf1UFkC.js";
+import { e as j } from "../chunks/query.BBf1UFkC.js";
 import { e as h } from "../chunks/class-map.BiVq-cVR.js";
 import { o as c } from "../chunks/if-defined.BRoBj_Rp.js";
 import { c as g } from "../chunks/repeat.CFjcER6_.js";
 import { o as u } from "../chunks/style-map.llVFPd__.js";
 import { n as y } from "../chunks/when.Dr1es41R.js";
-import { S as j } from "../chunks/sortable.esm.oSzf6C5Q.js";
+import { S as D } from "../chunks/sortable.esm.oSzf6C5Q.js";
 var d = /* @__PURE__ */ ((t) => (t.Masonry = "masonry", t.Standard = "standard", t))(d || {});
-const D = z`:host{--actions-background-color:var(--cx-color-neutral-100);--border-radius:0px;--item-border-radius:var(--cx-border-radius-medium);--padding:0px;--width:100%;--height:auto;width:var(--width,100%);height:var(--height,100%);display:block;overflow:auto}:host([spacing="3x-small"]){--spacing-container-gap:var(--cx-spacing-3x-small)}:host([spacing="2x-small"]){--spacing-container-gap:var(--cx-spacing-2x-small)}:host([spacing=x-small]){--spacing-container-gap:var(--cx-spacing-x-small)}:host([spacing=small]){--spacing-container-gap:var(--cx-spacing-small)}:host([spacing=medium]){--spacing-container-gap:var(--cx-spacing-medium)}:host([spacing=large]){--spacing-container-gap:var(--cx-spacing-large)}:host([spacing=x-large]){--spacing-container-gap:var(--cx-spacing-x-large)}:host([spacing="2x-large"]){--spacing-container-gap:var(--cx-spacing-2x-large)}:host([spacing="3x-large"]){--spacing-container-gap:var(--cx-spacing-3x-large)}:host([spacing="4x-large"]){--spacing-container-gap:var(--cx-spacing-4x-large)}.masonry-list{column-gap:var(--spacing-container-gap)}.masonry-list__item{border-radius:var(--item-border-radius);display:block;position:relative;overflow:hidden}.masonry-list__item--error:before{content:"";border:2px solid var(--cx-color-danger);border-radius:var(--item-border-radius);z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.container--masonry .masonry-list__item{margin-bottom:var(--spacing-container-gap)}.container--standard cx-grid-item::part(base){height:100%}.masonry-list__item__image{width:100%;height:100%}.masonry-list__item__actions{opacity:0;width:100%;transition:opacity var(--cx-transition-fast) ease-in-out;z-index:10;position:absolute;bottom:0;left:0}.masonry-list__item__actions:before{content:"";background-color:var(--actions-background-color);opacity:.5;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.masonry-list__item:hover .masonry-list__item__actions{opacity:1}.masonry-list__item__action{z-index:5;flex:auto;position:relative}.masonry-list__item__action::part(base){border-radius:0;width:100%}.container--sortable .masonry-list__item{cursor:move}`;
-var K = Object.defineProperty, M = Object.getOwnPropertyDescriptor, a = (t, i, r, s) => {
-  for (var l = s > 1 ? void 0 : s ? M(i, r) : i, p = t.length - 1, m; p >= 0; p--)
+const M = E`:host{--actions-background-color:var(--cx-color-neutral-100);--border-radius:0px;--item-border-radius:var(--cx-border-radius-medium);--padding:0px;--width:100%;--height:auto;width:var(--width,100%);height:var(--height,100%);display:block;overflow:auto}:host([spacing="3x-small"]){--spacing-container-gap:var(--cx-spacing-3x-small)}:host([spacing="2x-small"]){--spacing-container-gap:var(--cx-spacing-2x-small)}:host([spacing=x-small]){--spacing-container-gap:var(--cx-spacing-x-small)}:host([spacing=small]){--spacing-container-gap:var(--cx-spacing-small)}:host([spacing=medium]){--spacing-container-gap:var(--cx-spacing-medium)}:host([spacing=large]){--spacing-container-gap:var(--cx-spacing-large)}:host([spacing=x-large]){--spacing-container-gap:var(--cx-spacing-x-large)}:host([spacing="2x-large"]){--spacing-container-gap:var(--cx-spacing-2x-large)}:host([spacing="3x-large"]){--spacing-container-gap:var(--cx-spacing-3x-large)}:host([spacing="4x-large"]){--spacing-container-gap:var(--cx-spacing-4x-large)}.masonry-list{column-gap:var(--spacing-container-gap)}.masonry-list__item{border-radius:var(--item-border-radius);display:block;position:relative;overflow:hidden}.masonry-list__item--error:before{content:"";border:2px solid var(--cx-color-danger);border-radius:var(--item-border-radius);z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.container--masonry .masonry-list__item{margin-bottom:var(--spacing-container-gap)}.container--standard cx-grid-item::part(base){height:100%}.masonry-list__item__image{width:100%;height:100%}.masonry-list__item__actions{opacity:0;width:100%;transition:opacity var(--cx-transition-fast) ease-in-out;z-index:10;position:absolute;bottom:0;left:0}.masonry-list__item__actions:before{content:"";background-color:var(--actions-background-color);opacity:.5;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.masonry-list__item:hover .masonry-list__item__actions{opacity:1}.masonry-list__item__action{z-index:5;flex:auto;position:relative}.masonry-list__item__action::part(base){border-radius:0;width:100%}.container--sortable .masonry-list__item{cursor:move}`;
+var K = Object.defineProperty, B = Object.getOwnPropertyDescriptor, e = (t, i, r, s) => {
+  for (var l = s > 1 ? void 0 : s ? B(i, r) : i, p = t.length - 1, m; p >= 0; p--)
     (m = t[p]) && (l = (s ? m(i, r, l) : m(l)) || l);
   return s && l && K(i, r, l), l;
 };
-let e = class extends w {
+let a = class extends k {
   constructor() {
     super(), this.data = [], this.variant = d.Standard, this.cols = 3, this.rowHeight = "auto", this.actions = [], this.sortable = !1, this.spacing = "medium", this.idKey = "id", this.format = "", this.manualFormat = !1, this.noCrossorigin = !1, this.sortableInstance = null, this.previous = [], this.abortDrag = !1, this.handleEnd = this.handleEnd.bind(this), this.handleStart = this.handleStart.bind(this), this.handleSortableUpdate = this.handleSortableUpdate.bind(this), this.handleItemClick = this.handleItemClick.bind(this);
   }
@@ -45,7 +45,7 @@ let e = class extends w {
     this.sortableInstance && (this.sortableInstance.destroy(), this.sortableInstance = null);
   }
   initSortable() {
-    this.sortableInstance = j.create(this.list, {
+    this.sortableInstance = D.create(this.list, {
       animation: 100,
       onAdd: this.handleSortableUpdate,
       onEnd: this.handleEnd,
@@ -77,7 +77,7 @@ let e = class extends w {
   }
   /** The format one item is served under: the configured one, or derived from its extension. */
   resolveItemFormat(t) {
-    return this.manualFormat ? this.format : U(t);
+    return this.manualFormat ? this.format : z(t);
   }
   handleItemClick(t, i) {
     this.emit("cx-masonry-select", {
@@ -129,7 +129,8 @@ let e = class extends w {
           this.handleItemClick(s, t);
         }, r = f(t.src, {
           extension: t.extension,
-          format: this.resolveItemFormat(t.extension)
+          format: this.resolveItemFormat(t.extension),
+          maxWidth: _(this.manualFormat, t.maxWidth)
         });
         return n`<div data-id=${t[this.idKey]} class=${h({
           "masonry-list__item": !0,
@@ -147,7 +148,8 @@ let e = class extends w {
           this.handleItemClick(s, t);
         }, r = f(t.src, {
           extension: t.extension,
-          format: this.resolveItemFormat(t.extension)
+          format: this.resolveItemFormat(t.extension),
+          maxWidth: _(this.manualFormat, t.maxWidth)
         });
         return n`<cx-grid-item xs="1"><div class=${h({
           "masonry-list__item": !0,
@@ -171,66 +173,66 @@ let e = class extends w {
     )}</div>`;
   }
 };
-e.styles = [k, D];
-e.dependencies = {
-  "cx-grid": _,
-  "cx-grid-item": v,
-  "cx-icon-button": $,
-  "cx-image": S,
-  "cx-space": C,
-  "cx-tooltip": I
+a.styles = [F, M];
+a.dependencies = {
+  "cx-grid": v,
+  "cx-grid-item": $,
+  "cx-icon-button": S,
+  "cx-image": C,
+  "cx-space": I,
+  "cx-tooltip": w
 };
-a([
-  E(".masonry-list")
-], e.prototype, "list", 2);
-a([
+e([
+  j(".masonry-list")
+], a.prototype, "list", 2);
+e([
   o({ type: Array })
-], e.prototype, "data", 2);
-a([
+], a.prototype, "data", 2);
+e([
   o({ reflect: !0, type: String })
-], e.prototype, "variant", 2);
-a([
+], a.prototype, "variant", 2);
+e([
   o({ reflect: !0, type: Number })
-], e.prototype, "cols", 2);
-a([
+], a.prototype, "cols", 2);
+e([
   o({ attribute: "row-height", type: String })
-], e.prototype, "rowHeight", 2);
-a([
+], a.prototype, "rowHeight", 2);
+e([
   o({ type: Array })
-], e.prototype, "actions", 2);
-a([
+], a.prototype, "actions", 2);
+e([
   o({ reflect: !0, type: Boolean })
-], e.prototype, "sortable", 2);
-a([
+], a.prototype, "sortable", 2);
+e([
   o({ reflect: !0, type: String })
-], e.prototype, "spacing", 2);
-a([
+], a.prototype, "spacing", 2);
+e([
   o({ attribute: "id-key", reflect: !0, type: String })
-], e.prototype, "idKey", 2);
-a([
+], a.prototype, "idKey", 2);
+e([
   o({ attribute: "format", reflect: !0, type: String })
-], e.prototype, "format", 2);
-a([
+], a.prototype, "format", 2);
+e([
   o({ attribute: "manual-format", reflect: !0, type: Boolean })
-], e.prototype, "manualFormat", 2);
-a([
+], a.prototype, "manualFormat", 2);
+e([
   o({ attribute: "no-crossorigin", reflect: !0, type: Boolean })
-], e.prototype, "noCrossorigin", 2);
-a([
+], a.prototype, "noCrossorigin", 2);
+e([
   x()
-], e.prototype, "sortableInstance", 2);
-a([
+], a.prototype, "sortableInstance", 2);
+e([
   x()
-], e.prototype, "previous", 2);
-a([
+], a.prototype, "previous", 2);
+e([
   x()
-], e.prototype, "abortDrag", 2);
-a([
-  F("sortable", { waitUntilFirstUpdate: !0 })
-], e.prototype, "handleSortableChange", 1);
-e = a([
+], a.prototype, "abortDrag", 2);
+e([
+  U("sortable", { waitUntilFirstUpdate: !0 })
+], a.prototype, "handleSortableChange", 1);
+a = e([
   A("cx-masonry")
-], e);
+], a);
 export {
-  e as default
+  a as default
 };