Merge branch 'master' into PMiteva/cancellable_onSearchInput_10.1

Author: Lipata

CHANGELOG.md

@@ -39,8 +39,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxNavbar`
     - Added new `igx-navbar-title, igxNavbarTitle` directive that can be used to provide custom content for navbar title. It would override the value of `title` input property.
 - `IgxCalendar` and `IgxMonthPicker`
-    - `onViewDateChanged` emitted after the month/year presented in the view is changed after user interaction.
-    - `onActiveViewChanged` event emitted after the active view (DEFAULT, YEAR, DECADE) is changed after user interaction.
+    - `viewDateChanged` emitted after the month/year presented in the view is changed after user interaction.
+    - `activeViewChanged` event emitted after the active view (DEFAULT, YEAR, DECADE) is changed after user interaction.
     - `viewDate` day value is always 1.
     - `activeView` setter is now available as an input property.
 

projects/igniteui-angular/src/lib/calendar/README.md

@@ -175,12 +175,12 @@ Controls the visibility of the dates that do not belong to the current month.
 Event fired when a value is selected through UI interaction.
 Emits the selected value (depending on the type of selection).
 
-- `onViewDateChanged(): IViewDateChangeEventArgs`
+- `viewDateChanged(): IViewDateChangeEventArgs`
 
-Event fired after the the month/year presented in the view is changed.
+Event fired after the month/year presented in the view is changed.
 Emits an object containing the previous and current value of the `viewDate` property.
 
-- `onActiveViewChanged(): CalendarView`
+- `activeViewChanged(): CalendarView`
 
 Event fired after the active view is changed.
 Emits an CalendarView enum, indicating the `activeView` property value.

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

@@ -250,21 +250,21 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * Emits an event when the month in view is changed.
      * ```html
-     * <igx-calendar (onViewDateChanged)="viewDateChanged($event)"></igx-calendar>
+     * <igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar>
      * ```
      * ```typescript
      * public viewDateChanged(event: IViewDateChangeEventArgs) {
-     *  let newDate = event.newViewDate;
+     *  let viewDate = event.currentValue;
      * }
      * ```
      */
     @Output()
-    public onViewDateChanged = new EventEmitter<IViewDateChangeEventArgs>();
+    public viewDateChanged = new EventEmitter<IViewDateChangeEventArgs>();
 
     /**
      * Emits an event when the active view is changed.
      * ```html
-     * <igx-calendar (onActiveViewChanged)="activeViewChanged($event)"></igx-calendar>
+     * <igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>
      * ```
      * ```typescript
      * public activeViewChanged(event: CalendarView) {
@@ -273,7 +273,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      * ```
      */
     @Output()
-    public onActiveViewChanged  = new EventEmitter<CalendarView>();
+    public activeViewChanged  = new EventEmitter<CalendarView>();
 
     /**
      * @hidden

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

@@ -1588,14 +1588,14 @@ describe('IgxCalendar - ', () => {
 
                 expect(year.nativeElement).toBe(document.activeElement);
 
-                spyOn(calendar.onActiveViewChanged, 'emit').and.callThrough();
+                spyOn(calendar.activeViewChanged, 'emit').and.callThrough();
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
                 tick();
 
-                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledTimes(1);
-                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledWith(CalendarView.DECADE);
+                expect(calendar.activeViewChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.activeViewChanged.emit).toHaveBeenCalledWith(CalendarView.DECADE);
 
                 const years = dom.queryAll(By.css(HelperTestFunctions.YEAR_CSSCLASS));
                 let currentYear = dom.query(By.css(HelperTestFunctions.CURRENT_YEAR_CSSCLASS));
@@ -1617,32 +1617,32 @@ describe('IgxCalendar - ', () => {
                 expect(currentYear.nativeElement.textContent.trim()).toMatch('2016');
 
                 const previousValue = fixture.componentInstance.calendar.viewDate;
-                spyOn(calendar.onViewDateChanged, 'emit').and.callThrough();
+                spyOn(calendar.viewDateChanged, 'emit').and.callThrough();
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', currentYear.nativeElement);
 
                 fixture.detectChanges();
                 tick();
 
                 const eventArgs: IViewDateChangeEventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
-                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
-                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
+                expect(calendar.viewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.viewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
                 expect(calendar.viewDate.getFullYear()).toEqual(2016);
             }));
 
             it('Should open months view, navigate through and select a month via KB.', fakeAsync(() => {
                 const month = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_DATE_CSSCLASS))[0];
                 month.nativeElement.focus();
-                spyOn(calendar.onActiveViewChanged, 'emit').and.callThrough();
+                spyOn(calendar.activeViewChanged, 'emit').and.callThrough();
 
                 expect(month.nativeElement).toBe(document.activeElement);
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
                 tick();
 
-                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledTimes(1);
-                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledWith(CalendarView.YEAR);
+                expect(calendar.activeViewChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.activeViewChanged.emit).toHaveBeenCalledWith(CalendarView.YEAR);
 
                 const months = dom.queryAll(By.css(HelperTestFunctions.MONTH_CSSCLASS));
                 const currentMonth = dom.query(By.css(HelperTestFunctions.CURRENT_MONTH_CSSCLASS));
@@ -1672,15 +1672,15 @@ describe('IgxCalendar - ', () => {
                 expect(document.activeElement.textContent.trim()).toMatch('Sep');
 
                 const previousValue = fixture.componentInstance.calendar.viewDate;
-                spyOn(calendar.onViewDateChanged, 'emit').and.callThrough();
+                spyOn(calendar.viewDateChanged, 'emit').and.callThrough();
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
                 tick();
 
                 const eventArgs: IViewDateChangeEventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
-                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
-                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
+                expect(calendar.viewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.viewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
                 expect(calendar.viewDate.getMonth()).toEqual(8);
             }));
 

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

@@ -717,7 +717,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     public animationDone(event) {
         if ((event.fromState === ScrollMonth.NONE && (event.toState === ScrollMonth.PREV || event.toState === ScrollMonth.NEXT)) ||
              (event.fromState === 'void' && event.toState === ScrollMonth.NONE)) {
-            this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
+            this.viewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
         }
 
         if (this.monthScrollDirection !== ScrollMonth.NONE) {
@@ -751,7 +751,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      */
     public viewRendered(event) {
         if (event.fromState !== 'void') {
-            this.onActiveViewChanged.emit(this.activeView);
+            this.activeViewChanged.emit(this.activeView);
         }
     }
 

projects/igniteui-angular/src/lib/calendar/month-picker/README.md

@@ -122,12 +122,12 @@ The default values are listed below.
 Event fired when a value is selected through UI interaction.
 Returns the selected value (depending on the type of selection).
 
-- `onViewDateChanged(): IViewDateChangeEventArgs`
+- `viewDateChanged(): IViewDateChangeEventArgs`
 
-Event fired after the the month/year presented in the view is changed.
+Event fired after the month/year presented in the view is changed.
 Emits an object containing the previous and current value of the `viewDate` property.
 
-- `onActiveViewChanged(): CalendarView`
+- `activeViewChanged(): CalendarView`
 
 Event fired after the active view is changed.
 Emits an CalendarView enum, indicating the `activeView` property value.

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

@@ -103,7 +103,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
     public animationDone(event) {
         if ((event.fromState === 'void' && event.toState === '') ||
         (event.fromState === '' && (event.toState === ScrollMonth.PREV || event.toState === ScrollMonth.NEXT))) {
-            this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
+            this.viewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
         }
         this.yearAction = '';
     }
@@ -113,7 +113,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
      */
     public viewRendered(event) {
         if (event.fromState !== 'void') {
-            this.onActiveViewChanged.emit(this.activeView);
+            this.activeViewChanged.emit(this.activeView);
         }
     }
 

src/app/calendar-views/calendar-views.sample.html

@@ -11,8 +11,8 @@ <h4 class="sample-title">Month Picker</h4>
                         [formatOptions]="formatOptions"
                         [locale]="localeDe"
                         (onSelection)="onSelection($event)"
-                        (onViewDateChanged)="onViewDateChanged($event)"
-                        (onActiveViewChanged)="onActiveViewChanged($event)" >
+                        (viewDateChanged)="viewDateChanged($event)"
+                        (activeViewChanged)="activeViewChanged($event)" >
                     </igx-month-picker>
                 </div>
             {{ date1 }}

src/app/calendar-views/calendar-views.sample.ts

@@ -101,11 +101,11 @@ export class CalendarViewsSampleComponent implements OnInit {
         // this.daysView.deselectDate([new Date(2019, 1, 13), new Date(2019, 1, 14)]);
     }
 
-    public onViewDateChanged(event: Date) {
+    public viewDateChanged(event: Date) {
         const date = event;
         console.log(date);
     }
 
-    public onActiveViewChanged(event: CalendarView) {
+    public activeViewChanged(event: CalendarView) {
     }
 }

src/app/calendar/calendar.sample.html

@@ -24,7 +24,7 @@ <h4 class="sample-title">Default Calendar</h4>
 
                 </div>
                 <igx-card>
-                    <igx-calendar #calendar weekStart="1" selection="single" (onViewDateChanged)="onViewDateChanged($event)" (onActiveViewChanged)="onActiveViewChanged($event)" (onSelection)="onSelection($event)" [hideOutsideDays]="false" [monthsViewNumber]="3"></igx-calendar>
+                    <igx-calendar #calendar weekStart="1" selection="single" (viewDateChanged)="viewDateChanged($event)" (activeViewChanged)="activeViewChanged($event)" (onSelection)="onSelection($event)" [hideOutsideDays]="false" [monthsViewNumber]="3"></igx-calendar>
                 </igx-card>
             </div>