@orangelogic/design-system 2.190.0 → 2.192.0

package/library/components/masonry.js

@@ -1,33 +1,34 @@
 import _ from "./grid.js";
-import f from "./grid-item.js";
-import { C as v } from "../chunks/icon-button.CVrxJcZq.js";
-import { C as $ } from "../chunks/image.CTMzUqCC.js";
-import S from "./space.js";
-import C from "./tooltip.js";
-import { n as s, C as w } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as I } from "../chunks/component.styles.CRO4Odto.js";
-import { a as x } from "../chunks/index.Cpamj0jB.js";
-import { c as k } from "../chunks/custom-element.L4WJXn1j.js";
-import { w as U } from "../chunks/watch.DJF5K-8U.js";
-import { i as A, x as n } from "../chunks/lit-element.jLBm65_O.js";
-import { r as u } from "../chunks/state.CSDxrqLd.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 { 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 { r as x } from "../chunks/state.CSDxrqLd.js";
 import { e as E } from "../chunks/query.BBf1UFkC.js";
 import { e as h } from "../chunks/class-map.BiVq-cVR.js";
-import { o as b } from "../chunks/if-defined.BRoBj_Rp.js";
-import { c as m } from "../chunks/repeat.CFjcER6_.js";
-import { o as g } from "../chunks/style-map.llVFPd__.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";
-var c = /* @__PURE__ */ ((t) => (t.Masonry = "masonry", t.Standard = "standard", t))(c || {});
-const D = A`: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, z = Object.getOwnPropertyDescriptor, e = (t, r, i, o) => {
-  for (var l = o > 1 ? void 0 : o ? z(r, i) : r, d = t.length - 1, p; d >= 0; d--)
-    (p = t[d]) && (l = (o ? p(r, i, l) : p(l)) || l);
-  return o && l && K(r, i, l), l;
+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--)
+    (m = t[p]) && (l = (s ? m(i, r, l) : m(l)) || l);
+  return s && l && K(i, r, l), l;
 };
-let a = class extends w {
+let e = class extends w {
   constructor() {
-    super(), this.data = [], this.variant = c.Standard, this.cols = 3, this.rowHeight = "auto", this.actions = [], this.sortable = !1, this.spacing = "medium", this.idKey = "id", 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);
+    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);
   }
   getAllItems() {
     return Array.from(this.list.querySelectorAll(".masonry-list__item"));
@@ -36,8 +37,8 @@ let a = class extends w {
     t.item && (this.previous = [t.item.previousSibling]);
   }
   async handleEnd(t) {
-    await this.updateComplete, this.sortableInstance && (t.item && this.previous.forEach((r) => {
-      r && r.after(t.item);
+    await this.updateComplete, this.sortableInstance && (t.item && this.previous.forEach((i) => {
+      i && i.after(t.item);
     }), this.requestUpdate());
   }
   destroySortable() {
@@ -62,146 +63,174 @@ let a = class extends w {
   disconnectedCallback() {
     super.disconnectedCallback(), this.destroySortable();
   }
-  handleItemClick(t, r) {
+  /**
+   * The `sizes` hint for item images, expressed as a viewport fraction.
+   *
+   * The layout is CSS-column based, so no exact pixel width is available the way a
+   * measured grid provides one. Each item spans exactly one of `cols` columns, which
+   * makes the fraction an accurate upper bound and keeps the browser from assuming
+   * the default `100vw`.
+   */
+  get itemSizes() {
+    const t = Number.isFinite(this.cols) && this.cols > 0 ? this.cols : 1;
+    return `${Math.round(100 / t)}vw`;
+  }
+  /** The format one item is served under: the configured one, or derived from its extension. */
+  resolveItemFormat(t) {
+    return this.manualFormat ? this.format : U(t);
+  }
+  handleItemClick(t, i) {
     this.emit("cx-masonry-select", {
-      detail: { event: t, item: r }
+      detail: { event: t, item: i }
     });
   }
   handleSortableUpdate(t) {
-    const r = this.data[t.oldIndex], i = [...this.data];
-    i.splice(t.oldIndex, 1), i.splice(t.newIndex, 0, r);
-    const o = {
+    const i = this.data[t.oldIndex], r = [...this.data];
+    r.splice(t.oldIndex, 1), r.splice(t.newIndex, 0, i);
+    const s = {
       from: t.from,
       item: t.item,
       items: this.getAllItems(),
-      itemsData: i,
+      itemsData: r,
       newIndex: t.newIndex,
       oldIndex: t.oldIndex,
       to: t.to,
       type: t.type
     };
     this.emit("cx-reorder", {
-      detail: o
+      detail: s
     });
   }
   renderActions(t) {
-    const r = (i) => {
-      const o = () => {
-        this.emit(i.event, {
+    const i = (r) => {
+      const s = () => {
+        this.emit(r.event, {
           detail: { item: t }
         });
       };
-      return n`<cx-icon-button class="masonry-list__item__action" name=${b(i.icon)} src=${b(i.src)} @click=${o} size="small" style=${g({
-        color: i.color
+      return n`<cx-icon-button class="masonry-list__item__action" name=${c(r.icon)} src=${c(r.src)} @click=${s} size="small" style=${u({
+        color: r.color
       })}></cx-icon-button>`;
     };
-    return n`<cx-space class="masonry-list__item__actions" direction="horizontal" spacing="x-small" justify-content="space-around">${m(
+    return n`<cx-space class="masonry-list__item__actions" direction="horizontal" spacing="x-small" justify-content="space-around">${g(
       this.actions,
-      (i) => i.event,
-      (i) => i.tooltip ? n`<cx-tooltip content=${i.tooltip}>${r(i)}</cx-tooltip>` : r(i)
+      (r) => r.event,
+      (r) => r.tooltip ? n`<cx-tooltip content=${r.tooltip}>${i(r)}</cx-tooltip>` : i(r)
     )}</cx-space>`;
   }
   renderMasonry() {
-    return n`<div class="masonry-list" style=${g({
+    return n`<div class="masonry-list" style=${u({
       "column-count": this.cols
-    })} part="list">${m(
+    })} part="list">${g(
       this.data,
       (t) => t[this.idKey],
       (t) => {
-        const r = (i) => {
-          this.handleItemClick(i, t);
-        };
+        const i = (s) => {
+          this.handleItemClick(s, t);
+        }, r = f(t.src, {
+          extension: t.extension,
+          format: this.resolveItemFormat(t.extension)
+        });
         return n`<div data-id=${t[this.idKey]} class=${h({
           "masonry-list__item": !0,
           "masonry-list__item--error": t.hasError ?? !1
-        })} part="item" @click=${r}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} object-fit=${t.objectFit || x.Cover} ?loading=${t.loading} ?no-crossorigin=${this.noCrossorigin} retry-on-error></cx-image>${y(this.actions.length > 0, () => this.renderActions(t))}</div>`;
+        })} part="item" @click=${i}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} srcset=${c(r || void 0)} sizes=${c(r ? this.itemSizes : void 0)} object-fit=${t.objectFit || b.Cover} ?loading=${t.loading} ?no-crossorigin=${this.noCrossorigin} retry-on-error></cx-image>${y(this.actions.length > 0, () => this.renderActions(t))}</div>`;
       }
     )}</div>`;
   }
   renderStandard() {
-    return n`<cx-grid columns=${this.cols} spacing="var(--cx-spacing-${this.spacing})" use-flex-gap class="masonry-list" part="list">${m(
+    return n`<cx-grid columns=${this.cols} spacing="var(--cx-spacing-${this.spacing})" use-flex-gap class="masonry-list" part="list">${g(
       this.data,
       (t) => t[this.idKey],
       (t) => {
-        const r = (i) => {
-          this.handleItemClick(i, t);
-        };
+        const i = (s) => {
+          this.handleItemClick(s, t);
+        }, r = f(t.src, {
+          extension: t.extension,
+          format: this.resolveItemFormat(t.extension)
+        });
         return n`<cx-grid-item xs="1"><div class=${h({
           "masonry-list__item": !0,
           "masonry-list__item--error": t.hasError ?? !1
-        })} style=${g({
+        })} style=${u({
           height: this.rowHeight
-        })} part="item" @click=${r} data-id=${t[this.idKey]}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} width="100%" height="100%" object-fit=${t.objectFit || x.Cover} ?loading=${t.loading} ?no-crossorigin=${this.noCrossorigin}></cx-image>${y(this.actions.length > 0, () => this.renderActions(t))}</div></cx-grid-item>`;
+        })} part="item" @click=${i} data-id=${t[this.idKey]}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} srcset=${c(r || void 0)} sizes=${c(r ? this.itemSizes : void 0)} width="100%" height="100%" object-fit=${t.objectFit || b.Cover} retry-on-error ?loading=${t.loading} ?no-crossorigin=${this.noCrossorigin}></cx-image>${y(this.actions.length > 0, () => this.renderActions(t))}</div></cx-grid-item>`;
       }
     )}</cx-grid>`;
   }
   render() {
     return n`<div part="base" class=${h({
       container: !0,
-      "container--masonry": this.variant === c.Masonry,
+      "container--masonry": this.variant === d.Masonry,
       "container--sortable": this.sortable,
-      "container--standard": this.variant === c.Standard
+      "container--standard": this.variant === d.Standard
     })}>${y(
-      this.variant === c.Masonry,
+      this.variant === d.Masonry,
       () => this.renderMasonry(),
       () => this.renderStandard()
     )}</div>`;
   }
 };
-a.styles = [I, D];
-a.dependencies = {
+e.styles = [k, D];
+e.dependencies = {
   "cx-grid": _,
-  "cx-grid-item": f,
-  "cx-icon-button": v,
-  "cx-image": $,
-  "cx-space": S,
-  "cx-tooltip": C
+  "cx-grid-item": v,
+  "cx-icon-button": $,
+  "cx-image": S,
+  "cx-space": C,
+  "cx-tooltip": I
 };
-e([
+a([
   E(".masonry-list")
-], a.prototype, "list", 2);
-e([
-  s({ type: Array })
-], a.prototype, "data", 2);
-e([
-  s({ reflect: !0, type: String })
-], a.prototype, "variant", 2);
-e([
-  s({ reflect: !0, type: Number })
-], a.prototype, "cols", 2);
-e([
-  s({ attribute: "row-height", type: String })
-], a.prototype, "rowHeight", 2);
-e([
-  s({ type: Array })
-], a.prototype, "actions", 2);
-e([
-  s({ reflect: !0, type: Boolean })
-], a.prototype, "sortable", 2);
-e([
-  s({ reflect: !0, type: String })
-], a.prototype, "spacing", 2);
-e([
-  s({ attribute: "id-key", reflect: !0, type: String })
-], a.prototype, "idKey", 2);
-e([
-  s({ attribute: "no-crossorigin", reflect: !0, type: Boolean })
-], a.prototype, "noCrossorigin", 2);
-e([
-  u()
-], a.prototype, "sortableInstance", 2);
-e([
-  u()
-], a.prototype, "previous", 2);
-e([
-  u()
-], a.prototype, "abortDrag", 2);
-e([
-  U("sortable", { waitUntilFirstUpdate: !0 })
-], a.prototype, "handleSortableChange", 1);
-a = e([
-  k("cx-masonry")
-], a);
+], e.prototype, "list", 2);
+a([
+  o({ type: Array })
+], e.prototype, "data", 2);
+a([
+  o({ reflect: !0, type: String })
+], e.prototype, "variant", 2);
+a([
+  o({ reflect: !0, type: Number })
+], e.prototype, "cols", 2);
+a([
+  o({ attribute: "row-height", type: String })
+], e.prototype, "rowHeight", 2);
+a([
+  o({ type: Array })
+], e.prototype, "actions", 2);
+a([
+  o({ reflect: !0, type: Boolean })
+], e.prototype, "sortable", 2);
+a([
+  o({ reflect: !0, type: String })
+], e.prototype, "spacing", 2);
+a([
+  o({ attribute: "id-key", reflect: !0, type: String })
+], e.prototype, "idKey", 2);
+a([
+  o({ attribute: "format", reflect: !0, type: String })
+], e.prototype, "format", 2);
+a([
+  o({ attribute: "manual-format", reflect: !0, type: Boolean })
+], e.prototype, "manualFormat", 2);
+a([
+  o({ attribute: "no-crossorigin", reflect: !0, type: Boolean })
+], e.prototype, "noCrossorigin", 2);
+a([
+  x()
+], e.prototype, "sortableInstance", 2);
+a([
+  x()
+], e.prototype, "previous", 2);
+a([
+  x()
+], e.prototype, "abortDrag", 2);
+a([
+  F("sortable", { waitUntilFirstUpdate: !0 })
+], e.prototype, "handleSortableChange", 1);
+e = a([
+  A("cx-masonry")
+], e);
 export {
-  a as default
+  e as default
 };

package/library/components/molecules.js

@@ -1,7 +1,7 @@
 import { default as e } from "./bicolor-picker.js";
 import { default as a } from "./border-input-group.js";
 import { C as x } from "../chunks/color-swatch.D6Gg5bpz.js";
-import { C as u } from "../chunks/confirm-popover.CrQKEChc.js";
+import { C as u } from "../chunks/confirm-popover.jCP9CdcD.js";
 import { default as d } from "./corner-position-input-group.js";
 import { default as l } from "./cropper.js";
 import { default as i } from "./dynamic-select.js";

package/library/components/organisms.js

@@ -1,5 +1,5 @@
-import { C as a } from "../chunks/asset-link-format.D--xQVgR.js";
-import { C as t } from "../chunks/color-swatch-group.tnhiQ0jp.js";
+import { C as a } from "../chunks/asset-link-format.CDd4iPA2.js";
+import { C as t } from "../chunks/color-swatch-group.NOcRP-23.js";
 import { default as C } from "./file-on-demand.js";
 export {
   a as CxAssetLinkFormat,