@tetacom/svg-charts 1.7.17 → 1.7.18

package/fesm2022/tetacom-svg-charts.mjs

@@ -2675,7 +2675,7 @@ class SeriesControlsComponent {
         this.chartService.clearSeriesSettings();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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 }); }
+    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 style=\"padding: 2px 8px\">\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SeriesControlsComponent, decorators: [{
             type: Component,
@@ -2698,7 +2698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ScrollableComponent,
                         TranslocoPipe,
                         InputComponent,
-                    ], 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" }]
+                    ], 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 style=\"padding: 2px 8px\">\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" }]
         }] });
 
 class ChartContainerComponent {