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

package/library/components/alert.js

@@ -1,149 +1,18 @@
-import { n as s, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as x } from "../chunks/component.styles.DMSLciL5.js";
+import { n as s, C as x } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as b } from "../chunks/component.styles.CRO4Odto.js";
 import { s as u, a as p } from "../chunks/animate.El-MpOws.js";
 import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as m } from "../chunks/event.mFzZi4sr.js";
-import { L as C } from "../chunks/i18n.C0iakJkV.js";
+import { L as C } from "../chunks/i18n.BFqTRDCA.js";
 import { H as T } from "../chunks/slot.j5oheLJC.js";
-import { w } from "../chunks/watch.q1sEjPWL.js";
+import { w } from "../chunks/watch.BCJD77bD.js";
 import { i as I, x as h } from "../chunks/lit-element.jLBm65_O.js";
 import { r as A } from "../chunks/state.CSDxrqLd.js";
 import { e as g } from "../chunks/query.BBf1UFkC.js";
 import { e as f } from "../chunks/class-map.BiVq-cVR.js";
 import { s as _, g as v } from "../chunks/animation-registry.HmpwNuGH.js";
-import H from "./icon-button.js";
-const k = I`
-  :host {
-    display: contents;
-
-    /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: 0;
-  }
-
-  .alert {
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    background-color: var(--cx-panel-background-color);
-    border: solid var(--cx-panel-border-width) var(--cx-panel-border-color);
-    border-top-width: calc(var(--cx-panel-border-width) * 3);
-    border-radius: var(--cx-border-radius-small);
-    font-family: var(--cx-font-sans);
-    font-size: var(--cx-font-size-small);
-    font-weight: var(--cx-font-weight-regular);
-    line-height: 1.6;
-    color: var(--cx-color-neutral-700);
-    margin: inherit;
-    overflow: hidden;
-  }
-
-  .alert:not(.alert--has-icon) .alert__icon,
-  .alert:not(.alert--closable) .alert__close-button {
-    display: none;
-  }
-
-  .alert__icon {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--cx-font-size-large);
-    padding-inline-start: var(--cx-spacing-large);
-  }
-
-  .alert--has-countdown {
-    border-bottom: none;
-  }
-
-  .alert--primary {
-    border-top-color: var(--cx-color-primary);
-  }
-
-  .alert--primary .alert__icon {
-    color: var(--cx-color-primary);
-  }
-
-  .alert--success {
-    border-top-color: var(--cx-color-success);
-  }
-
-  .alert--success .alert__icon {
-    color: var(--cx-color-success);
-  }
-
-  .alert--neutral {
-    border-top-color: var(--cx-color-neutral);
-  }
-
-  .alert--neutral .alert__icon {
-    color: var(--cx-color-neutral);
-  }
-
-  .alert--warning {
-    border-top-color: var(--cx-color-warning);
-  }
-
-  .alert--warning .alert__icon {
-    color: var(--cx-color-warning);
-  }
-
-  .alert--danger {
-    border-top-color: var(--cx-color-danger);
-  }
-
-  .alert--danger .alert__icon {
-    color: var(--cx-color-danger);
-  }
-
-  .alert__message {
-    flex: 1 1 auto;
-    display: block;
-    padding: var(--cx-spacing-large);
-    overflow: hidden;
-  }
-
-  .alert__close-button {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    font-size: var(--cx-font-size-medium);
-    padding-inline-end: var(--cx-spacing-medium);
-  }
-
-  .alert__countdown {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: calc(var(--cx-panel-border-width) * 3);
-    background-color: var(--cx-panel-border-color);
-    display: flex;
-  }
-  .alert__countdown--ltr {
-    justify-content: flex-end;
-  }
-  .alert__countdown .alert__countdown-elapsed {
-    height: 100%;
-    width: 0;
-  }
-  .alert--primary .alert__countdown-elapsed {
-    background-color: var(--cx-color-primary);
-  }
-  .alert--success .alert__countdown-elapsed {
-    background-color: var(--cx-color-success);
-  }
-  .alert--neutral .alert__countdown-elapsed {
-    background-color: var(--cx-color-neutral-600);
-  }
-  .alert--warning .alert__countdown-elapsed {
-    background-color: var(--cx-color-warning);
-  }
-  .alert--danger .alert__countdown-elapsed {
-    background-color: var(--cx-color-danger);
-  }
-  .alert__timer {
-    display: none;
-  }
-`;
+import { C as H } from "../chunks/icon-button.rKe0N4VB.js";
+const k = I`:host{margin:0;display:contents}.alert{background-color:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-top-width:calc(var(--cx-panel-border-width) * 3);border-radius:var(--cx-border-radius-small);font-family:var(--cx-font-sans);font-size:var(--cx-font-size-small);font-weight:var(--cx-font-weight-regular);color:var(--cx-color-neutral-700);margin:inherit;align-items:stretch;line-height:1.6;display:flex;position:relative;overflow:hidden}.alert:not(.alert--has-icon) .alert__icon,.alert:not(.alert--closable) .alert__close-button{display:none}.alert__icon{font-size:var(--cx-font-size-large);flex:none;align-items:center;padding-inline-start:var(--cx-spacing-large);display:flex}.alert--has-countdown{border-bottom:none}.alert--primary{border-top-color:var(--cx-color-primary)}.alert--primary .alert__icon{color:var(--cx-color-primary)}.alert--success{border-top-color:var(--cx-color-success)}.alert--success .alert__icon{color:var(--cx-color-success)}.alert--neutral{border-top-color:var(--cx-color-neutral)}.alert--neutral .alert__icon{color:var(--cx-color-neutral)}.alert--warning{border-top-color:var(--cx-color-warning)}.alert--warning .alert__icon{color:var(--cx-color-warning)}.alert--danger{border-top-color:var(--cx-color-danger)}.alert--danger .alert__icon{color:var(--cx-color-danger)}.alert__message{padding:var(--cx-spacing-large);flex:auto;display:block;overflow:hidden}.alert__close-button{font-size:var(--cx-font-size-medium);flex:none;align-items:center;padding-inline-end:var(--cx-spacing-medium);display:flex}.alert__countdown{width:100%;height:calc(var(--cx-panel-border-width) * 3);background-color:var(--cx-panel-border-color);display:flex;position:absolute;bottom:0;left:0}.alert__countdown--ltr{justify-content:flex-end}.alert__countdown .alert__countdown-elapsed{width:0;height:100%}.alert--primary .alert__countdown-elapsed{background-color:var(--cx-color-primary)}.alert--success .alert__countdown-elapsed{background-color:var(--cx-color-success)}.alert--neutral .alert__countdown-elapsed{background-color:var(--cx-color-neutral-600)}.alert--warning .alert__countdown-elapsed{background-color:var(--cx-color-warning)}.alert--danger .alert__countdown-elapsed{background-color:var(--cx-color-danger)}.alert__timer{display:none}`;
 var z = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, t = (r, o, n, l) => {
   for (var a = l > 1 ? void 0 : l ? $(o, n) : o, c = r.length - 1, d; c >= 0; c--)
     (d = r[c]) && (a = (l ? d(o, n, a) : d(a)) || a);
@@ -152,7 +21,7 @@ var z = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, t = (r, o, n
 const i = Object.assign(document.createElement("div"), {
   className: "cx-toast-stack"
 });
-let e = class extends b {
+let e = class extends x {
   constructor() {
     super(...arguments), this.hasSlotController = new T(
       this,
@@ -244,10 +113,7 @@ let e = class extends b {
     });
   }
   render() {
-    return h`
-      <div
-        part="base"
-        class=${f({
+    return h`<div part="base" class=${f({
       alert: !0,
       "alert--closable": this.closable,
       "alert--danger": this.variant === "danger",
@@ -258,47 +124,13 @@ let e = class extends b {
       "alert--primary": this.variant === "primary",
       "alert--success": this.variant === "success",
       "alert--warning": this.variant === "warning"
-    })}
-        role="alert"
-        aria-hidden=${this.open ? "false" : "true"}
-        @mouseenter=${this.pauseAutoHide}
-        @mouseleave=${this.resumeAutoHide}
-      >
-        <div part="icon" class="alert__icon">
-          <slot name="icon"></slot>
-        </div>
-
-        <div part="message" class="alert__message" aria-live="polite">
-          <slot></slot>
-        </div>
-
-        ${this.closable ? h`
-              <cx-icon-button
-                part="close-button"
-                exportparts="base:close-button__base"
-                class="alert__close-button"
-                name="close"
-                label=${this.localize.term("close")}
-                @click=${this.handleCloseClick}
-              ></cx-icon-button>
-            ` : ""}
-
-        <div role="timer" class="alert__timer">${this.remainingTime}</div>
-        ${this.countdown ? h`
-              <div
-                class=${f({
+    })} role="alert" aria-hidden=${this.open ? "false" : "true"} @mouseenter=${this.pauseAutoHide} @mouseleave=${this.resumeAutoHide}><div part="icon" class="alert__icon"><slot name="icon"></slot></div><div part="message" class="alert__message" aria-live="polite"><slot></slot></div>${this.closable ? h`<cx-icon-button part="close-button" exportparts="base:close-button__base" class="alert__close-button" name="close" label=${this.localize.term("close")} @click=${this.handleCloseClick}></cx-icon-button>` : ""}<div role="timer" class="alert__timer">${this.remainingTime}</div>${this.countdown ? h`<div class=${f({
       alert__countdown: !0,
       "alert__countdown--ltr": this.countdown === "ltr"
-    })}
-              >
-                <div class="alert__countdown-elapsed"></div>
-              </div>
-            ` : ""}
-      </div>
-    `;
+    })}><div class="alert__countdown-elapsed"></div></div>` : ""}</div>`;
   }
 };
-e.styles = [x, k];
+e.styles = [b, k];
 e.dependencies = { "cx-icon-button": H };
 t([
   g('[part~="base"]')

package/library/components/am-chart.js

@@ -1,8 +1,8 @@
-import { bw as b } from "../chunks/am-chart.B_OdX4Q-.js";
+import { bw as b } from "../chunks/am-chart.H2jnOzFc.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import "../chunks/component.styles.DMSLciL5.js";
+import "../chunks/component.styles.CRO4Odto.js";
 import "../chunks/custom-element.L4WJXn1j.js";
-import "../chunks/watch.q1sEjPWL.js";
+import "../chunks/watch.BCJD77bD.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query-async.CTgXGyQ5.js";

package/library/components/animated-image.js

@@ -1,76 +1,18 @@
-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 { n as c, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as g } from "../chunks/component.styles.CRO4Odto.js";
 import { c as y } from "../chunks/custom-element.L4WJXn1j.js";
-import { w as m } from "../chunks/watch.q1sEjPWL.js";
+import { w as m } from "../chunks/watch.BCJD77bD.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 { r as p } from "../chunks/state.CSDxrqLd.js";
 import { e as x } from "../chunks/query.BBf1UFkC.js";
 import u from "./icon.js";
-const v = f`
-  :host {
-    --control-box-size: 3rem;
-    --icon-size: calc(var(--control-box-size) * 0.625);
-
-    display: inline-flex;
-    position: relative;
-    cursor: pointer;
-  }
-
-  .animated-image {
-    display: inline-grid;
-    grid-template-columns: 1fr;
-  }
-
-  img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    grid-row-start: 1;
-    grid-column-start: 1;
-  }
-
-  img[aria-hidden='true'] {
-    visibility: hidden;
-  }
-
-  .animated-image__control-box {
-    display: flex;
-    position: absolute;
-    align-items: center;
-    justify-content: center;
-    top: calc(50% - var(--control-box-size) / 2);
-    right: calc(50% - var(--control-box-size) / 2);
-    width: var(--control-box-size);
-    height: var(--control-box-size);
-    font-size: var(--icon-size);
-    background: none;
-    border: solid 2px currentColor;
-    background-color: rgb(0 0 0 /50%);
-    border-radius: var(--cx-border-radius-circle);
-    color: white;
-    pointer-events: none;
-    transition: var(--cx-transition-fast) opacity;
-  }
-
-  :host([play]:hover) .animated-image__control-box {
-    opacity: 1;
-  }
-
-  :host([play]:not(:hover)) .animated-image__control-box {
-    opacity: 0;
-  }
-
-  :host([play]) slot[name='play-icon'],
-  :host(:not([play])) slot[name='pause-icon'] {
-    display: none;
-  }
-`;
-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;
+const v = f`:host{--control-box-size:3rem;--icon-size:calc(var(--control-box-size) * .625);cursor:pointer;display:inline-flex;position:relative}.animated-image{grid-template-columns:1fr;display:inline-grid}img{grid-row-start:1;grid-column-start:1;width:100%;height:100%;display:block}img[aria-hidden=true]{visibility:hidden}.animated-image__control-box{top:calc(50% - var(--control-box-size) / 2);right:calc(50% - var(--control-box-size) / 2);width:var(--control-box-size);height:var(--control-box-size);font-size:var(--icon-size);border-radius:var(--cx-border-radius-circle);color:#fff;pointer-events:none;transition:var(--cx-transition-fast) opacity;background:#00000080;border:2px solid;justify-content:center;align-items:center;display:flex;position:absolute}:host([play]:hover) .animated-image__control-box{opacity:1}:host([play]:not(:hover)) .animated-image__control-box{opacity:0}:host([play]) slot[name=play-icon],:host(:not([play])) slot[name=pause-icon]{display:none}`;
+var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (a, i, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? b(i, r) : i, n = a.length - 1, l; n >= 0; n--)
+    (l = a[n]) && (o = (s ? l(i, r, o) : l(o)) || o);
+  return s && o && _(i, r, o), o;
 };
-let e = class extends p {
+let e = class extends h {
   constructor() {
     super(...arguments), this.isLoaded = !1;
   }
@@ -91,37 +33,7 @@ let e = class extends p {
     this.isLoaded = !1;
   }
   render() {
-    return d`
-      <div class="animated-image">
-        <img
-          class="animated-image__animated"
-          src=${this.src}
-          alt=${this.alt}
-          crossorigin="anonymous"
-          aria-hidden=${this.play ? "false" : "true"}
-          @click=${this.handleClick}
-          @load=${this.handleLoad}
-          @error=${this.handleError}
-        />
-
-        ${this.isLoaded ? d`
-              <img
-                class="animated-image__frozen"
-                src=${this.frozenFrame}
-                alt=${this.alt}
-                aria-hidden=${this.play ? "true" : "false"}
-                @click=${this.handleClick}
-              />
-
-              <div part="control-box" class="animated-image__control-box">
-                <slot name="play-icon"
-                  ><cx-icon name="play_arrow"></cx-icon
-                ></slot>
-                <slot name="pause-icon"><cx-icon name="pause"></cx-icon></slot>
-              </div>
-            ` : ""}
-      </div>
-    `;
+    return d`<div class="animated-image"><img class="animated-image__animated" src=${this.src} alt=${this.alt} crossorigin="anonymous" aria-hidden=${this.play ? "false" : "true"} @click=${this.handleClick} @load=${this.handleLoad} @error=${this.handleError}>${this.isLoaded ? d`<img class="animated-image__frozen" src=${this.frozenFrame} alt=${this.alt} aria-hidden=${this.play ? "true" : "false"} @click=${this.handleClick}><div part="control-box" class="animated-image__control-box"><slot name="play-icon"><cx-icon name="play_arrow"></cx-icon></slot><slot name="pause-icon"><cx-icon name="pause"></cx-icon></slot></div>` : ""}</div>`;
   }
 };
 e.styles = [g, v];
@@ -130,10 +42,10 @@ t([
   x(".animated-image__animated")
 ], e.prototype, "animatedImage", 2);
 t([
-  h()
+  p()
 ], e.prototype, "frozenFrame", 2);
 t([
-  h()
+  p()
 ], e.prototype, "isLoaded", 2);
 t([
   c()

package/library/components/animation.js

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

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

@@ -1,7 +1,7 @@
 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 g } from "../chunks/component.styles.CRO4Odto.js";
 import { c as w } 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 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";
@@ -10,62 +10,7 @@ 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;
-  }
-`;
+const A = x`.array-clamp{flex-wrap:nowrap;flex-grow:1;flex-shrink:1;align-items:center;display:flex;overflow:hidden}.array-clamp__items-container{flex-wrap:nowrap;flex-grow:1;flex-shrink:1;align-items:center;width:100%;min-width:0;display:flex;overflow:hidden}.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){-webkit-line-clamp:1;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;flex-shrink:1;min-width:0;display:-webkit-box;overflow:hidden}.array-clamp__indicator{flex-shrink:0}.array-clamp__indicator::part(base){overflow-wrap:break-word;min-width:2rem;max-width:4rem}`;
 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);
@@ -127,40 +72,14 @@ let l = class extends y {
     this.applyItemClasses();
   }
   render() {
-    return m`
-      <div
-        class="array-clamp"
-        style=${b({
+    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(
+    })}><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>
-              `,
+      () => 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>
-    `;
+    )}</div></cx-resize-observer></div>`;
   }
 };
 l.styles = [g, A];