!fixup

Author: splincode

package.json

@@ -12,12 +12,12 @@
         "test": "jest --config ./jest.config.js"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "0.803.25",
+        "@angular-devkit/build-angular": "0.803.26",
         "@angular-ru/eslint-config": "12.3.0",
         "@angular-ru/prettier-config": "12.6.0",
         "@angular/animations": "8.2.14",
         "@angular/cdk": "8.2.3",
-        "@angular/cli": "8.3.25",
+        "@angular/cli": "8.3.26",
         "@angular/common": "8.2.14",
         "@angular/compiler": "8.2.14",
         "@angular/compiler-cli": "8.2.14",
@@ -31,7 +31,6 @@
         "@types/jest": "24.0.13",
         "@types/node": "12.7.5",
         "acorn": "6.1.1",
-        "codelyzer": "5.0.1",
         "colors": "1.3.3",
         "core-js": "2.6.9",
         "eslint": "6.8.0",

projects/table-builder/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@angular-ru/ng-table-builder",
-    "version": "0.40.0",
+    "version": "0.41.0",
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/Angular-RU/ng-table-builder/issues"

projects/table-builder/src/lib/table/components/common/modal-view-layer.ts

@@ -81,7 +81,7 @@ export abstract class ModalViewLayer<T extends PositionState> implements OnDestr
     public updateView(): void {
         detectChanges(this.cd);
 
-        this.ngZone.runOutsideAngular((): void => {
+        this.ngZone.run((): void => {
             window.requestAnimationFrame((): void => {
                 detectChanges(this.cd);
                 this.app.tick();

projects/table-builder/src/lib/table/components/table-tbody/table-tbody.component.ts

@@ -3,9 +3,11 @@ import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
+    EventEmitter,
     Injector,
     Input,
     NgZone,
+    Output,
     ViewEncapsulation
 } from '@angular/core';
 
@@ -52,11 +54,11 @@ export class TableTbodyComponent {
     @Input('produce-disable-fn') public produceDisableFn: ProduceDisableFn = null;
     @Input('client-row-height') public clientRowHeight: number;
     @Input('column-schema') public columnSchema: ColumnsSchema;
+    @Output() public changed: EventEmitter<void> = new EventEmitter(true);
     private readonly app: ApplicationRef;
     private readonly ngZone: NgZone;
 
     constructor(public cd: ChangeDetectorRef, injector: Injector) {
-        this.cd.reattach();
         this.selection = injector.get<SelectionService>(SelectionService);
         this.contextMenu = injector.get<ContextMenuService>(ContextMenuService);
         this.app = injector.get<ApplicationRef>(ApplicationRef);
@@ -87,12 +89,11 @@ export class TableTbodyComponent {
 
     // eslint-disable-next-line max-params
     public handleOnClick(row: TableRow, key: string, event: MouseEvent, emitter: TableClickEventEmitter): void {
-        this.ngZone.runOutsideAngular((): void => {
+        this.ngZone.run((): void => {
             if (this.enableSelection) {
                 this.selection.selectionTaskIdle = window.setTimeout((): void => {
                     this.selection.selectRow(row, event, this.source);
-                    event.preventDefault();
-                    window.requestAnimationFrame((): void => this.app.tick());
+                    this.changed.emit();
                 }, SELECTION_DELAY);
             }
         });

projects/table-builder/src/lib/table/directives/observer-view.directive.ts

@@ -28,7 +28,9 @@ export class ObserverViewDirective implements AfterViewInit, OnDestroy {
     public ngOnDestroy(): void {
         this.element = { nativeElement: null };
         cancelAnimationFrame(this.frameId);
-        this.observer.disconnect();
+        if (this.observer) {
+            this.observer.disconnect();
+        }
     }
 
     private observeChange(entry: IntersectionObserverEntry): void {

projects/table-builder/src/lib/table/directives/rows/template-cell.common.ts

@@ -5,8 +5,8 @@ import { KeyMap } from '../../interfaces/table-builder.internal';
 
 export abstract class TemplateCellCommon {
     public type: string = null;
-    @Input() public row: boolean = null;
-    @Input() public bold: boolean = null;
+    @Input() public row: boolean = false;
+    @Input() public bold: boolean = false;
     @Input() public nowrap: boolean = true;
     @Input() public width: number = null;
     @Input() public height: number = null;

projects/table-builder/src/lib/table/services/selection/selection.service.ts

@@ -93,7 +93,7 @@ export class SelectionService implements OnDestroy {
         if (checkValueIsEmpty(id)) {
             throw new Error(
                 `Can't select item, make sure you pass the correct primary key, or you forgot enable selection
-                <ngx-table-builder [enable-selection]="true" primary-key="fieldId" />
+                <ngx-table-builder enable-selection primary-key="fieldId" />
                 `
             );
         }

projects/table-builder/src/lib/table/services/template-parser/template-parser.service.ts

@@ -53,7 +53,9 @@ export class TemplateParserService {
             onClick: cell.onClick,
             dblClick: cell.dblClick,
             useDeepPath: key.includes('.'),
-            context: cell.row ? ImplicitContext.ROW : ImplicitContext.CELL,
+            context: TemplateParserService.getValidHtmlBooleanAttribute(cell.row)
+                ? ImplicitContext.ROW
+                : ImplicitContext.CELL,
             nowrap: TemplateParserService.getValidPredicate(options.nowrap, cell.nowrap)
         };
     }
@@ -137,8 +139,8 @@ export class TemplateParserService {
             key,
             isModel,
             isVisible: true,
-            verticalLine: column.verticalLine,
             excluded: !this.allowedKeyMap[key],
+            verticalLine: TemplateParserService.getValidHtmlBooleanAttribute(column.verticalLine),
             td: TemplateParserService.templateContext(key, tdTemplate, this.columnOptions),
             stickyLeft: TemplateParserService.getValidHtmlBooleanAttribute(column.stickyLeft),
             stickyRight: TemplateParserService.getValidHtmlBooleanAttribute(column.stickyRight),

projects/table-builder/src/lib/table/services/utils/utils.service.ts

@@ -81,16 +81,9 @@ export class UtilsService implements UtilsInterface {
         });
     }
 
-    public microtask(callback: Fn): Promise<void> {
+    public macrotaskInZone(callback: Fn, time: number = 0): Promise<void> {
         return new Promise((resolve: Fn): void => {
-            callback();
-            resolve();
-        });
-    }
-
-    public macrotask(callback: Fn, time: number = 0): Promise<void> {
-        return new Promise((resolve: Fn): void => {
-            this.zone.runOutsideAngular((): void => {
+            this.zone.run((): void => {
                 window.setTimeout((): void => {
                     callback();
                     resolve();

projects/table-builder/src/lib/table/table-builder.api.ts

@@ -68,8 +68,6 @@ export abstract class TableBuilderApiImpl
     @Input('auto-height') public autoHeightDetect: boolean = true;
     @Input('native-scrollbar') public nativeScrollbar: boolean = false;
     @Input('primary-key') public primaryKey: string = PrimaryKey.ID;
-    @Input('head-height') public headHeight: string | number = null;
-    @Input('row-height') public rowHeight: string | number = null;
     @Input('vertical-border') public verticalBorder: boolean = true;
     @Input('enable-selection') public enableSelection: boolean = false;
     @Input('enable-filtering') public enableFiltering: boolean = false;
@@ -79,36 +77,26 @@ export abstract class TableBuilderApiImpl
     @Output() public schemaChanges: EventEmitter<SimpleSchemaColumns> = new EventEmitter();
     @Output() public onChanges: EventEmitter<TableRow[] | null> = new EventEmitter();
     @Output() public sortChanges: EventEmitter<OrderedField[]> = new EventEmitter();
-
     @ContentChild(NgxOptionsComponent, { static: false })
     public columnOptions: NgxOptionsComponent = null;
-
     @ContentChildren(NgxColumnComponent)
     public columnTemplates: QueryListRef<NgxColumnComponent> = null;
-
     @ContentChild(NgxContextMenuComponent, { static: false })
     public contextMenuTemplate: NgxContextMenuComponent = null;
-
     @ContentChild(NgxHeaderComponent, { static: false })
     public headerTemplate: NgxHeaderComponent = null;
-
     @ContentChild(NgxFooterComponent, { static: false })
     public footerTemplate: NgxFooterComponent = null;
-
     @ContentChild(NgxFilterComponent, { static: false })
     public filterTemplate: NgxFilterComponent = null;
-
     @ViewChild('tableViewport', { static: true })
     public scrollContainer: ElementRef<HTMLElement>;
-
     @ViewChildren('column', { read: false })
     public columnList: QueryList<ElementRef<HTMLDivElement>>;
-
     public scrollbarWidth: number = SCROLLBAR_WIDTH;
     public columnListWidth: number = 0;
     public viewPortInfo: ViewPortInfo = {};
     public tableViewportChecked: boolean = true;
-
     /**
      * @description: the custom names of the column list to be displayed in the view.
      * @example:
@@ -121,7 +109,6 @@ export abstract class TableBuilderApiImpl
      *    modelColumnKeys === [ 'id', 'hello', 'value' ]
      */
     public modelColumnKeys: string[] = [];
-
     /**
      * @description: the custom names of the column list to be displayed in the view.
      * @example:
@@ -132,7 +119,6 @@ export abstract class TableBuilderApiImpl
      *    customModelColumnsKeys === [ 'name' ]
      */
     public customModelColumnsKeys: string[] = [];
-
     public isDragging: KeyMap<boolean> = {};
     public accessDragging: boolean = false;
     public abstract readonly templateParser: TemplateParserService;
@@ -146,12 +132,25 @@ export abstract class TableBuilderApiImpl
     public abstract readonly ngZone: NgZone;
     protected originalSource: TableRow[];
     protected renderedCountKeys: number;
+    protected isDragMoving: boolean = false;
     protected abstract readonly app: ApplicationRef;
     protected abstract readonly viewChanges: NgxTableViewChangesService;
     protected abstract readonly draggable: DraggableService;
     private filterIdTask: number = null;
     private idleDetectChangesId: number;
     private columnFrameId: number;
+    private _headHeight: number;
+    private _rowHeight: number = null;
+
+    @Input('head-height')
+    public set headHeight(val: string | number) {
+        this._headHeight = parseInt(val as string);
+    }
+
+    @Input('row-height')
+    public set rowHeight(val: string | number) {
+        this._rowHeight = parseInt(val as string);
+    }
 
     /**
      * @description - <table-builder [keys]=[ 'id', 'value', 'id', 'position', 'value' ] />
@@ -204,7 +203,7 @@ export abstract class TableBuilderApiImpl
     }
 
     public get clientRowHeight(): number {
-        return (this.rowHeight as number) || ROW_HEIGHT;
+        return this._rowHeight || ROW_HEIGHT;
     }
 
     public get columnVirtualHeight(): number {
@@ -216,7 +215,7 @@ export abstract class TableBuilderApiImpl
     }
 
     public get headLineHeight(): number {
-        return this.headHeight ? (this.headHeight as number) : this.clientRowHeight;
+        return this._headHeight ? this._headHeight : this.clientRowHeight;
     }
 
     public get size(): number {
@@ -227,8 +226,20 @@ export abstract class TableBuilderApiImpl
         return this.source && this.source.length ? this.source : [];
     }
 
+    public get isEnableFiltering(): boolean {
+        return this.enableFiltering !== false;
+    }
+
+    public get isSkippedInternalSort(): boolean {
+        return this.skipSort !== false;
+    }
+
+    public get isEnableSelection(): boolean {
+        return this.enableSelection !== false;
+    }
+
     private get filterValueExist(): boolean {
-        return this.filterable.filterValueExist && this.enableFiltering;
+        return this.filterable.filterValueExist && this.isEnableFiltering;
     }
 
     private get notEmpty(): boolean {
@@ -276,10 +287,8 @@ export abstract class TableBuilderApiImpl
         this.ngZone.runOutsideAngular((): void => {
             window.clearInterval(this.filterIdTask);
             this.filterIdTask = window.setTimeout((): void => {
-                if (!this.enableFiltering) {
-                    throw new Error(
-                        'You forgot to enable filtering: \n <ngx-table-builder [enable-filtering]="true" />'
-                    );
+                if (!this.isEnableFiltering) {
+                    throw new Error('You forgot to enable filtering: \n <ngx-table-builder enable-filtering />');
                 }
 
                 this.sortAndFilter().then((): void => this.reCheckDefinitions());
@@ -301,6 +310,7 @@ export abstract class TableBuilderApiImpl
     public drop({ previousIndex, currentIndex }: CdkDragSortEvent): void {
         const previousKey: string = this.visibleColumns[previousIndex];
         const currentKey: string = this.visibleColumns[currentIndex];
+        this.isDragMoving = false;
         this.draggable.drop(previousKey, currentKey);
         this.changeSchema();
     }
@@ -381,6 +391,10 @@ export abstract class TableBuilderApiImpl
     }
 
     protected calculateColumnWidthSummary(): void {
+        if (this.isDragMoving) {
+            return;
+        }
+
         this.ngZone.runOutsideAngular((): void => {
             clearInterval(this.columnFrameId);
             this.columnFrameId = window.setTimeout((): void => {