feat(datepicker): introduce 'dateSelect' event to replace 'select'

This commit changes name of the component custom event to avoid
conflicts with native 'select' event.

Existing event name will be marked as deprecated in v6.

Fixes #3444

demo/src/app/components/datepicker/demos/range/datepicker-range.html

@@ -1,6 +1,6 @@
 <p>Example of the range selection</p>
 
-<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
+<ngb-datepicker #dp (dateSelect)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
 </ngb-datepicker>
 
 <ng-template #t let-date let-focused="focused">

demo/src/app/components/datepicker/overview/datepicker-overview.component.html

@@ -101,7 +101,7 @@ <h4>Handling the popup</h4>
   <ngbd-code [snippet]="snippets.form"></ngbd-code>
 
   <p>
-    Alternatively you could use the <code>(dateSelect)</code> or <code>(select)</code> outputs.
+    Alternatively you could use the <code>(dateSelect)</code> outputs.
     The difference from <code>ngModel</code> is that outputs will continue emitting the same value,
     if user clicks on the same date. <code>NgModel</code> will do it only once.
   </p>

demo/src/app/components/datepicker/overview/datepicker-overview.component.ts

@@ -45,7 +45,7 @@ export class NgbdDatepickerOverviewComponent {
       lang: 'html',
       code: `
         <!-- inline -->
-        <ngb-datepicker (select)="onDateSelect($event)"></ngb-datepicker>
+        <ngb-datepicker (dateSelect)="onDateSelect($event)"></ngb-datepicker>
 
         <!-- in the popup -->
         <input type="text" ngbDatepicker (dateSelect)="onDateSelect($event)"/>

demo/src/app/components/datepicker/overview/demo/datepicker-overview-demo.component.ts

@@ -28,7 +28,7 @@ import {NgbCalendar, NgbDate, NgbDateNativeAdapter} from '@ng-bootstrap/ng-boots
     </ng-template>
 
     <ngb-datepicker
-      (select)="onDateSelection($event)"
+      (dateSelect)="onDateSelection($event)"
       [dayTemplate]="dayTemplate"
       [markDisabled]="markDisabled"
       [showWeekNumbers]="true"

src/datepicker/datepicker-input.ts

@@ -440,7 +440,7 @@ export class NgbInputDatepicker implements OnChanges,
 
   private _subscribeForDatepickerOutputs(datepickerInstance: NgbDatepicker) {
     datepickerInstance.navigate.subscribe(navigateEvent => this.navigate.emit(navigateEvent));
-    datepickerInstance.select.subscribe(date => {
+    datepickerInstance.dateSelect.subscribe(date => {
       this.dateSelect.emit(date);
       if (this.autoClose === true || this.autoClose === 'inside') {
         this.close();

src/datepicker/datepicker-service.spec.ts

@@ -48,7 +48,7 @@ describe('ngb-datepicker-service', () => {
     // subscribing
     subscriptions.push(
         service.model$.subscribe(mock.onNext), service.model$.subscribe(m => model = m),
-        service.select$.subscribe(mockSelect.onNext), service.select$.subscribe(d => selectDate = d));
+        service.dateSelect$.subscribe(mockSelect.onNext), service.dateSelect$.subscribe(d => selectDate = d));
   });
 
   afterEach(() => { subscriptions.forEach(s => s.unsubscribe()); });

src/datepicker/datepicker-service.ts

@@ -25,7 +25,7 @@ import {NgbDatepickerI18n} from './datepicker-i18n';
 export class NgbDatepickerService {
   private _model$ = new Subject<DatepickerViewModel>();
 
-  private _select$ = new Subject<NgbDate>();
+  private _dateSelect$ = new Subject<NgbDate>();
 
   private _state: DatepickerViewModel = {
     disabled: false,
@@ -43,7 +43,10 @@ export class NgbDatepickerService {
 
   get model$(): Observable<DatepickerViewModel> { return this._model$.pipe(filter(model => model.months.length > 0)); }
 
-  get select$(): Observable<NgbDate> { return this._select$.pipe(filter(date => date !== null)); }
+  get dateSelect$(): Observable<NgbDate> { return this._dateSelect$.pipe(filter(date => date !== null)); }
+
+  /** @deprecated please use `dateSelect$` */
+  get select$(): Observable<NgbDate> { return this.dateSelect$; }
 
   set dayTemplateData(dayTemplateData: NgbDayTemplateData) {
     if (this._state.dayTemplateData !== dayTemplateData) {
@@ -138,7 +141,7 @@ export class NgbDatepickerService {
       }
 
       if (options.emitEvent && isDateSelectable(selectedDate, this._state)) {
-        this._select$.next(selectedDate);
+        this._dateSelect$.next(selectedDate);
       }
     }
   }

src/datepicker/datepicker.spec.ts

@@ -611,22 +611,22 @@ describe('ngb-datepicker', () => {
   });
 
   it('should emit select event when select date', () => {
-    const fixture =
-        createTestComponent(`<ngb-datepicker #dp [startDate]="date" (select)="onSelect($event)"></ngb-datepicker>`);
+    const fixture = createTestComponent(
+        `<ngb-datepicker #dp [startDate]="date" (dateSelect)="onDateSelect($event)"></ngb-datepicker>`);
 
-    spyOn(fixture.componentInstance, 'onSelect');
+    spyOn(fixture.componentInstance, 'onDateSelect');
     let dates = getDates(fixture.nativeElement);
     dates[11].click();
 
     fixture.detectChanges();
-    expect(fixture.componentInstance.onSelect).toHaveBeenCalledTimes(1);
+    expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledTimes(1);
   });
 
   it('should emit select event twice when select same date twice', () => {
-    const fixture =
-        createTestComponent(`<ngb-datepicker #dp [startDate]="date" (select)="onSelect($event)"></ngb-datepicker>`);
+    const fixture = createTestComponent(
+        `<ngb-datepicker #dp [startDate]="date" (dateSelect)="onDateSelect($event)"></ngb-datepicker>`);
 
-    spyOn(fixture.componentInstance, 'onSelect');
+    spyOn(fixture.componentInstance, 'onDateSelect');
     let dates = getDates(fixture.nativeElement);
 
     dates[11].click();
@@ -635,15 +635,15 @@ describe('ngb-datepicker', () => {
     dates[11].click();
     fixture.detectChanges();
 
-    expect(fixture.componentInstance.onSelect).toHaveBeenCalledTimes(2);
+    expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledTimes(2);
   });
 
   it('should emit select event twice when press enter key twice', () => {
-    const fixture =
-        createTestComponent(`<ngb-datepicker #dp [startDate]="date" (select)="onSelect($event)"></ngb-datepicker>`);
+    const fixture = createTestComponent(
+        `<ngb-datepicker #dp [startDate]="date" (dateSelect)="onDateSelect($event)"></ngb-datepicker>`);
     const datepicker = fixture.debugElement.query(By.directive(NgbDatepicker));
 
-    spyOn(fixture.componentInstance, 'onSelect');
+    spyOn(fixture.componentInstance, 'onDateSelect');
 
     focusDay();
     fixture.detectChanges();
@@ -653,15 +653,15 @@ describe('ngb-datepicker', () => {
 
     triggerKeyDown(getMonthContainer(datepicker), 13 /* enter */);
     fixture.detectChanges();
-    expect(fixture.componentInstance.onSelect).toHaveBeenCalledTimes(2);
+    expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledTimes(2);
   });
 
   it('should emit select event twice when press space key twice', () => {
-    const fixture =
-        createTestComponent(`<ngb-datepicker #dp [startDate]="date" (select)="onSelect($event)"></ngb-datepicker>`);
+    const fixture = createTestComponent(
+        `<ngb-datepicker #dp [startDate]="date" (dateSelect)="onDateSelect($event)"></ngb-datepicker>`);
     const datepicker = fixture.debugElement.query(By.directive(NgbDatepicker));
 
-    spyOn(fixture.componentInstance, 'onSelect');
+    spyOn(fixture.componentInstance, 'onDateSelect');
 
     focusDay();
     fixture.detectChanges();
@@ -671,7 +671,7 @@ describe('ngb-datepicker', () => {
 
     triggerKeyDown(getMonthContainer(datepicker), 32 /* space */);
     fixture.detectChanges();
-    expect(fixture.componentInstance.onSelect).toHaveBeenCalledTimes(2);
+    expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledTimes(2);
   });
 
   it('should insert an embedded view for footer when `footerTemplate` provided', () => {
@@ -1286,7 +1286,7 @@ class TestComponent {
   dayTemplateData = () => '!';
   markDisabled = (date: NgbDateStruct) => { return NgbDate.from(date).equals(new NgbDate(2016, 8, 22)); };
   onNavigate = () => {};
-  onSelect = () => {};
+  onDateSelect = () => {};
   getDate = () => ({year: 2016, month: 8});
   onPreventableNavigate = (event: NgbDatepickerNavigateEvent) => event.preventDefault();
 }

src/datepicker/datepicker.ts

@@ -273,7 +273,16 @@ export class NgbDatepicker implements OnDestroy,
    *
    * The payload of the event is currently selected `NgbDate`.
    */
-  @Output() select = new EventEmitter<NgbDate>();
+  @Output() dateSelect = new EventEmitter<NgbDate>();
+
+  /**
+   * An event emitted when user selects a date using keyboard or mouse.
+   *
+   * The payload of the event is currently selected `NgbDate`.
+   *
+   * @deprecated please use 'dateSelect' event
+   */
+  @Output() select = this.dateSelect;
 
   onChange = (_: any) => {};
   onTouched = () => {};
@@ -287,7 +296,7 @@ export class NgbDatepicker implements OnDestroy,
      'maxDate', 'navigation', 'outsideDays', 'showWeekdays', 'showWeekNumbers', 'startDate']
         .forEach(input => this[input] = config[input]);
 
-    _service.select$.pipe(takeUntil(this._destroyed$)).subscribe(date => { this.select.emit(date); });
+    _service.dateSelect$.pipe(takeUntil(this._destroyed$)).subscribe(date => { this.dateSelect.emit(date); });
 
     _service.model$.pipe(takeUntil(this._destroyed$)).subscribe(model => {
       const newDate = model.firstDate;