@orangelogic/design-system 2.100.0 → 2.102.0

package/library/components/tag.js

@@ -1,32 +1,42 @@
-import { n as c, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as p } from "../chunks/component.styles.CRO4Odto.js";
-import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as v } from "../chunks/i18n.DK1uYlJT.js";
-import { i as d, x as g } from "../chunks/lit-element.jLBm65_O.js";
-import { e as x } from "../chunks/class-map.BiVq-cVR.js";
-import { C as h } from "../chunks/icon-button.CN0NGNQx.js";
-import b from "./line-clamp.js";
-const f = d`:host{display:inline-block}.tag{white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid;align-items:center;line-height:1;display:flex}.tag__remove::part(base){color:inherit;padding:0}.tag--primary{background-color:var(--cx-color-primary-50);border-color:var(--cx-color-primary-300);color:var(--cx-color-primary-800)}.tag--primary:active>cx-icon-button{color:var(--cx-color-primary)}.tag--success{background-color:var(--cx-color-success-50);border-color:var(--cx-color-success-200);color:var(--cx-color-success-800)}.tag--success:active>cx-icon-button{color:var(--cx-color-success)}.tag--neutral{background-color:var(--cx-color-neutral-50);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral-800)}.tag--neutral:active>cx-icon-button{color:var(--cx-color-neutral-600)}.tag--warning{background-color:var(--cx-color-warning-50);border-color:var(--cx-color-warning-200);color:var(--cx-color-warning-800)}.tag--warning:active>cx-icon-button{color:var(--cx-color-warning)}.tag--danger{background-color:var(--cx-color-danger-50);border-color:var(--cx-color-danger-200);color:var(--cx-color-danger-800)}.tag--danger:active>cx-icon-button{color:var(--cx-color-danger)}.tag--small{font-size:var(--cx-button-font-size-small);height:calc(var(--cx-input-height-small) * .8);line-height:calc(var(--cx-input-height-small) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-small);padding:0 var(--cx-spacing-x-small)}.tag--medium{font-size:var(--cx-button-font-size-medium);height:calc(var(--cx-input-height-medium) * .8);line-height:calc(var(--cx-input-height-medium) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-medium);padding:0 var(--cx-spacing-small)}.tag--large{font-size:var(--cx-button-font-size-large);height:calc(var(--cx-input-height-large) * .8);line-height:calc(var(--cx-input-height-large) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-large);padding:0 var(--cx-spacing-medium)}.tag--small .tag__remove::part(icon){--font-size:var(--cx-font-size-small)}.tag--medium .tag__remove::part(icon){--font-size:var(--cx-font-size-medium)}.tag--large .tag__remove::part(icon){--font-size:var(--cx-font-size-large)}.tag--pill{border-radius:var(--cx-border-radius-pill)}.tag--removable{padding-inline-end:0}`;
-var z = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (s, t, i, o) => {
-  for (var a = o > 1 ? void 0 : o ? _(t, i) : t, l = s.length - 1, n; l >= 0; l--)
-    (n = s[l]) && (a = (o ? n(t, i, a) : n(a)) || a);
-  return o && a && z(t, i, a), a;
+import { n as i, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as u } from "../chunks/component.styles.CRO4Odto.js";
+import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as h } from "../chunks/i18n.DK1uYlJT.js";
+import { H as v } from "../chunks/slot.j5oheLJC.js";
+import { i as d, x as m } from "../chunks/lit-element.jLBm65_O.js";
+import { e as f } from "../chunks/class-map.BiVq-cVR.js";
+import { C as b } from "../chunks/icon-button.CN0NGNQx.js";
+import _ from "./line-clamp.js";
+const n = 1, y = d`:host{display:inline-block}.tag{white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid;align-items:center;line-height:1;display:flex}.tag__content{min-width:0}.tag--has-prefix .tag__prefix,.tag--has-suffix .tag__suffix{flex:none;align-items:center;display:inline-flex}.tag--has-prefix .tag__prefix{margin-inline-end:var(--cx-spacing-x-small)}.tag--has-suffix .tag__suffix{margin-inline-start:var(--cx-spacing-x-small)}.tag__remove::part(base){color:inherit;padding:0}.tag--primary{background-color:var(--cx-color-primary-50);border-color:var(--cx-color-primary-300);color:var(--cx-color-primary-800)}.tag--primary:active>cx-icon-button{color:var(--cx-color-primary)}.tag--success{background-color:var(--cx-color-success-50);border-color:var(--cx-color-success-200);color:var(--cx-color-success-800)}.tag--success:active>cx-icon-button{color:var(--cx-color-success)}.tag--neutral{background-color:var(--cx-color-neutral-50);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral-800)}.tag--neutral:active>cx-icon-button{color:var(--cx-color-neutral-600)}.tag--warning{background-color:var(--cx-color-warning-50);border-color:var(--cx-color-warning-200);color:var(--cx-color-warning-800)}.tag--warning:active>cx-icon-button{color:var(--cx-color-warning)}.tag--danger{background-color:var(--cx-color-danger-50);border-color:var(--cx-color-danger-200);color:var(--cx-color-danger-800)}.tag--danger:active>cx-icon-button{color:var(--cx-color-danger)}.tag--small{font-size:var(--cx-button-font-size-small);height:calc(var(--cx-input-height-small) * .8);line-height:calc(var(--cx-input-height-small) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-small);padding:0 var(--cx-spacing-x-small)}.tag--medium{font-size:var(--cx-button-font-size-medium);height:calc(var(--cx-input-height-medium) * .8);line-height:calc(var(--cx-input-height-medium) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-medium);padding:0 var(--cx-spacing-small)}.tag--large{font-size:var(--cx-button-font-size-large);height:calc(var(--cx-input-height-large) * .8);line-height:calc(var(--cx-input-height-large) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-large);padding:0 var(--cx-spacing-medium)}.tag--small .tag__remove::part(icon){--font-size:var(--cx-font-size-small)}.tag--medium .tag__remove::part(icon){--font-size:var(--cx-font-size-medium)}.tag--large .tag__remove::part(icon){--font-size:var(--cx-font-size-large)}.tag--pill{border-radius:var(--cx-border-radius-pill)}.tag--removable{padding-inline-end:0}.tag--multiline{white-space:normal;height:auto;padding-block:var(--cx-spacing-2x-small);align-items:flex-start}.tag--multiline.tag--small{line-height:var(--cx-line-height-small)}.tag--multiline.tag--medium{line-height:var(--cx-line-height-medium)}.tag--multiline.tag--large{line-height:var(--cx-line-height-large)}`;
+var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, t = (e, o, c, l) => {
+  for (var a = l > 1 ? void 0 : l ? z(o, c) : o, s = e.length - 1, g; s >= 0; s--)
+    (g = e[s]) && (a = (l ? g(o, c, a) : g(a)) || a);
+  return l && a && w(o, c, a), a;
 };
-let r = class extends m {
+let r = class extends p {
   constructor() {
-    super(...arguments), this.localize = new v(this), this.variant = "neutral", this.size = "medium", this.pill = !1, this.removable = !1;
+    super(...arguments), this.localize = new h(this), this.hasSlotController = new v(
+      this,
+      "prefix",
+      "suffix"
+    ), this.variant = "neutral", this.size = "medium", this.pill = !1, this.removable = !1, this.lines = n;
   }
   handleRemoveClick() {
     this.emit("cx-remove");
   }
   render() {
-    return g`<span part="base" class=${x({
+    const e = Number.isFinite(this.lines) ? Math.max(n, Math.trunc(this.lines)) : n;
+    return m`<span part="base" class=${f({
       tag: !0,
       "tag--danger": this.variant === "danger",
+      // Slots
+      "tag--has-prefix": this.hasSlotController.test("prefix"),
+      "tag--has-suffix": this.hasSlotController.test("suffix"),
       "tag--large": this.size === "large",
       "tag--medium": this.size === "medium",
-      "tag--neutral": this.variant === "neutral",
       // Modifiers
+      "tag--multiline": e > n,
+      "tag--neutral": this.variant === "neutral",
       "tag--pill": this.pill,
       "tag--primary": this.variant === "primary",
       "tag--removable": this.removable,
@@ -35,28 +45,31 @@ let r = class extends m {
       "tag--success": this.variant === "success",
       "tag--text": this.variant === "text",
       "tag--warning": this.variant === "warning"
-    })}><cx-line-clamp class="tag__content" lines="1"><slot part="content"></slot></cx-line-clamp>${this.removable ? g`<cx-icon-button part="remove-button" exportparts="base:remove-button__base" name="close" label=${this.localize.term("remove")} class="tag__remove" @click=${this.handleRemoveClick} tabindex="-1"></cx-icon-button>` : ""}</span>`;
+    })}><slot name="prefix" part="prefix" class="tag__prefix"></slot><cx-line-clamp class="tag__content" lines=${e}><slot part="content"></slot></cx-line-clamp><slot name="suffix" part="suffix" class="tag__suffix"></slot>${this.removable ? m`<cx-icon-button part="remove-button" exportparts="base:remove-button__base" name="close" label=${this.localize.term("remove")} class="tag__remove" @click=${this.handleRemoveClick} tabindex="-1"></cx-icon-button>` : ""}</span>`;
   }
 };
-r.styles = [p, f];
+r.styles = [u, y];
 r.dependencies = {
-  "cx-icon-button": h,
-  "cx-line-clamp": b
+  "cx-icon-button": b,
+  "cx-line-clamp": _
 };
-e([
-  c({ reflect: !0 })
+t([
+  i({ reflect: !0 })
 ], r.prototype, "variant", 2);
-e([
-  c({ reflect: !0 })
+t([
+  i({ reflect: !0 })
 ], r.prototype, "size", 2);
-e([
-  c({ reflect: !0, type: Boolean })
+t([
+  i({ reflect: !0, type: Boolean })
 ], r.prototype, "pill", 2);
-e([
-  c({ type: Boolean })
+t([
+  i({ type: Boolean })
 ], r.prototype, "removable", 2);
-r = e([
-  u("cx-tag")
+t([
+  i({ type: Number })
+], r.prototype, "lines", 2);
+r = t([
+  x("cx-tag")
 ], r);
 export {
   r as default

package/library/components/tooltip.js

@@ -1,8 +1,7 @@
 import { n as i, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";
 import { c as g } from "../chunks/component.styles.CRO4Odto.js";
-import { p as c, s as u, a as m } from "../chunks/animate.El-MpOws.js";
+import { p as c, s as u, a as m, w as y } from "../chunks/event.BeKOsirN.js";
 import { c as w } from "../chunks/custom-element.L4WJXn1j.js";
-import { w as y } from "../chunks/event.mFzZi4sr.js";
 import { L as x } from "../chunks/i18n.DK1uYlJT.js";
 import { w as l } from "../chunks/watch.BCJD77bD.js";
 import { i as C, x as k } from "../chunks/lit-element.jLBm65_O.js";

package/library/components/tree-item.js

@@ -1,6 +1,6 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import "../chunks/animate.El-MpOws.js";
+import "../chunks/event.BeKOsirN.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.DK1uYlJT.js";
 import "../chunks/watch.BCJD77bD.js";
@@ -14,8 +14,9 @@ import "../chunks/when.Dr1es41R.js";
 import "../chunks/animation-registry.HmpwNuGH.js";
 import "./checkbox.js";
 import "./icon.js";
+import "./line-clamp.js";
 import "./spinner.js";
-import { C as j } from "../chunks/tree.Hh8WCK7l.js";
+import { C as k } from "../chunks/tree.DAiWVFiY.js";
 export {
-  j as default
+  k as default
 };

package/library/components/tree.js

@@ -4,7 +4,7 @@ import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.DK1uYlJT.js";
 import "../chunks/math.DqTA6ya4.js";
 import "../chunks/watch.BCJD77bD.js";
-import { a as y, b, s as f, c as x } from "../chunks/tree.Hh8WCK7l.js";
+import { a as y, b, s as f, c as x } from "../chunks/tree.DAiWVFiY.js";
 import "../chunks/lit-element.jLBm65_O.js";
 import "../chunks/state.CSDxrqLd.js";
 import "../chunks/query.BBf1UFkC.js";