@swimlane/ngx-datatable 11.1.7 → 11.3.2

package/src/components/footer/pager.component.ts

@@ -8,6 +8,8 @@ import {
     <ul class="pager">
       <li [class.disabled]="!canPrevious()">
         <a
+          role="button"
+          aria-label="go to first page"
           href="javascript:void(0)"
           (click)="selectPage(1)">
           <i class="{{pagerPreviousIcon}}"></i>
@@ -15,12 +17,16 @@ import {
       </li>
       <li [class.disabled]="!canPrevious()">
         <a
+          role="button"
+          aria-label="go to previous page"
           href="javascript:void(0)"
           (click)="prevPage()">
           <i class="{{pagerLeftArrowIcon}}"></i>
         </a>
       </li>
       <li
+        role="button"
+        [attr.aria-label]="'page ' + pg.number"
         class="pages"
         *ngFor="let pg of pages"
         [class.active]="pg.number === page">
@@ -32,6 +38,8 @@ import {
       </li>
       <li [class.disabled]="!canNext()">
         <a
+          role="button"
+          aria-label="go to next page"
           href="javascript:void(0)"
           (click)="nextPage()">
           <i class="{{pagerRightArrowIcon}}"></i>
@@ -39,6 +47,8 @@ import {
       </li>
       <li [class.disabled]="!canNext()">
         <a
+          role="button"
+          aria-label="go to last page"
           href="javascript:void(0)"
           (click)="selectPage(totalPages)">
           <i class="{{pagerNextIcon}}"></i>

package/src/components/header/header-cell.component.ts

@@ -9,7 +9,7 @@ import { MouseEvent } from '../../events';
 @Component({
   selector: 'datatable-header-cell',
   template: `
-    <div>
+    <div class="datatable-header-cell-template-wrap">
       <label
         *ngIf="isCheckboxable"
         class="datatable-checkbox">
@@ -79,6 +79,7 @@ export class DataTableHeaderCellComponent {
   @Input() set sorts(val: any[]) {
     this._sorts = val;
     this.sortDir = this.calcSortDir(val);
+    this.cellContext.sortDir = this.sortDir;
     this.sortClass = this.calcSortClass(this.sortDir);
     this.cd.markForCheck();
   }

package/src/components/header/header.component.ts

@@ -101,6 +101,7 @@ export class DataTableHeaderComponent {
     const colsByPin = columnsByPin(val);
     this._columnsByPin = columnsByPinArr(val);
     this._columnGroupWidths = columnGroupWidths(colsByPin, val);
+    this.setStylesByGroup();
   }
 
   get columns(): any[] {

package/src/datatable.module.ts

@@ -9,7 +9,7 @@ import {
   DataTableFooterComponent,
   DataTableHeaderCellComponent,
   DataTablePagerComponent,
-  DataTableBodyRowComponent,  
+  DataTableBodyRowComponent,
   DataTableRowWrapperComponent,
   ProgressBarComponent,
   DataTableBodyCellComponent,
@@ -22,7 +22,8 @@ import {
   DatatableRowDetailTemplateDirective,
   DataTableFooterTemplateDirective,
   DatatableFooterDirective,
-  DatatableGroupHeaderTemplateDirective
+  DatatableGroupHeaderTemplateDirective,
+  DataTableSummaryRowComponent
 } from './components';
 
 import {
@@ -33,9 +34,9 @@ import {
   DraggableDirective
 } from './directives';
 
-import { 
+import {
   ScrollbarHelper,
-  DimensionsHelper 
+  DimensionsHelper
 } from './services';
 
 @NgModule({
@@ -61,7 +62,7 @@ import {
     DataTableBodyComponent,
     DataTableFooterComponent,
     DataTablePagerComponent,
-    ProgressBarComponent,    
+    ProgressBarComponent,
     DataTableBodyRowComponent,
     DataTableRowWrapperComponent,
     DatatableRowDetailDirective,
@@ -72,7 +73,8 @@ import {
     DataTableColumnHeaderDirective,
     DataTableColumnCellDirective,
     DatatableFooterDirective,
-    DatatableGroupHeaderTemplateDirective
+    DatatableGroupHeaderTemplateDirective,
+    DataTableSummaryRowComponent,
   ],
   exports: [
     DatatableComponent,

package/src/directives/resizeable.directive.ts

@@ -31,11 +31,13 @@ export class ResizeableDirective implements OnDestroy, AfterViewInit {
 
   ngAfterViewInit(): void {
     const renderer2 = this.renderer;
+    const node = renderer2.createElement('span');
     if (this.resizeEnabled) {
-      const node = renderer2.createElement('span');
       renderer2.addClass(node, 'resize-handle');
-      renderer2.appendChild(this.element, node);
+    } else {
+      renderer2.addClass(node, 'resize-handle--not-resizable');
     }
+    renderer2.appendChild(this.element, node);
   }
 
   ngOnDestroy(): void {

package/src/events.ts

@@ -1,6 +1,6 @@
 declare let global: any;
 
 /* tslint:disable:variable-name */
-export const MouseEvent = (global as any).MouseEvent as MouseEvent;
-export const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
-export const Event = (global as any).Event as Event;
+export const MouseEvent = ((window as any) || (global as any)).MouseEvent as MouseEvent;
+export const KeyboardEvent = ((window as any) || (global as any)).KeyboardEvent as KeyboardEvent;
+export const Event = ((window as any) || (global as any)).Event as Event;

package/src/themes/bootstrap.scss

@@ -83,4 +83,13 @@ bootstrap table theme
       }
     }
   }
-}
+
+  // Summary row styles
+  .datatable-summary-row {
+    .datatable-body-row {
+      .datatable-body-cell {
+	font-weight: bold;
+      }
+    }
+  }
+}

package/src/themes/dark.scss

@@ -103,4 +103,18 @@
 			}
 		}
   }
+
+  .datatable-summary-row {
+    .datatable-body-row {
+      background-color: #14171f;
+
+      &:hover {
+        background-color: #14171f;
+      }
+
+      .datatable-body-cell {
+	font-weight: bold;
+      }
+    }
+  }
 }

package/src/themes/material.scss

@@ -186,7 +186,7 @@
 			background: #f5f5f5;
 			padding: 10px;
     }
-    
+
     .datatable-group-header {
       background: #f5f5f5;
       border-bottom: solid 1px #D9D8D9;
@@ -218,7 +218,7 @@
 	      transition: width 0.3s ease;
         font-size: 14px;
         font-weight: 400;
-	    }					
+	    }
 	  }
 
 		.progress-linear {
@@ -321,6 +321,21 @@
 			}
 		}
 	}
+
+  // Summary row styles
+  .datatable-summary-row {
+    .datatable-body-row {
+      background-color: #ddd;
+
+      &:hover {
+	background-color: #ddd;
+      }
+
+      .datatable-body-cell {
+	font-weight: bold;
+      }
+    }
+  }
 }
 
 /**
@@ -384,11 +399,11 @@
 @keyframes query {
   0% {
     opacity: 1;
-    transform: translateX(35%) scale(.3, 1); 
+    transform: translateX(35%) scale(.3, 1);
   }
 
   100% {
     opacity: 0;
-    transform: translateX(-50%) scale(0, 1); 
-  } 
+    transform: translateX(-50%) scale(0, 1);
+  }
 }

package/src/types/table-column.type.ts

@@ -16,7 +16,7 @@ export interface TableColumn {
 
   /**
    * Internal unique id
-   * 
+   *
    * @type {string}
    * @memberOf TableColumn
    */
@@ -24,7 +24,7 @@ export interface TableColumn {
 
   /**
    * Internal for column width distributions
-   * 
+   *
    * @type {number}
    * @memberOf TableColumn
    */
@@ -32,7 +32,7 @@ export interface TableColumn {
 
   /**
    * Internal for setColumnDefaults
-   * 
+   *
    * @type {ValueGetter}
    * @memberOf TableColumn
    */
@@ -40,7 +40,7 @@ export interface TableColumn {
 
   /**
    * Determines if column is checkbox
-   * 
+   *
    * @type {boolean}
    * @memberOf TableColumn
    */
@@ -48,7 +48,7 @@ export interface TableColumn {
 
   /**
    * Determines if the column is frozen to the left
-   * 
+   *
    * @type {boolean}
    * @memberOf TableColumn
    */
@@ -56,7 +56,7 @@ export interface TableColumn {
 
   /**
    * Determines if the column is frozen to the right
-   * 
+   *
    * @type {boolean}
    * @memberOf TableColumn
    */
@@ -64,10 +64,10 @@ export interface TableColumn {
 
   /**
    * The grow factor relative to other columns. Same as the flex-grow
-   * API from http =//www.w3.org/TR/css3-flexbox/. Basically; 
+   * API from http =//www.w3.org/TR/css3-flexbox/. Basically;
    * take any available extra width and distribute it proportionally
    * according to all columns' flexGrow values.
-   * 
+   *
    * @type {number}
    * @memberOf TableColumn
    */
@@ -75,7 +75,7 @@ export interface TableColumn {
 
   /**
    * Min width of the column
-   * 
+   *
    * @type {number}
    * @memberOf TableColumn
    */
@@ -83,7 +83,7 @@ export interface TableColumn {
 
   /**
    * Max width of the column
-   * 
+   *
    * @type {number}
    * @memberOf TableColumn
    */
@@ -91,7 +91,7 @@ export interface TableColumn {
 
   /**
    * The default width of the column, in pixels
-   * 
+   *
    * @type {number}
    * @memberOf TableColumn
    */
@@ -99,7 +99,7 @@ export interface TableColumn {
 
   /**
    * Can the column be resized
-   * 
+   *
    * @type {boolean}
    * @memberOf TableColumn
    */
@@ -107,7 +107,7 @@ export interface TableColumn {
 
   /**
    * Custom sort comparator
-   * 
+   *
    * @type {*}
    * @memberOf TableColumn
    */
@@ -115,7 +115,7 @@ export interface TableColumn {
 
   /**
    * Custom pipe transforms
-   * 
+   *
    * @type {PipeTransform}
    * @memberOf TableColumn
    */
@@ -123,7 +123,7 @@ export interface TableColumn {
 
   /**
    * Can the column be sorted
-   * 
+   *
    * @type {boolean}
    * @memberOf TableColumn
    */
@@ -131,7 +131,7 @@ export interface TableColumn {
 
   /**
    * Can the column be re-arranged by dragging
-   * 
+   *
    * @type {boolean}
    * @memberOf TableColumn
    */
@@ -139,7 +139,7 @@ export interface TableColumn {
 
   /**
    * Whether the column can automatically resize to fill space in the table.
-   * 
+   *
    * @type {boolean}
    * @memberOf TableColumn
    */
@@ -147,7 +147,7 @@ export interface TableColumn {
 
   /**
    * Column name or label
-   * 
+   *
    * @type {string}
    * @memberOf TableColumn
    */
@@ -155,11 +155,11 @@ export interface TableColumn {
 
   /**
    * Property to bind to the row. Example:
-   * 
+   *
    * `someField` or `some.field.nested`, 0 (numeric)
-   * 
+   *
    * If left blank, will use the name as camel case conversion
-   * 
+   *
    * @type {TableColumnProp}
    * @memberOf TableColumn
    */
@@ -167,7 +167,7 @@ export interface TableColumn {
 
   /**
    * Cell template ref
-   * 
+   *
    * @type {*}
    * @memberOf TableColumn
    */
@@ -175,7 +175,7 @@ export interface TableColumn {
 
   /**
    * Header template ref
-   * 
+   *
    * @type {*}
    * @memberOf TableColumn
    */
@@ -183,26 +183,41 @@ export interface TableColumn {
 
   /**
    * CSS Classes for the cell
-   * 
-   * 
+   *
+   *
    * @memberOf TableColumn
    */
   cellClass?: string | ((data: any) => string|any);
 
   /**
    * CSS classes for the header
-   * 
-   * 
+   *
+   *
    * @memberOf TableColumn
    */
   headerClass?: string | ((data: any) => string|any);
 
   /**
    * Header checkbox enabled
-   * 
+   *
    * @type {boolean}
    * @memberOf TableColumn
    */
   headerCheckboxable?: boolean;
 
+  /**
+   * Summary function
+   *
+   * @type {(cells: any[]) => any}
+   * @memberOf TableColumn
+   */
+  summaryFunc?: (cells: any[]) => any;
+
+  /**
+   * Summary cell template ref
+   *
+   * @type {*}
+   * @memberOf TableColumn
+   */
+  summaryTemplate?: any;
 }

package/src/utils/column-helper.ts

@@ -29,7 +29,7 @@ export function setColumnDefaults(columns: TableColumn[]) {
     if(!isNullOrUndefined(column.prop) && isNullOrUndefined(column.name)) {
       column.name = deCamelCase(String(column.prop));
     }
-    
+
     if(isNullOrUndefined(column.prop) && isNullOrUndefined(column.name)) {
       column.name = ''; // Fixes IE and Edge displaying `null`
     }
@@ -82,6 +82,14 @@ export function translateTemplates(templates: DataTableColumnDirective[]): any[]
       col.cellTemplate = temp.cellTemplate;
     }
 
+    if(temp.summaryFunc) {
+      col.summaryFunc = temp.summaryFunc;
+    }
+
+    if(temp.summaryTemplate) {
+      col.summaryTemplate = temp.summaryTemplate;
+    }
+
     result.push(col);
   }
 

package/src/utils/column-prop-getters.spec.ts

@@ -50,4 +50,48 @@ describe('deepValueGetter', () => {
     expect(deepValueGetter(data, 'a.b.value')).toEqual(5);
   });
 
+  it('should get array-element two-level deep', () => {
+    let data = {
+      a: {
+        b: [
+          123
+        ]
+      }
+    };
+    expect(deepValueGetter(data, 'a.b.0')).toEqual(123);
+
+  });
+
+  it('should get value of object inside an array-element', () => {
+    let data = {
+      a: {
+        b: [
+          {c: 123}
+        ]
+      }
+    };
+    expect(deepValueGetter(data, 'a.b.0.c')).toEqual(123);
+  });
+   it('should get value of object inside a double array-element', () => {
+    let data = {
+      a: {
+        b: [
+          [
+            123
+          ]
+        ]
+      }
+    };
+    expect(deepValueGetter(data, 'a.b.0.0')).toEqual(123);
+  });
+  
+
+  it('should check for root-level fields with square brackets in name', () => {
+    let data = {
+      'a.b.1.value': 5
+    };
+    expect(deepValueGetter(data, 'a.b.1.value')).toEqual(5);
+  });
+
+
 });

package/src/utils/column.ts

@@ -76,15 +76,3 @@ export function columnsByPinArr(val: any) {
 
   return colsByPinArr;
 }
-
-export function allColumnsByPinArr(val: any) {
-  const colsByPinArr = [];
-  const colsByPin = columnsByPin(val);
-  const colsTest = [];
-
-  colsByPinArr.push({ type: 'left', columns: colsByPin['left'] });
-  colsByPinArr.push({ type: 'center', columns: colsByPin['center'] });
-  colsByPinArr.push({ type: 'right', columns: colsByPin['right'] });
-
-  return colsByPinArr;
-}

package/src/utils/math.ts

@@ -36,7 +36,7 @@ function scaleColumns(colsByGroup: any, maxWidth: any, totalFlexGrow: any) {
     for(const column of colsByGroup[attr]) {
       if (!column.canAutoResize) {
         maxWidth -= column.width;
-        totalFlexGrow -= column.flexGrow;
+        totalFlexGrow -= column.flexGrow ? column.flexGrow : 0;
       } else {
         column.width = 0;
       }

package/test/index.ts

@@ -0,0 +1 @@
+export * from './jasmine-matchers';

package/test/jasmine-matchers.d.ts

@@ -0,0 +1,12 @@
+declare namespace jasmine {
+  interface Matchers<T> {
+    toHaveText(actual: any, expectationFailOutput?: any): jasmine.CustomMatcher;
+    toHaveCssClass(expected: any): boolean;
+  }
+}
+
+/*
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license
+*/

package/test/jasmine-matchers.ts

@@ -0,0 +1,70 @@
+/// <reference path="./jasmine-matchers.d.ts" />
+
+export const addMatchers = () => jasmine.addMatchers({
+  toHaveText, toHaveCssClass
+});
+
+/**
+ * `toHaveText()` adapted from https://angular.io/guide/testing
+ */
+function toHaveText(): jasmine.CustomMatcher {
+  return {
+    compare(
+      actual: any,
+      expectedText: string,
+      expectationFailOutput?: any
+    ): jasmine.CustomMatcherResult {
+      const actualText = elementText(actual);
+      const pass = actualText.indexOf(expectedText) > -1;
+      const message = pass ? '' : composeMessage();
+      return { pass, message };
+
+      function composeMessage() {
+        const a =
+          actualText.length < 100
+            ? actualText
+            : actualText.substr(0, 100) + '...';
+        const efo = expectationFailOutput ? ` '${expectationFailOutput}'` : '';
+        return `Expected element to have text content '${expectedText}' instead of '${a}'${efo}`;
+      }
+    }
+  };
+}
+
+function elementText(n: any): string {
+  if (n instanceof Array) {
+    return n.map(elementText).join('');
+  }
+
+  if (n.nodeType === Node.COMMENT_NODE) {
+    return '';
+  }
+
+  if (n.nodeType === Node.ELEMENT_NODE && n.hasChildNodes()) {
+    return elementText(Array.prototype.slice.call(n.childNodes));
+  }
+
+  if (n.nativeElement) {
+    n = n.nativeElement;
+  }
+
+  return n.textContent;
+}
+
+/**
+ * adapted from https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/test/matchers.ts
+ */
+function toHaveCssClass(util, customEqualityTests) {
+  return { compare: buildError(false), negativeCompare: buildError(true) };
+
+  function buildError(isNot: boolean) {
+    return function(actual: HTMLElement, className: string) {
+      return {
+        pass: actual.classList.contains(className) === !isNot,
+        message: `Expected ${actual.outerHTML} ${
+          isNot ? 'not ' : ''
+        }to contain the CSS class "${className}"`
+      };
+    };
+  }
+}

package/tslint.json

@@ -1,5 +1,5 @@
 {
-  "extends": "tslint-config-swimlane/base",
+  "extends": "tslint-config-swimlane/base.json",
   "rulesDirectory": [],
   "rules": {
     "prefer-conditional-expression": false