Skip to content

Commit 9441a0b

Browse files
AleksandyrAleksandyr
authored
Merge branch '10.2.x' into ddincheva/pageUp-10.2
2 parents d4a2264 + f2f6744 commit 9441a0b

File tree

14 files changed

+221
-69
lines changed

14 files changed

+221
-69
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
/// @param {Color} $context-menu-color-active [null] - Sets the text color for active context menus.
2020
/// @param {Color} $dock-background [null] - Sets the background color of the dock manager.
2121
/// @param {Color} $dock-text [null] - Sets the text color of the dock manager.
22+
/// @param {Color} $drop-shadow-background [null] - Sets the drop-shadow background color.
2223
/// @param {Color} $floating-pane-border-color [null] - Sets the border color for floating panes.
2324
/// @param {Color} $flyout-shadow-color [null] - Sets the flyout shadow color.
2425
/// @param {Color} $joystick-background [null] - Sets the background color of the joystick.

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dock-manager.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
/// @prop {Color} context-menu-color [null] - Sets the text color for context menus.
1818
/// @prop {Color} dock-background [null] - Sets the background color of the dock manager.
1919
/// @prop {Color} dock-text [null] - Sets the text color of the dock manager.
20+
/// @prop {Color} drop-shadow-background [igx-color: 'primary', rgba: .2] - Sets the drop-shadow background color.
2021
/// @prop {Color} floating-pane-border-color [igx-color: 'surface'] - Sets the border color for floating panes.
2122
/// @prop {Color} flyout-shadow-color [rgba(0, 0, 0, .08)] - Sets the flyout shadow color.
2223
/// @prop {Color} joystick-background [null] - Sets the background color of the joystick.
@@ -62,6 +63,10 @@ $_light-dock-manager: (
6263
context-menu-color: null,
6364
dock-background: null,
6465
dock-text: null,
66+
drop-shadow-background: (
67+
igx-color: ('primary', 500),
68+
rgba: .2
69+
),
6570
floating-pane-border-color: (
6671
igx-color: 'surface',
6772
),

‎projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts‎

Lines changed: 60 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ describe('Dialog', () => {
2626
CustomTemplates1DialogComponent,
2727
CustomTemplates2DialogComponent,
2828
DialogSampleComponent,
29-
PositionSettingsDialogComponent
29+
PositionSettingsDialogComponent,
30+
DialogTwoWayDataBindingComponent
3031
],
3132
imports: [BrowserAnimationsModule, NoopAnimationsModule, IgxDialogModule]
3233
}).compileComponents();
@@ -80,6 +81,41 @@ describe('Dialog', () => {
8081
expect(messageDebugElement.nativeElement.textContent.trim()).toEqual(expectedMessage);
8182
});
8283

84+
it('Should open and close dialog when set values to IsOpen', fakeAsync(() => {
85+
const fixture = TestBed.createComponent(AlertComponent);
86+
const dialog = fixture.componentInstance.dialog;
87+
const expectedMessage = 'message';
88+
89+
dialog.isOpen = true;
90+
tick();
91+
fixture.detectChanges();
92+
expect(dialog.isOpen).toEqual(true);
93+
94+
dialog.close();
95+
tick();
96+
fixture.detectChanges();
97+
expect(dialog.isOpen).toEqual(false);
98+
}));
99+
100+
it('Should open and close dialog with isOpen two way data binding', fakeAsync(() => {
101+
const fixture = TestBed.createComponent(DialogTwoWayDataBindingComponent);
102+
const dialog = fixture.componentInstance.dialog;
103+
fixture.detectChanges();
104+
105+
fixture.componentInstance.myDialog = true;
106+
107+
fixture.detectChanges();
108+
tick();
109+
expect(dialog.isOpen).toEqual(true);
110+
111+
112+
fixture.componentInstance.myDialog = false;
113+
114+
fixture.detectChanges();
115+
tick();
116+
expect(dialog.isOpen).toEqual(false);
117+
}));
118+
83119
it('Should set custom modal message.', () => {
84120
const fixture = TestBed.createComponent(CustomDialogComponent);
85121
const dialog = fixture.componentInstance.dialog;
@@ -310,6 +346,7 @@ describe('Dialog', () => {
310346
dialog.open();
311347
tick(100);
312348
fix.detectChanges();
349+
tick(100);
313350

314351
// Verify dialog is opened and its default right button is focused
315352
const dialogDOM = fix.debugElement.query(By.css('.igx-dialog'));
@@ -436,6 +473,28 @@ class AlertComponent {
436473
class DialogComponent {
437474
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
438475
}
476+
477+
@Component({
478+
template: `<div #wrapper>
479+
<igx-dialog #dialog title="dialog" message="message"
480+
[(isOpen)]="myDialog"
481+
leftButtonLabel="left button"
482+
leftButtonType="raised"
483+
leftButtonColor="black"
484+
leftButtonBackgroundColor="darkblue"
485+
leftButtonRipple="pink"
486+
rightButtonLabel="right button"
487+
rightButtonType="raised"
488+
rightButtonColor="orange"
489+
rightButtonBackgroundColor="lightblue"
490+
rightButtonRipple="white">
491+
</igx-dialog>
492+
</div>` })
493+
class DialogTwoWayDataBindingComponent {
494+
@ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
495+
public myDialog = false;
496+
}
497+
439498
@Component({
440499
template: `<div #wrapper>
441500
<igx-dialog #dialog

‎projects/igniteui-angular/src/lib/dialog/dialog.component.ts‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
5858
private static NEXT_ID = 1;
5959
private static readonly DIALOG_CLASS = 'igx-dialog';
6060

61+
62+
6163
@ViewChild(IgxToggleDirective, { static: true })
6264
public toggleRef: IgxToggleDirective;
6365

@@ -316,6 +318,11 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
316318
@Output()
317319
public onRightButtonSelect = new EventEmitter<IDialogEventArgs>();
318320

321+
/**
322+
* @hidden
323+
*/
324+
@Output() public isOpenChange = new EventEmitter<boolean>();
325+
319326
private _positionSettings: PositionSettings = {
320327
openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
321328
closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
@@ -359,19 +366,37 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
359366
}
360367

361368
/**
362-
* Returns whether the dialog is visible to the end user.
369+
* State of the dialog.
370+
*
363371
* ```typescript
364-
* @ViewChild("MyDialog")
365-
* public dialog: IgxDialogComponent;
366-
* ngAfterViewInit() {
367-
* let dialogOpen = this.dialog.isOpen;
368-
* }
372+
* // get
373+
* let dialogIsOpen = this.dialog.isOpen;
374+
* ```
375+
*
376+
* ```html
377+
* <!--set-->
378+
* <igx-dialog [isOpen]='false'></igx-dialog>
379+
* ```
380+
*
381+
* Two-way data binding.
382+
* ```html
383+
* <!--set-->
384+
* <igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>
369385
* ```
370386
*/
371387
@Input()
372-
get isOpen() {
388+
public get isOpen() {
373389
return !this.toggleRef.collapsed;
374390
}
391+
public set isOpen(value: boolean) {
392+
393+
this.isOpenChange.emit(value);
394+
if (value) {
395+
this.open();
396+
} else {
397+
this.close();
398+
}
399+
}
375400

376401
@HostBinding('class.igx-dialog--hidden')
377402
get isCollapsed() {

‎projects/igniteui-angular/src/lib/grids/cell.component.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
187187
* @memberof IgxGridCellComponent
188188
*/
189189
get template(): TemplateRef<any> {
190-
if (this.editMode || this.addMode) {
190+
if (this.editMode) {
191191
const inlineEditorTemplate = this.column.inlineEditorTemplate;
192192
return inlineEditorTemplate ? inlineEditorTemplate : this.inlineEditorTemplate;
193193
}
@@ -366,12 +366,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
366366
@HostBinding('class.igx-grid__td--editing')
367367
editMode = false;
368368

369-
/**
370-
* Returns whether the cell is in add mode
371-
*/
372-
@Input()
373-
addMode = false;
374-
375369
/**
376370
* Sets/get the `role` property of the cell.
377371
* Default value is `"gridcell"`.

‎projects/igniteui-angular/src/lib/grids/common/pipes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ export class IgxStringReplacePipe implements PipeTransform {
284284
@Pipe({ name: 'transactionState' })
285285
export class IgxGridTransactionStatePipe implements PipeTransform {
286286

287-
transform(row_id: any, field: string, rowEditable: boolean, transactions: any, _: any, __: any) {
287+
transform(row_id: any, field: string, rowEditable: boolean, transactions: any, _: any, __: any, ___: any) {
288288
if (rowEditable) {
289289
const rowCurrentState = transactions.getAggregatedValue(row_id, false);
290290
if (rowCurrentState) {

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,9 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
152152
});
153153

154154
esf.listDataLoaded.pipe(takeUntil(this.destroy$)).subscribe(() => {
155-
this.filterListData();
155+
this.searchValue ?
156+
this.clearInput() :
157+
this.filterListData();
156158
});
157159
}
158160

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
126126
this._columnPinning = this.grid.onColumnPinning.pipe(takeUntil(this.destroy$)).subscribe(() => {
127127
requestAnimationFrame(() => {
128128
if (!(this.cdr as ViewRef).destroyed) {
129-
this.cdr.detectChanges();
129+
this.cdr.detectChanges();
130130
}
131131
});
132132
});
@@ -190,7 +190,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
190190
*/
191191
@Input()
192192
get minHeight(): string {
193-
if (this._minHeight || this._minHeight === 0) {
193+
if (this._minHeight || this._minHeight === 0) {
194194
return this._minHeight;
195195
}
196196

@@ -413,20 +413,20 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
413413
private areExpressionsSelectable () {
414414
if (this.expressionsList.length === 1 &&
415415
(this.expressionsList[0].expression.condition.name === 'equals' ||
416-
this.expressionsList[0].expression.condition.name === 'true' ||
417-
this.expressionsList[0].expression.condition.name === 'false' ||
418-
this.expressionsList[0].expression.condition.name === 'empty' ||
419-
this.expressionsList[0].expression.condition.name === 'in')) {
416+
this.expressionsList[0].expression.condition.name === 'true' ||
417+
this.expressionsList[0].expression.condition.name === 'false' ||
418+
this.expressionsList[0].expression.condition.name === 'empty' ||
419+
this.expressionsList[0].expression.condition.name === 'in')) {
420420
return true;
421421
}
422422

423423
const selectableExpressionsCount = this.expressionsList.filter(exp =>
424424
(exp.beforeOperator === 1 || exp.afterOperator === 1) &&
425425
(exp.expression.condition.name === 'equals' ||
426-
exp.expression.condition.name === 'true' ||
427-
exp.expression.condition.name === 'false' ||
428-
exp.expression.condition.name === 'empty' ||
429-
exp.expression.condition.name === 'in')).length;
426+
exp.expression.condition.name === 'true' ||
427+
exp.expression.condition.name === 'false' ||
428+
exp.expression.condition.name === 'empty' ||
429+
exp.expression.condition.name === 'in')).length;
430430

431431
return selectableExpressionsCount === this.expressionsList.length;
432432
}
@@ -466,7 +466,12 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
466466
this.loadingStart.emit();
467467
const expressionsTree: FilteringExpressionsTree = this.getColumnFilterExpressionsTree();
468468

469+
const prevColumn = this.column;
469470
this.grid.uniqueColumnValuesStrategy(this.column, expressionsTree, (colVals: any[]) => {
471+
if (!this.column || this.column !== prevColumn) {
472+
return;
473+
}
474+
470475
const columnValues = (this.column.dataType === DataType.Date) ?
471476
colVals.map(val => val ? val.toDateString() : val) : colVals;
472477

@@ -503,7 +508,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
503508
if (this.column.dataType === DataType.String && this.column.filteringIgnoreCase) {
504509
const filteredUniqueValues = columnValues.map(s => s?.toString().toLowerCase())
505510
.reduce((map, val, i) => map.get(val) ? map : map.set(val, columnValues[i]),
506-
new Map);
511+
new Map);
507512

508513
this.uniqueValues = Array.from(filteredUniqueValues.values());
509514
} else {
@@ -591,9 +596,9 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
591596
filterListItem.isFiltered = true;
592597
this.selectAllIndeterminate = true;
593598
} else if (element === false && this.expressionsList.find(exp => exp.expression.condition.name === 'false' )) {
594-
filterListItem.isSelected = true;
595-
filterListItem.isFiltered = true;
596-
this.selectAllIndeterminate = true;
599+
filterListItem.isSelected = true;
600+
filterListItem.isFiltered = true;
601+
this.selectAllIndeterminate = true;
597602
} else {
598603
filterListItem.isSelected = false;
599604
filterListItem.isFiltered = false;

‎projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1295,6 +1295,8 @@ describe('IgxGrid - Cell selection #grid', () => {
12951295
UIInteractions.triggerKeyDownEvtUponElem('arrowright', firstCell.nativeElement, true, false, true, true);
12961296
await wait(100);
12971297
fix.detectChanges();
1298+
await wait(50);
1299+
fix.detectChanges();
12981300

12991301
expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
13001302
GridSelectionFunctions.verifySelectedRange(grid, 4, 4, 2, 5);
@@ -1332,14 +1334,15 @@ describe('IgxGrid - Cell selection #grid', () => {
13321334
const selectionChangeSpy = spyOn<any>(grid.onRangeSelection, 'emit').and.callThrough();
13331335

13341336
UIInteractions.simulateClickAndSelectEvent(firstCell);
1337+
await wait();
13351338
fix.detectChanges();
13361339

13371340
expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
13381341
GridSelectionFunctions.verifyCellSelected(firstCell);
13391342
expect(grid.selectedCells.length).toBe(1);
13401343

13411344
UIInteractions.triggerKeyDownEvtUponElem('end', firstCell.nativeElement, true, false, true, true);
1342-
await wait(100);
1345+
await wait(200);
13431346
fix.detectChanges();
13441347

13451348
expect(selectionChangeSpy).toHaveBeenCalledTimes(1);

0 commit comments

Comments
 (0)