From c4bf0990a7601ef49a29889c1a7c84dd07869159 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Thu, 10 Feb 2022 17:10:46 +0200 Subject: [PATCH 01/63] fix(grid): fix row indexes in remote virtualization scenario --- .../igniteui-angular/src/lib/grids/grid/grid.component.ts | 4 +++- 1 file changed, 3 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 dba20b93d0d..526d394299f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1062,7 +1062,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @hidden @internal */ public allRows(): RowType[] { - return this.dataView.map((rec, index) => this.createRow(index)); + return this.dataView.map((rec, index) => { + return this.createRow(this.virtualizationState.startIndex + index) + }); } /** From 5b2f71e6aa93fb610701e100b0821d97514a1ba2 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 11 Feb 2022 11:40:23 +0200 Subject: [PATCH 02/63] chore(*): use dataRowList for rows indexes creation --- projects/igniteui-angular/src/lib/grids/grid/grid.component.ts | 2 +- 1 file changed, 1 insertion(+), 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 526d394299f..4afa4e97177 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1063,7 +1063,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, */ public allRows(): RowType[] { return this.dataView.map((rec, index) => { - return this.createRow(this.virtualizationState.startIndex + index) + return this.createRow(this.dataRowList.first.index + index); }); } From e130c687e5e6ce402a17d9295acdb885dfb1f8cd Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 11 Feb 2022 15:33:50 +0200 Subject: [PATCH 03/63] chore(*): calculate index for remote scenarios --- .../src/lib/grids/columns/column.component.ts | 4 +--- .../src/lib/grids/grid/grid.component.ts | 10 ++++++++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 3922e62e0a1..9c72226aa55 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1290,12 +1290,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy * */ public get cells(): CellType[] { - // TODO calclulate index for remote data scenarios - // check indexes in this.dataRowList.first and this.dataRowList.last return this.grid.dataView .map((rec, index) => { if (!this.grid.isGroupByRecord(rec) && !this.grid.isSummaryRow(rec)) { - const cell = new IgxGridCell(this.grid as any, index, this.field); + const cell = new IgxGridCell(this.grid as any, this.grid.dataRowList.first.index + index, this.field); return cell; } }).filter(cell => cell); 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 4afa4e97177..22ab75c35b3 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1030,10 +1030,16 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, * @param index */ public getRowByIndex(index: number): RowType { + let row: RowType; if (index < 0) { return undefined; } - return this.createRow(index); + if (this.dataView.length >= this.virtualizationState.startIndex + index){ + row = this.createRow(index); + }else { + row = this.createRow(this.virtualizationState.startIndex + index); + } + return row; } /** @@ -1103,7 +1109,7 @@ 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) { - return new IgxGridCell(this, rowIndex, columnField); + return new IgxGridCell(this, row.index, columnField); } } From 29c90ef1455fdcac1966735614f738e50177c25f Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 11 Feb 2022 16:19:29 +0200 Subject: [PATCH 04/63] chore(*): fix available data length check --- projects/igniteui-angular/src/lib/grids/grid/grid.component.ts | 2 +- 1 file changed, 1 insertion(+), 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 22ab75c35b3..ee42b76a423 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1034,7 +1034,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, if (index < 0) { return undefined; } - if (this.dataView.length >= this.virtualizationState.startIndex + index){ + if (this.dataView.length >= this.virtualizationState.startIndex + this.virtualizationState.chunkSize){ row = this.createRow(index); }else { row = this.createRow(this.virtualizationState.startIndex + index); From 56dd315291541ba5ec727ec5c49c1c77e3ce5e2d Mon Sep 17 00:00:00 2001 From: Svetloslav Novoselski Date: Tue, 15 Feb 2022 14:21:29 +0200 Subject: [PATCH 05/63] fix(textarea): position correctly resizer for cosy and compact --- .../components/input/_input-group-theme.scss | 35 ++++++++++++++++--- 1 file changed, 30 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 6684040eb7e..44866562ca5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -443,9 +443,14 @@ } %form-group-bundle--box { - padding: 0 rem(16px, map.get($base-scale-size, 'comfortable')); + padding: 0 0 0 rem(16px, map.get($base-scale-size, 'comfortable')); background: var-get($theme, 'box-background'); box-shadow: inset 0 -2px 0 0 var-get($theme, 'idle-bottom-line-color'); + + igx-suffix, + [igxSuffix] { + padding-right: rem(16px, map.get($base-scale-size, 'comfortable')); + } } %form-group-bundle--indigo { @@ -477,11 +482,21 @@ } %form-group-bundle--box-cosy { - padding: 0 rem(16px, map.get($base-scale-size, 'cosy')); + padding: 0 0 0 rem(16px, map.get($base-scale-size, 'cosy')); + + igx-suffix, + [igxSuffix] { + padding-right: rem(16px, map.get($base-scale-size, 'cosy')); + } } %form-group-bundle--box-compact { - padding: 0 rem(16px, map.get($base-scale-size, 'compact')); + padding: 0 0 0 rem(16px, map.get($base-scale-size, 'compact')); + + igx-suffix, + [igxSuffix] { + padding-right: rem(16px, map.get($base-scale-size, 'compact')); + } } %form-group-bundle--hover { @@ -545,11 +560,21 @@ } %form-group-bundle--border-cosy { - padding: 0 rem(16px, map.get($base-scale-size, 'cosy')); + padding: 0 0 0 rem(16px, map.get($base-scale-size, 'cosy')); + + igx-suffix, + [igxSuffix] { + padding-right: rem(16px, map.get($base-scale-size, 'cosy')); + } } %form-group-bundle--border-compact { - padding: 0 rem(16px, map.get($base-scale-size, 'compact')); + padding: 0 0 0 rem(16px, map.get($base-scale-size, 'compact')); + + igx-suffix, + [igxSuffix] { + padding-right: rem(16px, map.get($base-scale-size, 'compact')); + } } %form-group-bundle-border--hover { From cf8d0120f108e008863954f5a279c7f53afdf931 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Mon, 21 Feb 2022 12:03:08 +0200 Subject: [PATCH 06/63] chore(*): use real indexes in remote virtualization --- .../igniteui-angular/src/lib/grids/grid/grid.component.ts | 4 +++- 1 file changed, 3 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 ee42b76a423..cd41387f250 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1037,7 +1037,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, if (this.dataView.length >= this.virtualizationState.startIndex + this.virtualizationState.chunkSize){ row = this.createRow(index); }else { - row = this.createRow(this.virtualizationState.startIndex + index); + if (!(index < this.virtualizationState.startIndex) && !(index > this.virtualizationState.startIndex + this.virtualizationState.chunkSize)) { + row = this.createRow(index); + } } return row; } From 2531debe1cf55f455c5a4b9b26e097d66d95dacd Mon Sep 17 00:00:00 2001 From: VDyulgerov Date: Thu, 24 Feb 2022 11:28:52 +0200 Subject: [PATCH 07/63] fix(grid): IgxGridState error throw on reload --- .../src/lib/grids/grid-base.directive.ts | 9 +++--- .../src/lib/grids/state.directive.spec.ts | 31 +++++++++++++++++-- .../src/lib/grids/state.directive.ts | 4 ++- 3 files changed, 36 insertions(+), 8 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 104a479d558..227f84f47a2 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -1062,7 +1062,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements /** * Emitted before the grid's data view is changed because of a data operation, rebinding, etc. - * + * * @example * ```typescript * @@ -1073,7 +1073,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements /** * Emitted after the grid's data view is changed because of a data operation, rebinding, etc. - * + * * @example * ```typescript * @@ -1081,7 +1081,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements */ @Output() public dataChanged = new EventEmitter(); - + /** * @hidden @internal @@ -4936,7 +4936,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * ``` */ public get hasSummarizedColumns(): boolean { - return this.summaryService.hasSummarizedColumns; + const summarizedColumns = this.columnList.filter(col => col.hasSummary && !col.hidden); + return summarizedColumns.length > 0; } /** 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 fea7377506f..2537b3cc30c 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -443,7 +443,7 @@ describe('IgxGridState - input properties #grid', () => { expect(grid.pinnedRows[0].key).toBe(1); expect(grid.pinnedRows[1].key).toBe(3); }); - + it('setState should correctly restore grid moving state from string', () => { const fix = TestBed.createComponent(IgxGridStateComponent); fix.detectChanges(); @@ -460,7 +460,7 @@ describe('IgxGridState - input properties #grid', () => { expect(grid.moving).toBeFalsy(); gridState = state.getState(true, 'moving'); expect(gridState).toBe(movingState); - + }); it('setState should correctly restore grid moving state from object', () => { @@ -470,7 +470,7 @@ describe('IgxGridState - input properties #grid', () => { const state = fix.componentInstance.state; const movingState = '{"moving":false}'; const initialState = '{"moving":true}'; - const movingStateObject = JSON.parse(movingState); + const movingStateObject = JSON.parse(movingState); let gridState = state.getState(true, 'moving'); expect(gridState).toBe(initialState); @@ -590,6 +590,31 @@ describe('IgxGridState - input properties #grid', () => { gridState = state.getState(true, 'expansion'); expect(gridState).toBe(expansionState); }); + + // fit('createExpressionsTreeFromObject should return null when columns are still not resolved', () => { + // const fix = TestBed.createComponent(IgxGridStateComponent); + // fix.detectChanges(); + // fix.componentInstance.ngOnInit(); + // fix.detectChanges(); + // const grid = fix.componentInstance.grid; + // // grid.columnList = new QueryList(); + // const state = fix.componentInstance.state; + // // eslint-disable-next-line max-len + // + // const advFilteringState = '{"advancedFiltering":{"filteringOperands":[{"fieldName":"InStock","condition":{"name":"true","isUnary":true,"iconName":"is-true"},"searchVal":null,"ignoreCase":true},{"fieldName":"ProductID","condition":{"name":"greaterThan","isUnary":false,"iconName":"greater-than"},"searchVal":"3","ignoreCase":true}],"operator":0,"type":1}}'; + // const initialState = '{"advancedFiltering":{}}'; + // const advFilteringStateObject = JSON.parse(advFilteringState); + // + // let gridState = state.getState(true, 'advancedFiltering'); + // expect(gridState).toBe(initialState); + // + // state.setState(advFilteringStateObject); + // gridState = state.getState(false, 'advancedFiltering') as IGridState; + // + // let areColumnsResolved = grid.columnList.length > 0 || !!gridState.columns + // + // expect(areColumnsResolved).toBe(false); + // }); }); class HelperFunctions { diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts index 26064a89b8b..d225f45d503 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.ts @@ -551,8 +551,10 @@ export class IgxGridStateDirective { let dataType: string; if (this.currGrid.columnList.length > 0) { dataType = this.currGrid.columnList.find(c => c.field === expr.fieldName).dataType; - } else { + } else if (this.state.columns) { dataType = this.state.columns.find(c => c.field === expr.fieldName).dataType; + } else { + return null; } // when ESF, values are stored in Set. // First those values are converted to an array before returning string in the stringifyCallback From fb098834588ab994aa143b67bef695a210b87fc0 Mon Sep 17 00:00:00 2001 From: skrustev Date: Fri, 25 Feb 2022 10:40:50 +0200 Subject: [PATCH 08/63] fix(drag-drop): Fix ghost template not cleared when used with ngFor directive to switch elements. --- .../drag-drop/drag-drop.directive.ts | 20 +++++++++++++------ .../pivot-data-selector.component.html | 3 +-- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts index e577d848e0f..0f3d9d7fc41 100644 --- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts @@ -1,4 +1,4 @@ -import { +import { Directive, ElementRef, EventEmitter, @@ -570,6 +570,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { protected _ghostStartY; protected _ghostHostX = 0; protected _ghostHostY = 0; + protected _dynamicGhostRef; protected _pointerDownId = null; protected _clicked = false; @@ -711,6 +712,10 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { this._destroy.complete(); if (this.ghost && this.ghostElement && this._removeOnDestroy) { + if (this._dynamicGhostRef) { + this._dynamicGhostRef.destroy(); + this._dynamicGhostRef = null; + } this.ghostElement.parentNode.removeChild(this.ghostElement); this.ghostElement = null; } @@ -1088,6 +1093,10 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { if (ghostDestroyArgs.cancel) { return; } + if (this._dynamicGhostRef) { + this._dynamicGhostRef.destroy(); + this._dynamicGhostRef = null; + } this.ghostElement.parentNode.removeChild(this.ghostElement); this.ghostElement = null; } else if (!this.ghost) { @@ -1126,10 +1135,9 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { return; } - let dynamicGhostRef; if (this.ghostTemplate) { - dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate, this.ghostContext); - this.ghostElement = dynamicGhostRef.rootNodes[0]; + this._dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate, this.ghostContext); + this.ghostElement = this._dynamicGhostRef.rootNodes[0]; } else { this.ghostElement = node ? node.cloneNode(true) : this.element.nativeElement.cloneNode(true); } @@ -1155,8 +1163,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { this.ghostCreate.emit(createEventArgs); if (createEventArgs.cancel) { this.ghostElement = null; - if (this.ghostTemplate && dynamicGhostRef) { - dynamicGhostRef.destroy(); + if (this.ghostTemplate && this._dynamicGhostRef) { + this._dynamicGhostRef.destroy(); } return; } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html index a996f620c86..fdbec88c7c6 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html @@ -86,9 +86,8 @@
(dragMove)="onItemDragMove($event)" (dragEnd)="onItemDragEnd($event)" (dropped)="onItemDropped($event, panel.type)" - *igxFor=" + *ngFor=" let item of this.grid[panel.dataKey]; - scrollOrientation: 'vertical'; let index " [id]="item[panel.itemKey]" From 98720bbeb61bba28f52ce757d9d0ae842628071f Mon Sep 17 00:00:00 2001 From: skrustev Date: Mon, 28 Feb 2022 12:44:03 +0200 Subject: [PATCH 09/63] chore(*): Remove ghost before destroying template. --- .../src/lib/directives/drag-drop/drag-drop.directive.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts index 0f3d9d7fc41..b862d1894ea 100644 --- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts @@ -712,12 +712,13 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { this._destroy.complete(); if (this.ghost && this.ghostElement && this._removeOnDestroy) { + this.ghostElement.parentNode.removeChild(this.ghostElement); + this.ghostElement = null; + if (this._dynamicGhostRef) { this._dynamicGhostRef.destroy(); this._dynamicGhostRef = null; } - this.ghostElement.parentNode.removeChild(this.ghostElement); - this.ghostElement = null; } } @@ -1093,12 +1094,12 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy { if (ghostDestroyArgs.cancel) { return; } + this.ghostElement.parentNode.removeChild(this.ghostElement); + this.ghostElement = null; if (this._dynamicGhostRef) { this._dynamicGhostRef.destroy(); this._dynamicGhostRef = null; } - this.ghostElement.parentNode.removeChild(this.ghostElement); - this.ghostElement = null; } else if (!this.ghost) { this.element.nativeElement.style.transitionProperty = ''; this.element.nativeElement.style.transitionDuration = '0.0s'; From 24beb84676f6a36ec0d7b294122a927aa558ce44 Mon Sep 17 00:00:00 2001 From: VDyulgerov Date: Wed, 2 Mar 2022 09:08:47 +0200 Subject: [PATCH 10/63] fix(grid): put actions as parameter --- .../igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 d63f2ab75a6..7718530e681 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 @@ -114,7 +114,7 @@ export abstract class BaseToolbarDirective implements OnDestroy { /** @hidden @internal */ public toggle(anchorElement: HTMLElement, toggleRef: IgxToggleDirective, actions?: IgxColumnActionsComponent): void { if (actions) { - this._setupListeners(toggleRef); + this._setupListeners(toggleRef, actions); const setHeight = () => actions.columnsAreaMaxHeight = this.columnListHeight ?? `${Math.max(this.grid.calcHeight * 0.5, 200)}px`; toggleRef.opening.pipe(first()).subscribe(setHeight); From 1d4c6f2398e1636f83517731789e14b8095c071c Mon Sep 17 00:00:00 2001 From: jackofdiamond5 <16020256+jackofdiamond5@users.noreply.github.com> Date: Mon, 28 Feb 2022 16:24:06 +0200 Subject: [PATCH 11/63] test(simple-combo): should retain selection on blur --- .../simple-combo/simple-combo.component.spec.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index 52d95c46529..8182464321b 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -928,6 +928,21 @@ describe('IgxSimpleCombo', () => { expect(combo.close).toHaveBeenCalledTimes(1); }); + it('should retain selection after blurring', () => { + combo.open(); + fixture.detectChanges(); + const item1 = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`)); + expect(item1).toBeDefined(); + + item1.triggerEventHandler('click', UIInteractions.getMouseEvent('click')); + fixture.detectChanges(); + + UIInteractions.triggerEventHandlerKeyDown('Tab', input); + fixture.detectChanges(); + + expect(combo.selection.length).toBe(1); + }); + it('should scroll to top when opened and there is no selection', () => { combo.deselect(); fixture.detectChanges(); From 557ffa4203a5c18d99797e0cdec80d2322a5e470 Mon Sep 17 00:00:00 2001 From: jackofdiamond5 <16020256+jackofdiamond5@users.noreply.github.com> Date: Mon, 28 Feb 2022 16:28:15 +0200 Subject: [PATCH 12/63] fix(simple-combo): retains selection on blur --- .../lib/simple-combo/simple-combo.component.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts index d61b8b993d8..ce15f68b1af 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts @@ -88,6 +88,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co public composing = false; private _updateInput = true; + // stores the last filtered value - move to common? private _internalFilter = ''; @@ -109,7 +110,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co this._searchValue = val; } - private get selectedItem() { + private get selectedItem(): any { return this.selectionService.get(this.id).values().next().value; } @@ -200,13 +201,13 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co this.filterValue = this.searchValue = this.comboInput.value; return; } - this._internalFilter = this.filterValue; this.filterValue = this.searchValue = ''; }); this.dropdown.opened.pipe(takeUntil(this.destroy$)).subscribe(() => { if (this.composing) { this.comboInput.focus(); } + this._internalFilter = this.comboInput.value; }); this.dropdown.closing.pipe(takeUntil(this.destroy$)).subscribe((args) => { if (this.getEditElement() && !args.event) { @@ -401,7 +402,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co argsSelection = Array.isArray(argsSelection) ? argsSelection : [argsSelection]; this.selectionService.select_items(this.id, argsSelection, true); if (this._updateInput) { - this.comboInput.value = this._value = displayText !== args.displayText + this.comboInput.value = this._internalFilter = this._value = displayText !== args.displayText ? args.displayText : this.createDisplayText(argsSelection, [args.oldSelection]); } @@ -437,7 +438,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co this.clearAndClose(); return; } - if (this.isPartialMatch(filtered) || this.selectedItem !== this._internalFilter) { + if (this.isPartialMatch(filtered) || this.getElementVal(filtered) !== this._internalFilter) { this.clearAndClose(); } } @@ -446,7 +447,11 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co return !!this._internalFilter && this._internalFilter.length !== this.getElementVal(filtered).length; } - private getElementVal(element: any) { + private getElementVal(element: any): any | null { + if (!element) { + return null; + } + return this.displayKey ? element[this.displayKey] : element; } From 8b81359c1b49a31388a2864a70f2f88815c1bdce Mon Sep 17 00:00:00 2001 From: jackofdiamond5 <16020256+jackofdiamond5@users.noreply.github.com> Date: Wed, 2 Mar 2022 12:55:33 +0200 Subject: [PATCH 13/63] chore(simple-combo): add explicit typing to methods --- .../simple-combo/simple-combo.component.ts | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts index ce15f68b1af..00b8f2aac0a 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts @@ -131,7 +131,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co /** @hidden @internal */ @HostListener('keydown.ArrowDown', ['$event']) @HostListener('keydown.Alt.ArrowDown', ['$event']) - public onArrowDown(event: Event) { + public onArrowDown(event: Event): void { if (this.collapsed) { event.preventDefault(); event.stopPropagation(); @@ -174,7 +174,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } /** @hidden @internal */ - public writeValue(value: any) { + public writeValue(value: any): void { const oldSelection = this.selection; this.selectionService.select_items(this.id, value ? [value] : [], true); this.cdr.markForCheck(); @@ -182,7 +182,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } /** @hidden @internal */ - public ngAfterViewInit() { + public ngAfterViewInit(): void { this.virtDir.contentSizeChange.pipe(takeUntil(this.destroy$)).subscribe(() => { if (this.selection.length > 0) { const index = this.virtDir.igxForOf.findIndex(e => { @@ -225,7 +225,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } /** @hidden @internal */ - public handleInputChange(event?: any) { + public handleInputChange(event?: any): void { if (event !== undefined) { this.filterValue = this._internalFilter = this.searchValue = typeof event === 'string' ? event : event.target.value; } @@ -247,7 +247,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } /** @hidden @internal */ - public handleKeyDown(event: KeyboardEvent) { + public handleKeyDown(event: KeyboardEvent): void { if (event.key === this.platformUtil.KEYMAP.ENTER) { const filtered = this.filteredData.find(this.findMatch); if (filtered === null || filtered === undefined) { @@ -275,7 +275,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } /** @hidden @internal */ - public handleKeyUp(event: KeyboardEvent) { + public handleKeyUp(event: KeyboardEvent): void { if (event.key === this.platformUtil.KEYMAP.ARROW_DOWN) { const firstItem = this.selectionService.first_item(this.id); this.dropdown.focusedItem = firstItem && this.filteredData.length > 0 @@ -286,7 +286,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } /** @hidden @internal */ - public handleItemKeyDown(event: KeyboardEvent) { + public handleItemKeyDown(event: KeyboardEvent): void { if (event.key === this.platformUtil.KEYMAP.ARROW_UP && event.altKey) { this.close(); this.comboInput.focus(); @@ -298,13 +298,13 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } /** @hidden @internal */ - public handleItemClick() { + public handleItemClick(): void { this.close(); this.comboInput.focus(); } /** @hidden @internal */ - public onBlur() { + public onBlur(): void { if (this.collapsed) { this.clearOnBlur(); } @@ -317,7 +317,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } /** @hidden @internal */ - public handleClear(event: Event) { + public handleClear(event: Event): void { if (this.disabled) { return; } @@ -337,14 +337,14 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } /** @hidden @internal */ - public handleOpened() { + public handleOpened(): void { this.triggerCheck(); this.dropdownContainer.nativeElement.focus(); this.opened.emit({ owner: this }); } /** @hidden @internal */ - public handleClosing(e: IBaseCancelableBrowserEventArgs) { + public handleClosing(e: IBaseCancelableBrowserEventArgs): void { const args: IBaseCancelableBrowserEventArgs = { owner: this, event: e.event, cancel: e.cancel }; this.closing.emit(args); e.cancel = args.cancel; @@ -369,7 +369,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } /** @hidden @internal */ - public onClick(event: Event) { + public onClick(event: Event): void { super.onClick(event); if (this.comboInput.value.length === 0) { this.virtDir.scrollTo(0); @@ -411,7 +411,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co } } - protected createDisplayText(newSelection: any[], oldSelection: any[]) { + protected createDisplayText(newSelection: any[], oldSelection: any[]): any { if (this.isRemote) { return this.getRemoteSelection(newSelection, oldSelection); } @@ -432,7 +432,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co this.setSelection(newSelection); } - private clearOnBlur() { + private clearOnBlur(): void { const filtered = this.filteredData.find(this.findMatch); if (filtered === undefined || filtered === null || !this.selectedItem) { this.clearAndClose(); @@ -455,7 +455,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co return this.displayKey ? element[this.displayKey] : element; } - private clearAndClose() { + private clearAndClose(): void { this.clearSelection(true); this._internalFilter = ''; this.searchValue = ''; From 5437e49d1918962d8105cad775c95e7829922b15 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 2 Mar 2022 17:01:39 +0200 Subject: [PATCH 14/63] feat(pivot): Add initial implementation for excel style filtering. --- .../src/lib/data-operations/pivot-strategy.ts | 37 ++++++++++++++++- .../grids/pivot-grid/pivot-grid.component.ts | 41 +------------------ 2 files changed, 37 insertions(+), 41 deletions(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts index a0f284d395d..6bbf67d4079 100644 --- a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts @@ -1,9 +1,11 @@ -import { PivotGridType } from '../grids/common/grid.interface'; +import { ColumnType, PivotGridType } from '../grids/common/grid.interface'; import { DEFAULT_PIVOT_KEYS, IPivotDimension, IPivotDimensionStrategy, IPivotGridRecord, IPivotKeys, IPivotValue, PivotDimensionType } from '../grids/pivot-grid/pivot-grid.interface'; import { PivotUtil } from '../grids/pivot-grid/pivot-util'; -import { FilteringStrategy } from './filtering-strategy'; +import { FilteringStrategy, IgxFilterItem } from './filtering-strategy'; import { cloneArray } from '../core/utils'; +import { IFilteringExpressionsTree } from './filtering-expressions-tree'; +import { IFilteringExpression } from './filtering-expression.interface'; export class NoopPivotDimensionsStrategy implements IPivotDimensionStrategy { private static _instance: NoopPivotDimensionsStrategy = null; @@ -147,4 +149,35 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy { const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName); return PivotUtil.extractValueFromDimension(dim, rec); } + + public getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise { + const grid = (column.grid as any); + const enabledDimensions = grid.allDimensions.filter(x => x && x.enabled); + let data = column.grid.gridAPI.filterDataByExpressions(tree); + const dim = enabledDimensions.find(x => x.memberName === column.field); + const allValuesHierarchy = PivotUtil.getFieldsHierarchy( + data, + [dim], + PivotDimensionType.Column, + grid.pivotKeys + ); + const items: IgxFilterItem[] = this._getFilterItems(allValuesHierarchy, grid.pivotKeys); + return Promise.resolve(items); + } + + private _getFilterItems(hierarchy: Map, pivotKeys: IPivotKeys) : IgxFilterItem[] { + const items: IgxFilterItem[] = []; + hierarchy.forEach((value) => { + const val = value.value; + const path = val.split(pivotKeys.columnDimensionSeparator); + const hierarchicalValue = path.length > 1 ? path.map(x => `[` + x +`]`).join('.') : val; + const text = path[path.length -1]; + items.push({ + value: hierarchicalValue, + label: text, + children: this._getFilterItems(value.children, pivotKeys) + }); + }); + return items; + } } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 41708382c3e..25e35f5fea7 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -885,7 +885,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni public ngOnInit() { // pivot grid always generates columns automatically. this.autoGenerate = true; - this.uniqueColumnValuesStrategy = this.uniqueColumnValuesStrategy || this.uniqueDimensionValuesStrategy; const config = this.pivotConfiguration; this.filteringExpressionsTree = PivotUtil.buildExpressionTree(config); super.ngOnInit(); @@ -922,15 +921,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni this.cdr.detectChanges(); } - public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree, - done: (uniqueValues: any[]) => void) { - const enabledDimensions = this.allDimensions.filter(x => x && x.enabled); - const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === column.field); - if (dim) { - this.getDimensionData(dim, exprTree, uniqueValues => done(uniqueValues)); - } - } - /** * Gets the full list of dimensions. * @@ -944,33 +934,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni return (config.rows || []).concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined); } - /** - * @hidden @internal - */ - public getDimensionData(dim: IPivotDimension, - dimExprTree: IFilteringExpressionsTree, - done: (colVals: any[]) => void) { - let columnValues = []; - const data = this.gridAPI.get_data(); - const state = { - expressionsTree: dimExprTree, - strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(), - advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree - }; - const filtered = FilterUtil.filter(data, state, this); - const allValuesHierarchy = PivotUtil.getFieldsHierarchy( - filtered, - [dim], - PivotDimensionType.Column, - this.pivotKeys - ); - const flatData = Array.from(allValuesHierarchy.values()); - // Note: Once ESF supports tree view, we should revert this back. - columnValues = flatData.map(record => record['value']); - done(columnValues); - return; - } - /** @hidden @internal */ public createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean) { options.outlet = this.outlet; @@ -1904,10 +1867,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } protected generateDimensionColumns(): IgxColumnComponent[] { - const leafFields = PivotUtil.flatten(this.allDimensions, 0).filter(x => !x.childLevel).map(x => x.memberName); + const rootFields = this.allDimensions.map(x => x.memberName); const columns = []; const factory = this.resolver.resolveComponentFactory(IgxColumnComponent); - leafFields.forEach((field) => { + rootFields.forEach((field) => { const ref = factory.create(this.viewRef.injector); ref.instance.field = field; ref.changeDetectorRef.detectChanges(); From 3fadb72dce45edc6c1b40bb4cf0330a604acb8b0 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 2 Mar 2022 17:25:25 +0200 Subject: [PATCH 15/63] chore(*): Handle more complex hierarchy value extraction. Additional small fixes. --- .../src/lib/data-operations/pivot-strategy.ts | 16 ++++++++++++++-- .../lib/grids/pivot-grid/pivot-grid.component.ts | 12 ++---------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts index 6bbf67d4079..1d007836be3 100644 --- a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts @@ -146,8 +146,9 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy { const config = grid.pivotConfiguration; const allDimensions = grid.allDimensions; const enabledDimensions = allDimensions.filter(x => x && x.enabled); - const dim = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName); - return PivotUtil.extractValueFromDimension(dim, rec); + const dim :IPivotDimension = PivotUtil.flatten(enabledDimensions).find(x => x.memberName === fieldName); + const value = dim.childLevel ? this._getDimensionValueHierarchy(dim, rec).map(x => `[` + x +`]`).join('.') : PivotUtil.extractValueFromDimension(dim, rec); + return value; } public getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise { @@ -180,4 +181,15 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy { }); return items; } + + private _getDimensionValueHierarchy(dim: IPivotDimension, rec: any) : string[] { + let path = []; + let value = PivotUtil.extractValueFromDimension(dim, rec); + path.push(value); + if (dim.childLevel) { + const childVals = this._getDimensionValueHierarchy(dim.childLevel, rec); + path = path.concat(childVals); + } + return path; + } } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 25e35f5fea7..4af4c79f82f 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -1932,16 +1932,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni } currentFields.forEach((value) => { let shouldGenerate = true; - if (value.dimension && value.dimension.filter) { - const state = { - expressionsTree: value.dimension.filter.filteringOperands[0], - strategy: this.filterStrategy || new DimensionValuesFilteringStrategy(), - advancedFilteringExpressionsTree: this.advancedFilteringExpressionsTree - }; - const filtered = FilterUtil.filter(cloneArray(value.records), state, this); - if (filtered.length === 0) { - shouldGenerate = false; - } + if (data.length === 0) { + shouldGenerate = false; } if (shouldGenerate && (value.children == null || value.children.length === 0 || value.children.size === 0)) { const col = this.createColumnForDimension(value, data, parent, this.hasMultipleValues); From 1d212c6b127d2e5e271149a8ff104a2e4ffa7a01 Mon Sep 17 00:00:00 2001 From: MKirova Date: Wed, 2 Mar 2022 19:07:22 +0200 Subject: [PATCH 16/63] chore(*): Update tests that render tree view in excel-style filter. --- .../lib/grids/pivot-grid/pivot-grid.spec.ts | 79 ++++++++++++------- 1 file changed, 50 insertions(+), 29 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 9cb6d0ae8d6..e49ba0a5a90 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -11,7 +11,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec'; import { PivotGridFunctions } from '../../test-utils/pivot-grid-functions.spec'; import { IgxPivotGridTestBaseComponent, IgxPivotGridTestComplexHierarchyComponent, IgxTotalSaleAggregate } from '../../test-utils/pivot-grid-samples.spec'; -import { UIInteractions } from '../../test-utils/ui-interactions.spec'; +import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec'; import { IgxPivotDateAggregate, IgxPivotNumericAggregate } from './pivot-grid-aggregate'; import { IgxPivotDateDimension } from './pivot-grid-dimensions'; import { IPivotGridRecord, PivotDimensionType } from './pivot-grid.interface'; @@ -423,7 +423,7 @@ describe('IgxPivotGrid #pivotGrid', () => { describe('IgxPivotGrid Features #pivotGrid', () => { - it('should show excel style filtering via dimension chip.', () => { + it('should show excel style filtering via dimension chip.', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; expect(pivotGrid.filterStrategy).toBeInstanceOf(DimensionValuesFilteringStrategy); const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; @@ -433,35 +433,52 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(excelMenu.parentElement.parentElement.attributes.hidden).not.toBeUndefined(); filterIcon.click(); + await wait(100); fixture.detectChanges(); const esfSearch = GridFunctions.getExcelFilteringSearchComponent(fixture, excelMenu, 'igx-pivot-grid'); + const checkBoxes = esfSearch.querySelectorAll('igx-checkbox'); - // should show and should display correct checkboxes. + // should show Select All checkbox expect(excelMenu.parentElement.parentElement.attributes.hidden).toBeUndefined(); expect((checkBoxes[0].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Select All'); - expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Accessories'); - expect((checkBoxes[2].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Bikes'); - expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Clothing'); - expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Components'); + + // expand tree hierarchy + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 0); + await wait(100); + fixture.detectChanges(); + // should show correct tree items + const treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fixture, excelMenu, 'igx-pivot-grid'); + expect(treeItems.length).toBe(5); + + expect(treeItems[1].innerText).toBe('Clothing'); + expect(treeItems[2].innerText).toBe('Bikes'); + expect(treeItems[3].innerText).toBe('Accessories'); + expect(treeItems[4].innerText).toBe('Components'); }); - it('should filter rows via excel style filtering dimension chip.', () => { + it('should filter rows via excel style filtering dimension chip.', async() => { const pivotGrid = fixture.componentInstance.pivotGrid; const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row'); const rowChip = headerRow.querySelector('igx-chip[id="All"]'); const filterIcon = rowChip.querySelectorAll('igx-icon')[2]; filterIcon.click(); + await wait(100); fixture.detectChanges(); - const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; - const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-pivot-grid')); + // expand tree hierarchy + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 0); + await wait(100); + fixture.detectChanges(); + const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; + const checkboxes = GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-tree-grid'); + debugger; // uncheck Accessories - checkboxes[1].click(); + checkboxes[4].click(); fixture.detectChanges(); // uncheck Bikes - checkboxes[2].click(); + checkboxes[3].click(); fixture.detectChanges(); // Click 'apply' button to apply filter. @@ -478,12 +495,13 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(rowDimensionHeaders).toEqual(expectedHeaders); }); - it('should filter columns via excel style filtering dimension chip.', () => { + it('should filter columns via excel style filtering dimension chip.', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row'); const rowChip = headerRow.querySelector('igx-chip[id="Country"]'); const filterIcon = rowChip.querySelectorAll('igx-icon')[2]; filterIcon.click(); + await wait(100); fixture.detectChanges(); const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-pivot-grid')); @@ -493,7 +511,7 @@ describe('IgxPivotGrid #pivotGrid', () => { fixture.detectChanges(); // uncheck Uruguay - checkboxes[2].click(); + checkboxes[3].click(); fixture.detectChanges(); @@ -507,7 +525,7 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(colHeaders).toEqual(expected); }); - it('should show filters chips', () => { + it('should show filters chips', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; pivotGrid.pivotConfiguration.filters = [{ memberName: 'SellerName', @@ -523,19 +541,20 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(excelMenu.parentElement.parentElement.attributes.hidden).not.toBeUndefined(); filterIcon.click(); + await wait(100); fixture.detectChanges(); const esfSearch = GridFunctions.getExcelFilteringSearchComponent(fixture, excelMenu, 'igx-pivot-grid'); const checkBoxes = esfSearch.querySelectorAll('igx-checkbox'); // should show and should display correct checkboxes. expect(excelMenu.parentElement.parentElement.attributes.hidden).toBeUndefined(); expect((checkBoxes[0].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Select All'); - expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('David'); + expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Stanley'); expect((checkBoxes[2].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Elisa'); - expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('John'); - expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Larry'); + expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Lydia'); + expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('David'); }); - it('should show filters in chips dropdown button', () => { + it('should show filters in chips dropdown button', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; pivotGrid.pivotConfiguration.filters = [ { @@ -556,6 +575,7 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(excelMenu.parentElement.parentElement.attributes.hidden).not.toBeUndefined(); dropdownIcon.click(); + await wait(100); fixture.detectChanges(); const chips = excelMenu.querySelectorAll('igx-chip'); @@ -569,10 +589,10 @@ describe('IgxPivotGrid #pivotGrid', () => { // should show and should display correct checkboxes. expect(excelMenu.parentElement.parentElement.attributes.hidden).toBeUndefined(); expect((checkBoxes[0].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Select All'); - expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('David'); + expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Stanley'); expect((checkBoxes[2].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Elisa'); - expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('John'); - expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Larry'); + expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Lydia'); + expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('David'); // switch to the `ProductCategory` filters const chipAreaElement = fixture.debugElement.queryAll(By.directive(IgxChipsAreaComponent)); @@ -582,18 +602,19 @@ describe('IgxPivotGrid #pivotGrid', () => { id: chips[1].id } }); + await wait(500); fixture.detectChanges(); esfSearch = GridFunctions.getExcelFilteringSearchComponent(fixture, excelMenu, 'igx-pivot-grid'); checkBoxes = esfSearch.querySelectorAll('igx-checkbox'); expect((checkBoxes[0].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Select All'); - expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Accessories'); + expect((checkBoxes[1].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Clothing'); expect((checkBoxes[2].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Bikes'); - expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Clothing'); + expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Accessories'); expect((checkBoxes[4].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('Components'); }); - it('should be able to filter from chips dropdown button', () => { + it('should be able to filter from chips dropdown button', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; pivotGrid.pivotConfiguration.filters = [ { @@ -614,16 +635,16 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(excelMenu.parentElement.parentElement.attributes.hidden).not.toBeUndefined(); dropdownIcon.click(); + await wait(100); fixture.detectChanges(); const checkBoxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-pivot-grid')); - // uncheck David - checkBoxes[1].click(); + checkBoxes[4].click(); fixture.detectChanges(); - // uncheck Elisa - checkBoxes[5].click(); + // uncheck Lydia + checkBoxes[3].click(); fixture.detectChanges(); // Click 'apply' button to apply filter. From 643d46fdaa4b6faff1b8b464177245a3061959c7 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 4 Mar 2022 11:45:55 +0200 Subject: [PATCH 17/63] test(*): add remote paging row index test --- .../lib/grids/grid/grid.pagination.spec.ts | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts index 16f53da7942..eb6221eb73c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts @@ -84,7 +84,7 @@ describe('IgxGrid - Grid Paging #grid', () => { it('should paginate data API', () => { fix.detectChanges(); - // Goto page 3 through API and listen for event + // Goto page 3 through API and listen for event spyOn(grid.pagingDone, 'emit'); grid.paginate(2); @@ -197,6 +197,7 @@ describe('IgxGrid - Grid Paging #grid', () => { expect(grid.nativeElement.querySelectorAll('.igx-paginator > select').length).toEqual(0); }); + it('change paging pages per page API', (async () => { fix.detectChanges(); grid.height = '300px'; @@ -494,5 +495,23 @@ describe('IgxGrid - Grid Paging #grid', () => { grid = fix.componentInstance.grid; expect(grid.paginator.totalPages).toBe(4); })); + + it('should get correct rowIndex in remote paging', fakeAsync(() => { + fix = TestBed.createComponent(RemotePagingComponent); + fix.detectChanges(); + tick(); + + grid = fix.componentInstance.grid; + expect(grid.paginator.totalPages).toBe(4); + const page = (index: number) => grid.page = index; + let desiredPageIndex = 2; + page(2); + fix.detectChanges(); + tick(); + expect(grid.page).toBe(desiredPageIndex); + + expect(grid.getRowByIndex(0).cells[1].value).toBe('Debra Morton') + expect(grid.getRowByIndex(0).viewIndex).toBe(6); + })); }); From f9595f11859709b50be9955c649a7d4c64fc4f23 Mon Sep 17 00:00:00 2001 From: dobromirts Date: Fri, 4 Mar 2022 12:07:09 +0200 Subject: [PATCH 18/63] chore(*): fix row indexes in remote paging --- .../src/lib/grids/columns/column.component.ts | 3 ++- .../src/lib/grids/grid/grid.component.ts | 20 ++++++++++++++----- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 9c72226aa55..14a5468abc8 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -1293,7 +1293,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy return this.grid.dataView .map((rec, index) => { if (!this.grid.isGroupByRecord(rec) && !this.grid.isSummaryRow(rec)) { - const cell = new IgxGridCell(this.grid as any, this.grid.dataRowList.first.index + index, this.field); + this.grid.pagingMode === 1 && this.grid.paginator.page !== 0 ? index = index = index + this.grid.paginator.perPage * this.grid.paginator.page : index = this.grid.dataRowList.first.index + index; + const cell = new IgxGridCell(this.grid as any, index, this.field); return cell; } }).filter(cell => cell); 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 cd41387f250..5cf10032648 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -1034,13 +1034,17 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, if (index < 0) { return undefined; } - if (this.dataView.length >= this.virtualizationState.startIndex + this.virtualizationState.chunkSize){ + if (this.dataView.length >= this.virtualizationState.startIndex + this.virtualizationState.chunkSize) { row = this.createRow(index); - }else { + } else { if (!(index < this.virtualizationState.startIndex) && !(index > this.virtualizationState.startIndex + this.virtualizationState.chunkSize)) { row = this.createRow(index); } } + + if (this.gridAPI.grid.pagingMode === 1 && this.gridAPI.grid.page !== 0) { + row.index = index + this.paginator.perPage * this.paginator.page; + } return row; } @@ -1071,7 +1075,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, */ public allRows(): RowType[] { return this.dataView.map((rec, index) => { - return this.createRow(this.dataRowList.first.index + index); + this.pagingMode === 1 && this.paginator.page !== 0 ? index = index + this.paginator.perPage * this.paginator.page : index = this.dataRowList.first.index + index; + return this.createRow(index); }); } @@ -1111,6 +1116,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.pagingMode === 1 && this.gridAPI.grid.page !== 0) { + row.index = rowIndex + this.paginator.perPage * this.paginator.page; + } return new IgxGridCell(this, row.index, columnField); } } @@ -1153,11 +1161,13 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType, let rec: any; if (index < 0 || index >= this.dataView.length) { - if (index >= this.dataView.length){ + if (this.pagingMode === 1 && this.paginator.page !== 0) { + rec = data ?? this.dataView[index - this.paginator.perPage * this.paginator.page]; + } else if (index >= this.dataView.length) { const virtIndex = index - this.gridAPI.grid.virtualizationState.startIndex; rec = data ?? this.dataView[virtIndex]; } - }else { + } else { rec = data ?? this.dataView[index]; } From 5cab09f3c2e6c6191d0a829e85e7509b71978cf0 Mon Sep 17 00:00:00 2001 From: MKirova Date: Fri, 4 Mar 2022 12:17:24 +0200 Subject: [PATCH 19/63] chore(*): Add filtering test with complex hierarchy. --- .../lib/grids/pivot-grid/pivot-grid.spec.ts | 131 +++++++++++++++++- 1 file changed, 127 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index e49ba0a5a90..e6c5074a35b 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -456,7 +456,7 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(treeItems[4].innerText).toBe('Components'); }); - it('should filter rows via excel style filtering dimension chip.', async() => { + it('should filter rows via excel style filtering dimension chip.', async () => { const pivotGrid = fixture.componentInstance.pivotGrid; const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row'); const rowChip = headerRow.querySelector('igx-chip[id="All"]'); @@ -472,7 +472,6 @@ describe('IgxPivotGrid #pivotGrid', () => { const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; const checkboxes = GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-tree-grid'); - debugger; // uncheck Accessories checkboxes[4].click(); fixture.detectChanges(); @@ -688,6 +687,130 @@ describe('IgxPivotGrid #pivotGrid', () => { expect(filtersChip).not.toBeUndefined(); }); + it('should show complex tree and allow filtering for Date dimension', async () => { + const pivotGrid = fixture.componentInstance.pivotGrid; + pivotGrid.pivotConfiguration.rows = [new IgxPivotDateDimension( + { + memberName: 'Date', + enabled: true + }, + { + months: true, + quarters: true, + years: true, + fullDate: true, + total: true + } + )]; + + pivotGrid.pipeTrigger++; + pivotGrid.setupColumns(); + fixture.detectChanges(); + + const headerRow = fixture.nativeElement.querySelector('igx-pivot-header-row'); + const rowChip = headerRow.querySelector('igx-chip[id="AllPeriods"]'); + const filterIcon = rowChip.querySelectorAll('igx-icon')[2]; + filterIcon.click(); + await wait(100); + fixture.detectChanges(); + + const excelMenu = GridFunctions.getExcelStyleFilteringComponents(fixture, 'igx-pivot-grid')[1]; + + // expand tree hierarchy + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 0); + await wait(100); + fixture.detectChanges(); + // should show correct tree items + let treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fixture, excelMenu, 'igx-pivot-grid'); + + expect(treeItems.length).toBe(4); + expect(treeItems[0].querySelector('.igx-tree-node__content').textContent).toBe('All Periods'); + expect(treeItems[1].querySelector('.igx-tree-node__content').textContent).toBe('2021'); + expect(treeItems[2].querySelector('.igx-tree-node__content').textContent).toBe('2019'); + expect(treeItems[3].querySelector('.igx-tree-node__content').textContent).toBe('2020'); + + + // expand tree hierarchy 2021 + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 1); + await wait(100); + fixture.detectChanges(); + + treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fixture, excelMenu, 'igx-pivot-grid'); + + expect(treeItems.length).toBe(7); + expect(treeItems[0].querySelector('.igx-tree-node__content').textContent).toBe('All Periods'); + expect(treeItems[1].querySelector('.igx-tree-node__content').textContent).toBe('2021'); + expect(treeItems[2].querySelector('.igx-tree-node__content').textContent).toBe('Q1'); + expect(treeItems[3].querySelector('.igx-tree-node__content').textContent).toBe('Q2'); + expect(treeItems[4].querySelector('.igx-tree-node__content').textContent).toBe('Q4'); + expect(treeItems[5].querySelector('.igx-tree-node__content').textContent).toBe('2019'); + expect(treeItems[6].querySelector('.igx-tree-node__content').textContent).toBe('2020'); + + // expand tree hierarchy Q1 + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 2); + await wait(100); + fixture.detectChanges(); + + treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fixture, excelMenu, 'igx-pivot-grid'); + expect(treeItems.length).toBe(8); + expect(treeItems[0].querySelector('.igx-tree-node__content').textContent).toBe('All Periods'); + expect(treeItems[1].querySelector('.igx-tree-node__content').textContent).toBe('2021'); + expect(treeItems[2].querySelector('.igx-tree-node__content').textContent).toBe('Q1'); + expect(treeItems[3].querySelector('.igx-tree-node__content').textContent).toBe('January'); + expect(treeItems[4].querySelector('.igx-tree-node__content').textContent).toBe('Q2'); + expect(treeItems[5].querySelector('.igx-tree-node__content').textContent).toBe('Q4'); + expect(treeItems[6].querySelector('.igx-tree-node__content').textContent).toBe('2019'); + expect(treeItems[7].querySelector('.igx-tree-node__content').textContent).toBe('2020'); + + // expand tree hierarchy January + GridFunctions.clickExcelTreeNodeExpandIcon(fixture, 3); + await wait(100); + fixture.detectChanges(); + + treeItems = GridFunctions.getExcelStyleSearchComponentTreeNodes(fixture, excelMenu, 'igx-pivot-grid'); + expect(treeItems.length).toBe(9); + expect(treeItems[0].querySelector('.igx-tree-node__content').textContent).toBe('All Periods'); + expect(treeItems[1].querySelector('.igx-tree-node__content').textContent).toBe('2021'); + expect(treeItems[2].querySelector('.igx-tree-node__content').textContent).toBe('Q1'); + expect(treeItems[3].querySelector('.igx-tree-node__content').textContent).toBe('January'); + expect(treeItems[4].querySelector('.igx-tree-node__content').textContent).toBe('01/01/2021'); + expect(treeItems[5].querySelector('.igx-tree-node__content').textContent).toBe('Q2'); + expect(treeItems[6].querySelector('.igx-tree-node__content').textContent).toBe('Q4'); + expect(treeItems[7].querySelector('.igx-tree-node__content').textContent).toBe('2019'); + expect(treeItems[8].querySelector('.igx-tree-node__content').textContent).toBe('2020'); + + + const checkBoxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fixture, excelMenu, 'igx-pivot-grid')); + // uncheck Q1 + checkBoxes[3].click(); + fixture.detectChanges(); + + // uncheck Q2 + checkBoxes[6].click(); + fixture.detectChanges(); + + // uncheck 2019 + checkBoxes[8].click(); + fixture.detectChanges(); + + // uncheck 2020 + checkBoxes[9].click(); + fixture.detectChanges(); + + // Click 'apply' button to apply filter. + GridFunctions.clickApplyExcelStyleFiltering(fixture, excelMenu, 'igx-pivot-grid'); + fixture.detectChanges(); + + // check rows + const rows = pivotGrid.rowList.toArray(); + expect(rows.length).toBe(5); + const expectedHeaders = ['All Periods', '2021', 'Q4', 'December', '12/08/2021']; + const rowHeaders = fixture.debugElement.queryAll( + By.directive(IgxPivotRowDimensionHeaderComponent)); + const rowDimensionHeaders = rowHeaders.map(x => x.componentInstance.column.header); + expect(rowDimensionHeaders).toEqual(expectedHeaders); + }); + it('should apply sorting for dimension via row chip', () => { fixture.detectChanges(); const pivotGrid = fixture.componentInstance.pivotGrid; @@ -713,8 +836,8 @@ describe('IgxPivotGrid #pivotGrid', () => { // should have emitted event expect(pivotGrid.dimensionsSortingExpressionsChange.emit).toHaveBeenCalledTimes(2); const expectedExpressions: ISortingExpression[] = [ - { dir: SortingDirection.Desc, fieldName: 'All', strategy: DefaultPivotSortingStrategy.instance()}, - { dir: SortingDirection.Desc, fieldName: 'ProductCategory', strategy: DefaultPivotSortingStrategy.instance()}, + { dir: SortingDirection.Desc, fieldName: 'All', strategy: DefaultPivotSortingStrategy.instance() }, + { dir: SortingDirection.Desc, fieldName: 'ProductCategory', strategy: DefaultPivotSortingStrategy.instance() }, ]; expect(pivotGrid.dimensionsSortingExpressionsChange.emit).toHaveBeenCalledWith(expectedExpressions); }); From 8167bf53cf8bfd8fc391e8d6d2085b5ef83aa6f8 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Mon, 7 Mar 2022 13:14:21 +0200 Subject: [PATCH 20/63] refactor(radio): refactor radio button bootstrap styles (#11132) Co-authored-by: Dilyana Dimova Co-authored-by: Simeon Simeonoff --- .../styles/components/radio/_radio-theme.scss | 21 ++++++++++++++++--- .../styles/themes/schemas/light/_radio.scss | 14 +++++++++++++ 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss index c358408c14b..f8bab4500ee 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss @@ -20,6 +20,7 @@ /// @param {Color} $empty-color [null] - The unchecked border color. /// @param {Color} $fill-color [null] - The checked border and dot colors. /// @param {Color} $disabled-color [null] - The disabled border and dot colors. +/// @param {Color} $disabled-label-color [null] - The disabled label color. /// @param {Color} $hover-color [null] - The border and dot colors on hover. /// @param {Color} $fill-color-hover [null] - The checked border and dot colors on hover. /// @param {Color} $fill-hover-border-color [null] - The checked dot border color on hover. @@ -45,6 +46,7 @@ $fill-hover-border-color:null, $focus-outline-color: null, $disabled-color: null, + $disabled-label-color: null, $hover-color: null, $fill-color-hover: null, ) { @@ -67,6 +69,7 @@ fill-color: $fill-color, fill-hover-border-color: $fill-hover-border-color, disabled-color: $disabled-color, + disabled-label-color: $disabled-label-color, hover-color: $hover-color, fill-color-hover: $fill-color-hover, focus-outline-color: $focus-outline-color @@ -95,14 +98,14 @@ $size: map.get(( material: em(20px), fluent: em(20px), - bootstrap: em(14px), + bootstrap: em(16px), indigo-design: em(20px), ), $variant); $scale: map.get(( material: scale(.5), fluent: scale(.5), - bootstrap: scale(.3), + bootstrap: scale(.375), indigo-design: scale(.5), ), $variant); @@ -154,7 +157,7 @@ %radio-display--disabled { pointer-events: none; - color: var-get($theme, 'disabled-color'); + color: var-get($theme, 'disabled-label-color'); user-select: none; } @@ -246,6 +249,7 @@ @if $bootstrap-theme { background: transparent; + border: $border-width $border-style var-get($theme, 'disabled-label-color'); } } } @@ -259,6 +263,17 @@ background: var-get($theme, 'disabled-color'); border: $border-width $border-style transparent; } + + @if $bootstrap-theme { + &::after { + background: var-get($theme, 'disabled-color'); + border-color: var-get($theme, 'disabled-color'); + } + + &::before { + background: white; + } + } } %radio-label { diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss index 67e616e29a0..f63cb1b4f6e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_radio.scss @@ -16,6 +16,7 @@ /// @property {Map} fill-color [color: ('secondary', 500)] - The checked border and dot colors. /// @property {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and dot colors on hover. /// @property {Map} disabled-color [color: ('grays', 400)] - The disabled border and dot colors. +/// @property {Map} disabled-label-color [color: ('grays', 400)] - The disabled border and dot colors. /// @see $default-palette $light-radio: ( variant: 'material', @@ -45,6 +46,10 @@ $light-radio: ( disabled-color: ( color: ('grays', 400) + ), + + disabled-label-color: ( + color: ('grays', 400) ) ); @@ -96,6 +101,7 @@ $fluent-radio: extend( /// @property {Map} fill-hover-border-color [color: ('grays', 50)] - The checked dot border color on hover. /// @property {Map} empty-color [color: ('grays', 500)] - The unchecked border color. /// @property {Map} fill-color [color: ('primary', 500)] - The checked border and dot colors. +/// @property {Map} disabled-color [color: ('primary', 200)] - The disabled border and dot colors. /// @property {Color} fill-color-hover [color: ('grays', 50)] - The checked border and dot colors on hover. /// @property {Map} focus-outline-color [color: ('primary', 200)] - The focus outlined color. /// @requires {function} extend @@ -113,6 +119,10 @@ $bootstrap-radio: extend( color: ('grays', 50) ), + disabled-color : ( + color: ('primary', 200) + ), + empty-color: ( color: ('grays', 500) ), @@ -175,6 +185,10 @@ $indigo-radio: extend( disabled-color: ( color: ('grays', 300) + ), + + disabled-label-color: ( + color: ('grays', 300) ) ) ); From b5ca907565fbc2b6eccc502abafbd3ee2e9dc528 Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 7 Mar 2022 14:05:34 +0200 Subject: [PATCH 21/63] chore(*): Generate empty filter item if noop strategies are used. --- .../igniteui-angular/src/lib/data-operations/pivot-strategy.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts index 1d007836be3..a6a124aafad 100644 --- a/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts +++ b/projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts @@ -162,7 +162,8 @@ export class DimensionValuesFilteringStrategy extends FilteringStrategy { PivotDimensionType.Column, grid.pivotKeys ); - const items: IgxFilterItem[] = this._getFilterItems(allValuesHierarchy, grid.pivotKeys); + const isNoop = grid.pivotConfiguration.columnStrategy instanceof NoopPivotDimensionsStrategy || grid.pivotConfiguration.rowStrategy instanceof NoopPivotDimensionsStrategy; + const items: IgxFilterItem[] = !isNoop ? this._getFilterItems(allValuesHierarchy, grid.pivotKeys) : [{value : ''}]; return Promise.resolve(items); } From 22726f1cf2cb01ff54347f32b8a77750452c00c4 Mon Sep 17 00:00:00 2001 From: VDyulgerov Date: Mon, 7 Mar 2022 14:09:06 +0200 Subject: [PATCH 22/63] fix(grid): add case for dateTime --- .../igniteui-angular/src/lib/grids/state.directive.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts index 6f227bc3d64..74935e9e6ff 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.ts @@ -6,8 +6,10 @@ import { IgxColumnGroupComponent } from './columns/column-group.component'; import { IGroupingExpression } from '../data-operations/grouping-expression.interface'; import { IPagingState } from '../data-operations/paging-state.interface'; import { GridColumnDataType } from '../data-operations/data-util'; -import { IgxBooleanFilteringOperand, IgxNumberFilteringOperand, IgxDateFilteringOperand, - IgxStringFilteringOperand, IFilteringOperation} from '../data-operations/filtering-condition'; +import { + IgxBooleanFilteringOperand, IgxNumberFilteringOperand, IgxDateFilteringOperand, + IgxStringFilteringOperand, IFilteringOperation, IgxDateTimeFilteringOperand +} from '../data-operations/filtering-condition'; import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface'; import { IGroupingState } from '../data-operations/groupby-state.interface'; import { IgxGridComponent } from './grid/grid.component'; @@ -585,6 +587,9 @@ export class IgxGridStateDirective { case GridColumnDataType.Date: filters = IgxDateFilteringOperand.instance(); break; + case GridColumnDataType.DateTime: + filters = IgxDateTimeFilteringOperand.instance(); + break; case GridColumnDataType.String: default: filters = IgxStringFilteringOperand.instance(); From d4d945fec13061f4ac57a8f2d7a02cf0fc8477ac Mon Sep 17 00:00:00 2001 From: MKirova Date: Mon, 7 Mar 2022 14:54:38 +0200 Subject: [PATCH 23/63] fix(igxGrid): Execute column notifyOnChanges after move on next detection cycle because if template has ngIf it will also trigger column collection change on template re-evaluation. --- .../src/lib/grids/grid-base.directive.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 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 a70f431b0f5..90ce42465f5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6219,12 +6219,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * @hidden */ protected _moveColumns(from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition) { - const list = this.columnList.toArray(); - this._reorderColumns(from, to, pos, list); - const newList = this._resetColumnList(list); - this.columnList.reset(newList); - this.columnList.notifyOnChanges(); - this._columns = this.columnList.toArray(); + Promise.resolve().then(() => { + const list = this.columnList.toArray(); + this._reorderColumns(from, to, pos, list); + const newList = this._resetColumnList(list); + this.columnList.reset(newList); + this.columnList.notifyOnChanges(); + this._columns = this.columnList.toArray(); + }); } /** From 457920099fe185a8f11b2b89ff1075d8659d2ce6 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Tue, 8 Mar 2022 09:40:05 +0200 Subject: [PATCH 24/63] style(list): fix border styles in bootstrap (#11181) Co-authored-by: Dilyana Dimova --- .../lib/core/styles/components/list/_list-theme.scss | 12 ++++++++---- src/app/list/list.sample.html | 8 -------- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index 21be3c950d4..8baeaf9528f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -312,10 +312,6 @@ overflow: hidden; z-index: 0; border-radius: var-get($theme, 'border-radius'); - - @if $bootstrap-theme { - border: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); - } } %igx-list--empty { @@ -355,6 +351,14 @@ color: var-get($theme, 'item-text-color'); background: var-get($theme, 'item-background'); + @if $bootstrap-theme { + border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color'); + + &:last-of-type { + border-bottom: none; + } + } + &:hover { color: var-get($theme, 'item-text-color-hover'); background: var-get($theme, 'item-background-hover'); diff --git a/src/app/list/list.sample.html b/src/app/list/list.sample.html index 601420d0fc9..6ffc9795cbd 100644 --- a/src/app/list/list.sample.html +++ b/src/app/list/list.sample.html @@ -12,12 +12,10 @@

Cras justo odio

-

Dapibus ac facilisis in

-

Morbi leo risus

@@ -38,7 +36,6 @@ info - @@ -74,7 +71,6 @@

{{employee.name}}

Custom text content more_horiz - Icon | Title | Subtitle | Action icon @@ -85,7 +81,6 @@

{{employee.name}}

more_horiz info - @@ -104,7 +99,6 @@

{{employee.name}}

{{employee.position}}

more_horiz - @@ -142,7 +136,6 @@

{{employee.name}}

{{employee.description}}

more_horiz - @@ -160,7 +153,6 @@

{{employee.name}}

{{employee.position}}

- From bfc92f257d5b66383dc0f4026afc9dc0aac428f8 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Tue, 8 Mar 2022 09:53:45 +0200 Subject: [PATCH 25/63] fix:(button) bootstrap theme disabled colors. (#11167) Co-authored-by: Simeon Simeonoff --- .../styles/themes/schemas/light/_button.scss | 40 ++++++++++++++++++- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss index a75f9d77435..65da089b078 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss @@ -447,6 +447,8 @@ $bootstrap-base-button: extend( /// @prop {Color} hover-background [transparent] - The hover background color of a flat button. /// @prop {Map} focus-background [color: ('grays', 100)] - The focus background color of a flat button. /// @prop {Number} border-radius [.2] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent. +/// @prop {Map} disabled-foreground [contrast-color: ('primary', 500, .65)] - The disabled foreground color of the button. + /// @requires {Map} $material-flat-button /// @requires {Map} $bootstrap-base-button /// @requires {function} extend @@ -471,6 +473,10 @@ $bootstrap-flat-button: extend( focus-background: ( color: ('grays', 200) ), + + disabled-foreground: ( + color: ('primary', 500, .65) + ), ) ); @@ -481,7 +487,8 @@ $bootstrap-flat-button: extend( /// @prop {Map} hover-background [color: ('primary', 500)] - The hover background color of an outlined button. /// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of an outlined button. /// @prop {Map} border-color [color: ('primary', 500)] - The border color of an outlined button. -/// @prop {Map} disabled-border-color [color: ('primary', 500), lighten: 35%] - The disabled focused border color of the button. +/// @prop {Map} disabled-border-color [color: ('primary', 500, .65)] - The disabled focused border color of the button. +/// @prop {Map} disabled-foreground [contrast-color: ('primary', 500, .65)] - The disabled foreground color of the button. /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of the button. /// @prop {Number} border-radius [.2] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {Map} $material-outlined-button @@ -515,8 +522,12 @@ $bootstrap-outlined-button: extend( color: ('primary', 500) ), + disabled-foreground: ( + color: ('primary', 500, .65) + ), + disabled-border-color: ( - color: ('primary', 50) + color: ('primary', 500, .65) ), shadow-color: ( @@ -532,6 +543,8 @@ $bootstrap-outlined-button: extend( /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of an raised button. /// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of an raised button. /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of the button. +/// @prop {Map} disabled-foreground [contrast-color: ('primary', 900)] - The disabled foreground color of the button. +/// @prop {Map} disabled-background [color: ('primary', 500, .65)] - The disabled background color of the button. /// @prop {Number} border-radius [.2] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {Map} $material-raised-button /// @requires {Map} $bootstrap-base-button @@ -563,6 +576,14 @@ $bootstrap-raised-button: extend( shadow-color: ( color: ('primary', 200) ), + + disabled-foreground: ( + contrast-color: ('primary', 900) + ), + + disabled-background: ( + color: ('primary', 500, .65) + ), ) ); @@ -573,6 +594,8 @@ $bootstrap-raised-button: extend( /// @prop {Map} background [color: ('primary', 500)] - The background color of a raised button. /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of an raised button. /// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of an raised button. +/// @prop {Map} disabled-foreground [contrast-color: ('primary', 900)] - The disabled foreground color of the button. +/// @prop {Map} disabled-background [color: ('primary', 500, .65)] - The disabled background color of the button. /// @requires {Map} $material-fab-button /// @requires {Map} $bootstrap-base-button /// @requires {Map} $bootstrap-raised-button @@ -602,6 +625,14 @@ $bootstrap-fab-button: extend( focus-background: ( color: ('primary', 600) ), + + disabled-foreground: ( + contrast-color: ('primary', 900) + ), + + disabled-background: ( + color: ('primary', 500, .65) + ), ) ); @@ -611,6 +642,7 @@ $bootstrap-fab-button: extend( /// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of an icon button. /// @prop {Map} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of an icon button. /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of the button. +/// @prop {Map} disabled-foreground [contrast-color: ('grays', 800, .65)] - The disabled foreground color of the button. /// @prop {Number} border-radius [.2] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {Map} $material-icon-button /// @requires {Map} $bootstrap-base-button @@ -640,6 +672,10 @@ $bootstrap-icon-button: extend( shadow-color: ( color: ('primary', 200) ), + + disabled-foreground: ( + contrast-color: ('primary', 800, .65) + ), ) ); From 41a7ffa72619e9bb9d1cc0e3233f0ad5dd149512 Mon Sep 17 00:00:00 2001 From: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Date: Tue, 8 Mar 2022 09:54:00 +0200 Subject: [PATCH 26/63] style(chip): update chips styles for selected/hover/focus states (#11176) * style(chip): update chips styles for selected/hover/focus states * style(chip): change selected focus color in indigo theme Co-authored-by: Dilyana Dimova Co-authored-by: Simeon Simeonoff --- .../core/styles/themes/schemas/dark/_chip.scss | 15 ++++++++++++++- .../core/styles/themes/schemas/light/_chip.scss | 12 ++++++------ 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss index 3e1e54a7654..31f754ca841 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_chip.scss @@ -93,10 +93,23 @@ $dark-fluent-chip: extend( hover-background: ( color: ('grays', 100, .8) ), - + focus-background: ( + color: ('primary', 500), + ), text-color: ( color: ('grays', 500) ), + selected-background: ( + color: ('primary', 500) + ), + + hover-selected-background: ( + color: ('primary', 600) + ), + + focus-selected-background: ( + color: ('primary', 800) + ), ) ); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss index e808469e5ae..92c598bb1d0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss @@ -176,19 +176,19 @@ $fluent-chip: extend( ), hover-selected-text-color: ( - contrast-color: ('primary', 500) + contrast-color: ('primary', 600) ), hover-selected-background: ( - color: ('primary', 500), + color: ('primary', 600), ), focus-selected-text-color: ( - contrast-color: ('primary', 500) + contrast-color: ('primary', 800) ), focus-selected-background:( - color: ('primary', 500), + color: ('primary', 800), ), ) ); @@ -337,11 +337,11 @@ $indigo-chip: extend( ), focus-selected-text-color: ( - contrast-color: ('primary', 400) + contrast-color: ('primary', 500) ), focus-selected-background: ( - color: ('primary', 400) + color: ('primary', 500) ), ) ); From 5af8b1139cccab5271b5cbf15b1b607a1891b66e Mon Sep 17 00:00:00 2001 From: Milko Venkov Date: Tue, 8 Mar 2022 11:49:14 +0200 Subject: [PATCH 27/63] chore(overlay): add animation switch to samples --- src/app/overlay/overlay.sample.html | 4 ++++ src/app/overlay/overlay.sample.ts | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/src/app/overlay/overlay.sample.html b/src/app/overlay/overlay.sample.html index 8a61cb89f69..f5f79803da8 100644 --- a/src/app/overlay/overlay.sample.html +++ b/src/app/overlay/overlay.sample.html @@ -61,6 +61,10 @@ Open in outlet +
+ Has animation +
diff --git a/src/app/overlay/overlay.sample.ts b/src/app/overlay/overlay.sample.ts index 92a323848bb..a2e0d1b0474 100644 --- a/src/app/overlay/overlay.sample.ts +++ b/src/app/overlay/overlay.sample.ts @@ -49,6 +49,7 @@ export class OverlaySampleComponent implements OnInit { public closeOnOutsideClick = true; public modal = true; public useOutlet = false; + public hasAnimation = true; public animationLength = 300; // in ms private xAddition = 0; @@ -347,6 +348,10 @@ export class OverlaySampleComponent implements OnInit { = `${this.animationLength}ms`; (this._overlaySettings.positionStrategy.settings.closeAnimation.options.params as IAnimationParams).duration = `${this.animationLength}ms`; + if (!this.hasAnimation) { + this._overlaySettings.positionStrategy.settings.openAnimation = null; + this._overlaySettings.positionStrategy.settings.closeAnimation = null; + } } this.igxDropDown.toggle(this._overlaySettings); } From 52aacc9e79c6de869dd0b68bdb8149547c533440 Mon Sep 17 00:00:00 2001 From: Milko Venkov Date: Tue, 8 Mar 2022 11:50:58 +0200 Subject: [PATCH 28/63] test(overlay): test if modal wrapper is grayed out when has no animation, #10944 --- .../src/lib/services/overlay/overlay.spec.ts | 55 +++++++++++++------ 1 file changed, 39 insertions(+), 16 deletions(-) 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 26dbb81b598..b6f5431e0f7 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -3054,24 +3054,47 @@ describe('igxOverlay', () => { // 3. Interaction // 3.1 Modal - // it('Should apply a greyed-out mask layers when is modal.', fakeAsync(() => { - // const fixture = TestBed.createComponent(EmptyPageComponent); - // const overlay = fixture.componentInstance.overlay; - // const overlaySettings: OverlaySettings = { - // modal: true, - // }; + it('Should apply a greyed-out mask layers when is modal.', fakeAsync(() => { + const fixture = TestBed.createComponent(EmptyPageComponent); + const overlay = fixture.componentInstance.overlay; + const overlaySettings: OverlaySettings = { + modal: true, + }; - // overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); - // tick(); + overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + tick(100); - // const wrapperElement = (fixture.nativeElement as HTMLElement) - // .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; - // const styles = css(wrapperElement); - // const expectedBackgroundColor = 'background: var(--background-color)'; - // const appliedBackgroundStyles = styles[2]; - // console.log(appliedBackgroundStyles); - // expect(appliedBackgroundStyles).toContain(expectedBackgroundColor); - // })); + const wrapperElement = (fixture.nativeElement as HTMLElement) + .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; + + expect(wrapperElement).toBeDefined(); + const styles = css(wrapperElement); + expect(styles.findIndex((e) => e.includes('--background-color: var(--igx-overlay-background-color, hsla(var(--igx-grays-500), 0.54));'))).toBeGreaterThan(-1); + expect(styles.findIndex((e) => e.includes('background: var(--background-color);'))).toBeGreaterThan(-1); + + fixture.componentInstance.overlay.detachAll(); + })); + + it('Should apply a greyed-out mask layers when is modal and has no animation.', fakeAsync(() => { + const fixture = TestBed.createComponent(EmptyPageComponent); + const overlay = fixture.componentInstance.overlay; + const overlaySettings: OverlaySettings = { + modal: true, + positionStrategy: new GlobalPositionStrategy({ + openAnimation: null, + closeAnimation: null + }) + }; + overlay.show(overlay.attach(SimpleDynamicComponent, overlaySettings)); + tick(100); + + const wrapperElement = (fixture.nativeElement as HTMLElement) + .parentElement.getElementsByClassName(CLASS_OVERLAY_WRAPPER_MODAL)[0] as HTMLElement; + expect(wrapperElement).toBeDefined(); + const styles = css(wrapperElement); + expect(styles.findIndex((e) => e.includes('--background-color: var(--igx-overlay-background-color, hsla(var(--igx-grays-500), 0.54));'))).toBeGreaterThan(-1); + expect(styles.findIndex((e) => e.includes('background: var(--background-color);'))).toBeGreaterThan(-1); + })); it('Should allow interaction only for the shown component when is modal.', fakeAsync(() => { // Utility handler meant for later detachment From 37b5f0027ca946a815c265bfc229ead7328b32d5 Mon Sep 17 00:00:00 2001 From: Milko Venkov Date: Tue, 8 Mar 2022 12:48:36 +0200 Subject: [PATCH 29/63] fix(overlay): add modal classes when there is no animation, #10944 --- .../igniteui-angular/src/lib/services/overlay/overlay.ts | 5 ++--- 1 file changed, 2 insertions(+), 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 55003549500..742e32326be 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts @@ -412,8 +412,8 @@ export class IgxOverlayService implements OnDestroy { document, true, info.settings.target); + this.addModalClasses(info); if (info.settings.positionStrategy.settings.openAnimation) { - this.buildAnimationPlayers(info); this.playOpenAnimation(info); } else { // to eliminate flickering show the element just before opened fires @@ -536,6 +536,7 @@ export class IgxOverlayService implements OnDestroy { if (eventArgs.cancel) { return; } + this.removeModalClasses(info); if (info.settings.positionStrategy.settings.closeAnimation) { this.playCloseAnimation(info, event); } else { @@ -736,7 +737,6 @@ 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(); } @@ -764,7 +764,6 @@ 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(); } From e682dc98a7c57f553752df3f4449a1c2f4c81c66 Mon Sep 17 00:00:00 2001 From: VDyulgerov Date: Tue, 8 Mar 2022 14:40:11 +0200 Subject: [PATCH 30/63] fix(grid): add addtional check for cellID --- projects/igniteui-angular/src/lib/grids/cell.component.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index 950bcd0b8d4..2a2cb3a5f2b 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -947,7 +947,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT if (this.editable && editMode && !this.intRow.deleted) { if (editableCell) { - editableArgs = this.grid.crudService.updateCell(false, event); + if (this.grid.rowEditable && editableCell?.id !== this.cellID && this.row) { + this.grid.crudService.endEdit(true, event); + } else { + editableArgs = this.grid.crudService.updateCell(false, event); + } /* This check is related with the following issue #6517: * when edit cell that belongs to a column which is sorted and press tab, From 45220ed9780558163b60540aecab4052bc649e67 Mon Sep 17 00:00:00 2001 From: Milko Venkov Date: Tue, 8 Mar 2022 14:49:24 +0200 Subject: [PATCH 31/63] chore(overlay): fix lint issues --- .../src/lib/services/overlay/overlay.spec.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 b6f5431e0f7..ee3ea0e8c2d 100644 --- a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts +++ b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts @@ -3069,8 +3069,12 @@ describe('igxOverlay', () => { expect(wrapperElement).toBeDefined(); const styles = css(wrapperElement); - expect(styles.findIndex((e) => e.includes('--background-color: var(--igx-overlay-background-color, hsla(var(--igx-grays-500), 0.54));'))).toBeGreaterThan(-1); - expect(styles.findIndex((e) => e.includes('background: var(--background-color);'))).toBeGreaterThan(-1); + expect(styles.findIndex( + (e) => e.includes('--background-color: var(--igx-overlay-background-color, hsla(var(--igx-grays-500), 0.54));'))) + .toBeGreaterThan(-1); + expect(styles.findIndex( + (e) => e.includes('background: var(--background-color);'))) + .toBeGreaterThan(-1); fixture.componentInstance.overlay.detachAll(); })); From 400a81ceaaa249adf10101671d5cb8dcad42217a Mon Sep 17 00:00:00 2001 From: VDyulgerov Date: Tue, 8 Mar 2022 15:04:06 +0200 Subject: [PATCH 32/63] fix(grid): add case for dateTime --- .../igniteui-angular/src/lib/grids/state.directive.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts index 6f227bc3d64..74935e9e6ff 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.ts @@ -6,8 +6,10 @@ import { IgxColumnGroupComponent } from './columns/column-group.component'; import { IGroupingExpression } from '../data-operations/grouping-expression.interface'; import { IPagingState } from '../data-operations/paging-state.interface'; import { GridColumnDataType } from '../data-operations/data-util'; -import { IgxBooleanFilteringOperand, IgxNumberFilteringOperand, IgxDateFilteringOperand, - IgxStringFilteringOperand, IFilteringOperation} from '../data-operations/filtering-condition'; +import { + IgxBooleanFilteringOperand, IgxNumberFilteringOperand, IgxDateFilteringOperand, + IgxStringFilteringOperand, IFilteringOperation, IgxDateTimeFilteringOperand +} from '../data-operations/filtering-condition'; import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface'; import { IGroupingState } from '../data-operations/groupby-state.interface'; import { IgxGridComponent } from './grid/grid.component'; @@ -585,6 +587,9 @@ export class IgxGridStateDirective { case GridColumnDataType.Date: filters = IgxDateFilteringOperand.instance(); break; + case GridColumnDataType.DateTime: + filters = IgxDateTimeFilteringOperand.instance(); + break; case GridColumnDataType.String: default: filters = IgxStringFilteringOperand.instance(); From 79d47e18f06ff7cc09bf188a359100af7f49f7f5 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Tue, 8 Mar 2022 15:43:58 +0200 Subject: [PATCH 33/63] fix:(button) bootstrap theme disabled colors. (#11190) --- .../styles/themes/schemas/light/_button.scss | 40 +------------------ 1 file changed, 2 insertions(+), 38 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss index 65da089b078..a75f9d77435 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_button.scss @@ -447,8 +447,6 @@ $bootstrap-base-button: extend( /// @prop {Color} hover-background [transparent] - The hover background color of a flat button. /// @prop {Map} focus-background [color: ('grays', 100)] - The focus background color of a flat button. /// @prop {Number} border-radius [.2] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent. -/// @prop {Map} disabled-foreground [contrast-color: ('primary', 500, .65)] - The disabled foreground color of the button. - /// @requires {Map} $material-flat-button /// @requires {Map} $bootstrap-base-button /// @requires {function} extend @@ -473,10 +471,6 @@ $bootstrap-flat-button: extend( focus-background: ( color: ('grays', 200) ), - - disabled-foreground: ( - color: ('primary', 500, .65) - ), ) ); @@ -487,8 +481,7 @@ $bootstrap-flat-button: extend( /// @prop {Map} hover-background [color: ('primary', 500)] - The hover background color of an outlined button. /// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of an outlined button. /// @prop {Map} border-color [color: ('primary', 500)] - The border color of an outlined button. -/// @prop {Map} disabled-border-color [color: ('primary', 500, .65)] - The disabled focused border color of the button. -/// @prop {Map} disabled-foreground [contrast-color: ('primary', 500, .65)] - The disabled foreground color of the button. +/// @prop {Map} disabled-border-color [color: ('primary', 500), lighten: 35%] - The disabled focused border color of the button. /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of the button. /// @prop {Number} border-radius [.2] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {Map} $material-outlined-button @@ -522,12 +515,8 @@ $bootstrap-outlined-button: extend( color: ('primary', 500) ), - disabled-foreground: ( - color: ('primary', 500, .65) - ), - disabled-border-color: ( - color: ('primary', 500, .65) + color: ('primary', 50) ), shadow-color: ( @@ -543,8 +532,6 @@ $bootstrap-outlined-button: extend( /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of an raised button. /// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of an raised button. /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of the button. -/// @prop {Map} disabled-foreground [contrast-color: ('primary', 900)] - The disabled foreground color of the button. -/// @prop {Map} disabled-background [color: ('primary', 500, .65)] - The disabled background color of the button. /// @prop {Number} border-radius [.2] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {Map} $material-raised-button /// @requires {Map} $bootstrap-base-button @@ -576,14 +563,6 @@ $bootstrap-raised-button: extend( shadow-color: ( color: ('primary', 200) ), - - disabled-foreground: ( - contrast-color: ('primary', 900) - ), - - disabled-background: ( - color: ('primary', 500, .65) - ), ) ); @@ -594,8 +573,6 @@ $bootstrap-raised-button: extend( /// @prop {Map} background [color: ('primary', 500)] - The background color of a raised button. /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of an raised button. /// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of an raised button. -/// @prop {Map} disabled-foreground [contrast-color: ('primary', 900)] - The disabled foreground color of the button. -/// @prop {Map} disabled-background [color: ('primary', 500, .65)] - The disabled background color of the button. /// @requires {Map} $material-fab-button /// @requires {Map} $bootstrap-base-button /// @requires {Map} $bootstrap-raised-button @@ -625,14 +602,6 @@ $bootstrap-fab-button: extend( focus-background: ( color: ('primary', 600) ), - - disabled-foreground: ( - contrast-color: ('primary', 900) - ), - - disabled-background: ( - color: ('primary', 500, .65) - ), ) ); @@ -642,7 +611,6 @@ $bootstrap-fab-button: extend( /// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of an icon button. /// @prop {Map} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of an icon button. /// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of the button. -/// @prop {Map} disabled-foreground [contrast-color: ('grays', 800, .65)] - The disabled foreground color of the button. /// @prop {Number} border-radius [.2] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent. /// @requires {Map} $material-icon-button /// @requires {Map} $bootstrap-base-button @@ -672,10 +640,6 @@ $bootstrap-icon-button: extend( shadow-color: ( color: ('primary', 200) ), - - disabled-foreground: ( - contrast-color: ('primary', 800, .65) - ), ) ); From 61c42978fc7ab756ccb15d5447c1572b6a131639 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Tue, 8 Mar 2022 15:44:16 +0200 Subject: [PATCH 34/63] fix:(input-group) fluent theme styles (#11189) * fix:(input-group) fluent theme input focus styles * fix:(input-group) Fix disabled colors - Fix idle caret color. - Fix border color. - Remove unused placeholders. Co-authored-by: Simeon Simeonoff --- .../components/input/_input-group-component.scss | 15 +++------------ .../components/input/_input-group-theme.scss | 11 ++++++++++- .../themes/schemas/light/_input-group.scss | 16 ++++++++-------- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss index aa3a07d33cf..8a68c283bb0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss @@ -257,10 +257,6 @@ @include e(textarea) { @extend %form-group-textarea--cosy !optional; } - - @include e(hint) { - @extend %form-group-hint--cosy !optional; - } } @include m(compact) { @@ -285,10 +281,6 @@ @include e(textarea) { @extend %form-group-textarea--compact !optional; } - - @include e(hint) { - @extend %form-group-hint--compact !optional; - } } @include m(box) { @@ -614,6 +606,7 @@ @include e(bundle) { @extend %form-group-bundle--focus !optional; + &:focus-within, &:hover { @extend %form-group-bundle--fluent--focus !optional; } @@ -634,6 +627,7 @@ @include e(bundle) { @extend %form-group-bundle-success--fluent !optional; + &:focus-within, &:hover { @extend %form-group-bundle-success--fluent--hover !optional; } @@ -648,6 +642,7 @@ @include e(bundle) { @extend %form-group-bundle-error--fluent !optional; + &:focus-within, &:hover { @extend %form-group-bundle-error--fluent--hover !optional; } @@ -889,10 +884,6 @@ @extend %form-group-display--disabled-bootstrap !optional; } - @include e(label) { - @extend %bootstrap-label--disabled !optional; - } - @include e(input) { @extend %bootstrap-input--disabled !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index d6fa973c80f..270c316fe50 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -736,8 +736,9 @@ } %form-group-bundle--fluent--focus { + caret-color: var-get($theme, 'focused-text-color'); border-color: var-get($theme, 'focused-border-color'); - box-shadow: none; + box-shadow: 0 0 0 1px var-get($theme, 'focused-border-color'); } %form-group-bundle--fluent--hover-disabled, @@ -751,11 +752,19 @@ border-color: var-get($theme, 'error-secondary-color'); } + %form-group-bundle-error--fluent--hover { + box-shadow: 0 0 0 1px var-get($theme, 'error-secondary-color'); + } + %form-group-bundle-success--fluent--hover, %form-group-bundle-success--fluent { border-color: var-get($theme, 'success-secondary-color'); } + %form-group-bundle-success--fluent--hover { + box-shadow: 0 0 0 1px var-get($theme, 'success-secondary-color'); + } + %fluent-input { padding: 0; margin: 0; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss index a6cd43fa427..2542e69944f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss @@ -201,11 +201,11 @@ $light-input-group: extend( /// Generates a fluent input-group schema. /// @type {Map} /// -/// @prop {Map} border-color [color: ('grays', 500)] - The border color for input groups of type border and fluent. +/// @prop {Map} border-color [color: ('grays', 700)] - The border color for input groups of type border and fluent. /// @prop {Map} hover-border-color [color: ('grays', 800)] - The hover input border for input groups of type border and fluent. -/// @prop {Map} focused-border-color [color: ('grays', 500)] - The focused input border color for input groups of type border and fluent. -/// @prop {Map} disabled-border-color [color: ('grays', 500)] - The disabled border color for input groups of type border and fluent. +/// @prop {Map} disabled-border-color [color: ('grays', 100)] - The disabled border color for input groups of type border and fluent. /// +/// @prop {Map} focused-border-color [color: ('info')] - The focused input border color for input groups of type border and fluent. /// @prop {Map} border-disabled-background [color: ('grays', 100)] - The background color of an input group of type border in the disabled state. /// /// @prop {Color} search-disabled-background [color: ('grays', 100)] - The background color of an input group of type search in the disabled state. @@ -233,7 +233,7 @@ $fluent-input-group: extend( variant: 'fluent', border-color: ( - color: ('grays', 500) + color: ('grays', 700) ), hover-border-color: ( @@ -241,11 +241,11 @@ $fluent-input-group: extend( ), focused-border-color: ( - color: ('grays', 500) + color: ('info') ), disabled-border-color: ( - color: ('grays', 500) + color: ('grays', 100) ), border-disabled-background: ( @@ -257,11 +257,11 @@ $fluent-input-group: extend( ), input-prefix-background: ( - color: ('grays', 200), + color: ('grays', 100), ), input-suffix-background: ( - color: ('grays', 200), + color: ('grays', 100), ), ) ); From 21185eaa221ded8bb925010e1ef6dd27763e5b12 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Wed, 9 Mar 2022 09:58:34 +0200 Subject: [PATCH 35/63] fix:(input-group) fluent theme styles (#11150) * fix:(input-group) fluent theme input focus styles * fix:(input-group) Fix disabled colors - Fix idle caret color. - Fix border color. - Remove unused placeholders. Co-authored-by: Simeon Simeonoff --- .../components/input/_input-group-component.scss | 15 +++------------ .../components/input/_input-group-theme.scss | 11 ++++++++++- .../themes/schemas/light/_input-group.scss | 16 ++++++++-------- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss index aa3a07d33cf..8a68c283bb0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss @@ -257,10 +257,6 @@ @include e(textarea) { @extend %form-group-textarea--cosy !optional; } - - @include e(hint) { - @extend %form-group-hint--cosy !optional; - } } @include m(compact) { @@ -285,10 +281,6 @@ @include e(textarea) { @extend %form-group-textarea--compact !optional; } - - @include e(hint) { - @extend %form-group-hint--compact !optional; - } } @include m(box) { @@ -614,6 +606,7 @@ @include e(bundle) { @extend %form-group-bundle--focus !optional; + &:focus-within, &:hover { @extend %form-group-bundle--fluent--focus !optional; } @@ -634,6 +627,7 @@ @include e(bundle) { @extend %form-group-bundle-success--fluent !optional; + &:focus-within, &:hover { @extend %form-group-bundle-success--fluent--hover !optional; } @@ -648,6 +642,7 @@ @include e(bundle) { @extend %form-group-bundle-error--fluent !optional; + &:focus-within, &:hover { @extend %form-group-bundle-error--fluent--hover !optional; } @@ -889,10 +884,6 @@ @extend %form-group-display--disabled-bootstrap !optional; } - @include e(label) { - @extend %bootstrap-label--disabled !optional; - } - @include e(input) { @extend %bootstrap-input--disabled !optional; } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index d6fa973c80f..270c316fe50 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -736,8 +736,9 @@ } %form-group-bundle--fluent--focus { + caret-color: var-get($theme, 'focused-text-color'); border-color: var-get($theme, 'focused-border-color'); - box-shadow: none; + box-shadow: 0 0 0 1px var-get($theme, 'focused-border-color'); } %form-group-bundle--fluent--hover-disabled, @@ -751,11 +752,19 @@ border-color: var-get($theme, 'error-secondary-color'); } + %form-group-bundle-error--fluent--hover { + box-shadow: 0 0 0 1px var-get($theme, 'error-secondary-color'); + } + %form-group-bundle-success--fluent--hover, %form-group-bundle-success--fluent { border-color: var-get($theme, 'success-secondary-color'); } + %form-group-bundle-success--fluent--hover { + box-shadow: 0 0 0 1px var-get($theme, 'success-secondary-color'); + } + %fluent-input { padding: 0; margin: 0; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss index a6cd43fa427..2542e69944f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_input-group.scss @@ -201,11 +201,11 @@ $light-input-group: extend( /// Generates a fluent input-group schema. /// @type {Map} /// -/// @prop {Map} border-color [color: ('grays', 500)] - The border color for input groups of type border and fluent. +/// @prop {Map} border-color [color: ('grays', 700)] - The border color for input groups of type border and fluent. /// @prop {Map} hover-border-color [color: ('grays', 800)] - The hover input border for input groups of type border and fluent. -/// @prop {Map} focused-border-color [color: ('grays', 500)] - The focused input border color for input groups of type border and fluent. -/// @prop {Map} disabled-border-color [color: ('grays', 500)] - The disabled border color for input groups of type border and fluent. +/// @prop {Map} disabled-border-color [color: ('grays', 100)] - The disabled border color for input groups of type border and fluent. /// +/// @prop {Map} focused-border-color [color: ('info')] - The focused input border color for input groups of type border and fluent. /// @prop {Map} border-disabled-background [color: ('grays', 100)] - The background color of an input group of type border in the disabled state. /// /// @prop {Color} search-disabled-background [color: ('grays', 100)] - The background color of an input group of type search in the disabled state. @@ -233,7 +233,7 @@ $fluent-input-group: extend( variant: 'fluent', border-color: ( - color: ('grays', 500) + color: ('grays', 700) ), hover-border-color: ( @@ -241,11 +241,11 @@ $fluent-input-group: extend( ), focused-border-color: ( - color: ('grays', 500) + color: ('info') ), disabled-border-color: ( - color: ('grays', 500) + color: ('grays', 100) ), border-disabled-background: ( @@ -257,11 +257,11 @@ $fluent-input-group: extend( ), input-prefix-background: ( - color: ('grays', 200), + color: ('grays', 100), ), input-suffix-background: ( - color: ('grays', 200), + color: ('grays', 100), ), ) ); From f0524bbd8235a23f17da6edf3220cc1d6d154425 Mon Sep 17 00:00:00 2001 From: Marin Popov Date: Wed, 9 Mar 2022 10:47:31 +0200 Subject: [PATCH 36/63] fix:(input-group) fluent theme styling issues. (#11136) - make sure that the all inputs are the same height. - remove unwanted shadow on focus in fluent theme. Co-authored-by: Simeon Simeonoff Co-authored-by: Konstantin Dinev --- .../components/input/_input-group-theme.scss | 34 ++++++++++++++----- .../input-group/input-group.component.html | 2 +- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 270c316fe50..9d69ee8ab72 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -723,11 +723,11 @@ padding: 0; min-height: 32px; border: 1px solid var-get($theme, 'border-color'); - box-shadow: none; border-radius: var-get($theme, 'border-border-radius'); background: var-get($theme, 'border-background'); position: relative; align-items: stretch; + box-shadow: none !important; } %form-group-bundle--fluent--hover { @@ -778,6 +778,7 @@ %form-group-bundle-main--fluent { padding-#{$left}: rem(8px); align-self: center; + cursor: default; } igx-prefix + %form-group-bundle-main--fluent, @@ -1248,10 +1249,15 @@ padding: rem(8px, map.get($base-scale-size, 'compact')) 0; } + igx-prefix.igx-prefix--upload, + [igxPrefix].igx-prefix--upload { + padding: 0 !important; + } + %form-group-prefix-fluent { color: var-get($theme, 'input-prefix-color'); background: var-get($theme, 'input-prefix-background'); - padding: rem(8px, map.get($base-scale-size, 'comfortable')); + padding: 0 rem(8px, map.get($base-scale-size, 'comfortable')); width: auto; height: auto; line-height: normal; @@ -1270,7 +1276,7 @@ } %form-group-prefix-fluent-search { - padding: rem(8px, map.get($base-scale-size, 'comfortable')); + padding: 0 rem(8px, map.get($base-scale-size, 'comfortable')); igx-icon { width: rem(18px); @@ -1285,7 +1291,7 @@ %form-group-suffix-fluent { color: var-get($theme, 'input-suffix-color'); - padding: rem(8px, map.get($base-scale-size, 'comfortable')); + padding: 0 rem(8px, map.get($base-scale-size, 'comfortable')); background: var-get($theme, 'input-suffix-background'); width: auto; height: auto; @@ -1306,7 +1312,7 @@ %form-group-suffix-fluent-search { width: auto; height: auto; - padding: rem(8px, map.get($base-scale-size, 'comfortable')); + padding: 0 rem(8px, map.get($base-scale-size, 'comfortable')); line-height: normal; igx-icon { @@ -1320,6 +1326,16 @@ } } + %form-group-prefix-fluent, + %form-group-suffix-fluent { + .igx-typography [igx-button], + .igx-typography igx-button, + .igx-typography button, + button { + border-radius: rem(1px) 0 0 rem(1px); + } + } + %form-group-prefix-fluent-search--cosy, %form-group-suffix-fluent-search--cosy, %form-group-prefix-fluent--cosy, @@ -1339,22 +1355,22 @@ %form-group-prefix-fluent-search--cosy, %form-group-prefix-fluent--cosy { - padding: rem(8px, map.get($base-scale-size, 'cosy')); + padding: 0 rem(8px, map.get($base-scale-size, 'cosy')); } %form-group-prefix-fluent-search--compact, %form-group-prefix-fluent--compact { - padding: rem(8px, map.get($base-scale-size, 'compact')); + padding: 0 rem(8px, map.get($base-scale-size, 'compact')); } %form-group-suffix-fluent-search--cosy, %form-group-suffix-fluent--cosy { - padding: rem(8px, map.get($base-scale-size, 'cosy')); + padding: 0 rem(8px, map.get($base-scale-size, 'cosy')); } %form-group-suffix-fluent-search--compact, %form-group-suffix-fluent--compact { - padding: rem(8px, map.get($base-scale-size, 'compact')); + padding: 0 rem(8px, map.get($base-scale-size, 'compact')); } // FLUENT END diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.html b/projects/igniteui-angular/src/lib/input-group/input-group.component.html index b14f3661f60..8b954f0b52b 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.html +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.html @@ -21,7 +21,7 @@ - +