feat(datepicker): change 'select' event to 'dateSelect'

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> output.
     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,7 @@ 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)); }
 
   set dayTemplateData(dayTemplateData: NgbDayTemplateData) {
     if (this._state.dayTemplateData !== dayTemplateData) {
@@ -138,7 +138,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,17 @@ 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`.
+   *
+   * Please use 'dateSelect' output instead, this will be deprecated in version 6.0 due to collision with native
+   * 'select' event.
+   */
+  @Output() select = this.dateSelect;
 
   onChange = (_: any) => {};
   onTouched = () => {};
@@ -287,7 +297,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;