@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

package/fesm2022/lifecorner-angular-ui-kit-area-chart.mjs

@@ -0,0 +1,446 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, afterNextRender, computed, inject, input, signal } from "@angular/core";
+import { chartColor, formatChartValue, linearPath, niceScale, smoothPath, toFinite } from "@lifecorner/angular-ui-kit/internal/chart";
+const DEFAULT_WIDTH = 400;
+var AreaChartComponent = class AreaChartComponent {
+	_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());
+		});
+	}
+	series = input.required(...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	labels = input([], ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	width = input(void 0, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input(200, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	strokeWidth = input(2, ...ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []);
+	showDots = input(false, ...ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []);
+	showGrid = input(true, ...ngDevMode ? [{ debugName: "showGrid" }] : /* istanbul ignore next */ []);
+	showXLabels = input(true, ...ngDevMode ? [{ debugName: "showXLabels" }] : /* istanbul ignore next */ []);
+	showYLabels = input(true, ...ngDevMode ? [{ debugName: "showYLabels" }] : /* istanbul ignore next */ []);
+	showLegend = input(false, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
+	smooth = input(true, ...ngDevMode ? [{ debugName: "smooth" }] : /* istanbul ignore next */ []);
+	fillOpacity = input(.2, ...ngDevMode ? [{ debugName: "fillOpacity" }] : /* istanbul ignore next */ []);
+	stacked = input(false, ...ngDevMode ? [{ debugName: "stacked" }] : /* 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 */ []);
+	plotArea = computed(() => ({
+		x: this.PL,
+		y: this.PT,
+		w: this.effectiveWidth() - this.PL - this.PR,
+		h: this.height() - this.PT - this.PB
+	}), ...ngDevMode ? [{ debugName: "plotArea" }] : /* istanbul ignore next */ []);
+	cleanSeries = computed(() => (this.series() ?? []).map((ser) => ({
+		...ser,
+		data: (ser.data ?? []).map((v) => toFinite(v))
+	})), ...ngDevMode ? [{ debugName: "cleanSeries" }] : /* istanbul ignore next */ []);
+	computedSeries = computed(() => {
+		const allSeries = this.cleanSeries();
+		if (!allSeries.length) return [];
+		if (this.stacked()) {
+			const maxLen = Math.max(...allSeries.map((s) => s.data.length));
+			const stackedData = [];
+			const cumulative = new Array(maxLen).fill(0);
+			for (const ser of allSeries) {
+				const row = ser.data.map((v, i) => {
+					cumulative[i] = (cumulative[i] || 0) + v;
+					return cumulative[i];
+				});
+				stackedData.push(row);
+			}
+			return allSeries.map((ser, i) => ({
+				...ser,
+				computedData: stackedData[i],
+				prevData: i > 0 ? stackedData[i - 1] : null
+			}));
+		}
+		return allSeries.map((ser) => ({
+			...ser,
+			computedData: ser.data,
+			prevData: null
+		}));
+	}, ...ngDevMode ? [{ debugName: "computedSeries" }] : /* istanbul ignore next */ []);
+	minValue = computed(() => {
+		if (this.stacked()) return 0;
+		const all = this.cleanSeries().flatMap((s) => s.data);
+		return all.length ? Math.min(...all, 0) : 0;
+	}, ...ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []);
+	maxValue = computed(() => {
+		const all = this.computedSeries().flatMap((s) => s.computedData);
+		return all.length ? Math.max(...all) : 0;
+	}, ...ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []);
+	scale = computed(() => niceScale(this.minValue(), this.maxValue(), 4), ...ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []);
+	valueToY(value) {
+		const { min, max } = this.scale();
+		const pa = this.plotArea();
+		return pa.y + pa.h - (value - min) / (max - min || 1) * pa.h;
+	}
+	gridLines = computed(() => {
+		if (!this.showGrid()) return [];
+		const fmt = this.formatValue();
+		return this.scale().ticks.map((tick) => ({
+			y: this.valueToY(tick),
+			label: fmt(tick)
+		}));
+	}, ...ngDevMode ? [{ debugName: "gridLines" }] : /* istanbul ignore next */ []);
+	xLabelItems = computed(() => {
+		const lbls = this.labels();
+		if (!this.showXLabels() || !lbls.length) return [];
+		const pa = this.plotArea();
+		return lbls.map((l, i) => ({
+			x: pa.x + (lbls.length > 1 ? i / (lbls.length - 1) * pa.w : pa.w / 2),
+			y: this.height() - this.PB + 16,
+			label: l
+		}));
+	}, ...ngDevMode ? [{ debugName: "xLabelItems" }] : /* istanbul ignore next */ []);
+	toPoints(data) {
+		const pa = this.plotArea();
+		return data.map((v, i) => ({
+			x: pa.x + (data.length > 1 ? i / (data.length - 1) * pa.w : pa.w / 2),
+			y: this.valueToY(v)
+		}));
+	}
+	renderedSeries = computed(() => {
+		const cs = this.computedSeries();
+		const pa = this.plotArea();
+		const bottomY = pa.y + pa.h;
+		const smooth = this.smooth();
+		return cs.map((ser, si) => {
+			const color = ser.color || chartColor(si);
+			const points = this.toPoints(ser.computedData);
+			const lineD = smooth ? smoothPath(points) : linearPath(points);
+			let areaD = "";
+			if (lineD) {
+				if (ser.prevData) areaD = `${lineD} ${this.toPoints(ser.prevData).reverse().map((p) => `L${p.x},${p.y}`).join(" ")} Z`;
+				else {
+					const lastX = points[points.length - 1].x;
+					const firstX = points[0].x;
+					areaD = `${lineD} L${lastX},${bottomY} L${firstX},${bottomY} Z`;
+				}
+			}
+			return {
+				label: ser.label,
+				color,
+				lineD,
+				areaD,
+				points: this.showDots() ? points : []
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "renderedSeries" }] : /* istanbul ignore next */ []);
+	axisLine = computed(() => {
+		const pa = this.plotArea();
+		return {
+			vx1: pa.x,
+			vy1: pa.y,
+			vx2: pa.x,
+			vy2: pa.y + pa.h,
+			hx1: pa.x,
+			hy1: pa.y + pa.h,
+			hx2: pa.x + pa.w,
+			hy2: pa.y + pa.h
+		};
+	}, ...ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => {
+		if (!this.showLegend()) return [];
+		return this.renderedSeries().map((s) => ({
+			label: s.label,
+			color: s.color
+		}));
+	}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	effectiveAriaLabel = computed(() => {
+		const explicit = this.ariaLabel();
+		if (explicit) return explicit;
+		const series = this.cleanSeries();
+		if (!series.length) return "Area chart: no data";
+		const fmt = this.formatValue();
+		const parts = series.map((s, i) => {
+			const name = s.label || `Series ${i + 1}`;
+			if (!s.data.length) return `${name} (no data)`;
+			const n = s.data.length;
+			return `${name} (${n} ${n === 1 ? "point" : "points"}, ${fmt(Math.min(...s.data))} to ${fmt(Math.max(...s.data))})`;
+		});
+		return `${this.stacked() ? "Stacked area chart" : "Area chart"}: ${parts.join(", ")}`;
+	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: AreaChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: AreaChartComponent,
+		isStandalone: true,
+		selector: "lc-area-chart",
+		inputs: {
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				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
+			},
+			strokeWidth: {
+				classPropertyName: "strokeWidth",
+				publicName: "strokeWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showDots: {
+				classPropertyName: "showDots",
+				publicName: "showDots",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showGrid: {
+				classPropertyName: "showGrid",
+				publicName: "showGrid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showXLabels: {
+				classPropertyName: "showXLabels",
+				publicName: "showXLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showYLabels: {
+				classPropertyName: "showYLabels",
+				publicName: "showYLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLegend: {
+				classPropertyName: "showLegend",
+				publicName: "showLegend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			smooth: {
+				classPropertyName: "smooth",
+				publicName: "smooth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fillOpacity: {
+				classPropertyName: "fillOpacity",
+				publicName: "fillOpacity",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stacked: {
+				classPropertyName: "stacked",
+				publicName: "stacked",
+				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-area-chart\">\n  <svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-area-chart__svg\">\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @for (line of gridLines(); track line.y) {\n      <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-area-chart__grid\" />\n      @if (showYLabels()) {\n        <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-area-chart__axis-label\">{{ line.label }}</text>\n      }\n    }\n\n    <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-area-chart__axis\" />\n    <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-area-chart__axis\" />\n\n    @for (lbl of xLabelItems(); track lbl.x) {\n      <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"middle\" class=\"lc-area-chart__axis-label\">{{ lbl.label }}</text>\n    }\n\n    @for (ser of renderedSeries(); track $index) {\n      @if (ser.areaD) {\n        <path [attr.d]=\"ser.areaD\" [attr.fill]=\"ser.color\" [attr.opacity]=\"fillOpacity()\" class=\"lc-area-chart__area\" />\n      }\n      @if (ser.lineD) {\n        <path [attr.d]=\"ser.lineD\" [attr.stroke]=\"ser.color\" [attr.stroke-width]=\"strokeWidth()\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lc-area-chart__line\" />\n      }\n      @for (pt of ser.points; track $index) {\n        <circle [attr.cx]=\"pt.x\" [attr.cy]=\"pt.y\" r=\"3\" [attr.fill]=\"ser.color\" stroke=\"var(--color-surface)\" stroke-width=\"1.5\" class=\"lc-area-chart__dot\" />\n      }\n    }\n  </svg>\n\n  @if (legendItems().length) {\n    <div class=\"lc-area-chart__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-area-chart__legend-item\">\n          <span class=\"lc-area-chart__legend-swatch\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-area-chart__legend-text\">{{ item.label }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+		styles: [":host{display:block}.lc-area-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-area-chart__svg{overflow:visible}.lc-area-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-area-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-area-chart__axis-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-area-chart__dot{transition:r .15s ease}.lc-area-chart__dot:hover{r:5}.lc-area-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-area-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-area-chart__legend-swatch{width:.75rem;height:.75rem;border-radius:2px;flex-shrink:0}.lc-area-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: AreaChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-area-chart",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[style.max-width.px]": "width()" },
+			template: "<div class=\"lc-area-chart\">\n  <svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-area-chart__svg\">\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @for (line of gridLines(); track line.y) {\n      <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-area-chart__grid\" />\n      @if (showYLabels()) {\n        <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-area-chart__axis-label\">{{ line.label }}</text>\n      }\n    }\n\n    <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-area-chart__axis\" />\n    <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-area-chart__axis\" />\n\n    @for (lbl of xLabelItems(); track lbl.x) {\n      <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"middle\" class=\"lc-area-chart__axis-label\">{{ lbl.label }}</text>\n    }\n\n    @for (ser of renderedSeries(); track $index) {\n      @if (ser.areaD) {\n        <path [attr.d]=\"ser.areaD\" [attr.fill]=\"ser.color\" [attr.opacity]=\"fillOpacity()\" class=\"lc-area-chart__area\" />\n      }\n      @if (ser.lineD) {\n        <path [attr.d]=\"ser.lineD\" [attr.stroke]=\"ser.color\" [attr.stroke-width]=\"strokeWidth()\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lc-area-chart__line\" />\n      }\n      @for (pt of ser.points; track $index) {\n        <circle [attr.cx]=\"pt.x\" [attr.cy]=\"pt.y\" r=\"3\" [attr.fill]=\"ser.color\" stroke=\"var(--color-surface)\" stroke-width=\"1.5\" class=\"lc-area-chart__dot\" />\n      }\n    }\n  </svg>\n\n  @if (legendItems().length) {\n    <div class=\"lc-area-chart__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-area-chart__legend-item\">\n          <span class=\"lc-area-chart__legend-swatch\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-area-chart__legend-text\">{{ item.label }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+			styles: [":host{display:block}.lc-area-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-area-chart__svg{overflow:visible}.lc-area-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-area-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-area-chart__axis-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-area-chart__dot{transition:r .15s ease}.lc-area-chart__dot:hover{r:5}.lc-area-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-area-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-area-chart__legend-swatch{width:.75rem;height:.75rem;border-radius:2px;flex-shrink:0}.lc-area-chart__legend-text{color:var(--color-text-secondary)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: true
+			}]
+		}],
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		strokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeWidth",
+				required: false
+			}]
+		}],
+		showDots: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDots",
+				required: false
+			}]
+		}],
+		showGrid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showGrid",
+				required: false
+			}]
+		}],
+		showXLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showXLabels",
+				required: false
+			}]
+		}],
+		showYLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showYLabels",
+				required: false
+			}]
+		}],
+		showLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLegend",
+				required: false
+			}]
+		}],
+		smooth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "smooth",
+				required: false
+			}]
+		}],
+		fillOpacity: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fillOpacity",
+				required: false
+			}]
+		}],
+		stacked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stacked",
+				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 { AreaChartComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-area-chart.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-area-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/area-chart/area-chart.component.ts","../../../../libs/angular-ui-kit/src/lib/area-chart/area-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 { linearPath, smoothPath } 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 AreaChartSeries {\n  label: string;\n  data: number[];\n  color?: string;\n}\n\n/** viewBox width used until the container has been measured. */\nconst DEFAULT_WIDTH = 400;\n\n@Component({\n  selector: 'lc-area-chart',\n  standalone: true,\n  templateUrl: './area-chart.component.html',\n  styleUrls: ['./area-chart.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[style.max-width.px]': 'width()',\n  },\n})\n/**\n * Area chart component for visualizing trends over time.\n *\n * Features:\n * - Multiple data series with stacking support\n * - Smooth or linear curve interpolation\n * - Configurable fill opacity for area shading\n * - Optional grid on a nice tick scale, axis labels, dots, and legend\n * - Responsive SVG rendering with configurable dimensions\n *\n * @example\n * ```html\n * <lc-area-chart [series]=\"data\" [labels]=\"months\" [showLegend]=\"true\" />\n * ```\n */\nexport class AreaChartComponent {\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  series = input.required<AreaChartSeries[]>();\n  labels = input<string[]>([]);\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  strokeWidth = input<number>(2);\n  showDots = input<boolean>(false);\n  showGrid = input<boolean>(true);\n  showXLabels = input<boolean>(true);\n  showYLabels = input<boolean>(true);\n  showLegend = input<boolean>(false);\n  smooth = input<boolean>(true);\n  /** Opacity for the filled area (0–1). */\n  fillOpacity = input<number>(0.2);\n  /** Stack areas on top of each other. */\n  stacked = input<boolean>(false);\n  /** Formats Y-axis tick labels. Defaults to a float-safe `String(value)`. */\n  formatValue = input<ChartValueFormatter>(formatChartValue);\n  /**\n   * Accessible name of the chart. Defaults to a generated summary naming each\n   * series with its point count and value range.\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 plotArea = computed(() => ({\n    x: this.PL, y: this.PT,\n    w: this.effectiveWidth() - this.PL - this.PR,\n    h: this.height() - this.PT - this.PB,\n  }));\n\n  private readonly cleanSeries = computed(() =>\n    (this.series() ?? []).map((ser) => ({\n      ...ser,\n      data: (ser.data ?? []).map((v) => toFinite(v)),\n    }))\n  );\n\n  protected readonly computedSeries = computed(() => {\n    const allSeries = this.cleanSeries();\n    if (!allSeries.length) return [];\n\n    if (this.stacked()) {\n      const maxLen = Math.max(...allSeries.map(s => s.data.length));\n      const stackedData: number[][] = [];\n      const cumulative = new Array(maxLen).fill(0);\n\n      for (const ser of allSeries) {\n        const row = ser.data.map((v, i) => {\n          cumulative[i] = (cumulative[i] || 0) + v;\n          return cumulative[i];\n        });\n        stackedData.push(row);\n      }\n      return allSeries.map((ser, i) => ({\n        ...ser,\n        computedData: stackedData[i],\n        prevData: i > 0 ? stackedData[i - 1] : null,\n      }));\n    }\n\n    return allSeries.map(ser => ({\n      ...ser,\n      computedData: ser.data,\n      prevData: null as number[] | null,\n    }));\n  });\n\n  protected readonly minValue = computed(() => {\n    if (this.stacked()) return 0;\n    const all = this.cleanSeries().flatMap(s => s.data);\n    return all.length ? Math.min(...all, 0) : 0;\n  });\n\n  protected readonly maxValue = computed(() => {\n    // Every series may be empty ([{ data: [] }]) — Math.max() of nothing is -Infinity.\n    const all = this.computedSeries().flatMap(s => s.computedData);\n    return all.length ? Math.max(...all) : 0;\n  });\n\n  /** Y scale with nice tick bounds; the plot edges sit on the outermost ticks. */\n  protected readonly scale = computed(() => niceScale(this.minValue(), this.maxValue(), 4));\n\n  private valueToY(value: number): number {\n    const { min, max } = this.scale();\n    const pa = this.plotArea();\n    return pa.y + pa.h - ((value - min) / (max - min || 1)) * pa.h;\n  }\n\n  protected readonly gridLines = computed(() => {\n    if (!this.showGrid()) return [];\n    const fmt = this.formatValue();\n    return this.scale().ticks.map((tick) => ({ y: this.valueToY(tick), label: fmt(tick) }));\n  });\n\n  protected readonly xLabelItems = computed(() => {\n    const lbls = this.labels();\n    if (!this.showXLabels() || !lbls.length) return [];\n    const pa = this.plotArea();\n    return lbls.map((l, i) => ({\n      x: pa.x + (lbls.length > 1 ? (i / (lbls.length - 1)) * pa.w : pa.w / 2),\n      y: this.height() - this.PB + 16,\n      label: l,\n    }));\n  });\n\n  private toPoints(data: number[]) {\n    const pa = this.plotArea();\n    return data.map((v, i) => ({\n      x: pa.x + (data.length > 1 ? (i / (data.length - 1)) * pa.w : pa.w / 2),\n      y: this.valueToY(v),\n    }));\n  }\n\n  protected readonly renderedSeries = computed(() => {\n    const cs = this.computedSeries();\n    const pa = this.plotArea();\n    const bottomY = pa.y + pa.h;\n    const smooth = this.smooth();\n\n    return cs.map((ser, si) => {\n      const color = ser.color || chartColor(si);\n      const points = this.toPoints(ser.computedData);\n      const lineD = smooth ? smoothPath(points) : linearPath(points);\n\n      let areaD = '';\n      if (lineD) {\n        if (ser.prevData) {\n          const prevPoints = this.toPoints(ser.prevData).reverse();\n          const prevPath = prevPoints.map((p) => `L${p.x},${p.y}`).join(' ');\n          areaD = `${lineD} ${prevPath} Z`;\n        } else {\n          const lastX = points[points.length - 1].x;\n          const firstX = points[0].x;\n          areaD = `${lineD} L${lastX},${bottomY} L${firstX},${bottomY} Z`;\n        }\n      }\n\n      return {\n        label: ser.label,\n        color,\n        lineD,\n        areaD,\n        points: this.showDots() ? points : [],\n      };\n    });\n  });\n\n  protected readonly axisLine = computed(() => {\n    const pa = this.plotArea();\n    return {\n      vx1: pa.x, vy1: pa.y, vx2: pa.x, vy2: pa.y + pa.h,\n      hx1: pa.x, hy1: pa.y + pa.h, hx2: pa.x + pa.w, hy2: pa.y + pa.h,\n    };\n  });\n\n  protected readonly legendItems = computed(() => {\n    if (!this.showLegend()) return [];\n    return this.renderedSeries().map(s => ({ label: s.label, color: s.color }));\n  });\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const series = this.cleanSeries();\n    if (!series.length) return 'Area chart: no data';\n    const fmt = this.formatValue();\n    const parts = series.map((s, i) => {\n      const name = s.label || `Series ${i + 1}`;\n      if (!s.data.length) return `${name} (no data)`;\n      const n = s.data.length;\n      return `${name} (${n} ${n === 1 ? 'point' : 'points'}, ${fmt(Math.min(...s.data))} to ${fmt(Math.max(...s.data))})`;\n    });\n    return `${this.stacked() ? 'Stacked area chart' : 'Area chart'}: ${parts.join(', ')}`;\n  });\n}\n","<div class=\"lc-area-chart\">\n  <svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-area-chart__svg\">\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @for (line of gridLines(); track line.y) {\n      <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-area-chart__grid\" />\n      @if (showYLabels()) {\n        <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-area-chart__axis-label\">{{ line.label }}</text>\n      }\n    }\n\n    <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-area-chart__axis\" />\n    <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-area-chart__axis\" />\n\n    @for (lbl of xLabelItems(); track lbl.x) {\n      <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"middle\" class=\"lc-area-chart__axis-label\">{{ lbl.label }}</text>\n    }\n\n    @for (ser of renderedSeries(); track $index) {\n      @if (ser.areaD) {\n        <path [attr.d]=\"ser.areaD\" [attr.fill]=\"ser.color\" [attr.opacity]=\"fillOpacity()\" class=\"lc-area-chart__area\" />\n      }\n      @if (ser.lineD) {\n        <path [attr.d]=\"ser.lineD\" [attr.stroke]=\"ser.color\" [attr.stroke-width]=\"strokeWidth()\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lc-area-chart__line\" />\n      }\n      @for (pt of ser.points; track $index) {\n        <circle [attr.cx]=\"pt.x\" [attr.cy]=\"pt.y\" r=\"3\" [attr.fill]=\"ser.color\" stroke=\"var(--color-surface)\" stroke-width=\"1.5\" class=\"lc-area-chart__dot\" />\n      }\n    }\n  </svg>\n\n  @if (legendItems().length) {\n    <div class=\"lc-area-chart__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-area-chart__legend-item\">\n          <span class=\"lc-area-chart__legend-swatch\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-area-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-avatar-group.mjs

@@ -0,0 +1,158 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { AvatarComponent } from "@lifecorner/angular-ui-kit/avatar";
+var AvatarGroupComponent = class AvatarGroupComponent {
+	avatars = input.required(...ngDevMode ? [{ debugName: "avatars" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	max = input(5, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	ring = input(false, ...ngDevMode ? [{ debugName: "ring" }] : /* istanbul ignore next */ []);
+	overlap = input("", ...ngDevMode ? [{ debugName: "overlap" }] : /* istanbul ignore next */ []);
+	visibleAvatars = computed(() => {
+		const all = this.avatars();
+		const limit = this.max();
+		return all.slice(0, limit);
+	}, ...ngDevMode ? [{ debugName: "visibleAvatars" }] : /* istanbul ignore next */ []);
+	overflowCount = computed(() => {
+		const all = this.avatars();
+		const limit = this.max();
+		return Math.max(0, all.length - limit);
+	}, ...ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []);
+	groupClasses = computed(() => {
+		const classes = ["avatar-group", `avatar-group--${this.size()}`];
+		if (this.ring()) classes.push("avatar-group--ring");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "groupClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: AvatarGroupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: AvatarGroupComponent,
+		isStandalone: true,
+		selector: "lc-avatar-group",
+		inputs: {
+			avatars: {
+				classPropertyName: "avatars",
+				publicName: "avatars",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ring: {
+				classPropertyName: "ring",
+				publicName: "ring",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			overlap: {
+				classPropertyName: "overlap",
+				publicName: "overlap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div [class]=\"groupClasses()\" [style.--lc-avatar-group-overlap]=\"overlap() || null\">\n  @for (avatar of visibleAvatars(); track avatar.name ?? $index) {\n    <lc-avatar\n      class=\"avatar-group__item\"\n      [src]=\"avatar.src\"\n      [alt]=\"avatar.alt\"\n      [name]=\"avatar.name\"\n      [size]=\"size()\"\n      [color]=\"avatar.color ?? 'default'\"\n      [ring]=\"ring()\"\n    />\n  }\n  @if (overflowCount() > 0) {\n    <span class=\"avatar-group__overflow avatar-group__overflow--{{ size() }}\">\n      +{{ overflowCount() }}\n    </span>\n  }\n</div>\n",
+		styles: [".avatar-group{--_overlap: .5rem;--_border: 2px;display:inline-flex;align-items:center;isolation:isolate}.avatar-group__item,.avatar-group__overflow{margin-left:calc(-1 * var(--lc-avatar-group-overlap, var(--_overlap)));border:var(--_border) solid var(--color-surface);border-radius:50%;position:relative}.avatar-group__item:first-child,.avatar-group__overflow:first-child{margin-left:0}.avatar-group__overflow{display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-surface-hover);color:var(--color-text-secondary);font-weight:var(--typography-font-weight-medium, 500);flex-shrink:0;-webkit-user-select:none;user-select:none}.avatar-group__overflow--xs{width:1.5rem;height:1.5rem;font-size:var(--typography-font-size-xs, .65rem)}.avatar-group__overflow--sm{width:2rem;height:2rem;font-size:var(--typography-font-size-xs, .75rem)}.avatar-group__overflow--md{width:2.5rem;height:2.5rem;font-size:var(--typography-font-size-sm, .875rem)}.avatar-group__overflow--lg{width:3rem;height:3rem;font-size:var(--typography-font-size-base, 1rem)}.avatar-group__overflow--xl{width:4rem;height:4rem;font-size:var(--typography-font-size-lg, 1.125rem)}.avatar-group--xs{--_overlap: .375rem;--_border: 1px}.avatar-group--sm{--_overlap: .5rem;--_border: 1.5px}.avatar-group--lg{--_overlap: .625rem}.avatar-group--xl{--_overlap: .75rem}.avatar-group--ring .avatar-group__item,.avatar-group--ring .avatar-group__overflow{border:0}.avatar-group--ring .avatar-group__overflow{box-shadow:0 0 0 var(--lc-avatar-ring-width, 3px) var(--lc-avatar-ring-color, var(--color-background))}.avatar-group--ring.avatar-group--xs .avatar-group__overflow,.avatar-group--ring.avatar-group--sm .avatar-group__overflow{box-shadow:0 0 0 var(--lc-avatar-ring-width, 2px) var(--lc-avatar-ring-color, var(--color-background))}\n"],
+		dependencies: [{
+			kind: "component",
+			type: AvatarComponent,
+			selector: "lc-avatar",
+			inputs: [
+				"src",
+				"alt",
+				"name",
+				"size",
+				"status",
+				"color",
+				"ring",
+				"decorative"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AvatarGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-avatar-group",
+			standalone: true,
+			imports: [AvatarComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div [class]=\"groupClasses()\" [style.--lc-avatar-group-overlap]=\"overlap() || null\">\n  @for (avatar of visibleAvatars(); track avatar.name ?? $index) {\n    <lc-avatar\n      class=\"avatar-group__item\"\n      [src]=\"avatar.src\"\n      [alt]=\"avatar.alt\"\n      [name]=\"avatar.name\"\n      [size]=\"size()\"\n      [color]=\"avatar.color ?? 'default'\"\n      [ring]=\"ring()\"\n    />\n  }\n  @if (overflowCount() > 0) {\n    <span class=\"avatar-group__overflow avatar-group__overflow--{{ size() }}\">\n      +{{ overflowCount() }}\n    </span>\n  }\n</div>\n",
+			styles: [".avatar-group{--_overlap: .5rem;--_border: 2px;display:inline-flex;align-items:center;isolation:isolate}.avatar-group__item,.avatar-group__overflow{margin-left:calc(-1 * var(--lc-avatar-group-overlap, var(--_overlap)));border:var(--_border) solid var(--color-surface);border-radius:50%;position:relative}.avatar-group__item:first-child,.avatar-group__overflow:first-child{margin-left:0}.avatar-group__overflow{display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-surface-hover);color:var(--color-text-secondary);font-weight:var(--typography-font-weight-medium, 500);flex-shrink:0;-webkit-user-select:none;user-select:none}.avatar-group__overflow--xs{width:1.5rem;height:1.5rem;font-size:var(--typography-font-size-xs, .65rem)}.avatar-group__overflow--sm{width:2rem;height:2rem;font-size:var(--typography-font-size-xs, .75rem)}.avatar-group__overflow--md{width:2.5rem;height:2.5rem;font-size:var(--typography-font-size-sm, .875rem)}.avatar-group__overflow--lg{width:3rem;height:3rem;font-size:var(--typography-font-size-base, 1rem)}.avatar-group__overflow--xl{width:4rem;height:4rem;font-size:var(--typography-font-size-lg, 1.125rem)}.avatar-group--xs{--_overlap: .375rem;--_border: 1px}.avatar-group--sm{--_overlap: .5rem;--_border: 1.5px}.avatar-group--lg{--_overlap: .625rem}.avatar-group--xl{--_overlap: .75rem}.avatar-group--ring .avatar-group__item,.avatar-group--ring .avatar-group__overflow{border:0}.avatar-group--ring .avatar-group__overflow{box-shadow:0 0 0 var(--lc-avatar-ring-width, 3px) var(--lc-avatar-ring-color, var(--color-background))}.avatar-group--ring.avatar-group--xs .avatar-group__overflow,.avatar-group--ring.avatar-group--sm .avatar-group__overflow{box-shadow:0 0 0 var(--lc-avatar-ring-width, 2px) var(--lc-avatar-ring-color, var(--color-background))}\n"]
+		}]
+	}],
+	propDecorators: {
+		avatars: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "avatars",
+				required: true
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		ring: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ring",
+				required: false
+			}]
+		}],
+		overlap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "overlap",
+				required: false
+			}]
+		}]
+	}
+});
+export { AvatarGroupComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-avatar-group.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-avatar-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-avatar-group.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/avatar-group/avatar-group.component.ts","../../../../libs/angular-ui-kit/src/lib/avatar-group/avatar-group.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\nimport { AvatarColor, AvatarComponent, AvatarSize } from '@lifecorner/angular-ui-kit/avatar';\n\nexport interface AvatarGroupItem {\n  /** Image source URL */\n  src?: string;\n  /** Alt text */\n  alt?: string;\n  /** Full name for initials fallback */\n  name?: string;\n  /** Background of the initials: `default` or a member colour `member-1` … `member-6` (see `lc-avatar`). */\n  color?: AvatarColor;\n}\n\n@Component({\n  selector: 'lc-avatar-group',\n  standalone: true,\n  imports: [AvatarComponent],\n  templateUrl: './avatar-group.component.html',\n  styleUrls: ['./avatar-group.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Avatar group component for displaying multiple user avatars.\n *\n * Features:\n * - Overlapping avatar display with configurable max visible count\n * - Overflow indicator showing remaining count\n * - Shared size variant across all avatars (xs, sm, md, lg)\n * - Automatic truncation based on max property\n * - Member colours per item (`color`), later avatars on top\n * - `ring`: each avatar gets a ring in the page colour instead of the surface\n *   border; with `overlap=\"4px\"` this is the \"Weite\" member row\n *\n * @example\n * ```html\n * <lc-avatar-group [avatars]=\"users\" [max]=\"5\" size=\"md\" />\n * <lc-avatar-group\n *   [avatars]=\"[{ name: 'Johanna Apfelbaum', color: 'member-1' }, { name: 'Tom Ek', color: 'member-2' }]\"\n *   [ring]=\"true\"\n *   overlap=\"4px\"\n * />\n * ```\n */\nexport class AvatarGroupComponent {\n  /** List of avatars to show */\n  avatars = input.required<AvatarGroupItem[]>();\n\n  /** Avatar size */\n  size = input<AvatarSize>('md');\n\n  /** Maximum visible avatars before showing overflow count */\n  max = input<number>(5);\n\n  /**\n   * Separate the avatars with a ring in the page colour\n   * (`--lc-avatar-ring-color`, default `--color-background`) instead of the\n   * 2 px surface border. Later avatars sit on top.\n   */\n  ring = input<boolean>(false);\n\n  /**\n   * How far each avatar overlaps the previous one, as a CSS length (e.g.\n   * `4px`). Empty keeps the size's default (6–12 px).\n   */\n  overlap = input<string>('');\n\n  protected visibleAvatars = computed(() => {\n    const all = this.avatars();\n    const limit = this.max();\n    return all.slice(0, limit);\n  });\n\n  protected overflowCount = computed(() => {\n    const all = this.avatars();\n    const limit = this.max();\n    return Math.max(0, all.length - limit);\n  });\n\n  protected groupClasses = computed(() => {\n    const classes = ['avatar-group', `avatar-group--${this.size()}`];\n    if (this.ring()) classes.push('avatar-group--ring');\n    return classes.join(' ');\n  });\n}\n","<div [class]=\"groupClasses()\" [style.--lc-avatar-group-overlap]=\"overlap() || null\">\n  @for (avatar of visibleAvatars(); track avatar.name ?? $index) {\n    <lc-avatar\n      class=\"avatar-group__item\"\n      [src]=\"avatar.src\"\n      [alt]=\"avatar.alt\"\n      [name]=\"avatar.name\"\n      [size]=\"size()\"\n      [color]=\"avatar.color ?? 'default'\"\n      [ring]=\"ring()\"\n    />\n  }\n  @if (overflowCount() > 0) {\n    <span class=\"avatar-group__overflow avatar-group__overflow--{{ size() }}\">\n      +{{ overflowCount() }}\n    </span>\n  }\n</div>\n"],"mappings":";;;AAiDA,IAAa,uBAAb,MAAa,qBAAoB;CAE/B,UAAU,MAAM,SAA6B,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG7C,OAAO,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAG9B,MAAM,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAOtB,OAAO,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAM5B,UAAU,MAAc,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEjB,iBAAiB,eAAc;EACvC,MAAM,MAAM,KAAK,QAAO;EACxB,MAAM,QAAQ,KAAK,IAAG;EACtB,OAAO,IAAI,MAAM,GAAG,KAAK;CAC3B,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,gBAAgB,eAAc;EACtC,MAAM,MAAM,KAAK,QAAO;EACxB,MAAM,QAAQ,KAAK,IAAG;EACtB,OAAO,KAAK,IAAI,GAAG,IAAI,SAAS,KAAK;CACvC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,eAAe,eAAc;EACrC,MAAM,UAAU,CAAC,gBAAgB,iBAAiB,KAAK,KAAI,GAAI;EAC/D,IAAI,KAAK,KAAI,GAAI,QAAQ,KAAK,oBAAoB;EAClD,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAvCS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCjDjC;EAkBA,QAAA,CAAA,6xDAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDIY;GAAe,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA2Bd,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EA9BhC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiB,YACf;GAAI,SACP,CAAC,eAAe;GAAC,iBAGT,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,6xDAAA;EAAA,CAAA"}