Skip to content

Commit 1e900fc

Browse files
authored
Merge branch '8.2.x' into vslavov/bump-cli-8.2.x
2 parents 2083283 + 60ec1df commit 1e900fc

File tree

13 files changed

+93
-85
lines changed

13 files changed

+93
-85
lines changed

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,13 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
181181
@Output()
182182
public onChunkLoad = new EventEmitter<IForOfState>();
183183

184+
/**
185+
* @hidden @internal
186+
* An event that is emitted when scrollbar visibility has changed.
187+
*/
188+
@Output()
189+
public onScrollbarVisibilityChanged = new EventEmitter<any>();
190+
184191
/**
185192
* An event that is emitted after the rendered content size of the igxForOf has been changed.
186193
*/
@@ -1155,10 +1162,11 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
11551162
protected _recalcScrollBarSize() {
11561163
const count = this.isRemote ? this.totalItemCount : (this.igxForOf ? this.igxForOf.length : 0);
11571164
this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
1165+
const scrollable = this.isScrollable();
11581166
if (this.igxForScrollOrientation === 'horizontal') {
11591167
const totalWidth = this.igxForContainerSize ? this.initSizesCache(this.igxForOf) : 0;
11601168
this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
1161-
this.scrollComponent.nativeElement.children[0].style.width = totalWidth + 'px';
1169+
this.scrollComponent.size = totalWidth;
11621170
if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
11631171
this.scrollPosition = 0;
11641172
}
@@ -1170,6 +1178,10 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
11701178
this.scrollPosition = 0;
11711179
}
11721180
}
1181+
if (scrollable !== this.isScrollable()) {
1182+
// scrollbar visibility has changed
1183+
this.onScrollbarVisibilityChanged.emit();
1184+
}
11731185
}
11741186

11751187
protected _calcHeight(): number {

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

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ import { DeprecateProperty } from '../core/deprecateDecorators';
103103
import { IFilteringStrategy } from '../data-operations/filtering-strategy';
104104
import { IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective,
105105
IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective } from './grid/grid.directives';
106-
import { IgxRowDragGhostDirective } from './row-drag.directive';
106+
import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective } from './row-drag.directive';
107107
import { GridKeydownTargetType, GridSelectionMode, GridSummaryPosition, GridSummaryCalculationMode, FilterMode } from './common/enums';
108108

109109
const MINIMUM_COLUMN_WIDTH = 136;
@@ -229,6 +229,7 @@ export interface IRowDragStartEventArgs extends CancelableEventArgs, IBaseEventA
229229
export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
230230
OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit {
231231
private _scrollWidth: number;
232+
private _customDragIndicatorIconTemplate: TemplateRef<any>;
232233
protected _init = true;
233234
private _tick;
234235
private _cdrRequests = false;
@@ -1945,6 +1946,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
19451946
@ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
19461947
public dragGhostCustomTemplates: QueryList<TemplateRef<any>>;
19471948

1949+
/**
1950+
* @hidden
1951+
* @internal
1952+
*/
1953+
@ContentChildren(IgxDragIndicatorIconDirective, { read: TemplateRef, descendants: false })
1954+
public dragIndicatorIconTemplates: QueryList<TemplateRef<any>>;
1955+
/**
1956+
* The custom template, if any, that should be used when rendering the row drag indicator icon
1957+
*/
1958+
public get dragIndicatorIconTemplate(): TemplateRef<any> {
1959+
return this._customDragIndicatorIconTemplate || this.dragIndicatorIconTemplates.first;
1960+
}
1961+
1962+
public set dragIndicatorIconTemplate(val: TemplateRef<any>) {
1963+
this._customDragIndicatorIconTemplate = val;
1964+
}
19481965
/**
19491966
* @hidden
19501967
*/
@@ -2055,7 +2072,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
20552072
* @hidden
20562073
*/
20572074
public get parentRowOutletDirective() {
2058-
return this.outletDirective;
2075+
return null;
20592076
}
20602077

20612078
/**
@@ -3017,9 +3034,19 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
30173034
});
30183035

30193036
this.verticalScrollContainer.onDataChanging.pipe(destructor, filter(() => !this._init)).subscribe(($event) => {
3020-
this.calculateGridHeight();
3021-
$event.containerSize = this.calcHeight;
3037+
const shouldRecalcSize = this.isPercentHeight &&
3038+
( !this.calcHeight || this.calcHeight === this.getDataBasedBodyHeight() ||
3039+
this.calcHeight === this.renderedRowHeight * this._defaultTargetRecordNumber);
3040+
if (shouldRecalcSize) {
3041+
this.calculateGridHeight();
3042+
$event.containerSize = this.calcHeight;
3043+
}
30223044
this.evaluateLoadingState();
3045+
});
3046+
3047+
this.verticalScrollContainer.onScrollbarVisibilityChanged.pipe(destructor, filter(() => !this._init)).subscribe(() => {
3048+
// called to recalc all widths that may have changes as a result of
3049+
// the vert. scrollbar showing/hiding
30233050
this.notifyChanges(true);
30243051
});
30253052

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2388,6 +2388,9 @@ describe('IgxGrid - Advanced Filtering', () => {
23882388
// and verify that the root group and all of its children become selected.
23892389
let rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
23902390
UIInteractions.simulateKeyDownEvent(rootOperatorLine, 'Enter');
2391+
fix.detectChanges();
2392+
await wait(200);
2393+
fix.detectChanges();
23912394
await wait(200);
23922395
fix.detectChanges();
23932396
verifyChildrenSelection(GridFunctions.getAdvancedFilteringExpressionsContainer(fix), true);
@@ -2397,6 +2400,9 @@ describe('IgxGrid - Advanced Filtering', () => {
23972400
// and verify that the root group and all of its children become unselected.
23982401
rootOperatorLine = GridFunctions.getAdvancedFilteringTreeRootGroupOperatorLine(fix);
23992402
UIInteractions.simulateKeyDownEvent(rootOperatorLine, 'Enter');
2403+
fix.detectChanges();
2404+
await wait(200);
2405+
fix.detectChanges();
24002406
await wait(200);
24012407
fix.detectChanges();
24022408
verifyChildrenSelection(GridFunctions.getAdvancedFilteringExpressionsContainer(fix), false);

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3319,23 +3319,30 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
33193319
fix.detectChanges();
33203320

33213321
GridFunctions.applyFilter('a', fix);
3322-
await wait(16);
3322+
fix.detectChanges();
3323+
await wait(300);
3324+
fix.detectChanges();
33233325
GridFunctions.applyFilter('e', fix);
3324-
await wait(16);
3326+
fix.detectChanges();
3327+
await wait(300);
3328+
fix.detectChanges();
33253329
GridFunctions.applyFilter('i', fix);
3326-
await wait(16);
3330+
fix.detectChanges();
3331+
await wait(300);
3332+
fix.detectChanges();
33273333
GridFunctions.applyFilter('o', fix);
33283334
// wait for chip to be scrolled in view
3329-
await wait(200);
33303335
fix.detectChanges();
3331-
await wait(100);
3336+
await wait(300);
3337+
fix.detectChanges();
33323338
verifyMultipleChipsVisibility(fix, [false, false, false, true]);
33333339

33343340
const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
33353341
GridFunctions.removeFilterChipByIndex(3, filterUIRow);
33363342
// wait for chip to be scrolled in view
33373343
fix.detectChanges();
3338-
await wait(200);
3344+
await wait(300);
3345+
fix.detectChanges();
33393346

33403347
verifyMultipleChipsVisibility(fix, [false, true, false]);
33413348
let chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
@@ -3344,7 +3351,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
33443351
GridFunctions.removeFilterChipByIndex(2, filterUIRow);
33453352
// wait for chip to be scrolled in view
33463353
fix.detectChanges();
3347-
await wait(200);
3354+
await wait(300);
3355+
fix.detectChanges();
33483356

33493357
verifyMultipleChipsVisibility(fix, [true, false]);
33503358
chips = filterUIRow.queryAll(By.directive(IgxChipComponent));

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -848,12 +848,13 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
848848
fix.detectChanges();
849849

850850
grid.navigateTo(15, 1, (args) => { args.target.nativeElement.focus(); });
851-
await wait(DEBOUNCETIME);
851+
fix.detectChanges();
852+
await wait(200);
852853
fix.detectChanges();
853854

854855
const target = grid.getCellByColumn(15, '1');
855856
expect(target).toBeDefined();
856-
expect(target.focused).toBe(true);
857+
expect(document.activeElement).toBe(target.nativeElement);
857858
});
858859

859860
it('Custom KB navigation: should be able to scroll horizontally and vertically to a cell in the grid', async () => {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1176,7 +1176,7 @@ describe('IgxGrid Component Tests #grid', () => {
11761176
expect(fix.componentInstance.grid.calcHeight).toBe(510);
11771177
}));
11781178

1179-
it('should not keep default height when lower the amount of bound data', () => {
1179+
it('should not keep default height when lower the amount of bound data', async() => {
11801180
const fix = TestBed.createComponent(IgxGridWrappedInContComponent);
11811181
fix.detectChanges();
11821182

@@ -1195,6 +1195,8 @@ describe('IgxGrid Component Tests #grid', () => {
11951195

11961196
fix.componentInstance.grid.data = fix.componentInstance.semiData;
11971197
fix.detectChanges();
1198+
await wait(100);
1199+
fix.detectChanges();
11981200

11991201
defaultHeight = fix.debugElement.query(By.css(TBODY_CLASS)).styles.height;
12001202
expect(defaultHeight).toBeNull();

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
144144
if (this.shouldGenerate) {
145145
this.setupColumns();
146146
}
147-
this.notifyChanges(true);
147+
this.cdr.markForCheck();
148148
}
149149

150150
/**
@@ -471,27 +471,6 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
471471
@ContentChild(IgxGroupByRowTemplateDirective, { read: IgxGroupByRowTemplateDirective, static: false })
472472
protected groupTemplate: IgxGroupByRowTemplateDirective;
473473

474-
/**
475-
* The custom template, if any, that should be used when rendering the row drag indicator icon
476-
*
477-
* ```typescript
478-
* // Set in typescript
479-
* const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
480-
* myComponent.dragIndicatorIconTemplate = myCustomTemplate;
481-
* ```
482-
* ```html
483-
* <!-- Set in markup -->
484-
* <igx-grid #grid>
485-
* ...
486-
* <ng-template igxDragIndicatorIcon>
487-
* <igx-icon fontSet="material">info</igx-icon>
488-
* </ng-template>
489-
* </igx-grid>
490-
* ```
491-
*/
492-
@ContentChild(IgxDragIndicatorIconDirective, { read: TemplateRef, static: false })
493-
public dragIndicatorIconTemplate: TemplateRef<any> = null;
494-
495474
@ViewChildren(IgxGridGroupByRowComponent, { read: IgxGridGroupByRowComponent })
496475
private _groupsRowList: QueryList<IgxGridGroupByRowComponent>;
497476

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

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -94,27 +94,6 @@ export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseCompon
9494
@ViewChild('dragIndicatorIconBase', { read: TemplateRef, static: true })
9595
public dragIndicatorIconBase: TemplateRef<any>;
9696

97-
98-
/**
99-
* The custom template, if any, that should be used when rendering the row drag indicator icon
100-
*
101-
* ```typescript
102-
* // Set in typescript
103-
* const myCustomTemplate: TemplateRef<any> = myComponent.customTemplate;
104-
* myComponent.dragIndicatorIconTemplate = myCustomTemplate;
105-
* ```
106-
* ```html
107-
* <!-- Set in markup -->
108-
* <igx-grid #grid>
109-
* ...
110-
* <ng-template igxDragIndicatorIcon>
111-
* <igx-icon fontSet="material">info</igx-icon>
112-
* </ng-template>
113-
* </igx-grid>
114-
* ```
115-
*/
116-
public dragIndicatorIconTemplate: TemplateRef<any> = null;
117-
11897
constructor(
11998
public selectionService: IgxGridSelectionService,
12099
crudService: IgxGridCRUDService,

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,9 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
411411
this.rowSelectorsTemplates = this.parentIsland ?
412412
this.parentIsland.rowSelectorsTemplates :
413413
this.rowSelectorsTemplates;
414+
this.dragIndicatorIconTemplate = this.parentIsland ?
415+
this.parentIsland.dragIndicatorIconTemplate :
416+
this.dragIndicatorIconTemplate;
414417
this.rowExpandedIndicatorTemplate = this.rootGrid.rowExpandedIndicatorTemplate;
415418
this.rowCollapsedIndicatorTemplate = this.rootGrid.rowCollapsedIndicatorTemplate;
416419
this.headerCollapseIndicatorTemplate = this.rootGrid.headerCollapseIndicatorTemplate;
@@ -443,6 +446,13 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
443446
return this.rootGrid._outletDirective;
444447
}
445448

449+
/**
450+
* @hidden
451+
*/
452+
public get parentRowOutletDirective() {
453+
return this === this.rootGrid ? null : this.rootGrid.rowEditingOutletDirective;
454+
}
455+
446456
/**
447457
* @hidden
448458
*/

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,8 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
401401

402402
hierarchicalGrid.clearFilter();
403403
fixture.detectChanges();
404-
await wait(30);
404+
await wait(100);
405+
fixture.detectChanges();
405406

406407
expect(childGrid.calcWidth - 370 ).toBeLessThan(3);
407408
});
@@ -553,7 +554,7 @@ describe('IgxHierarchicalGrid Row Islands #hGrid', () => {
553554
}
554555
});
555556
it('should allow setting different height/width in px/percent for row islands and grids should be rendered correctly.',
556-
fakeAsync(/** height/width setter + row toggle rAF */() => {
557+
(/** height/width setter + row toggle rAF */async() => {
557558
const ri1 = fixture.componentInstance.rowIsland1;
558559

559560
// test px
@@ -565,6 +566,8 @@ describe('IgxHierarchicalGrid Row Islands #hGrid', () => {
565566
let row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
566567
UIInteractions.clickElement(row.expander);
567568
fixture.detectChanges();
569+
await wait(100);
570+
fixture.detectChanges();
568571
let childGrids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
569572
let childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
570573

0 commit comments

Comments
 (0)