@orangelogic/design-system 2.60.0 → 2.61.0

package/library/components/animated-image.js

@@ -1,10 +1,12 @@
-import { i as p, n as c, C as g, x as d, c as y } from "../chunks/custom-element.vnXBMQxc.js";
-import { c as x } from "../chunks/component.styles.CI-v8BZa.js";
-import { w as m } from "../chunks/watch.BCJD77bD.js";
-import { r as h } from "../chunks/state.Cw55xXlb.js";
-import { e as f } from "../chunks/query.BBf1UFkC.js";
+import { n as c, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as g } from "../chunks/component.styles.DMSLciL5.js";
+import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
+import { w as m } from "../chunks/watch.q1sEjPWL.js";
+import { i as f, x as d } from "../chunks/lit-element.jLBm65_O.js";
+import { r as h } from "../chunks/state.CSDxrqLd.js";
+import { e as x } from "../chunks/query.BBf1UFkC.js";
 import u from "./icon.js";
-const v = p`
+const v = f`
   :host {
     --control-box-size: 3rem;
     --icon-size: calc(var(--control-box-size) * 0.625);
@@ -63,12 +65,12 @@ const v = p`
     display: none;
   }
 `;
-var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (t, i, r, n) => {
-  for (var o = n > 1 ? void 0 : n ? _(i, r) : i, s = t.length - 1, l; s >= 0; s--)
-    (l = t[s]) && (o = (n ? l(i, r, o) : l(o)) || o);
+var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (a, i, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? _(i, r) : i, s = a.length - 1, l; s >= 0; s--)
+    (l = a[s]) && (o = (n ? l(i, r, o) : l(o)) || o);
   return n && o && b(i, r, o), o;
 };
-let e = class extends g {
+let e = class extends p {
   constructor() {
     super(...arguments), this.isLoaded = !1;
   }
@@ -76,8 +78,8 @@ let e = class extends g {
     this.play = !this.play;
   }
   handleLoad() {
-    const t = document.createElement("canvas"), { height: i, width: r } = this.animatedImage;
-    t.width = r, t.height = i, t.getContext("2d").drawImage(this.animatedImage, 0, 0, r, i), this.frozenFrame = t.toDataURL("image/gif"), this.isLoaded || (this.emit("cx-load"), this.isLoaded = !0);
+    const a = document.createElement("canvas"), { height: i, width: r } = this.animatedImage;
+    a.width = r, a.height = i, a.getContext("2d").drawImage(this.animatedImage, 0, 0, r, i), this.frozenFrame = a.toDataURL("image/gif"), this.isLoaded || (this.emit("cx-load"), this.isLoaded = !0);
   }
   handleError() {
     this.emit("cx-error");
@@ -122,33 +124,33 @@ let e = class extends g {
     `;
   }
 };
-e.styles = [x, v];
+e.styles = [g, v];
 e.dependencies = { "cx-icon": u };
-a([
-  f(".animated-image__animated")
+t([
+  x(".animated-image__animated")
 ], e.prototype, "animatedImage", 2);
-a([
+t([
   h()
 ], e.prototype, "frozenFrame", 2);
-a([
+t([
   h()
 ], e.prototype, "isLoaded", 2);
-a([
+t([
   c()
 ], e.prototype, "src", 2);
-a([
+t([
   c()
 ], e.prototype, "alt", 2);
-a([
+t([
   c({ reflect: !0, type: Boolean })
 ], e.prototype, "play", 2);
-a([
+t([
   m("play", { waitUntilFirstUpdate: !0 })
 ], e.prototype, "handlePlayChange", 1);
-a([
+t([
   m("src")
 ], e.prototype, "handleSrcChange", 1);
-e = a([
+e = t([
   y("cx-animated-image")
 ], e);
 export {

package/library/components/animation.js

@@ -1,8 +1,10 @@
-import "../chunks/custom-element.vnXBMQxc.js";
-import "../chunks/component.styles.CI-v8BZa.js";
-import "../chunks/watch.BCJD77bD.js";
+import "../chunks/lib-cortex-element.CVMmyPMC.js";
+import "../chunks/component.styles.DMSLciL5.js";
+import "../chunks/custom-element.L4WJXn1j.js";
+import "../chunks/watch.q1sEjPWL.js";
+import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/query-async.CTgXGyQ5.js";
-import { C as a } from "../chunks/animation.B7d72NVK.js";
+import { C as f } from "../chunks/animation.DfUHRQry.js";
 export {
-  a as default
+  f as default
 };

package/library/components/array-line-clamp.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/atoms/src/components/array-line-clamp/array-line-clamp'
+import _default from '../packages/atoms/src/components/array-line-clamp/array-line-clamp'
+export default _default

package/library/components/array-line-clamp.js

@@ -0,0 +1,195 @@
+import { n as h, C as y } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as g } from "../chunks/component.styles.DMSLciL5.js";
+import { c as w } from "../chunks/custom-element.L4WJXn1j.js";
+import { w as u } from "../chunks/watch.q1sEjPWL.js";
+import { i as x, E as C, x as m } from "../chunks/lit-element.jLBm65_O.js";
+import { r as v } from "../chunks/state.CSDxrqLd.js";
+import { e as f } from "../chunks/query.BBf1UFkC.js";
+import { o as b } from "../chunks/style-map.llVFPd__.js";
+import { n as M } from "../chunks/when.Dr1es41R.js";
+import E from "./line-clamp.js";
+import L from "./resize-observer.js";
+import S from "./tag.js";
+const A = x`
+  .array-clamp {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+  }
+
+  .array-clamp__items-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+    min-width: 0;
+    width: 100%;
+  }
+
+  .array-clamp__items-container ::slotted(.array-clamp__item) {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .array-clamp__items-container ::slotted(.array-clamp__item:not(:last-child))::after {
+    content: var(--array-clamp-separator, ', ');
+    white-space: pre;
+  }
+
+  .array-clamp__items-container ::slotted(.array-clamp__item.clamped) {
+    display: none;
+  }
+
+  .array-clamp__items-container ::slotted(.array-clamp__item.array-clamp__last-visible) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    min-width: 0;
+    flex-shrink: 1;
+  }
+
+  .array-clamp__indicator {
+    flex-shrink: 0;
+  }
+
+  .array-clamp__indicator::part(base) {
+    max-width: 4rem;
+    min-width: 2rem;
+    overflow-wrap: break-word;
+  }
+`;
+var R = Object.defineProperty, z = Object.getOwnPropertyDescriptor, o = (e, a, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? z(a, s) : a, i = e.length - 1, n; i >= 0; i--)
+    (n = e[i]) && (t = (r ? n(a, s, t) : n(t)) || t);
+  return r && t && R(a, s, t), t;
+};
+const P = "array-clamp__item", p = "array-clamp__last-visible", d = "clamped";
+let l = class extends y {
+  constructor() {
+    super(...arguments), this.separator = ", ", this.tooltipSeparator = "", this.clampedMap = /* @__PURE__ */ new Map();
+  }
+  get totalClamped() {
+    return Array.from(this.clampedMap.values()).filter(Boolean).length;
+  }
+  get totalVisible() {
+    const e = this.slotEl?.assignedElements({ flatten: !0 }).length ?? 0;
+    return Math.max(0, e - this.totalClamped);
+  }
+  get hiddenChildrenStr() {
+    const e = this.slotEl;
+    if (!e)
+      return "";
+    const a = e.assignedElements({ flatten: !0 }), s = this.tooltipSeparator || this.separator;
+    return a.map((r, t) => this.clampedMap.get(t) ? r.textContent?.trim() ?? "" : "").filter(Boolean).join(s);
+  }
+  applyItemClasses() {
+    const e = this.slotEl;
+    if (!e)
+      return;
+    const a = e.assignedElements({ flatten: !0 }), s = this.totalVisible;
+    a.forEach((r, t) => {
+      r.classList.add(P), this.clampedMap.get(t) ? (r.classList.add(d), r.classList.remove(p)) : (r.classList.remove(d), t === a.length - 1 || t === s - 1 && s > 0 ? r.classList.add(p) : r.classList.remove(p));
+    });
+  }
+  handleSlotChange() {
+    const e = this.containerEl, a = this.slotEl;
+    if (!e || !a)
+      return;
+    const s = a.assignedElements({ flatten: !0 });
+    if (s.length === 0) {
+      this.clampedMap = /* @__PURE__ */ new Map();
+      return;
+    }
+    const r = e.clientWidth;
+    let t = 0;
+    const i = /* @__PURE__ */ new Map();
+    let n = !1;
+    s.forEach((_, c) => {
+      n ? i.set(c, !0) : (t += _.offsetWidth, t > r && (n = !0, i.set(c, !0)));
+    }), this.clampedMap = i, this.requestUpdate("clampedMap");
+  }
+  handleResize(e) {
+    const { entries: a } = e.detail;
+    a.length === 0 || a[0].target !== this.containerEl || this.handleSlotChange();
+  }
+  runFirstUpdated() {
+    this.applyItemClasses();
+  }
+  handleClampedMapChange() {
+    this.applyItemClasses();
+  }
+  render() {
+    return m`
+      <div
+        class="array-clamp"
+        style=${b({
+      "--array-clamp-separator": `'${String(this.separator).replaceAll("'", String.raw`\'`)}'`
+    })}
+      >
+        <cx-resize-observer @cx-resize=${this.handleResize}>
+          <div class="array-clamp__items-container" part="container">
+            <slot @slotchange=${this.handleSlotChange}></slot>
+            ${M(
+      this.totalClamped > 0,
+      () => m`
+                <cx-tag
+                  variant="neutral"
+                  size="small"
+                  pill
+                  class="array-clamp__indicator"
+                  part="indicator"
+                >
+                  <cx-line-clamp
+                    tooltip=${this.hiddenChildrenStr}
+                    lines="1"
+                  >
+                    +${this.totalClamped}
+                  </cx-line-clamp>
+                </cx-tag>
+              `,
+      () => C
+    )}
+          </div>
+        </cx-resize-observer>
+      </div>
+    `;
+  }
+};
+l.styles = [g, A];
+l.dependencies = {
+  "cx-line-clamp": E,
+  "cx-resize-observer": L,
+  "cx-tag": S
+};
+o([
+  f(".array-clamp__items-container")
+], l.prototype, "containerEl", 2);
+o([
+  f("slot")
+], l.prototype, "slotEl", 2);
+o([
+  h({ type: String })
+], l.prototype, "separator", 2);
+o([
+  h({ attribute: "tooltip-separator", type: String })
+], l.prototype, "tooltipSeparator", 2);
+o([
+  v()
+], l.prototype, "clampedMap", 2);
+o([
+  u("clampedMap")
+], l.prototype, "handleClampedMapChange", 1);
+l = o([
+  w("cx-array-line-clamp")
+], l);
+export {
+  l as default
+};