@orangelogic/design-system 2.163.0 → 2.164.0

package/library/components/masonry.js

@@ -1,16 +1,16 @@
 import _ from "./grid.js";
 import f from "./grid-item.js";
 import { C as v } from "../chunks/icon-button.BwmMJ0bI.js";
-import { C as S } from "../chunks/image.BgODrAzQ.js";
-import $ from "./space.js";
+import { C as $ } from "../chunks/image.BgODrAzQ.js";
+import S from "./space.js";
 import C from "./tooltip.js";
-import { n, C as w } from "../chunks/lib-cortex-element.CVMmyPMC.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 u } from "../chunks/index.Cpamj0jB.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 o } from "../chunks/lit-element.jLBm65_O.js";
-import { r as x } from "../chunks/state.CSDxrqLd.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 { 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";
@@ -20,14 +20,14 @@ 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, i, a, s) => {
-  for (var l = s > 1 ? void 0 : s ? z(i, a) : i, d = t.length - 1, p; d >= 0; d--)
-    (p = t[d]) && (l = (s ? p(i, a, l) : p(l)) || l);
-  return s && l && K(i, a, l), l;
+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;
 };
-let r = class extends w {
+let a = 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.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 = 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);
   }
   getAllItems() {
     return Array.from(this.list.querySelectorAll(".masonry-list__item"));
@@ -36,8 +36,8 @@ let r = class extends w {
     t.item && (this.previous = [t.item.previousSibling]);
   }
   async handleEnd(t) {
-    await this.updateComplete, this.sortableInstance && (t.item && this.previous.forEach((i) => {
-      i && i.after(t.item);
+    await this.updateComplete, this.sortableInstance && (t.item && this.previous.forEach((r) => {
+      r && r.after(t.item);
     }), this.requestUpdate());
   }
   destroySortable() {
@@ -62,81 +62,81 @@ let r = class extends w {
   disconnectedCallback() {
     super.disconnectedCallback(), this.destroySortable();
   }
-  handleItemClick(t, i) {
+  handleItemClick(t, r) {
     this.emit("cx-masonry-select", {
-      detail: { event: t, item: i }
+      detail: { event: t, item: r }
     });
   }
   handleSortableUpdate(t) {
-    const i = this.data[t.oldIndex], a = [...this.data];
-    a.splice(t.oldIndex, 1), a.splice(t.newIndex, 0, i);
-    const s = {
+    const r = this.data[t.oldIndex], i = [...this.data];
+    i.splice(t.oldIndex, 1), i.splice(t.newIndex, 0, r);
+    const o = {
       from: t.from,
       item: t.item,
       items: this.getAllItems(),
-      itemsData: a,
+      itemsData: i,
       newIndex: t.newIndex,
       oldIndex: t.oldIndex,
       to: t.to,
       type: t.type
     };
     this.emit("cx-reorder", {
-      detail: s
+      detail: o
     });
   }
   renderActions(t) {
-    const i = (a) => {
-      const s = () => {
-        this.emit(a.event, {
+    const r = (i) => {
+      const o = () => {
+        this.emit(i.event, {
           detail: { item: t }
         });
       };
-      return o`<cx-icon-button class="masonry-list__item__action" name=${b(a.icon)} src=${b(a.src)} @click=${s} size="small" style=${g({
-        color: a.color
+      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
       })}></cx-icon-button>`;
     };
-    return o`<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">${m(
       this.actions,
-      (a) => a.event,
-      (a) => a.tooltip ? o`<cx-tooltip content=${a.tooltip}>${i(a)}</cx-tooltip>` : i(a)
+      (i) => i.event,
+      (i) => i.tooltip ? n`<cx-tooltip content=${i.tooltip}>${r(i)}</cx-tooltip>` : r(i)
     )}</cx-space>`;
   }
   renderMasonry() {
-    return o`<div class="masonry-list" style=${g({
+    return n`<div class="masonry-list" style=${g({
       "column-count": this.cols
     })} part="list">${m(
       this.data,
       (t) => t[this.idKey],
       (t) => {
-        const i = (a) => {
-          this.handleItemClick(a, t);
+        const r = (i) => {
+          this.handleItemClick(i, t);
         };
-        return o`<div data-id=${t[this.idKey]} class=${h({
+        return n`<div data-id=${t[this.idKey]} class=${h({
           "masonry-list__item": !0,
           "masonry-list__item--error": t.hasError ?? !1
-        })} part="item" @click=${i}><cx-image part="image" class="masonry-list__item__image" alt=${t.alt || ""} src=${t.src} object-fit=${t.objectFit || u.Cover} ?loading=${t.loading} 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} 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>`;
       }
     )}</div>`;
   }
   renderStandard() {
-    return o`<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">${m(
       this.data,
       (t) => t[this.idKey],
       (t) => {
-        const i = (a) => {
-          this.handleItemClick(a, t);
+        const r = (i) => {
+          this.handleItemClick(i, t);
         };
-        return o`<cx-grid-item xs="1"><div class=${h({
+        return n`<cx-grid-item xs="1"><div class=${h({
           "masonry-list__item": !0,
           "masonry-list__item--error": t.hasError ?? !1
         })} style=${g({
           height: this.rowHeight
-        })} part="item" @click=${i} 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 || u.Cover} ?loading=${t.loading}></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} 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>`;
       }
     )}</cx-grid>`;
   }
   render() {
-    return o`<div part="base" class=${h({
+    return n`<div part="base" class=${h({
       container: !0,
       "container--masonry": this.variant === c.Masonry,
       "container--sortable": this.sortable,
@@ -148,57 +148,60 @@ let r = class extends w {
     )}</div>`;
   }
 };
-r.styles = [I, D];
-r.dependencies = {
+a.styles = [I, D];
+a.dependencies = {
   "cx-grid": _,
   "cx-grid-item": f,
   "cx-icon-button": v,
-  "cx-image": S,
-  "cx-space": $,
+  "cx-image": $,
+  "cx-space": S,
   "cx-tooltip": C
 };
 e([
   E(".masonry-list")
-], r.prototype, "list", 2);
+], a.prototype, "list", 2);
 e([
-  n({ type: Array })
-], r.prototype, "data", 2);
+  s({ type: Array })
+], a.prototype, "data", 2);
 e([
-  n({ reflect: !0, type: String })
-], r.prototype, "variant", 2);
+  s({ reflect: !0, type: String })
+], a.prototype, "variant", 2);
 e([
-  n({ reflect: !0, type: Number })
-], r.prototype, "cols", 2);
+  s({ reflect: !0, type: Number })
+], a.prototype, "cols", 2);
 e([
-  n({ attribute: "row-height", type: String })
-], r.prototype, "rowHeight", 2);
+  s({ attribute: "row-height", type: String })
+], a.prototype, "rowHeight", 2);
 e([
-  n({ type: Array })
-], r.prototype, "actions", 2);
+  s({ type: Array })
+], a.prototype, "actions", 2);
 e([
-  n({ reflect: !0, type: Boolean })
-], r.prototype, "sortable", 2);
+  s({ reflect: !0, type: Boolean })
+], a.prototype, "sortable", 2);
 e([
-  n({ reflect: !0, type: String })
-], r.prototype, "spacing", 2);
+  s({ reflect: !0, type: String })
+], a.prototype, "spacing", 2);
 e([
-  n({ attribute: "id-key", reflect: !0, type: String })
-], r.prototype, "idKey", 2);
+  s({ attribute: "id-key", reflect: !0, type: String })
+], a.prototype, "idKey", 2);
 e([
-  x()
-], r.prototype, "sortableInstance", 2);
+  s({ attribute: "no-crossorigin", reflect: !0, type: Boolean })
+], a.prototype, "noCrossorigin", 2);
 e([
-  x()
-], r.prototype, "previous", 2);
+  u()
+], a.prototype, "sortableInstance", 2);
 e([
-  x()
-], r.prototype, "abortDrag", 2);
+  u()
+], a.prototype, "previous", 2);
+e([
+  u()
+], a.prototype, "abortDrag", 2);
 e([
   U("sortable", { waitUntilFirstUpdate: !0 })
-], r.prototype, "handleSortableChange", 1);
-r = e([
+], a.prototype, "handleSortableChange", 1);
+a = e([
   k("cx-masonry")
-], r);
+], a);
 export {
-  r as default
+  a as default
 };

package/library/components/molecules.js

@@ -5,7 +5,7 @@ import { C as u } from "../chunks/confirm-popover.D8mdy6KG.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";
-import { C as c } from "../chunks/folder-select.Dh4SX0eU.js";
+import { C as c } from "../chunks/folder-select.Dw1ZKZAq.js";
 import { default as P } from "./masonry.js";
 import { default as I } from "./padding-input-group.js";
 import { default as y } from "./position-picker.js";

package/library/components/organisms.js

@@ -1,5 +1,5 @@
-import { C as a } from "../chunks/asset-link-format.BdB6fQA_.js";
-import { C as t } from "../chunks/color-swatch-group.w5DMzNco.js";
+import { C as a } from "../chunks/asset-link-format.0q_MQOYh.js";
+import { C as t } from "../chunks/color-swatch-group.ChP9amU9.js";
 import { default as C } from "./file-on-demand.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/position-picker.js

@@ -2,43 +2,43 @@ import d from "./grid.js";
 import p from "./grid-item.js";
 import m from "./radio.js";
 import x from "./radio-group.js";
-import { n as h, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as g } from "../chunks/component.styles.CRO4Odto.js";
-import { c as _ } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as f } from "../chunks/i18n.Bchq8v1d.js";
-import { i as v, x as C } from "../chunks/lit-element.jLBm65_O.js";
-var r = /* @__PURE__ */ ((e) => (e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.BottomRight = "bottom-right", e.CenterCenter = "center-center", e.CenterLeft = "center-left", e.CenterRight = "center-right", e.TopCenter = "top-center", e.TopLeft = "top-left", e.TopRight = "top-right", e))(r || {});
-const b = v`.position-picker__column{width:fit-content}.position-picker__column::part(base){justify-content:center;align-items:center;gap:var(--cx-spacing-x-small);flex-direction:column;display:flex}.position-picker__radio{--checked-color:var(--cx-color-neutral-0);--checked-border-color:var(--cx-color-neutral-0);--checked-background-color:var(--cx-color-primary);--checked-hover-border-color:var(--cx-color-neutral-0);--checked-hover-background-color:var(--cx-color-primary)}`;
-var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (e, t, a, c) => {
-  for (var o = c > 1 ? void 0 : c ? $(t, a) : t, l = e.length - 1, s; l >= 0; l--)
-    (s = e[l]) && (o = (c ? s(t, a, o) : s(o)) || o);
-  return c && o && k(t, a, o), o;
+import { n as u, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as _ } from "../chunks/component.styles.CRO4Odto.js";
+import { P as i } from "../chunks/position-picker.DjnhxIKF.js";
+import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as v } from "../chunks/i18n.Bchq8v1d.js";
+import { i as f, x as k } from "../chunks/lit-element.jLBm65_O.js";
+const $ = f`.position-picker__column{width:fit-content}.position-picker__column::part(base){justify-content:center;align-items:center;gap:var(--cx-spacing-x-small);flex-direction:column;display:flex}.position-picker__radio{--checked-color:var(--cx-color-neutral-0);--checked-border-color:var(--cx-color-neutral-0);--checked-background-color:var(--cx-color-primary);--checked-hover-border-color:var(--cx-color-neutral-0);--checked-hover-background-color:var(--cx-color-primary)}`;
+var C = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (c, o, t, a) => {
+  for (var e = a > 1 ? void 0 : a ? b(o, t) : o, l = c.length - 1, s; l >= 0; l--)
+    (s = c[l]) && (e = (a ? s(o, t, e) : s(e)) || e);
+  return a && e && C(o, t, e), e;
 };
-let i = class extends u {
+let r = class extends h {
   constructor() {
-    super(...arguments), this.localize = new f(this), this.value = r.TopLeft;
+    super(...arguments), this.localize = new v(this), this.value = i.TopLeft;
   }
-  handleChange(e) {
-    const t = e.target;
-    this.value = t.value;
+  handleChange(c) {
+    const o = c.target;
+    this.value = o.value;
   }
   render() {
-    return C`<div class="position-picker"><cx-radio-group value=${this.value} name="position" .form=${this.closest("form")} @cx-change=${this.handleChange}><cx-grid columns="3" spacing="var(--cx-spacing-small)"><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${r.TopLeft} checked-icon-radius="3" aria-label=${this.localize.term("topLeft")}></cx-radio><cx-radio class="position-picker__radio" value=${r.CenterLeft} checked-icon-radius="3" aria-label=${this.localize.term("centerLeft")}></cx-radio><cx-radio class="position-picker__radio" value=${r.BottomLeft} checked-icon-radius="3" aria-label=${this.localize.term("bottomLeft")}></cx-radio></cx-grid-item><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${r.TopCenter} checked-icon-radius="3" aria-label=${this.localize.term("topCenter")}></cx-radio><cx-radio class="position-picker__radio" value=${r.CenterCenter} checked-icon-radius="3" aria-label=${this.localize.term("centerCenter")}></cx-radio><cx-radio class="position-picker__radio" value=${r.BottomCenter} checked-icon-radius="3" aria-label=${this.localize.term("bottomCenter")}></cx-radio></cx-grid-item><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${r.TopRight} checked-icon-radius="3" aria-label=${this.localize.term("topRight")}></cx-radio><cx-radio class="position-picker__radio" value=${r.CenterRight} checked-icon-radius="3" aria-label=${this.localize.term("centerRight")}></cx-radio><cx-radio class="position-picker__radio" value=${r.BottomRight} checked-icon-radius="3" aria-label=${this.localize.term("bottomRight")}></cx-radio></cx-grid-item></cx-grid></cx-radio-group></div>`;
+    return k`<div class="position-picker"><cx-radio-group value=${this.value} name="position" .form=${this.closest("form")} @cx-change=${this.handleChange}><cx-grid columns="3" spacing="var(--cx-spacing-small)"><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${i.TopLeft} checked-icon-radius="3" aria-label=${this.localize.term("topLeft")}></cx-radio><cx-radio class="position-picker__radio" value=${i.CenterLeft} checked-icon-radius="3" aria-label=${this.localize.term("centerLeft")}></cx-radio><cx-radio class="position-picker__radio" value=${i.BottomLeft} checked-icon-radius="3" aria-label=${this.localize.term("bottomLeft")}></cx-radio></cx-grid-item><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${i.TopCenter} checked-icon-radius="3" aria-label=${this.localize.term("topCenter")}></cx-radio><cx-radio class="position-picker__radio" value=${i.CenterCenter} checked-icon-radius="3" aria-label=${this.localize.term("centerCenter")}></cx-radio><cx-radio class="position-picker__radio" value=${i.BottomCenter} checked-icon-radius="3" aria-label=${this.localize.term("bottomCenter")}></cx-radio></cx-grid-item><cx-grid-item xs="1" class="position-picker__column"><cx-radio class="position-picker__radio" value=${i.TopRight} checked-icon-radius="3" aria-label=${this.localize.term("topRight")}></cx-radio><cx-radio class="position-picker__radio" value=${i.CenterRight} checked-icon-radius="3" aria-label=${this.localize.term("centerRight")}></cx-radio><cx-radio class="position-picker__radio" value=${i.BottomRight} checked-icon-radius="3" aria-label=${this.localize.term("bottomRight")}></cx-radio></cx-grid-item></cx-grid></cx-radio-group></div>`;
   }
 };
-i.styles = [g, b];
-i.dependencies = {
+r.styles = [_, $];
+r.dependencies = {
   "cx-grid": d,
   "cx-grid-item": p,
   "cx-radio": m,
   "cx-radio-group": x
 };
 n([
-  h({ reflect: !0 })
-], i.prototype, "value", 2);
-i = n([
-  _("cx-position-picker")
-], i);
+  u({ reflect: !0 })
+], r.prototype, "value", 2);
+r = n([
+  g("cx-position-picker")
+], r);
 export {
-  i as default
+  r as default
 };

package/library/components/tree-item.js

@@ -16,7 +16,7 @@ import "./checkbox.js";
 import "../chunks/icon.D5iM9wXS.js";
 import "./line-clamp.js";
 import "./spinner.js";
-import { C as k } from "../chunks/tree.Dvnw_4vz.js";
+import { C as k } from "../chunks/tree.vn5sHbdt.js";
 export {
   k as default
 };

package/library/components/tree.js

@@ -4,7 +4,7 @@ import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.Bchq8v1d.js";
 import "../chunks/math.DuKzLacZ.js";
 import "../chunks/watch.DJF5K-8U.js";
-import { a as b, b as f, s as x, c as d } from "../chunks/tree.Dvnw_4vz.js";
+import { a as b, b as f, s as x, c as d } from "../chunks/tree.vn5sHbdt.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";