@life-cockpit/angular-ui-kit 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9283,6 +9283,8 @@ class LineChartComponent {
|
|
|
9283
9283
|
showLegend = input(false, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
|
|
9284
9284
|
/** Use smooth curves. */
|
|
9285
9285
|
smooth = input(true, ...(ngDevMode ? [{ debugName: "smooth" }] : /* istanbul ignore next */ []));
|
|
9286
|
+
/** Force a minimum Y value (e.g. 0 for cost charts to avoid negative baseline). */
|
|
9287
|
+
yMin = input(null, ...(ngDevMode ? [{ debugName: "yMin" }] : /* istanbul ignore next */ []));
|
|
9286
9288
|
PL = 40;
|
|
9287
9289
|
PR = 10;
|
|
9288
9290
|
PT = 10;
|
|
@@ -9292,7 +9294,11 @@ class LineChartComponent {
|
|
|
9292
9294
|
const s = this.series();
|
|
9293
9295
|
return s.flatMap((ser) => ser.data);
|
|
9294
9296
|
}, ...(ngDevMode ? [{ debugName: "allValues" }] : /* istanbul ignore next */ []));
|
|
9295
|
-
minValue = computed(() =>
|
|
9297
|
+
minValue = computed(() => {
|
|
9298
|
+
const dataMin = this.allValues().length ? Math.min(...this.allValues()) : 0;
|
|
9299
|
+
const forced = this.yMin();
|
|
9300
|
+
return forced !== null ? Math.min(forced, dataMin) : dataMin;
|
|
9301
|
+
}, ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
|
|
9296
9302
|
maxValue = computed(() => this.allValues().length ? Math.max(...this.allValues()) : 0, ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
|
|
9297
9303
|
maxDataLength = computed(() => Math.max(...this.series().map((s) => s.data.length), 0), ...(ngDevMode ? [{ debugName: "maxDataLength" }] : /* istanbul ignore next */ []));
|
|
9298
9304
|
plotArea = computed(() => ({
|
|
@@ -9313,7 +9319,7 @@ class LineChartComponent {
|
|
|
9313
9319
|
for (let i = 0; i <= steps; i++) {
|
|
9314
9320
|
const val = min + (i / steps) * range;
|
|
9315
9321
|
const y = pa.y + pa.h - (i / steps) * pa.h;
|
|
9316
|
-
lines.push({ y, label:
|
|
9322
|
+
lines.push({ y, label: this.fmtY(val) });
|
|
9317
9323
|
}
|
|
9318
9324
|
return lines;
|
|
9319
9325
|
}, ...(ngDevMode ? [{ debugName: "gridLines" }] : /* istanbul ignore next */ []));
|
|
@@ -9394,13 +9400,29 @@ class LineChartComponent {
|
|
|
9394
9400
|
color: s.color,
|
|
9395
9401
|
}));
|
|
9396
9402
|
}, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
9403
|
+
_clipId = `lc-chart-clip-${Math.random().toString(36).slice(2)}`;
|
|
9404
|
+
clipId = () => this._clipId;
|
|
9405
|
+
fmtY(val) {
|
|
9406
|
+
if (val === 0)
|
|
9407
|
+
return '0';
|
|
9408
|
+
const abs = Math.abs(val);
|
|
9409
|
+
if (abs < 0.001)
|
|
9410
|
+
return val.toFixed(4);
|
|
9411
|
+
if (abs < 0.01)
|
|
9412
|
+
return val.toFixed(3);
|
|
9413
|
+
if (abs < 0.1)
|
|
9414
|
+
return val.toFixed(2);
|
|
9415
|
+
if (abs < 10)
|
|
9416
|
+
return val.toFixed(1);
|
|
9417
|
+
return String(Math.round(val));
|
|
9418
|
+
}
|
|
9397
9419
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9398
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LineChartComponent, isStandalone: true, selector: "lc-line-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 }, filled: { classPropertyName: "filled", publicName: "filled", 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 } }, ngImport: i0, template: "<div class=\"lc-line-chart\">\n <svg\n
|
|
9420
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: LineChartComponent, isStandalone: true, selector: "lc-line-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 }, filled: { classPropertyName: "filled", publicName: "filled", 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 }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-line-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n preserveAspectRatio=\"none\"\n role=\"img\"\n aria-label=\"Line chart\"\n class=\"lc-line-chart__svg\"\n >\n <!-- Grid lines -->\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-line-chart__grid-line\"\n />\n @if (showYLabels()) {\n <text\n [attr.x]=\"axisLine().vx1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-line-chart__y-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().vx1\"\n [attr.y1]=\"axisLine().vy1\"\n [attr.x2]=\"axisLine().vx2\"\n [attr.y2]=\"axisLine().vy2\"\n class=\"lc-line-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"axisLine().hy1\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"axisLine().hy2\"\n class=\"lc-line-chart__axis\"\n />\n\n <!-- X labels -->\n @for (lbl of xLabels(); track lbl.x) {\n <text\n [attr.x]=\"lbl.x\"\n [attr.y]=\"lbl.y\"\n text-anchor=\"middle\"\n class=\"lc-line-chart__x-label\"\n >\n {{ lbl.label }}\n </text>\n }\n\n <!-- Clip path: prevents smooth spline overshoot from rendering outside the plot area -->\n <defs>\n <clipPath [attr.id]=\"clipId()\">\n <rect\n [attr.x]=\"plotArea().x\"\n [attr.y]=\"plotArea().y\"\n [attr.width]=\"plotArea().w\"\n [attr.height]=\"plotArea().h\"\n />\n </clipPath>\n </defs>\n\n <!-- Series -->\n @for (ser of renderedSeries(); track ser.label) {\n @if (ser.areaD) {\n <path\n [attr.d]=\"ser.areaD\"\n [attr.fill]=\"ser.color\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n class=\"lc-line-chart__area\"\n />\n }\n @if (ser.pathD) {\n <path\n [attr.d]=\"ser.pathD\"\n [attr.stroke]=\"ser.color\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-line-chart__line\"\n />\n }\n @for (pt of ser.points; track $index) {\n <circle\n [attr.cx]=\"pt.x\"\n [attr.cy]=\"pt.y\"\n r=\"3\"\n [attr.fill]=\"ser.color\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n class=\"lc-line-chart__dot\"\n />\n }\n }\n </svg>\n\n @if (legendItems().length > 0) {\n <div class=\"lc-line-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-line-chart__legend-item\">\n <span class=\"lc-line-chart__legend-line\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-line-chart__legend-label\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-line-chart{display:block;width:100%}.lc-line-chart__svg{overflow:visible}.lc-line-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-line-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-line-chart__y-label,.lc-line-chart__x-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-line-chart__area{opacity:.12}.lc-line-chart__dot{transition:r .15s ease}.lc-line-chart__dot:hover{r:5}.lc-line-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-line-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-line-chart__legend-line{width:1rem;height:.1875rem;border-radius:1px;flex-shrink:0}.lc-line-chart__legend-label{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9399
9421
|
}
|
|
9400
9422
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LineChartComponent, decorators: [{
|
|
9401
9423
|
type: Component,
|
|
9402
|
-
args: [{ selector: 'lc-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-line-chart\">\n <svg\n
|
|
9403
|
-
}], 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 }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }] } });
|
|
9424
|
+
args: [{ selector: 'lc-line-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-line-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n preserveAspectRatio=\"none\"\n role=\"img\"\n aria-label=\"Line chart\"\n class=\"lc-line-chart__svg\"\n >\n <!-- Grid lines -->\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-line-chart__grid-line\"\n />\n @if (showYLabels()) {\n <text\n [attr.x]=\"axisLine().vx1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-line-chart__y-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().vx1\"\n [attr.y1]=\"axisLine().vy1\"\n [attr.x2]=\"axisLine().vx2\"\n [attr.y2]=\"axisLine().vy2\"\n class=\"lc-line-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().hx1\"\n [attr.y1]=\"axisLine().hy1\"\n [attr.x2]=\"axisLine().hx2\"\n [attr.y2]=\"axisLine().hy2\"\n class=\"lc-line-chart__axis\"\n />\n\n <!-- X labels -->\n @for (lbl of xLabels(); track lbl.x) {\n <text\n [attr.x]=\"lbl.x\"\n [attr.y]=\"lbl.y\"\n text-anchor=\"middle\"\n class=\"lc-line-chart__x-label\"\n >\n {{ lbl.label }}\n </text>\n }\n\n <!-- Clip path: prevents smooth spline overshoot from rendering outside the plot area -->\n <defs>\n <clipPath [attr.id]=\"clipId()\">\n <rect\n [attr.x]=\"plotArea().x\"\n [attr.y]=\"plotArea().y\"\n [attr.width]=\"plotArea().w\"\n [attr.height]=\"plotArea().h\"\n />\n </clipPath>\n </defs>\n\n <!-- Series -->\n @for (ser of renderedSeries(); track ser.label) {\n @if (ser.areaD) {\n <path\n [attr.d]=\"ser.areaD\"\n [attr.fill]=\"ser.color\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n class=\"lc-line-chart__area\"\n />\n }\n @if (ser.pathD) {\n <path\n [attr.d]=\"ser.pathD\"\n [attr.stroke]=\"ser.color\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.clip-path]=\"'url(#' + clipId() + ')'\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-line-chart__line\"\n />\n }\n @for (pt of ser.points; track $index) {\n <circle\n [attr.cx]=\"pt.x\"\n [attr.cy]=\"pt.y\"\n r=\"3\"\n [attr.fill]=\"ser.color\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n class=\"lc-line-chart__dot\"\n />\n }\n }\n </svg>\n\n @if (legendItems().length > 0) {\n <div class=\"lc-line-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-line-chart__legend-item\">\n <span class=\"lc-line-chart__legend-line\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-line-chart__legend-label\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-line-chart{display:block;width:100%}.lc-line-chart__svg{overflow:visible}.lc-line-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-line-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-line-chart__y-label,.lc-line-chart__x-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-line-chart__area{opacity:.12}.lc-line-chart__dot{transition:r .15s ease}.lc-line-chart__dot:hover{r:5}.lc-line-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-line-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-line-chart__legend-line{width:1rem;height:.1875rem;border-radius:1px;flex-shrink:0}.lc-line-chart__legend-label{color:var(--color-text-secondary)}\n"] }]
|
|
9425
|
+
}], 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 }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }] } });
|
|
9404
9426
|
|
|
9405
9427
|
/**
|
|
9406
9428
|
* Gauge component for displaying a value on a semicircular scale.
|
|
@@ -14687,6 +14709,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
14687
14709
|
args: ['document:click', ['$event']]
|
|
14688
14710
|
}] } });
|
|
14689
14711
|
|
|
14712
|
+
class StageListComponent {
|
|
14713
|
+
stages = input.required(...(ngDevMode ? [{ debugName: "stages" }] : /* istanbul ignore next */ []));
|
|
14714
|
+
max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
14715
|
+
showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
|
|
14716
|
+
showBar = input(true, ...(ngDevMode ? [{ debugName: "showBar" }] : /* istanbul ignore next */ []));
|
|
14717
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
14718
|
+
clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
|
|
14719
|
+
emptyText = input('', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
14720
|
+
stageClick = output();
|
|
14721
|
+
isEmpty = computed(() => this.stages().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
|
|
14722
|
+
resolvedMax = computed(() => {
|
|
14723
|
+
const explicitMax = this.max();
|
|
14724
|
+
if (typeof explicitMax === 'number' && Number.isFinite(explicitMax) && explicitMax > 0) {
|
|
14725
|
+
return explicitMax;
|
|
14726
|
+
}
|
|
14727
|
+
const numericValues = this.stages()
|
|
14728
|
+
.map((stage) => (Number.isFinite(stage.value) ? stage.value : 0));
|
|
14729
|
+
return Math.max(1, ...numericValues);
|
|
14730
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedMax" }] : /* istanbul ignore next */ []));
|
|
14731
|
+
resolveColor(stage) {
|
|
14732
|
+
if (typeof stage.color === 'string' && stage.color.trim()) {
|
|
14733
|
+
return stage.color;
|
|
14734
|
+
}
|
|
14735
|
+
return 'var(--lc-color-primary-500, var(--color-primary-500))';
|
|
14736
|
+
}
|
|
14737
|
+
fillWidth(stage) {
|
|
14738
|
+
const value = Number.isFinite(stage.value) ? stage.value : 0;
|
|
14739
|
+
if (value <= 0) {
|
|
14740
|
+
return '0%';
|
|
14741
|
+
}
|
|
14742
|
+
const maxValue = this.resolvedMax();
|
|
14743
|
+
const safeMax = maxValue > 0 ? maxValue : 1;
|
|
14744
|
+
const pct = Math.round((value / safeMax) * 100);
|
|
14745
|
+
const clampedPct = Math.max(0, Math.min(100, pct));
|
|
14746
|
+
return `max(2px, ${clampedPct}%)`;
|
|
14747
|
+
}
|
|
14748
|
+
onStageClick(stage) {
|
|
14749
|
+
if (!this.clickable()) {
|
|
14750
|
+
return;
|
|
14751
|
+
}
|
|
14752
|
+
this.stageClick.emit(stage);
|
|
14753
|
+
}
|
|
14754
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14755
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: StageListComponent, isStandalone: true, selector: "lc-stage-list", inputs: { stages: { classPropertyName: "stages", publicName: "stages", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showBar: { classPropertyName: "showBar", publicName: "showBar", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stageClick: "stageClick" }, ngImport: i0, template: "@if (isEmpty()) {\n @if (emptyText()) {\n <p class=\"lc-stage-list__empty\">{{ emptyText() }}</p>\n }\n} @else {\n <div class=\"lc-stage-list\" [class.lc-stage-list--sm]=\"size() === 'sm'\" [class.lc-stage-list--md]=\"size() === 'md'\" role=\"list\">\n @for (stage of stages(); track stage.id || stage.label || $index) {\n <div class=\"lc-stage-list__row\" role=\"listitem\" [style.--lc-stage-color]=\"resolveColor(stage)\">\n @if (clickable()) {\n <button type=\"button\" class=\"lc-stage-list__interactive\" (click)=\"onStageClick(stage)\">\n <div class=\"lc-stage-list__head\">\n <span class=\"lc-stage-list__dot\" aria-hidden=\"true\"></span>\n <div class=\"lc-stage-list__label-wrap\">\n <span class=\"lc-stage-list__label\">{{ stage.label }}</span>\n @if (stage.hint) {\n <span class=\"lc-stage-list__hint\">{{ stage.hint }}</span>\n }\n </div>\n @if (showValue()) {\n <span class=\"lc-stage-list__value\">{{ stage.value }}</span>\n }\n </div>\n @if (showBar()) {\n <div class=\"lc-stage-list__track\" aria-hidden=\"true\">\n <div class=\"lc-stage-list__fill\" [style.width]=\"fillWidth(stage)\"></div>\n </div>\n }\n </button>\n } @else {\n <div class=\"lc-stage-list__content\">\n <div class=\"lc-stage-list__head\">\n <span class=\"lc-stage-list__dot\" aria-hidden=\"true\"></span>\n <div class=\"lc-stage-list__label-wrap\">\n <span class=\"lc-stage-list__label\">{{ stage.label }}</span>\n @if (stage.hint) {\n <span class=\"lc-stage-list__hint\">{{ stage.hint }}</span>\n }\n </div>\n @if (showValue()) {\n <span class=\"lc-stage-list__value\">{{ stage.value }}</span>\n }\n </div>\n @if (showBar()) {\n <div class=\"lc-stage-list__track\" aria-hidden=\"true\">\n <div class=\"lc-stage-list__fill\" [style.width]=\"fillWidth(stage)\"></div>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:block;width:100%}.lc-stage-list{--lc-stage-gap: .875rem;--lc-stage-bar-height: 8px;--lc-stage-font-size: .9375rem;display:flex;flex-direction:column;gap:var(--lc-stage-gap);width:100%}.lc-stage-list--sm{--lc-stage-gap: .625rem;--lc-stage-bar-height: 6px;--lc-stage-font-size: .875rem}.lc-stage-list__row{width:100%}.lc-stage-list__content,.lc-stage-list__interactive{display:flex;flex-direction:column;gap:.4rem;width:100%}.lc-stage-list__interactive{margin:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}.lc-stage-list__interactive:focus-visible{border-radius:.375rem;outline:2px solid var(--lc-focus-ring-color, var(--color-primary-500));outline-offset:2px}.lc-stage-list__head{display:flex;align-items:flex-start;gap:.5rem;width:100%}.lc-stage-list__dot{flex-shrink:0;width:8px;height:8px;border-radius:999px;margin-top:.32rem;background-color:var(--lc-stage-color, var(--lc-color-primary-500, var(--color-primary-500)))}.lc-stage-list__label-wrap{min-width:0;flex:1;display:flex;flex-direction:column;gap:.1rem}.lc-stage-list__label{color:var(--lc-color-text, var(--color-text-primary));font-size:var(--lc-stage-font-size);line-height:1.35;overflow-wrap:anywhere}.lc-stage-list__hint{color:var(--color-text-secondary);font-size:.8125rem;line-height:1.35;overflow-wrap:anywhere}.lc-stage-list__value{margin-left:auto;padding-left:.75rem;color:var(--lc-color-text, var(--color-text-primary));font-size:var(--lc-stage-font-size);font-weight:600;line-height:1.35;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.lc-stage-list__track{width:100%;height:var(--lc-stage-bar-height);border-radius:999px;background-color:var(--lc-color-surface-alt, var(--color-surface-hover, rgba(148, 163, 184, .18)));overflow:hidden}.lc-stage-list__fill{height:100%;border-radius:inherit;background-color:var(--lc-stage-color, var(--lc-color-primary-500, var(--color-primary-500)));transition:width .3s ease}.lc-stage-list__empty{margin:0;color:var(--color-text-secondary)}@media(prefers-reduced-motion:reduce){.lc-stage-list__fill{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14756
|
+
}
|
|
14757
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StageListComponent, decorators: [{
|
|
14758
|
+
type: Component,
|
|
14759
|
+
args: [{ selector: 'lc-stage-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isEmpty()) {\n @if (emptyText()) {\n <p class=\"lc-stage-list__empty\">{{ emptyText() }}</p>\n }\n} @else {\n <div class=\"lc-stage-list\" [class.lc-stage-list--sm]=\"size() === 'sm'\" [class.lc-stage-list--md]=\"size() === 'md'\" role=\"list\">\n @for (stage of stages(); track stage.id || stage.label || $index) {\n <div class=\"lc-stage-list__row\" role=\"listitem\" [style.--lc-stage-color]=\"resolveColor(stage)\">\n @if (clickable()) {\n <button type=\"button\" class=\"lc-stage-list__interactive\" (click)=\"onStageClick(stage)\">\n <div class=\"lc-stage-list__head\">\n <span class=\"lc-stage-list__dot\" aria-hidden=\"true\"></span>\n <div class=\"lc-stage-list__label-wrap\">\n <span class=\"lc-stage-list__label\">{{ stage.label }}</span>\n @if (stage.hint) {\n <span class=\"lc-stage-list__hint\">{{ stage.hint }}</span>\n }\n </div>\n @if (showValue()) {\n <span class=\"lc-stage-list__value\">{{ stage.value }}</span>\n }\n </div>\n @if (showBar()) {\n <div class=\"lc-stage-list__track\" aria-hidden=\"true\">\n <div class=\"lc-stage-list__fill\" [style.width]=\"fillWidth(stage)\"></div>\n </div>\n }\n </button>\n } @else {\n <div class=\"lc-stage-list__content\">\n <div class=\"lc-stage-list__head\">\n <span class=\"lc-stage-list__dot\" aria-hidden=\"true\"></span>\n <div class=\"lc-stage-list__label-wrap\">\n <span class=\"lc-stage-list__label\">{{ stage.label }}</span>\n @if (stage.hint) {\n <span class=\"lc-stage-list__hint\">{{ stage.hint }}</span>\n }\n </div>\n @if (showValue()) {\n <span class=\"lc-stage-list__value\">{{ stage.value }}</span>\n }\n </div>\n @if (showBar()) {\n <div class=\"lc-stage-list__track\" aria-hidden=\"true\">\n <div class=\"lc-stage-list__fill\" [style.width]=\"fillWidth(stage)\"></div>\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:block;width:100%}.lc-stage-list{--lc-stage-gap: .875rem;--lc-stage-bar-height: 8px;--lc-stage-font-size: .9375rem;display:flex;flex-direction:column;gap:var(--lc-stage-gap);width:100%}.lc-stage-list--sm{--lc-stage-gap: .625rem;--lc-stage-bar-height: 6px;--lc-stage-font-size: .875rem}.lc-stage-list__row{width:100%}.lc-stage-list__content,.lc-stage-list__interactive{display:flex;flex-direction:column;gap:.4rem;width:100%}.lc-stage-list__interactive{margin:0;padding:0;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}.lc-stage-list__interactive:focus-visible{border-radius:.375rem;outline:2px solid var(--lc-focus-ring-color, var(--color-primary-500));outline-offset:2px}.lc-stage-list__head{display:flex;align-items:flex-start;gap:.5rem;width:100%}.lc-stage-list__dot{flex-shrink:0;width:8px;height:8px;border-radius:999px;margin-top:.32rem;background-color:var(--lc-stage-color, var(--lc-color-primary-500, var(--color-primary-500)))}.lc-stage-list__label-wrap{min-width:0;flex:1;display:flex;flex-direction:column;gap:.1rem}.lc-stage-list__label{color:var(--lc-color-text, var(--color-text-primary));font-size:var(--lc-stage-font-size);line-height:1.35;overflow-wrap:anywhere}.lc-stage-list__hint{color:var(--color-text-secondary);font-size:.8125rem;line-height:1.35;overflow-wrap:anywhere}.lc-stage-list__value{margin-left:auto;padding-left:.75rem;color:var(--lc-color-text, var(--color-text-primary));font-size:var(--lc-stage-font-size);font-weight:600;line-height:1.35;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.lc-stage-list__track{width:100%;height:var(--lc-stage-bar-height);border-radius:999px;background-color:var(--lc-color-surface-alt, var(--color-surface-hover, rgba(148, 163, 184, .18)));overflow:hidden}.lc-stage-list__fill{height:100%;border-radius:inherit;background-color:var(--lc-stage-color, var(--lc-color-primary-500, var(--color-primary-500)));transition:width .3s ease}.lc-stage-list__empty{margin:0;color:var(--color-text-secondary)}@media(prefers-reduced-motion:reduce){.lc-stage-list__fill{transition:none}}\n"] }]
|
|
14760
|
+
}], propDecorators: { stages: [{ type: i0.Input, args: [{ isSignal: true, alias: "stages", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBar", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], stageClick: [{ type: i0.Output, args: ["stageClick"] }] } });
|
|
14761
|
+
|
|
14690
14762
|
/**
|
|
14691
14763
|
* Life-Cockpit Design System (UI Kit)
|
|
14692
14764
|
*
|
|
@@ -14709,5 +14781,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
14709
14781
|
* Generated bundle index. Do not edit.
|
|
14710
14782
|
*/
|
|
14711
14783
|
|
|
14712
|
-
export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, resolveFileIcon };
|
|
14784
|
+
export { AccordionComponent, AccordionGroupComponent, AlertComponent, AnimationDurationFast, AnimationEasingEaseIn, AnimationEasingEaseInOut, AnimationEasingEaseOut, AreaChartComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BarChartComponent, BorderRadius2xl, BorderRadiusFull, BorderRadiusLg, BorderRadiusMd, BorderRadiusNone, BorderRadiusSm, BorderRadiusXl, BreadcrumbsComponent, ButtonComponent, CalendarComponent, CalloutComponent, CardComponent, ChatComponent, CheckboxComponent, ChipComponent, CodeBlockComponent, ColorAccentOrange, ColorAccentPurple, ColorAccentRed, ColorAccentRust, ColorAccentViolet, ColorBackgroundDark, ColorErrorDark, ColorErrorDefault, ColorErrorLight, ColorInfoDark, ColorInfoDefault, ColorInfoLight, ColorNeutral100, ColorNeutral200, ColorNeutral300, ColorNeutral400, ColorNeutral50, ColorNeutral500, ColorNeutral600, ColorNeutral700, ColorNeutral800, ColorNeutral900, ColorPickerComponent, ColorPrimary100, ColorPrimary200, ColorPrimary300, ColorPrimary400, ColorPrimary50, ColorPrimary500, ColorPrimary600, ColorPrimary700, ColorPrimary800, ColorPrimary900, ColorSecondary100, ColorSecondary200, ColorSecondary300, ColorSecondary400, ColorSecondary50, ColorSecondary500, ColorSecondary600, ColorSecondary700, ColorSecondary800, ColorSecondary900, ColorSuccessDark, ColorSuccessDefault, ColorSuccessLight, ColorSurfaceDarkBase, ColorSurfaceDarkRaised, ColorSurfaceDarkSunken, ColorTextDarkPrimary, ColorTextDarkSecondary, ColorTextDarkTertiary, ColorWarningDark, ColorWarningDefault, ColorWarningLight, ComboboxComponent, ConfirmDialogComponent, ConfirmService, ContainerComponent, DateRangePickerComponent, DatepickerComponent, DependencyViewerComponent, DiffViewerComponent, DividerComponent, DocumentViewerComponent, DonutChartComponent, DrawerComponent, Elevation1, Elevation2, Elevation3, Elevation4, EmailInputComponent, EmptyStateComponent, ErrorDisplayComponent, FILE_FALLBACK_ICON, FOLDER_ICON, FOLDER_OPEN_ICON, FieldGroupComponent, FileUploadComponent, FilterBarComponent, FooterComponent, FunnelChartComponent, GalleryComponent, GanttChartComponent, GaugeComponent, HeaderComponent, HeatmapComponent, HeroComponent, IconComponent, InputComponent, KanbanBoardComponent, LC_LOGO_BASE_PATH, LineChartComponent, ListComponent, ListItemTemplateDirective, LogViewerComponent, LogoComponent, MarkdownComponent, MenuComponent, ModalComponent, NotificationCenterComponent, NumberInputComponent, PageHeaderComponent, PaginationComponent, PasswordInputComponent, PieChartComponent, PopoverComponent, ProgressBarComponent, ProgressRingComponent, RadarChartComponent, RadioComponent, RatingComponent, RichTextEditorComponent, ScatterPlotComponent, SearchInputComponent, SectionComponent, SelectComponent, SidenavComponent, SizeInteractiveLgFontSize, SizeInteractiveLgHeight, SizeInteractiveLgPadding, SizeInteractiveMdFontSize, SizeInteractiveMdHeight, SizeInteractiveMdPadding, SizeInteractiveSmFontSize, SizeInteractiveSmHeight, SizeInteractiveSmPadding, SizeInteractiveXsFontSize, SizeInteractiveXsHeight, SizeInteractiveXsPadding, SizeMinTouchHeight, SizeMinTouchWidth, SkeletonComponent, SliderComponent, SpacerComponent, Spacing0, Spacing05, Spacing1, Spacing10, Spacing11, Spacing12, Spacing14, Spacing15, Spacing16, Spacing2, Spacing25, Spacing3, Spacing35, Spacing4, Spacing5, Spacing6, Spacing7, Spacing8, Spacing9, SparklineComponent, SpinnerComponent, StackComponent, StackedBarChartComponent, StageListComponent, StatTrendComponent, StepperComponent, SwitchComponent, TabComponent, TableCellDirective, TableComponent, TabsComponent, TagInputComponent, TextareaComponent, ThemeService, TimelineComponent, ToastComponent, ToastService, ToggleGroupComponent, ToolbarComponent, TooltipContentComponent, TooltipDirective, TreeViewComponent, TypographyComponent, TypographyFontFamilyBase, TypographyFontFamilyMono, TypographyFontSize2xl, TypographyFontSize3xl, TypographyFontSize4xl, TypographyFontSize5xl, TypographyFontSize6xl, TypographyFontSizeBase, TypographyFontSizeLg, TypographyFontSizeSm, TypographyFontSizeXl, TypographyFontSizeXs, TypographyFontWeightBold, TypographyFontWeightMedium, TypographyFontWeightNormal, TypographyFontWeightSemibold, TypographyLineHeightNormal, TypographyLineHeightRelaxed, TypographyLineHeightTight, VerificationCodeInputComponent, WaterfallChartComponent, resolveFileIcon };
|
|
14713
14785
|
//# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map
|