@tetacom/svg-charts 1.7.15 → 1.7.16
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.
|
@@ -7,7 +7,7 @@ import { maxIndex } from 'd3-array';
|
|
|
7
7
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
8
8
|
import * as i3 from '@angular/platform-browser';
|
|
9
9
|
import { AsyncPipe, NgTemplateOutlet, KeyValuePipe, NgStyle } from '@angular/common';
|
|
10
|
-
import { Align as Align$1, TetaSize, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective,
|
|
10
|
+
import { Align as Align$1, TetaSize, ButtonComponent, DropdownComponent, DropdownContentDirective, DropdownHeadDirective, IconComponent, AccordionComponent, AccordionHeadComponent, AccordionItemComponent, AccordionContentDirective, ColorInputComponent, SelectComponent, SelectOptionDirective, SelectValueDirective, ScrollableComponent, InputComponent, CheckboxComponent } from '@tetacom/ng-components';
|
|
11
11
|
import * as i1 from '@angular/forms';
|
|
12
12
|
import { FormsModule } from '@angular/forms';
|
|
13
13
|
import { TranslocoPipe } from '@jsverse/transloco';
|
|
@@ -2620,6 +2620,7 @@ class SeriesControlsComponent {
|
|
|
2620
2620
|
});
|
|
2621
2621
|
this.strokeWidth = [
|
|
2622
2622
|
{ id: 1, value: 1 },
|
|
2623
|
+
{ id: 1.5, value: 1.5 },
|
|
2623
2624
|
{ id: 2, value: 2 },
|
|
2624
2625
|
{ id: 3, value: 3 },
|
|
2625
2626
|
{ id: 4, value: 4 },
|
|
@@ -2627,7 +2628,7 @@ class SeriesControlsComponent {
|
|
|
2627
2628
|
];
|
|
2628
2629
|
this.strokeArray = [
|
|
2629
2630
|
{ id: '', value: 'solid' },
|
|
2630
|
-
{ id: '4,
|
|
2631
|
+
{ id: '4, 4', value: 'dashed' },
|
|
2631
2632
|
{ id: '2, 2', value: 'dotted' },
|
|
2632
2633
|
];
|
|
2633
2634
|
this.seriesType = [
|
|
@@ -2672,7 +2673,7 @@ class SeriesControlsComponent {
|
|
|
2672
2673
|
this.chartService.clearSeriesSettings();
|
|
2673
2674
|
}
|
|
2674
2675
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2675
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head>\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n <teta-
|
|
2676
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SeriesControlsComponent, isStandalone: true, selector: "teta-series-controls", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head>\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n [square]=\"true\">\n <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n </teta-button>\n <teta-color-input [ngModel]=\"seriesItem.color\"\n (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n </div>\n {{ seriesItem.name }}\n </div>\n </teta-accordion-head>\n <ng-template tetaAccordionContent>\n <div class=\"column gap-8\">\n <teta-input [label]=\"'charts.line_width' | transloco\">\n <teta-select [options]=\"strokeWidth\"\n [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;\"\n [style.height.px]=\"option.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;\"\n [style.height.px]=\"value?.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.line_style' | transloco\">\n <teta-select [options]=\"strokeArray\"\n [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"option.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"value?.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.chart_type' | transloco\">\n <teta-select [options]=\"seriesType\"\n [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n [valueRef]=\"'id'\"\n [textRef]=\"'value'\"\n (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n [allowNull]=\"false\">\n </teta-select>\n </teta-input>\n </div>\n </ng-template>\n </teta-accordion-item>\n }\n </teta-accordion>\n </teta-scrollable>\n <div class=\"row padding-3\">\n <button teta-button\n [palette]=\"'red'\"\n [view]=\"'ghost'\"\n (click)=\"clear()\">\n <teta-icon [name]=\"'erase'\"></teta-icon>\n {{ 'charts.reset' | transloco }}\n </button>\n </div>\n </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: AccordionComponent, selector: "teta-accordion" }, { kind: "component", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: ["showToggle"] }, { kind: "component", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: ["open", "disabled", "divider", "viewType"] }, { kind: "directive", type: AccordionContentDirective, selector: "[tetaAccordionContent]" }, { kind: "component", type: ColorInputComponent, selector: "teta-color-input", inputs: ["disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "directive", type: SelectOptionDirective, selector: "[tetaSelectOption]" }, { kind: "directive", type: SelectValueDirective, selector: "[tetaSelectValue]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2676
2677
|
}
|
|
2677
2678
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
|
|
2678
2679
|
type: Component,
|
|
@@ -2695,7 +2696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
2695
2696
|
ScrollableComponent,
|
|
2696
2697
|
TranslocoPipe,
|
|
2697
2698
|
InputComponent,
|
|
2698
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head>\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center\" (click)=\"$event.stopPropagation()\">\n <teta-
|
|
2699
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown [align]=\"Align.right\"\n #dropdown=\"dropdown\"\n [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [class.active]=\"dropdown.open\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\">\n <teta-icon [name]=\"'gear'\"></teta-icon>\n {{ 'charts.settings' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column shadow-2\" style=\"min-width: 200px;\">\n @if (disabledSeries().length > 0) {\n <div class=\"row padding-h-3 padding-top-3\">\n <teta-dropdown [align]=\"Align.left\" [appendToBody]=\"true\">\n <button teta-button\n tetaDropdownHead\n [palette]=\"'primary'\">\n <teta-icon [name]=\"'add'\"></teta-icon>\n {{ 'charts.add_curve' | transloco }}\n </button>\n <div tetaDropdownContent class=\"column list shadow-2\" style=\"min-width: 200px;\"\n (click)=\"$event.stopPropagation();\">\n @for (seriesItem of disabledSeries(); track seriesItem.id) {\n <div class=\"list-item list-item_interactive\"\n (click)=\"$event.stopPropagation();setSeriesEnabled(seriesItem, true)\">\n {{ seriesItem.name }}\n </div>\n }\n </div>\n </teta-dropdown>\n </div>\n }\n <teta-scrollable class=\"column column_auto\" [contentClass]=\"'column'\">\n <teta-accordion>\n @for (seriesItem of enabledSeries(); track seriesItem.id) {\n <teta-accordion-item [viewType]=\"'rounded'\" [divider]=\"true\">\n <teta-accordion-head>\n <div class=\"row align-center gap-12\">\n <div class=\"row align-center gap-8\" (click)=\"$event.stopPropagation()\">\n <teta-button (click)=\"setSeriesEnabled(seriesItem, false)\"\n [palette]=\"'text'\"\n [view]=\"'ghost'\"\n [square]=\"true\">\n <teta-icon [name]=\"'delete'\" [palette]=\"'red'\"></teta-icon>\n </teta-button>\n <teta-color-input [ngModel]=\"seriesItem.color\"\n (ngModelChange)=\"setSeriesColor(seriesItem, $event)\"></teta-color-input>\n </div>\n {{ seriesItem.name }}\n </div>\n </teta-accordion-head>\n <ng-template tetaAccordionContent>\n <div class=\"column gap-8\">\n <teta-input [label]=\"'charts.line_width' | transloco\">\n <teta-select [options]=\"strokeWidth\"\n [ngModel]=\"seriesItem.style?.strokeWidth ?? 1\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeWidth(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;\"\n [style.height.px]=\"option.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;\"\n [style.height.px]=\"value?.id\"\n [style.background-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.line_style' | transloco\">\n <teta-select [options]=\"strokeArray\"\n [ngModel]=\"seriesItem.style?.strokeDasharray ?? ''\"\n [valueRef]=\"'id'\"\n (ngModelChange)=\"setSeriesStrokeDasharray(seriesItem, $event)\"\n [allowNull]=\"false\">\n <ng-template tetaSelectOption let-option>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"option.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n <ng-template tetaSelectValue let-value>\n <div style=\"width: 50px;border:0;border-top: 2px;\"\n [style.border-style]=\"value?.value\"\n [style.border-color]=\"seriesItem.color\"></div>\n </ng-template>\n </teta-select>\n </teta-input>\n <teta-input [label]=\"'charts.chart_type' | transloco\">\n <teta-select [options]=\"seriesType\"\n [ngModel]=\"seriesItem.type ?? SeriesType.line\"\n [valueRef]=\"'id'\"\n [textRef]=\"'value'\"\n (ngModelChange)=\"setSeriesType(seriesItem, $event)\"\n [allowNull]=\"false\">\n </teta-select>\n </teta-input>\n </div>\n </ng-template>\n </teta-accordion-item>\n }\n </teta-accordion>\n </teta-scrollable>\n <div class=\"row padding-3\">\n <button teta-button\n [palette]=\"'red'\"\n [view]=\"'ghost'\"\n (click)=\"clear()\">\n <teta-icon [name]=\"'erase'\"></teta-icon>\n {{ 'charts.reset' | transloco }}\n </button>\n </div>\n </div>\n</teta-dropdown>\n" }]
|
|
2699
2700
|
}] });
|
|
2700
2701
|
|
|
2701
2702
|
class ChartContainerComponent {
|
|
@@ -2884,11 +2885,11 @@ class LegendComponent {
|
|
|
2884
2885
|
this.chartService.updateSeries(series);
|
|
2885
2886
|
}
|
|
2886
2887
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LegendComponent, deps: [{ token: ChartService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2887
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LegendComponent, isStandalone: true, selector: "teta-legend", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "@for (seriesItem of series(); track seriesItem.id) {\n @if (seriesItem?.showInLegend !== false && seriesItem.enabled) {\n <div>\n <div class=\"legend-item cursor-pointer\" (click)=\"click(seriesItem, !seriesItem.visible)\">\n <div class=\"legend-icon-form\"\n [style.height.px]=\"getHeight(seriesItem)\"\n [style.border-top-color]=\"seriesItem.visible ? seriesItem.color : 'var(--color-text-30)'\"\n [style.border-top-style]=\"seriesItem.style?.strokeDasharray ? 'dashed' : 'solid'\"\n [style.border-width.px]=\"seriesItem.style?.strokeDasharray ? 1 : 2\"></div>\n <div class=\"legend-label\"\n style=\"user-select: none\"\n [style.text-decoration]=\"seriesItem.visible ? 'none' : 'line-through'\">\n {{ seriesItem.name }}\n </div>\n </div>\n </div>\n }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2888
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LegendComponent, isStandalone: true, selector: "teta-legend", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "@for (seriesItem of series(); track seriesItem.id) {\n @if (seriesItem?.showInLegend !== false && seriesItem.enabled) {\n <div>\n <div class=\"legend-item cursor-pointer\" (click)=\"click(seriesItem, !seriesItem.visible)\">\n <div class=\"legend-icon-form\"\n [style.height.px]=\"getHeight(seriesItem)\"\n [style.border-top-color]=\"seriesItem.visible ? seriesItem.color : 'var(--color-text-30)'\"\n [style.border-top-style]=\"seriesItem.style?.strokeDasharray ? 'dashed' : 'solid'\"\n [style.border-width.px]=\"seriesItem.style?.strokeDasharray ? 1 : 2\"></div>\n <div class=\"legend-label font-caption\"\n style=\"user-select: none\"\n [style.text-decoration]=\"seriesItem.visible ? 'none' : 'line-through'\">\n {{ seriesItem.name }}\n </div>\n </div>\n </div>\n }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2888
2889
|
}
|
|
2889
2890
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LegendComponent, decorators: [{
|
|
2890
2891
|
type: Component,
|
|
2891
|
-
args: [{ selector: 'teta-legend', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (seriesItem of series(); track seriesItem.id) {\n @if (seriesItem?.showInLegend !== false && seriesItem.enabled) {\n <div>\n <div class=\"legend-item cursor-pointer\" (click)=\"click(seriesItem, !seriesItem.visible)\">\n <div class=\"legend-icon-form\"\n [style.height.px]=\"getHeight(seriesItem)\"\n [style.border-top-color]=\"seriesItem.visible ? seriesItem.color : 'var(--color-text-30)'\"\n [style.border-top-style]=\"seriesItem.style?.strokeDasharray ? 'dashed' : 'solid'\"\n [style.border-width.px]=\"seriesItem.style?.strokeDasharray ? 1 : 2\"></div>\n <div class=\"legend-label\"\n style=\"user-select: none\"\n [style.text-decoration]=\"seriesItem.visible ? 'none' : 'line-through'\">\n {{ seriesItem.name }}\n </div>\n </div>\n </div>\n }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
|
|
2892
|
+
args: [{ selector: 'teta-legend', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (seriesItem of series(); track seriesItem.id) {\n @if (seriesItem?.showInLegend !== false && seriesItem.enabled) {\n <div>\n <div class=\"legend-item cursor-pointer\" (click)=\"click(seriesItem, !seriesItem.visible)\">\n <div class=\"legend-icon-form\"\n [style.height.px]=\"getHeight(seriesItem)\"\n [style.border-top-color]=\"seriesItem.visible ? seriesItem.color : 'var(--color-text-30)'\"\n [style.border-top-style]=\"seriesItem.style?.strokeDasharray ? 'dashed' : 'solid'\"\n [style.border-width.px]=\"seriesItem.style?.strokeDasharray ? 1 : 2\"></div>\n <div class=\"legend-label font-caption\"\n style=\"user-select: none\"\n [style.text-decoration]=\"seriesItem.visible ? 'none' : 'line-through'\">\n {{ seriesItem.name }}\n </div>\n </div>\n </div>\n }\n}\n", styles: [":host{display:flex;grid-gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-evenly}:host .legend-item{display:flex;align-items:center}:host .legend-icon-form{width:12px}:host .legend-label{margin-left:5px}\n"] }]
|
|
2892
2893
|
}], ctorParameters: () => [{ type: ChartService }], propDecorators: { classLegend: [{
|
|
2893
2894
|
type: HostBinding,
|
|
2894
2895
|
args: ['class.padding-bottom-4']
|