@tetacom/ng-components 1.0.9 → 1.0.13

package/fesm2015/tetacom-ng-components.mjs

@@ -247,7 +247,15 @@ class IconSpriteDirective {
         this.bypassInterceptors = true;
     }
     ngOnInit() {
-        this._iconService.addSprite(this.tetaIconSprite, this.bypassInterceptors);
+        var _a;
+        if (typeof this.tetaIconSprite === 'string') {
+            this._iconService.addSprite(this.tetaIconSprite, this.bypassInterceptors);
+        }
+        if (this.tetaIconSprite instanceof Array && ((_a = this.tetaIconSprite) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.tetaIconSprite.forEach((sprite) => {
+                this._iconService.addSprite(sprite, this.bypassInterceptors);
+            });
+        }
     }
 }
 IconSpriteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: IconSpriteDirective, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2693,7 +2701,6 @@ class OnlyNumberDirective {
             value = '0.0';
         }
         const valid = new RegExp(regex).test(value.toString());
-        console.log(value, valid);
         this._control.control.setValue(valid ? value : (_a = this._previousValue) !== null && _a !== void 0 ? _a : 0);
     }
 }
@@ -3555,6 +3562,7 @@ class TextFieldComponent {
         this.placeholder = '';
         this.disabled = false;
         this.onlyNumber = false;
+        this.tabindex = 0;
         this.textField = true;
         this.value = '';
     }
@@ -3566,6 +3574,9 @@ class TextFieldComponent {
             this.input.nativeElement.blur();
         }
     }
+    emitBlur() {
+        this.onTouched();
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -3580,17 +3591,19 @@ class TextFieldComponent {
         this.value = input;
         this._cdr.detectChanges();
     }
-    onChange(input) { }
-    onTouched(input) { }
+    onChange(input) {
+    }
+    onTouched() {
+    }
 }
 TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TextFieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TextFieldComponent, selector: "teta-text-field", inputs: { placeholder: "placeholder", leftIconName: "leftIconName", disabled: "disabled", onlyNumber: "onlyNumber", invalid: "invalid" }, host: { listeners: { "click": "onFocus()" }, properties: { "class.text-field_disabled": "this.disabled", "class.text-field_invalid": "this.invalid", "class.text-field": "this.textField" } }, providers: [
+TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TextFieldComponent, selector: "teta-text-field", inputs: { placeholder: "placeholder", leftIconName: "leftIconName", disabled: "disabled", onlyNumber: "onlyNumber", invalid: "invalid" }, host: { listeners: { "click": "onFocus()" }, properties: { "class.text-field_disabled": "this.disabled", "class.text-field_invalid": "this.invalid", "attr.tabindex": "this.tabindex", "class.text-field": "this.textField" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TextFieldComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n  #input\n  [ngModel]=\"value\"\n  [tetaOnlyNumber]=\"onlyNumber\"\n  (ngModelChange)=\"value = $event; onChange($event);\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  (keydown)=\"keyPress($event)\"\n  autocomplete=\"off\"\n  type=\"text\"\n/>\n<teta-icon\n  *ngIf=\"value && !disabled\"\n  class=\"close-icon\"\n  [name]=\"'closeCircle'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n  #input\n  [ngModel]=\"value\"\n  [tetaOnlyNumber]=\"onlyNumber\"\n  (ngModelChange)=\"value = $event; onChange($event);\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitBlur()\"\n  (keydown)=\"keyPress($event)\"\n  autocomplete=\"off\"\n  type=\"text\"\n/>\n<teta-icon\n  *ngIf=\"value && !disabled\"\n  class=\"close-icon\"\n  [name]=\"'closeCircle'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-text-field', providers: [
@@ -3599,7 +3612,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                             useExisting: forwardRef(() => TextFieldComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n  #input\n  [ngModel]=\"value\"\n  [tetaOnlyNumber]=\"onlyNumber\"\n  (ngModelChange)=\"value = $event; onChange($event);\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  (keydown)=\"keyPress($event)\"\n  autocomplete=\"off\"\n  type=\"text\"\n/>\n<teta-icon\n  *ngIf=\"value && !disabled\"\n  class=\"close-icon\"\n  [name]=\"'closeCircle'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n  #input\n  [ngModel]=\"value\"\n  [tetaOnlyNumber]=\"onlyNumber\"\n  (ngModelChange)=\"value = $event; onChange($event);\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitBlur()\"\n  (keydown)=\"keyPress($event)\"\n  autocomplete=\"off\"\n  type=\"text\"\n/>\n<teta-icon\n  *ngIf=\"value && !disabled\"\n  class=\"close-icon\"\n  [name]=\"'closeCircle'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { placeholder: [{
                 type: Input
             }], leftIconName: [{
@@ -3619,6 +3632,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }], input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
+            }], tabindex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
             }], textField: [{
                 type: HostBinding,
                 args: ['class.text-field']
@@ -10046,15 +10062,17 @@ class BarDrawer {
 var DispatchType;
 (function (DispatchType) {
     DispatchType["moveLine"] = "moveLine";
+    DispatchType["movePoint"] = "movePoint";
 })(DispatchType || (DispatchType = {}));
 
 class LineDrawer {
     constructor() {
-        this.dispatch = d3.dispatch(DispatchType.moveLine);
+        this.dispatch = d3.dispatch(DispatchType.moveLine, DispatchType.movePoint);
     }
     draw(series, context, scaleX, scaleY, options) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         const points = series.data;
+        const markerPoints = points.filter((_) => _.marker);
         const path = d3
             .line()
             .curve(series.curveType)
@@ -10062,6 +10080,40 @@ class LineDrawer {
             .x((d) => scaleX(d.x))
             .y((d) => scaleY(d.y));
         const seriesIndex = options.series.findIndex((_) => _.id === series.id);
+        if (markerPoints === null || markerPoints === void 0 ? void 0 : markerPoints.length) {
+            const emit = (event, target) => {
+                this.dispatch.apply(DispatchType.movePoint, {
+                    target: series,
+                    point: Object.assign({}, target),
+                    event,
+                });
+            };
+            context
+                .selectAll('circle')
+                .data(markerPoints)
+                .enter()
+                .append('circle')
+                .attr('class', 'draggable-marker')
+                .attr('r', (d) => { var _a, _b; return ((_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.radius) || 5; })
+                .attr('cx', function (d) {
+                return scaleX(d.x);
+            })
+                .attr('cy', function (d) {
+                return scaleY(d.y);
+            })
+                .style('cursor', 'pointer')
+                .style('fill', (d) => { var _a, _b; return ((_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.color) || 'red'; })
+                .attr('stroke', (d) => { var _a, _b; return ((_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.stroke) || 'none'; })
+                .attr('stroke-width', (d) => { var _a, _b; return ((_b = (_a = d.marker) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.strokeWidth) || 0; });
+            context.selectAll('.draggable-marker').call(d3.drag().on('drag start end', function dragged(event, d) {
+                var _a, _b;
+                d.x = scaleX.invert((_a = event.sourceEvent) === null || _a === void 0 ? void 0 : _a.offsetX);
+                d.y = scaleY.invert((_b = event.sourceEvent) === null || _b === void 0 ? void 0 : _b.offsetY);
+                d3.select(this).attr('cx', scaleX(d.x)).attr('cy', scaleY(d.y));
+                context.select('path').attr('d', path);
+                emit(event, d);
+            }));
+        }
         context
             .append('path')
             .attr('class', (d) => (series === null || series === void 0 ? void 0 : series.drag.enable) ? 'draggable' : null)
@@ -10164,6 +10216,7 @@ class SplineDrawer {
         const path = d3
             .line()
             .curve(d3.curveCatmullRom)
+            .defined((d) => d.x != null && d.y != null)
             .x((d) => scaleX(d.x))
             .y((d) => scaleY(d.y));
         context
@@ -10522,6 +10575,7 @@ class TetaChart {
         this.plotLinesMove$ = new Subject();
         this.plotBandsMove$ = new Subject();
         this.seriesMove$ = new Subject();
+        this.pointMove$ = new Subject();
         this.zoom$ = new Subject();
         this._container = null;
         this._width = 0;
@@ -10543,6 +10597,7 @@ class TetaChart {
         this.plotLinesMove = this.plotLinesMove$.asObservable();
         this.plotBandsMove = this.plotBandsMove$.asObservable();
         this.seriesMove = this.seriesMove$.asObservable();
+        this.pointMove = this.pointMove$.asObservable();
         this.zoom = this.zoom$.asObservable();
     }
     redraw(options) {
@@ -11010,7 +11065,12 @@ class TetaChart {
                 .attr('x', (d) => x(d.from))
                 .attr('y', 0)
                 .attr('width', (d) => Math.abs(x(d.to) - x(d.from)))
-                .attr('fill', (d) => d.color)
+                .attr('fill', (d) => {
+                if (d.image) {
+                    return `url(#${d.image})`;
+                }
+                return d.color;
+            })
                 .style('opacity', (d) => { var _a; return (_a = d.opacity) !== null && _a !== void 0 ? _a : 1; })
                 .attr('height', plotBandHeight > 0 ? plotBandHeight : 0)
                 .attr('transform', `translate(0, ${this._options.bounds.top})`);
@@ -11255,7 +11315,12 @@ class TetaChart {
                 .attr('x', 0)
                 .attr('y', (d) => y(d.from))
                 .attr('width', (d) => plotBandWidth)
-                .attr('fill', (d) => d.color)
+                .attr('fill', (d) => {
+                if (d.image) {
+                    return `url(#${d.image})`;
+                }
+                return d.color;
+            })
                 .style('opacity', (d) => { var _a; return (_a = d.opacity) !== null && _a !== void 0 ? _a : 1; })
                 .attr('height', (d) => Math.abs(y(d.to) - y(d.from)))
                 .attr('cursor', (d) => (d.draggable ? 'move' : 'default'));
@@ -11339,7 +11404,7 @@ class TetaChart {
             .attr('class', 'series')
             .attr('clip-path', `url(#draw-window-${this.uniqId})`);
         series === null || series === void 0 ? void 0 : series.forEach((seriesItem, index) => {
-            var _a;
+            var _a, _b;
             if (seriesItem.renderTo === 'canvas') {
                 d3.select(this._container.nativeElement)
                     .select('canvas')
@@ -11397,9 +11462,15 @@ class TetaChart {
             const emit = (event) => {
                 this.seriesMove$.next(event);
             };
+            const emitPoint = (event) => {
+                this.pointMove$.next(event);
+            };
             (_a = drawer === null || drawer === void 0 ? void 0 : drawer.dispatch) === null || _a === void 0 ? void 0 : _a.on(DispatchType.moveLine, function () {
                 emit(this);
             });
+            (_b = drawer === null || drawer === void 0 ? void 0 : drawer.dispatch) === null || _b === void 0 ? void 0 : _b.on(DispatchType.movePoint, function () {
+                emitPoint(this);
+            });
         });
     }
     createTooltip() {
@@ -11447,7 +11518,7 @@ class TetaChart {
                     color: d.color,
                     name: d.name,
                 });
-                return `translate(${!isNaN(data === null || data === void 0 ? void 0 : data.x) ? foundX(data.x) : -10}, ${!isNaN(data === null || data === void 0 ? void 0 : data.y) ? foundY(data.y) : -10})`;
+                return `translate(${!isNaN(data === null || data === void 0 ? void 0 : data.x) && (data === null || data === void 0 ? void 0 : data.x) != null ? foundX(data.x) : -10}, ${!isNaN(data === null || data === void 0 ? void 0 : data.y) && (data === null || data === void 0 ? void 0 : data.y) != null ? foundY(data.y) : -10})`;
             }
             if (this._options.tooltip.tracking === 'y') {
                 const sorted = [...d.data].sort((a, b) => d3.ascending(a.y, b.y));
@@ -11460,7 +11531,7 @@ class TetaChart {
                     color: d.color,
                     name: d.name,
                 });
-                return `translate(${foundX(data.x)}, ${foundY(data.y)})`;
+                return `translate(${!isNaN(data === null || data === void 0 ? void 0 : data.x) && (data === null || data === void 0 ? void 0 : data.x) != null ? foundX(data.x) : -10}, ${!isNaN(data === null || data === void 0 ? void 0 : data.y) && (data === null || data === void 0 ? void 0 : data.y) != null ? foundY(data.y) : -10})`;
             }
         });
         if ((_a = this._options.tooltip) === null || _a === void 0 ? void 0 : _a.format) {
@@ -11848,6 +11919,7 @@ class ChartComponent {
         this.plotLinesMove = new EventEmitter();
         this.plotBandsMove = new EventEmitter();
         this.seriesMove = new EventEmitter();
+        this.pointMove = new EventEmitter();
         this.zoomChange = new EventEmitter();
         this._alive = true;
         this.size$ = new Subject();
@@ -11896,8 +11968,7 @@ class ChartComponent {
             (_b = this._chart) === null || _b === void 0 ? void 0 : _b.setZoom(this.zoom);
         }
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     ngAfterViewInit() {
         this._observer = new ResizeObserver((entries) => {
             const { contentRect } = entries[0];
@@ -11945,6 +12016,11 @@ class ChartComponent {
                 this._chart.seriesMove
                     .pipe(takeWhile((_) => this._alive))
                     .subscribe((_) => this.seriesMove.emit(_));
+                this._chart.pointMove
+                    .pipe(takeWhile((_) => this._alive))
+                    .subscribe((_) => {
+                    this.pointMove.emit(_);
+                });
                 this._chart.zoom
                     .pipe(takeWhile((_) => this._alive), map((_) => {
                     this.zoomChange.emit(_);
@@ -11962,7 +12038,7 @@ class ChartComponent {
     }
 }
 ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartComponent, selector: "teta-chart", inputs: { zoom: "zoom", config: "config" }, outputs: { plotLinesMove: "plotLinesMove", plotBandsMove: "plotBandsMove", seriesMove: "seriesMove", zoomChange: "zoomChange" }, host: { listeners: { "click": "click($event)" } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.display]=\"hasSeriesData ? 'contents' : 'none'\">\n  <div #chart class=\"chart-container\"></div>\n  <div class=\"legend-container\"></div>\n</div>\n<div [style.display]=\"!hasSeriesData ? 'block' : 'none'\" class=\"chart-placeholder text-align-center\">\n  <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n</div>\n\n\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}.chart-container{position:relative;min-height:0;flex-grow:1;flex-basis:1px}.chart-placeholder{margin:auto;width:100%}.chart-placeholder span{text-overflow:ellipsis;overflow:hidden;display:block}.legend-container{flex-shrink:0;flex-basis:1px}::ng-deep .grid line{stroke-dasharray:1,4}::ng-deep .tooltip-chart{padding:8px 12px;border-radius:2px}::ng-deep .legend{grid-gap:8px;padding-bottom:5px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-evenly}::ng-deep .legend .item{display:flex;align-items:center;cursor:pointer}::ng-deep .legend .item .swatch{width:10px;height:10px}::ng-deep .legend .item .line{width:12px;height:2px}::ng-deep .legend .item .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ChartComponent, selector: "teta-chart", inputs: { zoom: "zoom", config: "config" }, outputs: { plotLinesMove: "plotLinesMove", plotBandsMove: "plotBandsMove", seriesMove: "seriesMove", pointMove: "pointMove", zoomChange: "zoomChange" }, host: { listeners: { "click": "click($event)" } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.display]=\"hasSeriesData ? 'contents' : 'none'\">\n  <div #chart class=\"chart-container\"></div>\n  <div class=\"legend-container\"></div>\n</div>\n<div [style.display]=\"!hasSeriesData ? 'block' : 'none'\" class=\"chart-placeholder text-align-center\">\n  <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n</div>\n\n\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}.chart-container{position:relative;min-height:0;flex-grow:1;flex-basis:1px}.chart-placeholder{margin:auto;width:100%}.chart-placeholder span{text-overflow:ellipsis;overflow:hidden;display:block}.legend-container{flex-shrink:0;flex-basis:1px}::ng-deep .grid line{stroke-dasharray:1,4}::ng-deep .tooltip-chart{padding:8px 12px;border-radius:2px}::ng-deep .legend{grid-gap:8px;padding-bottom:5px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-evenly}::ng-deep .legend .item{display:flex;align-items:center;cursor:pointer}::ng-deep .legend .item .swatch{width:10px;height:10px}::ng-deep .legend .item .line{width:12px;height:2px}::ng-deep .legend .item .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.display]=\"hasSeriesData ? 'contents' : 'none'\">\n  <div #chart class=\"chart-container\"></div>\n  <div class=\"legend-container\"></div>\n</div>\n<div [style.display]=\"!hasSeriesData ? 'block' : 'none'\" class=\"chart-placeholder text-align-center\">\n  <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n</div>\n\n\n", styles: [":host{display:flex;width:100%;height:100%;flex-direction:column}.chart-container{position:relative;min-height:0;flex-grow:1;flex-basis:1px}.chart-placeholder{margin:auto;width:100%}.chart-placeholder span{text-overflow:ellipsis;overflow:hidden;display:block}.legend-container{flex-shrink:0;flex-basis:1px}::ng-deep .grid line{stroke-dasharray:1,4}::ng-deep .tooltip-chart{padding:8px 12px;border-radius:2px}::ng-deep .legend{grid-gap:8px;padding-bottom:5px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-evenly}::ng-deep .legend .item{display:flex;align-items:center;cursor:pointer}::ng-deep .legend .item .swatch{width:10px;height:10px}::ng-deep .legend .item .line{width:12px;height:2px}::ng-deep .legend .item .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:5px}\n"] }]
@@ -11976,6 +12052,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Output
             }], seriesMove: [{
                 type: Output
+            }], pointMove: [{
+                type: Output
             }], zoomChange: [{
                 type: Output
             }], chart: [{
@@ -12154,6 +12232,7 @@ class PlotBand {
         this.to = options === null || options === void 0 ? void 0 : options.to;
         this.label = options === null || options === void 0 ? void 0 : options.label;
         this.color = (options === null || options === void 0 ? void 0 : options.color) || '#59AE501A';
+        this.image = options === null || options === void 0 ? void 0 : options.image;
         this.showGrabbers =
             (options === null || options === void 0 ? void 0 : options.showGrabbers) != null ? options.showGrabbers : true;
         this.draggable = (options === null || options === void 0 ? void 0 : options.draggable) != null ? options === null || options === void 0 ? void 0 : options.draggable : false;