Merge pull request #7799 from IgniteUI/add-calendar-events-10x

rkaraivanov · web-flow · commit 5f4923af3e78 · 2020-07-15T13:41:09.000+03:00
Remove on prefix from calendar events
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,8 +6,8 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 - `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.
 - `IgxGridState` directive
diff --git a/projects/igniteui-angular/src/lib/calendar/README.md b/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.
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts b/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
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts b/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);
             }));
 
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/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);
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/README.md b/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.
diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts b/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);
         }
     }
 
diff --git a/src/app/calendar-views/calendar-views.sample.html b/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 }}
diff --git a/src/app/calendar-views/calendar-views.sample.ts b/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) {
     }
 }
diff --git a/src/app/calendar/calendar.sample.html b/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>
 
diff --git a/src/app/calendar/calendar.sample.ts b/src/app/calendar/calendar.sample.ts
@@ -41,11 +41,11 @@ export class CalendarSampleComponent implements OnInit {
         const date = event;
     }
 
-    public onViewDateChanged(event: IViewDateChangeEventArgs) {
+    public viewDateChanged(event: IViewDateChangeEventArgs) {
         console.log(event);
     }
 
-    public onActiveViewChanged(event: CalendarView) {
+    public activeViewChanged(event: CalendarView) {
     }
 
     public setSelection(args: string) {

Original file line number	Diff line number	Diff line change
`@@ -717,7 +717,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements`
`717`	`717`	`public animationDone(event) {`
`718`	`718`	`if ((event.fromState === ScrollMonth.NONE && (event.toState === ScrollMonth.PREV \|\| event.toState === ScrollMonth.NEXT)) \|\|`
`719`	`719`	`(event.fromState === 'void' && event.toState === ScrollMonth.NONE)) {`
`720`		`- this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });`
	`720`	`+ this.viewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });`
`721`	`721`	`}`
`722`	`722`
`723`	`723`	`if (this.monthScrollDirection !== ScrollMonth.NONE) {`
`@@ -751,7 +751,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements`
`751`	`751`	`*/`
`752`	`752`	`public viewRendered(event) {`
`753`	`753`	`if (event.fromState !== 'void') {`
`754`		`- this.onActiveViewChanged.emit(this.activeView);`
	`754`	`+ this.activeViewChanged.emit(this.activeView);`
`755`	`755`	`}`
`756`	`756`	`}`
`757`	`757`
Original file line number	Diff line number	Diff line change
`@@ -103,7 +103,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {`
`103`	`103`	`public animationDone(event) {`
`104`	`104`	`if ((event.fromState === 'void' && event.toState === '') \|\|`
`105`	`105`	`(event.fromState === '' && (event.toState === ScrollMonth.PREV \|\| event.toState === ScrollMonth.NEXT))) {`
`106`		`- this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });`
	`106`	`+ this.viewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });`
`107`	`107`	`}`
`108`	`108`	`this.yearAction = '';`
`109`	`109`	`}`
`@@ -113,7 +113,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {`
`113`	`113`	`*/`
`114`	`114`	`public viewRendered(event) {`
`115`	`115`	`if (event.fromState !== 'void') {`
`116`		`- this.onActiveViewChanged.emit(this.activeView);`
	`116`	`+ this.activeViewChanged.emit(this.activeView);`
`117`	`117`	`}`
`118`	`118`	`}`
`119`	`119`
Original file line number	Diff line number	Diff line change
`@@ -101,11 +101,11 @@ export class CalendarViewsSampleComponent implements OnInit {`
`101`	`101`	`// this.daysView.deselectDate([new Date(2019, 1, 13), new Date(2019, 1, 14)]);`
`102`	`102`	`}`
`103`	`103`
`104`		`- public onViewDateChanged(event: Date) {`
	`104`	`+ public viewDateChanged(event: Date) {`
`105`	`105`	`const date = event;`
`106`	`106`	`console.log(date);`
`107`	`107`	`}`
`108`	`108`
`109`		`- public onActiveViewChanged(event: CalendarView) {`
	`109`	`+ public activeViewChanged(event: CalendarView) {`
`110`	`110`	`}`
`111`	`111`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,11 +41,11 @@ export class CalendarSampleComponent implements OnInit {`
`41`	`41`	`const date = event;`
`42`	`42`	`}`
`43`	`43`
`44`		`- public onViewDateChanged(event: IViewDateChangeEventArgs) {`
	`44`	`+ public viewDateChanged(event: IViewDateChangeEventArgs) {`
`45`	`45`	`console.log(event);`
`46`	`46`	`}`
`47`	`47`
`48`		`- public onActiveViewChanged(event: CalendarView) {`
	`48`	`+ public activeViewChanged(event: CalendarView) {`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`public setSelection(args: string) {`