@tetacom/ng-components 1.0.6 → 1.0.10

package/fesm2015/tetacom-ng-components.mjs

@@ -1163,12 +1163,12 @@ class DropdownBase {
         }
     }
     closeDropdown() {
-        if (this._body && this.container.contains(this._body)) {
+        if (this.open && this._body && this.container.contains(this._body)) {
             this._renderer.removeChild(this.container, this._body);
+            this._open = false;
+            this._body = null;
+            this.openChange.emit(this.open);
         }
-        this._open = false;
-        this._body = null;
-        this.openChange.emit(this.open);
     }
     openDropdown() {
         if (this._open || !this._content || this.disabled) {
@@ -2640,7 +2640,7 @@ class OnlyNumberDirective {
         if (this.tetaOnlyNumber === false) {
             return;
         }
-        value = value.replace(',', '.');
+        value = value.replace(',', '.').trim();
         let regex = this._integerUnsigned;
         if (!this.allowDecimals && !this.allowSign) {
             regex = this._integerUnsigned;
@@ -2692,7 +2692,7 @@ class OnlyNumberDirective {
         if (value === '-0.0') {
             value = '0.0';
         }
-        const valid = new RegExp(regex).test(value);
+        const valid = new RegExp(regex).test(value.toString());
         this._control.control.setValue(valid ? value : (_a = this._previousValue) !== null && _a !== void 0 ? _a : 0);
     }
 }
@@ -3554,6 +3554,7 @@ class TextFieldComponent {
         this.placeholder = '';
         this.disabled = false;
         this.onlyNumber = false;
+        this.tabindex = 0;
         this.textField = true;
         this.value = '';
     }
@@ -3565,6 +3566,9 @@ class TextFieldComponent {
             this.input.nativeElement.blur();
         }
     }
+    emitBlur() {
+        this.onTouched();
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -3579,17 +3583,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: [
@@ -3598,7 +3604,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: [{
@@ -3618,6 +3624,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']
@@ -4151,9 +4160,8 @@ const getFilterComponent = (item) => filterComponentsMap.has(item.filterType)
     : StringFilterComponent;
 
 class FilterHostComponent {
-    constructor(viewContainerRef, componentFactoryResolver) {
+    constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
-        this.componentFactoryResolver = componentFactoryResolver;
         this.filterChanged = new EventEmitter();
         this._alive = true;
     }
@@ -4182,9 +4190,8 @@ class FilterHostComponent {
         if (!FilterComponentBase.isPrototypeOf(this._column.filterComponent)) {
             this._column.filterComponent = getFilterComponent(this._column);
         }
-        const compFactory = this.componentFactoryResolver.resolveComponentFactory(this._column.filterComponent);
         this._componentRef =
-            this.viewContainerRef.createComponent(compFactory);
+            this.viewContainerRef.createComponent(this._column.filterComponent);
         this._componentRef.instance.column = this._column;
         this._componentRef.instance.state = this._state;
         this._componentRef.instance.filterOptions = this._filterOptions;
@@ -4200,7 +4207,7 @@ class FilterHostComponent {
         this._alive = false;
     }
 }
-FilterHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterHostComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+FilterHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
 FilterHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: FilterHostComponent, selector: "teta-filter-host", inputs: { column: "column", state: "state", filterOptions: "filterOptions" }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterHostComponent, decorators: [{
             type: Component,
@@ -4210,7 +4217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                     styles: [],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
                 type: Input
             }], state: [{
                 type: Input
@@ -7662,9 +7669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }] } });
 
 class HeadCellHostComponent {
-    constructor(viewContainerRef, componentFactoryResolver) {
+    constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
-        this.componentFactoryResolver = componentFactoryResolver;
     }
     set column(column) {
         this._column = column;
@@ -7679,19 +7685,18 @@ class HeadCellHostComponent {
         if (!HeadCellComponentBase.isPrototypeOf(this.column.headCellComponent)) {
             this.column.headCellComponent = DefaultHeadCellComponent;
         }
-        const compFactory = this.componentFactoryResolver.resolveComponentFactory(this.column.headCellComponent);
         this.componentRef =
-            this.viewContainerRef.createComponent(compFactory);
+            this.viewContainerRef.createComponent(this.column.headCellComponent);
         this.componentRef.instance.column = this.column;
         this.init = true;
     }
 }
-HeadCellHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellHostComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+HeadCellHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
 HeadCellHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: { column: "column" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-head-cell-host', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
                 type: Input
             }] } });
 
@@ -8740,7 +8745,7 @@ class DateCellComponent extends CellComponentBase {
         super.ngOnInit();
     }
     setValue(value) {
-        this.row.data[this.column.name] = value;
+        this.row.data[this.column.name] = value ? new Date(value) : value;
         this.valueChanged();
     }
     startEdit(initiator, type) {
@@ -8757,10 +8762,10 @@ class DateCellComponent extends CellComponentBase {
     }
 }
 DateCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DateCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DateCellComponent, selector: "teta-date-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\" #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"false\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""], components: [{ type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "appendToBody", "showTime", "format"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], pipes: { "date": i2.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DateCellComponent, selector: "teta-date-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\"\n                  #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"false\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""], components: [{ type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "appendToBody", "showTime", "format"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], pipes: { "date": i2.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DateCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\" #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"false\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""] }]
+            args: [{ selector: 'teta-date-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\"\n                  #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"false\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -8918,17 +8923,15 @@ const getCellComponent = (column) => cellComponentsMap.has(column.filterType)
     : StringCellComponent;
 
 class CellHostComponent {
-    constructor(viewContainerRef, componentFactoryResolver) {
+    constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
-        this.componentFactoryResolver = componentFactoryResolver;
         this._init = false;
     }
     ngOnInit() {
         if (!CellComponentBase.isPrototypeOf(this.column.cellComponent)) {
             this.column.cellComponent = getCellComponent(this.column);
         }
-        const compFactory = this.componentFactoryResolver.resolveComponentFactory(this.column.cellComponent);
-        this._componentRef = this.viewContainerRef.createComponent(compFactory);
+        this._componentRef = this.viewContainerRef.createComponent(this.column.cellComponent);
         this._componentRef.instance.column = this.column;
         this._componentRef.instance.row = this.row;
         this._componentRef.instance.filterOptions = this.filterOptions;
@@ -8950,12 +8953,12 @@ class CellHostComponent {
         }
     }
 }
-CellHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CellHostComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+CellHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CellHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
 CellHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: CellHostComponent, selector: "teta-cell-host", inputs: { column: "column", row: "row", filterOptions: "filterOptions", dict: "dict" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CellHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-cell-host', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { column: [{
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
                 type: Input
@@ -9300,7 +9303,7 @@ class TableComponent {
                 this.startEditRowOrCell(coordinates);
             }
         }
-        if (!this.isRow(event.target)) {
+        if (!this.eventIsOnRow(event)) {
             this._svc.startEditRow(null);
         }
     }
@@ -9441,27 +9444,20 @@ class TableComponent {
             this._svc.startEditCell(coordinates);
         }
     }
-    getCell(element) {
-        if (!element.parentElement) {
-            return null;
-        }
-        if (element.tagName.toLowerCase() === 'teta-cell') {
-            return element;
-        }
-        return this.getCell(element.parentElement);
+    getEventCell(event) {
+        return event.composedPath().find((target) => {
+            var _a;
+            return ((_a = target.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'teta-cell';
+        });
     }
-    isRow(element) {
-        if (!element.parentElement) {
-            return false;
-        }
-        if (this._elementRef.nativeElement.contains(element) &&
-            element.getAttribute('data-row')) {
-            return true;
-        }
-        return this.isRow(element.parentElement);
+    eventIsOnRow(event) {
+        const row = event.composedPath().find((target) => {
+            return (target === null || target === void 0 ? void 0 : target.getAttribute) && (target === null || target === void 0 ? void 0 : target.getAttribute('data-row'));
+        });
+        return row && this._elementRef.nativeElement.contains(row);
     }
     getCoordinates(event) {
-        const cell = this.getCell(event.target);
+        const cell = this.getEventCell(event);
         if (cell) {
             const rowIndex = cell.getAttribute('data-row');
             const columnName = cell.getAttribute('data-column');
@@ -10812,12 +10808,15 @@ class TetaChart {
                 className: annotation.className,
             };
         });
-        const makeAnnotations = d3annotation.annotation().annotations(annotations !== null && annotations !== void 0 ? annotations : []);
+        const makeAnnotations = d3annotation
+            .annotation()
+            .annotations(annotations !== null && annotations !== void 0 ? annotations : []);
         this._chart
             .append('g')
             .attr('class', 'annotations')
             .attr('clip-path', `url(#draw-window-${this.uniqId})`)
-            .call(makeAnnotations);
+            .call(makeAnnotations)
+            .lower();
     }
     drawPlotLines() {
         this._chart.selectAll('.plotlines').remove();