@tetacom/svg-charts 1.4.21 → 1.4.23

package/{fesm2020 → fesm2022}/tetacom-svg-charts.mjs

@@ -18,11 +18,11 @@ var ZoomType;
 })(ZoomType || (ZoomType = {}));
 
 class ChartBounds {
+    top = 0;
+    right = 0;
+    bottom = 0;
+    left = 0;
     constructor(options) {
-        this.top = 0;
-        this.right = 0;
-        this.bottom = 0;
-        this.left = 0;
         this.top = options?.top || 0;
         this.right = options?.right || 0;
         this.bottom = options?.bottom || 0;
@@ -137,18 +137,34 @@ const defaultSeriesConfig = () => ({
 });
 
 class ChartService {
+    id;
+    config;
+    size;
+    pointerMove;
+    tooltips;
+    plotBandEvent;
+    plotLineMove;
+    plotBandClick;
+    plotBandContextMenu;
+    pointMove;
+    annotationMove;
+    annotationClick;
+    annotationContextMenu;
+    chartClick;
+    chartContextMenu;
+    config$ = new BehaviorSubject(defaultChartConfig());
+    size$ = new BehaviorSubject(null);
+    pointerMove$ = new Subject();
+    tooltips$ = new BehaviorSubject(new Map());
+    plotBandEvent$ = new Subject();
+    plotLineMove$ = new Subject();
+    pointMove$ = new Subject();
+    chartClick$ = new Subject();
+    chartContextMenu$ = new Subject();
+    annotationEvent$ = new Subject();
+    annotationMove$ = new Subject();
+    static _hiddenSeriesPostfix = 'hidden_series';
     constructor() {
-        this.config$ = new BehaviorSubject(defaultChartConfig());
-        this.size$ = new BehaviorSubject(null);
-        this.pointerMove$ = new Subject();
-        this.tooltips$ = new BehaviorSubject(new Map());
-        this.plotBandEvent$ = new Subject();
-        this.plotLineMove$ = new Subject();
-        this.pointMove$ = new Subject();
-        this.chartClick$ = new Subject();
-        this.chartContextMenu$ = new Subject();
-        this.annotationEvent$ = new Subject();
-        this.annotationMove$ = new Subject();
         this.id = of((Date.now() + Math.random()).toString(36));
         this.config = this.config$.asObservable().pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), map(this.restoreLocalStorage), shareReplay({
             bufferSize: 1,
@@ -347,11 +363,10 @@ class ChartService {
         }
         return config;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ChartService, providedIn: 'root' });
 }
-ChartService._hiddenSeriesPostfix = 'hidden_series';
-ChartService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ChartService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ChartService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -365,6 +380,7 @@ var AxisOrientation;
 })(AxisOrientation || (AxisOrientation = {}));
 
 class BroadcastService {
+    zoomEmitter;
     constructor() {
         this.zoomEmitter = new ReplaySubject(1);
     }
@@ -374,10 +390,10 @@ class BroadcastService {
     subscribeToZoom(channel) {
         return this.zoomEmitter.asObservable().pipe(filter((msg) => channel && msg.channel === channel));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BroadcastService, providedIn: 'root' });
 }
-BroadcastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-BroadcastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BroadcastService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BroadcastService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -385,10 +401,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class ZoomService {
+    _broadcast;
+    _chart;
+    zoomed;
+    zoomed$ = new BehaviorSubject(null);
+    broadcastChannel;
+    broadcastSub;
     constructor(_broadcast, _chart) {
         this._broadcast = _broadcast;
         this._chart = _chart;
-        this.zoomed$ = new BehaviorSubject(null);
         this.zoomed = this.zoomed$.asObservable().pipe(shareReplay({
             bufferSize: 1,
             refCount: true
@@ -446,10 +467,10 @@ class ZoomService {
     ngOnDestroy() {
         this.broadcastSub?.unsubscribe();
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ZoomService, deps: [{ token: BroadcastService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ZoomService, providedIn: 'root' });
 }
-ZoomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, deps: [{ token: BroadcastService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Injectable });
-ZoomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ZoomService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -472,11 +493,9 @@ function generateTicks(extremes, count = 10) {
 }
 
 class AxisSizeBuilder {
-    constructor() {
-        this.titlePadding = 11;
-        this.basePadding = 16;
-        this.backupRatio = 0.58;
-    }
+    titlePadding = 11;
+    basePadding = 16;
+    backupRatio = 0.58;
     build(settings) {
         let finalPadding = this.basePadding;
         if (settings.orientation === AxisOrientation.y) {
@@ -501,12 +520,10 @@ class AxisSizeBuilder {
 }
 
 class ExtremesBuilder {
-    constructor() {
-        this.extentAccessorMap = new Map()
-            .set(AxisOrientation.x, (_) => _.x)
-            .set(AxisOrientation.y, (_) => _.y);
-        this.extremes = [0, 0];
-    }
+    extentAccessorMap = new Map()
+        .set(AxisOrientation.x, (_) => _.x)
+        .set(AxisOrientation.y, (_) => _.y);
+    extremes = [0, 0];
     build(settings) {
         const options = settings.options;
         const hasMin = options?.min != null;
@@ -533,25 +550,32 @@ class ExtremesBuilder {
 }
 
 class Axis {
+    chartConfig;
+    _orientation;
+    _index;
+    _extremes = [0, 0];
+    _selfSize;
+    _ticksValues;
+    _options;
+    _originDomain = [0, 0];
+    _scale;
+    defaultFormatters = new Map()
+        .set(ScaleType.linear, d3.format(',.5~r'))
+        .set(ScaleType.time, d3.timeFormat('%d.%m.%Y'))
+        .set(ScaleType.log, d3.format('~s'))
+        .set(ScaleType.symlog, d3.format('~s'))
+        .set(ScaleType.pow, d3.format('~s'))
+        .set(ScaleType.sqrt, d3.format('~s'))
+        .set(ScaleType.band, (_) => { return _; });
+    defaultScales = new Map()
+        .set(ScaleType.linear, d3.scaleLinear)
+        .set(ScaleType.log, d3.scaleLog)
+        .set(ScaleType.symlog, d3.scaleSymlog)
+        .set(ScaleType.pow, d3.scalePow)
+        .set(ScaleType.sqrt, d3.scaleSqrt)
+        .set(ScaleType.time, d3.scaleTime)
+        .set(ScaleType.band, d3.scaleBand);
     constructor(config) {
-        this._extremes = [0, 0];
-        this._originDomain = [0, 0];
-        this.defaultFormatters = new Map()
-            .set(ScaleType.linear, d3.format(',.5~r'))
-            .set(ScaleType.time, d3.timeFormat('%d.%m.%Y'))
-            .set(ScaleType.log, d3.format('~s'))
-            .set(ScaleType.symlog, d3.format('~s'))
-            .set(ScaleType.pow, d3.format('~s'))
-            .set(ScaleType.sqrt, d3.format('~s'))
-            .set(ScaleType.band, (_) => { return _; });
-        this.defaultScales = new Map()
-            .set(ScaleType.linear, d3.scaleLinear)
-            .set(ScaleType.log, d3.scaleLog)
-            .set(ScaleType.symlog, d3.scaleSymlog)
-            .set(ScaleType.pow, d3.scalePow)
-            .set(ScaleType.sqrt, d3.scaleSqrt)
-            .set(ScaleType.time, d3.scaleTime)
-            .set(ScaleType.band, d3.scaleBand);
         this.chartConfig = config;
     }
     /**
@@ -657,6 +681,12 @@ class Axis {
 }
 
 class ZoomMessage {
+    eventType;
+    element;
+    axis;
+    domain;
+    chartId;
+    style;
     constructor(options) {
         this.eventType = options?.eventType;
         this.element = options?.element;
@@ -667,6 +697,9 @@ class ZoomMessage {
     }
 }
 class BrushMessage {
+    chartId;
+    selection;
+    mode;
     constructor(options) {
         this.chartId = options?.chartId;
         this.selection = options?.selection;
@@ -675,19 +708,22 @@ class BrushMessage {
 }
 
 class ScaleService {
+    chartService;
+    zoomService;
+    scales;
+    transformCacheX = new Map();
+    transformCacheY = new Map();
+    scaleMapping = new Map()
+        .set(ScaleType.linear, d3.scaleLinear)
+        .set(ScaleType.time, d3.scaleTime)
+        .set(ScaleType.log, d3.scaleLog)
+        .set(ScaleType.symlog, d3.scaleSymlog)
+        .set(ScaleType.pow, d3.scalePow)
+        .set(ScaleType.sqrt, d3.scaleSqrt)
+        .set(ScaleType.band, d3.scaleBand);
     constructor(chartService, zoomService) {
         this.chartService = chartService;
         this.zoomService = zoomService;
-        this.transformCacheX = new Map();
-        this.transformCacheY = new Map();
-        this.scaleMapping = new Map()
-            .set(ScaleType.linear, d3.scaleLinear)
-            .set(ScaleType.time, d3.scaleTime)
-            .set(ScaleType.log, d3.scaleLog)
-            .set(ScaleType.symlog, d3.scaleSymlog)
-            .set(ScaleType.pow, d3.scalePow)
-            .set(ScaleType.sqrt, d3.scaleSqrt)
-            .set(ScaleType.band, d3.scaleBand);
         this.scales = combineLatest([
             this.chartService.size,
             this.chartService.config,
@@ -856,10 +892,10 @@ class ScaleService {
             });
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScaleService, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScaleService, providedIn: 'root' });
 }
-ScaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScaleService, deps: [{ token: ChartService }, { token: ZoomService }], target: i0.ɵɵFactoryTarget.Injectable });
-ScaleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScaleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScaleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScaleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -867,17 +903,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
         }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }]; } });
 
 class BrushService {
+    brushDomain;
+    _brushDomain = new ReplaySubject(1);
     constructor() {
-        this._brushDomain = new ReplaySubject(1);
         this.brushDomain = this._brushDomain.asObservable();
     }
     setBrush(brush) {
         this._brushDomain.next(brush);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BrushService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BrushService, providedIn: 'root' });
 }
-BrushService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-BrushService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BrushService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -892,14 +929,12 @@ var BrushType;
 })(BrushType || (BrushType = {}));
 
 class SeriesBaseComponent {
-    constructor(svc, cdr, scaleService, zoomService, element, zone) {
-        this.svc = svc;
-        this.cdr = cdr;
-        this.scaleService = scaleService;
-        this.zoomService = zoomService;
-        this.element = element;
-        this.zone = zone;
-    }
+    svc;
+    cdr;
+    scaleService;
+    zoomService;
+    element;
+    zone;
     set config(config) {
         this._config = config;
     }
@@ -912,12 +947,22 @@ class SeriesBaseComponent {
     get series() {
         return this._series;
     }
+    _series;
+    _config;
+    constructor(svc, cdr, scaleService, zoomService, element, zone) {
+        this.svc = svc;
+        this.cdr = cdr;
+        this.scaleService = scaleService;
+        this.zoomService = zoomService;
+        this.element = element;
+        this.zone = zone;
+    }
     ngOnInit() {
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SeriesBaseComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SeriesBaseComponent, selector: "ng-component", inputs: { config: "config", series: "series" }, ngImport: i0, template: '', isInline: true });
 }
-SeriesBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesBaseComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-SeriesBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SeriesBaseComponent, selector: "ng-component", inputs: { config: "config", series: "series" }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SeriesBaseComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -929,6 +974,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class LinearSeriesBase extends SeriesBaseComponent {
+    svc;
+    cdr;
+    scaleService;
+    zoomService;
+    element;
+    defaultClipPointsMapping = new Map();
+    transform;
+    display;
+    path;
+    x;
+    y;
+    markers;
+    __series;
+    _update = new BehaviorSubject(null);
+    set series(series) {
+        this.__series = series;
+        this.markers = this.__series.data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined && _?.x !== null && _?.y !== null);
+    }
+    get series() {
+        return this.__series;
+    }
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -936,15 +1002,6 @@ class LinearSeriesBase extends SeriesBaseComponent {
         this.scaleService = scaleService;
         this.zoomService = zoomService;
         this.element = element;
-        this.defaultClipPointsMapping = new Map();
-        this._update = new BehaviorSubject(null);
-    }
-    set series(series) {
-        this.__series = series;
-        this.markers = this.__series.data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined && _?.x !== null && _?.y !== null);
-    }
-    get series() {
-        return this.__series;
     }
     ngOnInit() {
         const filterX = (min, max) => (point, idx, arr) => {
@@ -1104,10 +1161,10 @@ class LinearSeriesBase extends SeriesBaseComponent {
             };
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LinearSeriesBase, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: LinearSeriesBase, selector: "ng-component", inputs: { series: "series" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
 }
-LinearSeriesBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LinearSeriesBase, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LinearSeriesBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LinearSeriesBase, selector: "ng-component", inputs: { series: "series" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LinearSeriesBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LinearSeriesBase, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -1124,12 +1181,18 @@ var DragPointType;
 })(DragPointType || (DragPointType = {}));
 
 class DraggablePointDirective {
+    _elementRef;
+    tetaDraggablePoint;
+    dragDirection;
+    allowDrag;
+    startPosition;
+    transformCache;
     constructor(_elementRef) {
         this._elementRef = _elementRef;
-        this.moveStart = new EventEmitter();
-        this.moveProcess = new EventEmitter();
-        this.moveEnd = new EventEmitter();
     }
+    moveStart = new EventEmitter();
+    moveProcess = new EventEmitter();
+    moveEnd = new EventEmitter();
     mouseDown(event) {
         if (!this.tetaDraggablePoint) {
             return;
@@ -1220,10 +1283,10 @@ class DraggablePointDirective {
         this.setTransform(0, 0);
         this.transformCache = null;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DraggablePointDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: { tetaDraggablePoint: "tetaDraggablePoint", dragDirection: "dragDirection", allowDrag: "allowDrag" }, outputs: { moveStart: "moveStart", moveProcess: "moveProcess", moveEnd: "moveEnd" }, host: { listeners: { "mousedown": "mouseDown($event)", "touchstart": "mouseDown($event)", "window:mouseup": "mouseUp($event)", "window:touchend": "mouseUp($event)", "window:mousemove": "mouseMove($event)", "window:touchmove": "mouseMove($event)" } }, exportAs: ["tetaDraggablePoint"], ngImport: i0 });
 }
-DraggablePointDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggablePointDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-DraggablePointDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: { tetaDraggablePoint: "tetaDraggablePoint", dragDirection: "dragDirection", allowDrag: "allowDrag" }, outputs: { moveStart: "moveStart", moveProcess: "moveProcess", moveEnd: "moveEnd" }, host: { listeners: { "mousedown": "mouseDown($event)", "touchstart": "mouseDown($event)", "window:mouseup": "mouseUp($event)", "window:touchend": "mouseUp($event)", "window:mousemove": "mouseMove($event)", "window:touchmove": "mouseMove($event)" } }, exportAs: ["tetaDraggablePoint"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggablePointDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: DraggablePointDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaDraggablePoint]',
@@ -1262,6 +1325,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class LineSeriesComponent extends LinearSeriesBase {
+    svc;
+    cdr;
+    scaleService;
+    zoomService;
+    element;
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -1269,32 +1337,9 @@ class LineSeriesComponent extends LinearSeriesBase {
         this.scaleService = scaleService;
         this.zoomService = zoomService;
         this.element = element;
-        this.allowDrag = (point) => {
-            return (newPoint) => {
-                if (point.marker.minX !== null && point.marker.minX !== undefined) {
-                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) < point.marker.minX) {
-                        return false;
-                    }
-                }
-                if (point.marker.maxX !== null && point.marker.maxX !== undefined) {
-                    if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.maxX) {
-                        return false;
-                    }
-                }
-                if (point.marker.minY !== null && point.marker.minY !== undefined) {
-                    if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) < point.marker.minY) {
-                        return false;
-                    }
-                }
-                if (point.marker.maxY !== null && point.marker.maxY !== undefined) {
-                    if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) > point.marker.maxY) {
-                        return false;
-                    }
-                }
-                return true;
-            };
-        };
     }
+    start;
+    labelStart;
     moveStart(event, point) {
         this.start = { x: point.x, y: point.y };
     }
@@ -1337,15 +1382,50 @@ class LineSeriesComponent extends LinearSeriesBase {
         label.dx = this.labelStart.dx + event.deltaX;
         label.dy = this.labelStart.dy + event.deltaY;
     }
+    allowDrag = (point) => {
+        return (newPoint) => {
+            if (point.marker.minX !== null && point.marker.minX !== undefined) {
+                if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) < point.marker.minX) {
+                    return false;
+                }
+            }
+            if (point.marker.maxX !== null && point.marker.maxX !== undefined) {
+                if (this.x.invert(this.x(this.start.x) + newPoint.deltaX) > point.marker.maxX) {
+                    return false;
+                }
+            }
+            if (point.marker.minY !== null && point.marker.minY !== undefined) {
+                if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) < point.marker.minY) {
+                    return false;
+                }
+            }
+            if (point.marker.maxY !== null && point.marker.maxY !== undefined) {
+                if (this.y.invert(this.y(this.start.y) + newPoint.deltaY) > point.marker.maxY) {
+                    return false;
+                }
+            }
+            return true;
+        };
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LineSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y!=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <ng-container *ngIf=\"x && y\">\n    <svg:g\n      *ngFor=\"let point of draggablePoints\"\n      [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n      <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n             [dragDirection]=\"point.marker.dragType\"\n             [allowDrag]=\"allowDrag(point)\"\n             #dragPoint=\"tetaDraggablePoint\"\n             (moveStart)=\"moveStart($event, point)\"\n             (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n             (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n             [class.draggable-marker]=\"point?.marker?.draggable\">\n        <svg:circle\n          class=\"marker\"\n          [attr.r]=\"point.marker.style?.radius ?? 5\"\n          [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n          [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n          [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n          [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n          [attr.cx]=\"0\"\n          [attr.cy]=\"0\">\n        </svg:circle>\n        <ng-container *ngIf=\"point.marker.label?.text\">\n          <svg:line\n            [attr.x1]=\"0\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"point.marker.label?.dx\"\n            [attr.y2]=\"point.marker.label?.dy\"\n            [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n            [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n            [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n          </svg:line>\n          <svg:foreignObject\n            [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n            [dragDirection]=\"point.marker.label.dragType\"\n            #labelPoint=\"tetaDraggablePoint\"\n            (moveStart)=\"startLabel($event, point.marker.label)\"\n            (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n            (moveEnd)=\"labelPoint.resetTransform();\"\n            [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n            [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n            [attr.x]=\"point.marker.label?.dx\"\n            [attr.y]=\"point.marker.label?.dy\"\n            class=\"position-absolute\">\n            <div\n              #annotationNode\n              class=\"shadow-2 padding-2\"\n              [style.color]=\"'var(--color-text-90)'\"\n              [style.background-color]=\"'var(--color-global-bgcard)'\"\n              [style.cursor]=\"'move'\"\n              style=\"border-radius: 2px; display: inline-block;\">\n              {{point.marker.label?.text}}\n            </div>\n          </svg:foreignObject>\n        </ng-container>\n      </svg:g>\n    </svg:g>\n  </ng-container>\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-LineSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-LineSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LineSeriesComponent, selector: "svg:svg[teta-line-series]", usesInheritance: true, ngImport: i0, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y!=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <ng-container *ngIf=\"x && y\">\n    <svg:g\n      *ngFor=\"let point of draggablePoints\"\n      [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n      <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n             [dragDirection]=\"point.marker.dragType\"\n             [allowDrag]=\"allowDrag(point)\"\n             #dragPoint=\"tetaDraggablePoint\"\n             (moveStart)=\"moveStart($event, point)\"\n             (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n             (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n             [class.draggable-marker]=\"point?.marker?.draggable\">\n        <svg:circle\n          class=\"marker\"\n          [attr.r]=\"point.marker.style?.radius ?? 5\"\n          [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n          [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n          [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n          [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n          [attr.cx]=\"0\"\n          [attr.cy]=\"0\">\n        </svg:circle>\n        <ng-container *ngIf=\"point.marker.label?.text\">\n          <svg:line\n            [attr.x1]=\"0\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"point.marker.label?.dx\"\n            [attr.y2]=\"point.marker.label?.dy\"\n            [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n            [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n            [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n          </svg:line>\n          <svg:foreignObject\n            [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n            [dragDirection]=\"point.marker.label.dragType\"\n            #labelPoint=\"tetaDraggablePoint\"\n            (moveStart)=\"startLabel($event, point.marker.label)\"\n            (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n            (moveEnd)=\"labelPoint.resetTransform();\"\n            [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n            [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n            [attr.x]=\"point.marker.label?.dx\"\n            [attr.y]=\"point.marker.label?.dy\"\n            class=\"position-absolute\">\n            <div\n              #annotationNode\n              class=\"shadow-2 padding-2\"\n              [style.color]=\"'var(--color-text-90)'\"\n              [style.background-color]=\"'var(--color-background-50)'\"\n              [style.cursor]=\"'move'\"\n              style=\"border-radius: 2px; display: inline-block;\">\n              {{point.marker.label?.text}}\n            </div>\n          </svg:foreignObject>\n        </ng-container>\n      </svg:g>\n    </svg:g>\n  </ng-container>\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DraggablePointDirective, selector: "[tetaDraggablePoint]", inputs: ["tetaDraggablePoint", "dragDirection", "allowDrag"], outputs: ["moveStart", "moveProcess", "moveEnd"], exportAs: ["tetaDraggablePoint"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LineSeriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LineSeriesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y!=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <ng-container *ngIf=\"x && y\">\n    <svg:g\n      *ngFor=\"let point of draggablePoints\"\n      [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n      <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n             [dragDirection]=\"point.marker.dragType\"\n             [allowDrag]=\"allowDrag(point)\"\n             #dragPoint=\"tetaDraggablePoint\"\n             (moveStart)=\"moveStart($event, point)\"\n             (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n             (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n             [class.draggable-marker]=\"point?.marker?.draggable\">\n        <svg:circle\n          class=\"marker\"\n          [attr.r]=\"point.marker.style?.radius ?? 5\"\n          [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n          [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n          [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n          [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n          [attr.cx]=\"0\"\n          [attr.cy]=\"0\">\n        </svg:circle>\n        <ng-container *ngIf=\"point.marker.label?.text\">\n          <svg:line\n            [attr.x1]=\"0\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"point.marker.label?.dx\"\n            [attr.y2]=\"point.marker.label?.dy\"\n            [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n            [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n            [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n          </svg:line>\n          <svg:foreignObject\n            [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n            [dragDirection]=\"point.marker.label.dragType\"\n            #labelPoint=\"tetaDraggablePoint\"\n            (moveStart)=\"startLabel($event, point.marker.label)\"\n            (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n            (moveEnd)=\"labelPoint.resetTransform();\"\n            [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n            [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n            [attr.x]=\"point.marker.label?.dx\"\n            [attr.y]=\"point.marker.label?.dy\"\n            class=\"position-absolute\">\n            <div\n              #annotationNode\n              class=\"shadow-2 padding-2\"\n              [style.color]=\"'var(--color-text-90)'\"\n              [style.background-color]=\"'var(--color-background-50)'\"\n              [style.cursor]=\"'move'\"\n              style=\"border-radius: 2px; display: inline-block;\">\n              {{point.marker.label?.text}}\n            </div>\n          </svg:foreignObject>\n        </ng-container>\n      </svg:g>\n    </svg:g>\n  </ng-container>\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
+            args: [{ selector: 'svg:svg[teta-line-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:path\n  class=\"line\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\"\n  fill=\"none\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y!=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <ng-container *ngIf=\"x && y\">\n    <svg:g\n      *ngFor=\"let point of draggablePoints\"\n      [attr.transform]=\"'translate(' + x(point.x) + ',' + y(point.y) + ')'\">\n      <svg:g [tetaDraggablePoint]=\"point.marker.draggable\"\n             [dragDirection]=\"point.marker.dragType\"\n             [allowDrag]=\"allowDrag(point)\"\n             #dragPoint=\"tetaDraggablePoint\"\n             (moveStart)=\"moveStart($event, point)\"\n             (moveEnd)=\"moveEnd($event, point);dragPoint.resetTransform();\"\n             (moveProcess)=\"moveProcess($event, point);dragPoint.resetTransform();\"\n             [class.draggable-marker]=\"point?.marker?.draggable\">\n        <svg:circle\n          class=\"marker\"\n          [attr.r]=\"point.marker.style?.radius ?? 5\"\n          [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n          [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n          [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n          [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n          [attr.cx]=\"0\"\n          [attr.cy]=\"0\">\n        </svg:circle>\n        <ng-container *ngIf=\"point.marker.label?.text\">\n          <svg:line\n            [attr.x1]=\"0\"\n            [attr.y1]=\"0\"\n            [attr.x2]=\"point.marker.label?.dx\"\n            [attr.y2]=\"point.marker.label?.dy\"\n            [attr.stroke]=\"point.marker.label?.style?.stroke ?? 'var(--color-text-90)'\"\n            [attr.stroke-width]=\"point.marker.label?.style?.strokeWidth ?? 1\"\n            [attr.stroke-dasharray]=\"point.marker.label?.style?.strokeDasharray ?? null\">\n          </svg:line>\n          <svg:foreignObject\n            [tetaDraggablePoint]=\"point.marker.label?.draggable\"\n            [dragDirection]=\"point.marker.label.dragType\"\n            #labelPoint=\"tetaDraggablePoint\"\n            (moveStart)=\"startLabel($event, point.marker.label)\"\n            (moveProcess)=\"moveLabel($event, point.marker.label); labelPoint.resetTransform();\"\n            (moveEnd)=\"labelPoint.resetTransform();\"\n            [attr.width]=\"annotationNode?.offsetWidth ?? 0\"\n            [attr.height]=\"annotationNode?.offsetHeight ?? 0\"\n            [attr.x]=\"point.marker.label?.dx\"\n            [attr.y]=\"point.marker.label?.dy\"\n            class=\"position-absolute\">\n            <div\n              #annotationNode\n              class=\"shadow-2 padding-2\"\n              [style.color]=\"'var(--color-text-90)'\"\n              [style.background-color]=\"'var(--color-global-bgcard)'\"\n              [style.cursor]=\"'move'\"\n              style=\"border-radius: 2px; display: inline-block;\">\n              {{point.marker.label?.text}}\n            </div>\n          </svg:foreignObject>\n        </ng-container>\n      </svg:g>\n    </svg:g>\n  </ng-container>\n\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class BarSeriesComponent extends SeriesBaseComponent {
+    svc;
+    cdr;
+    scaleService;
+    zoomService;
+    element;
+    x;
+    x1;
+    y;
+    barSeriesCount;
+    Math = Math;
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -1353,7 +1433,6 @@ class BarSeriesComponent extends SeriesBaseComponent {
         this.scaleService = scaleService;
         this.zoomService = zoomService;
         this.element = element;
-        this.Math = Math;
     }
     ngOnInit() {
         this.barSeriesCount = this.svc.config.pipe(map((_) => {
@@ -1386,15 +1465,25 @@ class BarSeriesComponent extends SeriesBaseComponent {
         });
     }
     ngOnChanges(changes) { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BarSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: BarSeriesComponent, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  x: x | async,\n  x1: x1 | async,\n  y: y | async,\n  barSeriesCount: barSeriesCount | async\n} as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n    <ng-container *ngIf=\"data.barSeriesCount > 1\">\n      <svg:rect\n        *ngFor=\"let point of series.data\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.x]=\"data.x(point.x) + (series.id * data.x1.bandwidth() / data.barSeriesCount)\"\n        [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n        [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n        [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n        [attr.fill]=\"series.color\"\n      ></svg:rect>\n    </ng-container>\n    <ng-container *ngIf=\"data.barSeriesCount === 1\">\n      <svg:rect\n        *ngFor=\"let point of series.data\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n        [attr.width]=\"data.x1.bandwidth()\"\n        [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n        [attr.fill]=\"point.color ?? series.color\"\n      ></svg:rect>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-BarSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BarSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BarSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BarSeriesComponent, selector: "svg:svg[teta-bar-series]", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  x: x | async,\n  x1: x1 | async,\n  y: y | async,\n  barSeriesCount: barSeriesCount | async\n} as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n    <ng-container *ngIf=\"data.barSeriesCount > 1\">\n      <svg:rect\n        *ngFor=\"let point of series.data\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.x]=\"data.x(point.x) + (series.id * data.x1.bandwidth() / data.barSeriesCount)\"\n        [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n        [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n        [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n        [attr.fill]=\"series.color\"\n      ></svg:rect>\n    </ng-container>\n    <ng-container *ngIf=\"data.barSeriesCount === 1\">\n      <svg:rect\n        *ngFor=\"let point of series.data\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n        [attr.width]=\"data.x1.bandwidth()\"\n        [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n        [attr.fill]=\"point.color ?? series.color\"\n      ></svg:rect>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BarSeriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BarSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'svg:svg[teta-bar-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  x: x | async,\n  x1: x1 | async,\n  y: y | async,\n  barSeriesCount: barSeriesCount | async\n} as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n    <ng-container *ngIf=\"data.barSeriesCount > 1\">\n      <svg:rect\n        *ngFor=\"let point of series.data\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.x]=\"data.x(point.x) + (series.id * data.x1.bandwidth() / data.barSeriesCount)\"\n        [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n        [attr.width]=\"data.x1.bandwidth() / data.barSeriesCount\"\n        [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n        [attr.fill]=\"series.color\"\n      ></svg:rect>\n    </ng-container>\n    <ng-container *ngIf=\"data.barSeriesCount === 1\">\n      <svg:rect\n        *ngFor=\"let point of series.data\"\n        (mouseenter)=\"mouseenter(point)\"\n        (mouseleave)=\"mouseleave(point)\"\n        [attr.x]=\"data.x(point.x)\"\n        [attr.y]=\"point.y > 0 ? data.y(point.y) : data.y(0)\"\n        [attr.width]=\"data.x1.bandwidth()\"\n        [attr.height]=\"Math.abs(data.y(point.y) - data.y(0))\"\n        [attr.fill]=\"point.color ?? series.color\"\n      ></svg:rect>\n    </ng-container>\n  </ng-container>\n</ng-container>\n\n" }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class ScatterSeriesComponent extends SeriesBaseComponent {
+    svc;
+    cdr;
+    scaleService;
+    zoomService;
+    element;
+    transform;
+    display;
+    path;
+    x;
+    y;
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -1421,15 +1510,26 @@ class ScatterSeriesComponent extends SeriesBaseComponent {
             series: this.series,
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScatterSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ScatterSeriesComponent, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async\n} as scales\">\n  <ng-container *ngIf=\"scales.x && scales.y\">\n    <svg:circle\n      class=\"line\"\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.cx]=\"scales.x(point.x)\"\n      [attr.cy]=\"scales.y(point.y)\"\n      [attr.r]=\"series.style?.radius ?? 1\"\n      [attr.stroke]=\"point.color ?? series.color\"\n      [attr.fill]=\"point.color ?? series.color\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\">\n    </svg:circle>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-ScatterSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScatterSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ScatterSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ScatterSeriesComponent, selector: "svg:svg[teta-scatter-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async\n} as scales\">\n  <ng-container *ngIf=\"scales.x && scales.y\">\n    <svg:circle\n      class=\"line\"\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.cx]=\"scales.x(point.x)\"\n      [attr.cy]=\"scales.y(point.y)\"\n      [attr.r]=\"series.style?.radius ?? 1\"\n      [attr.stroke]=\"point.color ?? series.color\"\n      [attr.fill]=\"point.color ?? series.color\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\">\n    </svg:circle>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ScatterSeriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ScatterSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'svg:svg[teta-scatter-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async\n} as scales\">\n  <ng-container *ngIf=\"scales.x && scales.y\">\n    <svg:circle\n      class=\"line\"\n      *ngFor=\"let point of series.data\"\n      (mouseenter)=\"mouseenter(point)\"\n      (mouseleave)=\"mouseleave(point)\"\n      [attr.cx]=\"scales.x(point.x)\"\n      [attr.cy]=\"scales.y(point.y)\"\n      [attr.r]=\"series.style?.radius ?? 1\"\n      [attr.stroke]=\"point.color ?? series.color\"\n      [attr.fill]=\"point.color ?? series.color\"\n      [attr.stroke-width]=\"series.style?.strokeWidth\">\n    </svg:circle>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [".draggable-marker{cursor:move}.active{stroke-opacity:.5}.marker-grab{opacity:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class BlockSeriesComponent extends SeriesBaseComponent {
+    svc;
+    cdr;
+    scaleService;
+    zoomService;
+    element;
+    x;
+    y;
+    displayPoints;
+    fillType = FillType;
+    id;
+    Math = Math;
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -1437,8 +1537,6 @@ class BlockSeriesComponent extends SeriesBaseComponent {
         this.scaleService = scaleService;
         this.zoomService = zoomService;
         this.element = element;
-        this.fillType = FillType;
-        this.Math = Math;
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
@@ -1472,15 +1570,26 @@ class BlockSeriesComponent extends SeriesBaseComponent {
     }
     ngAfterViewInit() {
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BlockSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: BlockSeriesComponent, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngIf=\"data.x && data.y\">\n    <ng-container *ngFor=\"let point of data.points\">\n      <svg:g (mouseenter)=\"mouseenter(point)\"\n             (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          width=\"100%\">\n        </svg:rect>\n        <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                  x=\"50%\"\n                  [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                  alignment-baseline=\"middle\"\n                  text-anchor=\"middle\">{{ point.text }}\n        </svg:text>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n      </svg:g>\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-BlockSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BlockSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BlockSeriesComponent, selector: "svg:svg[teta-block-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngIf=\"data.x && data.y\">\n    <ng-container *ngFor=\"let point of data.points\">\n      <svg:g (mouseenter)=\"mouseenter(point)\"\n             (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          width=\"100%\">\n        </svg:rect>\n        <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                  x=\"50%\"\n                  [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                  alignment-baseline=\"middle\"\n                  text-anchor=\"middle\">{{ point.text }}\n        </svg:text>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n      </svg:g>\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockSeriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BlockSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'svg:svg[teta-block-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngIf=\"data.x && data.y\">\n    <ng-container *ngFor=\"let point of data.points\">\n      <svg:g (mouseenter)=\"mouseenter(point)\"\n             (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          x=\"0\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\"\n          width=\"100%\">\n        </svg:rect>\n        <svg:text *ngIf=\"point.text && data.y(point.y1) - data.y(point.y) > 8\"\n                  x=\"50%\"\n                  [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                  alignment-baseline=\"middle\"\n                  text-anchor=\"middle\">{{ point.text }}\n        </svg:text>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n        <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\"\n                  [attr.stroke]=\"point.iconId ? 'var(--color-text-10)' : point.color ?? series.style?.stroke ?? series.color\"></svg:line>\n      </svg:g>\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class BlockAreaSeriesComponent extends SeriesBaseComponent {
+    svc;
+    cdr;
+    scaleService;
+    zoomService;
+    element;
+    x;
+    y;
+    displayPoints;
+    fillType = FillType;
+    id;
+    Math = Math;
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -1488,8 +1597,6 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
         this.scaleService = scaleService;
         this.zoomService = zoomService;
         this.element = element;
-        this.fillType = FillType;
-        this.Math = Math;
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
@@ -1523,15 +1630,24 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
             series: this.series,
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BlockAreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: BlockAreaSeriesComponent, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <ng-container *ngFor=\"let point of data.points\">\n      <svg:g (mouseenter)=\"mouseenter(point)\"\n             (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          *ngIf=\"!!config.inverted\"\n          [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? '' : point.color ?? series.style?.stroke ?? series.color\"\n          [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n          [attr.stroke-width]=\"series.style?.strokeWidth\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\">\n        </svg:rect>\n        <svg:rect\n          *ngIf=\"!config.inverted\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.y]=\"data.y(0)\"\n          [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n          [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n          [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n          [attr.stroke-width]=\"series.style?.strokeWidth\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\">\n        </svg:rect>\n        <svg:text *ngIf=\"point.text\"\n                  x=\"50%\"\n                  [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                  alignment-baseline=\"middle\"\n                  text-anchor=\"middle\">{{ point.text }}\n        </svg:text>\n\n        <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n        <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n      </svg:g>\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-BlockAreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockAreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BlockAreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BlockAreaSeriesComponent, selector: "svg:svg[teta-block-area-series]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <ng-container *ngFor=\"let point of data.points\">\n      <svg:g (mouseenter)=\"mouseenter(point)\"\n             (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          *ngIf=\"!!config.inverted\"\n          [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? '' : point.color ?? series.style?.stroke ?? series.color\"\n          [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n          [attr.stroke-width]=\"series.style?.strokeWidth\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\">\n        </svg:rect>\n        <svg:rect\n          *ngIf=\"!config.inverted\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.y]=\"data.y(0)\"\n          [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n          [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n          [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n          [attr.stroke-width]=\"series.style?.strokeWidth\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\">\n        </svg:rect>\n        <svg:text *ngIf=\"point.text\"\n                  x=\"50%\"\n                  [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                  alignment-baseline=\"middle\"\n                  text-anchor=\"middle\">{{ point.text }}\n        </svg:text>\n\n        <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n        <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n      </svg:g>\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BlockAreaSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'svg:svg[teta-block-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  y: y | async,\n  x: x | async,\n  points: displayPoints | async\n} as data\">\n  <svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n    <svg:linearGradient [id]=\"'gradient-fill-' + id\"\n                        gradientUnits=\"userSpaceOnUse\"\n                        x1=\"0%\"\n                        [attr.y1]=\"config?.inverted ? '0%' : '100%'\"\n                        [attr.x2]=\"config?.inverted ? '100%' : '0%'\"\n                        y2=\"0%\">\n      <svg:stop offset=\"0%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0\"></svg:stop>\n      <svg:stop offset=\"5%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.1\"></svg:stop>\n      <svg:stop offset=\"20%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.2\"></svg:stop>\n      <svg:stop offset=\"60%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.5\"></svg:stop>\n      <svg:stop offset=\"100%\" [attr.stop-color]=\"series.style?.fill ?? series.color\" stop-opacity=\"0.9\"></svg:stop>\n    </svg:linearGradient>\n  </svg:defs>\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <ng-container *ngFor=\"let point of data.points\">\n      <svg:g (mouseenter)=\"mouseenter(point)\"\n             (mouseleave)=\"mouseleave(point)\">\n        <svg:rect\n          *ngIf=\"!!config.inverted\"\n          [attr.x]=\"data.x(0) < data.x(point.x) ? data.x(0) : data.x(point.x)\"\n          [attr.y]=\"data.y(point.y)\"\n          [attr.height]=\"Math.abs(data.y(point.y1) - data.y(point.y))\"\n          [attr.width]=\"data.x(0) < data.x(point.x) ? data.x(point.x) - data.x(0) : data.x(0) - data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? '' : point.color ?? series.style?.stroke ?? series.color\"\n          [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n          [attr.stroke-width]=\"series.style?.strokeWidth\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.style?.fill ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\">\n        </svg:rect>\n        <svg:rect\n          *ngIf=\"!config.inverted\"\n          [attr.x]=\"data.x(point.x)\"\n          [attr.y]=\"data.y(0)\"\n          [attr.height]=\"Math.abs(data.y(0) - data.y(point.y))\"\n          [attr.width]=\"data.x(point.x1) - data.x(point.x)\"\n          [attr.stroke]=\"point.iconId ? '' : point.color ?? series.color\"\n          [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n          [attr.stroke-width]=\"series.style?.strokeWidth\"\n          [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : point.iconId ? 'url(#pattern'+point.iconId+')' : point.color ?? series.color\"\n          [attr.fill-opacity]=\"series.style?.fillOpacity\">\n        </svg:rect>\n        <svg:text *ngIf=\"point.text\"\n                  x=\"50%\"\n                  [attr.y]=\"(data.y(point.y1) + data.y(point.y)) / 2\"\n                  alignment-baseline=\"middle\"\n                  text-anchor=\"middle\">{{ point.text }}\n        </svg:text>\n\n        <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y)\" [attr.y2]=\"data.y(point.y)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n        <!--      <svg:line x1=\"0\" x2=\"100%\" [attr.y1]=\"data.y(point.y1)\" [attr.y2]=\"data.y(point.y1)\" [attr.stroke]=\"point.iconId ? 'var(&#45;&#45;color-text-10)' : point.color ?? series.color\"></svg:line>-->\n\n      </svg:g>\n    </ng-container>\n\n  </ng-container>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class AreaSeriesComponent extends LinearSeriesBase {
+    svc;
+    cdr;
+    scaleService;
+    zoomService;
+    element;
+    areaPath;
+    fillDirection = FillDirection;
+    fillType = FillType;
+    id;
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -1539,8 +1655,6 @@ class AreaSeriesComponent extends LinearSeriesBase {
         this.scaleService = scaleService;
         this.zoomService = zoomService;
         this.element = element;
-        this.fillDirection = FillDirection;
-        this.fillType = FillType;
         this.id = (Date.now() + Math.random()).toString(36);
     }
     ngOnInit() {
@@ -1579,10 +1693,10 @@ class AreaSeriesComponent extends LinearSeriesBase {
             return area(filteredData);
         }));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: AreaSeriesComponent, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style?.fill ?? series.color\">\n</svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y !=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of draggablePoints\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-AreaSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AreaSeriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AreaSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AreaSeriesComponent, selector: "svg:svg[teta-area-series]", usesInheritance: true, ngImport: i0, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style?.fill ?? series.color\">\n</svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y !=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of draggablePoints\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AreaSeriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AreaSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'svg:svg[teta-area-series]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:defs *ngIf=\"series?.fillType === fillType.gradient\">\n  <svg:linearGradient [id]=\"'gradient-fill-' + id\" gradientUnits=\"userSpaceOnUse\"\n                      x1=\"0%\"\n                      [attr.y1]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '0%' : '100%'\"\n                      [attr.x2]=\"config?.inverted || series?.fillDirection === fillDirection.y ? '100%' : '0%'\"\n                      y2=\"0%\">\n    <svg:stop offset=\"0%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0\"></svg:stop>\n    <svg:stop offset=\"5%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.1\"></svg:stop>\n    <svg:stop offset=\"20%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.2\"></svg:stop>\n    <svg:stop offset=\"60%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.5\"></svg:stop>\n    <svg:stop offset=\"100%\" [attr.stop-color]=\"series.color\" stop-opacity=\"0.8\"></svg:stop>\n  </svg:linearGradient>\n</svg:defs>\n<svg:path\n  class=\"area\"\n  [attr.d]=\"areaPath | async\"\n  [attr.stroke-width]=\"0\"\n  [attr.fill-opacity]=\"series.style?.fillOpacity\"\n  [attr.fill]=\"series.fillType === fillType.gradient ? 'url(#gradient-fill-'+id+')' : series.style?.fill ?? series.color\">\n</svg:path>\n<svg:path\n  class=\"area\"\n  fill=\"none\"\n  [attr.d]=\"path | async\"\n  [attr.stroke]=\"series.color\"\n  [attr.stroke-dasharray]=\"series.style?.strokeDasharray\"\n  [attr.stroke-width]=\"series.style?.strokeWidth\">\n</svg:path>\n<ng-container *ngIf=\"transform | async as t\">\n  <svg:circle\n    *ngIf=\"t?.x !=null && t?.y !=null\"\n    r=\"3\"\n    [attr.fill]=\"series.color\"\n    [attr.transform]=\"'translate('+ t.x +', '+ t.y +')'\"\n  >\n  </svg:circle>\n</ng-container>\n<ng-container *ngIf=\"markers as draggablePoints\">\n  <svg:circle\n    class=\"marker\"\n    *ngFor=\"let point of draggablePoints\"\n    [class.draggable-marker]=\"point?.marker?.draggable\"\n    [attr.r]=\"point.marker.style?.radius ?? 5\"\n    [attr.fill]=\"point.marker.style?.fill ?? 'transparent'\"\n    [attr.stroke]=\"point.marker.style?.stroke ?? 'none'\"\n    [attr.stroke-width]=\"point.marker.style?.strokeWidth\"\n    [attr.stroke-dasharray]=\"point.marker.style?.strokeDasharray\"\n    [attr.cx]=\"x(point.x)\"\n    [attr.cy]=\"y(point.y)\"\n  >\n  </svg:circle>\n</ng-container>\n\n\n\n" }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
@@ -1596,9 +1710,13 @@ const defaultSeriesTypeMapping = new Map()
     .set(SeriesType.blockArea, BlockAreaSeriesComponent);
 
 class SeriesHostComponent {
+    viewContainerRef;
+    config;
+    series;
+    _init = false;
+    _componentRef;
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
-        this._init = false;
     }
     ngOnInit() {
         if (!SeriesBaseComponent.isPrototypeOf(this.series.component)) {
@@ -1620,10 +1738,10 @@ class SeriesHostComponent {
             this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: { config: "config", series: "series" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-SeriesHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-SeriesHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: { config: "config", series: "series" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: SeriesHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: SeriesHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[teta-series-host]',
@@ -1637,6 +1755,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class GridlinesComponent {
+    svc;
+    chartService;
+    size;
+    config;
+    tickYValues;
+    tickXValues;
+    x;
+    y;
     constructor(svc, chartService) {
         this.svc = svc;
         this.chartService = chartService;
@@ -1656,10 +1782,10 @@ class GridlinesComponent {
     }
     ngAfterViewInit() {
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"{\n  xValues: tickXValues | async,\n  yValues: tickYValues | async,\n  x: x | async,\n  y: y | async,\n  config: config | async\n} as data\">\n  <ng-container *ngIf=\"data.y && data.config.gridLines?.showY !== false\">\n    <ng-container *ngFor=\"let tick of data.yValues\">\n      <svg:line [attr.x1]=\"0\"\n                [attr.y1]=\"data.y(tick) || 1\"\n                [attr.x2]=\"size?.width\"\n                [attr.y2]=\"data.y(tick) || 1\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"data.x && data.config.gridLines?.showX !== false\">\n    <ng-container *ngFor=\"let tick of data.xValues\">\n      <svg:line [attr.x1]=\"data.x(tick) || 1\"\n                [attr.y1]=\"0\"\n                [attr.x2]=\"data.x(tick) || 1\"\n                [attr.y2]=\"size?.height\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"{\n  xValues: tickXValues | async,\n  yValues: tickYValues | async,\n  x: x | async,\n  y: y | async,\n  config: config | async\n} as data\">\n  <ng-container *ngIf=\"data.y && data.config.gridLines?.showY !== false\">\n    <ng-container *ngFor=\"let tick of data.yValues\">\n      <svg:line [attr.x1]=\"0\"\n                [attr.y1]=\"data.y(tick) || 1\"\n                [attr.x2]=\"size?.width\"\n                [attr.y2]=\"data.y(tick) || 1\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"data.x && data.config.gridLines?.showX !== false\">\n    <ng-container *ngFor=\"let tick of data.xValues\">\n      <svg:line [attr.x1]=\"data.x(tick) || 1\"\n                [attr.y1]=\"0\"\n                [attr.x2]=\"data.x(tick) || 1\"\n                [attr.y2]=\"size?.height\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GridlinesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: GridlinesComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  xValues: tickXValues | async,\n  yValues: tickYValues | async,\n  x: x | async,\n  y: y | async,\n  config: config | async\n} as data\">\n  <ng-container *ngIf=\"data.y && data.config.gridLines?.showY !== false\">\n    <ng-container *ngFor=\"let tick of data.yValues\">\n      <svg:line [attr.x1]=\"0\"\n                [attr.y1]=\"data.y(tick) || 1\"\n                [attr.x2]=\"size?.width\"\n                [attr.y2]=\"data.y(tick) || 1\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n  <ng-container *ngIf=\"data.x && data.config.gridLines?.showX !== false\">\n    <ng-container *ngFor=\"let tick of data.xValues\">\n      <svg:line [attr.x1]=\"data.x(tick) || 1\"\n                [attr.y1]=\"0\"\n                [attr.x2]=\"data.x(tick) || 1\"\n                [attr.y2]=\"size?.height\"></svg:line>\n    </ng-container>\n  </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }]; }, propDecorators: { size: [{
@@ -1667,11 +1793,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class XAxisComponent {
+    scaleService;
+    _svc;
+    x;
+    ticks;
+    axis;
+    size;
+    update$ = new BehaviorSubject(null);
+    _alive = true;
     constructor(scaleService, _svc) {
         this.scaleService = scaleService;
         this._svc = _svc;
-        this.update$ = new BehaviorSubject(null);
-        this._alive = true;
         this.x = this.scaleService.scales.pipe(map((_) => {
             return _.x.get(this.axis.index)?.scale;
         }));
@@ -1694,10 +1826,10 @@ class XAxisComponent {
             this.update$.next();
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: XAxisComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: XAxisComponent, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{x: x | async, ticks: ticks | async} as data\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of data.ticks\" [attr.transform]=\"'translate('+ data.x(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-XAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XAxisComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-XAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XAxisComponent, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{x: x | async, ticks: ticks | async} as data\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of data.ticks\" [attr.transform]=\"'translate('+ data.x(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: XAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{x: x | async, ticks: ticks | async} as data\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of data.ticks\" [attr.transform]=\"'translate('+ data.x(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }]; }, propDecorators: { axis: [{
@@ -1707,9 +1839,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class YAxisComponent {
+    scaleService;
+    y;
+    axis;
+    size;
+    _alive = true;
     constructor(scaleService) {
         this.scaleService = scaleService;
-        this._alive = true;
         this.y = this.scaleService.scales.pipe(map((_) => {
             return _.y.get(this.axis.index)?.scale;
         }));
@@ -1725,10 +1861,10 @@ class YAxisComponent {
             ? this.axis.selfSize
             : -this.axis.selfSize}, ${this.size.height / 2}) rotate(-90)`;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: YAxisComponent, deps: [{ token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: YAxisComponent, selector: "[teta-y-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"y | async as scale\">\n  <svg:g [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate(0, '+ scale(tick) +')'\">\n    <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\" text-anchor=\"middle\" [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-YAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: YAxisComponent, deps: [{ token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
-YAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: YAxisComponent, selector: "[teta-y-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"y | async as scale\">\n  <svg:g [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate(0, '+ scale(tick) +')'\">\n    <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\" text-anchor=\"middle\" [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: YAxisComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: YAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-y-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"y | async as scale\">\n  <svg:g [attr.text-anchor]=\"axis.options.opposite ? 'start' : 'end'\" *ngFor=\"let tick of scale.ticks()\" [attr.transform]=\"'translate(0, '+ scale(tick) +')'\">\n    <text fill=\"var(--color-text-70)\" dy=\"0.32em\" [attr.x]=\"axis.options.opposite ? 10 : -9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.x2]=\"axis.options.opposite ? 6 : -6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text [attr.dy]=\"axis.options.opposite ? '-4px' : '4px'\" text-anchor=\"middle\" [attr.dominant-baseline]=\"axis.options.opposite ? 'auto' : 'hanging'\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host{shape-rendering:crispEdges}:host .label-axis{fill:var(--color-text-70)}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }]; }, propDecorators: { axis: [{
@@ -1738,13 +1874,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class PlotlineComponent {
+    cdr;
+    zoomService;
+    scaleService;
+    chartService;
+    element;
+    plotLine;
+    size;
+    axis;
+    scale;
+    orientation = AxisOrientation;
+    dragElements;
+    _domain;
     constructor(cdr, zoomService, scaleService, chartService, element) {
         this.cdr = cdr;
         this.zoomService = zoomService;
         this.scaleService = scaleService;
         this.chartService = chartService;
         this.element = element;
-        this.orientation = AxisOrientation;
     }
     ngOnInit() {
         this._domain = this.scale.domain();
@@ -1800,10 +1947,10 @@ class PlotlineComponent {
     get width() {
         return this.size.width;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PlotlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: ScaleService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: { plotLine: "plotLine", size: "size", axis: "axis", scale: "scale" }, ngImport: i0, template: "<svg:line class=\"plotline\"\n          [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-title-2 fill-text-70\"\n  [attr.x]=\"value\"\n  dy=\"-2em\"\n  [attr.transform]=\"'rotate(-90, '+ value +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-title-2 fill-text-70\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"value\"\n  [attr.y]=\"width / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:line class=\"grabber\"\n\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PlotlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: ScaleService }, { token: ChartService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PlotlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: { plotLine: "plotLine", size: "size", axis: "axis", scale: "scale" }, ngImport: i0, template: "<svg:line class=\"plotline\"\n          [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-title-2 fill-text-70\"\n  [attr.x]=\"value\"\n  dy=\"-2em\"\n  [attr.transform]=\"'rotate(-90, '+ value +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-title-2 fill-text-70\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"value\"\n  [attr.y]=\"width / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:line class=\"grabber\"\n\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotlineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PlotlineComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-plot-line]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:line class=\"plotline\"\n          [attr.stroke]=\"plotLine.style?.stroke || 'red'\"\n          [attr.stroke-width]=\"plotLine.style?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotLine.style?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"central\"\n  class=\"label font-title-2 fill-text-70\"\n  [attr.x]=\"value\"\n  dy=\"-2em\"\n  [attr.transform]=\"'rotate(-90, '+ value +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-title-2 fill-text-70\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"value\"\n  [attr.y]=\"width / 2\">{{plotLine.label}}\n</svg:text>\n\n<svg:line class=\"grabber\"\n\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [attr.stroke]=\"'red'\"\n          [attr.stroke-width]=\"8\"\n          opacity=\"0\"\n          [attr.x1]=\"axis.orientation === orientation.x ? value : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? value : width\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : value\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : value\">\n</svg:line>\n", styles: [":host .x-grabber{cursor:col-resize}:host .y-grabber{cursor:row-resize}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: ScaleService }, { type: ChartService }, { type: i0.ElementRef }]; }, propDecorators: { plotLine: [{
@@ -1817,22 +1964,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class PlotBandComponent {
+    scaleService;
+    zoomService;
+    chartService;
+    cdr;
+    element;
+    plotBand;
+    axis;
+    scale;
+    size;
+    orientation = AxisOrientation;
+    resizeElements;
+    dragElements;
     constructor(scaleService, zoomService, chartService, cdr, element) {
         this.scaleService = scaleService;
         this.zoomService = zoomService;
         this.chartService = chartService;
         this.cdr = cdr;
         this.element = element;
-        this.orientation = AxisOrientation;
-        this.getTextPosition = () => {
-            let [min, max] = this.scale.domain();
-            min = min instanceof Date ? min.getTime() : min;
-            max = max instanceof Date ? max.getTime() : max;
-            const from = this.plotBand.from instanceof Date ? this.plotBand.from.getTime() : this.plotBand.from;
-            const to = this.plotBand.to instanceof Date ? this.plotBand.to.getTime() : this.plotBand.to;
-            const position = ((from <= min ? min : from) + (to >= max ? max : to)) / 2;
-            return this.scale(position);
-        };
     }
     click(event) {
         this.emit({
@@ -1943,16 +2092,25 @@ class PlotBandComponent {
     get bandSize() {
         return Math.abs(this.scale(this.plotBand.to) - this.scale(this.plotBand.from));
     }
+    getTextPosition = () => {
+        let [min, max] = this.scale.domain();
+        min = min instanceof Date ? min.getTime() : min;
+        max = max instanceof Date ? max.getTime() : max;
+        const from = this.plotBand.from instanceof Date ? this.plotBand.from.getTime() : this.plotBand.from;
+        const to = this.plotBand.to instanceof Date ? this.plotBand.to.getTime() : this.plotBand.to;
+        const position = ((from <= min ? min : from) + (to >= max ? max : to)) / 2;
+        return this.scale(position);
+    };
     getFill(d) {
         if (d.style?.plotBand?.patternImage) {
             return `url(#${d.style.plotBand?.patternImage})`;
         }
         return d.style.plotBand?.fill;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PlotBandComponent, deps: [{ token: ScaleService }, { token: ZoomService }, { token: ChartService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.transform]=\"'rotate(-90, '+ getTextPosition() +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-PlotBandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, deps: [{ token: ScaleService }, { token: ZoomService }, { token: ChartService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PlotBandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: { plotBand: "plotBand", axis: "axis", scale: "scale", size: "size" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, ngImport: i0, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.transform]=\"'rotate(-90, '+ getTextPosition() +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PlotBandComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: PlotBandComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-plot-band]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg:rect\n  class=\"plotband\" xmlns:svg=\"http://www.w3.org/1999/html\"\n  [class.draggable]=\"plotBand?.draggable === true\"\n  [attr.fill]=\"getFill(plotBand)\"\n  [attr.opacity]=\"plotBand.style?.plotBand?.opacity\"\n  [attr.height]=\"axis.orientation === orientation.x ? height : bandSize\"\n  [attr.width]=\"axis.orientation === orientation.x ? bandSize : width\"\n  [attr.y]=\"axis.orientation === orientation.y ? from : null\"\n  [attr.x]=\"axis.orientation === orientation.x ? from : null\">\n</svg:rect>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.x\"\n  text-anchor=\"middle\"\n  dominant-baseline=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.transform]=\"'rotate(-90, '+ getTextPosition() +',' + height / 2 + ')'\"\n  [attr.y]=\"height / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:text\n  *ngIf=\"axis.orientation === orientation.y\"\n  text-anchor=\"middle\"\n  class=\"label font-caption fill-text-90\"\n  dominant-baseline=\"central\"\n  [attr.x]=\"getTextPosition()\"\n  [attr.y]=\"width / 2\">{{plotBand.label}}\n</svg:text>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n\n<svg:line class=\"display-grabber\"\n          *ngIf=\"plotBand.showGrabbers && plotBand.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"plotBand.style?.grabbers?.strokeWidth || 4\"\n          [attr.stroke-dasharray]=\"plotBand.style?.grabbers?.strokeDasharray\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(2px)' : 'translateY(2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? from : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? from : width\"\n          [attr.data-grabber]=\"'from'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : from\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : from\">\n</svg:line>\n<svg:line class=\"grabber\"\n          *ngIf=\"plotBand.resizable\"\n          [class.x-grabber]=\"axis.orientation === orientation.x\"\n          [class.y-grabber]=\"axis.orientation === orientation.y\"\n          [class.resizeable]=\"plotBand?.resizable\"\n          [attr.stroke]=\"plotBand.style?.grabbers?.stroke || 'var(--color-text-50)'\"\n          [attr.stroke-width]=\"8\"\n          [style.transform]=\"axis.orientation === orientation.x ? 'translateX(-2px)' : 'translateY(-2px)'\"\n          [attr.x1]=\"axis.orientation === orientation.x ? to : 0\"\n          [attr.x2]=\"axis.orientation === orientation.x ? to : width\"\n          [attr.data-grabber]=\"'to'\"\n          [attr.y1]=\"axis.orientation === orientation.x ? 0 : to\"\n          [attr.y2]=\"axis.orientation === orientation.x ? height : to\">\n</svg:line>\n\n\n", styles: [":host .draggable rect:hover{cursor:grab}:host .draggable rect:active{cursor:grabbing}:host .x-grabber.resizeable{cursor:col-resize}:host .y-grabber.resizeable{cursor:row-resize}:host:hover .grabber{opacity:.1}.grabber{opacity:0}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: ZoomService }, { type: ChartService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { plotBand: [{
@@ -1972,6 +2130,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class TooltipComponent {
+    svc;
+    cdr;
+    zoomService;
+    sanitizer;
+    _zone;
+    _elementRef;
+    size;
+    config;
+    tooltip;
+    position;
+    displayTooltips;
+    display;
+    tooltips;
     constructor(svc, cdr, zoomService, sanitizer, _zone, _elementRef) {
         this.svc = svc;
         this.cdr = cdr;
@@ -2041,12 +2212,12 @@ class TooltipComponent {
         const format = d3.format(',.5~r');
         return format(input);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container *tetaLet=\"position | async as p\">\n  <ng-container *ngIf=\"tooltips | async as t\">\n    <div class=\"chart-tooltip color-text-90 bg-global-bgcard shadow-2\"\n         #tooltip\n         [style.position]=\"'fixed'\"\n         *ngIf=\"t.length > 0\"\n         [style.opacity]=\"display | async\"\n         [hidden]=\"!p\"\n         style=\"pointer-events: none; min-width: 200px;\"\n         [style.left.px]=\"p?.left\"\n         [style.top.px]=\"p?.top\"\n         [style.bottom.px]=\"p?.bottom\"\n         [style.right.px]=\"p?.right\"\n    >\n      <ng-container *ngIf=\"config.tooltip?.template\">\n        <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"config.tooltip?.format; else default\">\n        <div [innerHTML]=\"displayTooltips | async\"></div>\n      </ng-container>\n\n      <ng-template #default>\n        <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n          <ng-container *ngFor=\"let tooltip of t\">\n            <div class=\"display-flex align-center\">\n            <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                  [style.background-color]=\"tooltip.series?.color\"></span>\n              <span class=\"font-title-3\">\n            {{ tooltip.series?.name }}\n                <span class=\"font-body-3\">\n              x: {{ format(tooltip.point?.x) }}\n                  y: {{ format(tooltip.point?.y) }}\n            </span>\n          </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container *tetaLet=\"position | async as p\">\n  <ng-container *ngIf=\"tooltips | async as t\">\n    <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n         #tooltip\n         [style.position]=\"'fixed'\"\n         *ngIf=\"t.length > 0\"\n         [style.opacity]=\"display | async\"\n         [hidden]=\"!p\"\n         style=\"pointer-events: none; min-width: 200px;\"\n         [style.left.px]=\"p?.left\"\n         [style.top.px]=\"p?.top\"\n         [style.bottom.px]=\"p?.bottom\"\n         [style.right.px]=\"p?.right\"\n    >\n      <ng-container *ngIf=\"config.tooltip?.template\">\n        <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"config.tooltip?.format; else default\">\n        <div [innerHTML]=\"displayTooltips | async\"></div>\n      </ng-container>\n\n      <ng-template #default>\n        <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n          <ng-container *ngFor=\"let tooltip of t\">\n            <div class=\"display-flex align-center\">\n            <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                  [style.background-color]=\"tooltip.series?.color\"></span>\n              <span class=\"font-title-3\">\n            {{ tooltip.series?.name }}\n                <span class=\"font-body-3\">\n              x: {{ format(tooltip.point?.x) }}\n                  y: {{ format(tooltip.point?.y) }}\n            </span>\n          </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *tetaLet=\"position | async as p\">\n  <ng-container *ngIf=\"tooltips | async as t\">\n    <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n         #tooltip\n         [style.position]=\"'fixed'\"\n         *ngIf=\"t.length > 0\"\n         [style.opacity]=\"display | async\"\n         [hidden]=\"!p\"\n         style=\"pointer-events: none; min-width: 200px;\"\n         [style.left.px]=\"p?.left\"\n         [style.top.px]=\"p?.top\"\n         [style.bottom.px]=\"p?.bottom\"\n         [style.right.px]=\"p?.right\"\n    >\n      <ng-container *ngIf=\"config.tooltip?.template\">\n        <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"config.tooltip?.format; else default\">\n        <div [innerHTML]=\"displayTooltips | async\"></div>\n      </ng-container>\n\n      <ng-template #default>\n        <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n          <ng-container *ngFor=\"let tooltip of t\">\n            <div class=\"display-flex align-center\">\n            <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                  [style.background-color]=\"tooltip.series?.color\"></span>\n              <span class=\"font-title-3\">\n            {{ tooltip.series?.name }}\n                <span class=\"font-body-3\">\n              x: {{ format(tooltip.point?.x) }}\n                  y: {{ format(tooltip.point?.y) }}\n            </span>\n          </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"] }]
+            args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *tetaLet=\"position | async as p\">\n  <ng-container *ngIf=\"tooltips | async as t\">\n    <div class=\"chart-tooltip color-text-90 bg-global-bgcard shadow-2\"\n         #tooltip\n         [style.position]=\"'fixed'\"\n         *ngIf=\"t.length > 0\"\n         [style.opacity]=\"display | async\"\n         [hidden]=\"!p\"\n         style=\"pointer-events: none; min-width: 200px;\"\n         [style.left.px]=\"p?.left\"\n         [style.top.px]=\"p?.top\"\n         [style.bottom.px]=\"p?.bottom\"\n         [style.right.px]=\"p?.right\"\n    >\n      <ng-container *ngIf=\"config.tooltip?.template\">\n        <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n      </ng-container>\n\n      <ng-container *ngIf=\"config.tooltip?.format; else default\">\n        <div [innerHTML]=\"displayTooltips | async\"></div>\n      </ng-container>\n\n      <ng-template #default>\n        <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n          <ng-container *ngFor=\"let tooltip of t\">\n            <div class=\"display-flex align-center\">\n            <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n                  [style.background-color]=\"tooltip.series?.color\"></span>\n              <span class=\"font-title-3\">\n            {{ tooltip.series?.name }}\n                <span class=\"font-body-3\">\n              x: {{ format(tooltip.point?.x) }}\n                  y: {{ format(tooltip.point?.y) }}\n            </span>\n          </span>\n            </div>\n          </ng-container>\n        </div>\n      </ng-template>\n    </div>\n  </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { size: [{
                 type: Input
             }], config: [{
@@ -2057,47 +2228,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class ZoomableDirective {
-    constructor(elementRef, zoomService, chartService, zone) {
-        this.elementRef = elementRef;
-        this.zoomService = zoomService;
-        this.chartService = chartService;
-        this.zone = zone;
-        this.zoomable = false;
-        this.crosshair = false;
-        this.alive = true;
-        this.currentTransform = zoomIdentity;
-        this.zoomed = (event) => {
-            if (event.sourceEvent && (this.elementRef.nativeElement === event.sourceEvent.target || this.elementRef.nativeElement.contains(event.sourceEvent.target))) {
-                if (Object.keys(event.sourceEvent).length !== 0) {
-                    const origin = this.axis.scale.copy().domain(this.axis.originDomain);
-                    if (this.axis.options.scaleType.type === ScaleType.band) {
-                        return;
-                    }
-                    const domain = this.axis.orientation === AxisOrientation.y
-                        ? event.transform.rescaleY(origin).domain()
-                        : event.transform.rescaleX(origin).domain();
-                    if (domain[0] === null || domain[0] === undefined
-                        || domain[1] === null || domain[1] === undefined
-                        || Math.abs(domain[0] - domain[1]) < 0.000001) {
-                        return;
-                    }
-                    const message = new ZoomMessage({
-                        eventType: event.type,
-                        axis: {
-                            index: this.axis.index,
-                            orientation: this.axis.orientation,
-                        },
-                        element: this.elementRef,
-                        domain,
-                        chartId: this.config.id
-                    });
-                    this.zoomService.fireZoom(message);
-                    this.zoomService.broadcastZoom(message);
-                }
-                this.currentTransform = event.transform;
-            }
-        };
-    }
+    elementRef;
+    zoomService;
+    chartService;
+    zone;
+    config;
+    axis;
+    size;
+    zoomable = false;
+    crosshair = false;
+    _element;
+    zoom;
+    alive = true;
     mouseenter() {
         this.zoom?.on('start zoom end', this.zoomed);
         this._element?.call(this.zoom).on('dblclick.zoom', null);
@@ -2110,6 +2252,13 @@ class ZoomableDirective {
         this.zoom?.on('start zoom end', null);
         this._element?.on('wheel', null);
     }
+    currentTransform = zoomIdentity;
+    constructor(elementRef, zoomService, chartService, zone) {
+        this.elementRef = elementRef;
+        this.zoomService = zoomService;
+        this.chartService = chartService;
+        this.zone = zone;
+    }
     ngOnInit() {
         if (this.axis?.options?.zoom || this.config?.zoom?.enable) {
             this.zoomable = this.config?.zoom?.zoomBehavior === ZoomBehaviorType.move && !this.config?.tooltip?.showCrosshair;
@@ -2197,6 +2346,37 @@ class ZoomableDirective {
             this.runWheelTranslate();
         }
     }
+    zoomed = (event) => {
+        if (event.sourceEvent && (this.elementRef.nativeElement === event.sourceEvent.target || this.elementRef.nativeElement.contains(event.sourceEvent.target))) {
+            if (Object.keys(event.sourceEvent).length !== 0) {
+                const origin = this.axis.scale.copy().domain(this.axis.originDomain);
+                if (this.axis.options.scaleType.type === ScaleType.band) {
+                    return;
+                }
+                const domain = this.axis.orientation === AxisOrientation.y
+                    ? event.transform.rescaleY(origin).domain()
+                    : event.transform.rescaleX(origin).domain();
+                if (domain[0] === null || domain[0] === undefined
+                    || domain[1] === null || domain[1] === undefined
+                    || Math.abs(domain[0] - domain[1]) < 0.000001) {
+                    return;
+                }
+                const message = new ZoomMessage({
+                    eventType: event.type,
+                    axis: {
+                        index: this.axis.index,
+                        orientation: this.axis.orientation,
+                    },
+                    element: this.elementRef,
+                    domain,
+                    chartId: this.config.id
+                });
+                this.zoomService.fireZoom(message);
+                this.zoomService.broadcastZoom(message);
+            }
+            this.currentTransform = event.transform;
+        }
+    };
     runWheelTranslate() {
         let type = 'start';
         let wheeling;
@@ -2270,10 +2450,10 @@ class ZoomableDirective {
             });
         });
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ChartService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, ngImport: i0 });
 }
-ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ChartService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ZoomableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaZoomable]',
@@ -2299,15 +2479,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class BrushableDirective {
+    brushService;
+    chartService;
+    element;
+    zone;
+    config;
+    axis;
+    selection;
+    brush;
+    brushMap = new Map()
+        .set(BrushType.x, d3.brushX())
+        .set(BrushType.y, d3.brushY());
+    _alive = true;
+    _container;
     constructor(brushService, chartService, element, zone) {
         this.brushService = brushService;
         this.chartService = chartService;
         this.element = element;
         this.zone = zone;
-        this.brushMap = new Map()
-            .set(BrushType.x, d3.brushX())
-            .set(BrushType.y, d3.brushY());
-        this._alive = true;
         this._container = d3.select(this.element.nativeElement);
     }
     ngOnInit() {
@@ -2429,10 +2618,10 @@ class BrushableDirective {
     clearPreviousSelection() {
         this.selection = null;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.4", type: BrushableDirective, selector: "[tetaBrushable]", inputs: { config: "config", axis: "axis" }, usesOnChanges: true, ngImport: i0 });
 }
-BrushableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushableDirective, deps: [{ token: BrushService }, { token: ChartService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-BrushableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: BrushableDirective, selector: "[tetaBrushable]", inputs: { config: "config", axis: "axis" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BrushableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BrushableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaBrushable]',
@@ -2444,14 +2633,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class AnnotationComponent {
-    constructor(scaleService, cdr, chartService) {
-        this.scaleService = scaleService;
-        this.cdr = cdr;
-        this.chartService = chartService;
-        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.annotation.xAxisIndex ?? 0)?.scale));
-        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.annotation.yAxisIndex ?? 0)?.scale));
-        this.drag = d3.drag();
-    }
+    scaleService;
+    cdr;
+    chartService;
+    visibleRect;
     set annotation(annotation) {
         this._annotation = annotation;
     }
@@ -2466,6 +2651,19 @@ class AnnotationComponent {
     get node() {
         return this._node;
     }
+    x;
+    y;
+    drag;
+    _annotation;
+    _node;
+    constructor(scaleService, cdr, chartService) {
+        this.scaleService = scaleService;
+        this.cdr = cdr;
+        this.chartService = chartService;
+        this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.annotation.xAxisIndex ?? 0)?.scale));
+        this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.annotation.yAxisIndex ?? 0)?.scale));
+        this.drag = d3.drag();
+    }
     click(event) {
         this.chartService.emitAnnotation({
             event,
@@ -2514,12 +2712,12 @@ class AnnotationComponent {
             d3.select(this.node.nativeElement).call(this.drag);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AnnotationComponent, deps: [{ token: ScaleService }, { token: i0.ChangeDetectorRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { visibleRect: "visibleRect", annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <svg:circle\n      [attr.r]=\"annotation.style?.radius ?? 5\"\n      [attr.cx]=\"data.x(annotation.point.x)\"\n      [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n      [attr.cy]=\"data.y(annotation.point.y)\">\n    </svg:circle>\n    <svg:line\n      [attr.x1]=\"data.x(annotation.point.x)\"\n      [attr.y1]=\"data.y(annotation.point.y)\"\n      [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n      [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n      [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n      [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n      [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n    >\n    </svg:line>\n    <svg:foreignObject\n      class=\"position-absolute\"\n      [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n      [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n      [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n      [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n      <div\n        #annotationNode\n        [style.background-color]=\"annotation.style?.fill ?? 'var(--color-global-bgmain)'\"\n        [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n        [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n        style=\"border-radius: 2px; display: inline-block;\">\n        <ng-container *ngIf=\"annotation.template;else default\">\n          <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n        </ng-container>\n      </div>\n    </svg:foreignObject>\n  </ng-container>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-AnnotationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AnnotationComponent, deps: [{ token: ScaleService }, { token: i0.ChangeDetectorRef }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-AnnotationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AnnotationComponent, selector: "[teta-annotation]", inputs: { visibleRect: "visibleRect", annotation: "annotation" }, host: { listeners: { "click": "click($event)", "contextmenu": "contextMenu($event)" } }, viewQueries: [{ propertyName: "node", first: true, predicate: ["annotationNode"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <svg:circle\n      [attr.r]=\"annotation.style?.radius ?? 5\"\n      [attr.cx]=\"data.x(annotation.point.x)\"\n      [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n      [attr.cy]=\"data.y(annotation.point.y)\">\n    </svg:circle>\n    <svg:line\n      [attr.x1]=\"data.x(annotation.point.x)\"\n      [attr.y1]=\"data.y(annotation.point.y)\"\n      [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n      [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n      [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n      [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n      [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n    >\n    </svg:line>\n    <svg:foreignObject\n      class=\"position-absolute\"\n      [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n      [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n      [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n      [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n      <div\n        #annotationNode\n        [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n        [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n        [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n        style=\"border-radius: 2px; display: inline-block;\">\n        <ng-container *ngIf=\"annotation.template;else default\">\n          <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n        </ng-container>\n      </div>\n    </svg:foreignObject>\n  </ng-container>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AnnotationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AnnotationComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[teta-annotation]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <svg:circle\n      [attr.r]=\"annotation.style?.radius ?? 5\"\n      [attr.cx]=\"data.x(annotation.point.x)\"\n      [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n      [attr.cy]=\"data.y(annotation.point.y)\">\n    </svg:circle>\n    <svg:line\n      [attr.x1]=\"data.x(annotation.point.x)\"\n      [attr.y1]=\"data.y(annotation.point.y)\"\n      [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n      [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n      [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n      [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n      [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n    >\n    </svg:line>\n    <svg:foreignObject\n      class=\"position-absolute\"\n      [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n      [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n      [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n      [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n      <div\n        #annotationNode\n        [style.background-color]=\"annotation.style?.fill ?? 'var(--color-text-90)'\"\n        [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n        [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n        style=\"border-radius: 2px; display: inline-block;\">\n        <ng-container *ngIf=\"annotation.template;else default\">\n          <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n        </ng-container>\n      </div>\n    </svg:foreignObject>\n  </ng-container>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n" }]
+            args: [{ selector: '[teta-annotation]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n      x: x | async,\n      y: y | async\n    } as data\">\n  <ng-container *ngIf=\"data.x && data.y\">\n\n\n    <svg:circle\n      [attr.r]=\"annotation.style?.radius ?? 5\"\n      [attr.cx]=\"data.x(annotation.point.x)\"\n      [attr.fill]=\"annotation?.style?.fill ?? 'var(--color-text-90)'\"\n      [attr.cy]=\"data.y(annotation.point.y)\">\n    </svg:circle>\n    <svg:line\n      [attr.x1]=\"data.x(annotation.point.x)\"\n      [attr.y1]=\"data.y(annotation.point.y)\"\n      [attr.x2]=\"data.x(annotation.point.x) + (annotation.dx ?? 0)\"\n      [attr.y2]=\"data.y(annotation.point.y) + (annotation.dy ?? 0)\"\n      [attr.stroke]=\"annotation.style?.stroke ?? 'var(--color-text-90)'\"\n      [attr.stroke-width]=\"annotation.style?.strokeWidth ?? 1\"\n      [attr.stroke-dasharray]=\"annotation.style?.strokeDasharray ?? null\"\n    >\n    </svg:line>\n    <svg:foreignObject\n      class=\"position-absolute\"\n      [attr.width]=\"node?.nativeElement.offsetWidth ?? 0\"\n      [attr.height]=\"node?.nativeElement.offsetHeight ?? 0\"\n      [attr.x]=\"data.x(annotation.point.x) + (annotation.dx ?? 0) - 10\"\n      [attr.y]=\"data.y(annotation.point.y) + (annotation.dy ?? 0) - 10\">\n      <div\n        #annotationNode\n        [style.background-color]=\"annotation.style?.fill ?? 'var(--color-global-bgmain)'\"\n        [style.cursor]=\"annotation?.draggable ? 'move' : 'default'\"\n        [className]=\"'padding-h-2 ' + annotation.className ?? ''\"\n        style=\"border-radius: 2px; display: inline-block;\">\n        <ng-container *ngIf=\"annotation.template;else default\">\n          <ng-container *ngTemplateOutlet=\"annotation.template;context: {$implicit: annotation}\"></ng-container>\n        </ng-container>\n      </div>\n    </svg:foreignObject>\n  </ng-container>\n</ng-container>\n<ng-template #default>\n  {{ annotation.note?.label}}\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: i0.ChangeDetectorRef }, { type: ChartService }]; }, propDecorators: { visibleRect: [{
                 type: Input
             }], annotation: [{
@@ -2536,6 +2734,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class CrosshairComponent {
+    scaleService;
+    chartService;
+    cdr;
+    size;
+    transform;
     constructor(scaleService, chartService, cdr) {
         this.scaleService = scaleService;
         this.chartService = chartService;
@@ -2553,10 +2756,10 @@ class CrosshairComponent {
             });
         }));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: CrosshairComponent, deps: [{ token: ScaleService }, { token: ChartService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"transform | async as t\">\n  <svg:line [attr.x1]=\"t.x\" y1=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"size.height\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n  <svg:line x1=\"0\" [attr.y1]=\"t.y\" [attr.x2]=\"size.width\" [attr.y2]=\"t.y\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
-CrosshairComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CrosshairComponent, deps: [{ token: ScaleService }, { token: ChartService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CrosshairComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"transform | async as t\">\n  <svg:line [attr.x1]=\"t.x\" y1=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"size.height\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n  <svg:line x1=\"0\" [attr.y1]=\"t.y\" [attr.x2]=\"size.width\" [attr.y2]=\"t.y\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: CrosshairComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: CrosshairComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-crosshair]', template: "<ng-container *ngIf=\"transform | async as t\">\n  <svg:line [attr.x1]=\"t.x\" y1=\"0\" [attr.x2]=\"t.x\" [attr.y2]=\"size.height\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n  <svg:line x1=\"0\" [attr.y1]=\"t.y\" [attr.x2]=\"size.width\" [attr.y2]=\"t.y\" stroke=\"var(--color-text-90)\" stroke-width=\"0.5\"></svg:line>\n</ng-container>\n", styles: [":host{shape-rendering:crispEdges;pointer-events:none}\n"] }]
         }], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
@@ -2564,6 +2767,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class ChartContainerComponent {
+    _svc;
+    _cdr;
+    _scaleService;
+    _zoomService;
+    _elementRef;
+    _zone;
+    config;
+    scales;
+    size;
+    visibleRect;
+    brushScale;
+    zoomType = ZoomType;
+    _observer;
+    filterPositionMap = new Map()
+        .set(true, (axis) => (_) => _.options.opposite && _.options.visible && axis.index <= _.index)
+        .set(false, (axis) => (_) => _.options.opposite !== true &&
+        _.options.visible &&
+        _.index <= axis.index);
     constructor(_svc, _cdr, _scaleService, _zoomService, _elementRef, _zone) {
         this._svc = _svc;
         this._cdr = _cdr;
@@ -2571,13 +2792,6 @@ class ChartContainerComponent {
         this._zoomService = _zoomService;
         this._elementRef = _elementRef;
         this._zone = _zone;
-        this.zoomType = ZoomType;
-        this.filterPositionMap = new Map()
-            .set(true, (axis) => (_) => _.options.opposite && _.options.visible && axis.index <= _.index)
-            .set(false, (axis) => (_) => _.options.opposite !== true &&
-            _.options.visible &&
-            _.index <= axis.index);
-        this.sumSize = (acc, curr) => acc + curr.selfSize;
         this.config = this._svc.config;
         this.size = this._svc.size;
         this.scales = this._scaleService.scales.pipe(observeOn(animationFrameScheduler), tetaZoneFull(this._zone), shareReplay({
@@ -2647,6 +2861,7 @@ class ChartContainerComponent {
         this._observer.unobserve(this._elementRef.nativeElement);
         this._observer.disconnect();
     }
+    sumSize = (acc, curr) => acc + curr.selfSize;
     getTranslate(axis, size) {
         return this.scales.pipe(withLatestFrom(this.config), map((data) => {
             const [{ x, y }, config] = data;
@@ -2715,25 +2930,27 @@ class ChartContainerComponent {
     trackSerie(index, item) {
         return item.name?.length ? item.name : index;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.size?.height > 0\n                      && data.size?.width > 0\n                      && data.visibleRect?.height > 0\n                      && data.visibleRect?.width > 0\n                      && data.scales?.x.size === data.config.xAxis.length\n                      && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.selfSize > 0\n                                && item.value.options.visible\n                                && data.scales.x.size > 0\n                                && data.scales.y.size > 0\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container\n    *ngIf=\"data.size?.height > 0\n          && data.size?.width > 0\n          && data.visibleRect?.height > 0\n          && data.visibleRect?.width > 0\n          && data.scales?.x.size === data.config.xAxis.length\n          && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           [visibleRect]=\"data.visibleRect\"\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["visibleRect", "annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-ChartContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChartContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartContainerComponent, selector: "teta-chart-container", ngImport: i0, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.size?.height > 0\n                      && data.size?.width > 0\n                      && data.visibleRect?.height > 0\n                      && data.visibleRect?.width > 0\n                      && data.scales?.x.size === data.config.xAxis.length\n                      && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.selfSize > 0\n                                && item.value.options.visible\n                                && data.scales.x.size > 0\n                                && data.scales.y.size > 0\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container\n    *ngIf=\"data.size?.height > 0\n          && data.size?.width > 0\n          && data.visibleRect?.height > 0\n          && data.visibleRect?.width > 0\n          && data.scales?.x.size === data.config.xAxis.length\n          && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           [visibleRect]=\"data.visibleRect\"\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SeriesHostComponent, selector: "[teta-series-host]", inputs: ["config", "series"] }, { kind: "component", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: ["size"] }, { kind: "component", type: XAxisComponent, selector: "[teta-x-axis]", inputs: ["axis", "size"] }, { kind: "component", type: YAxisComponent, selector: "[teta-y-axis]", inputs: ["axis", "size"] }, { kind: "component", type: PlotlineComponent, selector: "[teta-plot-line]", inputs: ["plotLine", "size", "axis", "scale"] }, { kind: "component", type: PlotBandComponent, selector: "[teta-plot-band]", inputs: ["plotBand", "axis", "scale", "size"] }, { kind: "component", type: TooltipComponent, selector: "teta-tooltip", inputs: ["size", "config"] }, { kind: "directive", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: ["config", "axis", "size"] }, { kind: "directive", type: BrushableDirective, selector: "[tetaBrushable]", inputs: ["config", "axis"] }, { kind: "component", type: AnnotationComponent, selector: "[teta-annotation]", inputs: ["visibleRect", "annotation"] }, { kind: "component", type: CrosshairComponent, selector: "[teta-crosshair]", inputs: ["size"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ChartContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-chart-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  size: size | async,\n  config: config | async,\n  scales: scales | async,\n  visibleRect: visibleRect | async\n} as data\" xmlns:svg=\"http://www.w3.org/1999/html\">\n  <teta-tooltip *ngIf=\"data.config?.tooltip?.enable\"\n                [size]=\"data.size\"\n                [config]=\"data.config\"></teta-tooltip>\n  <ng-container *ngIf=\"data.size?.height > 0\n                      && data.size?.width > 0\n                      && data.visibleRect?.height > 0\n                      && data.visibleRect?.width > 0\n                      && data.scales?.x.size === data.config.xAxis.length\n                      && data.scales?.y.size === data.config.yAxis.length\">\n    <svg height=\"100%\" width=\"100%\" class=\"position-absolute\">\n      <g class=\"y-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.y | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.selfSize > 0\n                                && item.value.options.visible\n                                && data.scales.x.size > 0\n                                && data.scales.y.size > 0\">\n            <g\n              teta-y-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"item.value.options.opposite ? 0 : -item.value.selfSize\"\n              [attr.y]=\"0\"\n              [attr.height]=\"data.visibleRect.height\"\n              [attr.width]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n\n        </ng-container>\n      </g>\n      <g class=\"x-axis-container\">\n        <ng-container *ngFor=\"let item of data.scales.x | keyvalue; trackBy: identify\">\n          <ng-container *ngIf=\"item.value.options.visible && data.scales.x.size > 0 && data.scales.y.size > 0\">\n            <g\n              teta-x-axis\n              [axis]=\"item.value\"\n              [size]=\"data.visibleRect\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></g>\n            <rect\n              tetaZoomable\n              fill-opacity=\"0\"\n              [axis]=\"item.value\"\n              [config]=\"data.config\"\n              [size]=\"data.visibleRect\"\n              [attr.x]=\"0\"\n              [attr.y]=\"item.value.options.opposite ? -item.value.selfSize : 0\"\n              [attr.width]=\"data.visibleRect.width\"\n              [attr.height]=\"item.value.selfSize\"\n              [attr.transform]=\"getTranslate(item.value, data.size) | async\"></rect>\n          </ng-container>\n        </ng-container>\n      </g>\n    </svg>\n  </ng-container>\n  <ng-container\n    *ngIf=\"data.size?.height > 0\n          && data.size?.width > 0\n          && data.visibleRect?.height > 0\n          && data.visibleRect?.width > 0\n          && data.scales?.x.size === data.config.xAxis.length\n          && data.scales?.y.size === data.config.yAxis.length\">\n    <svg\n      tetaZoomable\n      tetaBrushable\n      class=\"position-absolute\"\n      [size]=\"data.visibleRect\"\n      [config]=\"data.config\"\n      [axis]=\"data.config?.zoom?.type === zoomType.x ? data.scales.x.get(0) : data.scales.y.get(0)\"\n      [attr.width]=\"data.visibleRect.width\"\n      [attr.height]=\"data.visibleRect.height\"\n      [attr.viewBox]=\"'0 0 ' + data.visibleRect.width + ' ' + data.visibleRect.height\"\n      [style.transform]=\"'translate('+ data.visibleRect.x +'px, '+ data.visibleRect.y +'px)'\"\n      (contextmenu)=\"contextMenu($event, data.scales.x, data.scales.y)\"\n      (click)=\"click($event, data.scales.x, data.scales.y)\"\n      (mouseleave)=\"mouseLeave($event)\"\n      (mousemove)=\"mouseMove($event)\">\n\n      <g class=\"gridlines\"\n         teta-gridlines\n         *ngIf=\"data.config.gridLines?.enable !== false\"\n         [size]=\"data.size\"></g>\n\n      <g class=\"x-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotband-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-band *ngFor=\"let plotBand of axis.plotBands\"\n             [plotBand]=\"plotBand\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.visibleRect\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"x-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.xAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.x.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.x.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"y-axis-plotline-container\">\n        <ng-container *ngFor=\"let axis of data.config.yAxis; let i = index\">\n          <g teta-plot-line *ngFor=\"let plotLine of axis.plotLines\"\n             [plotLine]=\"plotLine\"\n             [scale]=\"data.scales.y.get(i).scale\"\n             [size]=\"data.size\"\n             [axis]=\"data.scales.y.get(i)\"></g>\n        </ng-container>\n      </g>\n      <g class=\"series-container\">\n        <ng-container *ngFor=\"let series of data.config.series;\">\n          <g teta-series-host\n             *ngIf=\"series.visible\"\n             [config]=\"data.config\"\n             [series]=\"series\"></g>\n        </ng-container>\n      </g>\n      <g class=\"annotations\">\n        <g teta-annotation\n           [visibleRect]=\"data.visibleRect\"\n           *ngFor=\"let annotation of data.config.annotations\"\n           [annotation]=\"annotation\"></g>\n      </g>\n      <g class=\"crosshair\" *ngIf=\"data.config.tooltip?.showCrosshair\">\n        <g teta-crosshair [size]=\"data.visibleRect\"></g>\n      </g>\n    </svg>\n\n  </ng-container>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-width:0;min-height:0}:host .zoomable:hover{cursor:grab}:host .zoomable:active{cursor:grabbing}:host .crosshair{cursor:crosshair}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
 class LegendComponent {
+    chartService;
+    sizeMapping = new Map()
+        .set(SeriesType.line, 2)
+        .set(SeriesType.scatter, 2)
+        .set(SeriesType.bar, 12)
+        .set(SeriesType.area, 2)
+        .set(SeriesType.block, 12)
+        .set(SeriesType.blockArea, 2);
+    series;
+    classLegend = true;
     constructor(chartService) {
         this.chartService = chartService;
-        this.sizeMapping = new Map()
-            .set(SeriesType.line, 2)
-            .set(SeriesType.scatter, 2)
-            .set(SeriesType.bar, 12)
-            .set(SeriesType.area, 2)
-            .set(SeriesType.block, 12)
-            .set(SeriesType.blockArea, 2);
-        this.classLegend = true;
     }
     getHeight(serie) {
         return this.sizeMapping.get(serie.type ?? SeriesType.line);
@@ -2741,10 +2958,10 @@ class LegendComponent {
     click(serie) {
         this.chartService.toggleVisibilitySeries([serie.id]);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LegendComponent, deps: [{ token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: LegendComponent, selector: "teta-legend", inputs: { series: "series" }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n  <div *ngIf=\"serie?.showInLegend !== false\">\n    <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n      <div class=\"legend-icon-form\"\n           [style.height.px]=\"getHeight(serie)\"\n           [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n           [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n           [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"></div>\n      <div class=\"legend-label\" style=\"user-select: none\" [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}</div>\n    </div>\n  </div>\n</ng-container>\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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-LegendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LegendComponent, deps: [{ token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-LegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: LegendComponent, selector: "teta-legend", inputs: { series: "series" }, host: { properties: { "class.padding-bottom-4": "this.classLegend" } }, ngImport: i0, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n  <div *ngIf=\"serie?.showInLegend !== false\">\n    <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n      <div class=\"legend-icon-form\"\n           [style.height.px]=\"getHeight(serie)\"\n           [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n           [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n           [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"></div>\n      <div class=\"legend-label\" style=\"user-select: none\" [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}</div>\n    </div>\n  </div>\n</ng-container>\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"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: LegendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: LegendComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let serie of series\" class=\"padding-bottom-4\">\n  <div *ngIf=\"serie?.showInLegend !== false\">\n    <div class=\"legend-item cursor-pointer\" (click)=\"click(serie)\">\n      <div class=\"legend-icon-form\"\n           [style.height.px]=\"getHeight(serie)\"\n           [style.border-top-color]=\"serie.visible ? serie.color : 'var(--color-text-30)'\"\n           [style.border-top-style]=\"serie.style?.strokeDasharray ? 'dashed' : 'solid'\"\n           [style.border-width.px]=\"serie.style?.strokeDasharray ? 1 : 2\"></div>\n      <div class=\"legend-label\" style=\"user-select: none\" [style.text-decoration]=\"serie.visible ? 'none' : 'line-through'\">{{ serie.name }}</div>\n    </div>\n  </div>\n</ng-container>\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"] }]
         }], ctorParameters: function () { return [{ type: ChartService }]; }, propDecorators: { series: [{
@@ -2755,38 +2972,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class ChartComponent {
+    chartService;
+    zoomService;
+    brushService;
+    scaleService;
+    hasSeriesData;
+    svcConfig;
+    pointerMove = new EventEmitter();
+    plotBandsMove = new EventEmitter();
+    plotBandClick = new EventEmitter();
+    plotBandContextMenu = new EventEmitter();
+    plotLinesMove = new EventEmitter();
+    pointMove = new EventEmitter();
+    chartClick = new EventEmitter();
+    chartContextMenu = new EventEmitter();
+    annotationContextMenu = new EventEmitter();
+    annotationClick = new EventEmitter();
+    annotationMove = new EventEmitter();
+    zoomServiceInstance = new EventEmitter();
+    brushServiceInstance = new EventEmitter();
+    set config(config) {
+        this.chartService.setConfig(config);
+        this.zoomService.setBroadcastChannel(config?.zoom?.syncChannel);
+    }
+    _alive = true;
     constructor(chartService, zoomService, brushService, scaleService) {
         this.chartService = chartService;
         this.zoomService = zoomService;
         this.brushService = brushService;
         this.scaleService = scaleService;
-        this.pointerMove = new EventEmitter();
-        this.plotBandsMove = new EventEmitter();
-        this.plotBandClick = new EventEmitter();
-        this.plotBandContextMenu = new EventEmitter();
-        this.plotLinesMove = new EventEmitter();
-        this.pointMove = new EventEmitter();
-        this.chartClick = new EventEmitter();
-        this.chartContextMenu = new EventEmitter();
-        this.annotationContextMenu = new EventEmitter();
-        this.annotationClick = new EventEmitter();
-        this.annotationMove = new EventEmitter();
-        this.zoomServiceInstance = new EventEmitter();
-        this.brushServiceInstance = new EventEmitter();
-        this._alive = true;
         this.svcConfig = this.chartService.config;
         this.hasSeriesData = this.svcConfig.pipe(map((_) => _.series?.length > 0 && _.series?.some((_) => _.data?.length > 0)));
     }
-    set config(config) {
-        this.chartService.setConfig(config);
-        this.zoomService.setBroadcastChannel(config?.zoom?.syncChannel);
-    }
     resetZoom() {
         this.scaleService.resetZoom();
     }
-    // setZoom() {
-    //   this.zoomService.fireZoom()
-    // }
     ngOnChanges(changes) {
     }
     ngOnInit() {
@@ -2874,10 +3094,10 @@ class ChartComponent {
     ngOnDestroy() {
         this._alive = false;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: BrushService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove", zoomServiceInstance: "zoomServiceInstance", brushServiceInstance: "brushServiceInstance" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto justify-content-center\">\n    <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n      <div #ref><ng-content></ng-content></div>\n      <span *ngIf=\"!ref.hasChildNodes()\">\n        No data\n      </span>\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: BrushService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove", zoomServiceInstance: "zoomServiceInstance", brushServiceInstance: "brushServiceInstance" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto justify-content-center\">\n    <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n      <div #ref><ng-content></ng-content></div>\n      <span *ngIf=\"!ref.hasChildNodes()\">\n        No data\n      </span>\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-svg-chart', providers: [ChartService, ZoomService, ScaleService, BrushService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto justify-content-center\">\n    <span class=\"font-body-3 color-text-40 overflow-hidden text-overflow-ellipsis nowrap text-align-center\">\n      <div #ref><ng-content></ng-content></div>\n      <span *ngIf=\"!ref.hasChildNodes()\">\n        No data\n      </span>\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }, { type: BrushService }, { type: ScaleService }]; }, propDecorators: { pointerMove: [{
@@ -2911,6 +3131,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class BandseriesComponent extends SeriesBaseComponent {
+    svc;
+    cdr;
+    scaleService;
+    zoomService;
+    element;
+    x;
+    y;
     constructor(svc, cdr, scaleService, zoomService, element) {
         super(svc, cdr, scaleService, zoomService, element);
         this.svc = svc;
@@ -2923,51 +3150,51 @@ class BandseriesComponent extends SeriesBaseComponent {
         this.x = this.scaleService.scales.pipe(map(_ => _.x.get(this.series.xAxisIndex)?.scale));
         this.y = this.scaleService.scales.pipe(map(_ => _.y.get(this.series.yAxisIndex)?.scale));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BandseriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.4", type: BandseriesComponent, selector: "svg:svg[teta-bandseries]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{x: x | async, y: y | async} as scales\">\n  <ng-container *ngFor=\"let band of _series.data\">\n    <svg:rect [attr.x]=\"scales.x(band.x)\"\n              [attr.y]=\"scales.y(band.y) - scales.y.bandwidth() / 2\"\n              [attr.width]=\"scales.x(band.x1) - scales.x(band.x)\"\n              fill=\"red\"\n              [attr.height]=\"scales.y.bandwidth()\">\n    </svg:rect>\n    <svg:text\n      text-anchor=\"middle\"\n      dominant-baseline=\"middle\"\n      class=\"label font-caption fill-text-90\"\n      [attr.x]=\"scales.x(band.x) + (scales.x(band.x1) - scales.x(band.x)) / 2\"\n      [attr.y]=\"scales.y(band.y)\">{{band.y}}\n    </svg:text>\n  </ng-container>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
-BandseriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BandseriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-BandseriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BandseriesComponent, selector: "svg:svg[teta-bandseries]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{x: x | async, y: y | async} as scales\">\n  <ng-container *ngFor=\"let band of _series.data\">\n    <svg:rect [attr.x]=\"scales.x(band.x)\"\n              [attr.y]=\"scales.y(band.y) - scales.y.bandwidth() / 2\"\n              [attr.width]=\"scales.x(band.x1) - scales.x(band.x)\"\n              fill=\"red\"\n              [attr.height]=\"scales.y.bandwidth()\">\n    </svg:rect>\n    <svg:text\n      text-anchor=\"middle\"\n      dominant-baseline=\"middle\"\n      class=\"label font-caption fill-text-90\"\n      [attr.x]=\"scales.x(band.x) + (scales.x(band.x1) - scales.x(band.x)) / 2\"\n      [attr.y]=\"scales.y(band.y)\">{{band.y}}\n    </svg:text>\n  </ng-container>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BandseriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: BandseriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'svg:svg[teta-bandseries]', template: "<ng-container *ngIf=\"{x: x | async, y: y | async} as scales\">\n  <ng-container *ngFor=\"let band of _series.data\">\n    <svg:rect [attr.x]=\"scales.x(band.x)\"\n              [attr.y]=\"scales.y(band.y) - scales.y.bandwidth() / 2\"\n              [attr.width]=\"scales.x(band.x1) - scales.x(band.x)\"\n              fill=\"red\"\n              [attr.height]=\"scales.y.bandwidth()\">\n    </svg:rect>\n    <svg:text\n      text-anchor=\"middle\"\n      dominant-baseline=\"middle\"\n      class=\"label font-caption fill-text-90\"\n      [attr.x]=\"scales.x(band.x) + (scales.x(band.x1) - scales.x(band.x)) / 2\"\n      [attr.y]=\"scales.y(band.y)\">{{band.y}}\n    </svg:text>\n  </ng-container>\n\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
 
 class ChartModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.4", ngImport: i0, type: ChartModule, declarations: [ChartComponent,
+            SeriesHostComponent,
+            ChartContainerComponent,
+            LegendComponent,
+            SeriesBaseComponent,
+            LinearSeriesBase,
+            LineSeriesComponent,
+            GridlinesComponent,
+            XAxisComponent,
+            YAxisComponent,
+            PlotlineComponent,
+            PlotBandComponent,
+            BarSeriesComponent,
+            TooltipComponent,
+            ZoomableDirective,
+            BrushableDirective,
+            AreaSeriesComponent,
+            ScatterSeriesComponent,
+            BlockSeriesComponent,
+            BlockAreaSeriesComponent,
+            AnnotationComponent,
+            CrosshairComponent,
+            DraggablePointDirective,
+            BandseriesComponent], imports: [CommonModule, LetModule], exports: [ChartComponent,
+            LegendComponent,
+            SeriesBaseComponent,
+            LineSeriesComponent,
+            BarSeriesComponent,
+            ScatterSeriesComponent,
+            AreaSeriesComponent,
+            BlockSeriesComponent,
+            BlockAreaSeriesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ChartModule, imports: [CommonModule, LetModule] });
 }
-ChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, declarations: [ChartComponent,
-        SeriesHostComponent,
-        ChartContainerComponent,
-        LegendComponent,
-        SeriesBaseComponent,
-        LinearSeriesBase,
-        LineSeriesComponent,
-        GridlinesComponent,
-        XAxisComponent,
-        YAxisComponent,
-        PlotlineComponent,
-        PlotBandComponent,
-        BarSeriesComponent,
-        TooltipComponent,
-        ZoomableDirective,
-        BrushableDirective,
-        AreaSeriesComponent,
-        ScatterSeriesComponent,
-        BlockSeriesComponent,
-        BlockAreaSeriesComponent,
-        AnnotationComponent,
-        CrosshairComponent,
-        DraggablePointDirective,
-        BandseriesComponent], imports: [CommonModule, LetModule], exports: [ChartComponent,
-        LegendComponent,
-        SeriesBaseComponent,
-        LineSeriesComponent,
-        BarSeriesComponent,
-        ScatterSeriesComponent,
-        AreaSeriesComponent,
-        BlockSeriesComponent,
-        BlockAreaSeriesComponent] });
-ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, imports: [CommonModule, LetModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: ChartModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -3012,6 +3239,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
         }] });
 
 class PlotBand {
+    id;
+    name;
+    from;
+    to;
+    label;
+    showGrabbers;
+    draggable;
+    resizable;
+    min;
+    max;
+    style;
     constructor(options) {
         this.id = options?.id;
         this.name = options?.name;
@@ -3029,6 +3267,14 @@ class PlotBand {
 }
 
 class PlotLine {
+    id;
+    name;
+    value;
+    label;
+    min;
+    max;
+    draggable;
+    style;
     constructor(options) {
         this.id = options?.id;
         this.name = options?.name;