@orangelogic/design-system 2.35.0 → 2.36.0

package/library/components/atoms.js

@@ -64,7 +64,7 @@ import { default as Ro } from "./step.js";
 import { default as Do } from "./stepper.js";
 import { default as yo } from "./switch.js";
 import { default as Mo } from "./tab.js";
-import { C as Oo } from "../chunks/tab-group.DyzM7DYO.js";
+import { C as Oo } from "../chunks/tab-group.B8-_uSUK.js";
 import { C as wo } from "../chunks/table.gTz8KEoo.js";
 import { default as Fo } from "./tab-panel.js";
 import { default as No } from "./tag.js";

package/library/components/file-on-demand.js

@@ -1,4 +1,4 @@
-import { C as J } from "../chunks/file-on-demand.JybCAzD6.js";
+import { C as J } from "../chunks/file-on-demand.Dhx3uvPA.js";
 import "./avatar.js";
 import "../chunks/button.DrU92LJQ.js";
 import "../chunks/dialog.C_sl1iWk.js";
@@ -14,7 +14,7 @@ import "./relative-time.js";
 import "../chunks/select.BYVsaIIH.js";
 import "./space.js";
 import "./tab.js";
-import "../chunks/tab-group.DyzM7DYO.js";
+import "../chunks/tab-group.B8-_uSUK.js";
 import "./tab-panel.js";
 import "./tooltip.js";
 import "../chunks/tree.BcFl8OPo.js";

package/library/components/organisms.js

@@ -1,6 +1,6 @@
 import { default as a } from "./asset-link-format.js";
 import { C as t } from "../chunks/color-swatch-group.CC1EASIg.js";
-import { C } from "../chunks/file-on-demand.JybCAzD6.js";
+import { C } from "../chunks/file-on-demand.Dhx3uvPA.js";
 export {
   a as CxAssetLinkFormat,
   t as CxColorSwatchGroup,

package/library/components/tab-group.js

@@ -1,7 +1,7 @@
 import "./resize-observer.js";
 import "../chunks/custom-element.fmLrnDZr.js";
 import "../chunks/component.styles.DtouHn2g.js";
-import { C as w } from "../chunks/tab-group.DyzM7DYO.js";
+import { C as w } from "../chunks/tab-group.B8-_uSUK.js";
 import "../chunks/i18n.D33BKrRs.js";
 import "../chunks/scroll.DwPiX2Ox.js";
 import "../chunks/watch.BCJD77bD.js";

package/library/components/tab.js

@@ -1,10 +1,10 @@
-import { i as b, n as l, C as u, x as m, c as v } from "../chunks/custom-element.fmLrnDZr.js";
+import { i as b, n as a, C as v, x as d, c as u } from "../chunks/custom-element.fmLrnDZr.js";
 import { c as h } from "../chunks/component.styles.DtouHn2g.js";
-import { L as f } from "../chunks/i18n.D33BKrRs.js";
-import { H as x } from "../chunks/slot.DJLm4Dig.js";
+import { L as x } from "../chunks/i18n.D33BKrRs.js";
+import { H as f } from "../chunks/slot.DJLm4Dig.js";
 import { w as p } from "../chunks/watch.BCJD77bD.js";
 import { e as _ } from "../chunks/query.BBf1UFkC.js";
-import { e as r } from "../chunks/class-map.DqNfBvJI.js";
+import { e as n } from "../chunks/class-map.DqNfBvJI.js";
 import g from "./icon-button.js";
 import y from "./line-clamp.js";
 const w = b`
@@ -98,7 +98,6 @@ const w = b`
   .timeline-item {
     display: flex;
     flex-direction: column;
-    align-items: center;
     gap: var(--cx-spacing-small);
     font-family: var(--cx-font-sans);
     font-size: var(--timeline-item-font-size, var(--cx-font-size-small));
@@ -116,13 +115,31 @@ const w = b`
       var(--transition-speed) box-shadow,
       var(--transition-speed) color;
     max-width: var(--tab-max-width, none);
+    position: relative;
+  }
+
+  .timeline-item--single {
+    align-items: center;
   }
 
   .timeline-item__content {
+    --timeline-item-content-width: max(min(120px, 100%), var(--marker-image-width));
+
     display: flex;
     align-items: center;
     flex-direction: column;
     gap: var(--cx-spacing-x-large);
+    position: relative;
+    left: calc(
+      var(--i) / (var(--n) - 1) *
+      (100% - var(--timeline-item-content-width))
+    );
+    transition: left 500ms linear;
+    width: var(--timeline-item-content-width);
+  }
+
+  :host(:last-of-type) .timeline-item__content {
+    transition: none;
   }
 
   .timeline-item__label {
@@ -181,7 +198,7 @@ const w = b`
     object-fit: cover;
   }
 
-  .timeline-indicator {
+  .timeline-item__indicator {
     position: relative;
     display: flex;
     align-items: center;
@@ -190,7 +207,7 @@ const w = b`
     isolation: isolate;
   }
 
-  .timeline-indicator__dot {
+  .timeline-item__indicator__dot {
     width: var(--cx-spacing-small);
     height: var(--cx-spacing-small);
     border-radius: var(--cx-border-radius-circle);
@@ -199,35 +216,10 @@ const w = b`
     z-index: 1;
   }
 
-  .timeline-indicator__dot--active:not(.timeline-indicator__dot--disabled),
-  :host(:hover) .timeline-indicator__dot:not(.timeline-indicator__dot--disabled) {
+  .timeline-item__indicator__dot--active:not(.timeline-item__indicator__dot--disabled),
+  :host(:hover) .timeline-item__indicator__dot:not(.timeline-item__indicator__dot--disabled) {
     background-color: var(--marker-active-color);
   }
-
-  .timeline-indicator__line {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 2px;
-    background-color: var(--cx-color-neutral-300);
-    display: block;
-  }
-
-  .timeline-indicator__line--first,
-  .timeline-indicator__line--last {
-    transform: translate(0, -50%);
-    width: 50%;
-  }
-
-  .timeline-indicator__line--first {
-    left: 50%;
-  }
-
-  .timeline-indicator__line--last {
-    left: 0;
-  }
 `, C = b`
   :host {
     display: inline-block;
@@ -253,14 +245,14 @@ const w = b`
 
   ${k}
 `;
-var $ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (i, o, s, n) => {
-  for (var a = n > 1 ? void 0 : n ? z(o, s) : o, c = i.length - 1, d; c >= 0; c--)
-    (d = i[c]) && (a = (n ? d(o, s, a) : d(a)) || a);
-  return n && a && $(o, s, a), a;
+var $ = Object.defineProperty, z = Object.getOwnPropertyDescriptor, e = (i, r, s, o) => {
+  for (var l = o > 1 ? void 0 : o ? z(r, s) : r, c = i.length - 1, m; c >= 0; c--)
+    (m = i[c]) && (l = (o ? m(r, s, l) : m(l)) || l);
+  return o && l && $(r, s, l), l;
 };
-let I = 0, t = class extends u {
+let I = 0, t = class extends v {
   constructor() {
-    super(...arguments), this.localize = new f(this), this.hasSlotController = new x(this, "thumbnail"), this.attrId = ++I, this.componentId = `cx-tab-${this.attrId}`, this.panel = "", this.active = !1, this.closable = !1, this.disabled = !1, this.tabIndex = 0, this.first = !1, this.last = !1;
+    super(...arguments), this.localize = new x(this), this.hasSlotController = new f(this, "thumbnail"), this.attrId = ++I, this.componentId = `cx-tab-${this.attrId}`, this.panel = "", this.active = !1, this.closable = !1, this.disabled = !1, this.tabIndex = 0, this.first = !1, this.last = !1, this.single = !1;
   }
   runFirstUpdated() {
     this.setAttribute("role", "tab");
@@ -275,10 +267,10 @@ let I = 0, t = class extends u {
     this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.disabled && !this.active ? this.tabIndex = -1 : this.tabIndex = 0;
   }
   renderNormalTab(i) {
-    return m`
+    return d`
       <div
         part="base"
-        class=${r({
+        class=${n({
       tab: !0,
       "tab--active": this.active,
       "tab--closable": this.closable,
@@ -289,7 +281,7 @@ let I = 0, t = class extends u {
         <cx-line-clamp part="label" class="tab__label" lines="1">
           <slot></slot>
         </cx-line-clamp>
-        ${this.closable ? m`
+        ${this.closable ? d`
               <cx-icon-button
                 part="close-button"
                 exportparts="base:close-button__base"
@@ -304,38 +296,32 @@ let I = 0, t = class extends u {
     `;
   }
   renderTimelineTab() {
-    return m`
-      <div class="timeline-indicator">
-        <div
-          class=${r({
-      "timeline-indicator__dot": !0,
-      "timeline-indicator__dot--active": this.active,
-      "timeline-indicator__dot--disabled": this.disabled
-    })}
-        ></div>
-        <div
-          class=${r({
-      "timeline-indicator__line": !0,
-      "timeline-indicator__line--first": this.first,
-      "timeline-indicator__line--last": this.last
-    })}
-        ></div>
-      </div>
+    return d`
       <div
         part="base"
-        class=${r({
+        class=${n({
       "timeline-item": !0,
       "timeline-item--active": this.active,
-      "timeline-item--disabled": this.disabled
+      "timeline-item--disabled": this.disabled,
+      "timeline-item--single": this.single
     })}
       >
         <div class="timeline-item__content">
+          <div class="timeline-item__indicator">
+            <div
+              class=${n({
+      "timeline-item__indicator__dot": !0,
+      "timeline-item__indicator__dot--active": this.active,
+      "timeline-item__indicator__dot--disabled": this.disabled
+    })}
+            ></div>
+          </div>
           <cx-line-clamp part="label" class="timeline-item__label" lines="1">
             <slot></slot>
           </cx-line-clamp>
           <slot
             name="thumbnail"
-            class=${r({
+            class=${n({
       "timeline-item__thumbnail": !0,
       "timeline-item__thumbnail--empty": !this.hasSlotController.test("thumbnail")
     })}
@@ -364,26 +350,29 @@ e([
   _(".tab")
 ], t.prototype, "tab", 2);
 e([
-  l({ reflect: !0 })
+  a({ reflect: !0 })
 ], t.prototype, "panel", 2);
 e([
-  l({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], t.prototype, "active", 2);
 e([
-  l({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], t.prototype, "closable", 2);
 e([
-  l({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], t.prototype, "disabled", 2);
 e([
-  l({ attribute: "tabindex", reflect: !0, type: Number })
+  a({ attribute: "tabindex", reflect: !0, type: Number })
 ], t.prototype, "tabIndex", 2);
 e([
-  l({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], t.prototype, "first", 2);
 e([
-  l({ reflect: !0, type: Boolean })
+  a({ reflect: !0, type: Boolean })
 ], t.prototype, "last", 2);
+e([
+  a({ reflect: !0, type: Boolean })
+], t.prototype, "single", 2);
 e([
   p("active")
 ], t.prototype, "handleActiveChange", 1);
@@ -391,7 +380,7 @@ e([
   p("disabled")
 ], t.prototype, "handleDisabledChange", 1);
 t = e([
-  v("cx-tab")
+  u("cx-tab")
 ], t);
 export {
   t as default