chore: fixing bugs

Author: splincode

projects/table-builder/package.json

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

projects/table-builder/src/lib/table/components/ngx-column/ngx-column.component.ts

@@ -19,7 +19,7 @@ export class NgxColumnComponent extends ColumnOptions {
     @Input('custom-key') public customKey: boolean = false;
     @Input('sticky-end') public stickyRight: boolean = false;
     @Input('vertical-line') public verticalLine: boolean = false;
-    @Input('overflow-tooltip') public overflowTooltip: boolean = true;
+    @Input('overflow-tooltip') public overflowTooltip: boolean | undefined = undefined;
     @Input('important-template') public importantTemplate: boolean = false;
     @ContentChild(TemplateHeadThDirective, { static: false }) public th: TemplateHeadThDirective;
     @ContentChild(TemplateBodyTdDirective, { static: false }) public td: TemplateBodyTdDirective;

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

@@ -124,6 +124,7 @@ export class TemplateParserService {
         const thOptions: TableCellOptions = TemplateParserService.templateContext(key, thTemplate, this.columnOptions);
         const stickyLeft: boolean = getValidHtmlBooleanAttribute(column.stickyLeft);
         const stickyRight: boolean = getValidHtmlBooleanAttribute(column.stickyRight);
+        const isCustomKey: boolean = getValidHtmlBooleanAttribute(column.customKey);
         const canBeAddDraggable: boolean = !(stickyLeft || stickyRight);
         const isModel: boolean = this.keyMap[key];
 
@@ -136,7 +137,7 @@ export class TemplateParserService {
             td: TemplateParserService.templateContext(key, tdTemplate, this.columnOptions),
             stickyLeft: getValidHtmlBooleanAttribute(column.stickyLeft),
             stickyRight: getValidHtmlBooleanAttribute(column.stickyRight),
-            customColumn: getValidHtmlBooleanAttribute(column.customKey),
+            customColumn: isCustomKey,
             width: getValidPredicate(column.width, this.columnOptions.width),
             cssClass: getValidPredicate(column.cssClass, this.columnOptions.cssClass) || [],
             cssStyle: getValidPredicate(column.cssStyle, this.columnOptions.cssStyle) || [],
@@ -154,7 +155,10 @@ export class TemplateParserService {
                 ? getValidHtmlBooleanAttribute(getValidPredicate(column.isDraggable, this.columnOptions.isDraggable))
                 : false,
             overflowTooltip: getValidHtmlBooleanAttribute(
-                getValidPredicate(this.columnOptions.overflowTooltip, column.overflowTooltip)
+                getValidPredicate(
+                    this.columnOptions.overflowTooltip,
+                    typeof column.overflowTooltip === 'boolean' ? column.overflowTooltip : !isCustomKey
+                )
             ),
             th: {
                 ...thOptions,

projects/table-builder/src/lib/table/styles/common.scss

@@ -22,8 +22,8 @@
     }
 
     .table-grid {
-        box-shadow: 0 0 10px -2px #e0e0e0;
         border: 1px solid #e0e0e0;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0);
     }
 
     &.table-grid__root--content-is-init {
@@ -33,6 +33,7 @@
     &.table-grid__root--is-rendered {
         opacity: 1;
         transition: all 0.2s;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0);
     }
 }
 

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

@@ -544,7 +544,12 @@ export class TableBuilderComponent extends TableBuilderApiImpl
 
     private listenSelectionChanges(): void {
         if (this.isEnableSelection) {
-            this.selection.onChanges.pipe(takeUntil(this.destroy$)).subscribe((): void => detectChanges(this.cd));
+            this.selection.onChanges.pipe(takeUntil(this.destroy$)).subscribe((): void => {
+                detectChanges(this.cd);
+                this.ngZone.runOutsideAngular((): void => {
+                    window.requestAnimationFrame((): void => this.app.tick());
+                });
+            });
         }
     }
 

src/app/samples/sample-fourteen/sample-fourteen.component.html

@@ -60,7 +60,7 @@
         </ng-template>
     </ngx-column>
 
-    <ngx-column custom-key key="action" sticky-end width="50" [overflow-tooltip]="false" empty-head>
+    <ngx-column custom-key key="action" sticky-end width="50" empty-head>
         <ng-template ngx-td>
             <mat-icon>all_inbox</mat-icon>
         </ng-template>

src/app/samples/sample-sixteen/sample-sixteen.component.html

@@ -52,7 +52,7 @@
 
     <ngx-column *ngFor="let key of table.modelColumnKeys" [key]="key"></ngx-column>
 
-    <ngx-column key="edit" custom-key width="100" vertical-line sticky-end empty-head>
+    <ngx-column key="edit" custom-key width="60" vertical-line sticky-end empty-head>
         <ng-template ngx-td row>
             <button mat-button><mat-icon>info</mat-icon></button>
         </ng-template>

src/app/samples/sample-third/sample-third.component.html

@@ -8,8 +8,6 @@
 </mat-toolbar>
 
 <ngx-table-builder #table [source]="data" enable-selection [produce-disable-fn]="disableFn">
-    <ngx-options [overflow-tooltip]="false"></ngx-options>
-
     <ngx-column key="selection" sticky width="55" custom-key>
         <ng-template ngx-th>
             <mat-checkbox