@orangelogic/design-system 3.4.0 → 3.5.0

package/library/components/masonry.js

@@ -1,34 +1,34 @@
-import f from "./grid.js";
+import _ 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 as S } from "../chunks/image.ysU1iW6e.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 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 x } from "../chunks/index.Cpamj0jB.js";
+import { a as b } from "../chunks/index.Cpamj0jB.js";
 import { c as A } from "../chunks/custom-element.L4WJXn1j.js";
-import { w as U } from "../chunks/watch.DJF5K-8U.js";
-import { b as _ } from "../chunks/transformation.CWKaoGaY.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 b } from "../chunks/state.CSDxrqLd.js";
+import { r as x } from "../chunks/state.CSDxrqLd.js";
 import { e as E } from "../chunks/query.BBf1UFkC.js";
-import { e as m } from "../chunks/class-map.BiVq-cVR.js";
-import { o as l } from "../chunks/if-defined.BRoBj_Rp.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 y } from "../chunks/style-map.llVFPd__.js";
-import { n as u } from "../chunks/when.Dr1es41R.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 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;
+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 e = class extends I {
+let e = class extends w {
   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.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"));
@@ -37,8 +37,8 @@ let e = class extends I {
     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() {
@@ -75,19 +75,23 @@ let e = class extends I {
     const t = Number.isFinite(this.cols) && this.cols > 0 ? this.cols : 1;
     return `${Math.round(100 / t)}vw`;
   }
-  handleItemClick(t, r) {
+  /** 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 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,
@@ -98,36 +102,39 @@ let e = class extends I {
     });
   }
   renderActions(t) {
-    const r = (i) => {
+    const i = (r) => {
       const s = () => {
-        this.emit(i.event, {
+        this.emit(r.event, {
           detail: { item: t }
         });
       };
-      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
+      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">${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=${y({
+    return n`<div class="masonry-list" style=${u({
       "column-count": this.cols
     })} part="list">${g(
       this.data,
       (t) => t[this.idKey],
       (t) => {
-        const r = (s) => {
+        const i = (s) => {
           this.handleItemClick(s, t);
-        }, i = _(t.src);
-        return n`<div data-id=${t[this.idKey]} class=${m({
+        }, 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} 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>`;
+        })} 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>`;
   }
@@ -136,25 +143,28 @@ let e = class extends I {
       this.data,
       (t) => t[this.idKey],
       (t) => {
-        const r = (s) => {
+        const i = (s) => {
           this.handleItemClick(s, t);
-        }, i = _(t.src);
-        return n`<cx-grid-item xs="1"><div class=${m({
+        }, 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=${y({
+        })} 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} 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>`;
+        })} 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=${m({
+    return n`<div part="base" class=${h({
       container: !0,
       "container--masonry": this.variant === d.Masonry,
       "container--sortable": this.sortable,
       "container--standard": this.variant === d.Standard
-    })}>${u(
+    })}>${y(
       this.variant === d.Masonry,
       () => this.renderMasonry(),
       () => this.renderStandard()
@@ -163,12 +173,12 @@ let e = class extends I {
 };
 e.styles = [k, D];
 e.dependencies = {
-  "cx-grid": f,
+  "cx-grid": _,
   "cx-grid-item": v,
   "cx-icon-button": $,
   "cx-image": S,
   "cx-space": C,
-  "cx-tooltip": w
+  "cx-tooltip": I
 };
 a([
   E(".masonry-list")
@@ -197,20 +207,26 @@ a([
 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([
-  b()
+  x()
 ], e.prototype, "sortableInstance", 2);
 a([
-  b()
+  x()
 ], e.prototype, "previous", 2);
 a([
-  b()
+  x()
 ], e.prototype, "abortDrag", 2);
 a([
-  U("sortable", { waitUntilFirstUpdate: !0 })
+  F("sortable", { waitUntilFirstUpdate: !0 })
 ], e.prototype, "handleSortableChange", 1);
 e = a([
   A("cx-masonry")

package/library/components/menu-item.js

@@ -1,6 +1,6 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as b } from "../chunks/menu-item.DgUMVYe5.js";
+import { C as b } from "../chunks/menu-item.uFqeX_J6.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BA19xtyU.js";
 import "../chunks/slot.j5oheLJC.js";

package/library/components/menu-section.js

@@ -1,14 +1,14 @@
-import { n as u, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as m } from "../chunks/component.styles.CRO4Odto.js";
-import { c as h } from "../chunks/custom-element.L4WJXn1j.js";
-import { i as p, E as d, x as c } from "../chunks/lit-element.jLBm65_O.js";
+import { n as c, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as h } from "../chunks/component.styles.CRO4Odto.js";
+import { c as m } from "../chunks/custom-element.L4WJXn1j.js";
+import { i as p, E as d, x as u } from "../chunks/lit-element.jLBm65_O.js";
 import { e as f } from "../chunks/query.BBf1UFkC.js";
 import v from "./menu-label.js";
 const C = p`:host{display:block}:host([inert]),:host([is-empty]){display:none}`;
-var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (n, t, r, l) => {
-  for (var e = l > 1 ? void 0 : l ? x(t, r) : t, i = n.length - 1, o; i >= 0; i--)
-    (o = n[i]) && (e = (l ? o(t, r, e) : o(e)) || e);
-  return l && e && y(t, r, e), e;
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (n, t, l, r) => {
+  for (var e = r > 1 ? void 0 : r ? x(t, l) : t, i = n.length - 1, o; i >= 0; i--)
+    (o = n[i]) && (e = (r ? o(t, l, e) : o(e)) || e);
+  return r && e && y(t, l, e), e;
 };
 let s = class extends b {
   constructor() {
@@ -24,17 +24,20 @@ let s = class extends b {
   disconnectedCallback() {
     super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.mutationObserver = null;
   }
+  runFirstUpdated() {
+    this.setAttribute("role", "group");
+  }
   handleSlotChange() {
     if (!this.defaultSlot)
       return;
     this.defaultSlot.assignedElements().some((t) => !t.inert) ? this.removeAttribute("is-empty") : this.setAttribute("is-empty", "");
   }
   render() {
-    return c`
-      ${this.label.length > 0 ? c`<cx-menu-label part="label">${this.label}</cx-menu-label>` : d}<slot @slotchange=${this.handleSlotChange}></slot>`;
+    return u`
+      ${this.label.length > 0 ? u`<cx-menu-label part="label">${this.label}</cx-menu-label>` : d}<slot @slotchange=${this.handleSlotChange}></slot>`;
   }
 };
-s.styles = [m, C];
+s.styles = [h, C];
 s.dependencies = {
   "cx-menu-label": v
 };
@@ -42,10 +45,10 @@ a([
   f("slot")
 ], s.prototype, "defaultSlot", 2);
 a([
-  u({ type: String })
+  c({ type: String })
 ], s.prototype, "label", 2);
 s = a([
-  h("cx-menu-section")
+  m("cx-menu-section")
 ], s);
 export {
   s as default

package/library/components/menu.js

@@ -1,6 +1,6 @@
 import { n as c, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as b } from "../chunks/component.styles.CRO4Odto.js";
-import { M as g, C as v } from "../chunks/menu-item.DgUMVYe5.js";
+import { M as g, C as v } from "../chunks/menu-item.uFqeX_J6.js";
 import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as w } from "../chunks/i18n.BA19xtyU.js";
 import { i as x, x as f } from "../chunks/lit-element.jLBm65_O.js";

package/library/components/organisms.js

@@ -1,5 +1,5 @@
-import { C as a } from "../chunks/asset-link-format.O2It93rl.js";
-import { C as t } from "../chunks/color-swatch-group.CTcv62MK.js";
+import { C as a } from "../chunks/asset-link-format.SaFYESLe.js";
+import { C as t } from "../chunks/color-swatch-group.Bu1ev_Af.js";
 import { default as C } from "./file-on-demand.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/tab-group.js

@@ -1,7 +1,7 @@
 import "./resize-observer.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as A } from "../chunks/tab-group.BSl6GdIO.js";
+import { C as A } from "../chunks/tab-group.CdTSrsM1.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.BA19xtyU.js";
 import "../chunks/scroll.xtO5yojm.js";
@@ -22,7 +22,7 @@ import "../chunks/button.CpY4FCwE.js";
 import "./dropdown.js";
 import "../chunks/icon-button.BWJ1Vqn5.js";
 import "./menu.js";
-import "../chunks/menu-item.DgUMVYe5.js";
+import "../chunks/menu-item.uFqeX_J6.js";
 import "./tab.js";
 export {
   A as default