@cdevhub/ngx-tw 0.2.1 → 0.3.0

package/fesm2022/cdevhub-ngx-tw-timeline.mjs

@@ -387,10 +387,10 @@ const CHEVRON_CLASSES = 'absolute top-1/2 -translate-y-1/2 z-10 inline-flex item
  * ```
  */
 class TimelineMarkerDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimelineMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: TimelineMarkerDirective, isStandalone: true, selector: "[twTimelineMarker]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimelineMarkerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: TimelineMarkerDirective, isStandalone: true, selector: "[twTimelineMarker]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimelineMarkerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimelineMarkerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twTimelineMarker]',
@@ -401,10 +401,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  * output. Use for relative-time components ("2 hours ago").
  */
 class TimelineTimestampDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimelineTimestampDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: TimelineTimestampDirective, isStandalone: true, selector: "[twTimelineTimestamp]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimelineTimestampDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: TimelineTimestampDirective, isStandalone: true, selector: "[twTimelineTimestamp]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimelineTimestampDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimelineTimestampDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twTimelineTimestamp]',
@@ -415,10 +415,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  * `align="alternate"` / `align="split"` (vertical orientation only).
  */
 class TimelineOppositeDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimelineOppositeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: TimelineOppositeDirective, isStandalone: true, selector: "[twTimelineOpposite]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimelineOppositeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: TimelineOppositeDirective, isStandalone: true, selector: "[twTimelineOpposite]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimelineOppositeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimelineOppositeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[twTimelineOpposite]',
@@ -439,13 +439,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  */
 class TimelineComponent {
     /** Axis along which items are laid out. `'vertical'` stacks items top-to-bottom; `'horizontal'` lays them out left-to-right (RTL-aware). Defaults to `'vertical'`. */
-    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /** Vertical layout strategy. `'left'` / `'right'` place the marker on that side; `'alternate'` centers the marker and flips the body left ↔ right per item; `'split'` centers the marker with body on the right and the opposite slot on the left. Ignored when orientation is `'horizontal'`. Defaults to `'left'`. */
-    align = input('left', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    align = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     /** Density and typography scale. Controls marker diameter, gap between items, and body typography step. Defaults to `'md'`. */
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Connector line style applied to every gap between items. Defaults to `'solid'`. */
-    lineStyle = input('solid', ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
+    lineStyle = input('solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineStyle" }] : /* istanbul ignore next */ []));
     /**
      * Visibility policy for the horizontal-overflow chevron buttons. `'auto'`
      * shows them only when the inner scroll region can scroll in that direction;
@@ -462,7 +466,8 @@ class TimelineComponent {
      * The added input MUST be a single tri-state and MUST be inert on axis
      * values where overflow cannot occur (here: `orientation === 'vertical'`).
      */
-    scrollControls = input('auto', ...(ngDevMode ? [{ debugName: "scrollControls" }] : /* istanbul ignore next */ []));
+    scrollControls = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollControls" }] : /* istanbul ignore next */ []));
     /** @internal Static class string for the horizontal scroll viewport — see `HORIZONTAL_VIEWPORT_CLASSES`. */
     horizontalViewportClasses = HORIZONTAL_VIEWPORT_CLASSES;
     /** @internal Projected `tw-timeline-item` children in DOM order. */
@@ -470,26 +475,32 @@ class TimelineComponent {
     // ── Horizontal scroll / chevron wiring ──
     _destroyRef = inject(DestroyRef);
     _directionality = inject(Directionality, { optional: true });
-    _viewportRef = viewChild('scrollViewport', ...(ngDevMode ? [{ debugName: "_viewportRef" }] : /* istanbul ignore next */ []));
+    _viewportRef = viewChild('scrollViewport', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_viewportRef" }] : /* istanbul ignore next */ []));
     _scrollLabelsOverride = inject(TW_TIMELINE_SCROLL_LABELS, {
         optional: true,
     });
     /** @internal Live `dir` from CDK `Directionality`. */
-    _cdkDir = signal(this._directionality?.value ?? 'ltr', ...(ngDevMode ? [{ debugName: "_cdkDir" }] : /* istanbul ignore next */ []));
+    _cdkDir = signal(this._directionality?.value ?? 'ltr', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cdkDir" }] : /* istanbul ignore next */ []));
     /** @internal True when the host renders inside a `dir="rtl"` ancestor. */
-    _isRtl = computed(() => this._cdkDir() === 'rtl', ...(ngDevMode ? [{ debugName: "_isRtl" }] : /* istanbul ignore next */ []));
+    _isRtl = computed(() => this._cdkDir() === 'rtl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isRtl" }] : /* istanbul ignore next */ []));
     /**
      * @internal Defaults to `false` until the first measurement runs in
      * `afterNextRender`. This avoids a one-frame "enabled-then-disabled" flash
      * where the buttons appear live before the scroll state has been read.
      */
-    _canScrollPrev = signal(false, ...(ngDevMode ? [{ debugName: "_canScrollPrev" }] : /* istanbul ignore next */ []));
-    _canScrollNext = signal(false, ...(ngDevMode ? [{ debugName: "_canScrollNext" }] : /* istanbul ignore next */ []));
+    _canScrollPrev = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canScrollPrev" }] : /* istanbul ignore next */ []));
+    _canScrollNext = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canScrollNext" }] : /* istanbul ignore next */ []));
     /** @internal Resolved label record. Falls back to English defaults for any missing key. */
     scrollLabels = computed(() => ({
         ...DEFAULT_TW_TIMELINE_SCROLL_LABELS,
         ...(this._scrollLabelsOverride ?? {}),
-    }), ...(ngDevMode ? [{ debugName: "scrollLabels" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollLabels" }] : /* istanbul ignore next */ []));
     /** @internal True when the prev button should be aria-hidden + visually suppressed. */
     _prevButtonHidden = computed(() => {
         const policy = this.scrollControls();
@@ -498,7 +509,8 @@ class TimelineComponent {
         if (policy === 'always')
             return false;
         return !this._canScrollPrev();
-    }, ...(ngDevMode ? [{ debugName: "_prevButtonHidden" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_prevButtonHidden" }] : /* istanbul ignore next */ []));
     /** @internal True when the next button should be aria-hidden + visually suppressed. */
     _nextButtonHidden = computed(() => {
         const policy = this.scrollControls();
@@ -507,17 +519,22 @@ class TimelineComponent {
         if (policy === 'always')
             return false;
         return !this._canScrollNext();
-    }, ...(ngDevMode ? [{ debugName: "_nextButtonHidden" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_nextButtonHidden" }] : /* istanbul ignore next */ []));
     /** @internal Native `disabled` attribute. Always true for hidden buttons (defensive); also true for `'always'` policy when can't scroll. */
-    _prevButtonDisabled = computed(() => this._prevButtonHidden() || !this._canScrollPrev(), ...(ngDevMode ? [{ debugName: "_prevButtonDisabled" }] : /* istanbul ignore next */ []));
-    _nextButtonDisabled = computed(() => this._nextButtonHidden() || !this._canScrollNext(), ...(ngDevMode ? [{ debugName: "_nextButtonDisabled" }] : /* istanbul ignore next */ []));
+    _prevButtonDisabled = computed(() => this._prevButtonHidden() || !this._canScrollPrev(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_prevButtonDisabled" }] : /* istanbul ignore next */ []));
+    _nextButtonDisabled = computed(() => this._nextButtonHidden() || !this._canScrollNext(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_nextButtonDisabled" }] : /* istanbul ignore next */ []));
     /**
      * @internal Final class string for the prev chevron — combines the shared
      * `CHEVRON_CLASSES`, the directional anchor (`left-0` in LTR, `right-0` in
      * RTL), and the visibility variant driven by `scrollControls`.
      */
-    prevChevronClasses = computed(() => this._chevronClasses('prev'), ...(ngDevMode ? [{ debugName: "prevChevronClasses" }] : /* istanbul ignore next */ []));
-    nextChevronClasses = computed(() => this._chevronClasses('next'), ...(ngDevMode ? [{ debugName: "nextChevronClasses" }] : /* istanbul ignore next */ []));
+    prevChevronClasses = computed(() => this._chevronClasses('prev'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prevChevronClasses" }] : /* istanbul ignore next */ []));
+    nextChevronClasses = computed(() => this._chevronClasses('next'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextChevronClasses" }] : /* istanbul ignore next */ []));
     _chevronClasses(side) {
         const isRtl = this._isRtl();
         // In LTR the prev arrow anchors to the host's left, next to the right.
@@ -612,18 +629,29 @@ class TimelineComponent {
         orientation: this.orientation(),
         size: this.size(),
         lineStyle: this.lineStyle(),
-    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
-    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
     /** @internal Item slot classes shared with `TimelineItemComponent`. */
-    itemSlotClasses = computed(() => this.variantResult().item(), ...(ngDevMode ? [{ debugName: "itemSlotClasses" }] : /* istanbul ignore next */ []));
-    markerSideSlotClasses = computed(() => this.variantResult().markerSide(), ...(ngDevMode ? [{ debugName: "markerSideSlotClasses" }] : /* istanbul ignore next */ []));
-    markerSlotClasses = computed(() => this.variantResult().marker(), ...(ngDevMode ? [{ debugName: "markerSlotClasses" }] : /* istanbul ignore next */ []));
-    connectorLeadingSlotClasses = computed(() => this.variantResult().connectorLeading(), ...(ngDevMode ? [{ debugName: "connectorLeadingSlotClasses" }] : /* istanbul ignore next */ []));
-    connectorTrailingSlotClasses = computed(() => this.variantResult().connectorTrailing(), ...(ngDevMode ? [{ debugName: "connectorTrailingSlotClasses" }] : /* istanbul ignore next */ []));
-    bodySlotClasses = computed(() => this.variantResult().body(), ...(ngDevMode ? [{ debugName: "bodySlotClasses" }] : /* istanbul ignore next */ []));
-    oppositeSlotClasses = computed(() => this.variantResult().opposite(), ...(ngDevMode ? [{ debugName: "oppositeSlotClasses" }] : /* istanbul ignore next */ []));
-    numberSlotClasses = computed(() => this.variantResult().number(), ...(ngDevMode ? [{ debugName: "numberSlotClasses" }] : /* istanbul ignore next */ []));
-    timestampSlotClasses = computed(() => this.variantResult().timestamp(), ...(ngDevMode ? [{ debugName: "timestampSlotClasses" }] : /* istanbul ignore next */ []));
+    itemSlotClasses = computed(() => this.variantResult().item(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemSlotClasses" }] : /* istanbul ignore next */ []));
+    markerSideSlotClasses = computed(() => this.variantResult().markerSide(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerSideSlotClasses" }] : /* istanbul ignore next */ []));
+    markerSlotClasses = computed(() => this.variantResult().marker(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerSlotClasses" }] : /* istanbul ignore next */ []));
+    connectorLeadingSlotClasses = computed(() => this.variantResult().connectorLeading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectorLeadingSlotClasses" }] : /* istanbul ignore next */ []));
+    connectorTrailingSlotClasses = computed(() => this.variantResult().connectorTrailing(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "connectorTrailingSlotClasses" }] : /* istanbul ignore next */ []));
+    bodySlotClasses = computed(() => this.variantResult().body(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodySlotClasses" }] : /* istanbul ignore next */ []));
+    oppositeSlotClasses = computed(() => this.variantResult().opposite(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "oppositeSlotClasses" }] : /* istanbul ignore next */ []));
+    numberSlotClasses = computed(() => this.variantResult().number(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberSlotClasses" }] : /* istanbul ignore next */ []));
+    timestampSlotClasses = computed(() => this.variantResult().timestamp(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timestampSlotClasses" }] : /* istanbul ignore next */ []));
     /** @internal Variant builder reused by items so per-item state can recompose without rebuilding the base tv() result. */
     itemMarkerVariant = (state, marker) => timelineVariants({
         orientation: this.orientation(),
@@ -639,8 +667,8 @@ class TimelineComponent {
         lineStyle: this.lineStyle(),
         state,
     }).number();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TimelineComponent, isStandalone: true, selector: "tw-timeline", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, scrollControls: { classPropertyName: "scrollControls", publicName: "scrollControls", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "rootClasses()", "attr.aria-orientation": "orientation() === \"horizontal\" ? \"horizontal\" : null" } }, queries: [{ propertyName: "items", predicate: TimelineItemComponent, isSignal: true }], viewQueries: [{ propertyName: "_viewportRef", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimelineComponent, isStandalone: true, selector: "tw-timeline", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, lineStyle: { classPropertyName: "lineStyle", publicName: "lineStyle", isSignal: true, isRequired: false, transformFunction: null }, scrollControls: { classPropertyName: "scrollControls", publicName: "scrollControls", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list" }, properties: { "class": "rootClasses()", "attr.aria-orientation": "orientation() === \"horizontal\" ? \"horizontal\" : null" } }, queries: [{ propertyName: "items", predicate: TimelineItemComponent, isSignal: true }], viewQueries: [{ propertyName: "_viewportRef", first: true, predicate: ["scrollViewport"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #itemsTpl>
       <ng-content />
     </ng-template>
@@ -698,7 +726,7 @@ class TimelineComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-timeline',
@@ -785,35 +813,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  */
 class TimelineItemComponent {
     /** Semantic color for the marker fill and the trailing connector when the item is in a reached state. Ignored when state is `'error'` (which forces the error palette). Defaults to `'primary'`. */
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** Marker geometry. `'dot'` is a small filled circle. `'circle'` is a larger ring that may contain a projected icon, avatar, or an auto-computed 1-based index. Defaults to `'dot'`. */
-    marker = input('dot', ...(ngDevMode ? [{ debugName: "marker" }] : /* istanbul ignore next */ []));
+    marker = input('dot', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marker" }] : /* istanbul ignore next */ []));
     /** Semantic state of the event. Drives marker fill, ring, and trailing-connector color, and applies `aria-current="step"` when `'current'`. Defaults to `'reached'`. */
-    state = input('reached', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    state = input('reached', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
     /** Timestamp shown in the timestamp slot. A `Date` is formatted via `Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' })`; a string is rendered verbatim; `null` omits the timestamp element. Overridden by projected `[twTimelineTimestamp]` content when present. Defaults to `null`. */
-    timestamp = input(null, ...(ngDevMode ? [{ debugName: "timestamp" }] : /* istanbul ignore next */ []));
+    timestamp = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timestamp" }] : /* istanbul ignore next */ []));
     /** Machine-readable ISO 8601 datetime for the rendered `<time datetime="…">` attribute. Derived from `timestamp` when it is a `Date` and this input is `null`; required (explicit) when `timestamp` is a string and machine-readability is desired. When `null` with a string timestamp, the timestamp renders as a `<span>` instead. Defaults to `null`. */
-    dateTime = input(null, ...(ngDevMode ? [{ debugName: "dateTime" }] : /* istanbul ignore next */ []));
+    dateTime = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dateTime" }] : /* istanbul ignore next */ []));
     /** @internal Direct parent timeline. A `tw-timeline-item` outside a `tw-timeline` is a programmer error — the DI failure throws naturally. */
     timeline = inject(TimelineComponent);
     /** @internal */
-    markerSlot = contentChild(TimelineMarkerDirective, ...(ngDevMode ? [{ debugName: "markerSlot" }] : /* istanbul ignore next */ []));
+    markerSlot = contentChild(TimelineMarkerDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerSlot" }] : /* istanbul ignore next */ []));
     /** @internal */
-    timestampSlot = contentChild(TimelineTimestampDirective, ...(ngDevMode ? [{ debugName: "timestampSlot" }] : /* istanbul ignore next */ []));
+    timestampSlot = contentChild(TimelineTimestampDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timestampSlot" }] : /* istanbul ignore next */ []));
     /** @internal */
-    oppositeSlot = contentChild(TimelineOppositeDirective, ...(ngDevMode ? [{ debugName: "oppositeSlot" }] : /* istanbul ignore next */ []));
-    hasMarkerSlot = computed(() => !!this.markerSlot(), ...(ngDevMode ? [{ debugName: "hasMarkerSlot" }] : /* istanbul ignore next */ []));
-    hasTimestampSlot = computed(() => !!this.timestampSlot(), ...(ngDevMode ? [{ debugName: "hasTimestampSlot" }] : /* istanbul ignore next */ []));
-    hasOppositeSlot = computed(() => !!this.oppositeSlot(), ...(ngDevMode ? [{ debugName: "hasOppositeSlot" }] : /* istanbul ignore next */ []));
+    oppositeSlot = contentChild(TimelineOppositeDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "oppositeSlot" }] : /* istanbul ignore next */ []));
+    hasMarkerSlot = computed(() => !!this.markerSlot(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMarkerSlot" }] : /* istanbul ignore next */ []));
+    hasTimestampSlot = computed(() => !!this.timestampSlot(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTimestampSlot" }] : /* istanbul ignore next */ []));
+    hasOppositeSlot = computed(() => !!this.oppositeSlot(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasOppositeSlot" }] : /* istanbul ignore next */ []));
     /** @internal 0-based index in the parent timeline's content. -1 until contentChildren materialises. */
-    index = computed(() => this.timeline.items().indexOf(this), ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
-    isFirst = computed(() => this.index() === 0, ...(ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []));
+    index = computed(() => this.timeline.items().indexOf(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    isFirst = computed(() => this.index() === 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFirst" }] : /* istanbul ignore next */ []));
     isLast = computed(() => {
         const idx = this.index();
         if (idx < 0)
             return false;
         return idx === this.timeline.items().length - 1;
-    }, ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
     /**
      * Leading-connector visibility. In vertical orientation the marker sits at
      * the top of the body and only the trailing segment is rendered. In
@@ -821,7 +863,8 @@ class TimelineItemComponent {
      * the ends of the timeline, so the leading segment is always rendered — as a
      * coloured line for non-first items, as an invisible spacer for the first.
      */
-    renderLeadingConnector = computed(() => this.timeline.orientation() === 'horizontal', ...(ngDevMode ? [{ debugName: "renderLeadingConnector" }] : /* istanbul ignore next */ []));
+    renderLeadingConnector = computed(() => this.timeline.orientation() === 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderLeadingConnector" }] : /* istanbul ignore next */ []));
     /**
      * Trailing-connector visibility. Rendered for every item in horizontal
      * orientation (as a spacer on the last item) so all markers stay centered.
@@ -832,9 +875,11 @@ class TimelineItemComponent {
         if (this.timeline.orientation() === 'horizontal')
             return true;
         return !this.isLast();
-    }, ...(ngDevMode ? [{ debugName: "renderTrailingConnector" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderTrailingConnector" }] : /* istanbul ignore next */ []));
     /** @internal `error` state forces the error palette regardless of the color input. */
-    resolvedColor = computed(() => this.state() === 'error' ? 'error' : this.color(), ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
+    resolvedColor = computed(() => this.state() === 'error' ? 'error' : this.color(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
     /** @internal Previous item's state (drives the leading connector color so a line between two items reads as one color). */
     previousState = computed(() => {
         const idx = this.index();
@@ -842,7 +887,8 @@ class TimelineItemComponent {
             return 'reached';
         const prev = this.timeline.items()[idx - 1];
         return prev.state();
-    }, ...(ngDevMode ? [{ debugName: "previousState" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousState" }] : /* istanbul ignore next */ []));
     /** @internal Previous item's resolved color, for the same reason as `previousState`. */
     previousColor = computed(() => {
         const idx = this.index();
@@ -850,7 +896,8 @@ class TimelineItemComponent {
             return 'primary';
         const prev = this.timeline.items()[idx - 1];
         return prev.resolvedColor();
-    }, ...(ngDevMode ? [{ debugName: "previousColor" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousColor" }] : /* istanbul ignore next */ []));
     stateLabel = computed(() => {
         switch (this.state()) {
             case 'pending':
@@ -862,7 +909,8 @@ class TimelineItemComponent {
             default:
                 return null;
         }
-    }, ...(ngDevMode ? [{ debugName: "stateLabel" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateLabel" }] : /* istanbul ignore next */ []));
     formattedTimestamp = computed(() => {
         const ts = this.timestamp();
         if (ts === null)
@@ -874,7 +922,8 @@ class TimelineItemComponent {
             }).format(ts);
         }
         return ts;
-    }, ...(ngDevMode ? [{ debugName: "formattedTimestamp" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formattedTimestamp" }] : /* istanbul ignore next */ []));
     resolvedDateTime = computed(() => {
         const dt = this.dateTime();
         if (dt !== null)
@@ -883,14 +932,16 @@ class TimelineItemComponent {
         if (ts instanceof Date)
             return ts.toISOString();
         return null;
-    }, ...(ngDevMode ? [{ debugName: "resolvedDateTime" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDateTime" }] : /* istanbul ignore next */ []));
     /** @internal True when the layout needs a third (opposite) column. */
     hasOppositeColumn = computed(() => {
         if (this.timeline.orientation() === 'horizontal')
             return false;
         const align = this.timeline.align();
         return align === 'alternate' || align === 'split';
-    }, ...(ngDevMode ? [{ debugName: "hasOppositeColumn" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasOppositeColumn" }] : /* istanbul ignore next */ []));
     /** @internal Order of the marker side wrapper. Always center column (2) in three-column layouts; in two-column vertical layouts the order varies. Horizontal layouts use CSS grid placement (`row-start-*`) instead, so flex-order utilities are noise — return ''. */
     markerOrderClass = computed(() => {
         if (this.timeline.orientation() === 'horizontal')
@@ -901,7 +952,8 @@ class TimelineItemComponent {
         if (align === 'right')
             return 'order-2';
         return 'order-1';
-    }, ...(ngDevMode ? [{ debugName: "markerOrderClass" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerOrderClass" }] : /* istanbul ignore next */ []));
     /** @internal Order of the body wrapper. Alternate flips body left/right per item. Horizontal layouts use CSS grid placement (`row-start-*`) instead, so flex-order utilities are noise — return ''. */
     bodyOrderClass = computed(() => {
         if (this.timeline.orientation() === 'horizontal')
@@ -914,14 +966,16 @@ class TimelineItemComponent {
         if (this.hasOppositeColumn())
             return 'order-3';
         return 'order-2';
-    }, ...(ngDevMode ? [{ debugName: "bodyOrderClass" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyOrderClass" }] : /* istanbul ignore next */ []));
     /** @internal Order of the opposite wrapper. Always left of the marker except on odd-indexed alternate items. */
     oppositeOrderClass = computed(() => {
         const align = this.timeline.align();
         if (align === 'alternate' && this.index() % 2 === 1)
             return 'order-3';
         return 'order-1';
-    }, ...(ngDevMode ? [{ debugName: "oppositeOrderClass" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "oppositeOrderClass" }] : /* istanbul ignore next */ []));
     /** @internal Width affordance for the marker side. Vertical needs a fixed-ish column; horizontal needs to span the row. */
     markerSideSizeClass = computed(() => {
         if (this.timeline.orientation() === 'horizontal')
@@ -940,7 +994,8 @@ class TimelineItemComponent {
             case 'xl':
                 return 'w-12';
         }
-    }, ...(ngDevMode ? [{ debugName: "markerSideSizeClass" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerSideSizeClass" }] : /* istanbul ignore next */ []));
     /** @internal Width affordance for the body in alternate/split layouts so the marker stays centered. */
     bodyFlexClass = computed(() => {
         if (this.timeline.orientation() === 'horizontal')
@@ -948,13 +1003,18 @@ class TimelineItemComponent {
         if (this.hasOppositeColumn())
             return 'flex-1';
         return 'flex-1';
-    }, ...(ngDevMode ? [{ debugName: "bodyFlexClass" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyFlexClass" }] : /* istanbul ignore next */ []));
     /** @internal Width affordance for the opposite column (mirrors the body to keep the marker centered). */
-    oppositeFlexClass = computed(() => 'flex-1', ...(ngDevMode ? [{ debugName: "oppositeFlexClass" }] : /* istanbul ignore next */ []));
+    oppositeFlexClass = computed(() => 'flex-1', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "oppositeFlexClass" }] : /* istanbul ignore next */ []));
     // ── Composed class outputs ──
-    itemClasses = computed(() => this.timeline.itemSlotClasses(), ...(ngDevMode ? [{ debugName: "itemClasses" }] : /* istanbul ignore next */ []));
-    markerSideClasses = computed(() => `${this.timeline.markerSideSlotClasses()} ${this.markerSideSizeClass()} ${this.markerOrderClass()}`, ...(ngDevMode ? [{ debugName: "markerSideClasses" }] : /* istanbul ignore next */ []));
-    markerClasses = computed(() => `${this.timeline.itemMarkerVariant(this.state(), this.marker())} ${resolveMarkerClasses(this.state(), this.resolvedColor(), this.hasMarkerSlot())}`, ...(ngDevMode ? [{ debugName: "markerClasses" }] : /* istanbul ignore next */ []));
+    itemClasses = computed(() => this.timeline.itemSlotClasses(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClasses" }] : /* istanbul ignore next */ []));
+    markerSideClasses = computed(() => `${this.timeline.markerSideSlotClasses()} ${this.markerSideSizeClass()} ${this.markerOrderClass()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerSideClasses" }] : /* istanbul ignore next */ []));
+    markerClasses = computed(() => `${this.timeline.itemMarkerVariant(this.state(), this.marker())} ${resolveMarkerClasses(this.state(), this.resolvedColor(), this.hasMarkerSlot())}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "markerClasses" }] : /* istanbul ignore next */ []));
     leadingConnectorClasses = computed(() => {
         const base = this.timeline.connectorLeadingSlotClasses();
         // The first horizontal item gets an invisible spacer — same geometry,
@@ -962,7 +1022,8 @@ class TimelineItemComponent {
         if (this.isFirst())
             return base;
         return `${base} ${resolveConnectorClasses(this.previousState(), this.previousColor(), this.timeline.lineStyle())}`;
-    }, ...(ngDevMode ? [{ debugName: "leadingConnectorClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leadingConnectorClasses" }] : /* istanbul ignore next */ []));
     trailingConnectorClasses = computed(() => {
         const base = this.timeline.connectorTrailingSlotClasses();
         // The last horizontal item also gets an invisible spacer; in vertical
@@ -972,7 +1033,8 @@ class TimelineItemComponent {
             return base;
         }
         return `${base} ${resolveConnectorClasses(this.state(), this.resolvedColor(), this.timeline.lineStyle())}`;
-    }, ...(ngDevMode ? [{ debugName: "trailingConnectorClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trailingConnectorClasses" }] : /* istanbul ignore next */ []));
     bodyClasses = computed(() => {
         const base = `${this.timeline.bodySlotClasses()} ${this.bodyFlexClass()} ${this.bodyOrderClass()}`;
         // The per-size `pb-*` on the body slot exists only to space adjacent
@@ -986,13 +1048,18 @@ class TimelineItemComponent {
             return `${base} !pb-0`;
         }
         return base;
-    }, ...(ngDevMode ? [{ debugName: "bodyClasses" }] : /* istanbul ignore next */ []));
-    oppositeClasses = computed(() => `${this.timeline.oppositeSlotClasses()} ${this.oppositeFlexClass()} ${this.oppositeOrderClass()}`, ...(ngDevMode ? [{ debugName: "oppositeClasses" }] : /* istanbul ignore next */ []));
-    numberClasses = computed(() => this.timeline.itemNumberVariant(this.state()), ...(ngDevMode ? [{ debugName: "numberClasses" }] : /* istanbul ignore next */ []));
-    timestampClasses = computed(() => this.timeline.timestampSlotClasses(), ...(ngDevMode ? [{ debugName: "timestampClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bodyClasses" }] : /* istanbul ignore next */ []));
+    oppositeClasses = computed(() => `${this.timeline.oppositeSlotClasses()} ${this.oppositeFlexClass()} ${this.oppositeOrderClass()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "oppositeClasses" }] : /* istanbul ignore next */ []));
+    numberClasses = computed(() => this.timeline.itemNumberVariant(this.state()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberClasses" }] : /* istanbul ignore next */ []));
+    timestampClasses = computed(() => this.timeline.timestampSlotClasses(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timestampClasses" }] : /* istanbul ignore next */ []));
     enterAnimationClass = computed(() => this.timeline.orientation() === 'horizontal'
         ? 'timeline-item-enter-horizontal'
-        : 'timeline-item-enter', ...(ngDevMode ? [{ debugName: "enterAnimationClass" }] : /* istanbul ignore next */ []));
+        : 'timeline-item-enter', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enterAnimationClass" }] : /* istanbul ignore next */ []));
     ngAfterContentInit() {
         // One-shot dev warning when a [twTimelineMarker] slot is projected onto a
         // marker="dot" item. Runs in ngAfterContentInit because contentChild signals
@@ -1006,8 +1073,8 @@ class TimelineItemComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TimelineItemComponent, isStandalone: true, selector: "tw-timeline-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, marker: { classPropertyName: "marker", publicName: "marker", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, dateTime: { classPropertyName: "dateTime", publicName: "dateTime", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "itemClasses()", "attr.aria-current": "state() === \"current\" ? \"step\" : null", "animate.enter": "enterAnimationClass()" } }, queries: [{ propertyName: "markerSlot", first: true, predicate: TimelineMarkerDirective, descendants: true, isSignal: true }, { propertyName: "timestampSlot", first: true, predicate: TimelineTimestampDirective, descendants: true, isSignal: true }, { propertyName: "oppositeSlot", first: true, predicate: TimelineOppositeDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TimelineItemComponent, isStandalone: true, selector: "tw-timeline-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, marker: { classPropertyName: "marker", publicName: "marker", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, dateTime: { classPropertyName: "dateTime", publicName: "dateTime", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class": "itemClasses()", "attr.aria-current": "state() === \"current\" ? \"step\" : null", "animate.enter": "enterAnimationClass()" } }, queries: [{ propertyName: "markerSlot", first: true, predicate: TimelineMarkerDirective, descendants: true, isSignal: true }, { propertyName: "timestampSlot", first: true, predicate: TimelineTimestampDirective, descendants: true, isSignal: true }, { propertyName: "oppositeSlot", first: true, predicate: TimelineOppositeDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div [class]="markerSideClasses()">
       @if (renderLeadingConnector()) {
         <span [class]="leadingConnectorClasses()" aria-hidden="true"></span>
@@ -1061,7 +1128,7 @@ class TimelineItemComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TimelineItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TimelineItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-timeline-item',