@swimlane/ngx-datatable 11.1.7 → 11.2.0

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/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/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}"`
+      };
+    };
+  }
+}