[rc] merge from master (#118)

* Add license (#112)

* Add license

Added license to address blackbaud/skyux2-docs#894

* addressed feedback

* Updated column resize handle with new design spec (#116)

* updated resize handle with new design spec

* removed unnecessary import

Co-authored-by: Alex Kingman <alex.kingman@blackbaud.me>

* 3.7.0 release (#117)

* Updated changelog

* merge package.json

* renamed index to public_api

* missing some files from commit

* reordered changelog to be in chronological order

* dep upgrade

Co-authored-by: Denise Pena <Denise.Pena@blackbaud.me>
Co-authored-by: Alex Kingman <alex.kingman@blackbaud.me>
Co-authored-by: Blackbaud-SteveBrush <steve.brush@blackbaud.com>

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 3.7.0 (2020-05-01)
+
+- Updated the visual styles of the column resize indicator. [#116](https://github.com/blackbaud/skyux-grids/pull/116)
+- Removed the dependency `moment`. [#116](https://github.com/blackbaud/skyux-grids/pull/116)
+
 # 4.0.0-rc.2 (2020-04-15)
 
 - Added `SkyGridColumnComponent` and `SkyGridComponent` to exports API (for internal use only).

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Blackbaud
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

index.ts

@@ -1 +1 @@
-export * from './src/app/public';
+export * from './src/app/public/public_api';

package.json

@@ -2,8 +2,6 @@
   "name": "@skyux/grids",
   "version": "4.0.0-rc.2",
   "description": "SKY UX Grids",
-  "main": "bundles/bundle.umd.js",
-  "module": "index.ts",
   "scripts": {
     "build": "skyux build-public-library",
     "build:dev-bundle": "npm run build && node ./scripts/dev-bundle.js",
@@ -40,41 +38,41 @@
     "ng2-dragula": "1.5.0"
   },
   "devDependencies": {
-    "@angular/animations": "9.1.1",
-    "@angular/common": "9.1.1",
-    "@angular/compiler": "9.1.1",
-    "@angular/compiler-cli": "9.1.1",
-    "@angular/core": "9.1.1",
-    "@angular/forms": "9.1.1",
-    "@angular/platform-browser": "9.1.1",
-    "@angular/platform-browser-dynamic": "9.1.1",
-    "@angular/router": "9.1.1",
+    "@angular/animations": "9.1.4",
+    "@angular/common": "9.1.4",
+    "@angular/compiler": "9.1.4",
+    "@angular/compiler-cli": "9.1.4",
+    "@angular/core": "9.1.4",
+    "@angular/forms": "9.1.4",
+    "@angular/platform-browser": "9.1.4",
+    "@angular/platform-browser-dynamic": "9.1.4",
+    "@angular/router": "9.1.4",
     "@blackbaud/auth-client": "2.24.0",
-    "@skyux-sdk/builder": "4.0.0-rc.5",
-    "@skyux-sdk/builder-plugin-skyux": "1.3.1",
+    "@skyux-sdk/builder": "4.0.0-rc.7",
+    "@skyux-sdk/builder-plugin-skyux": "4.0.0-rc.0",
     "@skyux-sdk/e2e": "4.0.0-rc.0",
-    "@skyux-sdk/testing": "4.0.0-rc.1",
+    "@skyux-sdk/testing": "4.0.0-rc.2",
     "@skyux/animations": "4.0.0-rc.0",
     "@skyux/assets": "4.0.0-rc.1",
-    "@skyux/config": "4.0.0-rc.2",
-    "@skyux/core": "4.0.0-rc.4",
+    "@skyux/config": "4.0.0-rc.3",
+    "@skyux/core": "4.0.0-rc.5",
     "@skyux/forms": "4.0.0-rc.0",
     "@skyux/http": "4.0.0-rc.3",
-    "@skyux/i18n": "4.0.0-rc.3",
-    "@skyux/indicators": "4.0.0-rc.3",
-    "@skyux/layout": "4.0.0-rc.1",
-    "@skyux/list-builder-common": "4.0.0-rc.0",
-    "@skyux/modals": "4.0.0-rc.2",
+    "@skyux/i18n": "4.0.0-rc.5",
+    "@skyux/indicators": "4.0.0-rc.5",
+    "@skyux/layout": "4.0.0-rc.4",
+    "@skyux/list-builder-common": "4.0.0-rc.1",
+    "@skyux/modals": "4.0.0-rc.4",
     "@skyux/omnibar-interop": "4.0.0-rc.0",
-    "@skyux/popovers": "4.0.0-rc.1",
+    "@skyux/popovers": "4.0.0-rc.3",
     "@skyux/router": "4.0.0-rc.0",
-    "@skyux/theme": "4.0.0-rc.2",
+    "@skyux/theme": "4.0.0-rc.5",
     "codelyzer": "5.2.2",
-    "moment": "2.24.0",
+    "moment": "2.25.3",
     "rxjs": "6.5.5",
-    "ts-node": "8.6.2",
-    "tslint": "5.20.1",
-    "typescript": "3.6.5",
+    "ts-node": "8.3.0",
+    "tslint": "6.1.2",
+    "typescript": "3.8.3",
     "zone.js": "0.10.3"
   }
 }

skyuxconfig.json

@@ -4,7 +4,10 @@
   "mode": "easy",
   "compileMode": "aot",
   "host": {
-    "url": "https://developer.blackbaud.com"
+    "url": "https://developer.blackbaud.com",
+    "frameOptions": {
+      "none": true
+    }
   },
   "plugins": [
     "@skyux-sdk/builder-plugin-skyux"
@@ -24,8 +27,6 @@
     }
   },
   "app": {
-    "styles": [
-      "@skyux/theme/css/sky.css"
-    ]
+    "styles": []
   }
 }

src/app/app-extras.module.ts

@@ -13,7 +13,7 @@ import {
 
 import {
   SkyGridModule
-} from './public';
+} from './public/public_api';
 
 @NgModule({
   exports: [

src/app/public/modules/grid/fixtures/grid-interactive.component.fixture.ts

@@ -23,8 +23,6 @@ import {
   SkyGridSelectedRowsModelChange
 } from '../types/grid-selected-rows-model-change';
 
-import * as moment from 'moment';
-
 @Component({
   selector: 'sky-test-cmp',
   template: require('./grid-interactive.component.fixture.html')
@@ -62,15 +60,15 @@ export class GridInteractiveTestComponent {
       column1: '1',
       column2: 'Apple',
       column3: 1,
-      column4: moment().add(1, 'minute'),
+      column4: new Date().getTime() + 600000,
       customId: '101'
     },
     {
       id: '2',
       column1: '01',
       column2: 'Banana',
       column3: 1,
-      column4: moment().add(6, 'minute'),
+      column4: new Date().getTime() + 3600000,
       column5: 'test',
       customId: '102'
     },

src/app/public/modules/grid/fixtures/grid.component.fixture.ts

@@ -47,8 +47,6 @@ import {
   SkyGridComponent
 } from '../grid.component';
 
-import * as moment from 'moment';
-
 @Component({
   selector: 'sky-test-cmp',
   templateUrl: './grid.component.fixture.html'
@@ -65,15 +63,15 @@ export class GridTestComponent {
       column1: '1',
       column2: 'Apple',
       column3: 1,
-      column4: moment().add(1, 'minute'),
+      column4: new Date().getTime() + 600000,
       customId: '101'
     },
     {
       id: '2',
       column1: '01',
       column2: 'Banana',
       column3: 1,
-      column4: moment().add(6, 'minute'),
+      column4: new Date().getTime() + 3600000,
       column5: 'test',
       customId: '102'
     },
@@ -82,39 +80,39 @@ export class GridTestComponent {
       column1: '11',
       column2: 'Carrot',
       column3: 11,
-      column4: moment().add(4, 'minute'),
+      column4: new Date().getTime() + 2400000,
       customId: '103'
     },
     {
       id: '4',
       column1: '12',
       column2: 'Daikon',
       column3: 12,
-      column4: moment().add(2, 'minute'),
+      column4: new Date().getTime() + 1200000,
       customId: '104'
     },
     {
       id: '5',
       column1: '13',
       column2: 'Edamame',
       column3: 13,
-      column4: moment().add(5, 'minute'),
+      column4: new Date().getTime() + 3000000,
       customId: '105'
     },
     {
       id: '6',
       column1: '20',
       column2: 'Fig',
       column3: 20,
-      column4: moment().add(3, 'minute'),
+      column4: new Date().getTime() + 1800000,
       customId: '106'
     },
     {
       id: '7',
       column1: '21',
       column2: 'Some long text that would provoke an overflow of monster proportions!',
       column3: 21,
-      column4: moment().add(7, 'minute'),
+      column4: new Date().getTime() + 5600000,
       customId: '107'
     }
   ];
@@ -227,7 +225,7 @@ export class GridTestComponent {
       column2: 'Some long text that would provoke an overflow of monster proportions!',
       column3: 'Some long text that would provoke an overflow of monster proportions!',
       column4: 21,
-      column5: moment().add(7, 'minute'),
+      column5: new Date().getTime() + 5600000,
       customId: '107'
     }];
   }

src/app/public/modules/grid/grid-adapter.service.ts

@@ -86,7 +86,9 @@ export class SkyGridAdapterService {
   }
 
   public setStyle(el: ElementRef, style: string, value: string): void {
-    this.renderer.setStyle(el.nativeElement, style, value);
+    if (el) {
+      this.renderer.setStyle(el.nativeElement, style, value);
+    }
   }
 
   private isLeftOfLocked(sourceColumn: HTMLElement, columns: NodeListOf<Element>): boolean {

src/app/public/modules/grid/grid.component.html

@@ -98,6 +98,8 @@
               [max]="maxColWidth"
               [step]="columnResizeStep"
               [(ngModel)]="column.width"
+              (blur)="onResizeHandleBlur($event)"
+              (focus)="onResizeHandleFocus($event)"
               (keydown)="onKeydownResizeCol($event)"
               (change)="onInputChangeResizeCol($event)"
               #colSizeRange />
@@ -160,12 +162,12 @@
         </tr>
       </tbody>
     </table>
-    <div
-      *ngIf="showResizeBar"
+    <div *ngIf="showResizeBar"
       aria-hidden="true"
       id="sky-grid-resize-bar"
       tabindex="-1"
-      #resizeBar>
+      #resizeBar
+    >
     </div>
   </div>
 </div>

src/app/public/modules/grid/grid.component.scss

@@ -244,7 +244,7 @@ th.sky-grid-multiselect-cell {
   z-index: 99;
   height: 100%;
   width: $sky-grid-resize-handle-width;
-  background: black;
+  background: $sky-highlight-color-info;
   opacity: 0.6;
 }
 

src/app/public/modules/grid/grid.component.spec.ts

@@ -89,8 +89,6 @@ import {
   SkyGridSelectedRowsSource
 } from './types/grid-selected-rows-source';
 
-import * as moment from 'moment';
-
 //#region helpers
 function getColumnHeader(id: string, element: DebugElement): DebugElement {
   return element.query(
@@ -410,49 +408,50 @@ describe('Grid Component', () => {
             column1: '1',
             column2: 'Apple',
             column3: 1,
-            column4: moment().add(1, 'minute')
+            column4: new Date().getTime() + 600000
           },
           {
             id: '2',
             column1: '01',
             column2: 'Banana',
             column3: 1,
-            column4: moment().add(6, 'minute'), column5: 'test'
+            column4: new Date().getTime() + 3000000,
+            column5: 'test'
           },
           {
             id: '3',
             column1: '11',
             column2: 'Carrot',
             column3: 11,
-            column4: moment().add(4, 'minute')
+            column4: new Date().getTime() + 2400000
           },
           {
             id: '4',
             column1: '12',
             column2: 'Daikon',
             column3: 12,
-            column4: moment().add(2, 'minute')
+            column4: new Date().getTime() + 1200000
           },
           {
             id: '5',
             column1: '13',
             column2: 'Edamame',
             column3: 13,
-            column4: moment().add(5, 'minute')
+            column4: new Date().getTime() + 3000000
           },
           {
             id: '6',
             column1: '20',
             column2: 'Fig',
             column3: 20,
-            column4: moment().add(3, 'minute')
+            column4: new Date().getTime() + 1800000
           },
           {
             id: '7',
             column1: '21',
             column2: 'Grape',
             column3: 21,
-            column4: moment().add(7, 'minute')
+            column4: new Date().getTime() + 5600000
           }
         ];
 
@@ -827,6 +826,22 @@ describe('Grid Component', () => {
           });
         }));
 
+        it('should show vertical resize bar when range input is focused with keyboard', fakeAsync(() => {
+          fixture.detectChanges();
+          let inputRange = getColumnRangeInputs(fixture)[1];
+
+          SkyAppTestUtility.fireDomEvent(inputRange.nativeElement, 'focus');
+          let resizeBar = fixture.nativeElement.querySelector('#sky-grid-resize-bar');
+
+          expect(resizeBar).not.toBeNull();
+
+          SkyAppTestUtility.fireDomEvent(inputRange.nativeElement, 'blur');
+          fixture.detectChanges();
+          resizeBar = fixture.nativeElement.querySelector('#sky-grid-resize-bar');
+
+          expect(resizeBar).toBeNull();
+        }));
+
         it('should resize column when range input is changed', async(() => {
           // Get initial baseline for comparison.
           // Note: We are assuming column at index[1] starts with a set value (150).