@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-stacked-bar-chart.mjs

@@ -0,0 +1,412 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, afterNextRender, computed, inject, input, signal } from "@angular/core";
+import { chartColor, formatChartValue, niceScale, toFinite } from "@lifecorner/angular-ui-kit/internal/chart";
+const DEFAULT_WIDTH = 400;
+const MIN_SEGMENT_LABEL_PX = 14;
+var StackedBarChartComponent = class StackedBarChartComponent {
+	_el = inject(ElementRef);
+	_destroyRef = inject(DestroyRef);
+	_containerWidth = signal(0, ...ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => {
+			const obs = new ResizeObserver(([entry]) => {
+				this._containerWidth.set(entry.contentRect.width);
+			});
+			obs.observe(this._el.nativeElement);
+			this._destroyRef.onDestroy(() => obs.disconnect());
+		});
+	}
+	categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []);
+	legends = input([], ...ngDevMode ? [{ debugName: "legends" }] : /* istanbul ignore next */ []);
+	width = input(void 0, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input(200, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	showLabels = input(true, ...ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []);
+	showValues = input(false, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
+	showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
+	showGrid = input(true, ...ngDevMode ? [{ debugName: "showGrid" }] : /* istanbul ignore next */ []);
+	barGap = input(.3, ...ngDevMode ? [{ debugName: "barGap" }] : /* istanbul ignore next */ []);
+	formatValue = input(formatChartValue, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	PL = 40;
+	PR = 10;
+	PT = 10;
+	PB = 30;
+	effectiveWidth = computed(() => this._containerWidth() || this.width() || DEFAULT_WIDTH, ...ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	isVertical = computed(() => this.orientation() === "vertical", ...ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []);
+	plot = computed(() => ({
+		x: this.PL,
+		y: this.PT,
+		w: this.effectiveWidth() - this.PL - this.PR,
+		h: this.height() - this.PT - this.PB
+	}), ...ngDevMode ? [{ debugName: "plot" }] : /* istanbul ignore next */ []);
+	extents = computed(() => (this.categories() ?? []).map((c) => {
+		let pos = 0;
+		let neg = 0;
+		for (const raw of c.values ?? []) {
+			const v = toFinite(raw);
+			if (v >= 0) pos += v;
+			else neg += v;
+		}
+		return {
+			pos,
+			neg,
+			total: pos + neg
+		};
+	}), ...ngDevMode ? [{ debugName: "extents" }] : /* istanbul ignore next */ []);
+	scale = computed(() => {
+		const ext = this.extents();
+		const max = Math.max(0, ...ext.map((e) => e.pos));
+		const min = Math.min(0, ...ext.map((e) => e.neg));
+		return niceScale(min, max, 4);
+	}, ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
+	valueToPos(value) {
+		const { min, max } = this.scale();
+		const p = this.plot();
+		const frac = (value - min) / (max - min || 1);
+		return this.isVertical() ? p.y + p.h - frac * p.h : p.x + frac * p.w;
+	}
+	gridLines = computed(() => {
+		if (!this.showGrid() || !this.categories()?.length) return [];
+		const fmt = this.formatValue();
+		return this.scale().ticks.map((tick) => ({
+			pos: this.valueToPos(tick),
+			label: fmt(tick)
+		}));
+	}, ...ngDevMode ? [{ debugName: "gridLines" }] : /* istanbul ignore next */ []);
+	stacks = computed(() => {
+		const cats = this.categories();
+		const legs = this.legends();
+		if (!cats?.length) return [];
+		const p = this.plot();
+		const h = this.height();
+		const isV = this.isVertical();
+		const gap = this.barGap();
+		const fmt = this.formatValue();
+		const ext = this.extents();
+		const slot = (isV ? p.w : p.h) / cats.length;
+		const thickness = slot * (1 - gap);
+		const off = (slot - thickness) / 2;
+		return cats.map((cat, ci) => {
+			const along = (isV ? p.x : p.y) + ci * slot + off;
+			let cumPos = 0;
+			let cumNeg = 0;
+			const segments = (cat.values ?? []).map((raw, vi) => {
+				const val = toFinite(raw);
+				const color = legs[vi]?.color || chartColor(vi);
+				const from = val >= 0 ? cumPos : cumNeg;
+				const to = from + val;
+				if (val >= 0) cumPos = to;
+				else cumNeg = to;
+				const a = this.valueToPos(from);
+				const b = this.valueToPos(to);
+				const start = Math.min(a, b);
+				const len = Math.abs(b - a);
+				const rect = isV ? {
+					x: along,
+					y: start,
+					w: thickness,
+					h: len
+				} : {
+					x: start,
+					y: along,
+					w: len,
+					h: thickness
+				};
+				return {
+					...rect,
+					color,
+					value: val,
+					valueText: fmt(val),
+					showValue: len >= MIN_SEGMENT_LABEL_PX,
+					valueX: rect.x + rect.w / 2,
+					valueY: rect.y + rect.h / 2
+				};
+			});
+			const total = ext[ci].total;
+			const posEnd = this.valueToPos(ext[ci].pos);
+			const labelPos = isV ? {
+				x: p.x + (ci + .5) * slot,
+				y: h - this.PB + 16
+			} : {
+				x: p.x - 6,
+				y: p.y + (ci + .5) * slot
+			};
+			const totalPos = isV ? {
+				x: along + thickness / 2,
+				y: posEnd - 6,
+				anchor: "middle"
+			} : {
+				x: posEnd + 6,
+				y: along + thickness / 2,
+				anchor: "start"
+			};
+			return {
+				label: cat.label,
+				segments,
+				labelPos,
+				total,
+				totalText: fmt(total),
+				totalPos
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "stacks" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => {
+		return this.legends().map((l, i) => ({
+			label: l.label,
+			color: l.color || chartColor(i)
+		}));
+	}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	axisLine = computed(() => {
+		const p = this.plot();
+		const isV = this.isVertical();
+		const zero = this.categories()?.length ? this.valueToPos(0) : isV ? p.y + p.h : p.x;
+		return {
+			vx1: isV ? p.x : zero,
+			vy1: p.y,
+			vx2: isV ? p.x : zero,
+			vy2: p.y + p.h,
+			hx1: p.x,
+			hy1: isV ? zero : p.y + p.h,
+			hx2: p.x + p.w,
+			hy2: isV ? zero : p.y + p.h
+		};
+	}, ...ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []);
+	plotBottom = computed(() => this.plot().y + this.plot().h, ...ngDevMode ? [{ debugName: "plotBottom" }] : /* istanbul ignore next */ []);
+	effectiveAriaLabel = computed(() => {
+		const explicit = this.ariaLabel();
+		if (explicit) return explicit;
+		const cats = this.categories() ?? [];
+		if (!cats.length) return "Stacked bar chart: no data";
+		const fmt = this.formatValue();
+		const ext = this.extents();
+		const seriesNames = this.legends().map((l) => l.label).filter(Boolean);
+		return `Stacked bar chart${seriesNames.length ? ` (${seriesNames.join(", ")})` : ""}: ${cats.map((c, i) => `${c.label} ${fmt(ext[i].total)}`).join(", ")}`;
+	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: StackedBarChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: StackedBarChartComponent,
+		isStandalone: true,
+		selector: "lc-stacked-bar-chart",
+		inputs: {
+			categories: {
+				classPropertyName: "categories",
+				publicName: "categories",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			legends: {
+				classPropertyName: "legends",
+				publicName: "legends",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLabels: {
+				classPropertyName: "showLabels",
+				publicName: "showLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValues: {
+				classPropertyName: "showValues",
+				publicName: "showValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLegend: {
+				classPropertyName: "showLegend",
+				publicName: "showLegend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showGrid: {
+				classPropertyName: "showGrid",
+				publicName: "showGrid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			barGap: {
+				classPropertyName: "barGap",
+				publicName: "barGap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			formatValue: {
+				classPropertyName: "formatValue",
+				publicName: "formatValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "style.max-width.px": "width()" } },
+		ngImport: i0,
+		template: "<div class=\"lc-stacked-bar-chart\">\n  <svg\n    width=\"100%\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-stacked-bar-chart__svg\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @if (showGrid()) {\n      @for (line of gridLines(); track line.pos) {\n        @if (isVertical()) {\n          <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.pos\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.pos\" class=\"lc-stacked-bar-chart__grid\" />\n          <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.pos\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__grid-label\">{{ line.label }}</text>\n        } @else {\n          <line [attr.x1]=\"line.pos\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"line.pos\" [attr.y2]=\"axisLine().vy2\" class=\"lc-stacked-bar-chart__grid\" />\n          <text [attr.x]=\"line.pos\" [attr.y]=\"plotBottom() + 12\" text-anchor=\"middle\" class=\"lc-stacked-bar-chart__grid-label\">{{ line.label }}</text>\n        }\n      }\n    }\n\n    <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-stacked-bar-chart__axis\" />\n    <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-stacked-bar-chart__axis\" />\n\n    @for (stack of stacks(); track $index) {\n      @for (seg of stack.segments; track $index) {\n        <rect [attr.x]=\"seg.x\" [attr.y]=\"seg.y\" [attr.width]=\"seg.w\" [attr.height]=\"seg.h\" [attr.fill]=\"seg.color\" class=\"lc-stacked-bar-chart__segment\" />\n        @if (showValues() && seg.showValue) {\n          <text [attr.x]=\"seg.valueX\" [attr.y]=\"seg.valueY\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__segment-value\">{{ seg.valueText }}</text>\n        }\n      }\n      @if (showValues()) {\n        <text [attr.x]=\"stack.totalPos.x\" [attr.y]=\"stack.totalPos.y\" [attr.text-anchor]=\"stack.totalPos.anchor\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__total\">{{ stack.totalText }}</text>\n      }\n      @if (showLabels()) {\n        <text [attr.x]=\"stack.labelPos.x\" [attr.y]=\"stack.labelPos.y\" [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__label\">{{ stack.label }}</text>\n      }\n    }\n  </svg>\n\n  @if (showLegend() && legendItems().length) {\n    <div class=\"lc-stacked-bar-chart__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-stacked-bar-chart__legend-item\">\n          <span class=\"lc-stacked-bar-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-stacked-bar-chart__legend-text\">{{ item.label }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+		styles: [":host{display:block}.lc-stacked-bar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-stacked-bar-chart__svg{overflow:visible}.lc-stacked-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-stacked-bar-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-stacked-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-stacked-bar-chart__segment{transition:opacity .15s ease}.lc-stacked-bar-chart__segment:hover{opacity:.8}.lc-stacked-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-stacked-bar-chart__segment-value{font-size:.625rem;font-weight:600;fill:var(--color-text-primary);paint-order:stroke;stroke:var(--color-surface);stroke-width:3px;stroke-linejoin:round;pointer-events:none}.lc-stacked-bar-chart__total{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-stacked-bar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-stacked-bar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-stacked-bar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:2px;flex-shrink:0}.lc-stacked-bar-chart__legend-text{color:var(--color-text-secondary)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: StackedBarChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-stacked-bar-chart",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[style.max-width.px]": "width()" },
+			template: "<div class=\"lc-stacked-bar-chart\">\n  <svg\n    width=\"100%\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-stacked-bar-chart__svg\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @if (showGrid()) {\n      @for (line of gridLines(); track line.pos) {\n        @if (isVertical()) {\n          <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.pos\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.pos\" class=\"lc-stacked-bar-chart__grid\" />\n          <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.pos\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__grid-label\">{{ line.label }}</text>\n        } @else {\n          <line [attr.x1]=\"line.pos\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"line.pos\" [attr.y2]=\"axisLine().vy2\" class=\"lc-stacked-bar-chart__grid\" />\n          <text [attr.x]=\"line.pos\" [attr.y]=\"plotBottom() + 12\" text-anchor=\"middle\" class=\"lc-stacked-bar-chart__grid-label\">{{ line.label }}</text>\n        }\n      }\n    }\n\n    <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-stacked-bar-chart__axis\" />\n    <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-stacked-bar-chart__axis\" />\n\n    @for (stack of stacks(); track $index) {\n      @for (seg of stack.segments; track $index) {\n        <rect [attr.x]=\"seg.x\" [attr.y]=\"seg.y\" [attr.width]=\"seg.w\" [attr.height]=\"seg.h\" [attr.fill]=\"seg.color\" class=\"lc-stacked-bar-chart__segment\" />\n        @if (showValues() && seg.showValue) {\n          <text [attr.x]=\"seg.valueX\" [attr.y]=\"seg.valueY\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__segment-value\">{{ seg.valueText }}</text>\n        }\n      }\n      @if (showValues()) {\n        <text [attr.x]=\"stack.totalPos.x\" [attr.y]=\"stack.totalPos.y\" [attr.text-anchor]=\"stack.totalPos.anchor\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__total\">{{ stack.totalText }}</text>\n      }\n      @if (showLabels()) {\n        <text [attr.x]=\"stack.labelPos.x\" [attr.y]=\"stack.labelPos.y\" [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__label\">{{ stack.label }}</text>\n      }\n    }\n  </svg>\n\n  @if (showLegend() && legendItems().length) {\n    <div class=\"lc-stacked-bar-chart__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-stacked-bar-chart__legend-item\">\n          <span class=\"lc-stacked-bar-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-stacked-bar-chart__legend-text\">{{ item.label }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+			styles: [":host{display:block}.lc-stacked-bar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-stacked-bar-chart__svg{overflow:visible}.lc-stacked-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-stacked-bar-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-stacked-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-stacked-bar-chart__segment{transition:opacity .15s ease}.lc-stacked-bar-chart__segment:hover{opacity:.8}.lc-stacked-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-stacked-bar-chart__segment-value{font-size:.625rem;font-weight:600;fill:var(--color-text-primary);paint-order:stroke;stroke:var(--color-surface);stroke-width:3px;stroke-linejoin:round;pointer-events:none}.lc-stacked-bar-chart__total{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-stacked-bar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-stacked-bar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-stacked-bar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:2px;flex-shrink:0}.lc-stacked-bar-chart__legend-text{color:var(--color-text-secondary)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		categories: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categories",
+				required: true
+			}]
+		}],
+		legends: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legends",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		showLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLabels",
+				required: false
+			}]
+		}],
+		showValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValues",
+				required: false
+			}]
+		}],
+		showLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLegend",
+				required: false
+			}]
+		}],
+		showGrid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showGrid",
+				required: false
+			}]
+		}],
+		barGap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "barGap",
+				required: false
+			}]
+		}],
+		formatValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formatValue",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { StackedBarChartComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-stacked-bar-chart.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-stacked-bar-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-stacked-bar-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/stacked-bar-chart/stacked-bar-chart.component.ts","../../../../libs/angular-ui-kit/src/lib/stacked-bar-chart/stacked-bar-chart.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  afterNextRender,\n  inject,\n  input,\n  computed,\n  signal,\n} from '@angular/core';\nimport { chartColor } from '@lifecorner/angular-ui-kit/internal/chart';\nimport {\n  ChartValueFormatter,\n  formatChartValue,\n  niceScale,\n  toFinite,\n} from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport interface StackedBarCategory {\n  label: string;\n  /** One value per series. Negative values stack downward (left) from the zero baseline. */\n  values: number[];\n}\n\nexport interface StackedBarLegend {\n  label: string;\n  color?: string;\n}\n\nexport type StackedBarOrientation = 'vertical' | 'horizontal';\n\n/** viewBox width used until the container has been measured. */\nconst DEFAULT_WIDTH = 400;\n\n/** Segments shorter than this along the value axis get no inline value label. */\nconst MIN_SEGMENT_LABEL_PX = 14;\n\n@Component({\n  selector: 'lc-stacked-bar-chart',\n  standalone: true,\n  templateUrl: './stacked-bar-chart.component.html',\n  styleUrls: ['./stacked-bar-chart.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[style.max-width.px]': 'width()',\n  },\n})\n/**\n * Stacked bar chart component for comparing category compositions.\n *\n * Features:\n * - Multiple stacked value segments per category\n * - Vertical and horizontal orientation\n * - Negative values stacked downward from a zero baseline\n * - Optional legend, grid, value labels (segments + totals), and axis labels\n * - Configurable bar gap spacing\n * - Color-coded segments with legend mapping\n * - Responsive SVG rendering\n *\n * @example\n * ```html\n * <lc-stacked-bar-chart [categories]=\"data\" [legends]=\"legends\" [showLegend]=\"true\" />\n * ```\n */\nexport class StackedBarChartComponent {\n  private readonly _el = inject(ElementRef);\n  private readonly _destroyRef = inject(DestroyRef);\n  private readonly _containerWidth = signal<number>(0);\n\n  constructor() {\n    afterNextRender(() => {\n      const obs = new ResizeObserver(([entry]) => {\n        this._containerWidth.set(entry.contentRect.width);\n      });\n      obs.observe(this._el.nativeElement);\n      this._destroyRef.onDestroy(() => obs.disconnect());\n    });\n  }\n\n  /** Categories with stacked values. */\n  categories = input.required<StackedBarCategory[]>();\n\n  /** Legend items mapping to each value index. */\n  legends = input<StackedBarLegend[]>([]);\n\n  /**\n   * Intrinsic chart width in pixels. The chart fills its container (the SVG is\n   * `width=\"100%\"` and its viewBox follows the measured container width);\n   * `width` is the viewBox width until the container has been measured and,\n   * when set, the host's `max-width`, so the chart never grows past it. Leave\n   * unset for a fully fluid chart.\n   */\n  width = input<number | undefined>(undefined);\n  height = input<number>(200);\n  orientation = input<StackedBarOrientation>('vertical');\n  showLabels = input<boolean>(true);\n  /** Show the value inside each segment (when it fits) and the total at the end of each stack. */\n  showValues = input<boolean>(false);\n  showLegend = input<boolean>(true);\n  showGrid = input<boolean>(true);\n  barGap = input<number>(0.3);\n\n  /** Formats segment/total value labels and axis ticks. Defaults to a float-safe `String(value)`. */\n  formatValue = input<ChartValueFormatter>(formatChartValue);\n\n  /**\n   * Accessible name of the chart. Defaults to a generated summary listing the\n   * series names and every category's total.\n   */\n  ariaLabel = input<string>('');\n\n  private readonly PL = 40;\n  private readonly PR = 10;\n  private readonly PT = 10;\n  private readonly PB = 30;\n\n  protected readonly effectiveWidth = computed(\n    () => this._containerWidth() || this.width() || DEFAULT_WIDTH\n  );\n\n  protected readonly viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`);\n\n  protected readonly isVertical = computed(() => this.orientation() === 'vertical');\n\n  private readonly plot = computed(() => ({\n    x: this.PL,\n    y: this.PT,\n    w: this.effectiveWidth() - this.PL - this.PR,\n    h: this.height() - this.PT - this.PB,\n  }));\n\n  /** Positive and negative stack extents per category (positives and negatives stack separately). */\n  private readonly extents = computed(() =>\n    (this.categories() ?? []).map((c) => {\n      let pos = 0;\n      let neg = 0;\n      for (const raw of c.values ?? []) {\n        const v = toFinite(raw);\n        if (v >= 0) pos += v;\n        else neg += v;\n      }\n      return { pos, neg, total: pos + neg };\n    })\n  );\n\n  /**\n   * One scale for grid *and* segments: nice tick bounds that always include\n   * zero and extend below it when a stack goes negative.\n   */\n  protected readonly scale = computed(() => {\n    const ext = this.extents();\n    const max = Math.max(0, ...ext.map((e) => e.pos));\n    const min = Math.min(0, ...ext.map((e) => e.neg));\n    return niceScale(min, max, 4);\n  });\n\n  private valueToPos(value: number): number {\n    const { min, max } = this.scale();\n    const p = this.plot();\n    const frac = (value - min) / (max - min || 1);\n    return this.isVertical() ? p.y + p.h - frac * p.h : p.x + frac * p.w;\n  }\n\n  protected readonly gridLines = computed(() => {\n    if (!this.showGrid() || !this.categories()?.length) return [];\n    const fmt = this.formatValue();\n    return this.scale().ticks.map((tick) => ({ pos: this.valueToPos(tick), label: fmt(tick) }));\n  });\n\n  protected readonly stacks = computed(() => {\n    const cats = this.categories();\n    const legs = this.legends();\n    if (!cats?.length) return [];\n\n    const p = this.plot();\n    const h = this.height();\n    const isV = this.isVertical();\n    const gap = this.barGap();\n    const fmt = this.formatValue();\n    const ext = this.extents();\n\n    const slot = (isV ? p.w : p.h) / cats.length;\n    const thickness = slot * (1 - gap);\n    const off = (slot - thickness) / 2;\n\n    return cats.map((cat, ci) => {\n      const along = (isV ? p.x : p.y) + ci * slot + off;\n      let cumPos = 0;\n      let cumNeg = 0;\n\n      const segments = (cat.values ?? []).map((raw, vi) => {\n        const val = toFinite(raw);\n        const color = legs[vi]?.color || chartColor(vi);\n        const from = val >= 0 ? cumPos : cumNeg;\n        const to = from + val;\n        if (val >= 0) cumPos = to;\n        else cumNeg = to;\n\n        const a = this.valueToPos(from);\n        const b = this.valueToPos(to);\n        const start = Math.min(a, b);\n        const len = Math.abs(b - a);\n        const rect = isV\n          ? { x: along, y: start, w: thickness, h: len }\n          : { x: start, y: along, w: len, h: thickness };\n        return {\n          ...rect,\n          color,\n          value: val,\n          valueText: fmt(val),\n          showValue: len >= MIN_SEGMENT_LABEL_PX,\n          valueX: rect.x + rect.w / 2,\n          valueY: rect.y + rect.h / 2,\n        };\n      });\n\n      const total = ext[ci].total;\n      const posEnd = this.valueToPos(ext[ci].pos);\n      const labelPos = isV\n        ? { x: p.x + (ci + 0.5) * slot, y: h - this.PB + 16 }\n        : { x: p.x - 6, y: p.y + (ci + 0.5) * slot };\n      // Total sits past the positive end of the stack (or at the baseline for all-negative stacks).\n      const totalPos = isV\n        ? { x: along + thickness / 2, y: posEnd - 6, anchor: 'middle' }\n        : { x: posEnd + 6, y: along + thickness / 2, anchor: 'start' };\n\n      return { label: cat.label, segments, labelPos, total, totalText: fmt(total), totalPos };\n    });\n  });\n\n  protected readonly legendItems = computed(() => {\n    const legs = this.legends();\n    return legs.map((l, i) => ({\n      label: l.label,\n      color: l.color || chartColor(i),\n    }));\n  });\n\n  /** Value axis along the plot edge plus the zero baseline (inside the plot when data goes negative). */\n  protected readonly axisLine = computed(() => {\n    const p = this.plot();\n    const isV = this.isVertical();\n    const zero = this.categories()?.length ? this.valueToPos(0) : (isV ? p.y + p.h : p.x);\n    return {\n      vx1: isV ? p.x : zero, vy1: p.y,\n      vx2: isV ? p.x : zero, vy2: p.y + p.h,\n      hx1: p.x, hy1: isV ? zero : p.y + p.h,\n      hx2: p.x + p.w, hy2: isV ? zero : p.y + p.h,\n    };\n  });\n\n  protected readonly plotBottom = computed(() => this.plot().y + this.plot().h);\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const cats = this.categories() ?? [];\n    if (!cats.length) return 'Stacked bar chart: no data';\n    const fmt = this.formatValue();\n    const ext = this.extents();\n    const seriesNames = this.legends().map((l) => l.label).filter(Boolean);\n    const series = seriesNames.length ? ` (${seriesNames.join(', ')})` : '';\n    const totals = cats.map((c, i) => `${c.label} ${fmt(ext[i].total)}`).join(', ');\n    return `Stacked bar chart${series}: ${totals}`;\n  });\n}\n","<div class=\"lc-stacked-bar-chart\">\n  <svg\n    width=\"100%\"\n    [attr.height]=\"height()\"\n    [attr.viewBox]=\"viewBox()\"\n    role=\"img\"\n    [attr.aria-label]=\"effectiveAriaLabel()\"\n    class=\"lc-stacked-bar-chart__svg\"\n  >\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @if (showGrid()) {\n      @for (line of gridLines(); track line.pos) {\n        @if (isVertical()) {\n          <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.pos\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.pos\" class=\"lc-stacked-bar-chart__grid\" />\n          <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.pos\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__grid-label\">{{ line.label }}</text>\n        } @else {\n          <line [attr.x1]=\"line.pos\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"line.pos\" [attr.y2]=\"axisLine().vy2\" class=\"lc-stacked-bar-chart__grid\" />\n          <text [attr.x]=\"line.pos\" [attr.y]=\"plotBottom() + 12\" text-anchor=\"middle\" class=\"lc-stacked-bar-chart__grid-label\">{{ line.label }}</text>\n        }\n      }\n    }\n\n    <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-stacked-bar-chart__axis\" />\n    <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-stacked-bar-chart__axis\" />\n\n    @for (stack of stacks(); track $index) {\n      @for (seg of stack.segments; track $index) {\n        <rect [attr.x]=\"seg.x\" [attr.y]=\"seg.y\" [attr.width]=\"seg.w\" [attr.height]=\"seg.h\" [attr.fill]=\"seg.color\" class=\"lc-stacked-bar-chart__segment\" />\n        @if (showValues() && seg.showValue) {\n          <text [attr.x]=\"seg.valueX\" [attr.y]=\"seg.valueY\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__segment-value\">{{ seg.valueText }}</text>\n        }\n      }\n      @if (showValues()) {\n        <text [attr.x]=\"stack.totalPos.x\" [attr.y]=\"stack.totalPos.y\" [attr.text-anchor]=\"stack.totalPos.anchor\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__total\">{{ stack.totalText }}</text>\n      }\n      @if (showLabels()) {\n        <text [attr.x]=\"stack.labelPos.x\" [attr.y]=\"stack.labelPos.y\" [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__label\">{{ stack.label }}</text>\n      }\n    }\n  </svg>\n\n  @if (showLegend() && legendItems().length) {\n    <div class=\"lc-stacked-bar-chart__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-stacked-bar-chart__legend-item\">\n          <span class=\"lc-stacked-bar-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-stacked-bar-chart__legend-text\">{{ item.label }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-stage-list.mjs

@@ -0,0 +1,186 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+var StageListComponent = class StageListComponent {
+	stages = input.required(...ngDevMode ? [{ debugName: "stages" }] : /* istanbul ignore next */ []);
+	max = input(null, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	showValue = input(true, ...ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []);
+	showBar = input(true, ...ngDevMode ? [{ debugName: "showBar" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	clickable = input(false, ...ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []);
+	emptyText = input("", ...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	stageClick = output();
+	isEmpty = computed(() => this.stages().length === 0, ...ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []);
+	resolvedMax = computed(() => {
+		const explicitMax = this.max();
+		if (typeof explicitMax === "number" && Number.isFinite(explicitMax) && explicitMax > 0) return explicitMax;
+		const numericValues = this.stages().map((stage) => Number.isFinite(stage.value) ? stage.value : 0);
+		return Math.max(1, ...numericValues);
+	}, ...ngDevMode ? [{ debugName: "resolvedMax" }] : /* istanbul ignore next */ []);
+	resolveColor(stage) {
+		if (typeof stage.color === "string" && stage.color.trim()) return stage.color;
+		return "var(--lc-color-primary-500, var(--color-primary-500))";
+	}
+	fillWidth(stage) {
+		const value = Number.isFinite(stage.value) ? stage.value : 0;
+		if (value <= 0) return "0%";
+		const maxValue = this.resolvedMax();
+		const pct = Math.round(value / (maxValue > 0 ? maxValue : 1) * 100);
+		return `max(2px, ${Math.max(0, Math.min(100, pct))}%)`;
+	}
+	onStageClick(stage) {
+		if (!this.clickable()) return;
+		this.stageClick.emit(stage);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: StageListComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: StageListComponent,
+		isStandalone: true,
+		selector: "lc-stage-list",
+		inputs: {
+			stages: {
+				classPropertyName: "stages",
+				publicName: "stages",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValue: {
+				classPropertyName: "showValue",
+				publicName: "showValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showBar: {
+				classPropertyName: "showBar",
+				publicName: "showBar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clickable: {
+				classPropertyName: "clickable",
+				publicName: "clickable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyText: {
+				classPropertyName: "emptyText",
+				publicName: "emptyText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { stageClick: "stageClick" },
+		ngImport: i0,
+		template: "@if (isEmpty()) {\n  @if (emptyText()) {\n    <p class=\"lc-stage-list__empty\">{{ emptyText() }}</p>\n  }\n} @else {\n  <div class=\"lc-stage-list\" [class.lc-stage-list--sm]=\"size() === 'sm'\" [class.lc-stage-list--md]=\"size() === 'md'\" role=\"list\">\n    @for (stage of stages(); track stage.id || stage.label || $index) {\n      <div class=\"lc-stage-list__row\" role=\"listitem\" [style.--lc-stage-color]=\"resolveColor(stage)\">\n        @if (clickable()) {\n          <button type=\"button\" class=\"lc-stage-list__interactive\" (click)=\"onStageClick(stage)\">\n            <div class=\"lc-stage-list__head\">\n              <span class=\"lc-stage-list__dot\" aria-hidden=\"true\"></span>\n              <div class=\"lc-stage-list__label-wrap\">\n                <span class=\"lc-stage-list__label\">{{ stage.label }}</span>\n                @if (stage.hint) {\n                  <span class=\"lc-stage-list__hint\">{{ stage.hint }}</span>\n                }\n              </div>\n              @if (showValue()) {\n                <span class=\"lc-stage-list__value\">{{ stage.value }}</span>\n              }\n            </div>\n            @if (showBar()) {\n              <div class=\"lc-stage-list__track\" aria-hidden=\"true\">\n                <div class=\"lc-stage-list__fill\" [style.width]=\"fillWidth(stage)\"></div>\n              </div>\n            }\n          </button>\n        } @else {\n          <div class=\"lc-stage-list__content\">\n            <div class=\"lc-stage-list__head\">\n              <span class=\"lc-stage-list__dot\" aria-hidden=\"true\"></span>\n              <div class=\"lc-stage-list__label-wrap\">\n                <span class=\"lc-stage-list__label\">{{ stage.label }}</span>\n                @if (stage.hint) {\n                  <span class=\"lc-stage-list__hint\">{{ stage.hint }}</span>\n                }\n              </div>\n              @if (showValue()) {\n                <span class=\"lc-stage-list__value\">{{ stage.value }}</span>\n              }\n            </div>\n            @if (showBar()) {\n              <div class=\"lc-stage-list__track\" aria-hidden=\"true\">\n                <div class=\"lc-stage-list__fill\" [style.width]=\"fillWidth(stage)\"></div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n",
+		styles: [":host{display:block;width:100%}.lc-stage-list{--lc-stage-gap: .875rem;--lc-stage-bar-height: 8px;--lc-stage-font-size: .9375rem;display:flex;flex-direction:column;gap:var(--lc-stage-gap);width:100%}.lc-stage-list--sm{--lc-stage-gap: .625rem;--lc-stage-bar-height: 6px;--lc-stage-font-size: .875rem}.lc-stage-list__row{width:100%}.lc-stage-list__content,.lc-stage-list__interactive{display:flex;flex-direction:column;gap:.4rem;width:100%}.lc-stage-list__interactive{margin:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}.lc-stage-list__interactive:focus-visible{border-radius:.375rem;outline:2px solid var(--lc-focus-ring-color, var(--color-primary-500));outline-offset:2px}.lc-stage-list__head{display:flex;align-items:flex-start;gap:.5rem;width:100%}.lc-stage-list__dot{flex-shrink:0;width:8px;height:8px;border-radius:999px;margin-top:.32rem;background-color:var(--lc-stage-color, var(--lc-color-primary-500, var(--color-primary-500)))}.lc-stage-list__label-wrap{min-width:0;flex:1;display:flex;flex-direction:column;gap:.1rem}.lc-stage-list__label{color:var(--lc-color-text, var(--color-text-primary));font-size:var(--lc-stage-font-size);line-height:1.35;overflow-wrap:anywhere}.lc-stage-list__hint{color:var(--color-text-secondary);font-size:.8125rem;line-height:1.35;overflow-wrap:anywhere}.lc-stage-list__value{margin-left:auto;padding-left:.75rem;color:var(--lc-color-text, var(--color-text-primary));font-size:var(--lc-stage-font-size);font-weight:600;line-height:1.35;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.lc-stage-list__track{width:100%;height:var(--lc-stage-bar-height);border-radius:999px;background-color:var(--lc-color-surface-alt, var(--color-surface-hover, rgba(148, 163, 184, .18)));overflow:hidden}.lc-stage-list__fill{height:100%;border-radius:inherit;background-color:var(--lc-stage-color, var(--lc-color-primary-500, var(--color-primary-500)));transition:width .3s ease}.lc-stage-list__empty{margin:0;color:var(--color-text-secondary)}@media(prefers-reduced-motion:reduce){.lc-stage-list__fill{transition:none}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: StageListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-stage-list",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (isEmpty()) {\n  @if (emptyText()) {\n    <p class=\"lc-stage-list__empty\">{{ emptyText() }}</p>\n  }\n} @else {\n  <div class=\"lc-stage-list\" [class.lc-stage-list--sm]=\"size() === 'sm'\" [class.lc-stage-list--md]=\"size() === 'md'\" role=\"list\">\n    @for (stage of stages(); track stage.id || stage.label || $index) {\n      <div class=\"lc-stage-list__row\" role=\"listitem\" [style.--lc-stage-color]=\"resolveColor(stage)\">\n        @if (clickable()) {\n          <button type=\"button\" class=\"lc-stage-list__interactive\" (click)=\"onStageClick(stage)\">\n            <div class=\"lc-stage-list__head\">\n              <span class=\"lc-stage-list__dot\" aria-hidden=\"true\"></span>\n              <div class=\"lc-stage-list__label-wrap\">\n                <span class=\"lc-stage-list__label\">{{ stage.label }}</span>\n                @if (stage.hint) {\n                  <span class=\"lc-stage-list__hint\">{{ stage.hint }}</span>\n                }\n              </div>\n              @if (showValue()) {\n                <span class=\"lc-stage-list__value\">{{ stage.value }}</span>\n              }\n            </div>\n            @if (showBar()) {\n              <div class=\"lc-stage-list__track\" aria-hidden=\"true\">\n                <div class=\"lc-stage-list__fill\" [style.width]=\"fillWidth(stage)\"></div>\n              </div>\n            }\n          </button>\n        } @else {\n          <div class=\"lc-stage-list__content\">\n            <div class=\"lc-stage-list__head\">\n              <span class=\"lc-stage-list__dot\" aria-hidden=\"true\"></span>\n              <div class=\"lc-stage-list__label-wrap\">\n                <span class=\"lc-stage-list__label\">{{ stage.label }}</span>\n                @if (stage.hint) {\n                  <span class=\"lc-stage-list__hint\">{{ stage.hint }}</span>\n                }\n              </div>\n              @if (showValue()) {\n                <span class=\"lc-stage-list__value\">{{ stage.value }}</span>\n              }\n            </div>\n            @if (showBar()) {\n              <div class=\"lc-stage-list__track\" aria-hidden=\"true\">\n                <div class=\"lc-stage-list__fill\" [style.width]=\"fillWidth(stage)\"></div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n",
+			styles: [":host{display:block;width:100%}.lc-stage-list{--lc-stage-gap: .875rem;--lc-stage-bar-height: 8px;--lc-stage-font-size: .9375rem;display:flex;flex-direction:column;gap:var(--lc-stage-gap);width:100%}.lc-stage-list--sm{--lc-stage-gap: .625rem;--lc-stage-bar-height: 6px;--lc-stage-font-size: .875rem}.lc-stage-list__row{width:100%}.lc-stage-list__content,.lc-stage-list__interactive{display:flex;flex-direction:column;gap:.4rem;width:100%}.lc-stage-list__interactive{margin:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}.lc-stage-list__interactive:focus-visible{border-radius:.375rem;outline:2px solid var(--lc-focus-ring-color, var(--color-primary-500));outline-offset:2px}.lc-stage-list__head{display:flex;align-items:flex-start;gap:.5rem;width:100%}.lc-stage-list__dot{flex-shrink:0;width:8px;height:8px;border-radius:999px;margin-top:.32rem;background-color:var(--lc-stage-color, var(--lc-color-primary-500, var(--color-primary-500)))}.lc-stage-list__label-wrap{min-width:0;flex:1;display:flex;flex-direction:column;gap:.1rem}.lc-stage-list__label{color:var(--lc-color-text, var(--color-text-primary));font-size:var(--lc-stage-font-size);line-height:1.35;overflow-wrap:anywhere}.lc-stage-list__hint{color:var(--color-text-secondary);font-size:.8125rem;line-height:1.35;overflow-wrap:anywhere}.lc-stage-list__value{margin-left:auto;padding-left:.75rem;color:var(--lc-color-text, var(--color-text-primary));font-size:var(--lc-stage-font-size);font-weight:600;line-height:1.35;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.lc-stage-list__track{width:100%;height:var(--lc-stage-bar-height);border-radius:999px;background-color:var(--lc-color-surface-alt, var(--color-surface-hover, rgba(148, 163, 184, .18)));overflow:hidden}.lc-stage-list__fill{height:100%;border-radius:inherit;background-color:var(--lc-stage-color, var(--lc-color-primary-500, var(--color-primary-500)));transition:width .3s ease}.lc-stage-list__empty{margin:0;color:var(--color-text-secondary)}@media(prefers-reduced-motion:reduce){.lc-stage-list__fill{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		stages: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stages",
+				required: true
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		showValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValue",
+				required: false
+			}]
+		}],
+		showBar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showBar",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		clickable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clickable",
+				required: false
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: false
+			}]
+		}],
+		stageClick: [{
+			type: i0.Output,
+			args: ["stageClick"]
+		}]
+	}
+});
+export { StageListComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-stage-list.mjs.map