From 6d595016742fc6e89550a6a0d4702c43341d16b0 Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Thu, 30 Sep 2021 18:31:41 +0300 Subject: [PATCH 01/43] feat(exporters): add providedIn root to exporters --- .../igniteui-angular/src/lib/services/csv/csv-exporter.ts | 4 +++- .../igniteui-angular/src/lib/services/excel/excel-exporter.ts | 4 +++- src/app/app.module.ts | 4 +--- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts index 668a1f2e07a..aa5d0c80c5a 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts @@ -31,7 +31,9 @@ export interface ICsvExportEndedEventArgs extends IBaseEventArgs { * this.csvExportService.exportData(this.localData, opt); * ``` */ -@Injectable() +@Injectable({ + providedIn: 'root', +}) export class IgxCsvExporterService extends IgxBaseExporter { /** * This event is emitted when the export process finishes. diff --git a/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts b/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts index d5c974a1de3..97cb16ba76f 100644 --- a/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts +++ b/projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts @@ -39,7 +39,9 @@ const EXCEL_MAX_COLS = 16384; * this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions("FileName")); * ``` */ -@Injectable() +@Injectable({ + providedIn: 'root', +}) export class IgxExcelExporterService extends IgxBaseExporter { private static ZIP_OPTIONS = { compression: 'DEFLATE', type: 'base64' } as JSZip.JSZipGeneratorOptions<'base64'>; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 601603b71fd..628693a8d95 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,7 +5,7 @@ import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; import { - IgxIconModule, IgxBottomNavModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService, IgxOverlayService, + IgxIconModule, IgxBottomNavModule, IgxGridModule, IgxOverlayService, IgxDragDropModule, IgxDividerModule, IgxTreeGridModule, IgxHierarchicalGridModule, IgxInputGroupModule, IgxIconService, DisplayDensityToken, DisplayDensity, IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxActionStripModule, GridBaseAPIService, IgxButtonGroupModule, @@ -327,9 +327,7 @@ const components = [ HierarchicalRemoteService, GridBaseAPIService, IgxGridHierarchicalPipe, - IgxExcelExporterService, IgxIconService, - IgxCsvExporterService, IgxOverlayService, { provide: DisplayDensityToken, useFactory: () => ({ displayDensity: DisplayDensity.comfortable }) }, { From 31c29dc47be45495acdb863dc594cf40c174a680 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 1 Oct 2021 13:19:47 +0300 Subject: [PATCH 02/43] fix(grid): fix getCellByColumn with virtualization #10172 -master --- .../igniteui-angular/src/lib/grids/grid/grid.component.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index c2abddd55b4..ce094cdb0f7 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1029,6 +1029,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @param index */ public getRowByIndex(index: number): RowType { + if (this.gridAPI.grid.virtualizationState){ + index = index - this.gridAPI.grid.virtualizationState.startIndex; + } if (index < 0 || index >= this.dataView.length) { return undefined; } @@ -1101,6 +1104,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, const row = this.getRowByIndex(rowIndex); const column = this.columnList.find((col) => col.field === columnField); if (row && row instanceof IgxGridRow && !row.data?.detailsData && column) { + if (this.gridAPI.grid.virtualizationState){ + rowIndex = row.index; + } return new IgxGridCell(this, rowIndex, columnField); } } From 60ecf9aa3aa8b134f99e57be2ecb953ae42f5b18 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 1 Oct 2021 14:57:38 +0300 Subject: [PATCH 03/43] chore(*): get row from grid collection --- .../src/lib/grids/grid/grid.component.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index ce094cdb0f7..9ded62a812e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1030,7 +1030,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, */ public getRowByIndex(index: number): RowType { if (this.gridAPI.grid.virtualizationState){ - index = index - this.gridAPI.grid.virtualizationState.startIndex; + return this.createRow(index); } if (index < 0 || index >= this.dataView.length) { return undefined; @@ -1104,9 +1104,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, const row = this.getRowByIndex(rowIndex); const column = this.columnList.find((col) => col.field === columnField); if (row && row instanceof IgxGridRow && !row.data?.detailsData && column) { - if (this.gridAPI.grid.virtualizationState){ - rowIndex = row.index; - } return new IgxGridCell(this, rowIndex, columnField); } } @@ -1146,8 +1143,13 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, */ public createRow(index: number, data?: any): RowType { let row: RowType; + let rec: any; + if (this.virtualizationState){ + rec = data ?? this.gridAPI.get_row_by_index(index).rowData; + }else { + rec = data ?? this.dataView[index]; + } - const rec: any = data ?? this.dataView[index]; if (rec && this.isGroupByRecord(rec)) { row = new IgxGroupByRow(this, index, rec); From d2ca29113b1bf0b5c29449e58cae3c49ccfcc1e5 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 1 Oct 2021 15:24:41 +0300 Subject: [PATCH 04/43] chore(*): revert get row from grid collection --- .../src/lib/grids/grid/grid.component.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 9ded62a812e..ce094cdb0f7 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1030,7 +1030,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, */ public getRowByIndex(index: number): RowType { if (this.gridAPI.grid.virtualizationState){ - return this.createRow(index); + index = index - this.gridAPI.grid.virtualizationState.startIndex; } if (index < 0 || index >= this.dataView.length) { return undefined; @@ -1104,6 +1104,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, const row = this.getRowByIndex(rowIndex); const column = this.columnList.find((col) => col.field === columnField); if (row && row instanceof IgxGridRow && !row.data?.detailsData && column) { + if (this.gridAPI.grid.virtualizationState){ + rowIndex = row.index; + } return new IgxGridCell(this, rowIndex, columnField); } } @@ -1143,13 +1146,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, */ public createRow(index: number, data?: any): RowType { let row: RowType; - let rec: any; - if (this.virtualizationState){ - rec = data ?? this.gridAPI.get_row_by_index(index).rowData; - }else { - rec = data ?? this.dataView[index]; - } + const rec: any = data ?? this.dataView[index]; if (rec && this.isGroupByRecord(rec)) { row = new IgxGroupByRow(this, index, rec); From de2f318b2bc4b27e5817d213a4c2246adc86fe10 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Mon, 4 Oct 2021 13:47:11 +0300 Subject: [PATCH 05/43] chore(*): fix grid navigation with remote data --- .../src/lib/grids/grid-navigation.service.ts | 8 ++++++-- .../src/lib/grids/grid/grid.component.ts | 13 ++++++++----- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index dc12eba8a29..dbdd10307ee 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -248,10 +248,14 @@ export class IgxGridNavigationService { } public isDataRow(rowIndex: number, includeSummary = false) { - if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) { + let curRow: any; + if (this.grid.virtualizationState) { + curRow = this.grid.dataView[rowIndex - this.grid.virtualizationState.startIndex]; + }else if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) { return false; + }else { + curRow = this.grid.dataView[rowIndex]; } - const curRow = this.grid.dataView[rowIndex]; return curRow && !this.grid.isGroupByRecord(curRow) && !this.grid.isDetailRecord(curRow) && !curRow.childGridsData && (includeSummary || !curRow.summaries); } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index ce094cdb0f7..751cefffd70 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1030,7 +1030,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, */ public getRowByIndex(index: number): RowType { if (this.gridAPI.grid.virtualizationState){ - index = index - this.gridAPI.grid.virtualizationState.startIndex; + return this.createRow(index); } if (index < 0 || index >= this.dataView.length) { return undefined; @@ -1104,9 +1104,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, const row = this.getRowByIndex(rowIndex); const column = this.columnList.find((col) => col.field === columnField); if (row && row instanceof IgxGridRow && !row.data?.detailsData && column) { - if (this.gridAPI.grid.virtualizationState){ - rowIndex = row.index; - } return new IgxGridCell(this, rowIndex, columnField); } } @@ -1146,8 +1143,14 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, */ public createRow(index: number, data?: any): RowType { let row: RowType; + let rec: any; - const rec: any = data ?? this.dataView[index]; + if (this.gridAPI.grid.virtualizationState) { + const virtIndex = index - this.gridAPI.grid.virtualizationState.startIndex; + rec = data ?? this.dataView[virtIndex]; + }else { + rec = data ?? this.dataView[index]; + } if (rec && this.isGroupByRecord(rec)) { row = new IgxGroupByRow(this, index, rec); From ef50acfcb965beacc46bd36b43076b0eddc9f4a0 Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Tue, 5 Oct 2021 12:20:40 +0300 Subject: [PATCH 06/43] fix(esf): add empty filter if no filter is applied --- .../src/lib/grids/filtering/grid-filtering.service.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index b10da1a7f36..209e73f7b36 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -292,7 +292,8 @@ export class IgxFilteringService implements OnDestroy { this.clear_filter(field); // Wait for the change detection to update filtered data through the pipes and then emit the event. - requestAnimationFrame(() => this.grid.filteringDone.emit(null)); + const emptyFilter = new FilteringExpressionsTree(null, field); + requestAnimationFrame(() => this.grid.filteringDone.emit(emptyFilter)); if (field) { const expressions = this.getExpressions(field); From 1ee4affe700a761243cccaa32a60d1e3e32ef8fb Mon Sep 17 00:00:00 2001 From: dobromirts Date: Wed, 6 Oct 2021 13:21:43 +0300 Subject: [PATCH 07/43] fix(hierarchical-grid): add correct check for row and expansion indexes --- .../src/lib/grids/grid-base.directive.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index b4012b0e432..40120a4a876 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6865,14 +6865,19 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements const activeEl = this.selectionService.activeElement; if (this.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid') { - const expansionRowIndexes = Array.from(this.expansionStates.keys()); + const expansionRowIndexes = []; + for (const [key, value] of this.expansionStates.entries()) { + if (value) { + expansionRowIndexes.push(key); + } + } if (this.selectionService.selection.size > 0) { if (expansionRowIndexes.length > 0) { for (const [key, value] of this.selectionService.selection.entries()) { let updatedKey = key; expansionRowIndexes.forEach(row => { let rowIndex; - if (row.ID) { + if (!isNaN(row.ID)) { rowIndex = Number(row.ID); }else { rowIndex = Number(row); From 21a28ac2027e4ffb4583355de9ba87fce57d4b7c Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Wed, 6 Oct 2021 14:21:58 +0300 Subject: [PATCH 08/43] chore(*): removed optional decorators --- .../src/lib/grids/toolbar/grid-toolbar-exporter.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts index 381f6b50ea7..7b3b55d1f75 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts @@ -108,8 +108,8 @@ export class IgxGridToolbarExporterComponent extends BaseToolbarDirective { constructor( @Host() protected toolbar: IgxGridToolbarComponent, - @Optional() private excelExporter: IgxExcelExporterService, - @Optional() private csvExporter: IgxCsvExporterService, + private excelExporter: IgxExcelExporterService, + private csvExporter: IgxCsvExporterService, ) { super(toolbar); } From 210896a9332f4145e3eadf0ec56d292e89564ef1 Mon Sep 17 00:00:00 2001 From: Hristo Date: Thu, 7 Oct 2021 10:00:16 +0300 Subject: [PATCH 09/43] Update projects/igniteui-angular/src/lib/grids/grid-base.directive.ts --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 40120a4a876..23db29246fe 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6879,7 +6879,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements let rowIndex; if (!isNaN(row.ID)) { rowIndex = Number(row.ID); - }else { + } else { rowIndex = Number(row); } From 86bbf54cdd6715d1466dfeb9fdffc7251f4fecad Mon Sep 17 00:00:00 2001 From: dobromirts Date: Thu, 7 Oct 2021 10:24:54 +0300 Subject: [PATCH 10/43] chore(*): remove virtualizationState check --- .../src/lib/grids/grid-navigation.service.ts | 10 ++++++---- .../src/lib/grids/grid/grid.component.ts | 12 +++++------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index dbdd10307ee..535b16004bd 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -249,10 +249,12 @@ export class IgxGridNavigationService { public isDataRow(rowIndex: number, includeSummary = false) { let curRow: any; - if (this.grid.virtualizationState) { - curRow = this.grid.dataView[rowIndex - this.grid.virtualizationState.startIndex]; - }else if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) { - return false; + + if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) { + curRow = this.grid.dataView[rowIndex - this.grid.virtualizationState.startIndex]; + if (!curRow){ + return false; + } }else { curRow = this.grid.dataView[rowIndex]; } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 751cefffd70..54644a55023 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1029,10 +1029,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @param index */ public getRowByIndex(index: number): RowType { - if (this.gridAPI.grid.virtualizationState){ - return this.createRow(index); - } - if (index < 0 || index >= this.dataView.length) { + if (index < 0) { return undefined; } return this.createRow(index); @@ -1145,9 +1142,10 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, let row: RowType; let rec: any; - if (this.gridAPI.grid.virtualizationState) { - const virtIndex = index - this.gridAPI.grid.virtualizationState.startIndex; - rec = data ?? this.dataView[virtIndex]; + if (index < 0 || index >= this.dataView.length) { + if (index >= this.dataView.length){ + rec = data ?? this.gridAPI.get_row_by_index(index).rowData; + } }else { rec = data ?? this.dataView[index]; } From 57a04fafd3ee556f88f4f260b79f3ce0385a5844 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Thu, 7 Oct 2021 11:59:55 +0300 Subject: [PATCH 11/43] chore(*): get row index based on startIndex --- projects/igniteui-angular/src/lib/grids/grid/grid.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 54644a55023..0e473e54b55 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1144,7 +1144,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, if (index < 0 || index >= this.dataView.length) { if (index >= this.dataView.length){ - rec = data ?? this.gridAPI.get_row_by_index(index).rowData; + const virtIndex = index - this.gridAPI.grid.virtualizationState.startIndex; + rec = data ?? this.dataView[virtIndex]; } }else { rec = data ?? this.dataView[index]; From 5a5a583d2163ae844191cedeb70c51a1f380aaa7 Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Thu, 7 Oct 2021 16:37:43 +0300 Subject: [PATCH 12/43] chore(*): updated changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6182d481ce6..23dee2efdc8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes for each version of this project will be documented in this file. +## 13.0.0 + +### New Features +- `IgxCsvExporterService`, `IgxExcelExporterService` + - Exporter services are no longer required to be provided in the application since they are now injected on a root level. + ## 12.2.0 ### New Features From da16344aea23b8d0c465f42976c282ac93289e15 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 8 Oct 2021 12:36:33 +0300 Subject: [PATCH 13/43] fix(checkbox, switch): formgroup.reset() isn't working (#10249) * fix(checkbox, switch): form.reset() fix #10214 * test(switch, checkbox): adding form group #10214 * fix(*): no longer use ngModel in grid cb #10214 * chore(*): addressing review comment --- .../lib/checkbox/checkbox.component.spec.ts | 38 ++++++++++++++++--- .../src/lib/checkbox/checkbox.component.ts | 4 +- .../src/lib/grids/cell.component.html | 5 +-- .../src/lib/switch/switch.component.spec.ts | 36 ++++++++++++++++-- .../src/lib/switch/switch.component.ts | 4 +- src/app/input/input.sample.html | 8 ++++ src/app/input/input.sample.ts | 8 ++++ 7 files changed, 84 insertions(+), 19 deletions(-) diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts index 94ab36f1cb4..b53ac98a3e5 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.spec.ts @@ -1,6 +1,6 @@ import { Component, ViewChild } from '@angular/core'; import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; +import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxCheckboxComponent } from './checkbox.component'; @@ -22,9 +22,10 @@ describe('IgxCheckbox', () => { CheckboxExternalLabelComponent, CheckboxInvisibleLabelComponent, CheckboxDisabledTransitionsComponent, + CheckboxFormGroupComponent, IgxCheckboxComponent ], - imports: [FormsModule, IgxRippleModule, NoopAnimationsModule] + imports: [FormsModule, ReactiveFormsModule, IgxRippleModule, NoopAnimationsModule] }) .compileComponents(); })); @@ -34,7 +35,7 @@ describe('IgxCheckbox', () => { fixture.detectChanges(); const checkbox = fixture.componentInstance.cb; - const nativeCheckbox = fixture.debugElement.query(By.css('input')).nativeElement; + const nativeCheckbox = checkbox.nativeCheckbox.nativeElement; const nativeLabel = checkbox.nativeLabel.nativeElement; const placeholderLabel = fixture.debugElement.query(By.css('.igx-checkbox__label')).nativeElement; @@ -69,7 +70,7 @@ describe('IgxCheckbox', () => { fixture.detectChanges(); expect(nativeCheckbox.checked).toBe(false); - expect(checkboxInstance.checked).toBe(false); + expect(checkboxInstance.checked).toBe(null); testInstance.subscribed = true; checkboxInstance.name = 'my-checkbox'; @@ -85,6 +86,22 @@ describe('IgxCheckbox', () => { expect(checkboxInstance.name).toEqual('my-checkbox'); })); + it('Initializes with form group', () => { + const fixture = TestBed.createComponent(CheckboxFormGroupComponent); + fixture.detectChanges(); + + const testInstance = fixture.componentInstance; + const checkboxInstance = testInstance.cb; + const form = testInstance.myForm; + + form.setValue({ checkbox: true }); + expect(checkboxInstance.checked).toBe(true); + + form.reset(); + + expect(checkboxInstance.checked).toBe(null); + }); + it('Initializes with external label', () => { const fixture = TestBed.createComponent(CheckboxExternalLabelComponent); const checkboxInstance = fixture.componentInstance.cb; @@ -197,7 +214,7 @@ describe('IgxCheckbox', () => { fixture.detectChanges(); // Should not update - expect(checkboxInstance.checked).toBe(false); + expect(checkboxInstance.checked).toBe(null); expect(testInstance.subscribed).toBe(false); }); @@ -398,3 +415,14 @@ class CheckboxInvisibleLabelComponent { class CheckboxDisabledTransitionsComponent { @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent; } + +@Component({ + template: `
Form Group
` +}) +class CheckboxFormGroupComponent { + @ViewChild('cb', { static: true }) public cb: IgxCheckboxComponent; + + public myForm = this.fb.group({ checkbox: [''] }); + + constructor(private fb: FormBuilder) {} +} diff --git a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts index 1ac0423d94c..38b44020c5a 100644 --- a/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts +++ b/projects/igniteui-angular/src/lib/checkbox/checkbox.component.ts @@ -428,9 +428,7 @@ export class IgxCheckboxComponent implements ControlValueAccessor, EditorProvide /** @hidden @internal */ public writeValue(value: boolean) { - if (typeof value === 'boolean') { - this._checked = value; - } + this._checked = value; } /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index c87188c2fd2..a731932ca9d 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -91,12 +91,9 @@ - diff --git a/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts b/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts index 2b6fe131bc3..faaf9217c65 100644 --- a/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts +++ b/projects/igniteui-angular/src/lib/switch/switch.component.spec.ts @@ -1,6 +1,6 @@ import { Component, ViewChild } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; -import { FormsModule } from '@angular/forms'; +import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxSwitchComponent } from './switch.component'; @@ -19,9 +19,10 @@ describe('IgxSwitch', () => { SwitchDisabledComponent, SwitchExternalLabelComponent, SwitchInvisibleLabelComponent, + SwitchFormGroupComponent, IgxSwitchComponent ], - imports: [FormsModule, IgxRippleModule, NoopAnimationsModule] + imports: [FormsModule, ReactiveFormsModule, IgxRippleModule, NoopAnimationsModule] }) .compileComponents(); })); @@ -68,7 +69,7 @@ describe('IgxSwitch', () => { fixture.detectChanges(); expect(nativeCheckbox.checked).toBe(false); - expect(switchInstance.checked).toBe(false); + expect(switchInstance.checked).toBe(null); testInstance.subscribed = true; switchInstance.name = 'my-switch'; @@ -79,6 +80,22 @@ describe('IgxSwitch', () => { expect(switchInstance.name).toEqual('my-switch'); }); + it('Initializes with form group', () => { + const fixture = TestBed.createComponent(SwitchFormGroupComponent); + fixture.detectChanges(); + + const testInstance = fixture.componentInstance; + const switchInstance = testInstance.switch; + const form = testInstance.myForm; + + form.setValue({ switch: true }); + expect(switchInstance.checked).toBe(true); + + form.reset(); + + expect(switchInstance.checked).toBe(null); + }); + it('Initializes with external label', () => { const fixture = TestBed.createComponent(SwitchExternalLabelComponent); const switchInstance = fixture.componentInstance.switch; @@ -149,7 +166,7 @@ describe('IgxSwitch', () => { fixture.detectChanges(); // Should not update - expect(switchInstance.checked).toBe(false); + expect(switchInstance.checked).toBe(null); expect(testInstance.subscribed).toBe(false); }); @@ -256,3 +273,14 @@ class SwitchInvisibleLabelComponent { @ViewChild('switch', { static: true }) public switch: IgxSwitchComponent; public label = 'Invisible Label'; } + +@Component({ + template: `
Form Group
` +}) +class SwitchFormGroupComponent { + @ViewChild('switch', { static: true }) public switch: IgxSwitchComponent; + + public myForm = this.fb.group({ switch: [] }); + + constructor(private fb: FormBuilder) {} +} diff --git a/projects/igniteui-angular/src/lib/switch/switch.component.ts b/projects/igniteui-angular/src/lib/switch/switch.component.ts index 6da66babc5f..bb1a1ff1b27 100644 --- a/projects/igniteui-angular/src/lib/switch/switch.component.ts +++ b/projects/igniteui-angular/src/lib/switch/switch.component.ts @@ -337,9 +337,7 @@ export class IgxSwitchComponent implements ControlValueAccessor, EditorProvider * @internal */ public writeValue(value: boolean) { - if (typeof value === 'boolean') { - this._checked = value; - } + this._checked = value; } /** diff --git a/src/app/input/input.sample.html b/src/app/input/input.sample.html index 52ff8001137..83821f588d9 100644 --- a/src/app/input/input.sample.html +++ b/src/app/input/input.sample.html @@ -122,6 +122,14 @@

Checkbox sample

Brian Vaughan Value + + +
+ Form Group Checkbox + Form Group Switch +
+ + diff --git a/src/app/input/input.sample.ts b/src/app/input/input.sample.ts index e8525f986f9..ef2bde005d8 100644 --- a/src/app/input/input.sample.ts +++ b/src/app/input/input.sample.ts @@ -1,4 +1,5 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { FormBuilder } from '@angular/forms'; import { IChangeRadioEventArgs } from 'igniteui-angular'; @Component({ @@ -12,6 +13,11 @@ export class InputSampleComponent { public selected = 'option1'; public airplaneMode = false; + public myForm = this.fb.group({ + checkbox: [], + switch: [] + }); + public user = { comment: '', firstName: 'John', @@ -50,6 +56,8 @@ export class InputSampleComponent { disabled: true }]; + constructor(private fb: FormBuilder) {} + public onClick(event: MouseEvent) { console.log(event); } From d688d5b4594f6893a9b9c7ed0dd5dce0ce005f86 Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Mon, 11 Oct 2021 10:27:53 +0300 Subject: [PATCH 14/43] chore(*): fixed filtering tests --- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index fc20376a5e1..b53b585e91d 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -487,7 +487,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { expect(grid.filtering.emit).toHaveBeenCalledWith({ owner: grid, cancel: false, filteringExpressions: null }); expect(grid.filtering.emit).toHaveBeenCalledTimes(2); - expect(grid.filteringDone.emit).toHaveBeenCalledWith(null); + const emptyFilter = new FilteringExpressionsTree(null, columnName); + expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter); expect(grid.filteringDone.emit).toHaveBeenCalledTimes(2); const filterUiRow = fix.debugElement.query(By.css(FILTER_UI_ROW)); @@ -514,7 +515,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { const args = { owner: grid, cancel: false, filteringExpressions: null }; expect(grid.filtering.emit).toHaveBeenCalledWith(args); - expect(grid.filteringDone.emit).toHaveBeenCalledWith(null); + const emptyFilter = new FilteringExpressionsTree(null, columnName); + expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter); })); it('Removing second condition removes the And/Or button', fakeAsync(() => { @@ -826,13 +828,14 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { spyOn(grid.filtering, 'emit'); spyOn(grid.filteringDone, 'emit'); - grid.filter('ProductName', 'I', IgxStringFilteringOperand.instance().condition('startsWith')); + const columnName = 'ProductName'; + grid.filter(columnName, 'I', IgxStringFilteringOperand.instance().condition('startsWith')); tick(30); fix.detectChanges(); expect(grid.rowList.length).toEqual(2); - const filteringExpressions = grid.filteringExpressionsTree.find('ProductName') as FilteringExpressionsTree; + const filteringExpressions = grid.filteringExpressionsTree.find(columnName) as FilteringExpressionsTree; const args = { owner: grid, cancel: false, filteringExpressions }; expect(grid.filtering.emit).toHaveBeenCalledWith(args); expect(grid.filtering.emit).toHaveBeenCalledTimes(1); @@ -852,7 +855,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { args.filteringExpressions = null; expect(grid.filtering.emit).toHaveBeenCalledWith(args); expect(grid.filtering.emit).toHaveBeenCalledTimes(2); - expect(grid.filteringDone.emit).toHaveBeenCalledWith(null); + const emptyFilter = new FilteringExpressionsTree(null, columnName); + expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter); expect(grid.filteringDone.emit).toHaveBeenCalledTimes(2); })); From 7d069c2527142252ce760e66d71dcf654193eb45 Mon Sep 17 00:00:00 2001 From: Plamena Miteva Date: Mon, 11 Oct 2021 10:40:59 +0300 Subject: [PATCH 15/43] fix(overlay): overlay wrapper and element animation should start together #9882 (#10232) --- .../src/lib/dialog/dialog.component.spec.ts | 2 +- .../src/lib/services/overlay/overlay.spec.ts | 193 +++++++++--------- .../src/lib/services/overlay/overlay.ts | 21 +- src/app/overlay/overlay.sample.html | 4 + src/app/overlay/overlay.sample.ts | 8 +- 5 files changed, 127 insertions(+), 101 deletions(-) diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts index e6e6d196f5f..7e393815e81 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts @@ -345,7 +345,7 @@ describe('Dialog', () => { fix.detectChanges(); dialog.open(); - tick(); + tick(16); fix.detectChanges(); overlaydiv = document.getElementsByClassName(OVERLAY_MAIN_CLASS)[0]; diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts index b051f22f9c3..e77bb2c38db 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -51,6 +51,7 @@ const CLASS_OVERLAY_WRAPPER_MODAL = 'igx-overlay__wrapper--modal'; const CLASS_OVERLAY_WRAPPER_FLEX = 'igx-overlay__wrapper--flex'; const CLASS_OVERLAY_MAIN = 'igx-overlay'; const CLASS_SCROLLABLE_DIV = 'scrollableDiv'; +const DEBOUNCE_TIME = 16; // Utility function to get all applied to element css from all sources. const css = (element) => { @@ -258,19 +259,19 @@ describe('igxOverlay', () => { mockFactoryResolver = { resolveComponentFactory: () => ({ create: () => ({ - hostView: '', - location: mockElementRef, - changeDetectorRef: { detectChanges: () => { } }, - destroy: () => { } - }) + hostView: '', + location: mockElementRef, + changeDetectorRef: { detectChanges: () => { } }, + destroy: () => { } }) + }) }; mockApplicationRef = { attachView: () => { }, detachView: () => { } }; mockInjector = {}; mockAnimationBuilder = {}; mockDocument = { body: mockElement, - listeners: { }, + listeners: {}, defaultView: mockElement, // this is used be able to properly invoke rxjs `fromEvent` operator, which, turns out // just adds an event listener to the element and emits accordingly @@ -437,7 +438,7 @@ describe('igxOverlay', () => { fixture.detectChanges(); fixture.componentInstance.buttonElement.nativeElement.click(); - tick(); + tick(DEBOUNCE_TIME); const overlayElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_MAIN)[0] as HTMLElement; @@ -634,8 +635,8 @@ describe('igxOverlay', () => { const bottom = 200; const mockElement = document.createElement('div'); spyOn(mockElement, 'getBoundingClientRect').and.callFake(() => ({ - left, top, width, height, right, bottom - } as DOMRect)); + left, top, width, height, right, bottom + } as DOMRect)); const mockItem = document.createElement('div'); mockElement.append(mockItem); @@ -833,7 +834,7 @@ describe('igxOverlay', () => { SimpleDynamicComponent, { positionStrategy: new ConnectedPositioningStrategy({ target: buttonElement }) }); overlayInstance.show(id); - tick(); + tick(DEBOUNCE_TIME); let contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement; @@ -849,7 +850,7 @@ describe('igxOverlay', () => { getPointSpy.and.callThrough().and.returnValue(rect); window.resizeBy(200, 200); window.dispatchEvent(new Event('resize')); - tick(); + tick(DEBOUNCE_TIME); contentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0] as HTMLElement; @@ -869,7 +870,7 @@ describe('igxOverlay', () => { // remove SimpleRefComponent HTML element from the DOM tree fixture.elementRef.nativeElement.parentElement.removeChild(fixture.elementRef.nativeElement); overlay.show(overlay.attach(fixture.elementRef)); - tick(); + tick(DEBOUNCE_TIME); const componentElement = fixture.nativeElement as HTMLElement; expect(componentElement).toBeDefined(); @@ -1390,7 +1391,7 @@ describe('igxOverlay', () => { fixture.detectChanges(); fixture.componentInstance.buttonElement.nativeElement.click(); - tick(); + tick(DEBOUNCE_TIME); fixture.detectChanges(); const wrapperElement = (fixture.nativeElement as HTMLElement) @@ -1488,7 +1489,7 @@ describe('igxOverlay', () => { overlay.show(overlay.attach(SimpleDynamicComponent)); overlay.show(overlay.attach(SimpleDynamicComponent)); - tick(); + tick(DEBOUNCE_TIME); const wrapperElements = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf; const wrapperElement1 = wrapperElements[0]; @@ -1532,7 +1533,7 @@ describe('igxOverlay', () => { const overlay = fixture.componentInstance.overlay; overlay.show(overlay.attach(SimpleDynamicComponent)); - tick(); + tick(DEBOUNCE_TIME); fixture.detectChanges(); // overlay container IS NOT a child of the debugElement (attached to body, not app-root) @@ -1660,67 +1661,71 @@ describe('igxOverlay', () => { }); // adding more than one component to show in igx-overlay: - it('Should render the component exactly on top of the previous one when adding a new instance with default settings.', () => { - const fixture = TestBed.createComponent(TopLeftOffsetComponent); - const overlay = fixture.componentInstance.overlay; - const overlaySettings: OverlaySettings = { - positionStrategy: new ConnectedPositioningStrategy() - }; - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - fixture.detectChanges(); + it('Should render the component exactly on top of the previous one when adding a new instance with default settings.', + fakeAsync(() => { + const fixture = TestBed.createComponent(TopLeftOffsetComponent); + const overlay = fixture.componentInstance.overlay; + const overlaySettings: OverlaySettings = { + positionStrategy: new ConnectedPositioningStrategy() + }; + overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + tick(DEBOUNCE_TIME); + fixture.detectChanges(); - const wrapperElements = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf; - const wrapperElement1 = wrapperElements[0]; - const wrapperElement2 = wrapperElements[1]; - const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement; - const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement; - const componentRect1 = componentElement1.getBoundingClientRect(); - const componentRect2 = componentElement2.getBoundingClientRect(); - expect(componentRect1.left).toEqual(0); - expect(componentRect1.left).toEqual(componentRect2.left); - expect(componentRect1.top).toEqual(0); - expect(componentRect1.top).toEqual(componentRect2.top); - expect(componentRect1.width).toEqual(componentRect2.width); - expect(componentRect1.height).toEqual(componentRect2.height); - }); + const wrapperElements = (fixture.nativeElement as HTMLElement) + .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf; + const wrapperElement1 = wrapperElements[0]; + const wrapperElement2 = wrapperElements[1]; + const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement; + const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement; + const componentRect1 = componentElement1.getBoundingClientRect(); + const componentRect2 = componentElement2.getBoundingClientRect(); + expect(componentRect1.left).toEqual(0); + expect(componentRect1.left).toEqual(componentRect2.left); + expect(componentRect1.top).toEqual(0); + expect(componentRect1.top).toEqual(componentRect2.top); + expect(componentRect1.width).toEqual(componentRect2.width); + expect(componentRect1.height).toEqual(componentRect2.height); + })); - it('Should render the component exactly on top of the previous one when adding a new instance with the same options.', () => { - const fixture = TestBed.createComponent(TopLeftOffsetComponent); - const x = 200; - const y = 300; + it('Should render the component exactly on top of the previous one when adding a new instance with the same options.', + fakeAsync(() => { + const fixture = TestBed.createComponent(TopLeftOffsetComponent); + const x = 200; + const y = 300; - const overlay = fixture.componentInstance.overlay; - const positionSettings: PositionSettings = { - horizontalDirection: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top, - horizontalStartPoint: HorizontalAlignment.Left, - verticalStartPoint: VerticalAlignment.Bottom, - }; - const overlaySettings: OverlaySettings = { - target: new Point(x, y), - positionStrategy: new ConnectedPositioningStrategy(positionSettings) - }; - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - fixture.detectChanges(); + const overlay = fixture.componentInstance.overlay; + const positionSettings: PositionSettings = { + horizontalDirection: HorizontalAlignment.Left, + verticalDirection: VerticalAlignment.Top, + horizontalStartPoint: HorizontalAlignment.Left, + verticalStartPoint: VerticalAlignment.Bottom, + }; + const overlaySettings: OverlaySettings = { + target: new Point(x, y), + positionStrategy: new ConnectedPositioningStrategy(positionSettings) + }; + overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + tick(DEBOUNCE_TIME); + fixture.detectChanges(); - const wrapperElements = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf; - const wrapperElement1 = wrapperElements[0]; - const wrapperElement2 = wrapperElements[1]; - const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement; - const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement; - const componentRect1 = componentElement1.getBoundingClientRect(); - const componentRect2 = componentElement2.getBoundingClientRect(); - expect(componentRect1.left).toEqual(x - componentRect1.width); - expect(componentRect1.left).toEqual(componentRect2.left); - expect(componentRect1.top).toEqual(y - componentRect1.height); - expect(componentRect1.top).toEqual(componentRect2.top); - expect(componentRect1.width).toEqual(componentRect2.width); - expect(componentRect1.height).toEqual(componentRect2.height); - }); + const wrapperElements = (fixture.nativeElement as HTMLElement) + .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL) as HTMLCollectionOf; + const wrapperElement1 = wrapperElements[0]; + const wrapperElement2 = wrapperElements[1]; + const componentElement1 = wrapperElement1.getElementsByTagName('component')[0] as HTMLElement; + const componentElement2 = wrapperElement2.getElementsByTagName('component')[0] as HTMLElement; + const componentRect1 = componentElement1.getBoundingClientRect(); + const componentRect2 = componentElement2.getBoundingClientRect(); + expect(componentRect1.left).toEqual(x - componentRect1.width); + expect(componentRect1.left).toEqual(componentRect2.left); + expect(componentRect1.top).toEqual(y - componentRect1.height); + expect(componentRect1.top).toEqual(componentRect2.top); + expect(componentRect1.width).toEqual(componentRect2.width); + expect(componentRect1.height).toEqual(componentRect2.height); + })); it(`Should change the state of the component to closed when reaching threshold and closing scroll strategy is used.`, fakeAsync(() => { @@ -3010,7 +3015,7 @@ describe('igxOverlay', () => { }; overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - tick(); + tick(DEBOUNCE_TIME); let wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; @@ -3020,7 +3025,7 @@ describe('igxOverlay', () => { tick(); wrapperElement = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; + .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual('hidden'); })); @@ -3032,14 +3037,14 @@ describe('igxOverlay', () => { }; overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - tick(); + tick(DEBOUNCE_TIME); let wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); UIInteractions.triggerKeyDownEvtUponElem('Escape', document); - tick(); + tick(DEBOUNCE_TIME); wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; @@ -3110,26 +3115,26 @@ describe('igxOverlay', () => { }; overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - tick(); + tick(DEBOUNCE_TIME); let wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); UIInteractions.triggerKeyDownEvtUponElem('Enter', document); - tick(); + tick(DEBOUNCE_TIME); wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); UIInteractions.triggerKeyDownEvtUponElem('a', document); - tick(); + tick(DEBOUNCE_TIME); wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); UIInteractions.triggerKeyDownEvtUponElem('ArrowUp', document); - tick(); + tick(DEBOUNCE_TIME); wrapperElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual(''); @@ -3137,7 +3142,7 @@ describe('igxOverlay', () => { UIInteractions.triggerKeyDownEvtUponElem('Escape', document); tick(); wrapperElement = (fixture.nativeElement as HTMLElement) - .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; + .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER)[0] as HTMLElement; expect(wrapperElement.style.visibility).toEqual('hidden'); })); @@ -3206,7 +3211,7 @@ describe('igxOverlay', () => { expect(fixture.componentInstance.customComponent.nativeElement.getBoundingClientRect().height).toEqual(280); fixture.componentInstance.buttonElement.nativeElement.click(); tick(); - const componentElement =(fixture.nativeElement as HTMLElement) + const componentElement = (fixture.nativeElement as HTMLElement) .parentElement.getElementsByClassName('customList')[0] as HTMLElement; expect(componentElement).toBeDefined(); expect(componentElement.style.width).toEqual('100%'); @@ -4019,12 +4024,12 @@ describe('igxOverlay', () => { expect(overlay.closing.emit).toHaveBeenCalledTimes(1); expect(overlay.closed.emit).toHaveBeenCalledTimes(1); expect(overlay.closing.emit) - .toHaveBeenCalledWith({ - id: callId, - componentRef: jasmine.any(ComponentRef) as any, - cancel: false, - event: undefined - }); + .toHaveBeenCalledWith({ + id: callId, + componentRef: jasmine.any(ComponentRef) as any, + cancel: false, + event: undefined + }); overlay.detachAll(); overlaySettings.excludeFromOutsideClick = []; @@ -4040,12 +4045,12 @@ describe('igxOverlay', () => { expect(overlay.closing.emit).toHaveBeenCalledTimes(2); expect(overlay.closed.emit).toHaveBeenCalledTimes(2); expect(overlay.closing.emit) - .toHaveBeenCalledWith({ - id: callId, - componentRef: jasmine.any(ComponentRef) as any, - cancel: false, - event: jasmine.any(Event) as any - }); + .toHaveBeenCalledWith({ + id: callId, + componentRef: jasmine.any(ComponentRef) as any, + cancel: false, + event: jasmine.any(Event) as any + }); })); }); diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts index 36b05b656d6..9c3452f679a 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts @@ -111,7 +111,7 @@ export class IgxOverlayService implements OnDestroy { * } * ``` */ - public contentAppended = new EventEmitter(); + public contentAppended = new EventEmitter(); /** * Emitted just before the overlay animation start. @@ -345,7 +345,6 @@ export class IgxOverlayService implements OnDestroy { this.addOutsideClickListener(info); this.addResizeHandler(); this.addCloseOnEscapeListener(info); - this.addModalClasses(info); this.buildAnimationPlayers(info); return info.id; } @@ -708,6 +707,7 @@ export class IgxOverlayService implements OnDestroy { // to eliminate flickering show the element just before animation start info.wrapperElement.style.visibility = ''; info.visible = true; + this.addModalClasses(info); info.openAnimationPlayer.play(); } @@ -735,6 +735,7 @@ export class IgxOverlayService implements OnDestroy { this.animationStarting.emit({ id: info.id, animationPlayer: info.closeAnimationPlayer, animationType: 'close' }); info.event = event; + this.removeModalClasses(info); info.closeAnimationPlayer.play(); } @@ -883,7 +884,17 @@ export class IgxOverlayService implements OnDestroy { const wrapperElement = info.elementRef.nativeElement.parentElement.parentElement; wrapperElement.classList.remove('igx-overlay__wrapper'); this.applyAnimationParams(wrapperElement, info.settings.positionStrategy.settings.openAnimation); - wrapperElement.classList.add('igx-overlay__wrapper--modal'); + requestAnimationFrame(() => { + wrapperElement.classList.add('igx-overlay__wrapper--modal'); + }); + } + } + + private removeModalClasses(info: OverlayInfo) { + if (info.settings.modal) { + const wrapperElement = info.elementRef.nativeElement.parentElement.parentElement; + wrapperElement.classList.remove('igx-overlay__wrapper--modal'); + wrapperElement.classList.add('igx-overlay__wrapper'); } } @@ -914,7 +925,7 @@ export class IgxOverlayService implements OnDestroy { } } - private openAnimationDone(info: OverlayInfo){ + private openAnimationDone(info: OverlayInfo) { this.opened.emit({ id: info.id, componentRef: info.componentRef }); if (info.openAnimationPlayer) { info.openAnimationPlayer.reset(); @@ -930,7 +941,7 @@ export class IgxOverlayService implements OnDestroy { } } - private closeAnimationDone(info: OverlayInfo){ + private closeAnimationDone(info: OverlayInfo) { this.closeDone(info); if (info.closeAnimationPlayer) { info.closeAnimationPlayer.reset(); diff --git a/src/app/overlay/overlay.sample.html b/src/app/overlay/overlay.sample.html index fe223423e48..8a61cb89f69 100644 --- a/src/app/overlay/overlay.sample.html +++ b/src/app/overlay/overlay.sample.html @@ -70,6 +70,10 @@ + + + +
diff --git a/src/app/overlay/overlay.sample.ts b/src/app/overlay/overlay.sample.ts index 9f4915991c8..92a323848bb 100644 --- a/src/app/overlay/overlay.sample.ts +++ b/src/app/overlay/overlay.sample.ts @@ -11,7 +11,8 @@ import { NoOpScrollStrategy, ElasticPositionStrategy, IgxDragDirective, - ContainerPositionStrategy + ContainerPositionStrategy, + IAnimationParams } from 'igniteui-angular'; @Component({ @@ -48,6 +49,7 @@ export class OverlaySampleComponent implements OnInit { public closeOnOutsideClick = true; public modal = true; public useOutlet = false; + public animationLength = 300; // in ms private xAddition = 0; private yAddition = 0; @@ -341,6 +343,10 @@ export class OverlaySampleComponent implements OnInit { this.cdr.detectChanges(); this.onChange2(); this._overlaySettings.target = this.button.nativeElement; + (this._overlaySettings.positionStrategy.settings.openAnimation.options.params as IAnimationParams).duration + = `${this.animationLength}ms`; + (this._overlaySettings.positionStrategy.settings.closeAnimation.options.params as IAnimationParams).duration + = `${this.animationLength}ms`; } this.igxDropDown.toggle(this._overlaySettings); } From 02d1c77bd761f2bae04e9c3b3437204e136c1194 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 11 Oct 2021 11:00:16 +0300 Subject: [PATCH 16/43] chore(*): update cell merging with issue link --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 6187078297f..248ef95c4fe 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -14,7 +14,7 @@ ## Going down the road 1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700) -2. Grid Cell Merging +2. Grid Cell Merging #3514 3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696) 4. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554) 5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556) From dc629e228bd85ffc50316b6b6fe8ab07e9850d41 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 11 Oct 2021 11:00:38 +0300 Subject: [PATCH 17/43] Update ROADMAP.md --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 248ef95c4fe..10171a2cac3 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -14,7 +14,7 @@ ## Going down the road 1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700) -2. Grid Cell Merging #3514 +2. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514) 3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696) 4. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554) 5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556) From c1bdc458c3ed73bd7b0ae7e307ce772c655c8f7b Mon Sep 17 00:00:00 2001 From: igdmdimitrov Date: Mon, 11 Oct 2021 13:20:04 +0300 Subject: [PATCH 18/43] fix(esf): add empty filter to filtering event --- .../lib/grids/filtering/grid-filtering.service.ts | 4 ++-- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts index 209e73f7b36..fbe64f992a1 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts @@ -277,9 +277,10 @@ export class IgxFilteringService implements OnDestroy { } } + const emptyFilter = new FilteringExpressionsTree(null, field); const onFilteringEventArgs: IFilteringEventArgs = { owner: this.grid, - filteringExpressions: null, + filteringExpressions: emptyFilter, cancel: false }; this.grid.filtering.emit(onFilteringEventArgs); @@ -292,7 +293,6 @@ export class IgxFilteringService implements OnDestroy { this.clear_filter(field); // Wait for the change detection to update filtered data through the pipes and then emit the event. - const emptyFilter = new FilteringExpressionsTree(null, field); requestAnimationFrame(() => this.grid.filteringDone.emit(emptyFilter)); if (field) { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index b53b585e91d..39ca93a5c88 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -485,9 +485,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { GridFunctions.clickFilterCellChip(fix, columnName); GridFunctions.resetFilterRow(fix); - expect(grid.filtering.emit).toHaveBeenCalledWith({ owner: grid, cancel: false, filteringExpressions: null }); - expect(grid.filtering.emit).toHaveBeenCalledTimes(2); const emptyFilter = new FilteringExpressionsTree(null, columnName); + expect(grid.filtering.emit).toHaveBeenCalledWith({ owner: grid, cancel: false, filteringExpressions: emptyFilter }); + expect(grid.filtering.emit).toHaveBeenCalledTimes(2); expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter); expect(grid.filteringDone.emit).toHaveBeenCalledTimes(2); @@ -513,9 +513,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { tick(100); fix.detectChanges(); - const args = { owner: grid, cancel: false, filteringExpressions: null }; - expect(grid.filtering.emit).toHaveBeenCalledWith(args); const emptyFilter = new FilteringExpressionsTree(null, columnName); + const args = { owner: grid, cancel: false, filteringExpressions: emptyFilter }; + expect(grid.filtering.emit).toHaveBeenCalledWith(args); expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter); })); @@ -852,10 +852,10 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { expect(grid.rowList.length).toEqual(8); - args.filteringExpressions = null; + const emptyFilter = new FilteringExpressionsTree(null, columnName); + args.filteringExpressions = emptyFilter; expect(grid.filtering.emit).toHaveBeenCalledWith(args); expect(grid.filtering.emit).toHaveBeenCalledTimes(2); - const emptyFilter = new FilteringExpressionsTree(null, columnName); expect(grid.filteringDone.emit).toHaveBeenCalledWith(emptyFilter); expect(grid.filteringDone.emit).toHaveBeenCalledTimes(2); })); From 5348e6702495afe8fc8f00efcdfd351cb63351df Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 11 Oct 2021 16:37:56 +0300 Subject: [PATCH 19/43] docs(readme): adding app builder links --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index a1b26d8ee06..ad12d325d9f 100644 --- a/README.md +++ b/README.md @@ -25,12 +25,10 @@ Ignite UI for Angular arrives with an extensive library of data visualizations t Some of the Angular chart types included are: [Polar chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart), [Pie chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart), [Donut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/donut-chart), [Bubble chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bubble-chart), [Area chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart), [Treemap chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/treemap-chart), and many others. And if you look for [Angular financial charts](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart), with Ignite UI you can get the same features as the ones you come across with Google Finance and Yahoo Finance Charts. -### [**Install our VSCode Toolbox extension**](https://marketplace.visualstudio.com/items?itemName=Infragistics.igniteui-angular-toolbox) -![](https://dl.infragistics.com/tools/extensions/angular-toolbox/toolbox.gif) -### [**Install our VSCode tooltip extension**](https://marketplace.visualstudio.com/items?itemName=Infragistics.igniteui-angular-tooltips) -![](https://dl.infragistics.com/tools/extensions/angular-tooltips/tooltip_preview.gif) - -**IMPORTANT** The repository has been renamed from `igniteui-js-blocks` to `igniteui-angular`. Read more on our new [naming convention](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-github-repo-name-changes). +### Build Apps with Ignite UI for Angular faster using our [App Builder](https://www.infragistics.com/products/indigo-design/app-builder) +![5661 drag drop](https://user-images.githubusercontent.com/1472513/132676597-09eec222-42f7-40ff-bd0d-fe8b91fd0c1c.gif) +### Generate your Angular code projects using the [App Builder](https://www.infragistics.com/products/indigo-design/app-builder) +![0871 change-preview-code](https://user-images.githubusercontent.com/1472513/132676607-3851f308-416b-45d6-99bc-c34266b55c44.gif) ### Current List of Components Include: From 791b9a5fcfb8dd3f696d3c3771cdeea1843d6247 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 11 Oct 2021 17:07:26 +0300 Subject: [PATCH 20/43] refactor(icon-service): cache svg icons as text (#10202) * refactor(icon-service): cache svg icons as text * refactor(icon): return SafeHtml from IconService * spec(icon-service): update * refactor(icon): remove lifecycle hook changes * docs(icon, icon-service): update after changes * docs(icon-service): update * refactor(icon): update template and theme * chore(*): update svg assets * refactor(icon-service): simplify family initialization * spec(icon-service): fix failing test * refactor(advanced-filtering): show friendly name for igx-select text * refactor(excel-filter): use condition friendly name * refactor(icon, icon-service): simplify code * test(grid): dont include the svg icon in the query for dropdown item * refactor(icon, icon service): cache svg icons as SafeHtml * refactor(icon): replace svg wrapper with a div * refactor(demos): add a new test icon * refactor(icon): set svg and div to display block Co-authored-by: Hristo Anastasov Co-authored-by: Hristo --- .../styles/components/icon/_icon-theme.scss | 6 +- .../advanced-filtering-dialog.component.html | 2 +- ...el-style-default-expression.component.html | 2 +- ...xcel-style-default-expression.component.ts | 4 + .../src/lib/icon/icon.component.html | 4 +- .../src/lib/icon/icon.component.ts | 29 ++++--- .../src/lib/icon/icon.service.spec.ts | 35 ++------ .../src/lib/icon/icon.service.ts | 82 +++++-------------- .../src/lib/test-utils/grid-functions.spec.ts | 5 +- src/app/icon/icon.sample.html | 1 + src/app/icon/icon.sample.ts | 1 + src/assets/svg/filtering/contains.svg | 19 +---- src/assets/svg/filtering/copy.svg | 3 + src/assets/svg/filtering/does_not_contain.svg | 21 +---- src/assets/svg/filtering/does_not_equal.svg | 19 +---- src/assets/svg/filtering/ends_with.svg | 19 +---- src/assets/svg/filtering/equals.svg | 19 +---- src/assets/svg/filtering/is_empty.svg | 19 +---- src/assets/svg/filtering/starts_with.svg | 19 +---- 19 files changed, 70 insertions(+), 239 deletions(-) create mode 100644 src/assets/svg/filtering/copy.svg diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss index 5984304189d..00167f8686f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss @@ -64,14 +64,12 @@ font-size: $igx-icon-font-size; color: --var($theme, 'color'); + div, svg { + display: block; width: inherit; height: inherit; fill: currentColor; - - use { - pointer-events: none; - } } } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html index 918d4a09464..56b2d61ad00 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html @@ -162,7 +162,7 @@
- +
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html index 53f40145c0f..ba9f88ac028 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html @@ -8,7 +8,7 @@ filter_list - +
{{translateCondition(condition)}} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts index 878b7e8df9a..2a48c59e02a 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.ts @@ -155,6 +155,10 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit { return this.column.filters.condition(value); } + public getConditionFriendlyName(name: string): string { + return this.grid.resourceStrings[`igx_grid_filter_${name}`] || name; + } + public onValuesInput(eventArgs) { this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value); } diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.html b/projects/igniteui-angular/src/lib/icon/icon.component.html index 665287d1806..09a4d7d7cf1 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.html +++ b/projects/igniteui-angular/src/lib/icon/icon.component.html @@ -5,9 +5,7 @@ - - - +
diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.ts b/projects/igniteui-angular/src/lib/icon/icon.component.ts index d3354ebb414..b1f83eb65da 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.component.ts @@ -3,6 +3,7 @@ import { IgxIconService } from './icon.service'; import { first, takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { DeprecateProperty } from '../core/deprecateDecorators'; +import { SafeHtml } from '@angular/platform-browser'; /** * Icon provides a way to include material icons to markup @@ -114,16 +115,19 @@ export class IgxIconComponent implements OnInit, OnDestroy { private destroy$ = new Subject(); - constructor(public el: ElementRef, - private iconService: IgxIconService, - private ref: ChangeDetectorRef) { + constructor( + public el: ElementRef, + private iconService: IgxIconService, + private ref: ChangeDetectorRef, + ) { this.family = this.iconService.defaultFamily; this.iconService.registerFamilyAlias('material', 'material-icons'); - this.iconService.iconLoaded.pipe( - first(e => e.name === this.name && e.family === this.family), - takeUntil(this.destroy$) - ) - .subscribe(() => this.ref.detectChanges()); + this.iconService.iconLoaded + .pipe( + first((e) => e.name === this.name && e.family === this.family), + takeUntil(this.destroy$) + ) + .subscribe(() => this.ref.detectChanges()); } /** @@ -226,21 +230,20 @@ export class IgxIconComponent implements OnInit, OnDestroy { } /** - * An accessor that returns the key of the SVG image. - * The key consists of the font-family and the name separated by underscore. + * An accessor that returns the underlying SVG image as SafeHtml. * * @example * ```typescript * @ViewChild("MyIcon") * public icon: IgxIconComponent; * ngAfterViewInit() { - * let svgKey = this.icon.getSvgKey; + * let svg: SafeHtml = this.icon.getSvg; * } * ``` */ - public get getSvgKey(): string { + public get getSvg(): SafeHtml { if (this.iconService.isSvgIconCached(this.name, this.family)) { - return '#' + this.iconService.getSvgIconKey(this.name, this.family); + return this.iconService.getSvgIcon(this.name, this.family); } return null; diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts b/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts index 58e667387e7..89e9cdff673 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts @@ -1,6 +1,5 @@ -import { TestBed } from '@angular/core/testing'; +import { TestBed, fakeAsync } from '@angular/core/testing'; import { IgxIconService } from './icon.service'; -import { DOCUMENT } from '@angular/common'; import { configureTestSuite } from '../test-utils/configure-suite'; import { first } from 'rxjs/operators'; @@ -53,13 +52,11 @@ describe('Icon Service', () => { expect(iconService.familyClassName(ALIAS)).toBe(MY_FONT); }); - it('should add custom svg icon from url', () => { + it('should add custom svg icon from url', fakeAsync((done) => { const iconService = TestBed.inject(IgxIconService) as IgxIconService; - const document = TestBed.inject(DOCUMENT); const name = 'test'; const family = 'svg-icons'; - const iconKey = family + '_' + name; spyOn(XMLHttpRequest.prototype, 'open').and.callThrough(); spyOn(XMLHttpRequest.prototype, 'send'); @@ -69,25 +66,20 @@ describe('Icon Service', () => { expect(XMLHttpRequest.prototype.open).toHaveBeenCalledTimes(1); expect(XMLHttpRequest.prototype.send).toHaveBeenCalledTimes(1); - const svgElement = document.querySelector(`svg[id='${iconKey}']`); - expect(svgElement).toBeDefined(); - }); + iconService.iconLoaded.pipe().subscribe(() => { + expect(iconService.isSvgIconCached(name, family)).toBeTruthy(); + done(); + }); + })); it('should add custom svg icon from text', () => { const iconService = TestBed.inject(IgxIconService) as IgxIconService; - const document = TestBed.inject(DOCUMENT); const name = 'test'; const family = 'svg-icons'; - const iconKey = family + '_' + name; iconService.addSvgIconFromText(name, svgText, family); - expect(iconService.isSvgIconCached(name, family)).toBeTruthy(); - expect(iconService.getSvgIconKey(name, family)).toEqual(iconKey); - - const svgElement = document.querySelector(`svg[id='${iconKey}']`); - expect(svgElement).toBeDefined(); }); it('should emit loading event for a custom svg icon from url', done => { @@ -113,17 +105,4 @@ describe('Icon Service', () => { iconService.addSvgIcon(name, 'test.svg', family); }); - - it('should create svg container inside the body', () => { - const iconService = TestBed.inject(IgxIconService) as IgxIconService; - const document = TestBed.inject(DOCUMENT); - - const name = 'test'; - const family = 'svg-icons'; - - iconService.addSvgIconFromText(name, svgText, family); - - const svgContainer = document.body.querySelector('.igx-svg-container'); - expect(svgContainer).not.toBeNull(); - }); }); diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.ts b/projects/igniteui-angular/src/lib/icon/icon.service.ts index 12f5e426d6e..ca22d4b463a 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.service.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.service.ts @@ -1,5 +1,5 @@ -import { Injectable, SecurityContext, Inject, OnDestroy, Optional } from '@angular/core'; -import { DomSanitizer } from '@angular/platform-browser'; +import { Injectable, SecurityContext, Inject, Optional } from '@angular/core'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { DOCUMENT } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { Observable, Subject } from 'rxjs'; @@ -32,7 +32,7 @@ export interface IgxIconLoadedEvent { @Injectable({ providedIn: 'root' }) -export class IgxIconService implements OnDestroy { +export class IgxIconService { /** * Observable that emits when an icon is successfully loaded * through a HTTP request. @@ -46,9 +46,9 @@ export class IgxIconService implements OnDestroy { private _family = 'material-icons'; private _familyAliases = new Map(); - private _svgContainer: HTMLElement; - private _cachedSvgIcons: Set = new Set(); + private _cachedSvgIcons = new Map>(); private _iconLoaded = new Subject(); + private _domParser = new DOMParser(); constructor( @Optional() private _sanitizer: DomSanitizer, @@ -58,14 +58,6 @@ export class IgxIconService implements OnDestroy { this.iconLoaded = this._iconLoaded.asObservable(); } - /** - * @hidden - * @internal - */ - public ngOnDestroy(): void { - this.cleanSvgContainer(); - } - /** * Returns the default font-family. * ```typescript @@ -162,18 +154,22 @@ export class IgxIconService implements OnDestroy { * ``` */ public isSvgIconCached(name: string, family: string = ''): boolean { - const iconKey = this.getSvgIconKey(name, family); - return this._cachedSvgIcons.has(iconKey); + if(this._cachedSvgIcons.has(family)) { + const familyRegistry = this._cachedSvgIcons.get(family) as Map; + return familyRegistry.has(name); + } + + return false; } /** - * Returns the key of a cached SVG image. + * Returns the cached SVG image as string. * ```typescript - * const svgIconKey = this.iconService.getSvgIconKey('aruba', 'svg-flags'); + * const svgIcon = this.iconService.getSvgIcon('aruba', 'svg-flags'); * ``` */ - public getSvgIconKey(name: string, family: string = '') { - return family + '_' + name; + public getSvgIcon(name: string, family: string = '') { + return this._cachedSvgIcons.get(family)?.get(name); } /** @@ -184,57 +180,23 @@ export class IgxIconService implements OnDestroy { return req; } - /** - * @hidden - */ - private cleanSvgContainer() { - const container = this._document.documentElement.querySelector('.igx-svg-container'); - - while (container.firstChild) { - container.removeChild(container.firstChild); - } - } - /** * @hidden */ private cacheSvgIcon(name: string, value: string, family: string = '') { if (name && value) { - this.ensureSvgContainerCreated(); + const doc = this._domParser.parseFromString(value, 'image/svg+xml'); + const svg = doc.querySelector('svg') as SVGElement; - const div = this._document.createElement('DIV'); - div.innerHTML = value; - const svg = div.querySelector('svg') as SVGElement; + if (!this._cachedSvgIcons.has(family)) { + this._cachedSvgIcons.set(family, new Map()); + } if (svg) { - const iconKey = this.getSvgIconKey(name, family); - - svg.setAttribute('id', iconKey); svg.setAttribute('fit', ''); svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); - svg.setAttribute('focusable', 'false'); // Disable IE11 default behavior to make SVGs focusable. - - if (this.isSvgIconCached(name, family)) { - const oldChild = this._svgContainer.querySelector(`svg[id='${iconKey}']`); - this._svgContainer.removeChild(oldChild); - } - - this._svgContainer.appendChild(svg); - this._cachedSvgIcons.add(iconKey); - } - } - } - - /** - * @hidden - */ - private ensureSvgContainerCreated() { - if (!this._svgContainer) { - this._svgContainer = this._document.documentElement.querySelector('.igx-svg-container'); - if (!this._svgContainer) { - this._svgContainer = this._document.createElement('DIV'); - this._svgContainer.classList.add('igx-svg-container'); - this._document.body.appendChild(this._svgContainer); + const safeSvg = this._sanitizer.bypassSecurityTrustHtml(svg.outerHTML); + this._cachedSvgIcons.get(family).set(name, safeSvg); } } } diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts index c822dd4d2d9..35de81a1d9d 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts @@ -596,8 +596,9 @@ export class GridFunctions { const ddItems = ddList.nativeElement.children; let i; for (i = 0; i < ddItems.length; i++) { - if (ddItems[i].textContent === cond) { - ddItems[i].click(); + const ddItem = ddItems[i].querySelector('.igx-grid__filtering-dropdown-items span'); + if (ddItem.textContent === cond) { + ddItem.click(); tick(100); return; } diff --git a/src/app/icon/icon.sample.html b/src/app/icon/icon.sample.html index 3babb750cff..625b60acf75 100644 --- a/src/app/icon/icon.sample.html +++ b/src/app/icon/icon.sample.html @@ -86,6 +86,7 @@

Using SVG Icons

+
diff --git a/src/app/icon/icon.sample.ts b/src/app/icon/icon.sample.ts index 0b2174a9d52..341e3427249 100644 --- a/src/app/icon/icon.sample.ts +++ b/src/app/icon/icon.sample.ts @@ -19,5 +19,6 @@ export class IconSampleComponent implements OnInit { this._iconService.addSvgIcon('equals', '/assets/svg/filtering/equals.svg', 'svg-flags'); this._iconService.addSvgIcon('is_empty', '/assets/svg/filtering/is_empty.svg', 'svg-flags'); this._iconService.addSvgIcon('starts_with', '/assets/svg/filtering/starts_with.svg', 'svg-flags'); + this._iconService.addSvgIcon('copy', '/assets/svg/filtering/copy.svg', 'svg-flags'); } } diff --git a/src/assets/svg/filtering/contains.svg b/src/assets/svg/filtering/contains.svg index a69a25741ca..67ca24a7550 100644 --- a/src/assets/svg/filtering/contains.svg +++ b/src/assets/svg/filtering/contains.svg @@ -1,21 +1,4 @@ - - Icons/filter/contains - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/copy.svg b/src/assets/svg/filtering/copy.svg new file mode 100644 index 00000000000..9837dbd779f --- /dev/null +++ b/src/assets/svg/filtering/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/filtering/does_not_contain.svg b/src/assets/svg/filtering/does_not_contain.svg index 75e0c0a9a2c..ea539ea543e 100644 --- a/src/assets/svg/filtering/does_not_contain.svg +++ b/src/assets/svg/filtering/does_not_contain.svg @@ -1,21 +1,4 @@ - - - Icons/filter/does not contain - Created with Sketch. + - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/does_not_equal.svg b/src/assets/svg/filtering/does_not_equal.svg index 585f8475ac7..3f45e895704 100644 --- a/src/assets/svg/filtering/does_not_equal.svg +++ b/src/assets/svg/filtering/does_not_equal.svg @@ -1,21 +1,4 @@ - - Icons/filter/does not equal - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/ends_with.svg b/src/assets/svg/filtering/ends_with.svg index 6e0ce79bf28..eac2e5e66ba 100644 --- a/src/assets/svg/filtering/ends_with.svg +++ b/src/assets/svg/filtering/ends_with.svg @@ -1,21 +1,4 @@ - - Icons/filter/ends with - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/equals.svg b/src/assets/svg/filtering/equals.svg index 47cf89046e6..6123793ff4b 100644 --- a/src/assets/svg/filtering/equals.svg +++ b/src/assets/svg/filtering/equals.svg @@ -1,21 +1,4 @@ - - Icons/filter/equals - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/is_empty.svg b/src/assets/svg/filtering/is_empty.svg index dd271bcbbd9..5a8e83cb64b 100644 --- a/src/assets/svg/filtering/is_empty.svg +++ b/src/assets/svg/filtering/is_empty.svg @@ -1,21 +1,4 @@ - - Icons/filter/is empty - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + diff --git a/src/assets/svg/filtering/starts_with.svg b/src/assets/svg/filtering/starts_with.svg index c5e44e0b699..317824785a2 100644 --- a/src/assets/svg/filtering/starts_with.svg +++ b/src/assets/svg/filtering/starts_with.svg @@ -1,21 +1,4 @@ - - Icons/filter/starts with - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file + From 1e36b869451eec1f08002f8ef6638709d922f192 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 11 Oct 2021 18:25:45 +0300 Subject: [PATCH 21/43] fix(icon-service): can't register icon w/o family --- projects/igniteui-angular/src/lib/icon/icon.service.ts | 10 ++++++---- src/app/icon/icon.sample.html | 2 +- src/app/icon/icon.sample.ts | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.ts b/projects/igniteui-angular/src/lib/icon/icon.service.ts index ca22d4b463a..bab19ccea38 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.service.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.service.ts @@ -105,7 +105,7 @@ export class IgxIconService { * this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags'); * ``` */ - public addSvgIcon(name: string, url: string, family: string = '') { + public addSvgIcon(name: string, url: string, family = this._family) { if (name && url) { const safeUrl = this._sanitizer.bypassSecurityTrustResourceUrl(url); if (!safeUrl) { @@ -154,8 +154,9 @@ export class IgxIconService { * ``` */ public isSvgIconCached(name: string, family: string = ''): boolean { - if(this._cachedSvgIcons.has(family)) { - const familyRegistry = this._cachedSvgIcons.get(family) as Map; + const familyClassName = this.familyClassName(family); + if(this._cachedSvgIcons.has(familyClassName)) { + const familyRegistry = this._cachedSvgIcons.get(familyClassName) as Map; return familyRegistry.has(name); } @@ -169,7 +170,8 @@ export class IgxIconService { * ``` */ public getSvgIcon(name: string, family: string = '') { - return this._cachedSvgIcons.get(family)?.get(name); + const familyClassName = this.familyClassName(family); + return this._cachedSvgIcons.get(familyClassName)?.get(name); } /** diff --git a/src/app/icon/icon.sample.html b/src/app/icon/icon.sample.html index 625b60acf75..11df8cbd4a9 100644 --- a/src/app/icon/icon.sample.html +++ b/src/app/icon/icon.sample.html @@ -86,7 +86,7 @@

Using SVG Icons

- +
diff --git a/src/app/icon/icon.sample.ts b/src/app/icon/icon.sample.ts index 341e3427249..743d15d4b05 100644 --- a/src/app/icon/icon.sample.ts +++ b/src/app/icon/icon.sample.ts @@ -19,6 +19,6 @@ export class IconSampleComponent implements OnInit { this._iconService.addSvgIcon('equals', '/assets/svg/filtering/equals.svg', 'svg-flags'); this._iconService.addSvgIcon('is_empty', '/assets/svg/filtering/is_empty.svg', 'svg-flags'); this._iconService.addSvgIcon('starts_with', '/assets/svg/filtering/starts_with.svg', 'svg-flags'); - this._iconService.addSvgIcon('copy', '/assets/svg/filtering/copy.svg', 'svg-flags'); + this._iconService.addSvgIcon('copy', '/assets/svg/filtering/copy.svg'); } } From 64690d3e3369c3691c457b979310f192f83365f4 Mon Sep 17 00:00:00 2001 From: plamenamiteva Date: Mon, 11 Oct 2021 18:57:39 +0300 Subject: [PATCH 22/43] fix(overlay): fix overlay closing animation duration --- projects/igniteui-angular/src/lib/services/overlay/overlay.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts index 9c3452f679a..e97f1a6081a 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts @@ -745,9 +745,6 @@ export class IgxOverlayService implements OnDestroy { wrapperElement.style.transitionDuration = '0ms'; return; } - if (animationOptions.type === AnimationMetadataType.AnimateRef) { - animationOptions = (animationOptions as AnimationAnimateRefMetadata).animation; - } if (!animationOptions.options || !animationOptions.options.params) { return; } @@ -893,6 +890,7 @@ export class IgxOverlayService implements OnDestroy { private removeModalClasses(info: OverlayInfo) { if (info.settings.modal) { const wrapperElement = info.elementRef.nativeElement.parentElement.parentElement; + this.applyAnimationParams(wrapperElement, info.settings.positionStrategy.settings.closeAnimation); wrapperElement.classList.remove('igx-overlay__wrapper--modal'); wrapperElement.classList.add('igx-overlay__wrapper'); } From 13f2c8cec13ce4260e19038acf9ea59890d81593 Mon Sep 17 00:00:00 2001 From: viktorkombov Date: Tue, 12 Oct 2021 09:59:23 +0300 Subject: [PATCH 23/43] fix(grid): update extractDataFromSelection method --- projects/igniteui-angular/src/lib/grids/grid-base.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 11efbf25c29..ad1e1d6716b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6942,7 +6942,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements // eslint-disable-next-line prefer-const for (let [row, set] of selectionMap) { - row = this.paginator ? row + (this.paginator.perPage * this.paginator.page) : row; + row = this.paginator && source === this.filteredSortedData ? row + (this.paginator.perPage * this.paginator.page) : row; row = isRemote ? row - this.virtualizationState.startIndex : row; if (!source[row] || source[row].detailsData !== undefined) { continue; From 5687ab5f9e18611a3881c1c71eb869d50968dbb8 Mon Sep 17 00:00:00 2001 From: Plamena Miteva Date: Tue, 12 Oct 2021 13:16:10 +0300 Subject: [PATCH 24/43] feat(dialog): update dialog's show/hide animations to fadeIn/fadeOut #9516 (#9847) --- CHANGELOG.md | 18 +++++++++++++++++- .../src/lib/dialog/dialog.component.ts | 7 +++---- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ea9fff52d53..e77f05e9e23 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,23 @@ All notable changes for each version of this project will be documented in this ### New Features - `IgxCsvExporterService`, `IgxExcelExporterService` - - Exporter services are no longer required to be provided in the application since they are now injected on a root level. + - Exporter services are no longer required to be provided in the application since they are now injected on a root level. + +### General + +- `IgxDialog` + - **Breaking Change** - The default positionSettings open/close animation has been changed to `fadeIn`/`fadeOut`. The open/close animation can be set through the position settings, e.g. change the animation to the previously default open/close animation: + + ```typescript + import { slideInBottom, slideOutTop } from 'igniteui-angular'; + + @ViewChild('alert', { static: true }) public alert: IgxDialogComponent; + public newPositionSettings: PositionSettings = { + openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }), + closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)'} }) + }; + this.alert.positionSettings = this.newPositionSettings; + ``` ## 12.2.1 diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index 772df61db2f..b2d4d201291 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -1,4 +1,3 @@ -import { useAnimation } from '@angular/animations'; import { CommonModule } from '@angular/common'; import { Component, @@ -22,7 +21,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive'; import { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.directives'; import { IgxToggleModule, IgxToggleDirective } from '../directives/toggle/toggle.directive'; import { OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, PositionSettings } from '../services/public_api'; -import { slideInBottom, slideOutTop } from '../animations/slide/index'; +import {fadeIn, fadeOut} from '../animations/fade/index'; import { IgxFocusModule } from '../directives/focus/focus.directive'; import { CancelableEventArgs, IBaseEventArgs } from '../core/utils'; @@ -459,8 +458,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After protected destroy$ = new Subject(); private _positionSettings: PositionSettings = { - openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }), - closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } }) + openAnimation: fadeIn, + closeAnimation: fadeOut }; private _overlayDefaultSettings: OverlaySettings; From 37b878896f43b1466600d48af3426f81e9db58fd Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Wed, 13 Oct 2021 14:21:17 +0300 Subject: [PATCH 25/43] feat(IColumnState): add disableHiding property --- projects/igniteui-angular/src/lib/grids/state.directive.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts index 133e2810414..5d6f935dc85 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.ts @@ -79,6 +79,7 @@ export interface IColumnState { searchable: boolean; columnGroup: boolean; parent: any; + disableHiding: boolean; } export type GridFeatures = keyof IGridStateOptions; @@ -186,7 +187,8 @@ export class IgxGridStateDirective { searchable: c.searchable, selectable: c.selectable, parent: c.parent ? c.parent.header : null, - columnGroup: c.columnGroup + columnGroup: c.columnGroup, + disableHiding: c.disableHiding })); return { columns: gridColumns }; }, From 8d94d7ad1138cb751329d7cd2fb77088b607cc58 Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Wed, 13 Oct 2021 15:09:05 +0300 Subject: [PATCH 26/43] test(IgxGridStateComponent): add disableHiding to tests --- .../src/lib/grids/state.directive.spec.ts | 10 +++++----- .../src/lib/grids/state.treegrid.spec.ts | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index d2612e33241..01edca33b93 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -77,7 +77,7 @@ describe('IgxGridState - input properties #grid', () => { }); it('getState should return corect JSON string', () => { - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; const fix = TestBed.createComponent(IgxGridStateComponent); fix.detectChanges(); @@ -276,8 +276,8 @@ describe('IgxGridState - input properties #grid', () => { fix.detectChanges(); const state = fix.componentInstance.state; /* eslint-disable max-len */ - const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]}'; - const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false}]}'; + const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; /* eslint-enable max-len */ const columns = JSON.parse(columnsState).columns; @@ -296,8 +296,8 @@ describe('IgxGridState - input properties #grid', () => { fix.detectChanges(); const state = fix.componentInstance.state; /* eslint-disable max-len */ - const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]}'; - const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false}]}'; + const columnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"200px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; /* eslint-enable max-len */ const columnsStateObject = JSON.parse(columnsState); diff --git a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts index 4b8049fb4f3..c6455c638ff 100644 --- a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts @@ -78,7 +78,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { it('getState should return corect JSON string', () => { // eslint-disable-next-line max-len - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}'; fix.detectChanges(); const state = fix.componentInstance.state; @@ -164,8 +164,8 @@ describe('IgxTreeGridState - input properties #tGrid', () => { fix.detectChanges(); const state = fix.componentInstance.state; /* eslint-disable max-len */ - const initialColumnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]}'; - const newColumnsState = '{"columns":[{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]}'; + const initialColumnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const newColumnsState = '{"columns":[{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; /* eslint-enable max-len */ const columns = JSON.parse(newColumnsState).columns; From e38c6eb6f033a389fafbd56bd8dfd1ac02da3889 Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Wed, 13 Oct 2021 15:40:48 +0300 Subject: [PATCH 27/43] test(IgxHierarchicalGridState): fix failing test --- .../src/lib/grids/state.hierarchicalgrid.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts index ee890445244..e66e29a756a 100644 --- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts @@ -89,7 +89,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('getState should return corect JSON string', () => { pending(); - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; fix.detectChanges(); const state = fix.componentInstance.state; From 49901e60bd9d066f1139c47877aca8700f0b35cf Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Wed, 13 Oct 2021 16:20:37 +0300 Subject: [PATCH 28/43] test(IgxHierarchicalGrid): fix failing test --- src/app/grid-state/grid-state.component.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/grid-state/grid-state.component.html b/src/app/grid-state/grid-state.component.html index a3c58d2b0fc..2e00e65e4a7 100644 --- a/src/app/grid-state/grid-state.component.html +++ b/src/app/grid-state/grid-state.component.html @@ -54,7 +54,7 @@ - + @@ -74,6 +74,7 @@
Clear the state from localStorage.
Reload the page.
+ ReorderLevel disableHiding
@@ -100,7 +101,7 @@ + [header]="c.header" [dataType]="c.dataType" [pinned]="c.pinned" [disableHiding]="true" [hidden]="c.hidden"> + ReorderLevel disableHiding From ab79036e09fcf143588f76c13627619398905785 Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Wed, 13 Oct 2021 16:22:24 +0300 Subject: [PATCH 29/43] test(IgxHierarchicalGridState): fix failing test --- .../src/lib/grids/state.hierarchicalgrid.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts index e66e29a756a..23e38e1c289 100644 --- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts @@ -428,8 +428,8 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { fix.detectChanges(); const state = fix.componentInstance.state; - const rootGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]'; - const childGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false}]'; + const rootGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]'; + const childGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]'; const initialState = HelperFunctions.buildStateString(grid, 'columns', rootGridColumns, childGridColumns); const newColumns = '[{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"363px","header":"Product Name","resizable":false,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"363px","header":"ID","resizable":false,"searchable":true}]'; const newColumnsState = HelperFunctions.buildStateString(grid, 'columns', newColumns, newColumns); From ab03965611ea22171d79a9074f0d68925761bbcc Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Thu, 14 Oct 2021 08:55:22 +0300 Subject: [PATCH 30/43] refactor(GridSaveStateComponent): remove testing sample --- src/app/grid-state/grid-state.component.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/grid-state/grid-state.component.html b/src/app/grid-state/grid-state.component.html index 2e00e65e4a7..2128db469df 100644 --- a/src/app/grid-state/grid-state.component.html +++ b/src/app/grid-state/grid-state.component.html @@ -54,7 +54,7 @@ - + @@ -74,7 +74,6 @@
Clear the state from localStorage.
Reload the page.
- ReorderLevel disableHiding @@ -140,7 +139,6 @@ - ReorderLevel disableHiding From 93216c55c3e0b35a7412222146e7ab950d96038e Mon Sep 17 00:00:00 2001 From: radomirchev Date: Thu, 14 Oct 2021 10:14:18 +0300 Subject: [PATCH 31/43] chore(*):roadmap-update-m19-14oct21 --- ROADMAP.md | 47 +++++++++++++++++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/ROADMAP.md b/ROADMAP.md index 10171a2cac3..97c6b181afb 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -2,30 +2,49 @@ # Current Milestone -## Milestone 18 (Due by Oct, 2021) +## Milestone 19 (Due by Nov, 2021) -1. **[DONE]** Add row at top of grid [#9675](https://github.com/IgniteUI/igniteui-angular/issues/9675) -2. **[DONE]** Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969) -3. **[DONE]** Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863) -4. **[DONE]** Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516) -5. **[DONE]** IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923) -6. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126) +1. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667) +2. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554) +3. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556) +4. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103) +5. Classes to indicate position of auto overlay [#9481](https://github.com/IgniteUI/igniteui-angular/issues/9481) +6. onFilterDone property to expose additional information [#10243](https://github.com/IgniteUI/igniteui-angular/issues/10243) +7. IgxCombo with single selection [#9832](https://github.com/IgniteUI/igniteui-angular/issues/9832) ## Going down the road +# Due in 2021 + 1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700) -2. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514) -3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696) -4. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554) -5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556) -6. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667) -7. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103) -8. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068) +2. Grid grouping for an unbound field [#10223](https://github.com/IgniteUI/igniteui-angular/issues/10223) +4. Grid autosize feature with performance improvements [#10205](https://github.com/IgniteUI/igniteui-angular/issues/10205) +5. Column moving feature on grid level [#10176](https://github.com/IgniteUI/igniteui-angular/issues/10176) +6. Grid summary custom templating [#7981](https://github.com/IgniteUI/igniteui-angular/issues/7981) +7. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068) +8. Improve sorting experience for users [#9674](https://github.com/IgniteUI/igniteui-angular/issues/9674) 9. IgxCombo: being able to set groups sorting order [#10125](https://github.com/IgniteUI/igniteui-angular/issues/10125) 10. Getting only one sort and one filter event after changing the state of grid using setState function [#8064](https://github.com/IgniteUI/igniteui-angular/issues/8064) +11. IgxGridState directive to save disableHiding property [#9304](https://github.com/IgniteUI/igniteui-angular/issues/9304) +12. Template grid excel filter footer [#10183](https://github.com/IgniteUI/igniteui-angular/issues/10183) +13. Igx Grid Sort Icon Change [#10217](https://github.com/IgniteUI/igniteui-angular/issues/10217) + +# Due in 2022 + +1. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696) +2. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514) # Previous Milestone +## Milestone 18 (Released October 4th, 2021) + +1. **[DONE]** Add row at top of grid [#9675](https://github.com/IgniteUI/igniteui-angular/issues/9675) +2. **[DONE]** Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969) +3. **[DONE]** Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863) +4. **[DONE]** Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516) +5. **[DONE]** IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923) +6. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126) + ## Milestone 17 (Released August 2nd, 2021) 1. **[DONE]** Accordion component to Ignite UI for Angular [#9559](https://github.com/IgniteUI/igniteui-angular/issues/9559) From addda51fa9aeacfe50adff6c1934680ab0923c1d Mon Sep 17 00:00:00 2001 From: viktorkombov Date: Thu, 14 Oct 2021 14:34:11 +0300 Subject: [PATCH 32/43] test(grid): add unit test covering all the new code --- .../lib/grids/grid/grid.master-detail.spec.ts | 48 +++++++++++++++++-- 1 file changed, 45 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts index 603df03990c..3cf6b8eea95 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts @@ -3,7 +3,7 @@ import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testin import { configureTestSuite } from '../../test-utils/configure-suite'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; -import { UIInteractions, wait, waitForActiveNodeChange} from '../../test-utils/ui-interactions.spec'; +import { UIInteractions, wait, waitForActiveNodeChange } from '../../test-utils/ui-interactions.spec'; import { IgxGridModule } from './public_api'; import { IgxGridComponent } from './grid.component'; import { IgxGridRowComponent } from './grid-row.component'; @@ -42,7 +42,7 @@ describe('IgxGrid Master Detail #grid', () => { })); describe('Basic', () => { - beforeEach( fakeAsync(() => { + beforeEach(fakeAsync(() => { fix = TestBed.createComponent(DefaultGridMasterDetailComponent); fix.detectChanges(); grid = fix.componentInstance.grid; @@ -689,7 +689,7 @@ describe('IgxGrid Master Detail #grid', () => { describe('Integration', () => { describe('Paging', () => { - it('Should not take into account expanded detail views as additional records.', fakeAsync(() => { + it('Should not take into account expanded detail views as additional records.', fakeAsync(() => { fix = TestBed.createComponent(DefaultGridMasterDetailComponent); grid = fix.componentInstance.grid; fix.detectChanges(); @@ -859,6 +859,48 @@ describe('IgxGrid Master Detail #grid', () => { fix.detectChanges(); expect(grid.getSelectedData()).toEqual(expectedData); })); + + it('getSelectedData should return correct values when there are master details and paging is enabled', fakeAsync(() => { + const range = { rowStart: 0, rowEnd: 5, columnStart: 'ContactName', columnEnd: 'ContactName' }; + const expectedDataFromSecondPage = [ + { ContactName: 'Hanna Moos' }, + { ContactName: 'Frédérique Citeaux' }, + { ContactName: 'Martín Sommer' } + ]; + fix.componentInstance.paging = true; + fix.detectChanges(); + grid.paginator.perPage = 5; + fix.detectChanges(); + tick(16); + grid.paginator.paginate(1); + fix.detectChanges(); + tick(16); + + grid.expandAll(); + tick(100); + fix.detectChanges(); + + grid.selectRange(range); + fix.detectChanges(); + expect(grid.getSelectedData()).toEqual(expectedDataFromSecondPage); + + const expectedDataFromThirdPage = [ + { ContactName: 'Victoria Ashworth' }, + { ContactName: 'Patricio Simpson' }, + { ContactName: 'Francisco Chang' } + ]; + grid.paginator.paginate(2); + fix.detectChanges(); + tick(16); + + grid.expandAll(); + tick(100); + fix.detectChanges(); + + grid.selectRange(range); + fix.detectChanges(); + expect(grid.getSelectedData()).toEqual(expectedDataFromThirdPage); + })); }); describe('Row Selection', () => { From 500839dac93122f5e302712d067e7490f90401fa Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Thu, 14 Oct 2021 15:20:19 +0300 Subject: [PATCH 33/43] feat(*): remove deprecated properties and add toolbar input for button action --- CHANGELOG.md | 9 +- .../igniteui-angular/src/lib/grids/README.md | 7 - .../column-actions.component.ts | 21 -- .../src/lib/grids/grid-base.directive.ts | 209 +----------------- .../src/lib/grids/grid/column-hiding.spec.ts | 4 - .../lib/grids/grid/grid-row-editing.spec.ts | 2 - .../grid.multi-row-layout.integration.spec.ts | 4 - .../lib/grids/grid/row-drag.directive.spec.ts | 1 - .../grid-toolbar-hiding.component.html | 4 +- .../grid-toolbar-pinning.component.html | 4 +- .../lib/grids/toolbar/grid-toolbar.base.ts | 3 + .../grids/toolbar/grid-toolbar.component.html | 5 +- .../tree-grid/tree-grid.component.spec.ts | 1 - .../test-utils/grid-base-components.spec.ts | 9 +- .../src/lib/test-utils/grid-samples.spec.ts | 8 +- .../hierarchical-grid-components.spec.ts | 12 +- 16 files changed, 41 insertions(+), 262 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e77f05e9e23..aa130ccf650 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,7 +23,14 @@ All notable changes for each version of this project will be documented in this }; this.alert.positionSettings = this.newPositionSettings; ``` - +- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid` + - **Breaking Change** - The following deprecated inputs have been removed + - Inputs `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `columnPinning`, + `columnPinningTitle`, `pinnedColumnsText`. + Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead. +- `IgxColumnActionsComponent` + - **Breaking Change** - The following input has been removed + - Input `columns`. Use `igxGrid` input instead. ## 12.2.1 ### New Features diff --git a/projects/igniteui-angular/src/lib/grids/README.md b/projects/igniteui-angular/src/lib/grids/README.md index 8c38e99d453..3aab700a988 100644 --- a/projects/igniteui-angular/src/lib/grids/README.md +++ b/projects/igniteui-angular/src/lib/grids/README.md @@ -193,16 +193,9 @@ Below is the list of all inputs that the developers may set to configure the gri |`transactions`| `TransactionService` | Transaction provider allowing access to all transactions and states of the modified rows. | |`summaryPosition`| GridSummaryPosition | The summary row position for the child levels. The default is top. | |`summaryCalculationMode`| GridSummaryCalculationMode | The summary calculation mode. The default is rootAndChildLevels, which means summaries are calculated for root and child levels.| -|`columnHiding`| boolean | Returns whether the column hiding UI for the `IgxGridComponent` is enabled.| -| `columnHidingTitle`| string | The title to be displayed in the built-in column hiding UI.| -| `columnPinning` | boolean | Returns if the built-in column pinning UI should be shown in the toolbar. | -| `columnPinningTitle` | string | The title to be displayed in the UI of the column pinning.| | `rowHeight` | number | Sets the row height. | | `columnWidth` | string | The default width of the `IgxGridComponent`'s columns. | |`primaryKey`| any | Property that sets the primary key of the `IgxGridComponent`. | -|`hiddenColumnsText`| string | The text to be displayed inside the toggle button for the built-in column hiding UI of the`IgxColumnComponent`. | -|`pinnedColumnsText`| string | the text to be displayed inside the toggle button for the built-in column pinning UI of the`IgxColumnComponent`. | -|`showToolbar`| boolean | Specifies whether the `IgxGridComponent`'s toolbar is shown or hidden.| |`toolbarTitle`| string | the toolbar's title. | |`exportExcel`| boolean | Returns whether the option for exporting to MS Excel is enabled or disabled. | |`exportCsv`| boolean | Returns whether the option for exporting to CSV is enabled or disabled.| diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts index e6525f760a3..1d21c98f260 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts @@ -172,27 +172,6 @@ export class IgxColumnActionsComponent implements DoCheck { this._differ = this.differs.find([]).create(this.trackChanges); } - /** - * Gets the grid columns to provide an action for. - * - * @deprecated - * @example - * ```typescript - * let gridColumns = this.columnActions.columns; - * ``` - */ - @DeprecateProperty(`Deprecated. Use 'grid' input instead.`) - @Input() - public get columns() { - return this.grid?.columns; - } - - public set columns(value) { - if (value && value.length > 0) { - this.grid = value[0].grid; - } - } - /** * Gets the prompt that is displayed in the filter input. * diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 11efbf25c29..6fc14ab1538 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -400,7 +400,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * @example * ```html - * + * * ``` */ @WatchChanges() @@ -813,7 +813,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Args: { column: any, newValue: boolean } * @example * ```html - * + * * ``` */ @Output() @@ -826,7 +826,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Args: { column: IgxColumnComponent, newValue: boolean } * @example * ```html - * + * * ``` */ @Output() @@ -839,7 +839,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Returns the moved `IgxColumnComponent` object. * @example * ```html - * + * * ``` */ @Output() @@ -852,7 +852,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Returns the source and target `IgxColumnComponent` objects. This event is cancelable. * @example * ```html - * + * * ``` */ @Output() @@ -865,7 +865,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * Returns the source and target `IgxColumnComponent` objects. * @example * ```html - * + * * ``` */ @Output() @@ -1567,28 +1567,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements } } - /** - * Gets/Sets whether the column hiding UI is enabled. - * - * @deprecated - * @remarks - * By default it is disabled (false). In order for the UI to work, you need to enable the toolbar as shown in the example below. - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`columnHiding` is deprecated.') - @Input() - public get columnHiding() { - return this._columnHiding; - } - - public set columnHiding(value) { - this._columnHiding = value; - this.notifyChanges(); - } - /** * Gets/Sets if the row selectors are hidden. * @@ -1646,7 +1624,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * By default it is set to false. * @example * ```html - * + * * ``` */ @WatchChanges() @@ -1733,7 +1711,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * @example * ```html - * + * * ``` */ @WatchChanges() @@ -1751,7 +1729,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * @example * ```html - * + * * ``` */ @WatchChanges() @@ -1839,30 +1817,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements return this._emptyFilteredGridMessage || this.resourceStrings.igx_grid_emptyFilteredGrid_message; } - /** - * Gets/Sets the title to be displayed in the built-in column hiding UI. - * - * @deprecated - * - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`columnHidingTitle` is deprecated') - @Input() - public get columnHidingTitle(): string { - return this._columnHidingTitle; - } - public set columnHidingTitle(v: string) { - this._columnHidingTitle = v; - } - - /** @hidden @internal */ - public get columnHidingTitleInternal(): string { - return this._columnHidingTitle; - } - /** * Gets/Sets the initial pinning configuration. * @@ -1885,51 +1839,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements this._pinning = value; } - - /** - * Gets/Sets if the built-in column pinning UI should be shown in the toolbar. - * - * @deprecated - * - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`columnPinning` is deprecated') - @Input() - public get columnPinning() { - return this._columnPinning; - } - public set columnPinning(value) { - this._columnPinning = value; - this.notifyChanges(); - } - - /** - * Gets/Sets the title to be displayed in the UI of the column pinning. - * - * @deprecated - * - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`columnPinningTitle` is deprecated') - @Input() - public get columnPinningTitle(): string { - return this._columnPinningTitle; - } - public set columnPinningTitle(v: string) { - this._columnPinningTitle = v; - } - - /** @hidden @internal */ - public get columnPinningTitleInternal(): string { - return this._columnPinningTitle; - } - /** * Gets/Sets if the filtering is enabled. * @@ -1964,7 +1873,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * * @example * ```html - * + * * ``` */ @Input() @@ -2429,52 +2338,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements return this.pinnedColumns.filter(col => !col.columnLayout).length; } - /** - * Gets/Sets the text to be displayed inside the toggle button. - * - * @deprecated - * - * @remarks - * Used for the built-in column hiding UI of the`IgxColumnComponent`. - * @example - * ```html - * - * ``` - */ - // @DeprecateProperty('`hiddenColumnsText` is deprecated') - @Input() - public get hiddenColumnsText() { - return this._hiddenColumnsText; - } - - public set hiddenColumnsText(value) { - this._hiddenColumnsText = value; - this.notifyChanges(); - - } - - /** - * Gets/Sets the text to be displayed inside the toggle button. - * - * @deprecated - * - * @remarks - * Used for the built-in column pinning UI of the`IgxColumnComponent`. - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`pinnedColumnsText` is deprecated') - @Input() - public get pinnedColumnsText() { - return this._pinnedColumnsText; - } - public set pinnedColumnsText(value) { - this._pinnedColumnsText = value; - this.notifyChanges(); - } - /** * Gets/Sets whether the grid has batch editing enabled. * When batch editing is enabled, changes are not made directly to the underlying data. @@ -2500,11 +2363,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements } } - /** @hidden @internal */ - public get pinnedColumnsTextInternal() { - return this._pinnedColumnsText; - } - /** * Get transactions service for the grid. */ @@ -2535,47 +2393,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements return this._currencyPositionLeft = i < 1; } - - /** - * Gets/Sets whether the toolbar is shown. - * - * @deprecated - * - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`showToolbar` is deprecated') - @Input() - public get showToolbar(): boolean { - return this._showToolbar; - } - public set showToolbar(newValue: boolean) { - this._showToolbar = newValue; - } - - /** - * Gets/Sets the toolbar's title. - * - * @deprecated - * - * @example - * ```html - * - * ``` - */ - @DeprecateProperty('`toolbarTitle` is deprecated') - @Input() - public get toolbarTitle(): string { - return this._toolbarTitle; - } - - public set toolbarTitle(newValue: string) { - this._toolbarTitle = newValue; - this.notifyChanges(); - } - /** * Gets/Sets whether exporting to MS Excel is enabled or disabled. * @@ -2973,14 +2790,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements return this.verticalScrollContainer.getScrollNativeSize(); } - private _columnPinningTitle: string; - private _columnHidingTitle: string; /* Toolbar related definitions */ - private _showToolbar = false; private _exportExcel = false; private _exportCsv = false; - private _toolbarTitle: string = null; private _exportText: string; private _exportExcelText: string; private _exportCsvText: string; @@ -3017,8 +2830,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements private columnListDiffer; private rowListDiffer; - private _hiddenColumnsText = ''; - private _pinnedColumnsText = ''; private _height: string | null = '100%'; private _width: string | null = '100%'; private _rowHeight; diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts index 99fcd53261d..f557d1fba3e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts @@ -843,10 +843,6 @@ describe('Column Hiding UI #grid', () => { fix = TestBed.createComponent(ColumnHidingTestComponent); fix.detectChanges(); grid = fix.componentInstance.grid; - grid.showToolbar = true; - grid.toolbarTitle = 'Grid Toolbar Title'; - grid.hiddenColumnsText = 'Hidden'; - grid.columnHiding = true; grid.columns[2].hidden = true; fix.componentInstance.showInline = false; fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts index 3f1f6ee60cb..757cbd997ac 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts @@ -1511,8 +1511,6 @@ describe('IgxGrid - Row Editing #grid', () => { }); it(`Hiding: Should show correct value when showing the column again`, waitForAsync(async () => { - fix.componentInstance.showToolbar = true; - grid.columnHiding = true; fix.detectChanges(); await fix.whenStable(); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts index 6a25e81e02f..d41fab25444 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts @@ -323,7 +323,6 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { waitForAsync(async () => { // enable toolbar for hiding fixture.componentInstance.showToolbar = true; - grid.columnHiding = true; fixture.detectChanges(); await fixture.whenStable(); fixture.detectChanges(); @@ -348,7 +347,6 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { it(`UI - toggling column checkbox checked state successfully changes the column's hidden state. `, waitForAsync(async () => { // enable toolbar for hiding fixture.componentInstance.showToolbar = true; - grid.columnHiding = true; fixture.detectChanges(); await fixture.whenStable(); fixture.detectChanges(); @@ -645,7 +643,6 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { it('UI - pinned columns count and drop-down items text in pinning toolbar should be correct when group is pinned. ', waitForAsync(async () => { // enable toolbar for pinning - grid.columnPinning = true; fixture.componentInstance.showToolbar = true; fixture.detectChanges(); await fixture.whenStable(); @@ -713,7 +710,6 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { ]; fixture.componentInstance.showToolbar = true; fixture.componentInstance.colGroups = uniqueGroups; - grid.columnPinning = true; grid.columnWidth = '200px'; fixture.componentInstance.grid.width = '1000px'; fixture.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts index 2296bd32c89..d473e9b3c05 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts @@ -593,7 +593,6 @@ describe('Row Drag Tests #grid', () => { }); it('should be able to drag grid row when column hiding is enabled', () => { const hiddenDragCellValue = dragGrid.getCellByColumn(1, 'Downloads').value; - dragGrid.columnHiding = true; const column = dragGrid.getColumnByName('Downloads'); column.hidden = true; diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html index 4cc4b000ee8..78aae875f23 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html @@ -3,10 +3,10 @@ name="btnColumnHiding" (click)="toggle(btn, ref, actions)" [displayDensity]="grid.displayDensity"> {{ !grid.hiddenColumnsCount ? 'visibility' : 'visibility_off' }} {{ grid.hiddenColumnsCount }} - {{ grid.hiddenColumnsText }} + {{ buttonText }} diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component.html index ab1516aaaf1..1c220c6e8c6 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-pinning.component.html @@ -3,10 +3,10 @@ name="btnColumnPinning" (click)="toggle(btn, ref, actions)" [displayDensity]="grid.displayDensity"> {{ grid.pinnedColumnsCount }} - {{ grid.pinnedColumnsTextInternal }} + {{ buttonText }} diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts index 9267835d69f..fa03c11e2e7 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts @@ -177,6 +177,9 @@ export abstract class BaseToolbarColumnActionsDirective extends BaseToolbarDirec @Input() public indentetion = 30; + @Input() + public buttonText: string; + protected columnActionsUI: IgxColumnActionsComponent; public checkAll() { diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html index 9f95c94b666..c9694ee0383 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html @@ -1,7 +1,6 @@ -{{ grid.toolbarTitle }}
@@ -13,8 +12,8 @@ - - + + diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts index 76f45a79daa..d82f5e6d724 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.spec.ts @@ -194,7 +194,6 @@ describe('IgxTreeGrid Component Tests #tGrid', () => { it('should not render rows, paging and headers group when all cols are hidden', fakeAsync(() => { grid.rowSelection = GridSelectionMode.multiple; grid.rowDraggable = true; - grid.showToolbar = true; tick(30); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts index c3d6a200e0e..bf5c7c911ab 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts @@ -104,8 +104,7 @@ export class SelectionComponent extends BasicGridComponent { } @Component({ - template: GridTemplateStrings.declareGrid(` [autoGenerate]="true" [showToolbar]="showToolbar" [columnHiding]="columnHiding" - [columnPinning]="columnPinning" [exportExcel]="exportExcel" [exportCsv]="exportCsv"`, + template: GridTemplateStrings.declareGrid(` [autoGenerate]="true" [exportExcel]="exportExcel" [exportCsv]="exportCsv"`, '', '') }) export class GridWithToolbarComponent extends GridWithSizeComponent { @@ -136,7 +135,7 @@ export class GridRowConditionalStylingComponent extends GridWithSizeComponent { } @Component({ template: `
- + ${ GridTemplateStrings.declareGrid('#grid [height]="height" [width]="width"', '', ColumnDefinitions.productHidable, '', '') }
` @@ -185,7 +184,7 @@ export class ColumnGroupsHidingTestComponent extends ColumnHidingTestComponent { @Component({ template: `
- + ${GridTemplateStrings.declareGrid('#grid [height]="height" [width]="width"', '', ColumnDefinitions.productFilterable, '' + '' + @@ -236,7 +235,7 @@ export class ColumnPinningWithTemplateTestComponent extends ColumnPinningTestCom @Component({ template: `
- + ${ GridTemplateStrings.declareGrid(' #grid [height]="height" ', '', ColumnDefinitions.contactInfoGroupableColumns, '')}
` diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 8bc084c71e5..8bb7548bf9a 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -123,7 +123,7 @@ export class ColumnHiddenFromMarkupComponent extends BasicGridComponent { @Component({ template: ` - + + template: ` @@ -2035,7 +2035,7 @@ export class CollapsibleColumnGroupTestComponent { @Component({ template: ` - + @@ -2215,7 +2215,7 @@ export class IgxGridFilteringBindingComponent extends BasicGridComponent impleme @Component({ template: ` - diff --git a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts index 91615bf7051..6ac92ca045a 100644 --- a/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts @@ -300,16 +300,16 @@ export class IgxHierarchicalGridCustomSelectorsComponent implements OnInit { @Component({ template: ` + [primaryKey]="'ID'" [autoGenerate]="true"> - + - + @@ -321,14 +321,14 @@ export class IgxHierarchicalGridTestCustomToolbarComponent extends IgxHierarchic @Component({ template: ` + [primaryKey]="'ID'" [autoGenerate]="true" [rowEditable]='true'> - + - + From a4a738529824c402d360109287fd52ff1345866f Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Thu, 14 Oct 2021 15:31:37 +0300 Subject: [PATCH 34/43] chore(*): Remove additional input from README --- CHANGELOG.md | 6 +++--- projects/igniteui-angular/src/lib/grids/README.md | 1 - .../src/lib/grids/grid/grid-row-editing.spec.ts | 1 + .../src/lib/grids/toolbar/grid-toolbar.component.html | 2 -- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa130ccf650..3041edbb00f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,12 +25,12 @@ All notable changes for each version of this project will be documented in this ``` - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid` - **Breaking Change** - The following deprecated inputs have been removed - - Inputs `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `columnPinning`, - `columnPinningTitle`, `pinnedColumnsText`. + - Inputs `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`, + `columnPinning`, `columnPinningTitle`, `pinnedColumnsText`. Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead. - `IgxColumnActionsComponent` - **Breaking Change** - The following input has been removed - - Input `columns`. Use `igxGrid` input instead. + - Input `columns`. Use `igxGrid` `columns` input instead. ## 12.2.1 ### New Features diff --git a/projects/igniteui-angular/src/lib/grids/README.md b/projects/igniteui-angular/src/lib/grids/README.md index 3aab700a988..329c5a5735b 100644 --- a/projects/igniteui-angular/src/lib/grids/README.md +++ b/projects/igniteui-angular/src/lib/grids/README.md @@ -196,7 +196,6 @@ Below is the list of all inputs that the developers may set to configure the gri | `rowHeight` | number | Sets the row height. | | `columnWidth` | string | The default width of the `IgxGridComponent`'s columns. | |`primaryKey`| any | Property that sets the primary key of the `IgxGridComponent`. | -|`toolbarTitle`| string | the toolbar's title. | |`exportExcel`| boolean | Returns whether the option for exporting to MS Excel is enabled or disabled. | |`exportCsv`| boolean | Returns whether the option for exporting to CSV is enabled or disabled.| |`exportText`| string | Returns the textual content for the main export button.| diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts index 757cbd997ac..49d278a5dd4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts @@ -1511,6 +1511,7 @@ describe('IgxGrid - Row Editing #grid', () => { }); it(`Hiding: Should show correct value when showing the column again`, waitForAsync(async () => { + fix.componentInstance.showToolbar = true; fix.detectChanges(); await fix.whenStable(); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html index c9694ee0383..bf0c7c8b223 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html @@ -12,8 +12,6 @@ - - From b566d04ba395e662e41e9044e417bbef768d2e3f Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Fri, 15 Oct 2021 17:15:22 +0300 Subject: [PATCH 35/43] chore(*): Refactor tests remove usage of deprecated properties --- .../src/lib/grids/grid/grid-toolbar.spec.ts | 6 - .../grid.multi-row-layout.integration.spec.ts | 422 +++++++++--------- .../test-utils/grid-base-components.spec.ts | 9 +- .../src/lib/test-utils/grid-samples.spec.ts | 6 +- src/app/grid-toolbar/grid-toolbar.sample.html | 2 +- 5 files changed, 226 insertions(+), 219 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts index a9e7b897326..62be10dab05 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts @@ -63,12 +63,6 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => { expect($(TOOLBAR_TAG)).toBeNull(); }); - it('default toolbar title is rendered', () => { - const titleEl = $(TOOLBAR_TITLE_TAG); - expect(titleEl).toBeInstanceOf(HTMLElement); - expect(titleEl.textContent).toMatch(''); - }); - it('toolbar title can be set through content projection', () => { const newTitle = '1234567890'; fixture.componentInstance.toolbarTitle = newTitle; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts index d41fab25444..db033da8378 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts @@ -190,45 +190,45 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { it('should work with horizontal virtualization when some groups are hidden/shown.', async () => { const uniqueGroups: ColGroupsType[] = [ { - group: 'group1', - hidden: true, - // total colspan 3 - columns: [ - { field: 'Address', rowStart: 1, colStart: 1, colEnd : 4, rowEnd: 3}, - { field: 'County', rowStart: 3, colStart: 1}, - { field: 'Region', rowStart: 3, colStart: 2}, - { field: 'City', rowStart: 3, colStart: 3} - ] - }, - { - group: 'group2', - // total colspan 2 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1}, - { field: 'Address', rowStart: 1, colStart: 2}, - { field: 'ContactName', rowStart: 2, colStart: 1, colEnd : 3, rowEnd: 4} - ] - }, - { - group: 'group3', - // total colspan 1 - columns: [ - { field: 'Phone', rowStart: 1, colStart: 1}, - { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4} - ] - }, - { - group: 'group4', - // total colspan 4 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3}, - { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3}, - { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4}, - { field: 'Region', rowStart: 2, colStart: 1}, - { field: 'City', rowStart: 2, colStart: 2}, - { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4}, - ] - } + group: 'group1', + hidden: true, + // total colspan 3 + columns: [ + { field: 'Address', rowStart: 1, colStart: 1, colEnd: 4, rowEnd: 3 }, + { field: 'County', rowStart: 3, colStart: 1 }, + { field: 'Region', rowStart: 3, colStart: 2 }, + { field: 'City', rowStart: 3, colStart: 3 } + ] + }, + { + group: 'group2', + // total colspan 2 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1 }, + { field: 'Address', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 2, colStart: 1, colEnd: 3, rowEnd: 4 } + ] + }, + { + group: 'group3', + // total colspan 1 + columns: [ + { field: 'Phone', rowStart: 1, colStart: 1 }, + { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4 } + ] + }, + { + group: 'group4', + // total colspan 4 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3 }, + { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3 }, + { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4 }, + { field: 'Region', rowStart: 2, colStart: 1 }, + { field: 'City', rowStart: 2, colStart: 2 }, + { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4 }, + ] + } ]; fixture.componentInstance.colGroups = uniqueGroups; grid.columnWidth = '200px'; @@ -256,7 +256,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(horizontalVirtualization.getSizeAt(1)).toBe(1 * 200); expect(horizontalVirtualization.getSizeAt(2)).toBe(4 * 200); - // check total widths sum + // check total widths sum let horizonatalScrElem = horizontalVirtualization.getScroll(); // 7 column span in total let totalExpected = 7 * 200; @@ -277,7 +277,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(horizontalVirtualization.getSizeAt(0)).toBe(2 * 200); expect(horizontalVirtualization.getSizeAt(1)).toBe(4 * 200); - // check total widths sum + // check total widths sum horizonatalScrElem = horizontalVirtualization.getScroll(); // 7 column span in total totalExpected = 6 * 200; @@ -300,7 +300,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(horizontalVirtualization.getSizeAt(1)).toBe(2 * 200); expect(horizontalVirtualization.getSizeAt(2)).toBe(4 * 200); - // check total widths sum + // check total widths sum horizonatalScrElem = horizontalVirtualization.getScroll(); // 7 column span in total totalExpected = 9 * 200; @@ -315,7 +315,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(lastCell.column.field).toBe('Address'); expect(lastCell.column.parent.field).toBe('group4'); expect(lastCell.nativeElement.getBoundingClientRect().right) - .toEqual(grid.tbody.nativeElement.getBoundingClientRect().right); + .toEqual(grid.tbody.nativeElement.getBoundingClientRect().right); }); @@ -342,7 +342,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { // verify checked state expect(checkboxes[0].componentInstance.checked).toBeFalse(); expect(checkboxes[1].componentInstance.checked).toBeTrue(); - })); + })); it(`UI - toggling column checkbox checked state successfully changes the column's hidden state. `, waitForAsync(async () => { // enable toolbar for hiding @@ -545,44 +545,44 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { it('should work with horizontal virtualization on the unpinned groups.', async () => { const uniqueGroups = [ { - group: 'group1', - // total colspan 3 - columns: [ - { field: 'Address', rowStart: 1, colStart: 1, colEnd : 4, rowEnd: 3}, - { field: 'County', rowStart: 3, colStart: 1}, - { field: 'Region', rowStart: 3, colStart: 2}, - { field: 'City', rowStart: 3, colStart: 3} - ] - }, - { - group: 'group2', - // total colspan 2 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1}, - { field: 'Address', rowStart: 1, colStart: 2}, - { field: 'ContactName', rowStart: 2, colStart: 1, colEnd : 3, rowEnd: 4} - ] - }, - { - group: 'group3', - // total colspan 1 - columns: [ - { field: 'Phone', rowStart: 1, colStart: 1}, - { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4} - ] - }, - { - group: 'group4', - // total colspan 4 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3}, - { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3}, - { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4}, - { field: 'Region', rowStart: 2, colStart: 1}, - { field: 'City', rowStart: 2, colStart: 2}, - { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4}, - ] - } + group: 'group1', + // total colspan 3 + columns: [ + { field: 'Address', rowStart: 1, colStart: 1, colEnd: 4, rowEnd: 3 }, + { field: 'County', rowStart: 3, colStart: 1 }, + { field: 'Region', rowStart: 3, colStart: 2 }, + { field: 'City', rowStart: 3, colStart: 3 } + ] + }, + { + group: 'group2', + // total colspan 2 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1 }, + { field: 'Address', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 2, colStart: 1, colEnd: 3, rowEnd: 4 } + ] + }, + { + group: 'group3', + // total colspan 1 + columns: [ + { field: 'Phone', rowStart: 1, colStart: 1 }, + { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4 } + ] + }, + { + group: 'group4', + // total colspan 4 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3 }, + { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3 }, + { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4 }, + { field: 'Region', rowStart: 2, colStart: 1 }, + { field: 'City', rowStart: 2, colStart: 2 }, + { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4 }, + ] + } ]; fixture.componentInstance.colGroups = uniqueGroups; fixture.detectChanges(); @@ -636,8 +636,8 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { expect(lastCell.column.field).toBe('Address'); expect(lastCell.column.parent.field).toBe('group4'); expect(Math.round(lastCell.nativeElement.getBoundingClientRect().right) - - grid.tbody.nativeElement.getBoundingClientRect().right) - .toBeLessThanOrEqual(2); + grid.tbody.nativeElement.getBoundingClientRect().right) + .toBeLessThanOrEqual(2); }); it('UI - pinned columns count and drop-down items text in pinning toolbar should be correct when group is pinned. ', @@ -664,49 +664,49 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { // verify checked state expect(checkboxes[0].componentInstance.checked).toBeTruthy(); expect(checkboxes[1].componentInstance.checked).toBeFalsy(); - })); + })); it(`UI - toggling column checkbox checked state successfully changes the column's pinned state. `, waitForAsync(async () => { const uniqueGroups = [ { - group: 'group1', - // total colspan 3 - columns: [ - { field: 'Address', rowStart: 1, colStart: 1, colEnd : 4, rowEnd: 3}, - { field: 'County', rowStart: 3, colStart: 1}, - { field: 'Region', rowStart: 3, colStart: 2}, - { field: 'City', rowStart: 3, colStart: 3} - ] - }, - { - group: 'group2', - // total colspan 2 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1}, - { field: 'Address', rowStart: 1, colStart: 2}, - { field: 'ContactName', rowStart: 2, colStart: 1, colEnd : 3, rowEnd: 4} - ] - }, - { - group: 'group3', - // total colspan 1 - columns: [ - { field: 'Phone', rowStart: 1, colStart: 1}, - { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4} - ] - }, - { - group: 'group4', - // total colspan 4 - columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3}, - { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3}, - { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4}, - { field: 'Region', rowStart: 2, colStart: 1}, - { field: 'City', rowStart: 2, colStart: 2}, - { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4}, - ] - } + group: 'group1', + // total colspan 3 + columns: [ + { field: 'Address', rowStart: 1, colStart: 1, colEnd: 4, rowEnd: 3 }, + { field: 'County', rowStart: 3, colStart: 1 }, + { field: 'Region', rowStart: 3, colStart: 2 }, + { field: 'City', rowStart: 3, colStart: 3 } + ] + }, + { + group: 'group2', + // total colspan 2 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1 }, + { field: 'Address', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 2, colStart: 1, colEnd: 3, rowEnd: 4 } + ] + }, + { + group: 'group3', + // total colspan 1 + columns: [ + { field: 'Phone', rowStart: 1, colStart: 1 }, + { field: 'Fax', rowStart: 2, colStart: 1, rowEnd: 4 } + ] + }, + { + group: 'group4', + // total colspan 4 + columns: [ + { field: 'CompanyName', rowStart: 1, colStart: 1, colEnd: 3 }, + { field: 'Phone', rowStart: 1, colStart: 3, rowEnd: 3 }, + { field: 'Address', rowStart: 1, colStart: 4, rowEnd: 4 }, + { field: 'Region', rowStart: 2, colStart: 1 }, + { field: 'City', rowStart: 2, colStart: 2 }, + { field: 'ContactName', rowStart: 3, colStart: 1, colEnd: 4 }, + ] + } ]; fixture.componentInstance.showToolbar = true; fixture.componentInstance.colGroups = uniqueGroups; @@ -748,19 +748,19 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { group: 'group1', // total colspan 3 columns: [ - { field: 'Address', rowStart: 1, colStart: 1, colEnd : 4, rowEnd: 3}, - { field: 'County', rowStart: 3, colStart: 1}, - { field: 'Region', rowStart: 3, colStart: 2}, - { field: 'City', rowStart: 3, colStart: 3} + { field: 'Address', rowStart: 1, colStart: 1, colEnd: 4, rowEnd: 3 }, + { field: 'County', rowStart: 3, colStart: 1 }, + { field: 'Region', rowStart: 3, colStart: 2 }, + { field: 'City', rowStart: 3, colStart: 3 } ] }, { group: 'group2', // total colspan 2 columns: [ - { field: 'CompanyName', rowStart: 1, colStart: 1, width: '50%'}, - { field: 'Address', rowStart: 1, colStart: 2, width: '15%'}, - { field: 'ContactName', rowStart: 2, colStart: 1, colEnd : 3, rowEnd: 4} + { field: 'CompanyName', rowStart: 1, colStart: 1, width: '50%' }, + { field: 'Address', rowStart: 1, colStart: 2, width: '15%' }, + { field: 'ContactName', rowStart: 2, colStart: 1, colEnd: 3, rowEnd: 4 } ] } ]; @@ -926,15 +926,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, width: '300px', resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, width: '300px', resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -966,15 +966,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, width: '300px', resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, width: '300px', resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -1006,15 +1006,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, width: '300px', resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, width: '300px', resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -1046,15 +1046,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, width: '300px', resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, width: '300px', resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -1086,15 +1086,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -1129,15 +1129,15 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { fixture.componentInstance.colGroups = [{ group: 'group1', columns: [ - { field: 'ContactName', rowStart: 1, colStart: 1, colEnd : 4, resizable: true}, - { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true}, - { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true}, - { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true}, - { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true}, - { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true}, - { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true}, - { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true}, - { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7}, + { field: 'ContactName', rowStart: 1, colStart: 1, colEnd: 4, resizable: true }, + { field: 'ContactTitle', rowStart: 1, colStart: 4, colEnd: 6, width: '200px', resizable: true }, + { field: 'Country', rowStart: 1, colStart: 6, colEnd: 7, width: '200px', resizable: true }, + { field: 'Phone', rowStart: 2, colStart: 1, colEnd: 3, width: '200px', resizable: true }, + { field: 'City', rowStart: 2, colStart: 3, colEnd: 5, resizable: true }, + { field: 'Address', rowStart: 2, colStart: 5, colEnd: 7, width: '200px', resizable: true }, + { field: 'CompanyName', rowStart: 3, colStart: 1, colEnd: 2, width: '200px', resizable: true }, + { field: 'PostalCode', rowStart: 3, colStart: 2, colEnd: 3, width: '200px', resizable: true }, + { field: 'Fax', rowStart: 3, colStart: 3, colEnd: 7 }, ] }]; fixture.detectChanges(); @@ -1209,7 +1209,11 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { @Component({ template: ` - + + + + + = [ - { field: 'ID', rowStart: 1, colStart: 1}, - { field: 'CompanyName', rowStart: 1, colStart: 2}, - { field: 'ContactName', rowStart: 1, colStart: 3}, - { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd : 4}, + { field: 'ID', rowStart: 1, colStart: 1 }, + { field: 'CompanyName', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 1, colStart: 3 }, + { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd: 4 }, ]; public cols2: Array = [ { field: 'PostalCode', rowStart: 1, colStart: 1, colEnd: 3 }, - { field: 'City', rowStart: 2, colStart: 1}, - { field: 'Country', rowStart: 2, colStart: 2}, - { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3} + { field: 'City', rowStart: 2, colStart: 1 }, + { field: 'Country', rowStart: 2, colStart: 2 }, + { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3 } ]; public colGroups: ColGroupsType[] = [ { @@ -1252,7 +1256,11 @@ export class ColumnLayouHidingTestComponent { @Component({ template: ` - + + + + + = [ - { field: 'ID', rowStart: 1, colStart: 1}, - { field: 'CompanyName', rowStart: 1, colStart: 2}, - { field: 'ContactName', rowStart: 1, colStart: 3}, - { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd : 4}, + { field: 'ID', rowStart: 1, colStart: 1 }, + { field: 'CompanyName', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 1, colStart: 3 }, + { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd: 4 }, ]; public cols2: Array = [ { field: 'PostalCode', rowStart: 1, colStart: 1, colEnd: 3 }, - { field: 'City', rowStart: 2, colStart: 1}, - { field: 'Country', rowStart: 2, colStart: 2}, - { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3} + { field: 'City', rowStart: 2, colStart: 1 }, + { field: 'Country', rowStart: 2, colStart: 2 }, + { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3 } ]; public colGroups: ColGroupsType[] = [ { @@ -1320,16 +1328,16 @@ export class ColumnLayoutFilteringTestComponent extends ColumnLayoutPinningTestC export class ColumnLayoutGroupingTestComponent extends ColumnLayoutPinningTestComponent { public showToolbar = false; public cols1: Array = [ - { field: 'ID', rowStart: 1, colStart: 1}, - { field: 'CompanyName', rowStart: 1, colStart: 2, groupable: true}, - { field: 'ContactName', rowStart: 1, colStart: 3, groupable: true}, - { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd : 4, groupable: true}, + { field: 'ID', rowStart: 1, colStart: 1 }, + { field: 'CompanyName', rowStart: 1, colStart: 2, groupable: true }, + { field: 'ContactName', rowStart: 1, colStart: 3, groupable: true }, + { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd: 4, groupable: true }, ]; public cols2: Array = [ { field: 'PostalCode', rowStart: 1, colStart: 1, colEnd: 3 }, - { field: 'City', rowStart: 2, colStart: 1, groupable: true}, - { field: 'Country', rowStart: 2, colStart: 2, groupable: true}, - { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3} + { field: 'City', rowStart: 2, colStart: 1, groupable: true }, + { field: 'Country', rowStart: 2, colStart: 2, groupable: true }, + { field: 'Address', rowStart: 3, colStart: 1, colEnd: 3 } ]; } @Component({ diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts index bf5c7c911ab..a85fe031197 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts @@ -135,9 +135,10 @@ export class GridRowConditionalStylingComponent extends GridWithSizeComponent { } @Component({ template: `
- + ${ GridTemplateStrings.declareGrid('#grid [height]="height" [width]="width"', '', ColumnDefinitions.productHidable, - '', '') } + "" + "" + + "", '') }
` }) export class ColumnHidingTestComponent extends GridWithSizeComponent implements OnInit, AfterViewInit { @@ -184,7 +185,7 @@ export class ColumnGroupsHidingTestComponent extends ColumnHidingTestComponent { @Component({ template: `
- + ${GridTemplateStrings.declareGrid('#grid [height]="height" [width]="width"', '', ColumnDefinitions.productFilterable, '' + '' + @@ -235,7 +236,7 @@ export class ColumnPinningWithTemplateTestComponent extends ColumnPinningTestCom @Component({ template: `
- + ${ GridTemplateStrings.declareGrid(' #grid [height]="height" ', '', ColumnDefinitions.contactInfoGroupableColumns, '')}
` diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 8bb7548bf9a..6d1184e4996 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1619,7 +1619,11 @@ export class GridCustomSelectorsComponent extends BasicGridComponent implements @Component({ template: ` - + + + + + diff --git a/src/app/grid-toolbar/grid-toolbar.sample.html b/src/app/grid-toolbar/grid-toolbar.sample.html index 20727719536..2d28dadc6b6 100644 --- a/src/app/grid-toolbar/grid-toolbar.sample.html +++ b/src/app/grid-toolbar/grid-toolbar.sample.html @@ -8,7 +8,7 @@

Toolbar

{{ title }} - + Really advanced filtering Transform to Excel 👌 From 3647c41c708a37c900f42a46985139a42966c67b Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Fri, 15 Oct 2021 17:24:56 +0300 Subject: [PATCH 36/43] chore(*): fix lint errors --- .../src/lib/test-utils/grid-base-components.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts index a85fe031197..ce784981de6 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts @@ -137,8 +137,8 @@ export class GridRowConditionalStylingComponent extends GridWithSizeComponent { template: `
${ GridTemplateStrings.declareGrid('#grid [height]="height" [width]="width"', '', ColumnDefinitions.productHidable, - "" + "" + - "", '') } + '' + '' + + '', '') }
` }) export class ColumnHidingTestComponent extends GridWithSizeComponent implements OnInit, AfterViewInit { From 856777ce5dd3262b4af60b1688ca5da2ab812d05 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Fri, 15 Oct 2021 18:43:47 +0300 Subject: [PATCH 37/43] feat(*): Add buttonText to changelog and remove unused import --- CHANGELOG.md | 2 ++ .../src/lib/grids/column-actions/column-actions.component.ts | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3041edbb00f..df67fd1f42d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ All notable changes for each version of this project will be documented in this ### New Features - `IgxCsvExporterService`, `IgxExcelExporterService` - Exporter services are no longer required to be provided in the application since they are now injected on a root level. +- `IgxGridToolbarPinningComponent`, `IgxGridToolbarHidingComponent` + - Exposed new input `buttonText` which sets the text that is displayed inside the dropdown button in the toolbar. ### General diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts index 1d21c98f260..68baeeb6590 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts @@ -16,7 +16,6 @@ import { IgxColumnActionsBaseDirective } from './column-actions-base.directive'; import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IColumnToggledEventArgs } from '../common/events'; import { IgxGridBaseDirective } from '../grid-base.directive'; -import { DeprecateProperty } from '../../core/deprecateDecorators'; let NEXT_ID = 0; /** From d25cbfbf6eb58444f3bb55bdf9e6f8fbe8f73a6c Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Mon, 18 Oct 2021 10:56:23 +0300 Subject: [PATCH 38/43] test(v): add disableHiding in setState tests --- .../igniteui-angular/src/lib/grids/state.directive.spec.ts | 2 +- .../src/lib/grids/state.hierarchicalgrid.spec.ts | 4 ++-- .../igniteui-angular/src/lib/grids/state.treegrid.spec.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index 01edca33b93..56d1d46812c 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -77,7 +77,7 @@ describe('IgxGridState - input properties #grid', () => { }); it('getState should return corect JSON string', () => { - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; const fix = TestBed.createComponent(IgxGridStateComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts index 23e38e1c289..36bfb02d009 100644 --- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts @@ -89,7 +89,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { it('getState should return corect JSON string', () => { pending(); - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; fix.detectChanges(); const state = fix.componentInstance.state; @@ -431,7 +431,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => { const rootGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]'; const childGridColumns = '[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]'; const initialState = HelperFunctions.buildStateString(grid, 'columns', rootGridColumns, childGridColumns); - const newColumns = '[{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"363px","header":"Product Name","resizable":false,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"363px","header":"ID","resizable":false,"searchable":true}]'; + const newColumns = '[{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"363px","header":"Product Name","resizable":false,"searchable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"363px","header":"ID","resizable":false,"searchable":true,"disableHiding":true}]'; const newColumnsState = HelperFunctions.buildStateString(grid, 'columns', newColumns, newColumns); let gridState = state.getState(true, ['columns', 'rowIslands']); diff --git a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts index c6455c638ff..84725e39ae5 100644 --- a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts @@ -78,7 +78,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { it('getState should return corect JSON string', () => { // eslint-disable-next-line max-len - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; fix.detectChanges(); const state = fix.componentInstance.state; From be5977b847ee3575af45cd75d206c014c30033ed Mon Sep 17 00:00:00 2001 From: katherinedragieva Date: Mon, 18 Oct 2021 11:37:22 +0300 Subject: [PATCH 39/43] test(IgxTreeGridState): fix failing tests --- projects/igniteui-angular/src/lib/grids/state.directive.spec.ts | 2 +- projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index 56d1d46812c..03551724407 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -77,7 +77,7 @@ describe('IgxGridState - input properties #grid', () => { }); it('getState should return corect JSON string', () => { - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; const fix = TestBed.createComponent(IgxGridStateComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts index 84725e39ae5..cb92b268773 100644 --- a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts @@ -78,7 +78,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { it('getState should return corect JSON string', () => { // eslint-disable-next-line max-len - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":20,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[{"id":"igx-row-island-childData","parentRowID":"0","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"1","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"2","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"3","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":3,"countRecords":14,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}},{"id":"igx-row-island-childData","parentRowID":"4","state":{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Product Name","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"Col1","width":"140px","header":"Col 1","resizable":true,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col2","width":"110px","header":"Col 2","resizable":false,"searchable":true,"selectable":true,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"Col3","width":"110px","header":"Col 3","resizable":false,"searchable":true,"selectable":true,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":2,"countRecords":7,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}}]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}'; fix.detectChanges(); const state = fix.componentInstance.state; From 64f0486987d88a3ae8e34a9d312b0f95bfd1447c Mon Sep 17 00:00:00 2001 From: Hristo Anastasov Date: Mon, 18 Oct 2021 12:22:37 +0300 Subject: [PATCH 40/43] test(grid): use default value to check getState --- .../igniteui-angular/src/lib/grids/state.directive.spec.ts | 2 +- .../igniteui-angular/src/lib/grids/state.treegrid.spec.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index 03551724407..01edca33b93 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -77,7 +77,7 @@ describe('IgxGridState - input properties #grid', () => { }); it('getState should return corect JSON string', () => { - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[]}'; const fix = TestBed.createComponent(IgxGridStateComponent); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts index cb92b268773..6b3c412365a 100644 --- a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts @@ -78,7 +78,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { it('getState should return corect JSON string', () => { // eslint-disable-next-line max-len - const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}'; + const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"paging":{"index":0,"recordsPerPage":5,"metadata":{"countPages":4,"countRecords":18,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"rowIslands":[]}'; fix.detectChanges(); const state = fix.componentInstance.state; @@ -165,7 +165,7 @@ describe('IgxTreeGridState - input properties #tGrid', () => { const state = fix.componentInstance.state; /* eslint-disable max-len */ const initialColumnsState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; - const newColumnsState = '{"columns":[{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; + const newColumnsState = '{"columns":[{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ID","width":"150px","header":"ID","resizable":true,"searchable":false,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"Name","width":"150px","header":"Name","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":true},{"pinned":false,"sortable":true,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"Age","width":"110px","header":"Age","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"date","hasSummary":true,"field":"Hire Date","width":"140px","header":"Hire Date","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}]}'; /* eslint-enable max-len */ const columns = JSON.parse(newColumnsState).columns; From 533be896a2e6dc14c3e4e3e6a6aeb7345039691b Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Mon, 18 Oct 2021 13:58:38 +0300 Subject: [PATCH 41/43] Update ROADMAP.md Co-authored-by: Konstantin Dinev --- ROADMAP.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ROADMAP.md b/ROADMAP.md index 97c6b181afb..20508db2ac2 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -6,7 +6,7 @@ 1. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667) 2. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554) -3. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556) +3. **DONE** Themes: Refactor Grid theme [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556) 4. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103) 5. Classes to indicate position of auto overlay [#9481](https://github.com/IgniteUI/igniteui-angular/issues/9481) 6. onFilterDone property to expose additional information [#10243](https://github.com/IgniteUI/igniteui-angular/issues/10243) From 80aedbb421f0d7232912ff8caef759b7034a45cf Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 18 Oct 2021 15:54:26 +0300 Subject: [PATCH 42/43] build(*): changing azure pipelines ubuntu img ver --- azure-pipelines.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 1be2b84bd7c..fd992c8b07b 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -1,5 +1,5 @@ pool: - vmImage: 'Ubuntu 16.04' + vmImage: 'ubuntu-latest' steps: - script: npm ci From bc37310f623ad029e8c4a69ed59f77e1d75cf5cf Mon Sep 17 00:00:00 2001 From: Milko Venkov Date: Thu, 21 Oct 2021 17:23:04 +0300 Subject: [PATCH 43/43] Destroy animation players and clean resources (#10267) * fix(overlay): destroy animation players and clean resources, #8450 Co-authored-by: Milko Venkov Co-authored-by: Nikolay Alipiev --- .../lib/directives/toggle/toggle.directive.ts | 2 +- .../src/lib/services/overlay/overlay.ts | 35 ++++++++++++++----- .../src/lib/services/overlay/utilities.ts | 8 ++++- 3 files changed, 35 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts index eb47b6319f2..b495b171f69 100644 --- a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts @@ -322,7 +322,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy { if (this.navigationService && this.id) { this.navigationService.remove(this.id); } - if (!this.collapsed && this._overlayId) { + if (this._overlayId) { this.overlayService.detach(this._overlayId); } this.unsubscribe(); diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts index e97f1a6081a..17e9fc14845 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts @@ -644,7 +644,9 @@ export class IgxOverlayService implements OnDestroy { // to eliminate flickering show the element just before animation start info.wrapperElement.style.visibility = 'hidden'; } - this.closed.emit({ id: info.id, componentRef: info.componentRef, event: info.event }); + if (!info.closeAnimationDetaching) { + this.closed.emit({ id: info.id, componentRef: info.componentRef, event: info.event }); + } delete info.event; } @@ -659,15 +661,14 @@ export class IgxOverlayService implements OnDestroy { if (info.componentRef) { this._appRef.detachView(info.componentRef.hostView); info.componentRef.destroy(); + delete info.componentRef; } if (info.hook) { info.hook.parentElement.insertBefore(info.elementRef.nativeElement, info.hook); info.hook.parentElement.removeChild(info.hook); delete info.hook; } - if (info.wrapperElement) { - delete info.wrapperElement; - } + const index = this._overlayInfos.indexOf(info); this._overlayInfos.splice(index, 1); @@ -679,6 +680,22 @@ export class IgxOverlayService implements OnDestroy { } this.removeCloseOnEscapeListener(); } + + // clean all the resources attached to info + delete info.elementRef; + delete info.settings; + delete info.initialSize; + info.openAnimationDetaching = true; + info.openAnimationPlayer?.destroy(); + delete info.openAnimationPlayer; + delete info.openAnimationInnerPlayer; + info.closeAnimationDetaching = true; + info.closeAnimationPlayer?.destroy(); + delete info.closeAnimationPlayer; + delete info.closeAnimationInnerPlayer; + delete info.ngZone; + delete info.wrapperElement; + info = null; } private playOpenAnimation(info: OverlayInfo) { @@ -924,7 +941,9 @@ export class IgxOverlayService implements OnDestroy { } private openAnimationDone(info: OverlayInfo) { - this.opened.emit({ id: info.id, componentRef: info.componentRef }); + if (!info.openAnimationDetaching) { + this.opened.emit({ id: info.id, componentRef: info.componentRef }); + } if (info.openAnimationPlayer) { info.openAnimationPlayer.reset(); // calling reset does not change hasStarted to false. This is why we are doing it here via internal field @@ -940,7 +959,6 @@ export class IgxOverlayService implements OnDestroy { } private closeAnimationDone(info: OverlayInfo) { - this.closeDone(info); if (info.closeAnimationPlayer) { info.closeAnimationPlayer.reset(); // calling reset does not change hasStarted to false. This is why we are doing it here via internal field @@ -954,16 +972,17 @@ export class IgxOverlayService implements OnDestroy { // calling reset does not change hasStarted to false. This is why we are doing it here via internal field (info.openAnimationPlayer as any)._started = false; } + this.closeDone(info); } private finishAnimations(info: OverlayInfo) { // TODO: should we emit here opened or closed events - if (info.openAnimationPlayer) { + if (info.openAnimationPlayer && info.openAnimationPlayer.hasStarted()) { info.openAnimationPlayer.reset(); // calling reset does not change hasStarted to false. This is why we are doing it here via internal field (info.openAnimationPlayer as any)._started = false; } - if (info.closeAnimationPlayer) { + if (info.closeAnimationPlayer && info.closeAnimationPlayer.hasStarted()) { info.closeAnimationPlayer.reset(); // calling reset does not change hasStarted to false. This is why we are doing it here via internal field (info.closeAnimationPlayer as any)._started = false; diff --git a/projects/igniteui-angular/src/lib/services/overlay/utilities.ts b/projects/igniteui-angular/src/lib/services/overlay/utilities.ts index c68a715fedf..d98f6657a6c 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/utilities.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/utilities.ts @@ -147,8 +147,14 @@ export interface OverlayInfo { initialSize?: Size; hook?: HTMLElement; openAnimationPlayer?: AnimationPlayer; - closeAnimationPlayer?: AnimationPlayer; openAnimationInnerPlayer?: any; + // calling animation.destroy in detach fires animation.done. This should not happen + // this is why we should trace if animation ever started + openAnimationDetaching?: boolean; + closeAnimationPlayer?: AnimationPlayer; + // calling animation.destroy in detach fires animation.done. This should not happen + // this is why we should trace if animation ever started + closeAnimationDetaching?: boolean; closeAnimationInnerPlayer?: any; ngZone: NgZone; transformX?: number;