@ojiepermana/angular 22.1.14 → 22.2.1

package/fesm2022/ojiepermana-angular-component-timeline.mjs

@@ -1,241 +1,619 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, Component, inject } from '@angular/core';
-import { cn } from '@ojiepermana/angular/component/utils/core';
-
-const TIMELINE_BASE = [
-    'w-full min-w-0 text-sm text-foreground',
-    '[--timeline-content-gap:calc(var(--spacing)*3)] [--timeline-indicator-size:1.5rem] [--timeline-item-gap:calc(var(--spacing)*6)]',
-].join(' ');
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, inject, input } from "@angular/core";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+const TIMELINE_BASE = ["w-full min-w-0 text-sm text-foreground", "[--timeline-content-gap:calc(var(--spacing)*3)] [--timeline-indicator-size:1.5rem] [--timeline-item-gap:calc(var(--spacing)*6)]"].join(" ");
 const timelineSizeClasses = {
-    default: '[--timeline-indicator-size:1.5rem]',
-    lg: '[--timeline-indicator-size:2.5rem] [--timeline-content-gap:calc(var(--spacing)*4)]',
+	default: "[--timeline-indicator-size:1.5rem]",
+	lg: "[--timeline-indicator-size:2.5rem] [--timeline-content-gap:calc(var(--spacing)*4)]"
 };
 const timelineAlignClasses = {
-    start: 'items-start',
-    baseline: 'items-baseline',
-    center: 'items-center',
-    end: 'items-end',
+	start: "items-start",
+	baseline: "items-baseline",
+	center: "items-center",
+	end: "items-end"
 };
 const timelineItemStatusClasses = {
-    complete: 'before:bg-primary after:bg-primary',
-    current: 'before:bg-border after:bg-border',
-    incomplete: 'before:bg-border/70 after:bg-border/70',
+	complete: "before:bg-primary after:bg-primary",
+	current: "before:bg-border after:bg-border",
+	incomplete: "before:bg-border/70 after:bg-border/70"
 };
 const timelineIndicatorStatusClasses = {
-    complete: 'border-primary bg-primary text-primary-foreground',
-    current: 'border-ring bg-background text-foreground ring-2 ring-ring ring-offset-2 ring-offset-background',
-    incomplete: 'border-border bg-background text-muted-foreground',
+	complete: "border-primary bg-primary text-primary-foreground",
+	current: "border-ring bg-background text-foreground ring-2 ring-ring ring-offset-2 ring-offset-background",
+	incomplete: "border-border bg-background text-muted-foreground"
 };
 const timelineIndicatorColorClasses = {
-    red: 'border-[hsl(var(--timeline-indicator-red))] bg-[hsl(var(--timeline-indicator-red))] text-[hsl(var(--timeline-indicator-red-foreground))]',
-    orange: 'border-[hsl(var(--timeline-indicator-orange))] bg-[hsl(var(--timeline-indicator-orange))] text-[hsl(var(--timeline-indicator-orange-foreground))]',
-    amber: 'border-[hsl(var(--timeline-indicator-amber))] bg-[hsl(var(--timeline-indicator-amber))] text-[hsl(var(--timeline-indicator-amber-foreground))]',
-    yellow: 'border-[hsl(var(--timeline-indicator-yellow))] bg-[hsl(var(--timeline-indicator-yellow))] text-[hsl(var(--timeline-indicator-yellow-foreground))]',
-    lime: 'border-[hsl(var(--timeline-indicator-lime))] bg-[hsl(var(--timeline-indicator-lime))] text-[hsl(var(--timeline-indicator-lime-foreground))]',
-    green: 'border-[hsl(var(--timeline-indicator-green))] bg-[hsl(var(--timeline-indicator-green))] text-[hsl(var(--timeline-indicator-green-foreground))]',
-    emerald: 'border-[hsl(var(--timeline-indicator-emerald))] bg-[hsl(var(--timeline-indicator-emerald))] text-[hsl(var(--timeline-indicator-emerald-foreground))]',
-    teal: 'border-[hsl(var(--timeline-indicator-teal))] bg-[hsl(var(--timeline-indicator-teal))] text-[hsl(var(--timeline-indicator-teal-foreground))]',
-    cyan: 'border-[hsl(var(--timeline-indicator-cyan))] bg-[hsl(var(--timeline-indicator-cyan))] text-[hsl(var(--timeline-indicator-cyan-foreground))]',
-    sky: 'border-[hsl(var(--timeline-indicator-sky))] bg-[hsl(var(--timeline-indicator-sky))] text-[hsl(var(--timeline-indicator-sky-foreground))]',
-    blue: 'border-[hsl(var(--timeline-indicator-blue))] bg-[hsl(var(--timeline-indicator-blue))] text-[hsl(var(--timeline-indicator-blue-foreground))]',
-    indigo: 'border-[hsl(var(--timeline-indicator-indigo))] bg-[hsl(var(--timeline-indicator-indigo))] text-[hsl(var(--timeline-indicator-indigo-foreground))]',
-    violet: 'border-[hsl(var(--timeline-indicator-violet))] bg-[hsl(var(--timeline-indicator-violet))] text-[hsl(var(--timeline-indicator-violet-foreground))]',
-    purple: 'border-[hsl(var(--timeline-indicator-purple))] bg-[hsl(var(--timeline-indicator-purple))] text-[hsl(var(--timeline-indicator-purple-foreground))]',
-    fuchsia: 'border-[hsl(var(--timeline-indicator-fuchsia))] bg-[hsl(var(--timeline-indicator-fuchsia))] text-[hsl(var(--timeline-indicator-fuchsia-foreground))]',
-    pink: 'border-[hsl(var(--timeline-indicator-pink))] bg-[hsl(var(--timeline-indicator-pink))] text-[hsl(var(--timeline-indicator-pink-foreground))]',
-    rose: 'border-[hsl(var(--timeline-indicator-rose))] bg-[hsl(var(--timeline-indicator-rose))] text-[hsl(var(--timeline-indicator-rose-foreground))]',
+	red: "border-[hsl(var(--timeline-indicator-red))] bg-[hsl(var(--timeline-indicator-red))] text-[hsl(var(--timeline-indicator-red-foreground))]",
+	orange: "border-[hsl(var(--timeline-indicator-orange))] bg-[hsl(var(--timeline-indicator-orange))] text-[hsl(var(--timeline-indicator-orange-foreground))]",
+	amber: "border-[hsl(var(--timeline-indicator-amber))] bg-[hsl(var(--timeline-indicator-amber))] text-[hsl(var(--timeline-indicator-amber-foreground))]",
+	yellow: "border-[hsl(var(--timeline-indicator-yellow))] bg-[hsl(var(--timeline-indicator-yellow))] text-[hsl(var(--timeline-indicator-yellow-foreground))]",
+	lime: "border-[hsl(var(--timeline-indicator-lime))] bg-[hsl(var(--timeline-indicator-lime))] text-[hsl(var(--timeline-indicator-lime-foreground))]",
+	green: "border-[hsl(var(--timeline-indicator-green))] bg-[hsl(var(--timeline-indicator-green))] text-[hsl(var(--timeline-indicator-green-foreground))]",
+	emerald: "border-[hsl(var(--timeline-indicator-emerald))] bg-[hsl(var(--timeline-indicator-emerald))] text-[hsl(var(--timeline-indicator-emerald-foreground))]",
+	teal: "border-[hsl(var(--timeline-indicator-teal))] bg-[hsl(var(--timeline-indicator-teal))] text-[hsl(var(--timeline-indicator-teal-foreground))]",
+	cyan: "border-[hsl(var(--timeline-indicator-cyan))] bg-[hsl(var(--timeline-indicator-cyan))] text-[hsl(var(--timeline-indicator-cyan-foreground))]",
+	sky: "border-[hsl(var(--timeline-indicator-sky))] bg-[hsl(var(--timeline-indicator-sky))] text-[hsl(var(--timeline-indicator-sky-foreground))]",
+	blue: "border-[hsl(var(--timeline-indicator-blue))] bg-[hsl(var(--timeline-indicator-blue))] text-[hsl(var(--timeline-indicator-blue-foreground))]",
+	indigo: "border-[hsl(var(--timeline-indicator-indigo))] bg-[hsl(var(--timeline-indicator-indigo))] text-[hsl(var(--timeline-indicator-indigo-foreground))]",
+	violet: "border-[hsl(var(--timeline-indicator-violet))] bg-[hsl(var(--timeline-indicator-violet))] text-[hsl(var(--timeline-indicator-violet-foreground))]",
+	purple: "border-[hsl(var(--timeline-indicator-purple))] bg-[hsl(var(--timeline-indicator-purple))] text-[hsl(var(--timeline-indicator-purple-foreground))]",
+	fuchsia: "border-[hsl(var(--timeline-indicator-fuchsia))] bg-[hsl(var(--timeline-indicator-fuchsia))] text-[hsl(var(--timeline-indicator-fuchsia-foreground))]",
+	pink: "border-[hsl(var(--timeline-indicator-pink))] bg-[hsl(var(--timeline-indicator-pink))] text-[hsl(var(--timeline-indicator-pink-foreground))]",
+	rose: "border-[hsl(var(--timeline-indicator-rose))] bg-[hsl(var(--timeline-indicator-rose))] text-[hsl(var(--timeline-indicator-rose-foreground))]"
 };
-class TimelineComponent {
-    horizontal = input(false, { ...(ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    align = input('center', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    size = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn(TIMELINE_BASE, timelineSizeClasses[this.size()], this.horizontal()
-        ? 'flex min-w-0 items-start gap-[var(--timeline-item-gap)] overflow-x-auto pb-1'
-        : 'grid', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TimelineComponent, isStandalone: true, selector: "Timeline", inputs: { horizontal: { classPropertyName: "horizontal", publicName: "horizontal", 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 }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline\"", "attr.data-orientation": "horizontal() ? \"horizontal\" : \"vertical\"", "attr.data-align": "align()", "attr.data-size": "size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'Timeline',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"timeline"',
-                        '[attr.data-orientation]': 'horizontal() ? "horizontal" : "vertical"',
-                        '[attr.data-align]': 'align()',
-                        '[attr.data-size]': 'size()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class TimelineItemComponent {
-    timeline = inject(TimelineComponent, { optional: true });
-    status = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-    align = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    size = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    orientation = computed(() => (this.timeline?.horizontal() ? 'horizontal' : 'vertical'), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    resolvedAlign = computed(() => this.align() ?? this.timeline?.align() ?? 'center', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []));
-    resolvedSize = computed(() => this.size() ?? this.timeline?.size() ?? 'default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
-    classes = computed(() => {
-        const status = this.status();
-        const orientation = this.orientation();
-        return cn('relative min-w-0', timelineSizeClasses[this.resolvedSize()], orientation === 'horizontal'
-            ? [
-                "before:content-['']",
-                'grid min-w-32 flex-1 justify-items-center gap-y-2 text-center',
-                'before:absolute before:left-0 before:right-0 before:top-[calc(var(--timeline-indicator-size)/2)] before:h-px before:bg-border',
-                'first:before:left-1/2 last:before:right-1/2',
-            ].join(' ')
-            : [
-                "after:content-['']",
-                'grid grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)] pb-[var(--timeline-item-gap)] last:pb-0',
-                'after:absolute after:bottom-0 after:left-[calc(var(--timeline-indicator-size)/2)] after:top-[calc(var(--timeline-indicator-size)+0.25rem)] after:w-px after:-translate-x-1/2 after:bg-border last:after:hidden',
-                timelineAlignClasses[this.resolvedAlign()],
-            ].join(' '), status ? timelineItemStatusClasses[status] : 'before:bg-border after:bg-border', this.class());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TimelineItemComponent, isStandalone: true, selector: "TimelineItem", inputs: { status: { classPropertyName: "status", publicName: "status", 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 }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-item\"", "attr.data-orientation": "orientation()", "attr.data-align": "resolvedAlign()", "attr.data-size": "resolvedSize()", "attr.data-status": "status() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'TimelineItem',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"timeline-item"',
-                        '[attr.data-orientation]': 'orientation()',
-                        '[attr.data-align]': 'resolvedAlign()',
-                        '[attr.data-size]': 'resolvedSize()',
-                        '[attr.data-status]': 'status() ?? null',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class TimelineIndicatorComponent {
-    item = inject(TimelineItemComponent, { optional: true });
-    variant = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    status = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-    color = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    resolvedStatus = computed(() => this.status() ?? this.item?.status() ?? 'incomplete', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
-    classes = computed(() => {
-        const color = this.color();
-        return cn('relative z-10 col-start-1 row-start-1 inline-flex shrink-0 items-center justify-center justify-self-center', this.item?.orientation() === 'horizontal' ? 'row-start-1' : '', this.variant() === 'bare'
-            ? 'bg-background text-muted-foreground'
-            : [
-                'size-[var(--timeline-indicator-size)] rounded-full border text-xs font-medium shadow-sm',
-                color
-                    ? timelineIndicatorColorClasses[color]
-                    : timelineIndicatorStatusClasses[this.resolvedStatus()],
-            ].join(' '), this.class());
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TimelineIndicatorComponent, isStandalone: true, selector: "TimelineIndicator", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.role": "ariaLabel() ? \"img\" : null", "attr.aria-label": "ariaLabel()", "attr.data-slot": "\"timeline-indicator\"", "attr.data-variant": "variant()", "attr.data-status": "resolvedStatus()", "attr.data-color": "color() ?? null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineIndicatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'TimelineIndicator',
-                    host: {
-                        '[class]': 'classes()',
-                        // A labeled indicator is a status graphic (role="img" so aria-label is valid);
-                        // without a label it stays a decorative marker.
-                        '[attr.role]': 'ariaLabel() ? "img" : null',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[attr.data-slot]': '"timeline-indicator"',
-                        '[attr.data-variant]': 'variant()',
-                        '[attr.data-status]': 'resolvedStatus()',
-                        '[attr.data-color]': 'color() ?? null',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class TimelineContentComponent {
-    item = inject(TimelineItemComponent, { optional: true });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('min-w-0 text-sm leading-6 text-foreground', this.item?.orientation() === 'horizontal'
-        ? 'row-start-2 max-w-40 text-center'
-        : 'col-start-2 row-start-1', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TimelineContentComponent, isStandalone: true, selector: "TimelineContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-content\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'TimelineContent',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"timeline-content"',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class TimelineBlockComponent {
-    item = inject(TimelineItemComponent, { optional: true });
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('min-w-0', this.item?.orientation() === 'horizontal' ? 'row-start-2 w-full' : 'col-span-full', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TimelineBlockComponent, isStandalone: true, selector: "TimelineBlock", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-block\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineBlockComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'TimelineBlock',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"timeline-block"',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class TimelineSubgridComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('grid min-w-0 grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)]', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineSubgridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: TimelineSubgridComponent, isStandalone: true, selector: "TimelineSubgrid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"timeline-subgrid\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TimelineSubgridComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'TimelineSubgrid',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.data-slot]': '"timeline-subgrid"',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { TimelineBlockComponent, TimelineComponent, TimelineContentComponent, TimelineIndicatorComponent, TimelineItemComponent, TimelineSubgridComponent };
+var TimelineComponent = class TimelineComponent {
+	horizontal = input(false, {
+		...ngDevMode ? { debugName: "horizontal" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	align = input("center", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	size = input("default", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(TIMELINE_BASE, timelineSizeClasses[this.size()], this.horizontal() ? "flex min-w-0 items-start gap-[var(--timeline-item-gap)] overflow-x-auto pb-1" : "grid", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TimelineComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: TimelineComponent,
+		isStandalone: true,
+		selector: "Timeline",
+		inputs: {
+			horizontal: {
+				classPropertyName: "horizontal",
+				publicName: "horizontal",
+				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
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-slot": "\"timeline\"",
+			"attr.data-orientation": "horizontal() ? \"horizontal\" : \"vertical\"",
+			"attr.data-align": "align()",
+			"attr.data-size": "size()"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TimelineComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Timeline",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"timeline\"",
+				"[attr.data-orientation]": "horizontal() ? \"horizontal\" : \"vertical\"",
+				"[attr.data-align]": "align()",
+				"[attr.data-size]": "size()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		horizontal: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "horizontal",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var TimelineItemComponent = class TimelineItemComponent {
+	timeline = inject(TimelineComponent, { optional: true });
+	status = input(null, ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	align = input(null, ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	size = input(null, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	orientation = computed(() => this.timeline?.horizontal() ? "horizontal" : "vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	resolvedAlign = computed(() => this.align() ?? this.timeline?.align() ?? "center", ...ngDevMode ? [{ debugName: "resolvedAlign" }] : /* istanbul ignore next */ []);
+	resolvedSize = computed(() => this.size() ?? this.timeline?.size() ?? "default", ...ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []);
+	classes = computed(() => {
+		const status = this.status();
+		const orientation = this.orientation();
+		return cn("relative min-w-0", timelineSizeClasses[this.resolvedSize()], orientation === "horizontal" ? [
+			"before:content-['']",
+			"grid min-w-32 flex-1 justify-items-center gap-y-2 text-center",
+			"before:absolute before:left-0 before:right-0 before:top-[calc(var(--timeline-indicator-size)/2)] before:h-px before:bg-border",
+			"first:before:left-1/2 last:before:right-1/2"
+		].join(" ") : [
+			"after:content-['']",
+			"grid grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)] pb-[var(--timeline-item-gap)] last:pb-0",
+			"after:absolute after:bottom-0 after:left-[calc(var(--timeline-indicator-size)/2)] after:top-[calc(var(--timeline-indicator-size)+0.25rem)] after:w-px after:-translate-x-1/2 after:bg-border last:after:hidden",
+			timelineAlignClasses[this.resolvedAlign()]
+		].join(" "), status ? timelineItemStatusClasses[status] : "before:bg-border after:bg-border", this.class());
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TimelineItemComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: TimelineItemComponent,
+		isStandalone: true,
+		selector: "TimelineItem",
+		inputs: {
+			status: {
+				classPropertyName: "status",
+				publicName: "status",
+				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
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-slot": "\"timeline-item\"",
+			"attr.data-orientation": "orientation()",
+			"attr.data-align": "resolvedAlign()",
+			"attr.data-size": "resolvedSize()",
+			"attr.data-status": "status() ?? null"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TimelineItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "TimelineItem",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"timeline-item\"",
+				"[attr.data-orientation]": "orientation()",
+				"[attr.data-align]": "resolvedAlign()",
+				"[attr.data-size]": "resolvedSize()",
+				"[attr.data-status]": "status() ?? null"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		status: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "status",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var TimelineIndicatorComponent = class TimelineIndicatorComponent {
+	item = inject(TimelineItemComponent, { optional: true });
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	status = input(null, ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	color = input(null, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	resolvedStatus = computed(() => this.status() ?? this.item?.status() ?? "incomplete", ...ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []);
+	classes = computed(() => {
+		const color = this.color();
+		return cn("relative z-10 col-start-1 row-start-1 inline-flex shrink-0 items-center justify-center justify-self-center", this.item?.orientation() === "horizontal" ? "row-start-1" : "", this.variant() === "bare" ? "bg-background text-muted-foreground" : ["size-[var(--timeline-indicator-size)] rounded-full border text-xs font-medium shadow-sm", color ? timelineIndicatorColorClasses[color] : timelineIndicatorStatusClasses[this.resolvedStatus()]].join(" "), this.class());
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TimelineIndicatorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: TimelineIndicatorComponent,
+		isStandalone: true,
+		selector: "TimelineIndicator",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			status: {
+				classPropertyName: "status",
+				publicName: "status",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class": "classes()",
+			"attr.role": "ariaLabel() ? \"img\" : null",
+			"attr.aria-label": "ariaLabel()",
+			"attr.data-slot": "\"timeline-indicator\"",
+			"attr.data-variant": "variant()",
+			"attr.data-status": "resolvedStatus()",
+			"attr.data-color": "color() ?? null"
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TimelineIndicatorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "TimelineIndicator",
+			host: {
+				"[class]": "classes()",
+				"[attr.role]": "ariaLabel() ? \"img\" : null",
+				"[attr.aria-label]": "ariaLabel()",
+				"[attr.data-slot]": "\"timeline-indicator\"",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-status]": "resolvedStatus()",
+				"[attr.data-color]": "color() ?? null"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		status: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "status",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var TimelineContentComponent = class TimelineContentComponent {
+	item = inject(TimelineItemComponent, { optional: true });
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("min-w-0 text-sm leading-6 text-foreground", this.item?.orientation() === "horizontal" ? "row-start-2 max-w-40 text-center" : "col-start-2 row-start-1", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TimelineContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: TimelineContentComponent,
+		isStandalone: true,
+		selector: "TimelineContent",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-slot": "\"timeline-content\""
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TimelineContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "TimelineContent",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"timeline-content\""
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var TimelineBlockComponent = class TimelineBlockComponent {
+	item = inject(TimelineItemComponent, { optional: true });
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("min-w-0", this.item?.orientation() === "horizontal" ? "row-start-2 w-full" : "col-span-full", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TimelineBlockComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: TimelineBlockComponent,
+		isStandalone: true,
+		selector: "TimelineBlock",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-slot": "\"timeline-block\""
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TimelineBlockComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "TimelineBlock",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"timeline-block\""
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var TimelineSubgridComponent = class TimelineSubgridComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("grid min-w-0 grid-cols-[var(--timeline-indicator-size)_minmax(0,1fr)] gap-x-[var(--timeline-content-gap)]", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TimelineSubgridComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: TimelineSubgridComponent,
+		isStandalone: true,
+		selector: "TimelineSubgrid",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"attr.data-slot": "\"timeline-subgrid\""
+		} },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TimelineSubgridComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "TimelineSubgrid",
+			host: {
+				"[class]": "classes()",
+				"[attr.data-slot]": "\"timeline-subgrid\""
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+export { TimelineBlockComponent, TimelineComponent, TimelineContentComponent, TimelineIndicatorComponent, TimelineItemComponent, TimelineSubgridComponent };