@orangelogic/design-system 2.0.0-29DUO2-beta-3 → 2.0.0-29IORR-beta-2

package/library/components/line-clamp.js

@@ -1,45 +1,15 @@
-import "../chunks/button.KnE3mcyM.js";
+import "../chunks/button.CauAHfdl.js";
 import "./tooltip.js";
 import "./resize-observer.js";
 import { n as r, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as g } from "../chunks/component.styles.DMSLciL5.js";
+import { c as g } from "../chunks/component.styles.CRO4Odto.js";
 import { i as f } from "../chunks/browser.BHOCIF_A.js";
 import { c as w } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as x } from "../chunks/debounce.DaHuiSGU.js";
 import { i as v, x as h } from "../chunks/lit-element.jLBm65_O.js";
 import { r as u } from "../chunks/state.CSDxrqLd.js";
 import { e as m } from "../chunks/query.BBf1UFkC.js";
-const C = v`
-  :host {
-    --toggler-color: var(--cx-color-primary);
-  }
-
-  .content {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    overflow-wrap: break-word;
-  }
-
-  .toggler {
-    display: block;
-    margin-top: var(cx--spacing-2x-small);
-  }
-
-  .toggler::part(base) {
-    color: var(--toggler-color);
-    font-weight: var(--cx-font-weight-medium);
-    text-transform: none;
-    width: auto;
-  }
-
-  .toggler::part(label) {
-    padding-left: 0;
-  }
-`;
+const C = v`:host{--toggler-color:var(--cx-color-primary)}.content{text-overflow:ellipsis;white-space:normal;overflow-wrap:break-word;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.toggler{margin-top:var(--cx-spacing-2x-small);display:block}.toggler::part(base){color:var(--toggler-color);font-weight:var(--cx-font-weight-medium);text-transform:none;width:auto}.toggler::part(label){padding-left:0}`;
 var T = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, e = (i, s, n, a) => {
   for (var l = a > 1 ? void 0 : a ? $(s, n) : s, o = i.length - 1, p; o >= 0; o--)
     (p = i[o]) && (l = (a ? p(s, n, l) : p(l)) || l);
@@ -112,59 +82,13 @@ let t = class extends b {
     this.open = !this.open;
   }
   render() {
-    const i = h`
-      <div part="base">
-        <cx-resize-observer @cx-resize=${this.handleResize}>
-          <span
-            class="content"
-            part="content"
-            style="-webkit-line-clamp: ${this.lines}"
-          >
-            <slot></slot>
-          </span>
-        </cx-resize-observer>
-      </div>
-    `;
+    const i = h`<div part="base"><cx-resize-observer @cx-resize=${this.handleResize}><span class="content" part="content" style="-webkit-line-clamp: ${this.lines}"><slot></slot></span></cx-resize-observer></div>`;
     let s = null;
-    return this.isClamped && (s = h`<cx-button
-        part="toggler"
-        size="small"
-        variant="text"
-        class="toggler"
-        title=""
-        @click=${this.toggleShowingMore}
-      >
-        ${this.open ? this.showLessText : this.showMoreText}
-      </cx-button>`), this.showMore ? h`
+    return this.isClamped && (s = h`<cx-button part="toggler" size="small" variant="text" class="toggler" @click=${this.toggleShowingMore}>${this.open ? this.showLessText : this.showMoreText}</cx-button>`), this.showMore ? h`
         ${this.open && this.calculated ? h`<slot></slot>` : i}
         ${s}
-      ` : this.disabledTooltip ? i : this.tooltip ? h`
-        <cx-tooltip
-          part="tooltip"
-          class="tooltip"
-          content=${this.tooltip}
-          hoist
-          ?disabled-hover-bridge=${this.disabledHoverBridge}
-          .flipBoundary=${this.flipBoundary}
-          .shiftBoundary=${this.shiftBoundary}
-          placement=${this.placement}
-          @cx-after-hide=${f() ? this.handleTooltipAfterHide : null}
-          >${i}
-        </cx-tooltip>
-      ` : h`
-      ${this.isClamped ? h` <cx-tooltip
-            part="tooltip"
-            class="tooltip"
-            content=${this.tooltipContent}
-            hoist
-            ?disabled-hover-bridge=${this.disabledHoverBridge}
-            .flipBoundary=${this.flipBoundary}
-            .shiftBoundary=${this.shiftBoundary}
-            placement=${this.placement}
-            @cx-after-hide=${f() ? this.handleTooltipAfterHide : null}
-          >
-            ${i}
-          </cx-tooltip>` : i}
+      ` : this.disabledTooltip ? i : this.tooltip ? h`<cx-tooltip part="tooltip" class="tooltip" content=${this.tooltip} hoist ?disabled-hover-bridge=${this.disabledHoverBridge} .flipBoundary=${this.flipBoundary} .shiftBoundary=${this.shiftBoundary} placement=${this.placement} @cx-after-hide=${f() ? this.handleTooltipAfterHide : null}>${i}</cx-tooltip>` : h`
+      ${this.isClamped ? h`<cx-tooltip part="tooltip" class="tooltip" content=${this.tooltipContent} hoist ?disabled-hover-bridge=${this.disabledHoverBridge} .flipBoundary=${this.flipBoundary} .shiftBoundary=${this.shiftBoundary} placement=${this.placement} @cx-after-hide=${f() ? this.handleTooltipAfterHide : null}>${i}</cx-tooltip>` : i}
     `;
   }
 };

package/library/components/list-editor.js

@@ -1,24 +1,24 @@
-import "../chunks/button.KnE3mcyM.js";
-import "../chunks/dialog.DpZBbTCn.js";
+import "../chunks/button.CauAHfdl.js";
+import "../chunks/dialog.2UW1LNm1.js";
 import "./grid.js";
 import "./grid-item.js";
 import "./input.js";
 import "./line-clamp.js";
-import "../chunks/option.DnpkE8Xi.js";
+import "../chunks/option.COnEtd3X.js";
 import "./radio.js";
 import "./radio-group.js";
 import "./select.js";
 import "./space.js";
-import "../chunks/table.DNTm_GMS.js";
-import "../chunks/typography.oDzoLbZS.js";
+import "../chunks/table.WNd284in.js";
+import "../chunks/typography.DJC_UXgs.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "./dynamic-select.js";
-import "../chunks/component.styles.DMSLciL5.js";
+import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";
-import "../chunks/i18n.C0iakJkV.js";
-import "../chunks/watch.q1sEjPWL.js";
-import { c as E, C as F } from "../chunks/list-editor.B2mFE9f7.js";
+import "../chunks/i18n.BFqTRDCA.js";
+import "../chunks/watch.BCJD77bD.js";
+import { c as E, C as F } from "../chunks/list-editor.CJ96S1Np.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";

package/library/components/markdown.js

@@ -1,6 +1,6 @@
 import { C as tt, n as G } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as nt } from "../chunks/custom-element.L4WJXn1j.js";
-import { w as ge } from "../chunks/watch.q1sEjPWL.js";
+import { w as ge } from "../chunks/watch.BCJD77bD.js";
 import { x as rt } from "../chunks/lit-element.jLBm65_O.js";
 import { r as st } from "../chunks/state.CSDxrqLd.js";
 import { o as it } from "../chunks/unsafe-html.Dff7-rCx.js";
@@ -2649,9 +2649,7 @@ let M = class extends at {
     qe(this, re, ke).call(this), this.markdown && (this.rendered = de(this, H).parse(this.markdown));
   }
   render() {
-    return rt`
-      <div class=${this.classname}>${it(this.rendered)}</div>
-    `;
+    return rt`<div class=${this.classname}>${it(this.rendered)}</div>`;
   }
   updated() {
     this.liveScript && Gt(this), this.emit("cx-ready");

package/library/components/masonry.js

@@ -1,14 +1,14 @@
 import _ from "./grid.js";
 import f from "./grid-item.js";
-import v from "./icon-button.js";
-import { C as S } from "../chunks/image.C9avagDq.js";
+import { C as v } from "../chunks/icon-button.rKe0N4VB.js";
+import { C as S } from "../chunks/image.CEtCGsNL.js";
 import $ from "./space.js";
 import C from "./tooltip.js";
 import { n, C as w } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as I } from "../chunks/component.styles.DMSLciL5.js";
+import { c as I } from "../chunks/component.styles.CRO4Odto.js";
 import { a as u } from "../chunks/index.Cpamj0jB.js";
 import { c as k } from "../chunks/custom-element.L4WJXn1j.js";
-import { w as U } from "../chunks/watch.q1sEjPWL.js";
+import { w as U } from "../chunks/watch.BCJD77bD.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 { e as E } from "../chunks/query.BBf1UFkC.js";
@@ -19,132 +19,7 @@ import { o as g } 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;
-
-    display: block;
-    width: var(--width, 100%);
-    height: var(--height, 100%);
-    overflow: auto;
-  }
-
-  /* #region Spacing */
-  :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);
-  }
-
-  /* #endregion */
-
-  .masonry-list {
-    column-gap: var(--spacing-container-gap);
-  }
-
-  .masonry-list__item {
-    display: block;
-    position: relative;
-    border-radius: var(--item-border-radius);
-    overflow: hidden;
-  }
-
-  .masonry-list__item--error::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 2px solid var(--cx-color-danger);
-    border-radius: var(--item-border-radius);
-    z-index: 1;
-  }
-
-  .container--masonry .masonry-list__item {
-    margin-bottom: var(--spacing-container-gap);
-  }
-
-  .container--standard cx-grid-item::part(base) {
-    height: 100%;
-  }
-
-  .masonry-list__item__image {
-    height: 100%;
-    width: 100%;
-  }
-
-  .masonry-list__item__actions {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    opacity: 0;
-    transition: opacity var(--cx-transition-fast) ease-in-out;
-    z-index: 10;
-  }
-
-  .masonry-list__item__actions::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--actions-background-color);
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  .masonry-list__item:hover .masonry-list__item__actions {
-    opacity: 1;
-  }
-
-  .masonry-list__item__action {
-    position: relative;
-    flex: 1 1 auto;
-    z-index: 5;
-  }
-
-  .masonry-list__item__action::part(base) {
-    border-radius: 0;
-    width: 100%;
-  }
-
-  .container--sortable .masonry-list__item {
-    cursor: move;
-  }
-`;
+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);
@@ -182,7 +57,7 @@ let r = class extends w {
     this.destroySortable(), this.sortable && this.initSortable();
   }
   connectedUpdatedCallback() {
-    this.sortable && this.initSortable();
+    this.handleSortableChange();
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.destroySortable();
@@ -216,135 +91,61 @@ let r = class extends w {
           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({
+      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
-      })}
-        ></cx-icon-button>
-      `;
+      })}></cx-icon-button>`;
     };
-    return o`<cx-space
-      class="masonry-list__item__actions"
-      direction="horizontal"
-      spacing="x-small"
-      justify-content="space-around"
-    >
-      ${m(
+    return o`<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)
-    )}
-    </cx-space>`;
+      (a) => a.tooltip ? o`<cx-tooltip content=${a.tooltip}>${i(a)}</cx-tooltip>` : i(a)
+    )}</cx-space>`;
   }
   renderMasonry() {
-    return o`<div
-      class="masonry-list"
-      style=${g({
+    return o`<div class="masonry-list" style=${g({
       "column-count": this.cols
-    })}
-      part="list"
-    >
-      ${m(
+    })} part="list">${m(
       this.data,
       (t) => t[this.idKey],
       (t) => {
         const i = (a) => {
           this.handleItemClick(a, t);
         };
-        return o`<div
-            data-id=${t[this.idKey]}
-            class=${h({
+        return o`<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}
-            >
-            </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} object-fit=${t.objectFit || u.Cover} ?loading=${t.loading}></cx-image>${y(this.actions.length > 0, () => this.renderActions(t))}</div>`;
       }
-    )}
-    </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 o`<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);
         };
-        return o`<cx-grid-item xs="1">
-            <div
-              class=${h({
+        return o`<cx-grid-item xs="1"><div class=${h({
           "masonry-list__item": !0,
           "masonry-list__item--error": t.hasError ?? !1
-        })}
-              style=${g({
+        })} 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=${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>`;
       }
-    )}
-    </cx-grid>`;
+    )}</cx-grid>`;
   }
   render() {
-    return o`<div
-      part="base"
-      class=${h({
+    return o`<div part="base" class=${h({
       container: !0,
       "container--masonry": this.variant === c.Masonry,
       "container--sortable": this.sortable,
       "container--standard": this.variant === c.Standard
-    })}
-    >
-      ${y(
+    })}>${y(
       this.variant === c.Masonry,
       () => this.renderMasonry(),
       () => this.renderStandard()
-    )}
-    </div>`;
+    )}</div>`;
   }
 };
 r.styles = [I, D];