@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

package/fesm2022/lifecorner-angular-ui-kit-timeline.mjs

@@ -0,0 +1,262 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, TemplateRef, computed, contentChild, inject, input } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { BadgeComponent } from "@lifecorner/angular-ui-kit/badge";
+var TimelineContentDirective = class TimelineContentDirective {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TimelineContentDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: TimelineContentDirective,
+		isStandalone: true,
+		selector: "[lcTimelineContent]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TimelineContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[lcTimelineContent]",
+			standalone: true
+		}]
+	}]
+});
+var TimelineMetaDirective = class TimelineMetaDirective {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TimelineMetaDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: TimelineMetaDirective,
+		isStandalone: true,
+		selector: "[lcTimelineMeta]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TimelineMetaDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[lcTimelineMeta]",
+			standalone: true
+		}]
+	}]
+});
+const STATE_COLORS = {
+	success: "success",
+	running: "primary",
+	failed: "error",
+	pending: "neutral"
+};
+var TimelineComponent = class TimelineComponent {
+	items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	headingLevel = input(void 0, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+	contentTemplate = contentChild(TimelineContentDirective, ...ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []);
+	metaTemplate = contentChild(TimelineMetaDirective, ...ngDevMode ? [{ debugName: "metaTemplate" }] : /* istanbul ignore next */ []);
+	timelineClasses = computed(() => {
+		return [
+			"timeline",
+			`timeline--${this.orientation()}`,
+			this.compact() ? "timeline--compact" : ""
+		].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "timelineClasses" }] : /* istanbul ignore next */ []);
+	markerClasses(item) {
+		return [
+			"timeline__marker",
+			`timeline__marker--${item.state ? STATE_COLORS[item.state] : item.color || "primary"}`,
+			item.state === "running" ? "timeline__marker--running" : ""
+		].filter(Boolean).join(" ");
+	}
+	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.0.0",
+		version: "22.2.2",
+		type: TimelineComponent,
+		isStandalone: true,
+		selector: "lc-timeline",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		queries: [{
+			propertyName: "contentTemplate",
+			first: true,
+			predicate: TimelineContentDirective,
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "metaTemplate",
+			first: true,
+			predicate: TimelineMetaDirective,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<!-- An ordered list (3.3, G-11): the events have an order and a count. -->\n<ol [class]=\"timelineClasses()\">\n  @for (item of items(); track item.id ?? $index; let last = $last) {\n    <li class=\"timeline__item\" [class.timeline__item--last]=\"last\">\n      <div [class]=\"markerClasses(item)\">\n        @if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"timeline__icon\" [decorative]=\"true\"></lc-icon>\n        } @else {\n          <span class=\"timeline__dot\"></span>\n        }\n      </div>\n      @if (!last) {\n        <div class=\"timeline__connector\"></div>\n      }\n      <div class=\"timeline__content\">\n        <div class=\"timeline__header\">\n          <ng-template #titleContent>\n            {{ item.title }}\n            @if (item.titleMono) {\n              <code class=\"timeline__title-mono\">{{ item.titleMono }}</code>\n            }\n          </ng-template>\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h2>\n            }\n            @case (3) {\n              <h3 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h3>\n            }\n            @case (4) {\n              <h4 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h4>\n            }\n            @case (5) {\n              <h5 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h5>\n            }\n            @case (6) {\n              <h6 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h6>\n            }\n            @default {\n              <p class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></p>\n            }\n          }\n          @if (item.badge) {\n            <lc-badge size=\"xs\" [variant]=\"item.badgeVariant ?? 'default'\">{{\n              item.badge\n            }}</lc-badge>\n          }\n          @if (metaTemplate(); as metaTpl) {\n            <span class=\"timeline__meta\">\n              <ng-container\n                [ngTemplateOutlet]=\"metaTpl.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </span>\n          } @else if (item.meta) {\n            <span class=\"timeline__meta\">{{ item.meta }}</span>\n          }\n        </div>\n        @if (item.description) {\n          <p class=\"timeline__description\">{{ item.description }}</p>\n        }\n        @if (item.timestamp) {\n          <time class=\"timeline__timestamp\" [attr.datetime]=\"item.datetime ?? null\">{{ item.timestamp }}</time>\n        }\n        @if (contentTemplate(); as contentTpl) {\n          <div class=\"timeline__body\">\n            <ng-container\n              [ngTemplateOutlet]=\"contentTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            />\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ol>\n",
+		styles: [":host{display:block}.timeline{margin:0;padding:0;list-style:none}.timeline--vertical{display:flex;flex-direction:column}.timeline--vertical .timeline__item{position:relative;display:flex;gap:1rem;padding-bottom:1.5rem}.timeline--vertical .timeline__item--last{padding-bottom:0}.timeline--vertical .timeline__marker{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;border-radius:50%;background:var(--color-surface);z-index:1}.timeline--vertical .timeline__dot{width:.625rem;height:.625rem;border-radius:50%}.timeline--vertical .timeline__icon{--icon-size: .875rem}.timeline--vertical .timeline__connector{position:absolute;left:calc(1rem - .5px);top:2rem;bottom:0;width:1px;background:var(--color-border)}.timeline--vertical .timeline__content{flex:1;min-width:0;padding-top:.25rem}.timeline--vertical.timeline--compact .timeline__item{padding-bottom:.75rem}.timeline--vertical.timeline--compact .timeline__marker{width:1.5rem;height:1.5rem}.timeline--vertical.timeline--compact .timeline__dot{width:.5rem;height:.5rem}.timeline--vertical.timeline--compact .timeline__connector{left:calc(.75rem - .5px);top:1.5rem}.timeline--vertical.timeline--compact .timeline__content{padding-top:.125rem}.timeline--horizontal{display:flex;overflow-x:auto}.timeline--horizontal .timeline__item{position:relative;display:flex;flex-direction:column;align-items:center;min-width:8rem;padding-right:2rem;text-align:center}.timeline--horizontal .timeline__item--last{padding-right:0}.timeline--horizontal .timeline__marker{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--color-surface);z-index:1}.timeline--horizontal .timeline__dot{width:.625rem;height:.625rem;border-radius:50%}.timeline--horizontal .timeline__icon{--icon-size: .875rem}.timeline--horizontal .timeline__connector{position:absolute;top:calc(1rem - .5px);left:calc(50% + 1rem);right:-1rem;height:1px;background:var(--color-border)}.timeline--horizontal .timeline__content{margin-top:.5rem}.timeline__marker--primary .timeline__dot{background-color:var(--color-primary-500)}.timeline__marker--primary .timeline__icon{color:var(--color-primary-500)}.timeline__marker--primary{border:2px solid var(--color-primary-500)}.timeline__marker--secondary .timeline__dot{background-color:var(--color-secondary-500)}.timeline__marker--secondary .timeline__icon{color:var(--color-secondary-500)}.timeline__marker--secondary{border:2px solid var(--color-secondary-500)}.timeline__marker--success .timeline__dot{background-color:var(--color-success-default)}.timeline__marker--success .timeline__icon{color:var(--color-success-default)}.timeline__marker--success{border:2px solid var(--color-success-default)}.timeline__marker--warning .timeline__dot{background-color:var(--color-warning-default)}.timeline__marker--warning .timeline__icon{color:var(--color-warning-default)}.timeline__marker--warning{border:2px solid var(--color-warning-default)}.timeline__marker--error .timeline__dot{background-color:var(--color-error-default)}.timeline__marker--error .timeline__icon{color:var(--color-error-default)}.timeline__marker--error{border:2px solid var(--color-error-default)}.timeline__marker--info .timeline__dot{background-color:var(--color-info-default)}.timeline__marker--info .timeline__icon{color:var(--color-info-default)}.timeline__marker--info{border:2px solid var(--color-info-default)}.timeline__marker--neutral .timeline__dot{background-color:var(--color-text-tertiary)}.timeline__marker--neutral .timeline__icon{color:var(--color-text-tertiary)}.timeline__marker--neutral{border:2px solid var(--color-text-tertiary)}.timeline__marker--running .timeline__dot,.timeline__marker--running .timeline__icon{animation:lc-timeline-running 1.6s ease-in-out infinite}@keyframes lc-timeline-running{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.timeline__marker--running .timeline__dot,.timeline__marker--running .timeline__icon{animation:none}}.timeline__header{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem}.timeline__title{margin:0;font-family:inherit;line-height:inherit;font-size:.875rem;font-weight:600;color:var(--color-text-primary)}.timeline__title-mono{margin-left:.25rem;padding:.0625rem .3125rem;background:var(--color-surface-hover);border-radius:var(--border-radius-sm, .25rem);font-family:var(--typography-font-family-mono, ui-monospace, monospace);font-size:.75rem;font-weight:400;color:var(--color-text-secondary)}.timeline__meta{margin-left:auto;font-size:.75rem;color:var(--color-text-tertiary);white-space:nowrap}.timeline__body{margin-top:.5rem}.timeline__body:empty{display:none}.timeline__description{margin:.25rem 0 0;font-size:.8125rem;color:var(--color-text-tertiary);line-height:1.5}.timeline__timestamp{display:block;margin-top:.25rem;font-size:.75rem;color:var(--color-text-tertiary)}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			},
+			{
+				kind: "component",
+				type: BadgeComponent,
+				selector: "lc-badge",
+				inputs: [
+					"variant",
+					"size",
+					"rounded",
+					"dot"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TimelineComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-timeline",
+			standalone: true,
+			imports: [
+				IconComponent,
+				BadgeComponent,
+				NgTemplateOutlet
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<!-- An ordered list (3.3, G-11): the events have an order and a count. -->\n<ol [class]=\"timelineClasses()\">\n  @for (item of items(); track item.id ?? $index; let last = $last) {\n    <li class=\"timeline__item\" [class.timeline__item--last]=\"last\">\n      <div [class]=\"markerClasses(item)\">\n        @if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"timeline__icon\" [decorative]=\"true\"></lc-icon>\n        } @else {\n          <span class=\"timeline__dot\"></span>\n        }\n      </div>\n      @if (!last) {\n        <div class=\"timeline__connector\"></div>\n      }\n      <div class=\"timeline__content\">\n        <div class=\"timeline__header\">\n          <ng-template #titleContent>\n            {{ item.title }}\n            @if (item.titleMono) {\n              <code class=\"timeline__title-mono\">{{ item.titleMono }}</code>\n            }\n          </ng-template>\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h2>\n            }\n            @case (3) {\n              <h3 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h3>\n            }\n            @case (4) {\n              <h4 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h4>\n            }\n            @case (5) {\n              <h5 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h5>\n            }\n            @case (6) {\n              <h6 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h6>\n            }\n            @default {\n              <p class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></p>\n            }\n          }\n          @if (item.badge) {\n            <lc-badge size=\"xs\" [variant]=\"item.badgeVariant ?? 'default'\">{{\n              item.badge\n            }}</lc-badge>\n          }\n          @if (metaTemplate(); as metaTpl) {\n            <span class=\"timeline__meta\">\n              <ng-container\n                [ngTemplateOutlet]=\"metaTpl.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </span>\n          } @else if (item.meta) {\n            <span class=\"timeline__meta\">{{ item.meta }}</span>\n          }\n        </div>\n        @if (item.description) {\n          <p class=\"timeline__description\">{{ item.description }}</p>\n        }\n        @if (item.timestamp) {\n          <time class=\"timeline__timestamp\" [attr.datetime]=\"item.datetime ?? null\">{{ item.timestamp }}</time>\n        }\n        @if (contentTemplate(); as contentTpl) {\n          <div class=\"timeline__body\">\n            <ng-container\n              [ngTemplateOutlet]=\"contentTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            />\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ol>\n",
+			styles: [":host{display:block}.timeline{margin:0;padding:0;list-style:none}.timeline--vertical{display:flex;flex-direction:column}.timeline--vertical .timeline__item{position:relative;display:flex;gap:1rem;padding-bottom:1.5rem}.timeline--vertical .timeline__item--last{padding-bottom:0}.timeline--vertical .timeline__marker{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;border-radius:50%;background:var(--color-surface);z-index:1}.timeline--vertical .timeline__dot{width:.625rem;height:.625rem;border-radius:50%}.timeline--vertical .timeline__icon{--icon-size: .875rem}.timeline--vertical .timeline__connector{position:absolute;left:calc(1rem - .5px);top:2rem;bottom:0;width:1px;background:var(--color-border)}.timeline--vertical .timeline__content{flex:1;min-width:0;padding-top:.25rem}.timeline--vertical.timeline--compact .timeline__item{padding-bottom:.75rem}.timeline--vertical.timeline--compact .timeline__marker{width:1.5rem;height:1.5rem}.timeline--vertical.timeline--compact .timeline__dot{width:.5rem;height:.5rem}.timeline--vertical.timeline--compact .timeline__connector{left:calc(.75rem - .5px);top:1.5rem}.timeline--vertical.timeline--compact .timeline__content{padding-top:.125rem}.timeline--horizontal{display:flex;overflow-x:auto}.timeline--horizontal .timeline__item{position:relative;display:flex;flex-direction:column;align-items:center;min-width:8rem;padding-right:2rem;text-align:center}.timeline--horizontal .timeline__item--last{padding-right:0}.timeline--horizontal .timeline__marker{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--color-surface);z-index:1}.timeline--horizontal .timeline__dot{width:.625rem;height:.625rem;border-radius:50%}.timeline--horizontal .timeline__icon{--icon-size: .875rem}.timeline--horizontal .timeline__connector{position:absolute;top:calc(1rem - .5px);left:calc(50% + 1rem);right:-1rem;height:1px;background:var(--color-border)}.timeline--horizontal .timeline__content{margin-top:.5rem}.timeline__marker--primary .timeline__dot{background-color:var(--color-primary-500)}.timeline__marker--primary .timeline__icon{color:var(--color-primary-500)}.timeline__marker--primary{border:2px solid var(--color-primary-500)}.timeline__marker--secondary .timeline__dot{background-color:var(--color-secondary-500)}.timeline__marker--secondary .timeline__icon{color:var(--color-secondary-500)}.timeline__marker--secondary{border:2px solid var(--color-secondary-500)}.timeline__marker--success .timeline__dot{background-color:var(--color-success-default)}.timeline__marker--success .timeline__icon{color:var(--color-success-default)}.timeline__marker--success{border:2px solid var(--color-success-default)}.timeline__marker--warning .timeline__dot{background-color:var(--color-warning-default)}.timeline__marker--warning .timeline__icon{color:var(--color-warning-default)}.timeline__marker--warning{border:2px solid var(--color-warning-default)}.timeline__marker--error .timeline__dot{background-color:var(--color-error-default)}.timeline__marker--error .timeline__icon{color:var(--color-error-default)}.timeline__marker--error{border:2px solid var(--color-error-default)}.timeline__marker--info .timeline__dot{background-color:var(--color-info-default)}.timeline__marker--info .timeline__icon{color:var(--color-info-default)}.timeline__marker--info{border:2px solid var(--color-info-default)}.timeline__marker--neutral .timeline__dot{background-color:var(--color-text-tertiary)}.timeline__marker--neutral .timeline__icon{color:var(--color-text-tertiary)}.timeline__marker--neutral{border:2px solid var(--color-text-tertiary)}.timeline__marker--running .timeline__dot,.timeline__marker--running .timeline__icon{animation:lc-timeline-running 1.6s ease-in-out infinite}@keyframes lc-timeline-running{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){.timeline__marker--running .timeline__dot,.timeline__marker--running .timeline__icon{animation:none}}.timeline__header{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem}.timeline__title{margin:0;font-family:inherit;line-height:inherit;font-size:.875rem;font-weight:600;color:var(--color-text-primary)}.timeline__title-mono{margin-left:.25rem;padding:.0625rem .3125rem;background:var(--color-surface-hover);border-radius:var(--border-radius-sm, .25rem);font-family:var(--typography-font-family-mono, ui-monospace, monospace);font-size:.75rem;font-weight:400;color:var(--color-text-secondary)}.timeline__meta{margin-left:auto;font-size:.75rem;color:var(--color-text-tertiary);white-space:nowrap}.timeline__body{margin-top:.5rem}.timeline__body:empty{display:none}.timeline__description{margin:.25rem 0 0;font-size:.8125rem;color:var(--color-text-tertiary);line-height:1.5}.timeline__timestamp{display:block;margin-top:.25rem;font-size:.75rem;color:var(--color-text-tertiary)}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: true
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
+		contentTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => TimelineContentDirective), { isSignal: true }]
+		}],
+		metaTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => TimelineMetaDirective), { isSignal: true }]
+		}]
+	}
+});
+export { TimelineComponent, TimelineContentDirective, TimelineMetaDirective };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-timeline.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-timeline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-timeline.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/timeline/timeline-templates.directive.ts","../../../../libs/angular-ui-kit/src/lib/timeline/timeline.component.ts","../../../../libs/angular-ui-kit/src/lib/timeline/timeline.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport type { TimelineItem } from './timeline.component';\n\n/** Template context for the per-item timeline templates. */\nexport interface TimelineTemplateContext {\n  $implicit: TimelineItem;\n}\n\n/**\n * Free content slot rendered below an entry's header line — arbitrary markup\n * per item (code block, prose, collapsible text, diff), not just a\n * description string. The template receives the item as `$implicit`.\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"steps\">\n *   <ng-template lcTimelineContent let-item>\n *     @if (item.state === 'failed') {\n *       <lc-code-block [code]=\"item.command\" language=\"bash\" />\n *     }\n *   </ng-template>\n * </lc-timeline>\n * ```\n */\n@Directive({\n  selector: '[lcTimelineContent]',\n  standalone: true,\n})\nexport class TimelineContentDirective {\n  public readonly template = inject(TemplateRef<TimelineTemplateContext>);\n}\n\n/**\n * Live meta slot rendered right-aligned in an entry's header line — for\n * values the app keeps ticking itself (\"läuft seit 42 s\"). Takes precedence\n * over the item's static `meta` string.\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"steps\">\n *   <ng-template lcTimelineMeta let-item>\n *     @if (item.state === 'running') { {{ elapsed() }} }\n *     @else { {{ item.meta }} }\n *   </ng-template>\n * </lc-timeline>\n * ```\n */\n@Directive({\n  selector: '[lcTimelineMeta]',\n  standalone: true,\n})\nexport class TimelineMetaDirective {\n  public readonly template = inject(TemplateRef<TimelineTemplateContext>);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  input,\n  computed,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { BadgeComponent, BadgeVariant } from '@lifecorner/angular-ui-kit/badge';\nimport {\n  TimelineContentDirective,\n  TimelineMetaDirective,\n} from './timeline-templates.directive';\n\n/**\n * Semantic state of a timeline entry (e.g. one step of a run transcript).\n * Drives the marker color via the semantic tokens; `running` additionally\n * pulses (respecting `prefers-reduced-motion`).\n */\nexport type TimelineItemState = 'success' | 'running' | 'failed' | 'pending';\n\n/** Heading level of the item titles (3.3, G-11). */\nexport type TimelineHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface TimelineItem {\n  /** Optional stable identity for rendering (falls back to the list index). */\n  id?: string;\n  /** Title of the event */\n  title: string;\n  /** Optional monospace suffix after the title (e.g. a tool id like `gate_test`). */\n  titleMono?: string;\n  /** Optional badge label in the header line (e.g. \"Fehlgeschlagen\"). */\n  badge?: string;\n  /** Variant of the header badge. @default 'default' */\n  badgeVariant?: BadgeVariant;\n  /** Optional right-aligned header meta (duration / time). */\n  meta?: string;\n  /** Optional description */\n  description?: string;\n  /** Optional timestamp string */\n  timestamp?: string;\n  /**\n   * Machine-readable moment of the timestamp (ISO 8601, e.g.\n   * `2026-10-12T18:05:00+02:00`), set as the `<time datetime>` attribute so\n   * „heute 18:05“ carries its exact date (3.3, G-11).\n   */\n  datetime?: string;\n  /** Optional icon name (heroicon) */\n  icon?: string;\n  /** Optional color for the dot/icon */\n  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';\n  /**\n   * Semantic entry state — colors the marker from the semantic tokens and\n   * takes precedence over `color`. `running` pulses the marker.\n   */\n  state?: TimelineItemState;\n}\n\nexport type TimelineOrientation = 'vertical' | 'horizontal';\n\n/** Marker color class per entry state. */\nconst STATE_COLORS: Record<TimelineItemState, string> = {\n  success: 'success',\n  running: 'primary',\n  failed: 'error',\n  pending: 'neutral',\n};\n\n/**\n * Timeline component for chronological event display.\n *\n * Features:\n * - Vertical timeline with connecting line\n * - Semantic status colors per event (info, success, warning, error)\n * - Entry states (`success | running | failed | pending`); `running` pulses\n * - Composable header line: title + monospace suffix (`titleMono`) + badge\n *   (`badge`/`badgeVariant`) + right-aligned meta (`meta` or the\n *   `lcTimelineMeta` template for live values)\n * - Free content per entry below the header via the `lcTimelineContent`\n *   template (code blocks, prose, diffs, …)\n * - Date and description display per item\n * - Icon support for timeline markers\n * - Dark mode support\n *\n * @example\n * ```html\n * <lc-timeline [items]=\"events\"></lc-timeline>\n * ```\n */\n@Component({\n  selector: 'lc-timeline',\n  standalone: true,\n  imports: [IconComponent, BadgeComponent, NgTemplateOutlet],\n  templateUrl: './timeline.component.html',\n  styleUrls: ['./timeline.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TimelineComponent {\n  /**\n   * List of timeline events.\n   */\n  items = input.required<TimelineItem[]>();\n\n  /**\n   * Layout orientation.\n   * @default 'vertical'\n   */\n  orientation = input<TimelineOrientation>('vertical');\n\n  /**\n   * Compact mode reduces spacing.\n   * @default false\n   */\n  compact = input<boolean>(false);\n\n  /**\n   * Heading level of the item titles (`h2`–`h6`), so each event is reachable\n   * by heading navigation. Unset: a plain paragraph (3.2). Semantics only,\n   * the look stays the same.\n   */\n  headingLevel = input<TimelineHeadingLevel | undefined>(undefined);\n\n  /** Optional per-item content template (below the header line). */\n  protected contentTemplate = contentChild(TimelineContentDirective);\n\n  /** Optional per-item live meta template (right-aligned in the header). */\n  protected metaTemplate = contentChild(TimelineMetaDirective);\n\n  protected timelineClasses = computed(() => {\n    return [\n      'timeline',\n      `timeline--${this.orientation()}`,\n      this.compact() ? 'timeline--compact' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  protected markerClasses(item: TimelineItem): string {\n    const color = item.state ? STATE_COLORS[item.state] : item.color || 'primary';\n    return [\n      'timeline__marker',\n      `timeline__marker--${color}`,\n      item.state === 'running' ? 'timeline__marker--running' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n}\n","<!-- An ordered list (3.3, G-11): the events have an order and a count. -->\n<ol [class]=\"timelineClasses()\">\n  @for (item of items(); track item.id ?? $index; let last = $last) {\n    <li class=\"timeline__item\" [class.timeline__item--last]=\"last\">\n      <div [class]=\"markerClasses(item)\">\n        @if (item.icon) {\n          <lc-icon [name]=\"item.icon\" class=\"timeline__icon\" [decorative]=\"true\"></lc-icon>\n        } @else {\n          <span class=\"timeline__dot\"></span>\n        }\n      </div>\n      @if (!last) {\n        <div class=\"timeline__connector\"></div>\n      }\n      <div class=\"timeline__content\">\n        <div class=\"timeline__header\">\n          <ng-template #titleContent>\n            {{ item.title }}\n            @if (item.titleMono) {\n              <code class=\"timeline__title-mono\">{{ item.titleMono }}</code>\n            }\n          </ng-template>\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h2>\n            }\n            @case (3) {\n              <h3 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h3>\n            }\n            @case (4) {\n              <h4 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h4>\n            }\n            @case (5) {\n              <h5 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h5>\n            }\n            @case (6) {\n              <h6 class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></h6>\n            }\n            @default {\n              <p class=\"timeline__title\"><ng-container [ngTemplateOutlet]=\"titleContent\" /></p>\n            }\n          }\n          @if (item.badge) {\n            <lc-badge size=\"xs\" [variant]=\"item.badgeVariant ?? 'default'\">{{\n              item.badge\n            }}</lc-badge>\n          }\n          @if (metaTemplate(); as metaTpl) {\n            <span class=\"timeline__meta\">\n              <ng-container\n                [ngTemplateOutlet]=\"metaTpl.template\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </span>\n          } @else if (item.meta) {\n            <span class=\"timeline__meta\">{{ item.meta }}</span>\n          }\n        </div>\n        @if (item.description) {\n          <p class=\"timeline__description\">{{ item.description }}</p>\n        }\n        @if (item.timestamp) {\n          <time class=\"timeline__timestamp\" [attr.datetime]=\"item.datetime ?? null\">{{ item.timestamp }}</time>\n        }\n        @if (contentTemplate(); as contentTpl) {\n          <div class=\"timeline__body\">\n            <ng-container\n              [ngTemplateOutlet]=\"contentTpl.template\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            />\n          </div>\n        }\n      </div>\n    </li>\n  }\n</ol>\n"],"mappings":"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"}