@orangelogic/design-system 2.78.0 → 2.79.0-ci.2

package/library/components/rating.js

@@ -1,5 +1,5 @@
 import { n as l, C as g } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as y } from "../chunks/component.styles.DMSLciL5.js";
+import { c as y } from "../chunks/component.styles.CRO4Odto.js";
 import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as f } from "../chunks/i18n.BUW7B9hr.js";
 import { c as _ } from "../chunks/math.DqTA6ya4.js";
@@ -13,204 +13,73 @@ import { c as w } from "../chunks/repeat.DbF2p5ae.js";
 import { o as m } from "../chunks/style-map.llVFPd__.js";
 import { o as d } from "../chunks/unsafe-html.Dff7-rCx.js";
 import M from "./icon.js";
-const H = x`
-  :host {
-    --symbol-color: var(--cx-color-neutral-300);
-    --symbol-color-active: var(--cx-color-warning-500);
-    --symbol-size: 1.2rem;
-    --symbol-container-size: 40px;
-    --symbol-spacing: var(--cx-spacing-3x-small);
-
-    display: inline-flex;
-  }
-
-  :host([variant='outlined']) {
-    --symbol-size: var(--cx-font-size-x-large);
-    --symbol-color: var(--cx-color-neutral-600);
-    --symbol-color-active: var(--cx-color-neutral-600);
-  }
-
-  .rating {
-    position: relative;
-    display: inline-flex;
-    border-radius: var(--cx-border-radius-small);
-    vertical-align: middle;
-  }
-
-  .rating:focus {
-    outline: none;
-  }
-
-  .rating:focus-visible {
-    outline: var(--cx-focus-ring);
-    outline-offset: var(--cx-focus-ring-offset);
-  }
-
-  .rating__symbols {
-    display: inline-flex;
-    position: relative;
-    line-height: 0;
-    color: var(--symbol-color);
-    white-space: nowrap;
-    cursor: pointer;
-  }
-
-  .rating__symbols > * {
-    padding: var(--symbol-spacing);
-  }
-
-  .rating__symbol--active,
-  .rating__partial--filled {
-    color: var(--symbol-color-active);
-  }
-
-  .rating__partial-symbol-container {
-    position: relative;
-  }
-
-  .rating__partial--filled {
-    position: absolute;
-    top: var(--symbol-spacing);
-    left: var(--symbol-spacing);
-  }
-
-  .rating__symbol {
-    transition: var(--cx-transition-fast) scale;
-    pointer-events: none;
-  }
-
-  .rating__symbol cx-icon {
-    --font-size: var(--symbol-size);
-  }
-
-  .rating__symbol--hover {
-    scale: 1.2;
-  }
-
-  .rating--disabled .rating__symbols,
-  .rating--readonly .rating__symbols {
-    cursor: default;
-  }
-
-  .rating--disabled .rating__symbol--hover,
-  .rating--readonly .rating__symbol--hover {
-    scale: none;
-  }
-
-  .rating--disabled {
-    opacity: 0.5;
-  }
-
-  .rating--disabled .rating__symbols {
-    cursor: default;
-  }
-
-  /* Forced colors mode */
-  @media (forced-colors: active) {
-    .rating__symbol--active {
-      color: SelectedItem;
-    }
-  }
-
-  /** Outlined */
-  .rating--outlined .rating__symbol {
-    border: var(--cx-input-border-width) solid var(--cx-input-border-color);
-    width: var(--symbol-container-size);
-    height: var(--symbol-container-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .rating--outlined .rating__partial--filled {
-    top: unset;
-    left: unset;
-  }
-
-  .rating--outlined .rating__symbol:not(:first-child) {
-    border-left: none;
-  }
-
-  .rating--outlined .rating__symbol:first-child {
-    border-top-left-radius: var(--cx-border-radius-small);
-    border-bottom-left-radius: var(--cx-border-radius-small);
-  }
-
-  .rating--outlined .rating__symbol:last-child {
-    border-top-right-radius: var(--cx-border-radius-small);
-    border-bottom-right-radius: var(--cx-border-radius-small);
-  }
-
-  .rating--outlined .rating__symbol--hover {
-    scale: 1;
-  }
-`;
-var C = Object.defineProperty, P = Object.getOwnPropertyDescriptor, a = (e, o, i, s) => {
-  for (var t = s > 1 ? void 0 : s ? P(o, i) : o, n = e.length - 1, h; n >= 0; n--)
-    (h = e[n]) && (t = (s ? h(o, i, t) : h(t)) || t);
-  return s && t && C(o, i, t), t;
+const H = x`:host{--symbol-color:var(--cx-color-neutral-300);--symbol-color-active:var(--cx-color-warning-500);--symbol-size:1.2rem;--symbol-container-size:40px;--symbol-spacing:var(--cx-spacing-3x-small);display:inline-flex}:host([variant=outlined]){--symbol-size:var(--cx-font-size-x-large);--symbol-color:var(--cx-color-neutral-600);--symbol-color-active:var(--cx-color-neutral-600)}.rating{border-radius:var(--cx-border-radius-small);vertical-align:middle;display:inline-flex;position:relative}.rating:focus{outline:none}.rating:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.rating__symbols{color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;display:inline-flex;position:relative}.rating__symbols>*{padding:var(--symbol-spacing)}.rating__symbol--active,.rating__partial--filled{color:var(--symbol-color-active)}.rating__partial-symbol-container{position:relative}.rating__partial--filled{top:var(--symbol-spacing);left:var(--symbol-spacing);position:absolute}.rating__symbol{transition:var(--cx-transition-fast) scale;pointer-events:none}.rating__symbol cx-icon{--font-size:var(--symbol-size)}.rating__symbol--hover{scale:1.2}.rating--disabled .rating__symbols,.rating--readonly .rating__symbols{cursor:default}.rating--disabled .rating__symbol--hover,.rating--readonly .rating__symbol--hover{scale:none}.rating--disabled{opacity:.5}.rating--disabled .rating__symbols{cursor:default}@media (forced-colors:active){.rating__symbol--active{color:selecteditem}}.rating--outlined .rating__symbol{border:var(--cx-input-border-width) solid var(--cx-input-border-color);width:var(--symbol-container-size);height:var(--symbol-container-size);justify-content:center;align-items:center;display:flex}.rating--outlined .rating__partial--filled{top:unset;left:unset}.rating--outlined .rating__symbol:not(:first-child){border-left:none}.rating--outlined .rating__symbol:first-child{border-top-left-radius:var(--cx-border-radius-small);border-bottom-left-radius:var(--cx-border-radius-small)}.rating--outlined .rating__symbol:last-child{border-top-right-radius:var(--cx-border-radius-small);border-bottom-right-radius:var(--cx-border-radius-small)}.rating--outlined .rating__symbol--hover{scale:1}`;
+var C = Object.defineProperty, P = Object.getOwnPropertyDescriptor, a = (t, o, i, s) => {
+  for (var e = s > 1 ? void 0 : s ? P(o, i) : o, n = t.length - 1, h; n >= 0; n--)
+    (h = t[n]) && (e = (s ? h(o, i, e) : h(e)) || e);
+  return s && e && C(o, i, e), e;
 };
 let r = class extends g {
   constructor() {
-    super(...arguments), this.localize = new f(this), this.hoverValue = 0, this.isHovering = !1, this.label = "", this.value = 0, this.max = 5, this.precision = 1, this.readonly = !1, this.disabled = !1, this.variant = "default", this.getSymbol = (e, o = !1) => this.variant !== "outlined" ? '<cx-icon name="star"></cx-icon>' : o ? '<cx-icon name="star" variant="filled"></cx-icon>' : '<cx-icon name="star"></cx-icon>';
+    super(...arguments), this.localize = new f(this), this.hoverValue = 0, this.isHovering = !1, this.label = "", this.value = 0, this.max = 5, this.precision = 1, this.readonly = !1, this.disabled = !1, this.variant = "default", this.getSymbol = (t, o = !1) => this.variant !== "outlined" ? '<cx-icon name="star"></cx-icon>' : o ? '<cx-icon name="star" variant="filled"></cx-icon>' : '<cx-icon name="star"></cx-icon>';
   }
-  getValueFromMousePosition(e) {
-    return this.getValueFromXCoordinate(e.clientX);
+  getValueFromMousePosition(t) {
+    return this.getValueFromXCoordinate(t.clientX);
   }
-  getValueFromTouchPosition(e) {
-    return this.getValueFromXCoordinate(e.touches[0].clientX);
+  getValueFromTouchPosition(t) {
+    return this.getValueFromXCoordinate(t.touches[0].clientX);
   }
-  getValueFromXCoordinate(e) {
-    const o = this.localize.dir() === "rtl", { left: i, right: s, width: t } = this.rating.getBoundingClientRect(), n = o ? this.roundToPrecision(
-      (s - e) / t * this.max,
+  getValueFromXCoordinate(t) {
+    const o = this.localize.dir() === "rtl", { left: i, right: s, width: e } = this.rating.getBoundingClientRect(), n = o ? this.roundToPrecision(
+      (s - t) / e * this.max,
       this.precision
     ) : this.roundToPrecision(
-      (e - i) / t * this.max,
+      (t - i) / e * this.max,
       this.precision
     );
     return _(n, 0, this.max);
   }
-  handleClick(e) {
-    this.disabled || (this.setValue(this.getValueFromMousePosition(e)), this.emit("cx-change"));
+  handleClick(t) {
+    this.disabled || (this.setValue(this.getValueFromMousePosition(t)), this.emit("cx-change"));
   }
-  setValue(e) {
-    this.disabled || this.readonly || (this.value = e === this.value ? 0 : e, this.isHovering = !1);
+  setValue(t) {
+    this.disabled || this.readonly || (this.value = t === this.value ? 0 : t, this.isHovering = !1);
   }
-  handleKeyDown(e) {
+  handleKeyDown(t) {
     const o = this.localize.dir() === "ltr", i = this.localize.dir() === "rtl", s = this.value;
     if (!(this.disabled || this.readonly)) {
-      if (e.key === "ArrowDown" || o && e.key === "ArrowLeft" || i && e.key === "ArrowRight") {
-        const t = e.shiftKey ? 1 : this.precision;
-        this.value = Math.max(0, this.value - t), e.preventDefault();
+      if (t.key === "ArrowDown" || o && t.key === "ArrowLeft" || i && t.key === "ArrowRight") {
+        const e = t.shiftKey ? 1 : this.precision;
+        this.value = Math.max(0, this.value - e), t.preventDefault();
       }
-      if (e.key === "ArrowUp" || o && e.key === "ArrowRight" || i && e.key === "ArrowLeft") {
-        const t = e.shiftKey ? 1 : this.precision;
-        this.value = Math.min(this.max, this.value + t), e.preventDefault();
+      if (t.key === "ArrowUp" || o && t.key === "ArrowRight" || i && t.key === "ArrowLeft") {
+        const e = t.shiftKey ? 1 : this.precision;
+        this.value = Math.min(this.max, this.value + e), t.preventDefault();
       }
-      e.key === "Home" && (this.value = 0, e.preventDefault()), e.key === "End" && (this.value = this.max, e.preventDefault()), this.value !== s && this.emit("cx-change");
+      t.key === "Home" && (this.value = 0, t.preventDefault()), t.key === "End" && (this.value = this.max, t.preventDefault()), this.value !== s && this.emit("cx-change");
     }
   }
-  handleMouseEnter(e) {
-    this.isHovering = !0, this.hoverValue = this.getValueFromMousePosition(e);
+  handleMouseEnter(t) {
+    this.isHovering = !0, this.hoverValue = this.getValueFromMousePosition(t);
   }
-  handleMouseMove(e) {
-    this.hoverValue = this.getValueFromMousePosition(e);
+  handleMouseMove(t) {
+    this.hoverValue = this.getValueFromMousePosition(t);
   }
   handleMouseLeave() {
     this.isHovering = !1;
   }
-  handleTouchStart(e) {
-    this.isHovering = !0, this.hoverValue = this.getValueFromTouchPosition(e), e.preventDefault();
+  handleTouchStart(t) {
+    this.isHovering = !0, this.hoverValue = this.getValueFromTouchPosition(t), t.preventDefault();
   }
-  handleTouchMove(e) {
-    this.hoverValue = this.getValueFromTouchPosition(e);
+  handleTouchMove(t) {
+    this.hoverValue = this.getValueFromTouchPosition(t);
   }
-  handleTouchEnd(e) {
-    this.isHovering = !1, this.setValue(this.hoverValue), this.emit("cx-change"), e.preventDefault();
+  handleTouchEnd(t) {
+    this.isHovering = !1, this.setValue(this.hoverValue), this.emit("cx-change"), t.preventDefault();
   }
-  roundToPrecision(e, o = 0.5) {
+  roundToPrecision(t, o = 0.5) {
     const i = 1 / o;
-    return Math.ceil(e * i) / i;
+    return Math.ceil(t * i) / i;
   }
   handleHoverValueChange() {
     this.emit("cx-hover", {
@@ -229,86 +98,37 @@ let r = class extends g {
     });
   }
   /** Sets focus on the rating. */
-  focus(e) {
-    this.rating.focus(e);
+  focus(t) {
+    this.rating.focus(t);
   }
   /** Removes focus from the rating. */
   blur() {
     this.rating.blur();
   }
   render() {
-    const e = this.localize.dir() === "rtl", o = Array.from(Array(this.max).keys());
+    const t = this.localize.dir() === "rtl", o = Array.from(Array(this.max).keys());
     let i = 0;
-    return this.disabled || this.readonly ? i = this.value : i = this.isHovering ? this.hoverValue : this.value, c`
-      <div
-        part="base"
-        class=${u({
+    return this.disabled || this.readonly ? i = this.value : i = this.isHovering ? this.hoverValue : this.value, c`<div part="base" class=${u({
       rating: !0,
       "rating--disabled": this.disabled,
       "rating--outlined": this.variant === "outlined",
       "rating--readonly": this.readonly,
-      "rating--rtl": e
-    })}
-        role="slider"
-        aria-label=${this.label}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        aria-readonly=${this.readonly ? "true" : "false"}
-        aria-valuenow=${this.value}
-        aria-valuemin="0"
-        aria-valuemax=${this.max}
-        tabindex=${this.disabled ? "-1" : "0"}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-        @mouseenter=${this.handleMouseEnter}
-        @touchstart=${this.handleTouchStart}
-        @mouseleave=${this.handleMouseLeave}
-        @touchend=${this.handleTouchEnd}
-        @mousemove=${this.handleMouseMove}
-        @touchmove=${this.handleTouchMove}
-      >
-        <span class="rating__symbols">
-          ${w(o, (s, t) => i > t && i < t + 1 ? c`
-                <span
-                  class=${u({
+      "rating--rtl": t
+    })} role="slider" aria-label=${this.label} aria-disabled=${this.disabled ? "true" : "false"} aria-readonly=${this.readonly ? "true" : "false"} aria-valuenow=${this.value} aria-valuemin="0" aria-valuemax=${this.max} tabindex=${this.disabled ? "-1" : "0"} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mouseenter=${this.handleMouseEnter} @touchstart=${this.handleTouchStart} @mouseleave=${this.handleMouseLeave} @touchend=${this.handleTouchEnd} @mousemove=${this.handleMouseMove} @touchmove=${this.handleTouchMove}><span class="rating__symbols">${w(o, (s, e) => i > e && i < e + 1 ? c`<span class=${u({
       "rating__partial-symbol-container": !0,
       rating__symbol: !0,
-      "rating__symbol--hover": this.isHovering && Math.ceil(i) === t + 1
-    })}
-                  role="presentation"
-                >
-                  <div
-                    style=${m({
-      clipPath: e ? `inset(0 ${(i - t) * 100}% 0 0)` : `inset(0 0 0 ${(i - t) * 100}%)`
-    })}
-                  >
-                    ${d(this.getSymbol(t + 1, !1))}
-                  </div>
-                  <div
-                    class="rating__partial--filled"
-                    style=${m({
-      clipPath: e ? `inset(0 0 0 ${100 - (i - t) * 100}%)` : `inset(0 ${100 - (i - t) * 100}% 0 0)`
-    })}
-                  >
-                    ${d(this.getSymbol(t + 1, !0))}
-                  </div>
-                </span>
-              ` : c`
-              <span
-                class=${u({
+      "rating__symbol--hover": this.isHovering && Math.ceil(i) === e + 1
+    })} role="presentation"><div style=${m({
+      clipPath: t ? `inset(0 ${(i - e) * 100}% 0 0)` : `inset(0 0 0 ${(i - e) * 100}%)`
+    })}>${d(this.getSymbol(e + 1, !1))}</div><div class="rating__partial--filled" style=${m({
+      clipPath: t ? `inset(0 0 0 ${100 - (i - e) * 100}%)` : `inset(0 ${100 - (i - e) * 100}% 0 0)`
+    })}>${d(this.getSymbol(e + 1, !0))}</div></span>` : c`<span class=${u({
       rating__symbol: !0,
-      "rating__symbol--active": i >= t + 1,
-      "rating__symbol--hover": this.isHovering && Math.ceil(i) === t + 1
-    })}
-                role="presentation"
-              >
-                ${d(
-      this.getSymbol(t + 1, i >= t + 1)
-    )}
-              </span>
-            `)}
-        </span>
-      </div>
-    `;
+      "rating__symbol--active": i >= e + 1,
+      "rating__symbol--hover": this.isHovering && Math.ceil(i) === e + 1
+    })} role="presentation">${d(
+      this.getSymbol(e + 1, i >= e + 1)
+    )}</span>`)}</span></div>`;
   }
 };
 r.styles = [y, H];

package/library/components/relative-time.js

@@ -1,20 +1,10 @@
 import { n as l, C as h } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as p } from "../chunks/component.styles.DMSLciL5.js";
+import { c as p } from "../chunks/component.styles.CRO4Odto.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as d } from "../chunks/i18n.BUW7B9hr.js";
 import { i as f, x as y } from "../chunks/lit-element.jLBm65_O.js";
 import { r as c } from "../chunks/state.CSDxrqLd.js";
-const T = f`
-  :host {
-    display: contents;
-  }
-
-  .relative-time {
-    color: var(--cx-relative-time-color, inherit);
-    font-size: var(--cx-relative-time-font-size, inherit);
-    font-weight: var(--cx-relative-time-font-weight, inherit);
-  }
-`;
+const T = f`:host{display:contents}.relative-time{color:var(--cx-relative-time-color,inherit);font-size:var(--cx-relative-time-font-size,inherit);font-weight:var(--cx-relative-time-font-weight,inherit)}`;
 var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (o, t, i, s) => {
   for (var n = s > 1 ? void 0 : s ? w(t, i) : t, r = o.length - 1, u; r >= 0; r--)
     (u = o[r]) && (n = (s ? u(t, i, n) : u(n)) || n);

package/library/components/resize-observer.js

@@ -1,13 +1,9 @@
 import { n as h, C as c } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as d } from "../chunks/component.styles.DMSLciL5.js";
+import { c as d } from "../chunks/component.styles.CRO4Odto.js";
 import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as p } from "../chunks/watch.BCJD77bD.js";
 import { i as v, x as m } from "../chunks/lit-element.jLBm65_O.js";
-const f = v`
-  :host {
-    display: contents;
-  }
-`;
+const f = v`:host{display:contents}`;
 var u = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (s, r, e, i) => {
   for (var t = i > 1 ? void 0 : i ? O(r, e) : r, l = s.length - 1, a; l >= 0; l--)
     (a = s[l]) && (t = (i ? a(r, e, t) : a(t)) || t);
@@ -48,7 +44,7 @@ let o = class extends c {
     this.disabled ? this.stopObserver() : this.startObserver();
   }
   render() {
-    return m` <slot @slotchange=${this.handleSlotChange}></slot> `;
+    return m`<slot @slotchange=${this.handleSlotChange}></slot>`;
   }
 };
 o.styles = [d, f];