@orangelogic/design-system 3.0.0 → 3.2.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 f from "./grid.js";
+import v from "./grid-item.js";
+import { C as $ } from "../chunks/icon-button.BWJ1Vqn5.js";
+import { C as S } from "../chunks/image.B-4cVbol.js";
+import C from "./space.js";
+import w from "./tooltip.js";
+import { n as o, C as I } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as k } 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 { c as A } 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 { b as _ } from "../chunks/transformation.CWKaoGaY.js";
+import { i as z, x as n } from "../chunks/lit-element.jLBm65_O.js";
+import { r as b } 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 { n as y } from "../chunks/when.Dr1es41R.js";
+import { e as m } from "../chunks/class-map.BiVq-cVR.js";
+import { o as l } from "../chunks/if-defined.BRoBj_Rp.js";
+import { c as g } from "../chunks/repeat.CFjcER6_.js";
+import { o as y } from "../chunks/style-map.llVFPd__.js";
+import { n as u } 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, r, i, s) => {
+  for (var c = s > 1 ? void 0 : s ? M(r, i) : r, p = t.length - 1, h; p >= 0; p--)
+    (h = t[p]) && (c = (s ? h(r, i, c) : h(c)) || c);
+  return s && c && K(r, i, c), c;
 };
-let a = class extends w {
+let e = class extends I {
   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.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"));
@@ -62,6 +63,18 @@ let a = class extends w {
   disconnectedCallback() {
     super.disconnectedCallback(), this.destroySortable();
   }
+  /**
+   * 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`;
+  }
   handleItemClick(t, r) {
     this.emit("cx-masonry-select", {
       detail: { event: t, item: r }
@@ -70,7 +83,7 @@ let a = class extends w {
   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 s = {
       from: t.from,
       item: t.item,
       items: this.getAllItems(),
@@ -81,127 +94,127 @@ let a = class extends w {
       type: t.type
     };
     this.emit("cx-reorder", {
-      detail: o
+      detail: s
     });
   }
   renderActions(t) {
     const r = (i) => {
-      const o = () => {
+      const s = () => {
         this.emit(i.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({
+      return n`<cx-icon-button class="masonry-list__item__action" name=${l(i.icon)} src=${l(i.src)} @click=${s} size="small" style=${y({
         color: i.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)
     )}</cx-space>`;
   }
   renderMasonry() {
-    return n`<div class="masonry-list" style=${g({
+    return n`<div class="masonry-list" style=${y({
       "column-count": this.cols
-    })} part="list">${m(
+    })} part="list">${g(
       this.data,
       (t) => t[this.idKey],
       (t) => {
-        const r = (i) => {
-          this.handleItemClick(i, t);
-        };
-        return n`<div data-id=${t[this.idKey]} class=${h({
+        const r = (s) => {
+          this.handleItemClick(s, t);
+        }, i = _(t.src);
+        return n`<div data-id=${t[this.idKey]} class=${m({
           "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=${r}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} srcset=${l(i || void 0)} sizes=${l(i ? this.itemSizes : void 0)} object-fit=${t.objectFit || x.Cover} ?loading=${t.loading} ?no-crossorigin=${this.noCrossorigin} retry-on-error></cx-image>${u(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);
-        };
-        return n`<cx-grid-item xs="1"><div class=${h({
+        const r = (s) => {
+          this.handleItemClick(s, t);
+        }, i = _(t.src);
+        return n`<cx-grid-item xs="1"><div class=${m({
           "masonry-list__item": !0,
           "masonry-list__item--error": t.hasError ?? !1
-        })} style=${g({
+        })} style=${y({
           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=${r} data-id=${t[this.idKey]}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} srcset=${l(i || void 0)} sizes=${l(i ? this.itemSizes : void 0)} width="100%" height="100%" object-fit=${t.objectFit || x.Cover} retry-on-error ?loading=${t.loading} ?no-crossorigin=${this.noCrossorigin}></cx-image>${u(this.actions.length > 0, () => this.renderActions(t))}</div></cx-grid-item>`;
       }
     )}</cx-grid>`;
   }
   render() {
-    return n`<div part="base" class=${h({
+    return n`<div part="base" class=${m({
       container: !0,
-      "container--masonry": this.variant === c.Masonry,
+      "container--masonry": this.variant === d.Masonry,
       "container--sortable": this.sortable,
-      "container--standard": this.variant === c.Standard
-    })}>${y(
-      this.variant === c.Masonry,
+      "container--standard": this.variant === d.Standard
+    })}>${u(
+      this.variant === d.Masonry,
       () => this.renderMasonry(),
       () => this.renderStandard()
     )}</div>`;
   }
 };
-a.styles = [I, D];
-a.dependencies = {
-  "cx-grid": _,
-  "cx-grid-item": f,
-  "cx-icon-button": v,
-  "cx-image": $,
-  "cx-space": S,
-  "cx-tooltip": C
+e.styles = [k, D];
+e.dependencies = {
+  "cx-grid": f,
+  "cx-grid-item": v,
+  "cx-icon-button": $,
+  "cx-image": S,
+  "cx-space": C,
+  "cx-tooltip": w
 };
-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([
+], 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: "no-crossorigin", reflect: !0, type: Boolean })
+], e.prototype, "noCrossorigin", 2);
+a([
+  b()
+], e.prototype, "sortableInstance", 2);
+a([
+  b()
+], e.prototype, "previous", 2);
+a([
+  b()
+], e.prototype, "abortDrag", 2);
+a([
   U("sortable", { waitUntilFirstUpdate: !0 })
-], a.prototype, "handleSortableChange", 1);
-a = e([
-  k("cx-masonry")
-], a);
+], e.prototype, "handleSortableChange", 1);
+e = a([
+  A("cx-masonry")
+], e);
 export {
-  a as default
+  e as default
 };