Merge pull request #8357 from IgniteUI/dTsvetkov/fix-issue-8320-master

fix(dialog): exposed opened property-10.2.x #8320

Author: kdinev

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

@@ -26,7 +26,8 @@ describe('Dialog', () => {
                 CustomTemplates1DialogComponent,
                 CustomTemplates2DialogComponent,
                 DialogSampleComponent,
-                PositionSettingsDialogComponent
+                PositionSettingsDialogComponent,
+                DialogTwoWayDataBindingComponent
             ],
             imports: [BrowserAnimationsModule, NoopAnimationsModule, IgxDialogModule]
         }).compileComponents();
@@ -80,6 +81,41 @@ describe('Dialog', () => {
         expect(messageDebugElement.nativeElement.textContent.trim()).toEqual(expectedMessage);
     });
 
+    it('Should open and close dialog when set values to IsOpen', fakeAsync(() => {
+        const fixture = TestBed.createComponent(AlertComponent);
+        const dialog = fixture.componentInstance.dialog;
+        const expectedMessage = 'message';
+
+        dialog.isOpen = true;
+        tick();
+        fixture.detectChanges();
+        expect(dialog.isOpen).toEqual(true);
+
+        dialog.close();
+        tick();
+        fixture.detectChanges();
+        expect(dialog.isOpen).toEqual(false);
+    }));
+
+    it('Should open and close dialog with isOpen two way data binding', fakeAsync(() => {
+        const fixture = TestBed.createComponent(DialogTwoWayDataBindingComponent);
+        const dialog = fixture.componentInstance.dialog;
+        fixture.detectChanges();
+
+        fixture.componentInstance.myDialog = true;
+
+        fixture.detectChanges();
+        tick();
+        expect(dialog.isOpen).toEqual(true);
+
+
+        fixture.componentInstance.myDialog = false;
+
+        fixture.detectChanges();
+        tick();
+        expect(dialog.isOpen).toEqual(false);
+    }));
+
     it('Should set custom modal message.', () => {
         const fixture = TestBed.createComponent(CustomDialogComponent);
         const dialog = fixture.componentInstance.dialog;
@@ -310,6 +346,7 @@ describe('Dialog', () => {
         dialog.open();
         tick(100);
         fix.detectChanges();
+        tick(100);
 
         // Verify dialog is opened and its default right button is focused
         const dialogDOM = fix.debugElement.query(By.css('.igx-dialog'));
@@ -436,6 +473,28 @@ class AlertComponent {
 class DialogComponent {
     @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
 }
+
+@Component({
+    template: `<div #wrapper>
+                            <igx-dialog #dialog title="dialog" message="message"
+                                [(isOpen)]="myDialog"
+                                leftButtonLabel="left button"
+                                leftButtonType="raised"
+                                leftButtonColor="black"
+                                leftButtonBackgroundColor="darkblue"
+                                leftButtonRipple="pink"
+                                rightButtonLabel="right button"
+                                rightButtonType="raised"
+                                rightButtonColor="orange"
+                                rightButtonBackgroundColor="lightblue"
+                                rightButtonRipple="white">
+                            </igx-dialog>
+                        </div>` })
+class DialogTwoWayDataBindingComponent {
+    @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
+    public myDialog = false;
+}
+
 @Component({
     template: `<div #wrapper>
                             <igx-dialog #dialog

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

@@ -58,6 +58,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     private static NEXT_ID = 1;
     private static readonly DIALOG_CLASS = 'igx-dialog';
 
+
+
     @ViewChild(IgxToggleDirective, { static: true })
     public toggleRef: IgxToggleDirective;
 
@@ -316,6 +318,11 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     @Output()
     public onRightButtonSelect = new EventEmitter<IDialogEventArgs>();
 
+    /**
+     * @hidden
+     */
+    @Output() public isOpenChange = new EventEmitter<boolean>();
+
     private _positionSettings: PositionSettings = {
         openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
         closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
@@ -359,19 +366,37 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     }
 
     /**
-     * Returns whether the dialog is visible to the end user.
+     * State of the dialog.
+     *
      * ```typescript
-     * @ViewChild("MyDialog")
-     * public dialog: IgxDialogComponent;
-     * ngAfterViewInit() {
-     *     let dialogOpen = this.dialog.isOpen;
-     * }
+     * // get
+     * let dialogIsOpen = this.dialog.isOpen;
+     * ```
+     *
+     * ```html
+     * <!--set-->
+     * <igx-dialog [isOpen]='false'></igx-dialog>
+     * ```
+     *
+     * Two-way data binding.
+     * ```html
+     * <!--set-->
+     * <igx-dialog [(isOpen)]='model.isOpen'></igx-dialog>
      * ```
      */
     @Input()
-    get isOpen() {
+    public get isOpen() {
         return !this.toggleRef.collapsed;
     }
+    public set isOpen(value: boolean) {
+
+        this.isOpenChange.emit(value);
+        if (value) {
+            this.open();
+        } else {
+            this.close();
+        }
+    }
 
     @HostBinding('class.igx-dialog--hidden')
     get isCollapsed() {

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

@@ -1295,6 +1295,8 @@ describe('IgxGrid - Cell selection #grid', () => {
             UIInteractions.triggerKeyDownEvtUponElem('arrowright', firstCell.nativeElement, true, false, true, true);
             await wait(100);
             fix.detectChanges();
+            await wait(50);
+            fix.detectChanges();
 
             expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
             GridSelectionFunctions.verifySelectedRange(grid, 4, 4, 2, 5);
@@ -1332,14 +1334,15 @@ describe('IgxGrid - Cell selection #grid', () => {
             const selectionChangeSpy = spyOn<any>(grid.onRangeSelection, 'emit').and.callThrough();
 
             UIInteractions.simulateClickAndSelectEvent(firstCell);
+            await wait();
             fix.detectChanges();
 
             expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
             GridSelectionFunctions.verifyCellSelected(firstCell);
             expect(grid.selectedCells.length).toBe(1);
 
             UIInteractions.triggerKeyDownEvtUponElem('end', firstCell.nativeElement, true, false, true, true);
-            await wait(100);
+            await wait(200);
             fix.detectChanges();
 
             expect(selectionChangeSpy).toHaveBeenCalledTimes(1);