@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,314 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+var GanttChartComponent = class GanttChartComponent {
+	static nextId = 0;
+	markerId = `lc-gantt-arrowhead-${++GanttChartComponent.nextId}`;
+	tasks = input.required(...ngDevMode ? [{ debugName: "tasks" }] : /* istanbul ignore next */ []);
+	dependencies = input([], ...ngDevMode ? [{ debugName: "dependencies" }] : /* istanbul ignore next */ []);
+	rowHeight = input(40, ...ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []);
+	labelWidth = input(200, ...ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []);
+	dayWidth = input(36, ...ngDevMode ? [{ debugName: "dayWidth" }] : /* istanbul ignore next */ []);
+	showToday = input(true, ...ngDevMode ? [{ debugName: "showToday" }] : /* istanbul ignore next */ []);
+	locale = input("de-DE", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	labelsHeader = input("Aufgaben", ...ngDevMode ? [{ debugName: "labelsHeader" }] : /* istanbul ignore next */ []);
+	taskClick = output();
+	normalizedTasks = computed(() => this.tasks().map((t) => ({
+		id: t.id,
+		title: t.title,
+		start: t.start instanceof Date ? t.start : new Date(t.start),
+		end: t.end instanceof Date ? t.end : new Date(t.end),
+		progress: t.progress ?? 0,
+		color: t.color ?? "primary",
+		group: t.group ?? ""
+	})), ...ngDevMode ? [{ debugName: "normalizedTasks" }] : /* istanbul ignore next */ []);
+	timelineStart = computed(() => {
+		const tasks = this.normalizedTasks();
+		if (!tasks.length) return /* @__PURE__ */ new Date();
+		const min = Math.min(...tasks.map((t) => t.start.getTime()));
+		const d = new Date(min);
+		d.setDate(d.getDate() - 2);
+		return this.startOfDay(d);
+	}, ...ngDevMode ? [{ debugName: "timelineStart" }] : /* istanbul ignore next */ []);
+	timelineEnd = computed(() => {
+		const tasks = this.normalizedTasks();
+		if (!tasks.length) return /* @__PURE__ */ new Date();
+		const max = Math.max(...tasks.map((t) => t.end.getTime()));
+		const d = new Date(max);
+		d.setDate(d.getDate() + 3);
+		return this.startOfDay(d);
+	}, ...ngDevMode ? [{ debugName: "timelineEnd" }] : /* istanbul ignore next */ []);
+	totalDays = computed(() => {
+		const start = this.timelineStart();
+		const end = this.timelineEnd();
+		return Math.ceil((end.getTime() - start.getTime()) / 864e5) + 1;
+	}, ...ngDevMode ? [{ debugName: "totalDays" }] : /* istanbul ignore next */ []);
+	timelineWidth = computed(() => this.totalDays() * this.dayWidth(), ...ngDevMode ? [{ debugName: "timelineWidth" }] : /* istanbul ignore next */ []);
+	dayColumns = computed(() => {
+		const start = this.timelineStart();
+		const days = this.totalDays();
+		const dw = this.dayWidth();
+		return Array.from({ length: days }, (_, i) => {
+			const d = new Date(start);
+			d.setDate(d.getDate() + i);
+			return {
+				date: d,
+				left: i * dw,
+				label: d.getDate(),
+				isWeekend: d.getDay() === 0 || d.getDay() === 6,
+				monthLabel: d.getDate() === 1 ? d.toLocaleDateString(this.locale(), { month: "short" }) : null
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "dayColumns" }] : /* istanbul ignore next */ []);
+	monthHeaders = computed(() => {
+		const cols = this.dayColumns();
+		const dw = this.dayWidth();
+		const locale = this.locale();
+		const months = [];
+		let current = null;
+		for (const col of cols) {
+			const label = col.date.toLocaleDateString(locale, {
+				month: "short",
+				year: "numeric"
+			});
+			if (!current || current.label !== label) {
+				if (current) months.push({
+					label: current.label,
+					left: current.left,
+					width: current.count * dw
+				});
+				current = {
+					label,
+					left: col.left,
+					count: 1
+				};
+			} else current.count++;
+		}
+		if (current) months.push({
+			label: current.label,
+			left: current.left,
+			width: current.count * dw
+		});
+		return months;
+	}, ...ngDevMode ? [{ debugName: "monthHeaders" }] : /* istanbul ignore next */ []);
+	bars = computed(() => {
+		const tasks = this.normalizedTasks();
+		const start = this.timelineStart().getTime();
+		const dw = this.dayWidth();
+		const rh = this.rowHeight();
+		return tasks.map((t, i) => {
+			const dayOffset = (t.start.getTime() - start) / 864e5;
+			const duration = Math.max((t.end.getTime() - t.start.getTime()) / 864e5, 1);
+			return {
+				task: t,
+				left: dayOffset * dw,
+				width: duration * dw,
+				top: i * rh,
+				progress: Math.min(Math.max(t.progress, 0), 100),
+				colorClass: t.color
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []);
+	depLines = computed(() => {
+		const deps = this.dependencies();
+		const barsMap = /* @__PURE__ */ new Map();
+		for (const bar of this.bars()) barsMap.set(bar.task.id, bar);
+		const rh = this.rowHeight();
+		return deps.filter((d) => barsMap.has(d.from) && barsMap.has(d.to)).map((d) => {
+			const from = barsMap.get(d.from);
+			const to = barsMap.get(d.to);
+			return {
+				x1: from.left + from.width,
+				y1: from.top + rh / 2,
+				x2: to.left,
+				y2: to.top + rh / 2
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "depLines" }] : /* istanbul ignore next */ []);
+	todayLeft = computed(() => {
+		if (!this.showToday()) return -1;
+		const start = this.timelineStart().getTime();
+		const dayOffset = (this.startOfDay(/* @__PURE__ */ new Date()).getTime() - start) / 864e5;
+		if (dayOffset < 0 || dayOffset > this.totalDays()) return -1;
+		return dayOffset * this.dayWidth();
+	}, ...ngDevMode ? [{ debugName: "todayLeft" }] : /* istanbul ignore next */ []);
+	gridHeight = computed(() => this.normalizedTasks().length * this.rowHeight(), ...ngDevMode ? [{ debugName: "gridHeight" }] : /* istanbul ignore next */ []);
+	onTaskClick(task) {
+		this.taskClick.emit(this.tasks().find((t) => t.id === task.id));
+	}
+	onTaskKeydown(event, task) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.onTaskClick(task);
+		}
+	}
+	startOfDay(d) {
+		return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: GanttChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: GanttChartComponent,
+		isStandalone: true,
+		selector: "lc-gantt-chart",
+		inputs: {
+			tasks: {
+				classPropertyName: "tasks",
+				publicName: "tasks",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			dependencies: {
+				classPropertyName: "dependencies",
+				publicName: "dependencies",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rowHeight: {
+				classPropertyName: "rowHeight",
+				publicName: "rowHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelWidth: {
+				classPropertyName: "labelWidth",
+				publicName: "labelWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dayWidth: {
+				classPropertyName: "dayWidth",
+				publicName: "dayWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showToday: {
+				classPropertyName: "showToday",
+				publicName: "showToday",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelsHeader: {
+				classPropertyName: "labelsHeader",
+				publicName: "labelsHeader",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { taskClick: "taskClick" },
+		ngImport: i0,
+		template: "<div class=\"lc-gantt\">\n  <div class=\"lc-gantt__container\">\n    <!-- Left: Task labels -->\n    <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n      <div class=\"lc-gantt__labels-header\">{{ labelsHeader() }}</div>\n      @for (bar of bars(); track bar.task.id) {\n        <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n          <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n        </div>\n      }\n    </div>\n\n    <!-- Right: Timeline -->\n    <div class=\"lc-gantt__timeline-wrapper\">\n      <!-- Month headers -->\n      <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n        @for (mh of monthHeaders(); track mh.label + mh.left) {\n          <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n            {{ mh.label }}\n          </div>\n        }\n      </div>\n\n      <!-- Day headers -->\n      <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n        @for (col of dayColumns(); track col.left) {\n          <div\n            class=\"lc-gantt__day-cell\"\n            [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n            [style.left.px]=\"col.left\"\n            [style.width.px]=\"dayWidth()\"\n          >\n            {{ col.label }}\n          </div>\n        }\n      </div>\n\n      <!-- Grid + Bars -->\n      <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n        <!-- Weekend columns -->\n        @for (col of dayColumns(); track col.left) {\n          @if (col.isWeekend) {\n            <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n          }\n        }\n\n        <!-- Row borders -->\n        @for (bar of bars(); track bar.task.id) {\n          <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n        }\n\n        <!-- Today marker -->\n        @if (todayLeft() >= 0) {\n          <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n        }\n\n        <!-- Dependency lines SVG -->\n        @if (depLines().length) {\n          <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n            <defs>\n              <marker [attr.id]=\"markerId\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n                <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n              </marker>\n            </defs>\n            @for (dep of depLines(); track $index) {\n              <path\n                [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n                class=\"lc-gantt__dep-line\"\n                [attr.marker-end]=\"'url(#' + markerId + ')'\"\n              />\n            }\n          </svg>\n        }\n\n        <!-- Task bars -->\n        @for (bar of bars(); track bar.task.id) {\n          <div\n            [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n            role=\"button\"\n            tabindex=\"0\"\n            [style.left.px]=\"bar.left\"\n            [style.top.px]=\"bar.top + 8\"\n            [style.width.px]=\"bar.width\"\n            [style.height.px]=\"rowHeight() - 16\"\n            [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n            [attr.aria-label]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n            (click)=\"onTaskClick(bar.task)\"\n            (keydown)=\"onTaskKeydown($event, bar.task)\"\n          >\n            @if (bar.progress > 0) {\n              <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n            }\n            <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n",
+		styles: [":host{display:block}.lc-gantt{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface)}.lc-gantt__container{display:flex;overflow:auto}.lc-gantt__labels{flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-surface-2);position:sticky;left:0;z-index:3}.lc-gantt__labels-header{height:3.5rem;display:flex;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--color-border)}.lc-gantt__label-row{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--color-divider)}.lc-gantt__label-text{font-size:.8125rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__timeline-wrapper{flex:1;overflow:auto}.lc-gantt__month-row{display:flex;position:relative;height:1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__month-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:.5rem;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-left:1px solid var(--color-border)}.lc-gantt__day-row{display:flex;position:relative;height:2rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__day-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text-secondary);border-left:1px solid var(--color-divider)}.lc-gantt__day-cell--weekend{color:var(--color-text-tertiary);background:color-mix(in srgb,var(--color-border) 30%,transparent)}.lc-gantt__grid{position:relative;min-height:4rem}.lc-gantt__weekend-bg{position:absolute;top:0;background:color-mix(in srgb,var(--color-border) 20%,transparent)}.lc-gantt__row-line{position:absolute;left:0;right:0;height:1px;background:var(--color-divider)}.lc-gantt__today{position:absolute;top:0;width:2px;background:var(--color-error-default);z-index:2;opacity:.7}.lc-gantt__bar{position:absolute;border-radius:var(--border-radius-sm);cursor:pointer;overflow:hidden;display:flex;align-items:center;min-width:.25rem;transition:filter .15s}.lc-gantt__bar:hover{filter:brightness(1.1)}.lc-gantt__bar:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary-500);z-index:2}.lc-gantt__bar--primary{background:var(--color-primary-500)}.lc-gantt__bar--secondary{background:var(--color-secondary-500)}.lc-gantt__bar--success{background:var(--color-success-default)}.lc-gantt__bar--warning{background:var(--color-warning-default)}.lc-gantt__bar--error{background:var(--color-error-default)}.lc-gantt__bar--info{background:var(--color-info-default)}.lc-gantt__bar-progress{position:absolute;top:0;left:0;height:100%;background:#00000026;border-radius:.25rem 0 0 .25rem}.lc-gantt__bar-label{position:relative;z-index:1;padding:0 .375rem;font-size:.6875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__dep-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.lc-gantt__dep-line{fill:none;stroke:var(--color-border-strong);stroke-width:1.5}.lc-gantt__arrow{fill:var(--color-text-tertiary)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: GanttChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-gantt-chart",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"lc-gantt\">\n  <div class=\"lc-gantt__container\">\n    <!-- Left: Task labels -->\n    <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n      <div class=\"lc-gantt__labels-header\">{{ labelsHeader() }}</div>\n      @for (bar of bars(); track bar.task.id) {\n        <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n          <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n        </div>\n      }\n    </div>\n\n    <!-- Right: Timeline -->\n    <div class=\"lc-gantt__timeline-wrapper\">\n      <!-- Month headers -->\n      <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n        @for (mh of monthHeaders(); track mh.label + mh.left) {\n          <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n            {{ mh.label }}\n          </div>\n        }\n      </div>\n\n      <!-- Day headers -->\n      <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n        @for (col of dayColumns(); track col.left) {\n          <div\n            class=\"lc-gantt__day-cell\"\n            [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n            [style.left.px]=\"col.left\"\n            [style.width.px]=\"dayWidth()\"\n          >\n            {{ col.label }}\n          </div>\n        }\n      </div>\n\n      <!-- Grid + Bars -->\n      <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n        <!-- Weekend columns -->\n        @for (col of dayColumns(); track col.left) {\n          @if (col.isWeekend) {\n            <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n          }\n        }\n\n        <!-- Row borders -->\n        @for (bar of bars(); track bar.task.id) {\n          <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n        }\n\n        <!-- Today marker -->\n        @if (todayLeft() >= 0) {\n          <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n        }\n\n        <!-- Dependency lines SVG -->\n        @if (depLines().length) {\n          <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n            <defs>\n              <marker [attr.id]=\"markerId\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n                <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n              </marker>\n            </defs>\n            @for (dep of depLines(); track $index) {\n              <path\n                [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n                class=\"lc-gantt__dep-line\"\n                [attr.marker-end]=\"'url(#' + markerId + ')'\"\n              />\n            }\n          </svg>\n        }\n\n        <!-- Task bars -->\n        @for (bar of bars(); track bar.task.id) {\n          <div\n            [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n            role=\"button\"\n            tabindex=\"0\"\n            [style.left.px]=\"bar.left\"\n            [style.top.px]=\"bar.top + 8\"\n            [style.width.px]=\"bar.width\"\n            [style.height.px]=\"rowHeight() - 16\"\n            [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n            [attr.aria-label]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n            (click)=\"onTaskClick(bar.task)\"\n            (keydown)=\"onTaskKeydown($event, bar.task)\"\n          >\n            @if (bar.progress > 0) {\n              <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n            }\n            <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n",
+			styles: [":host{display:block}.lc-gantt{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:var(--border-radius-md);overflow:hidden;background:var(--color-surface)}.lc-gantt__container{display:flex;overflow:auto}.lc-gantt__labels{flex-shrink:0;border-right:2px solid var(--color-border);background:var(--color-surface-2);position:sticky;left:0;z-index:3}.lc-gantt__labels-header{height:3.5rem;display:flex;align-items:center;padding:0 .75rem;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em;border-bottom:1px solid var(--color-border)}.lc-gantt__label-row{display:flex;align-items:center;padding:0 .75rem;border-bottom:1px solid var(--color-divider)}.lc-gantt__label-text{font-size:.8125rem;font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__timeline-wrapper{flex:1;overflow:auto}.lc-gantt__month-row{display:flex;position:relative;height:1.5rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__month-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;padding-left:.5rem;font-size:.6875rem;font-weight:600;color:var(--color-text-secondary);border-left:1px solid var(--color-border)}.lc-gantt__day-row{display:flex;position:relative;height:2rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-gantt__day-cell{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:.625rem;color:var(--color-text-secondary);border-left:1px solid var(--color-divider)}.lc-gantt__day-cell--weekend{color:var(--color-text-tertiary);background:color-mix(in srgb,var(--color-border) 30%,transparent)}.lc-gantt__grid{position:relative;min-height:4rem}.lc-gantt__weekend-bg{position:absolute;top:0;background:color-mix(in srgb,var(--color-border) 20%,transparent)}.lc-gantt__row-line{position:absolute;left:0;right:0;height:1px;background:var(--color-divider)}.lc-gantt__today{position:absolute;top:0;width:2px;background:var(--color-error-default);z-index:2;opacity:.7}.lc-gantt__bar{position:absolute;border-radius:var(--border-radius-sm);cursor:pointer;overflow:hidden;display:flex;align-items:center;min-width:.25rem;transition:filter .15s}.lc-gantt__bar:hover{filter:brightness(1.1)}.lc-gantt__bar:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary-500);z-index:2}.lc-gantt__bar--primary{background:var(--color-primary-500)}.lc-gantt__bar--secondary{background:var(--color-secondary-500)}.lc-gantt__bar--success{background:var(--color-success-default)}.lc-gantt__bar--warning{background:var(--color-warning-default)}.lc-gantt__bar--error{background:var(--color-error-default)}.lc-gantt__bar--info{background:var(--color-info-default)}.lc-gantt__bar-progress{position:absolute;top:0;left:0;height:100%;background:#00000026;border-radius:.25rem 0 0 .25rem}.lc-gantt__bar-label{position:relative;z-index:1;padding:0 .375rem;font-size:.6875rem;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-gantt__dep-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.lc-gantt__dep-line{fill:none;stroke:var(--color-border-strong);stroke-width:1.5}.lc-gantt__arrow{fill:var(--color-text-tertiary)}\n"]
+		}]
+	}],
+	propDecorators: {
+		tasks: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tasks",
+				required: true
+			}]
+		}],
+		dependencies: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dependencies",
+				required: false
+			}]
+		}],
+		rowHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowHeight",
+				required: false
+			}]
+		}],
+		labelWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelWidth",
+				required: false
+			}]
+		}],
+		dayWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dayWidth",
+				required: false
+			}]
+		}],
+		showToday: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showToday",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		labelsHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelsHeader",
+				required: false
+			}]
+		}],
+		taskClick: [{
+			type: i0.Output,
+			args: ["taskClick"]
+		}]
+	}
+});
+export { GanttChartComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-gantt-chart.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-gantt-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/gantt-chart/gantt-chart.component.ts","../../../../libs/angular-ui-kit/src/lib/gantt-chart/gantt-chart.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n  computed,\n} from '@angular/core';\n\nexport interface GanttDependency {\n  from: string;\n  to: string;\n}\n\nexport interface GanttTask {\n  id: string;\n  title: string;\n  start: Date | string;\n  end: Date | string;\n  progress?: number;\n  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\n  group?: string;\n}\n\ninterface NormalizedTask {\n  id: string;\n  title: string;\n  start: Date;\n  end: Date;\n  progress: number;\n  color: string;\n  group: string;\n}\n\ninterface BarLayout {\n  task: NormalizedTask;\n  left: number;\n  width: number;\n  top: number;\n  progress: number;\n  colorClass: string;\n}\n\ninterface DepLine {\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n}\n\n@Component({\n  selector: 'lc-gantt-chart',\n  standalone: true,\n  templateUrl: './gantt-chart.component.html',\n  styleUrls: ['./gantt-chart.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Gantt chart component for project timeline visualization.\n *\n * Features:\n * - Task bars with progress indicators\n * - Dependency lines with Bézier curves and arrowheads\n * - Monthly and daily header timeline\n * - Today marker line\n * - Weekend highlighting\n * - Configurable row height, label width, day width, locale and label header\n * - Task click event handling (bars are focusable, Enter / Space activate)\n *\n * @example\n * ```html\n * <lc-gantt-chart [tasks]=\"tasks\" [dependencies]=\"deps\" [showToday]=\"true\" />\n * ```\n */\nexport class GanttChartComponent {\n  private static nextId = 0;\n\n  /**\n   * Per-instance id for the SVG arrowhead marker. `<marker id>` is document\n   * global, so two charts on one page must not share it.\n   */\n  protected readonly markerId = `lc-gantt-arrowhead-${++GanttChartComponent.nextId}`;\n\n  /** Tasks to display. */\n  tasks = input.required<GanttTask[]>();\n\n  /** Dependency links between tasks. */\n  dependencies = input<GanttDependency[]>([]);\n\n  /** Row height in px. */\n  rowHeight = input<number>(40);\n\n  /** Width of the label column in px. */\n  labelWidth = input<number>(200);\n\n  /** Column width per day in px. */\n  dayWidth = input<number>(36);\n\n  /** Show today marker. */\n  showToday = input<boolean>(true);\n\n  /** BCP 47 locale used for the month header labels. */\n  locale = input<string>('de-DE');\n\n  /** Header text of the task label column. */\n  labelsHeader = input<string>('Aufgaben');\n\n  /** Emits when a task bar is clicked / activated via keyboard. */\n  taskClick = output<GanttTask>();\n\n  private readonly normalizedTasks = computed((): NormalizedTask[] =>\n    this.tasks().map(t => ({\n      id: t.id,\n      title: t.title,\n      start: t.start instanceof Date ? t.start : new Date(t.start),\n      end: t.end instanceof Date ? t.end : new Date(t.end),\n      progress: t.progress ?? 0,\n      color: t.color ?? 'primary',\n      group: t.group ?? '',\n    }))\n  );\n\n  protected readonly timelineStart = computed(() => {\n    const tasks = this.normalizedTasks();\n    if (!tasks.length) return new Date();\n    const min = Math.min(...tasks.map(t => t.start.getTime()));\n    const d = new Date(min);\n    d.setDate(d.getDate() - 2);\n    return this.startOfDay(d);\n  });\n\n  protected readonly timelineEnd = computed(() => {\n    const tasks = this.normalizedTasks();\n    if (!tasks.length) return new Date();\n    const max = Math.max(...tasks.map(t => t.end.getTime()));\n    const d = new Date(max);\n    d.setDate(d.getDate() + 3);\n    return this.startOfDay(d);\n  });\n\n  protected readonly totalDays = computed(() => {\n    const start = this.timelineStart();\n    const end = this.timelineEnd();\n    return Math.ceil((end.getTime() - start.getTime()) / 86400000) + 1;\n  });\n\n  protected readonly timelineWidth = computed(() => this.totalDays() * this.dayWidth());\n\n  protected readonly dayColumns = computed(() => {\n    const start = this.timelineStart();\n    const days = this.totalDays();\n    const dw = this.dayWidth();\n    return Array.from({ length: days }, (_, i) => {\n      const d = new Date(start);\n      d.setDate(d.getDate() + i);\n      return {\n        date: d,\n        left: i * dw,\n        label: d.getDate(),\n        isWeekend: d.getDay() === 0 || d.getDay() === 6,\n        monthLabel: d.getDate() === 1 ? d.toLocaleDateString(this.locale(), { month: 'short' }) : null,\n      };\n    });\n  });\n\n  protected readonly monthHeaders = computed(() => {\n    const cols = this.dayColumns();\n    const dw = this.dayWidth();\n    const locale = this.locale();\n    const months: { label: string; left: number; width: number }[] = [];\n    let current: { label: string; left: number; count: number } | null = null;\n\n    for (const col of cols) {\n      const label = col.date.toLocaleDateString(locale, { month: 'short', year: 'numeric' });\n      if (!current || current.label !== label) {\n        if (current) months.push({ label: current.label, left: current.left, width: current.count * dw });\n        current = { label, left: col.left, count: 1 };\n      } else {\n        current.count++;\n      }\n    }\n    if (current) months.push({ label: current.label, left: current.left, width: current.count * dw });\n    return months;\n  });\n\n  protected readonly bars = computed((): BarLayout[] => {\n    const tasks = this.normalizedTasks();\n    const start = this.timelineStart().getTime();\n    const dw = this.dayWidth();\n    const rh = this.rowHeight();\n\n    return tasks.map((t, i) => {\n      const dayOffset = (t.start.getTime() - start) / 86400000;\n      const duration = Math.max((t.end.getTime() - t.start.getTime()) / 86400000, 1);\n      return {\n        task: t,\n        left: dayOffset * dw,\n        width: duration * dw,\n        top: i * rh,\n        progress: Math.min(Math.max(t.progress, 0), 100),\n        colorClass: t.color,\n      };\n    });\n  });\n\n  protected readonly depLines = computed((): DepLine[] => {\n    const deps = this.dependencies();\n    const barsMap = new Map<string, BarLayout>();\n    for (const bar of this.bars()) barsMap.set(bar.task.id, bar);\n    const rh = this.rowHeight();\n\n    return deps\n      .filter(d => barsMap.has(d.from) && barsMap.has(d.to))\n      .map(d => {\n        const from = barsMap.get(d.from)!;\n        const to = barsMap.get(d.to)!;\n        return {\n          x1: from.left + from.width,\n          y1: from.top + rh / 2,\n          x2: to.left,\n          y2: to.top + rh / 2,\n        };\n      });\n  });\n\n  protected readonly todayLeft = computed(() => {\n    if (!this.showToday()) return -1;\n    const start = this.timelineStart().getTime();\n    const now = this.startOfDay(new Date()).getTime();\n    const dayOffset = (now - start) / 86400000;\n    if (dayOffset < 0 || dayOffset > this.totalDays()) return -1;\n    return dayOffset * this.dayWidth();\n  });\n\n  protected readonly gridHeight = computed(() => this.normalizedTasks().length * this.rowHeight());\n\n  protected onTaskClick(task: NormalizedTask): void {\n    this.taskClick.emit(this.tasks().find(t => t.id === task.id)!);\n  }\n\n  protected onTaskKeydown(event: KeyboardEvent, task: NormalizedTask): void {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.onTaskClick(task);\n    }\n  }\n\n  private startOfDay(d: Date): Date {\n    return new Date(d.getFullYear(), d.getMonth(), d.getDate());\n  }\n}\n","<div class=\"lc-gantt\">\n  <div class=\"lc-gantt__container\">\n    <!-- Left: Task labels -->\n    <div class=\"lc-gantt__labels\" [style.width.px]=\"labelWidth()\">\n      <div class=\"lc-gantt__labels-header\">{{ labelsHeader() }}</div>\n      @for (bar of bars(); track bar.task.id) {\n        <div class=\"lc-gantt__label-row\" [style.height.px]=\"rowHeight()\">\n          <span class=\"lc-gantt__label-text\" [title]=\"bar.task.title\">{{ bar.task.title }}</span>\n        </div>\n      }\n    </div>\n\n    <!-- Right: Timeline -->\n    <div class=\"lc-gantt__timeline-wrapper\">\n      <!-- Month headers -->\n      <div class=\"lc-gantt__month-row\" [style.width.px]=\"timelineWidth()\">\n        @for (mh of monthHeaders(); track mh.label + mh.left) {\n          <div class=\"lc-gantt__month-cell\" [style.left.px]=\"mh.left\" [style.width.px]=\"mh.width\">\n            {{ mh.label }}\n          </div>\n        }\n      </div>\n\n      <!-- Day headers -->\n      <div class=\"lc-gantt__day-row\" [style.width.px]=\"timelineWidth()\">\n        @for (col of dayColumns(); track col.left) {\n          <div\n            class=\"lc-gantt__day-cell\"\n            [class.lc-gantt__day-cell--weekend]=\"col.isWeekend\"\n            [style.left.px]=\"col.left\"\n            [style.width.px]=\"dayWidth()\"\n          >\n            {{ col.label }}\n          </div>\n        }\n      </div>\n\n      <!-- Grid + Bars -->\n      <div class=\"lc-gantt__grid\" [style.width.px]=\"timelineWidth()\" [style.height.px]=\"gridHeight()\">\n        <!-- Weekend columns -->\n        @for (col of dayColumns(); track col.left) {\n          @if (col.isWeekend) {\n            <div class=\"lc-gantt__weekend-bg\" [style.left.px]=\"col.left\" [style.width.px]=\"dayWidth()\" [style.height.px]=\"gridHeight()\"></div>\n          }\n        }\n\n        <!-- Row borders -->\n        @for (bar of bars(); track bar.task.id) {\n          <div class=\"lc-gantt__row-line\" [style.top.px]=\"bar.top + rowHeight()\"></div>\n        }\n\n        <!-- Today marker -->\n        @if (todayLeft() >= 0) {\n          <div class=\"lc-gantt__today\" [style.left.px]=\"todayLeft()\" [style.height.px]=\"gridHeight()\"></div>\n        }\n\n        <!-- Dependency lines SVG -->\n        @if (depLines().length) {\n          <svg class=\"lc-gantt__dep-svg\" [attr.width]=\"timelineWidth()\" [attr.height]=\"gridHeight()\">\n            <defs>\n              <marker [attr.id]=\"markerId\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n                <path d=\"M0,0 L8,3 L0,6 Z\" class=\"lc-gantt__arrow\" />\n              </marker>\n            </defs>\n            @for (dep of depLines(); track $index) {\n              <path\n                [attr.d]=\"'M' + dep.x1 + ',' + dep.y1 + ' C' + (dep.x1 + 20) + ',' + dep.y1 + ' ' + (dep.x2 - 20) + ',' + dep.y2 + ' ' + dep.x2 + ',' + dep.y2\"\n                class=\"lc-gantt__dep-line\"\n                [attr.marker-end]=\"'url(#' + markerId + ')'\"\n              />\n            }\n          </svg>\n        }\n\n        <!-- Task bars -->\n        @for (bar of bars(); track bar.task.id) {\n          <div\n            [class]=\"'lc-gantt__bar lc-gantt__bar--' + bar.colorClass\"\n            role=\"button\"\n            tabindex=\"0\"\n            [style.left.px]=\"bar.left\"\n            [style.top.px]=\"bar.top + 8\"\n            [style.width.px]=\"bar.width\"\n            [style.height.px]=\"rowHeight() - 16\"\n            [title]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n            [attr.aria-label]=\"bar.task.title + ' (' + bar.progress + '%)'\"\n            (click)=\"onTaskClick(bar.task)\"\n            (keydown)=\"onTaskKeydown($event, bar.task)\"\n          >\n            @if (bar.progress > 0) {\n              <div class=\"lc-gantt__bar-progress\" [style.width.%]=\"bar.progress\"></div>\n            }\n            <span class=\"lc-gantt__bar-label\">{{ bar.task.title }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n"],"mappings":"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"}

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

@@ -0,0 +1,265 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { toFinite } from "@lifecorner/angular-ui-kit/internal/chart";
+var GaugeComponent = class GaugeComponent {
+	value = input(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	max = input(100, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	color = input("primary", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	suffix = input("%", ...ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []);
+	showValue = input(true, ...ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []);
+	formatValue = input(null, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	SIZE_MAP = {
+		sm: 100,
+		md: 160,
+		lg: 220
+	};
+	svgSize = computed(() => this.SIZE_MAP[this.size()], ...ngDevMode ? [{ debugName: "svgSize" }] : /* istanbul ignore next */ []);
+	svgHeight = computed(() => {
+		const s = this.svgSize();
+		const sw = this.strokeW();
+		return sw + (s - sw * 2) / 2 + 36;
+	}, ...ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []);
+	viewBox = computed(() => {
+		return `0 0 ${this.svgSize()} ${this.svgHeight()}`;
+	}, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	cx = computed(() => this.svgSize() / 2, ...ngDevMode ? [{ debugName: "cx" }] : /* istanbul ignore next */ []);
+	cy = computed(() => {
+		const sw = this.strokeW();
+		return sw + (this.svgSize() - sw * 2) / 2;
+	}, ...ngDevMode ? [{ debugName: "cy" }] : /* istanbul ignore next */ []);
+	radius = computed(() => (this.svgSize() - this.strokeW() * 2) / 2, ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
+	strokeW = computed(() => {
+		return {
+			sm: 8,
+			md: 12,
+			lg: 16
+		}[this.size()];
+	}, ...ngDevMode ? [{ debugName: "strokeW" }] : /* istanbul ignore next */ []);
+	fraction = computed(() => {
+		const m = toFinite(this.max()) || 1;
+		return Math.min(Math.max(toFinite(this.value()) / m, 0), 1);
+	}, ...ngDevMode ? [{ debugName: "fraction" }] : /* istanbul ignore next */ []);
+	trackD = computed(() => {
+		const r = this.radius();
+		const cxv = this.cx();
+		const cyv = this.cy();
+		return `M${cxv - r},${cyv} A${r},${r} 0 0 1 ${cxv + r},${cyv}`;
+	}, ...ngDevMode ? [{ debugName: "trackD" }] : /* istanbul ignore next */ []);
+	valueD = computed(() => {
+		const r = this.radius();
+		const cxv = this.cx();
+		const cyv = this.cy();
+		const f = this.fraction();
+		if (f <= 0) return "";
+		const angle = Math.PI * f;
+		const x = cxv - r * Math.cos(angle);
+		const y = cyv - r * Math.sin(angle);
+		return `M${cxv - r},${cyv} A${r},${r} 0 0 1 ${x},${y}`;
+	}, ...ngDevMode ? [{ debugName: "valueD" }] : /* istanbul ignore next */ []);
+	formatted(value) {
+		const fmt = this.formatValue();
+		return fmt ? fmt(value) : `${Math.round(toFinite(value))}${this.suffix()}`;
+	}
+	displayValue = computed(() => this.formatted(this.value()), ...ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []);
+	effectiveAriaLabel = computed(() => {
+		const explicit = this.ariaLabel();
+		if (explicit) return explicit;
+		const label = this.label();
+		const summary = `${this.displayValue()} of ${this.formatted(this.max())}`;
+		return label ? `${label}: ${summary}` : `Gauge: ${summary}`;
+	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
+	valueFontSize = computed(() => {
+		return {
+			sm: "1rem",
+			md: "1.5rem",
+			lg: "2rem"
+		}[this.size()];
+	}, ...ngDevMode ? [{ debugName: "valueFontSize" }] : /* istanbul ignore next */ []);
+	labelFontSize = computed(() => {
+		return {
+			sm: "0.625rem",
+			md: "0.75rem",
+			lg: "0.875rem"
+		}[this.size()];
+	}, ...ngDevMode ? [{ debugName: "labelFontSize" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: GaugeComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: GaugeComponent,
+		isStandalone: true,
+		selector: "lc-gauge",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			suffix: {
+				classPropertyName: "suffix",
+				publicName: "suffix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValue: {
+				classPropertyName: "showValue",
+				publicName: "showValue",
+				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
+			}
+		},
+		ngImport: i0,
+		template: "<svg\n  [attr.width]=\"svgSize()\"\n  [attr.height]=\"svgHeight()\"\n  [attr.viewBox]=\"viewBox()\"\n  class=\"lc-gauge\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  <path\n    [attr.d]=\"trackD()\"\n    [attr.stroke-width]=\"strokeW()\"\n    fill=\"none\"\n    stroke-linecap=\"round\"\n    class=\"lc-gauge__track\"\n  />\n\n  @if (valueD()) {\n    <path\n      [attr.d]=\"valueD()\"\n      [attr.stroke-width]=\"strokeW()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n      [class]=\"'lc-gauge__value-arc lc-gauge__value-arc--' + color()\"\n    />\n  }\n\n  @if (showValue()) {\n    <text\n      [attr.x]=\"cx()\"\n      [attr.y]=\"cy() + 8\"\n      text-anchor=\"middle\"\n      dominant-baseline=\"auto\"\n      class=\"lc-gauge__value-text\"\n      [style.font-size]=\"valueFontSize()\"\n    >\n      {{ displayValue() }}\n    </text>\n  }\n\n  @if (label()) {\n    <text\n      [attr.x]=\"cx()\"\n      [attr.y]=\"cy() + 24\"\n      text-anchor=\"middle\"\n      dominant-baseline=\"auto\"\n      class=\"lc-gauge__label\"\n      [style.font-size]=\"labelFontSize()\"\n    >\n      {{ label() }}\n    </text>\n  }\n</svg>\n",
+		styles: [":host{display:inline-block}.lc-gauge{overflow:visible}.lc-gauge__track{stroke:var(--color-border)}.lc-gauge__value-arc--primary{stroke:var(--color-primary-500)}.lc-gauge__value-arc--secondary{stroke:var(--color-secondary-500)}.lc-gauge__value-arc--success{stroke:var(--color-success-default)}.lc-gauge__value-arc--warning{stroke:var(--color-warning-default)}.lc-gauge__value-arc--error{stroke:var(--color-error-default)}.lc-gauge__value-arc--info{stroke:var(--color-info-default)}.lc-gauge__value-text{font-weight:700;fill:var(--color-text-primary)}.lc-gauge__label{fill:var(--color-text-tertiary);font-weight:500}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: GaugeComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-gauge",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<svg\n  [attr.width]=\"svgSize()\"\n  [attr.height]=\"svgHeight()\"\n  [attr.viewBox]=\"viewBox()\"\n  class=\"lc-gauge\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  <path\n    [attr.d]=\"trackD()\"\n    [attr.stroke-width]=\"strokeW()\"\n    fill=\"none\"\n    stroke-linecap=\"round\"\n    class=\"lc-gauge__track\"\n  />\n\n  @if (valueD()) {\n    <path\n      [attr.d]=\"valueD()\"\n      [attr.stroke-width]=\"strokeW()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n      [class]=\"'lc-gauge__value-arc lc-gauge__value-arc--' + color()\"\n    />\n  }\n\n  @if (showValue()) {\n    <text\n      [attr.x]=\"cx()\"\n      [attr.y]=\"cy() + 8\"\n      text-anchor=\"middle\"\n      dominant-baseline=\"auto\"\n      class=\"lc-gauge__value-text\"\n      [style.font-size]=\"valueFontSize()\"\n    >\n      {{ displayValue() }}\n    </text>\n  }\n\n  @if (label()) {\n    <text\n      [attr.x]=\"cx()\"\n      [attr.y]=\"cy() + 24\"\n      text-anchor=\"middle\"\n      dominant-baseline=\"auto\"\n      class=\"lc-gauge__label\"\n      [style.font-size]=\"labelFontSize()\"\n    >\n      {{ label() }}\n    </text>\n  }\n</svg>\n",
+			styles: [":host{display:inline-block}.lc-gauge{overflow:visible}.lc-gauge__track{stroke:var(--color-border)}.lc-gauge__value-arc--primary{stroke:var(--color-primary-500)}.lc-gauge__value-arc--secondary{stroke:var(--color-secondary-500)}.lc-gauge__value-arc--success{stroke:var(--color-success-default)}.lc-gauge__value-arc--warning{stroke:var(--color-warning-default)}.lc-gauge__value-arc--error{stroke:var(--color-error-default)}.lc-gauge__value-arc--info{stroke:var(--color-info-default)}.lc-gauge__value-text{font-weight:700;fill:var(--color-text-primary)}.lc-gauge__label{fill:var(--color-text-tertiary);font-weight:500}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		suffix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suffix",
+				required: false
+			}]
+		}],
+		showValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValue",
+				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 { GaugeComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-gauge.mjs.map