Merge branch '10.2.x' into mtsvyatkova/fix-8697-10.2.x

Author: DiyanDimitrov

.github/workflows/nodejs.yml

@@ -10,7 +10,7 @@ on:
     branches: [ master, '[0-9]+.[0-9]+.x' ]
 
 jobs:
-  build:
+  run-tests:
 
     runs-on: ubuntu-latest
 
@@ -19,11 +19,10 @@ jobs:
         node-version: [10.x, 12.x, 14.x]
 
     steps:
-    - uses: actions/checkout@v2
+    - name: Checkout
+      uses: actions/checkout@v2
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
     - run: npm ci
     - run: npm run lint:lib
     - run: npm run build:lib
@@ -40,3 +39,16 @@ jobs:
       env:
         NODE_OPTIONS: --max_old_space_size=4096
     - run: npm run test:schematics
+    - name: Install coverage combiner
+      if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '14.x'
+      run: sudo npm install -g istanbul-combine
+    - name: Combine scripts
+      if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '14.x'
+      run: istanbul-combine -d coverage -p none -r lcov -r cobertura coverage/hierarchical-grid/coverage-final.json coverage/tree-grid/coverage-final.json coverage/non-grid/coverage-final.json coverage/grid/coverage-final.json
+    - name: Publish to coveralls.io
+      if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '14.x'
+      uses: coverallsapp/[email protected]
+      with:
+        github-token: ${{ github.token }}
+
+

.travis.yml

@@ -24,9 +24,10 @@ script:
 - if [ -z "${TRAVIS_TAG}" ]; then npm run test:lib:grid; fi
 - if [ -z "${TRAVIS_TAG}" ]; then npm run test:lib:tgrid; fi
 - if [ -z "${TRAVIS_TAG}" ]; then npm run test:lib:hgrid; fi
-- if [ -z "${TRAVIS_TAG}" ]; then istanbul-combine -d coverage -p none -r lcov -r html coverage/hierarchical-grid/coverage-final.json coverage/tree-grid/coverage-final.json coverage/non-grid/coverage-final.json coverage/grid/coverage-final.json; fi
 - if [ -z "${TRAVIS_TAG}" ]; then npm run test:schematics; fi
-- if [ -z "${TRAVIS_TAG}" ] && [ "${TRAVIS_REPO_SLUG}" == "IgniteUI/igniteui-angular" ]; then cat ./coverage/lcov.info | coveralls; fi
+## Use only Github actions for publishing coveralls.io status
+#- if [ -z "${TRAVIS_TAG}" ]; then istanbul-combine -d coverage -p none -r lcov -r html coverage/hierarchical-grid/coverage-final.json coverage/tree-grid/coverage-final.json coverage/non-grid/coverage-final.json coverage/grid/coverage-final.json; fi
+# - if [ -z "${TRAVIS_TAG}" ] && [ "${TRAVIS_REPO_SLUG}" == "IgniteUI/igniteui-angular" ]; then cat ./coverage/lcov.info | coveralls; fi
 
 # before_deploy:
 # - npm run build:schematics

azure-pipelines.yml

@@ -38,16 +38,17 @@ steps:
   env:
     NODE_OPTIONS: "--max_old_space_size=4096"
 
-- script: istanbul-combine -d coverage -p none -r lcov -r cobertura coverage/hierarchical-grid/coverage-final.json coverage/tree-grid/coverage-final.json coverage/non-grid/coverage-final.json coverage/grid/coverage-final.json
-  displayName: 'Combine coverage results'
-  env:
-    AZURE_PIPELINES: "true"
+## Use only Github actions for publishing coveralls.io status
+# - script: istanbul-combine -d coverage -p none -r lcov -r cobertura coverage/hierarchical-grid/coverage-final.json coverage/tree-grid/coverage-final.json coverage/non-grid/coverage-final.json coverage/grid/coverage-final.json
+#   displayName: 'Combine coverage results'
+#   env:
+#     AZURE_PIPELINES: "true"
 
-- script: cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
-  condition: and(succeeded(), eq(variables['system.teamProject'], 'igniteui-angular'))
-  displayName: 'Code coverage @ Coveralls'
-  env:
-    COVERALLS_REPO_TOKEN: $(coveralls.repoToken)
+# - script: cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+#   condition: and(succeeded(), eq(variables['system.teamProject'], 'igniteui-angular'))
+#   displayName: 'Code coverage @ Coveralls'
+#   env:
+#     COVERALLS_REPO_TOKEN: $(coveralls.repoToken)
 
 - script: npm run test:schematics
   displayName: 'Run migrations & schematics'

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -181,6 +181,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      * Sets the date that will be presented in the default view when the component renders.
      */
     public set viewDate(value: Date) {
+        if (Array.isArray(value)) { return; }
         if (this._viewDate) {
             this.selectedDatesWithoutFocus = value;
         }

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts

@@ -48,7 +48,8 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
      * @memberof IgxMonthsViewComponent
      */
     @Input()
-    public set date(value) {
+    public set date(value: Date) {
+        if (!(value instanceof Date)) { return; }
         this._date = value;
         this.activeMonth = this.date.getMonth();
     }

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts

@@ -57,7 +57,14 @@ export class IgxYearsViewComponent implements ControlValueAccessor {
      * @memberof IgxYearsViewComponent
      */
     @Input()
-    public date = new Date();
+    public get date() {
+        return this._date;
+    }
+
+    public set date(value: Date) {
+        if (!(value instanceof Date)) { return; }
+        this._date = value;
+    }
 
     /**
      * Gets the year format option of the years view.
@@ -181,6 +188,10 @@ export class IgxYearsViewComponent implements ControlValueAccessor {
      * @hidden
      */
     private _calendarModel: Calendar;
+    /**
+     * @hidden
+     */
+    private _date = new Date();
 
     /**
      * @hidden

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

@@ -3,7 +3,7 @@ import { async, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UIInteractions } from '../test-utils/ui-interactions.spec';
-import { IDialogEventArgs, IgxDialogComponent, IgxDialogModule } from './dialog.component';
+import { IDialogCancellableEventArgs, IDialogEventArgs, IgxDialogComponent, IgxDialogModule } from './dialog.component';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { useAnimation } from '@angular/animations';
 import { PositionSettings, HorizontalAlignment, VerticalAlignment } from '../services/overlay/utilities';
@@ -87,7 +87,7 @@ describe('Dialog', () => {
         const expectedMessage = 'message';
 
         dialog.isOpen = true;
-        tick();
+        tick(100);
         fixture.detectChanges();
         expect(dialog.isOpen).toEqual(true);
 
@@ -105,7 +105,7 @@ describe('Dialog', () => {
         fixture.componentInstance.myDialog = true;
 
         fixture.detectChanges();
-        tick();
+        tick(100);
         expect(dialog.isOpen).toEqual(true);
 
 
@@ -198,19 +198,36 @@ describe('Dialog', () => {
         const dialog = fixture.componentInstance.dialog;
         const args: IDialogEventArgs = {
             dialog,
-            event: null
+            event: undefined,
+        };
+        let cancellableArgs: IDialogCancellableEventArgs = {
+            dialog,
+            event: null,
+            cancel: false
         };
+
         spyOn(dialog.onOpen, 'emit');
+        spyOn(dialog.onOpened, 'emit');
+        spyOn(dialog.isOpenChange, 'emit');
+        spyOn(dialog.onClose, 'emit');
+        spyOn(dialog.onClosed, 'emit');
+
         dialog.open();
         tick();
         fixture.detectChanges();
-        expect(dialog.onOpen.emit).toHaveBeenCalledWith(args);
 
-        spyOn(dialog.onClose, 'emit');
+        expect(dialog.onOpen.emit).toHaveBeenCalledWith(cancellableArgs);
+        expect(dialog.isOpenChange.emit).toHaveBeenCalledWith(true);
+        // expect(dialog.onOpened.emit).toHaveBeenCalled();
+
         dialog.close();
         tick();
         fixture.detectChanges();
-        expect(dialog.onClose.emit).toHaveBeenCalledWith(args);
+
+        cancellableArgs = { dialog, event: undefined, cancel: false };
+        expect(dialog.onClose.emit).toHaveBeenCalledWith(cancellableArgs);
+        expect(dialog.onClosed.emit).toHaveBeenCalledWith(args);
+        expect(dialog.isOpenChange.emit).toHaveBeenCalledWith(false);
 
         dialog.open();
         tick();
@@ -283,10 +300,10 @@ describe('Dialog', () => {
 
     it('Should initialize igx-dialog custom title and actions', () => {
         const data = [{
-                component: CustomTemplates1DialogComponent
-            }, {
-                component: CustomTemplates2DialogComponent
-            }];
+            component: CustomTemplates1DialogComponent
+        }, {
+            component: CustomTemplates2DialogComponent
+        }];
 
         data.forEach((item) => {
             const fixture = TestBed.createComponent(item.component);
@@ -338,7 +355,7 @@ describe('Dialog', () => {
         expect(overlayWrapper.classList.contains(OVERLAY_WRAPPER_CLASS)).toBe(false);
     }));
 
-    it('Default button of the dialog is focused after opening the dialog and can be closed with keyboard.', fakeAsync( () => {
+    it('Default button of the dialog is focused after opening the dialog and can be closed with keyboard.', fakeAsync(() => {
         const fix = TestBed.createComponent(DialogComponent);
         fix.detectChanges();
 
@@ -368,7 +385,7 @@ describe('Dialog', () => {
         let fix;
         let dialog;
 
-        beforeEach( fakeAsync(() => {
+        beforeEach(fakeAsync(() => {
             fix = TestBed.createComponent(PositionSettingsDialogComponent);
             fix.detectChanges();
             dialog = fix.componentInstance.dialog;
@@ -414,7 +431,7 @@ describe('Dialog', () => {
             expect(dialog.isOpen).toEqual(false);
         }));
 
-        it('Set animation settings',  () => {
+        it('Set animation settings', () => {
             const currentElement = fix.componentInstance;
 
             // Check initial animation settings
@@ -584,7 +601,7 @@ class PositionSettingsDialogComponent {
         horizontalStartPoint: HorizontalAlignment.Left,
         verticalStartPoint: VerticalAlignment.Middle,
         openAnimation: useAnimation(slideInTop, { params: { duration: '200ms' } }),
-        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '200ms'} })
+        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '200ms' } })
     };
 
     public newPositionSettings: PositionSettings = {
@@ -594,7 +611,7 @@ class PositionSettingsDialogComponent {
 
     public animationSettings: PositionSettings = {
         openAnimation: useAnimation(slideInTop, { params: { duration: '800ms' } }),
-        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '700ms'} })
+        closeAnimation: useAnimation(slideOutBottom, { params: { duration: '700ms' } })
     };
 
 }

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

@@ -24,7 +24,7 @@ import { IgxToggleModule, IgxToggleDirective } from '../directives/toggle/toggle
 import { OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, PositionSettings } from '../services/public_api';
 import { slideInBottom, slideOutTop } from '../animations/slide/index';
 import { IgxFocusModule } from '../directives/focus/focus.directive';
-import { IBaseEventArgs } from '../core/utils';
+import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
 
 let DIALOG_ID = 0;
 /**
@@ -277,24 +277,44 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     }
 
     /**
-     * An event that is emitted when the dialog is opened.
+     * An event that is emitted before the dialog is opened.
      * ```html
      * <igx-dialog (onOpen)="onDialogOpenHandler($event)" (onLeftButtonSelect)="dialog.close()" rightButtonLabel="OK">
      * </igx-dialog>
      * ```
      */
     @Output()
-    public onOpen = new EventEmitter<IDialogEventArgs>();
+    public onOpen = new EventEmitter<IDialogCancellableEventArgs>();
 
     /**
-     * An event that is emitted when the dialog is closed.
+     * An event that is emitted after the dialog is opened.
+     * ```html
+     * <igx-dialog (onOpened)="onDialogOpenedHandler($event)" (onLeftButtonSelect)="dialog.close()" rightButtonLabel="OK">
+     * </igx-dialog>
+     * ```
+     */
+    @Output()
+    public onOpened = new EventEmitter<IDialogEventArgs>();
+
+    /**
+     * An event that is emitted before the dialog is closed.
      * ```html
      * <igx-dialog (onClose)="onDialogCloseHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
      * </igx-dialog>
      * ```
      */
     @Output()
-    public onClose = new EventEmitter<IDialogEventArgs>();
+    public onClose = new EventEmitter<IDialogCancellableEventArgs>();
+
+    /**
+     * An event that is emitted after the dialog is closed.
+     * ```html
+     * <igx-dialog (onClosed)="onDialogClosedHandler($event)" title="Confirmation" leftButtonLabel="Cancel" rightButtonLabel="OK">
+     * </igx-dialog>
+     * ```
+     */
+    @Output()
+    public onClosed = new EventEmitter<IDialogEventArgs>();
 
     /**
      * An event that is emitted when the left button is clicked.
@@ -389,12 +409,15 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
         return !this.toggleRef.collapsed;
     }
     public set isOpen(value: boolean) {
-
-        this.isOpenChange.emit(value);
-        if (value) {
-            this.open();
-        } else {
-            this.close();
+        if (value !== this.isOpen) {
+            this.isOpenChange.emit(value);
+            if (value) {
+                requestAnimationFrame(() => {
+                    this.open();
+                });
+            } else {
+                this.close();
+            }
         }
     }
 
@@ -458,11 +481,26 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     }
 
     ngAfterContentInit() {
-        this.toggleRef.onClosing.pipe(takeUntil(this.destroy$)).subscribe(() => this.emitCloseFromDialog());
+        this.toggleRef.onClosing.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitCloseFromDialog(eventArgs));
+        this.toggleRef.onClosed.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitClosedFromDialog(eventArgs));
+        this.toggleRef.onOpened.pipe(takeUntil(this.destroy$)).subscribe((eventArgs) => this.emitOpenedFromDialog(eventArgs));
     }
 
-    private emitCloseFromDialog() {
-        this.onClose.emit({ dialog: this, event: null });
+    private emitCloseFromDialog(eventArgs) {
+        const dialogEventsArgs = { dialog: this, event: eventArgs.event, cancel: eventArgs.cancel };
+        this.onClose.emit(dialogEventsArgs);
+        eventArgs.cancel = dialogEventsArgs.cancel;
+        if (!eventArgs.cancel) {
+            this.isOpenChange.emit(false);
+        }
+    }
+
+    private emitClosedFromDialog(eventArgs) {
+        this.onClosed.emit({ dialog: this, event: eventArgs.event });
+    }
+
+    private emitOpenedFromDialog(eventArgs) {
+        this.onOpened.emit({ dialog: this, event: eventArgs.event });
     }
 
     /**
@@ -474,10 +512,14 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
      * ```
      */
     public open(overlaySettings: OverlaySettings = this._overlayDefaultSettings) {
-        this.toggleRef.open(overlaySettings);
-        this.onOpen.emit({ dialog: this, event: null });
-        if (!this.leftButtonLabel && !this.rightButtonLabel) {
-            this.toggleRef.element.focus();
+        const eventArgs: IDialogCancellableEventArgs = { dialog: this, event: null, cancel: false };
+        this.onOpen.emit(eventArgs);
+        if (!eventArgs.cancel) {
+            this.toggleRef.open(overlaySettings);
+            this.isOpenChange.emit(true);
+            if (!this.leftButtonLabel && !this.rightButtonLabel) {
+                this.toggleRef.element.focus();
+            }
         }
     }
 
@@ -559,6 +601,8 @@ export interface IDialogEventArgs extends IBaseEventArgs {
     event: Event;
 }
 
+export interface IDialogCancellableEventArgs extends IDialogEventArgs, CancelableEventArgs { }
+
 /**
  * @hidden
  */