Merge branch 'master' into state-support-hiergrid-master

Author: hanastasov

.github/workflows/nodejs.yml

@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master, 9.1.x ]
+    branches: [ master, 9.1.x, 10.0.x ]
   pull_request:
-    branches: [ master, 9.1.x ]
+    branches: [ master, 9.1.x, 10.0.x ]
 
 jobs:
   build:

CHANGELOG.md

@@ -8,8 +8,14 @@ All notable changes for each version of this project will be documented in this
 - `IgxGridState` directive
     - Added support for expansion states, column selection and row pinning.
     - Added support for `IgxTreeGrid` and `IgxHierarchicalGrid` (including child grids)
-- `IgxColumn` 
+- `IgxColumn`
     - Added `byHeader` parameter to the `autosize` method which specifies if the autosizing should be based only on the header content width.
+- `IgxToast`
+    - `message` property has been deprecated. You can place the *message text* in the toast content or pass it as parameter to `show` method instead.
+    - An optional string parameter `message` has been added to `show()` method.
+- `IgxSnackbar`
+    - `message` property has been deprecated. You can place the *message text* in the snackbar content or pass it as parameter to `show` method instead.
+    - An optional string parameter `message` has been added to `show()` method.
 
 ## 10.0.0
 
@@ -19,9 +25,9 @@ All notable changes for each version of this project will be documented in this
 - `igx-select`, `igx-combo`, `igx-drop-down`
     - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
 - `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
-    - `origin` - it can vary within the values of the `TransactionEventOrigin` interface; 
+    - `origin` - it can vary within the values of the `TransactionEventOrigin` interface;
     - `actions` - contains information about the transactions, that caused the emission of the event.
-- `IgxPaginator` - The input `overlaySettings` was introduced, which allows applying custom overlay settings for the component. 
+- `IgxPaginator` - The input `overlaySettings` was introduced, which allows applying custom overlay settings for the component.
 
 ### New Features
 - `IgxGrid`
@@ -166,9 +172,9 @@ All notable changes for each version of this project will be documented in this
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
-  - Added new properties for paging:	
-    - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.	
-    - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.   
+  - Added new properties for paging:
+    - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.
+    - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.
     - Added functionality for column selection.
     - `columnSelection` property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
     - `selected` property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.

projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts

@@ -20,6 +20,7 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     public destroyed;
 
     private _afterViewInit = false;
+    private _scrollNativeSize: number;
 
     ngAfterViewInit() {
         this._afterViewInit = true;
@@ -29,7 +30,9 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     onScroll(event) {
         this.scrollAmount = event.target.scrollTop || event.target.scrollLeft;
     }
-    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) { }
+    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
+        this._scrollNativeSize = this.calculateScrollNativeSize();
+     }
 
     get nativeElement() {
         return this.elementRef.nativeElement;
@@ -54,6 +57,10 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
     }
 
     public get scrollNativeSize() {
+        return this._scrollNativeSize;
+    }
+
+    public calculateScrollNativeSize() {
         const div = document.createElement('div');
         const style = div.style;
         style.width = '100px';

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -439,6 +439,44 @@ export class IgxColumnComponent implements AfterContentInit {
     @WatchColumnChanges()
     @Input()
     public maxWidth: string;
+
+    /**
+     * @hidden
+     */
+    get maxWidthPx() {
+        const gridAvailableSize = this.grid.calcWidth;
+        const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1;
+        return isPercentageWidth ?  parseFloat(this.maxWidth) / 100 * gridAvailableSize : parseFloat(this.maxWidth);
+    }
+
+    /**
+     * @hidden
+     */
+    get maxWidthPercent() {
+        const gridAvailableSize = this.grid.calcWidth;
+        const isPercentageWidth = this.maxWidth && typeof this.maxWidth === 'string' && this.maxWidth.indexOf('%') !== -1;
+        return isPercentageWidth ?  parseFloat(this.maxWidth) : parseFloat(this.maxWidth) / gridAvailableSize * 100;
+    }
+
+    /**
+     * @hidden
+     */
+    get minWidthPx() {
+        const gridAvailableSize = this.grid.calcWidth;
+        const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
+        return isPercentageWidth ?  parseFloat(this.minWidth) / 100 * gridAvailableSize : parseFloat(this.minWidth);
+    }
+
+    /**
+     * @hidden
+     */
+    get minWidthPercent() {
+        const gridAvailableSize = this.grid.calcWidth;
+        const isPercentageWidth = this.minWidth && typeof this.minWidth === 'string' && this.minWidth.indexOf('%') !== -1;
+        return isPercentageWidth ?  parseFloat(this.minWidth) : parseFloat(this.minWidth) / gridAvailableSize * 100;
+    }
+
+
     /**
      * Sets/gets the minimum `width` of the column.
      * Default value is `88`;
@@ -1754,12 +1792,30 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     public autosize(byHeader = false) {
         if (!this.columnGroup) {
-            this.width = !byHeader ? this.getLargestCellWidth() :
-                (Object.values(this.getHeaderCellWidths()).reduce((a, b) => a + b) + 'px');
+            const size = this.getAutoSize(byHeader);
+            this.width = size;
             this.grid.reflow();
         }
     }
 
+    /**
+     * @hidden
+     */
+    public getAutoSize(byHeader = false) {
+        const size = !byHeader ? this.getLargestCellWidth() :
+            (Object.values(this.getHeaderCellWidths()).reduce((a, b) => a + b) + 'px');
+        const gridAvailableSize = this.grid.calcWidth;
+        let newWidth;
+        const isPercentageWidth = this.width && typeof this.width === 'string' && this.width.indexOf('%') !== -1;
+        if (isPercentageWidth) {
+            const percentageSize =  parseFloat(size) / gridAvailableSize * 100;
+            newWidth = percentageSize + '%';
+        } else {
+            newWidth = size;
+        }
+        return newWidth;
+    }
+
     /**
      * @hidden
      */
@@ -1880,14 +1936,14 @@ export class IgxColumnComponent implements AfterContentInit {
         const colWidth = this.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         if (isPercentageWidth) {
-            this._calcWidth = parseInt(colWidth, 10) / 100 * grid.calcWidth;
+            this._calcWidth = parseFloat(colWidth) / 100 * grid.calcWidth;
         } else if (!colWidth) {
             // no width
             this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth();
         } else {
             this._calcWidth = this.width;
         }
-        this.calcPixelWidth = parseInt(this._calcWidth, 10);
+        this.calcPixelWidth = parseFloat(this._calcWidth);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3552,7 +3552,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.hasColumnLayouts) {
             return '';
         }
-        const colWidth = parseInt(column.calcWidth, 10);
+        const colWidth = parseFloat(column.calcWidth);
         const minWidth = this.defaultHeaderGroupMinWidth;
 
         if (colWidth < minWidth) {

projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts

@@ -425,6 +425,149 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
         }));
     });
 
+    describe('Percentage tests: ', () => {
+        let fixture: ComponentFixture<any>;
+        let grid: IgxGridComponent;
+
+        beforeEach(fakeAsync(() => {
+            fixture = TestBed.createComponent(ColPercentageGridComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+        }));
+
+        it('should resize columns with % width.', fakeAsync(() => {
+            grid.height = null;
+            fixture.detectChanges();
+            const headers = GridFunctions.getColumnHeaders(fixture);
+            expect(grid.columns[0].width).toBe('25%');
+
+            const headerResArea = headers[0].parent.children[2].nativeElement;
+            const startPos = headerResArea.getBoundingClientRect().x;
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture).nativeElement;
+            expect(resizer).toBeDefined();
+            // resize with 100px, which is 25%
+            UIInteractions.simulateMouseEvent('mousemove', resizer, startPos + 100, 5);
+            UIInteractions.simulateMouseEvent('mouseup', resizer, startPos + 100, 5);
+            fixture.detectChanges();
+            expect(grid.columns[0].width).toBe('50%');
+        }));
+
+        it('should resize columns with % width and % maxWidth.', fakeAsync(() => {
+            grid.height = null;
+            fixture.detectChanges();
+            const headers = GridFunctions.getColumnHeaders(fixture);
+            grid.columns[0].maxWidth = '30%';
+            expect(grid.columns[0].width).toBe('25%');
+
+            const headerResArea = headers[0].parent.children[2].nativeElement;
+            const startPos = headerResArea.getBoundingClientRect().x;
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture).nativeElement;
+            expect(resizer).toBeDefined();
+            // resize with +100px, which is 25%
+            UIInteractions.simulateMouseEvent('mousemove', resizer, startPos + 100, 5);
+            UIInteractions.simulateMouseEvent('mouseup', resizer, startPos + 100, 5);
+            fixture.detectChanges();
+
+            expect(grid.columns[0].width).toBe(grid.columns[0].maxWidth);
+        }));
+
+        it('should resize columns with % width and % minWidth.', fakeAsync(() => {
+            grid.height = null;
+            fixture.detectChanges();
+            const headers = GridFunctions.getColumnHeaders(fixture);
+            grid.columns[0].minWidth = '10%';
+            expect(grid.columns[0].width).toBe('25%');
+
+            const headerResArea = headers[0].parent.children[2].nativeElement;
+            const startPos = headerResArea.getBoundingClientRect().x;
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture).nativeElement;
+            // resize with -100px
+            UIInteractions.simulateMouseEvent('mousemove', resizer, startPos - 100, 5);
+            UIInteractions.simulateMouseEvent('mouseup', resizer, startPos - 100, 5);
+            fixture.detectChanges();
+
+            expect(grid.columns[0].width).toBe(grid.columns[0].minWidth);
+        }));
+
+        it('should resize columns with % width and pixel maxWidth.', fakeAsync(() => {
+            grid.height = null;
+            fixture.detectChanges();
+            const headers = GridFunctions.getColumnHeaders(fixture);
+            grid.columns[0].maxWidth = '200px';
+            expect(grid.columns[0].width).toBe('25%');
+
+            const headerResArea = headers[0].parent.children[2].nativeElement;
+            const startPos = headerResArea.getBoundingClientRect().x;
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture).nativeElement;
+            expect(resizer).toBeDefined();
+            // resize with +200px, which is 50%
+            UIInteractions.simulateMouseEvent('mousemove', resizer, startPos + 200, 5);
+            UIInteractions.simulateMouseEvent('mouseup', resizer, startPos + 200, 5);
+            fixture.detectChanges();
+            expect(grid.columns[0].width).toBe('50%');
+        }));
+
+        it('should resize columns with % width and pixel minWidth.', fakeAsync(() => {
+            grid.height = null;
+            fixture.detectChanges();
+            const headers = GridFunctions.getColumnHeaders(fixture);
+            // minWidth is 12.5% of the grid width - 400px
+            grid.columns[0].minWidth = '50px';
+            expect(grid.columns[0].width).toBe('25%');
+
+            const headerResArea = headers[0].parent.children[2].nativeElement;
+            const startPos = headerResArea.getBoundingClientRect().x;
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, startPos, 5);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture).nativeElement;
+            // resize with -100px
+            UIInteractions.simulateMouseEvent('mousemove', resizer, startPos - 100, 5);
+            UIInteractions.simulateMouseEvent('mouseup', resizer, startPos - 100, 5);
+            fixture.detectChanges();
+
+            expect(grid.columns[0].width).toBe('12.5%');
+        }));
+
+        it('should autosize column with % width programmatically.', fakeAsync(() => {
+            grid.height = null;
+            fixture.detectChanges();
+            expect(grid.columns[0].width).toBe('25%');
+            grid.columns[0].autosize();
+            fixture.detectChanges();
+            expect(grid.columns[0].width).toBe('21%');
+        }));
+
+        it('should autosize column with % width on double click.', fakeAsync(() => {
+            grid.height = null;
+            fixture.detectChanges();
+            expect(grid.columns[0].width).toBe('25%');
+            const headers = GridFunctions.getColumnHeaders(fixture);
+            const headerResArea = headers[0].parent.children[2].nativeElement;
+            UIInteractions.simulateMouseEvent('dblclick', headerResArea, 0, 0);
+            tick(200);
+            fixture.detectChanges();
+            expect(grid.columns[0].width).toBe('21%');
+        }));
+    });
+
     describe('Integration tests: ', () => {
         let fixture: ComponentFixture<any>;
         let grid: IgxGridComponent;
@@ -453,8 +596,8 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             UIInteractions.simulateMouseEvent('mouseup', resizer, 550, 5);
             fixture.detectChanges();
 
-            expect(grid.columns[2].width).toEqual('250px');
-            expect(grid.columns[2].cells[0].value).toEqual(254);
+            // column has maxWidth='150px'
+            expect(grid.columns[1].width).toEqual('150px');
 
             GridFunctions.clickHeaderSortIcon(headers[2]);
             GridFunctions.clickHeaderSortIcon(headers[2]);
@@ -508,7 +651,7 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             UIInteractions.simulateMouseEvent('mouseup', resizer, 300, 5);
             fixture.detectChanges();
 
-            let resizingArgs: IColumnResizeEventArgs = { column: grid.columns[0], prevWidth: '150', newWidth: '300px' };
+            let resizingArgs: IColumnResizeEventArgs = { column: grid.columns[0], prevWidth: '150px', newWidth: '300px' };
             expect(grid.columns[0].width).toEqual('300px');
             expect(resizingSpy).toHaveBeenCalledTimes(1);
             expect(resizingSpy).toHaveBeenCalledWith(resizingArgs);
@@ -805,7 +948,7 @@ export class ColGridComponent implements OnInit {
 
 @Component({
     template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``,
-        `<igx-column [field]="'Items'" [width]="'25%'" dataType="string" [filterable]="true"></igx-column>
+        `<igx-column [field]="'Items'" [width]="'25%'" dataType="string" [filterable]="true" [resizable]="true"></igx-column>
          <igx-column [field]="'ID'" [width]="'25%'" [header]="'ID'" [filterable]="true"></igx-column>
          <igx-column [field]="'ProductName'" [width]="'25%'" dataType="string" [filterable]="true"></igx-column>
          <igx-column [field]="'Test'"[width]="'25%'" dataType="string" [resizable]="true"></igx-column>`