@life-cockpit/angular-ui-kit 2.0.0 → 2.0.2
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, ChangeDetectionStrategy, Component, model, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
|
|
2
|
+
import { inject, PLATFORM_ID, signal, computed, Injectable, input, effect, ChangeDetectionStrategy, Component, model, contentChildren, untracked, output, ViewChild, ViewEncapsulation, HostListener, forwardRef, InjectionToken, ElementRef, viewChild, ChangeDetectorRef, EventEmitter, Output, Input, ViewChildren, HostBinding, ViewContainerRef, Renderer2, Directive, TemplateRef, ContentChildren, ContentChild, DestroyRef, afterNextRender, SecurityContext, NgZone, ApplicationRef, EnvironmentInjector, createComponent } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, NgClass, CommonModule, NgTemplateOutlet, NgStyle, SlicePipe } from '@angular/common';
|
|
4
4
|
import * as i1$4 from '@angular/platform-browser';
|
|
5
5
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
@@ -8766,6 +8766,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
8766
8766
|
* ```
|
|
8767
8767
|
*/
|
|
8768
8768
|
class SparklineComponent {
|
|
8769
|
+
_el = inject(ElementRef);
|
|
8770
|
+
_destroyRef = inject(DestroyRef);
|
|
8771
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
8772
|
+
constructor() {
|
|
8773
|
+
afterNextRender(() => {
|
|
8774
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
8775
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
8776
|
+
});
|
|
8777
|
+
obs.observe(this._el.nativeElement);
|
|
8778
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
8779
|
+
});
|
|
8780
|
+
}
|
|
8769
8781
|
/** Data points to plot. */
|
|
8770
8782
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
8771
8783
|
/** Stroke color theme. */
|
|
@@ -8808,7 +8820,7 @@ class SparklineComponent {
|
|
|
8808
8820
|
const d = this.data();
|
|
8809
8821
|
if (!d || d.length < 2)
|
|
8810
8822
|
return '';
|
|
8811
|
-
const w = this.
|
|
8823
|
+
const w = this.effectiveWidth();
|
|
8812
8824
|
const h = this.height();
|
|
8813
8825
|
const sw = this.strokeWidth();
|
|
8814
8826
|
const padding = sw;
|
|
@@ -8846,7 +8858,7 @@ class SparklineComponent {
|
|
|
8846
8858
|
if (!line)
|
|
8847
8859
|
return '';
|
|
8848
8860
|
const d = this.data();
|
|
8849
|
-
const w = this.
|
|
8861
|
+
const w = this.effectiveWidth();
|
|
8850
8862
|
const h = this.height();
|
|
8851
8863
|
const sw = this.strokeWidth();
|
|
8852
8864
|
const padding = sw;
|
|
@@ -8862,7 +8874,7 @@ class SparklineComponent {
|
|
|
8862
8874
|
const d = this.data();
|
|
8863
8875
|
if (!d || d.length < 2)
|
|
8864
8876
|
return null;
|
|
8865
|
-
const w = this.
|
|
8877
|
+
const w = this.effectiveWidth();
|
|
8866
8878
|
const h = this.height();
|
|
8867
8879
|
const sw = this.strokeWidth();
|
|
8868
8880
|
const padding = sw;
|
|
@@ -8878,14 +8890,15 @@ class SparklineComponent {
|
|
|
8878
8890
|
r: sw + 1,
|
|
8879
8891
|
};
|
|
8880
8892
|
}, ...(ngDevMode ? [{ debugName: "endDot" }] : /* istanbul ignore next */ []));
|
|
8881
|
-
|
|
8893
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
8894
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
8882
8895
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SparklineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8883
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SparklineComponent, isStandalone: true, selector: "lc-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, showEndDot: { classPropertyName: "showEndDot", publicName: "showEndDot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n
|
|
8896
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: SparklineComponent, isStandalone: true, selector: "lc-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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 }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, showEndDot: { classPropertyName: "showEndDot", publicName: "showEndDot", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n class=\"lc-sparkline\"\n role=\"img\"\n aria-label=\"Sparkline chart\"\n>\n @if (areaD()) {\n <path\n [attr.d]=\"areaD()\"\n [attr.fill]=\"fillColorVar()\"\n class=\"lc-sparkline__area\"\n />\n }\n\n @if (pathD()) {\n <path\n [attr.d]=\"pathD()\"\n [attr.stroke]=\"colorVar()\"\n [attr.stroke-width]=\"strokeWidth()\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-sparkline__line\"\n />\n }\n\n @if (endDot(); as dot) {\n <circle\n [attr.cx]=\"dot.cx\"\n [attr.cy]=\"dot.cy\"\n [attr.r]=\"dot.r\"\n [attr.fill]=\"colorVar()\"\n class=\"lc-sparkline__dot\"\n />\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-sparkline{overflow:visible}.lc-sparkline__area{opacity:.2}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8884
8897
|
}
|
|
8885
8898
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: SparklineComponent, decorators: [{
|
|
8886
8899
|
type: Component,
|
|
8887
|
-
args: [{ selector: 'lc-sparkline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n
|
|
8888
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", 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 }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], showEndDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEndDot", required: false }] }] } });
|
|
8900
|
+
args: [{ selector: 'lc-sparkline', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n class=\"lc-sparkline\"\n role=\"img\"\n aria-label=\"Sparkline chart\"\n>\n @if (areaD()) {\n <path\n [attr.d]=\"areaD()\"\n [attr.fill]=\"fillColorVar()\"\n class=\"lc-sparkline__area\"\n />\n }\n\n @if (pathD()) {\n <path\n [attr.d]=\"pathD()\"\n [attr.stroke]=\"colorVar()\"\n [attr.stroke-width]=\"strokeWidth()\"\n fill=\"none\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"lc-sparkline__line\"\n />\n }\n\n @if (endDot(); as dot) {\n <circle\n [attr.cx]=\"dot.cx\"\n [attr.cy]=\"dot.cy\"\n [attr.r]=\"dot.r\"\n [attr.fill]=\"colorVar()\"\n class=\"lc-sparkline__dot\"\n />\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-sparkline{overflow:visible}.lc-sparkline__area{opacity:.2}\n"] }]
|
|
8901
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", 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 }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], showEndDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEndDot", required: false }] }] } });
|
|
8889
8902
|
|
|
8890
8903
|
/**
|
|
8891
8904
|
* Stat trend component for displaying KPI values with change indicators.
|
|
@@ -9070,11 +9083,11 @@ class DonutChartComponent {
|
|
|
9070
9083
|
percentage: arc.percentage,
|
|
9071
9084
|
})), ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
9072
9085
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9073
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DonutChartComponent, isStandalone: true, selector: "lc-donut-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, showCenter: { classPropertyName: "showCenter", publicName: "showCenter", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-donut-chart{display:
|
|
9086
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DonutChartComponent, isStandalone: true, selector: "lc-donut-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, showCenter: { classPropertyName: "showCenter", publicName: "showCenter", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-donut-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-donut-chart__svg{overflow:visible}.lc-donut-chart__segment{transition:opacity .15s ease}.lc-donut-chart__segment:hover{opacity:.8}.lc-donut-chart__center-value{font-size:1.25rem;font-weight:700;fill:var(--color-text-primary)}.lc-donut-chart__center-label{font-size:.6875rem;fill:var(--color-text-tertiary);font-weight:500}.lc-donut-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-donut-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-donut-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-donut-chart__legend-label{color:var(--color-text-secondary)}.lc-donut-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9074
9087
|
}
|
|
9075
9088
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DonutChartComponent, decorators: [{
|
|
9076
9089
|
type: Component,
|
|
9077
|
-
args: [{ selector: 'lc-donut-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-donut-chart{display:
|
|
9090
|
+
args: [{ selector: 'lc-donut-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-donut-chart\">\n <svg\n [attr.width]=\"svgSize()\"\n [attr.height]=\"svgSize()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Donut chart\"\n class=\"lc-donut-chart__svg\"\n >\n @for (arc of arcs(); track arc.label) {\n <path\n [attr.d]=\"arc.d\"\n [attr.fill]=\"arc.color\"\n class=\"lc-donut-chart__segment\"\n />\n }\n\n @if (showCenter() && (centerValue() || centerLabel())) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"centerLabel() ? center() - 4 : center()\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-value\"\n >\n {{ centerValue() }}\n </text>\n @if (centerLabel()) {\n <text\n [attr.x]=\"center()\"\n [attr.y]=\"center() + 14\"\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n class=\"lc-donut-chart__center-label\"\n >\n {{ centerLabel() }}\n </text>\n }\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-donut-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-donut-chart__legend-item\">\n <span class=\"lc-donut-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-donut-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-donut-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-donut-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-donut-chart__svg{overflow:visible}.lc-donut-chart__segment{transition:opacity .15s ease}.lc-donut-chart__segment:hover{opacity:.8}.lc-donut-chart__center-value{font-size:1.25rem;font-weight:700;fill:var(--color-text-primary)}.lc-donut-chart__center-label{font-size:.6875rem;fill:var(--color-text-tertiary);font-weight:500}.lc-donut-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-donut-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-donut-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-donut-chart__legend-label{color:var(--color-text-secondary)}.lc-donut-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"] }]
|
|
9078
9091
|
}], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], showCenter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCenter", required: false }] }], centerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerLabel", required: false }] }], centerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerValue", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }] } });
|
|
9079
9092
|
|
|
9080
9093
|
const DEFAULT_COLORS$6 = [
|
|
@@ -9102,6 +9115,18 @@ const DEFAULT_COLORS$6 = [
|
|
|
9102
9115
|
* ```
|
|
9103
9116
|
*/
|
|
9104
9117
|
class BarChartComponent {
|
|
9118
|
+
_el = inject(ElementRef);
|
|
9119
|
+
_destroyRef = inject(DestroyRef);
|
|
9120
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9121
|
+
constructor() {
|
|
9122
|
+
afterNextRender(() => {
|
|
9123
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9124
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9125
|
+
});
|
|
9126
|
+
obs.observe(this._el.nativeElement);
|
|
9127
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9128
|
+
});
|
|
9129
|
+
}
|
|
9105
9130
|
/** Data items. */
|
|
9106
9131
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
9107
9132
|
/** Chart width in pixels. */
|
|
@@ -9125,7 +9150,8 @@ class BarChartComponent {
|
|
|
9125
9150
|
PADDING_RIGHT = 10;
|
|
9126
9151
|
PADDING_TOP = 10;
|
|
9127
9152
|
PADDING_BOTTOM = 30;
|
|
9128
|
-
|
|
9153
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9154
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9129
9155
|
maxValue = computed(() => {
|
|
9130
9156
|
const d = this.data();
|
|
9131
9157
|
if (!d || d.length === 0)
|
|
@@ -9154,7 +9180,7 @@ class BarChartComponent {
|
|
|
9154
9180
|
if (!d || d.length === 0)
|
|
9155
9181
|
return [];
|
|
9156
9182
|
const isVertical = this.orientation() === 'vertical';
|
|
9157
|
-
const w = this.
|
|
9183
|
+
const w = this.effectiveWidth();
|
|
9158
9184
|
const h = this.height();
|
|
9159
9185
|
const pl = this.PADDING_LEFT;
|
|
9160
9186
|
const pr = this.PADDING_RIGHT;
|
|
@@ -9210,7 +9236,7 @@ class BarChartComponent {
|
|
|
9210
9236
|
}, ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
|
|
9211
9237
|
isVertical = computed(() => this.orientation() === 'vertical', ...(ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []));
|
|
9212
9238
|
axisLine = computed(() => {
|
|
9213
|
-
const w = this.
|
|
9239
|
+
const w = this.effectiveWidth();
|
|
9214
9240
|
const h = this.height();
|
|
9215
9241
|
const pl = this.PADDING_LEFT;
|
|
9216
9242
|
const pt = this.PADDING_TOP;
|
|
@@ -9228,12 +9254,12 @@ class BarChartComponent {
|
|
|
9228
9254
|
};
|
|
9229
9255
|
}, ...(ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []));
|
|
9230
9256
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9231
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BarChartComponent, isStandalone: true, selector: "lc-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n
|
|
9257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: BarChartComponent, isStandalone: true, selector: "lc-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Bar chart\"\n class=\"lc-bar-chart\"\n>\n <!-- Grid lines -->\n @if (showGrid() && isVertical()) {\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-bar-chart__grid-line\"\n />\n <text\n [attr.x]=\"axisLine().x1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-bar-chart__grid-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().x1\"\n [attr.y1]=\"axisLine().y1\"\n [attr.x2]=\"axisLine().x2\"\n [attr.y2]=\"axisLine().y2\"\n class=\"lc-bar-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"axisLine().by1\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"axisLine().by2\"\n class=\"lc-bar-chart__axis\"\n />\n\n <!-- Bars -->\n @for (bar of bars(); track bar.label) {\n <rect\n [attr.x]=\"bar.x\"\n [attr.y]=\"bar.y\"\n [attr.width]=\"bar.width\"\n [attr.height]=\"bar.height\"\n [attr.fill]=\"bar.color\"\n rx=\"2\"\n class=\"lc-bar-chart__bar\"\n />\n\n @if (showValues()) {\n <text\n [attr.x]=\"bar.valueX\"\n [attr.y]=\"bar.valueY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'start'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__value\"\n >\n {{ bar.value }}\n </text>\n }\n\n @if (showLabels()) {\n <text\n [attr.x]=\"bar.labelX\"\n [attr.y]=\"bar.labelY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__label\"\n >\n {{ bar.label }}\n </text>\n }\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9232
9258
|
}
|
|
9233
9259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: BarChartComponent, decorators: [{
|
|
9234
9260
|
type: Component,
|
|
9235
|
-
args: [{ selector: 'lc-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n
|
|
9236
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
9261
|
+
args: [{ selector: 'lc-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Bar chart\"\n class=\"lc-bar-chart\"\n>\n <!-- Grid lines -->\n @if (showGrid() && isVertical()) {\n @for (line of gridLines(); track line.y) {\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"line.y\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"line.y\"\n class=\"lc-bar-chart__grid-line\"\n />\n <text\n [attr.x]=\"axisLine().x1 - 6\"\n [attr.y]=\"line.y\"\n text-anchor=\"end\"\n dominant-baseline=\"central\"\n class=\"lc-bar-chart__grid-label\"\n >\n {{ line.label }}\n </text>\n }\n }\n\n <!-- Axes -->\n <line\n [attr.x1]=\"axisLine().x1\"\n [attr.y1]=\"axisLine().y1\"\n [attr.x2]=\"axisLine().x2\"\n [attr.y2]=\"axisLine().y2\"\n class=\"lc-bar-chart__axis\"\n />\n <line\n [attr.x1]=\"axisLine().bx1\"\n [attr.y1]=\"axisLine().by1\"\n [attr.x2]=\"axisLine().bx2\"\n [attr.y2]=\"axisLine().by2\"\n class=\"lc-bar-chart__axis\"\n />\n\n <!-- Bars -->\n @for (bar of bars(); track bar.label) {\n <rect\n [attr.x]=\"bar.x\"\n [attr.y]=\"bar.y\"\n [attr.width]=\"bar.width\"\n [attr.height]=\"bar.height\"\n [attr.fill]=\"bar.color\"\n rx=\"2\"\n class=\"lc-bar-chart__bar\"\n />\n\n @if (showValues()) {\n <text\n [attr.x]=\"bar.valueX\"\n [attr.y]=\"bar.valueY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'start'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__value\"\n >\n {{ bar.value }}\n </text>\n }\n\n @if (showLabels()) {\n <text\n [attr.x]=\"bar.labelX\"\n [attr.y]=\"bar.labelY\"\n [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\"\n [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\"\n class=\"lc-bar-chart__label\"\n >\n {{ bar.label }}\n </text>\n }\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-bar-chart{overflow:visible}.lc-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-bar-chart__grid-line{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-bar-chart__bar{transition:opacity .15s ease}.lc-bar-chart__bar:hover{opacity:.8}.lc-bar-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"] }]
|
|
9262
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
9237
9263
|
|
|
9238
9264
|
const DEFAULT_COLORS$5 = [
|
|
9239
9265
|
'var(--color-primary-500)',
|
|
@@ -9259,6 +9285,18 @@ const DEFAULT_COLORS$5 = [
|
|
|
9259
9285
|
* ```
|
|
9260
9286
|
*/
|
|
9261
9287
|
class LineChartComponent {
|
|
9288
|
+
_el = inject(ElementRef);
|
|
9289
|
+
_destroyRef = inject(DestroyRef);
|
|
9290
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9291
|
+
constructor() {
|
|
9292
|
+
afterNextRender(() => {
|
|
9293
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9294
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9295
|
+
});
|
|
9296
|
+
obs.observe(this._el.nativeElement);
|
|
9297
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9298
|
+
});
|
|
9299
|
+
}
|
|
9262
9300
|
/** One or more data series. */
|
|
9263
9301
|
series = input.required(...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
|
|
9264
9302
|
/** X-axis labels. */
|
|
@@ -9283,22 +9321,29 @@ class LineChartComponent {
|
|
|
9283
9321
|
showLegend = input(false, ...(ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []));
|
|
9284
9322
|
/** Use smooth curves. */
|
|
9285
9323
|
smooth = input(true, ...(ngDevMode ? [{ debugName: "smooth" }] : /* istanbul ignore next */ []));
|
|
9324
|
+
/** Force a minimum Y value (e.g. 0 for cost charts to avoid negative baseline). */
|
|
9325
|
+
yMin = input(null, ...(ngDevMode ? [{ debugName: "yMin" }] : /* istanbul ignore next */ []));
|
|
9286
9326
|
PL = 40;
|
|
9287
9327
|
PR = 10;
|
|
9288
9328
|
PT = 10;
|
|
9289
9329
|
PB = 30;
|
|
9290
|
-
|
|
9330
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9331
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9291
9332
|
allValues = computed(() => {
|
|
9292
9333
|
const s = this.series();
|
|
9293
9334
|
return s.flatMap((ser) => ser.data);
|
|
9294
9335
|
}, ...(ngDevMode ? [{ debugName: "allValues" }] : /* istanbul ignore next */ []));
|
|
9295
|
-
minValue = computed(() =>
|
|
9336
|
+
minValue = computed(() => {
|
|
9337
|
+
const dataMin = this.allValues().length ? Math.min(...this.allValues()) : 0;
|
|
9338
|
+
const forced = this.yMin();
|
|
9339
|
+
return forced !== null ? Math.min(forced, dataMin) : dataMin;
|
|
9340
|
+
}, ...(ngDevMode ? [{ debugName: "minValue" }] : /* istanbul ignore next */ []));
|
|
9296
9341
|
maxValue = computed(() => this.allValues().length ? Math.max(...this.allValues()) : 0, ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
|
|
9297
9342
|
maxDataLength = computed(() => Math.max(...this.series().map((s) => s.data.length), 0), ...(ngDevMode ? [{ debugName: "maxDataLength" }] : /* istanbul ignore next */ []));
|
|
9298
9343
|
plotArea = computed(() => ({
|
|
9299
9344
|
x: this.PL,
|
|
9300
9345
|
y: this.PT,
|
|
9301
|
-
w: this.
|
|
9346
|
+
w: this.effectiveWidth() - this.PL - this.PR,
|
|
9302
9347
|
h: this.height() - this.PT - this.PB,
|
|
9303
9348
|
}), ...(ngDevMode ? [{ debugName: "plotArea" }] : /* istanbul ignore next */ []));
|
|
9304
9349
|
gridLines = computed(() => {
|
|
@@ -9313,7 +9358,7 @@ class LineChartComponent {
|
|
|
9313
9358
|
for (let i = 0; i <= steps; i++) {
|
|
9314
9359
|
const val = min + (i / steps) * range;
|
|
9315
9360
|
const y = pa.y + pa.h - (i / steps) * pa.h;
|
|
9316
|
-
lines.push({ y, label:
|
|
9361
|
+
lines.push({ y, label: this.fmtY(val) });
|
|
9317
9362
|
}
|
|
9318
9363
|
return lines;
|
|
9319
9364
|
}, ...(ngDevMode ? [{ debugName: "gridLines" }] : /* istanbul ignore next */ []));
|
|
@@ -9394,13 +9439,29 @@ class LineChartComponent {
|
|
|
9394
9439
|
color: s.color,
|
|
9395
9440
|
}));
|
|
9396
9441
|
}, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
9442
|
+
_clipId = `lc-chart-clip-${Math.random().toString(36).slice(2)}`;
|
|
9443
|
+
clipId = () => this._clipId;
|
|
9444
|
+
fmtY(val) {
|
|
9445
|
+
if (val === 0)
|
|
9446
|
+
return '0';
|
|
9447
|
+
const abs = Math.abs(val);
|
|
9448
|
+
if (abs < 0.001)
|
|
9449
|
+
return val.toFixed(4);
|
|
9450
|
+
if (abs < 0.01)
|
|
9451
|
+
return val.toFixed(3);
|
|
9452
|
+
if (abs < 0.1)
|
|
9453
|
+
return val.toFixed(2);
|
|
9454
|
+
if (abs < 10)
|
|
9455
|
+
return val.toFixed(1);
|
|
9456
|
+
return String(Math.round(val));
|
|
9457
|
+
}
|
|
9397
9458
|
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
|
|
9459
|
+
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 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: [":host{display:block}.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
9460
|
}
|
|
9400
9461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: LineChartComponent, decorators: [{
|
|
9401
9462
|
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 }] }] } });
|
|
9463
|
+
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 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: [":host{display:block}.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"] }]
|
|
9464
|
+
}], 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 }] }], 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
9465
|
|
|
9405
9466
|
/**
|
|
9406
9467
|
* Gauge component for displaying a value on a semicircular scale.
|
|
@@ -9523,6 +9584,18 @@ const DEFAULT_COLORS$4 = [
|
|
|
9523
9584
|
* ```
|
|
9524
9585
|
*/
|
|
9525
9586
|
class StackedBarChartComponent {
|
|
9587
|
+
_el = inject(ElementRef);
|
|
9588
|
+
_destroyRef = inject(DestroyRef);
|
|
9589
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9590
|
+
constructor() {
|
|
9591
|
+
afterNextRender(() => {
|
|
9592
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9593
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9594
|
+
});
|
|
9595
|
+
obs.observe(this._el.nativeElement);
|
|
9596
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9597
|
+
});
|
|
9598
|
+
}
|
|
9526
9599
|
/** Categories with stacked values. */
|
|
9527
9600
|
categories = input.required(...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
|
|
9528
9601
|
/** Legend items mapping to each value index. */
|
|
@@ -9539,7 +9612,8 @@ class StackedBarChartComponent {
|
|
|
9539
9612
|
PR = 10;
|
|
9540
9613
|
PT = 10;
|
|
9541
9614
|
PB = 30;
|
|
9542
|
-
|
|
9615
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9616
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9543
9617
|
maxTotal = computed(() => {
|
|
9544
9618
|
const cats = this.categories();
|
|
9545
9619
|
if (!cats.length)
|
|
@@ -9568,7 +9642,7 @@ class StackedBarChartComponent {
|
|
|
9568
9642
|
const legs = this.legends();
|
|
9569
9643
|
if (!cats.length)
|
|
9570
9644
|
return [];
|
|
9571
|
-
const w = this.
|
|
9645
|
+
const w = this.effectiveWidth();
|
|
9572
9646
|
const h = this.height();
|
|
9573
9647
|
const isV = this.orientation() === 'vertical';
|
|
9574
9648
|
const plotW = w - this.PL - this.PR;
|
|
@@ -9627,15 +9701,15 @@ class StackedBarChartComponent {
|
|
|
9627
9701
|
vx1: this.PL, vy1: this.PT,
|
|
9628
9702
|
vx2: this.PL, vy2: this.height() - this.PB,
|
|
9629
9703
|
hx1: this.PL, hy1: this.height() - this.PB,
|
|
9630
|
-
hx2: this.
|
|
9704
|
+
hx2: this.effectiveWidth() - this.PR, hy2: this.height() - this.PB,
|
|
9631
9705
|
}), ...(ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []));
|
|
9632
9706
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StackedBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9633
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: StackedBarChartComponent, isStandalone: true, selector: "lc-stacked-bar-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, legends: { classPropertyName: "legends", publicName: "legends", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n
|
|
9707
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: StackedBarChartComponent, isStandalone: true, selector: "lc-stacked-bar-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: true, transformFunction: null }, legends: { classPropertyName: "legends", publicName: "legends", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Stacked bar chart\"\n class=\"lc-stacked-bar-chart__svg\"\n >\n @if (showGrid() && isVertical()) {\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-stacked-bar-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__grid-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-stacked-bar-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-stacked-bar-chart__axis\" />\n\n @for (stack of stacks(); track stack.label) {\n @for (seg of stack.segments; track $index) {\n <rect [attr.x]=\"seg.x\" [attr.y]=\"seg.y\" [attr.width]=\"seg.w\" [attr.height]=\"seg.h\" [attr.fill]=\"seg.color\" class=\"lc-stacked-bar-chart__segment\" />\n }\n @if (showLabels()) {\n <text [attr.x]=\"stack.labelPos.x\" [attr.y]=\"stack.labelPos.y\" [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__label\">{{ stack.label }}</text>\n }\n }\n </svg>\n\n @if (showLegend() && legendItems().length) {\n <div class=\"lc-stacked-bar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-stacked-bar-chart__legend-item\">\n <span class=\"lc-stacked-bar-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-stacked-bar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-stacked-bar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-stacked-bar-chart__svg{overflow:visible}.lc-stacked-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-stacked-bar-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-stacked-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-stacked-bar-chart__segment{transition:opacity .15s ease}.lc-stacked-bar-chart__segment:hover{opacity:.8}.lc-stacked-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-stacked-bar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-stacked-bar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-stacked-bar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:2px;flex-shrink:0}.lc-stacked-bar-chart__legend-text{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9634
9708
|
}
|
|
9635
9709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StackedBarChartComponent, decorators: [{
|
|
9636
9710
|
type: Component,
|
|
9637
|
-
args: [{ selector: 'lc-stacked-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n
|
|
9638
|
-
}], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], legends: [{ type: i0.Input, args: [{ isSignal: true, alias: "legends", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
9711
|
+
args: [{ selector: 'lc-stacked-bar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-stacked-bar-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Stacked bar chart\"\n class=\"lc-stacked-bar-chart__svg\"\n >\n @if (showGrid() && isVertical()) {\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-stacked-bar-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-stacked-bar-chart__grid-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-stacked-bar-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-stacked-bar-chart__axis\" />\n\n @for (stack of stacks(); track stack.label) {\n @for (seg of stack.segments; track $index) {\n <rect [attr.x]=\"seg.x\" [attr.y]=\"seg.y\" [attr.width]=\"seg.w\" [attr.height]=\"seg.h\" [attr.fill]=\"seg.color\" class=\"lc-stacked-bar-chart__segment\" />\n }\n @if (showLabels()) {\n <text [attr.x]=\"stack.labelPos.x\" [attr.y]=\"stack.labelPos.y\" [attr.text-anchor]=\"isVertical() ? 'middle' : 'end'\" [attr.dominant-baseline]=\"isVertical() ? 'auto' : 'central'\" class=\"lc-stacked-bar-chart__label\">{{ stack.label }}</text>\n }\n }\n </svg>\n\n @if (showLegend() && legendItems().length) {\n <div class=\"lc-stacked-bar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-stacked-bar-chart__legend-item\">\n <span class=\"lc-stacked-bar-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-stacked-bar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-stacked-bar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.lc-stacked-bar-chart__svg{overflow:visible}.lc-stacked-bar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-stacked-bar-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-stacked-bar-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-stacked-bar-chart__segment{transition:opacity .15s ease}.lc-stacked-bar-chart__segment:hover{opacity:.8}.lc-stacked-bar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-stacked-bar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-stacked-bar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-stacked-bar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:2px;flex-shrink:0}.lc-stacked-bar-chart__legend-text{color:var(--color-text-secondary)}\n"] }]
|
|
9712
|
+
}], ctorParameters: () => [], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: true }] }], legends: [{ type: i0.Input, args: [{ isSignal: true, alias: "legends", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
9639
9713
|
|
|
9640
9714
|
const DEFAULT_COLORS$3 = [
|
|
9641
9715
|
'var(--color-primary-500)',
|
|
@@ -9661,6 +9735,18 @@ const DEFAULT_COLORS$3 = [
|
|
|
9661
9735
|
* ```
|
|
9662
9736
|
*/
|
|
9663
9737
|
class AreaChartComponent {
|
|
9738
|
+
_el = inject(ElementRef);
|
|
9739
|
+
_destroyRef = inject(DestroyRef);
|
|
9740
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
9741
|
+
constructor() {
|
|
9742
|
+
afterNextRender(() => {
|
|
9743
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
9744
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
9745
|
+
});
|
|
9746
|
+
obs.observe(this._el.nativeElement);
|
|
9747
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
9748
|
+
});
|
|
9749
|
+
}
|
|
9664
9750
|
series = input.required(...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
|
|
9665
9751
|
labels = input([], ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
|
|
9666
9752
|
width = input(400, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
@@ -9680,10 +9766,11 @@ class AreaChartComponent {
|
|
|
9680
9766
|
PR = 10;
|
|
9681
9767
|
PT = 10;
|
|
9682
9768
|
PB = 30;
|
|
9683
|
-
|
|
9769
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
9770
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
9684
9771
|
plotArea = computed(() => ({
|
|
9685
9772
|
x: this.PL, y: this.PT,
|
|
9686
|
-
w: this.
|
|
9773
|
+
w: this.effectiveWidth() - this.PL - this.PR,
|
|
9687
9774
|
h: this.height() - this.PT - this.PB,
|
|
9688
9775
|
}), ...(ngDevMode ? [{ debugName: "plotArea" }] : /* istanbul ignore next */ []));
|
|
9689
9776
|
computedSeries = computed(() => {
|
|
@@ -9825,12 +9912,12 @@ class AreaChartComponent {
|
|
|
9825
9912
|
return this.renderedSeries().map(s => ({ label: s.label, color: s.color }));
|
|
9826
9913
|
}, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
9827
9914
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9828
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 } }, ngImport: i0, template: "<div class=\"lc-area-chart\">\n <svg
|
|
9915
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 } }, ngImport: i0, template: "<div class=\"lc-area-chart\">\n <svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Area chart\" class=\"lc-area-chart__svg\">\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 ser.label) {\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=\"white\" 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 item.label) {\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 });
|
|
9829
9916
|
}
|
|
9830
9917
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AreaChartComponent, decorators: [{
|
|
9831
9918
|
type: Component,
|
|
9832
|
-
args: [{ selector: 'lc-area-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-area-chart\">\n <svg
|
|
9833
|
-
}], 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 }] }] } });
|
|
9919
|
+
args: [{ selector: 'lc-area-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-area-chart\">\n <svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Area chart\" class=\"lc-area-chart__svg\">\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 ser.label) {\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=\"white\" 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 item.label) {\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"] }]
|
|
9920
|
+
}], 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 }] }] } });
|
|
9834
9921
|
|
|
9835
9922
|
/**
|
|
9836
9923
|
* Heatmap component for visualizing 2D data density.
|
|
@@ -10016,11 +10103,11 @@ class PieChartComponent {
|
|
|
10016
10103
|
}, ...(ngDevMode ? [{ debugName: "arcs" }] : /* istanbul ignore next */ []));
|
|
10017
10104
|
legendItems = computed(() => this.arcs().map(a => ({ color: a.color, label: a.label, percentage: a.percentage })), ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
10018
10105
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10019
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PieChartComponent, isStandalone: true, selector: "lc-pie-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-pie-chart{display:
|
|
10106
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: PieChartComponent, isStandalone: true, selector: "lc-pie-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-pie-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-pie-chart__svg{overflow:visible}.lc-pie-chart__segment{transition:opacity .15s ease}.lc-pie-chart__segment:hover{opacity:.8}.lc-pie-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-pie-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-pie-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-pie-chart__legend-label{color:var(--color-text-secondary)}.lc-pie-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10020
10107
|
}
|
|
10021
10108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: PieChartComponent, decorators: [{
|
|
10022
10109
|
type: Component,
|
|
10023
|
-
args: [{ selector: 'lc-pie-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-pie-chart{display:
|
|
10110
|
+
args: [{ selector: 'lc-pie-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-pie-chart\">\n <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Pie chart\" class=\"lc-pie-chart__svg\">\n @for (arc of arcs(); track arc.label) {\n <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n }\n </svg>\n\n @if (showLegend()) {\n <div class=\"lc-pie-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-pie-chart__legend-item\">\n <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-pie-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-pie-chart__svg{overflow:visible}.lc-pie-chart__segment{transition:opacity .15s ease}.lc-pie-chart__segment:hover{opacity:.8}.lc-pie-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-pie-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-pie-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-pie-chart__legend-label{color:var(--color-text-secondary)}.lc-pie-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"] }]
|
|
10024
10111
|
}], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }] } });
|
|
10025
10112
|
|
|
10026
10113
|
/**
|
|
@@ -10137,11 +10224,11 @@ class RadarChartComponent {
|
|
|
10137
10224
|
return this.seriesPolygons().map(s => ({ label: s.label, colorIndex: s.colorIndex, customColor: s.customColor }));
|
|
10138
10225
|
}, ...(ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []));
|
|
10139
10226
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadarChartComponent, isStandalone: true, selector: "lc-radar-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, axes: { classPropertyName: "axes", publicName: "axes", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rings: { classPropertyName: "rings", publicName: "rings", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-radar-chart{display:
|
|
10227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: RadarChartComponent, isStandalone: true, selector: "lc-radar-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, axes: { classPropertyName: "axes", publicName: "axes", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rings: { classPropertyName: "rings", publicName: "rings", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-radar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem}.lc-radar-chart__svg{overflow:visible}.lc-radar-chart__grid{fill:none;stroke:var(--color-border);stroke-width:1}.lc-radar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-radar-chart__polygon{transition:fill-opacity .15s ease}.lc-radar-chart__polygon:hover{fill-opacity:.3}.lc-radar-chart__polygon--0{fill:var(--color-primary-500);stroke:var(--color-primary-500)}.lc-radar-chart__polygon--1{fill:var(--color-secondary-500);stroke:var(--color-secondary-500)}.lc-radar-chart__polygon--2{fill:var(--color-success-default);stroke:var(--color-success-default)}.lc-radar-chart__polygon--3{fill:var(--color-warning-default);stroke:var(--color-warning-default)}.lc-radar-chart__polygon--4{fill:var(--color-error-default);stroke:var(--color-error-default)}.lc-radar-chart__polygon--5{fill:var(--color-info-default);stroke:var(--color-info-default)}.lc-radar-chart__polygon--6{fill:var(--color-primary-700);stroke:var(--color-primary-700)}.lc-radar-chart__polygon--7{fill:var(--color-secondary-700);stroke:var(--color-secondary-700)}.lc-radar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-radar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-radar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-radar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-radar-chart__legend-dot--0{background-color:var(--color-primary-500)}.lc-radar-chart__legend-dot--1{background-color:var(--color-secondary-500)}.lc-radar-chart__legend-dot--2{background-color:var(--color-success-default)}.lc-radar-chart__legend-dot--3{background-color:var(--color-warning-default)}.lc-radar-chart__legend-dot--4{background-color:var(--color-error-default)}.lc-radar-chart__legend-dot--5{background-color:var(--color-info-default)}.lc-radar-chart__legend-dot--6{background-color:var(--color-primary-700)}.lc-radar-chart__legend-dot--7{background-color:var(--color-secondary-700)}.lc-radar-chart__legend-text{color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10141
10228
|
}
|
|
10142
10229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: RadarChartComponent, decorators: [{
|
|
10143
10230
|
type: Component,
|
|
10144
|
-
args: [{ selector: 'lc-radar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [".lc-radar-chart{display:
|
|
10231
|
+
args: [{ selector: 'lc-radar-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-radar-chart\">\n <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Radar chart\" class=\"lc-radar-chart__svg\">\n @for (ring of gridRings(); track $index) {\n <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n }\n\n @for (axis of axisLines(); track $index) {\n <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n }\n\n @for (ser of seriesPolygons(); track ser.label) {\n <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n }\n\n @for (lbl of labelItems(); track lbl.label) {\n <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n }\n </svg>\n\n @if (legendItems().length) {\n <div class=\"lc-radar-chart__legend\">\n @for (item of legendItems(); track item.label) {\n <div class=\"lc-radar-chart__legend-item\">\n <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block}.lc-radar-chart{display:flex;flex-direction:column;align-items:center;gap:.5rem}.lc-radar-chart__svg{overflow:visible}.lc-radar-chart__grid{fill:none;stroke:var(--color-border);stroke-width:1}.lc-radar-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-radar-chart__polygon{transition:fill-opacity .15s ease}.lc-radar-chart__polygon:hover{fill-opacity:.3}.lc-radar-chart__polygon--0{fill:var(--color-primary-500);stroke:var(--color-primary-500)}.lc-radar-chart__polygon--1{fill:var(--color-secondary-500);stroke:var(--color-secondary-500)}.lc-radar-chart__polygon--2{fill:var(--color-success-default);stroke:var(--color-success-default)}.lc-radar-chart__polygon--3{fill:var(--color-warning-default);stroke:var(--color-warning-default)}.lc-radar-chart__polygon--4{fill:var(--color-error-default);stroke:var(--color-error-default)}.lc-radar-chart__polygon--5{fill:var(--color-info-default);stroke:var(--color-info-default)}.lc-radar-chart__polygon--6{fill:var(--color-primary-700);stroke:var(--color-primary-700)}.lc-radar-chart__polygon--7{fill:var(--color-secondary-700);stroke:var(--color-secondary-700)}.lc-radar-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}.lc-radar-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-radar-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-radar-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-radar-chart__legend-dot--0{background-color:var(--color-primary-500)}.lc-radar-chart__legend-dot--1{background-color:var(--color-secondary-500)}.lc-radar-chart__legend-dot--2{background-color:var(--color-success-default)}.lc-radar-chart__legend-dot--3{background-color:var(--color-warning-default)}.lc-radar-chart__legend-dot--4{background-color:var(--color-error-default)}.lc-radar-chart__legend-dot--5{background-color:var(--color-info-default)}.lc-radar-chart__legend-dot--6{background-color:var(--color-primary-700)}.lc-radar-chart__legend-dot--7{background-color:var(--color-secondary-700)}.lc-radar-chart__legend-text{color:var(--color-text-secondary)}\n"] }]
|
|
10145
10232
|
}], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], axes: [{ type: i0.Input, args: [{ isSignal: true, alias: "axes", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], rings: [{ type: i0.Input, args: [{ isSignal: true, alias: "rings", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }] } });
|
|
10146
10233
|
|
|
10147
10234
|
/**
|
|
@@ -10211,6 +10298,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
10211
10298
|
* ```
|
|
10212
10299
|
*/
|
|
10213
10300
|
class WaterfallChartComponent {
|
|
10301
|
+
_el = inject(ElementRef);
|
|
10302
|
+
_destroyRef = inject(DestroyRef);
|
|
10303
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
10304
|
+
constructor() {
|
|
10305
|
+
afterNextRender(() => {
|
|
10306
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
10307
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
10308
|
+
});
|
|
10309
|
+
obs.observe(this._el.nativeElement);
|
|
10310
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
10311
|
+
});
|
|
10312
|
+
}
|
|
10214
10313
|
data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
10215
10314
|
width = input(500, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
10216
10315
|
height = input(250, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
@@ -10225,7 +10324,8 @@ class WaterfallChartComponent {
|
|
|
10225
10324
|
PR = 10;
|
|
10226
10325
|
PT = 15;
|
|
10227
10326
|
PB = 30;
|
|
10228
|
-
|
|
10327
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
10328
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
10229
10329
|
computedBars = computed(() => {
|
|
10230
10330
|
const items = this.data();
|
|
10231
10331
|
if (!items.length)
|
|
@@ -10254,7 +10354,7 @@ class WaterfallChartComponent {
|
|
|
10254
10354
|
const minVal = Math.min(0, ...allVals);
|
|
10255
10355
|
const maxVal = Math.max(0, ...allVals);
|
|
10256
10356
|
const range = maxVal - minVal || 1;
|
|
10257
|
-
const w = this.
|
|
10357
|
+
const w = this.effectiveWidth();
|
|
10258
10358
|
const h = this.height();
|
|
10259
10359
|
const plotW = w - this.PL - this.PR;
|
|
10260
10360
|
const plotH = h - this.PT - this.PB;
|
|
@@ -10309,15 +10409,15 @@ class WaterfallChartComponent {
|
|
|
10309
10409
|
vx1: this.PL, vy1: this.PT,
|
|
10310
10410
|
vx2: this.PL, vy2: this.height() - this.PB,
|
|
10311
10411
|
hx1: this.PL, hy1: this.height() - this.PB,
|
|
10312
|
-
hx2: this.
|
|
10412
|
+
hx2: this.effectiveWidth() - this.PR, hy2: this.height() - this.PB,
|
|
10313
10413
|
}), ...(ngDevMode ? [{ debugName: "axisLine" }] : /* istanbul ignore next */ []));
|
|
10314
10414
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WaterfallChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10315
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: WaterfallChartComponent, isStandalone: true, selector: "lc-waterfall-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showConnectors: { classPropertyName: "showConnectors", publicName: "showConnectors", isSignal: true, isRequired: false, transformFunction: null }, increaseColor: { classPropertyName: "increaseColor", publicName: "increaseColor", isSignal: true, isRequired: false, transformFunction: null }, decreaseColor: { classPropertyName: "decreaseColor", publicName: "decreaseColor", isSignal: true, isRequired: false, transformFunction: null }, totalColor: { classPropertyName: "totalColor", publicName: "totalColor", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg
|
|
10415
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: WaterfallChartComponent, isStandalone: true, selector: "lc-waterfall-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showConnectors: { classPropertyName: "showConnectors", publicName: "showConnectors", isSignal: true, isRequired: false, transformFunction: null }, increaseColor: { classPropertyName: "increaseColor", publicName: "increaseColor", isSignal: true, isRequired: false, transformFunction: null }, decreaseColor: { classPropertyName: "decreaseColor", publicName: "decreaseColor", isSignal: true, isRequired: false, transformFunction: null }, totalColor: { classPropertyName: "totalColor", publicName: "totalColor", isSignal: true, isRequired: false, transformFunction: null }, barGap: { classPropertyName: "barGap", publicName: "barGap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Waterfall chart\" class=\"lc-waterfall-chart\">\n @for (line of computedBars().gridLines; track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-waterfall-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-waterfall-chart__grid-label\">{{ line.label }}</text>\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-waterfall-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-waterfall-chart__axis\" />\n\n @for (conn of computedBars().connectors; track $index) {\n <line [attr.x1]=\"conn.x1\" [attr.y1]=\"conn.y\" [attr.x2]=\"conn.x2\" [attr.y2]=\"conn.y\" class=\"lc-waterfall-chart__connector\" />\n }\n\n @for (bar of computedBars().bars; track bar.label) {\n <rect [attr.x]=\"bar.x\" [attr.y]=\"bar.y\" [attr.width]=\"bar.width\" [attr.height]=\"bar.height\" [attr.fill]=\"bar.color\" rx=\"2\" class=\"lc-waterfall-chart__bar\" />\n @if (showValues()) {\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.valueY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__value\">{{ bar.value >= 0 ? '+' : '' }}{{ bar.value }}</text>\n }\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.labelY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__label\">{{ bar.label }}</text>\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-waterfall-chart{overflow:visible}.lc-waterfall-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-waterfall-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-waterfall-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-waterfall-chart__connector{stroke:var(--color-border-strong);stroke-width:1;stroke-dasharray:2 2}.lc-waterfall-chart__bar{transition:opacity .15s ease}.lc-waterfall-chart__bar:hover{opacity:.8}.lc-waterfall-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-waterfall-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10316
10416
|
}
|
|
10317
10417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: WaterfallChartComponent, decorators: [{
|
|
10318
10418
|
type: Component,
|
|
10319
|
-
args: [{ selector: 'lc-waterfall-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg
|
|
10320
|
-
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showConnectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConnectors", required: false }] }], increaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "increaseColor", required: false }] }], decreaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "decreaseColor", required: false }] }], totalColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalColor", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
10419
|
+
args: [{ selector: 'lc-waterfall-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg width=\"100%\" [attr.height]=\"height()\" [attr.viewBox]=\"viewBox()\" role=\"img\" aria-label=\"Waterfall chart\" class=\"lc-waterfall-chart\">\n @for (line of computedBars().gridLines; track line.y) {\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"line.y\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"line.y\" class=\"lc-waterfall-chart__grid\" />\n <text [attr.x]=\"axisLine().vx1 - 6\" [attr.y]=\"line.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-waterfall-chart__grid-label\">{{ line.label }}</text>\n }\n\n <line [attr.x1]=\"axisLine().vx1\" [attr.y1]=\"axisLine().vy1\" [attr.x2]=\"axisLine().vx2\" [attr.y2]=\"axisLine().vy2\" class=\"lc-waterfall-chart__axis\" />\n <line [attr.x1]=\"axisLine().hx1\" [attr.y1]=\"axisLine().hy1\" [attr.x2]=\"axisLine().hx2\" [attr.y2]=\"axisLine().hy2\" class=\"lc-waterfall-chart__axis\" />\n\n @for (conn of computedBars().connectors; track $index) {\n <line [attr.x1]=\"conn.x1\" [attr.y1]=\"conn.y\" [attr.x2]=\"conn.x2\" [attr.y2]=\"conn.y\" class=\"lc-waterfall-chart__connector\" />\n }\n\n @for (bar of computedBars().bars; track bar.label) {\n <rect [attr.x]=\"bar.x\" [attr.y]=\"bar.y\" [attr.width]=\"bar.width\" [attr.height]=\"bar.height\" [attr.fill]=\"bar.color\" rx=\"2\" class=\"lc-waterfall-chart__bar\" />\n @if (showValues()) {\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.valueY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__value\">{{ bar.value >= 0 ? '+' : '' }}{{ bar.value }}</text>\n }\n <text [attr.x]=\"bar.labelX\" [attr.y]=\"bar.labelY\" text-anchor=\"middle\" class=\"lc-waterfall-chart__label\">{{ bar.label }}</text>\n }\n</svg>\n", styles: [":host{display:block;width:100%}.lc-waterfall-chart{overflow:visible}.lc-waterfall-chart__axis{stroke:var(--color-border);stroke-width:1}.lc-waterfall-chart__grid{stroke:var(--color-border);stroke-width:1;stroke-dasharray:3 3}.lc-waterfall-chart__grid-label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-waterfall-chart__connector{stroke:var(--color-border-strong);stroke-width:1;stroke-dasharray:2 2}.lc-waterfall-chart__bar{transition:opacity .15s ease}.lc-waterfall-chart__bar:hover{opacity:.8}.lc-waterfall-chart__value{font-size:.625rem;font-weight:600;fill:var(--color-text-secondary)}.lc-waterfall-chart__label{font-size:.6875rem;fill:var(--color-text-secondary)}\n"] }]
|
|
10420
|
+
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showConnectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "showConnectors", required: false }] }], increaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "increaseColor", required: false }] }], decreaseColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "decreaseColor", required: false }] }], totalColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalColor", required: false }] }], barGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "barGap", required: false }] }] } });
|
|
10321
10421
|
|
|
10322
10422
|
/**
|
|
10323
10423
|
* Calendar component for date-based event display and navigation.
|
|
@@ -10668,11 +10768,11 @@ class GanttChartComponent {
|
|
|
10668
10768
|
return new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
|
10669
10769
|
}
|
|
10670
10770
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GanttChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10671
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 } }, 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\">Aufgaben</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 id=\"arrowhead\" 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 marker-end=\"url(#arrowhead)\"\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 [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 (click)=\"onTaskClick(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: [".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--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 });
|
|
10771
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", 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 } }, 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\">Aufgaben</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 id=\"arrowhead\" 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 marker-end=\"url(#arrowhead)\"\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 [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 (click)=\"onTaskClick(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--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 });
|
|
10672
10772
|
}
|
|
10673
10773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: GanttChartComponent, decorators: [{
|
|
10674
10774
|
type: Component,
|
|
10675
|
-
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\">Aufgaben</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 id=\"arrowhead\" 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 marker-end=\"url(#arrowhead)\"\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 [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 (click)=\"onTaskClick(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: [".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--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"] }]
|
|
10775
|
+
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\">Aufgaben</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 id=\"arrowhead\" 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 marker-end=\"url(#arrowhead)\"\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 [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 (click)=\"onTaskClick(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--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"] }]
|
|
10676
10776
|
}], 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 }] }], taskClick: [{ type: i0.Output, args: ["taskClick"] }] } });
|
|
10677
10777
|
|
|
10678
10778
|
/**
|
|
@@ -12760,6 +12860,18 @@ const DEFAULT_COLORS = [
|
|
|
12760
12860
|
'var(--color-warning-default)',
|
|
12761
12861
|
];
|
|
12762
12862
|
class FunnelChartComponent {
|
|
12863
|
+
_el = inject(ElementRef);
|
|
12864
|
+
_destroyRef = inject(DestroyRef);
|
|
12865
|
+
_containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []));
|
|
12866
|
+
constructor() {
|
|
12867
|
+
afterNextRender(() => {
|
|
12868
|
+
const obs = new ResizeObserver(([entry]) => {
|
|
12869
|
+
this._containerWidth.set(entry.contentRect.width);
|
|
12870
|
+
});
|
|
12871
|
+
obs.observe(this._el.nativeElement);
|
|
12872
|
+
this._destroyRef.onDestroy(() => obs.disconnect());
|
|
12873
|
+
});
|
|
12874
|
+
}
|
|
12763
12875
|
steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
12764
12876
|
width = input(400, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
12765
12877
|
height = input(300, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
@@ -12767,13 +12879,14 @@ class FunnelChartComponent {
|
|
|
12767
12879
|
showValues = input(true, ...(ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []));
|
|
12768
12880
|
showPercentage = input(true, ...(ngDevMode ? [{ debugName: "showPercentage" }] : /* istanbul ignore next */ []));
|
|
12769
12881
|
orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
|
|
12770
|
-
|
|
12882
|
+
effectiveWidth = computed(() => this._containerWidth() || this.width(), ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
|
|
12883
|
+
viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
|
|
12771
12884
|
renderedSteps = computed(() => {
|
|
12772
12885
|
const steps = this.steps();
|
|
12773
12886
|
if (!steps.length)
|
|
12774
12887
|
return [];
|
|
12775
12888
|
const maxVal = Math.max(...steps.map(s => s.value));
|
|
12776
|
-
const w = this.
|
|
12889
|
+
const w = this.effectiveWidth();
|
|
12777
12890
|
const h = this.height();
|
|
12778
12891
|
const isV = this.orientation() === 'vertical';
|
|
12779
12892
|
const count = steps.length;
|
|
@@ -12839,12 +12952,12 @@ class FunnelChartComponent {
|
|
|
12839
12952
|
}
|
|
12840
12953
|
}, ...(ngDevMode ? [{ debugName: "renderedSteps" }] : /* istanbul ignore next */ []));
|
|
12841
12954
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12842
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FunnelChartComponent, isStandalone: true, selector: "lc-funnel-chart", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-funnel-chart\">\n <svg\n
|
|
12955
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: FunnelChartComponent, isStandalone: true, selector: "lc-funnel-chart", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, showPercentage: { classPropertyName: "showPercentage", publicName: "showPercentage", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"lc-funnel-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Funnel chart\"\n class=\"lc-funnel-chart__svg\"\n >\n @for (step of renderedSteps(); track step.label) {\n <path\n [attr.d]=\"step.path\"\n [attr.fill]=\"step.color\"\n class=\"lc-funnel-chart__step\"\n />\n\n @if (showLabels()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY - 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__label\"\n >{{ step.label }}</text>\n }\n\n @if (showValues() || showPercentage()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY + 12\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__value\"\n >\n @if (showValues()) { {{ step.value }} }\n @if (showValues() && showPercentage()) { \u00B7 }\n @if (showPercentage()) { {{ step.pct }}% }\n </text>\n }\n }\n </svg>\n</div>\n", styles: [":host{display:block}.lc-funnel-chart{display:flex;flex-direction:column;align-items:center;width:100%}.lc-funnel-chart__svg{overflow:visible}.lc-funnel-chart__step{opacity:.85;transition:opacity .15s}.lc-funnel-chart__step:hover{opacity:1}.lc-funnel-chart__label{font-size:.75rem;font-weight:600;fill:#fff;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.lc-funnel-chart__value{font-size:.625rem;fill:#ffffffd9;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12843
12956
|
}
|
|
12844
12957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: FunnelChartComponent, decorators: [{
|
|
12845
12958
|
type: Component,
|
|
12846
|
-
args: [{ selector: 'lc-funnel-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-funnel-chart\">\n <svg\n
|
|
12847
|
-
}], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
|
|
12959
|
+
args: [{ selector: 'lc-funnel-chart', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"lc-funnel-chart\">\n <svg\n width=\"100%\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n aria-label=\"Funnel chart\"\n class=\"lc-funnel-chart__svg\"\n >\n @for (step of renderedSteps(); track step.label) {\n <path\n [attr.d]=\"step.path\"\n [attr.fill]=\"step.color\"\n class=\"lc-funnel-chart__step\"\n />\n\n @if (showLabels()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY - 2\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__label\"\n >{{ step.label }}</text>\n }\n\n @if (showValues() || showPercentage()) {\n <text\n [attr.x]=\"step.labelX\"\n [attr.y]=\"step.labelY + 12\"\n text-anchor=\"middle\"\n dominant-baseline=\"auto\"\n class=\"lc-funnel-chart__value\"\n >\n @if (showValues()) { {{ step.value }} }\n @if (showValues() && showPercentage()) { \u00B7 }\n @if (showPercentage()) { {{ step.pct }}% }\n </text>\n }\n }\n </svg>\n</div>\n", styles: [":host{display:block}.lc-funnel-chart{display:flex;flex-direction:column;align-items:center;width:100%}.lc-funnel-chart__svg{overflow:visible}.lc-funnel-chart__step{opacity:.85;transition:opacity .15s}.lc-funnel-chart__step:hover{opacity:1}.lc-funnel-chart__label{font-size:.75rem;font-weight:600;fill:#fff;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.3)}.lc-funnel-chart__value{font-size:.625rem;fill:#ffffffd9;pointer-events:none}\n"] }]
|
|
12960
|
+
}], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], showPercentage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentage", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
|
|
12848
12961
|
|
|
12849
12962
|
class TagInputComponent {
|
|
12850
12963
|
placeholder = input('Add tag…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
@@ -14687,6 +14800,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
14687
14800
|
args: ['document:click', ['$event']]
|
|
14688
14801
|
}] } });
|
|
14689
14802
|
|
|
14803
|
+
class StageListComponent {
|
|
14804
|
+
stages = input.required(...(ngDevMode ? [{ debugName: "stages" }] : /* istanbul ignore next */ []));
|
|
14805
|
+
max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
14806
|
+
showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
|
|
14807
|
+
showBar = input(true, ...(ngDevMode ? [{ debugName: "showBar" }] : /* istanbul ignore next */ []));
|
|
14808
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
14809
|
+
clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
|
|
14810
|
+
emptyText = input('', ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
|
|
14811
|
+
stageClick = output();
|
|
14812
|
+
isEmpty = computed(() => this.stages().length === 0, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
|
|
14813
|
+
resolvedMax = computed(() => {
|
|
14814
|
+
const explicitMax = this.max();
|
|
14815
|
+
if (typeof explicitMax === 'number' && Number.isFinite(explicitMax) && explicitMax > 0) {
|
|
14816
|
+
return explicitMax;
|
|
14817
|
+
}
|
|
14818
|
+
const numericValues = this.stages()
|
|
14819
|
+
.map((stage) => (Number.isFinite(stage.value) ? stage.value : 0));
|
|
14820
|
+
return Math.max(1, ...numericValues);
|
|
14821
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedMax" }] : /* istanbul ignore next */ []));
|
|
14822
|
+
resolveColor(stage) {
|
|
14823
|
+
if (typeof stage.color === 'string' && stage.color.trim()) {
|
|
14824
|
+
return stage.color;
|
|
14825
|
+
}
|
|
14826
|
+
return 'var(--lc-color-primary-500, var(--color-primary-500))';
|
|
14827
|
+
}
|
|
14828
|
+
fillWidth(stage) {
|
|
14829
|
+
const value = Number.isFinite(stage.value) ? stage.value : 0;
|
|
14830
|
+
if (value <= 0) {
|
|
14831
|
+
return '0%';
|
|
14832
|
+
}
|
|
14833
|
+
const maxValue = this.resolvedMax();
|
|
14834
|
+
const safeMax = maxValue > 0 ? maxValue : 1;
|
|
14835
|
+
const pct = Math.round((value / safeMax) * 100);
|
|
14836
|
+
const clampedPct = Math.max(0, Math.min(100, pct));
|
|
14837
|
+
return `max(2px, ${clampedPct}%)`;
|
|
14838
|
+
}
|
|
14839
|
+
onStageClick(stage) {
|
|
14840
|
+
if (!this.clickable()) {
|
|
14841
|
+
return;
|
|
14842
|
+
}
|
|
14843
|
+
this.stageClick.emit(stage);
|
|
14844
|
+
}
|
|
14845
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14846
|
+
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 });
|
|
14847
|
+
}
|
|
14848
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: StageListComponent, decorators: [{
|
|
14849
|
+
type: Component,
|
|
14850
|
+
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"] }]
|
|
14851
|
+
}], 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"] }] } });
|
|
14852
|
+
|
|
14690
14853
|
/**
|
|
14691
14854
|
* Life-Cockpit Design System (UI Kit)
|
|
14692
14855
|
*
|
|
@@ -14709,5 +14872,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
|
|
|
14709
14872
|
* Generated bundle index. Do not edit.
|
|
14710
14873
|
*/
|
|
14711
14874
|
|
|
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 };
|
|
14875
|
+
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
14876
|
//# sourceMappingURL=life-cockpit-angular-ui-kit.mjs.map
|