feat(datepicker): wip datepicker input global config

Closes ng-bootstrap#3273

src/datepicker/datepicker-input-config.spec.ts

@@ -0,0 +1,12 @@
+import {NgbInputDatepickerConfig} from './datepicker-input-config';
+
+describe('NgbInputDatepickerConfig', () => {
+  it('should have sensible default values', () => {
+    const config = new NgbInputDatepickerConfig();
+
+    expect(config.autoClose).toBe(true);
+    expect(config.container).toBeUndefined();
+    expect(config.positionTarget).toBeUndefined();
+    expect(config.placement).toEqual(['bottom-left', 'bottom-right', 'top-left', 'top-right']);
+  });
+});

src/datepicker/datepicker-input-config.ts

@@ -0,0 +1,17 @@
+import {Injectable} from '@angular/core';
+
+import {PlacementArray} from '../util/positioning';
+
+/**
+ * A configuration service for the [`NgbDatepickerInput`](#/components/datepicker/api#NgbDatepicker) component.
+ *
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all the datepicker inputs used in the application.
+ */
+@Injectable({providedIn: 'root'})
+export class NgbInputDatepickerConfig {
+  autoClose: boolean | 'inside' | 'outside' = true;
+  container: null | 'body';
+  positionTarget: string | HTMLElement;
+  placement: PlacementArray = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
+}

src/datepicker/datepicker-input.spec.ts

@@ -11,19 +11,72 @@ import {NgbDatepicker} from './datepicker';
 import {NgbDateStruct} from './ngb-date-struct';
 import {NgbDate} from './ngb-date';
 import * as positioning from 'src/util/positioning';
+import {NgbInputDatepickerConfig} from './datepicker-input-config';
 
 const createTestCmpt = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
 
 const createTestNativeCmpt = (html: string) =>
     createGenericTestComponent(html, TestNativeComponent) as ComponentFixture<TestNativeComponent>;
 
+function expectSameValues(inputDatepicker: NgbInputDatepicker, config: NgbInputDatepickerConfig) {
+  ['autoClose', 'container', 'positionTarget', 'placement'].forEach(
+      field => expect(inputDatepicker[field]).toEqual(config[field], field));
+}
+
+function customizeConfig(config: NgbInputDatepickerConfig) {
+  config.autoClose = 'outside';
+  config.container = 'body';
+  config.positionTarget = 'positionTarget';
+  config.placement = ['bottom-left', 'top-right'];
+}
+
 describe('NgbInputDatepicker', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({declarations: [TestComponent], imports: [NgbDatepickerModule, FormsModule]});
   });
 
+  it('should initialize inputs with provided datepicker config', () => {
+    const defaultConfig = new NgbInputDatepickerConfig();
+    const fixture = createTestCmpt(`<input ngbDatepicker>`);
+
+    const inputDatepicker =
+        fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+    expectSameValues(inputDatepicker, defaultConfig);
+  });
+
+  it('should initialize inputs with provided config', () => {
+    // overrideComponent should happen before any injections, so createTestCmpt will fail here
+    TestBed.overrideComponent(TestComponent, {set: {template: '<input ngbDatepicker>'}});
+    const config = TestBed.get(NgbInputDatepickerConfig);
+    customizeConfig(config);
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    const inputDatepicker =
+        fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+    expectSameValues(inputDatepicker, config);
+  });
+
+  describe('Custom config as provider', () => {
+    const config = new NgbInputDatepickerConfig();
+    customizeConfig(config);
+
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+          {imports: [NgbDatepickerModule], providers: [{provide: NgbInputDatepickerConfig, useValue: config}]});
+    });
+
+    it('should initialize inputs with provided config as provider', () => {
+      const fixture = createTestCmpt(`<input ngbDatepicker>`);
+
+      const inputDatepicker =
+          fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
+      expectSameValues(inputDatepicker, config);
+    });
+  });
+
   describe('open, close and toggle', () => {
 
     it('should allow controlling datepicker popup from outside', () => {

src/datepicker/datepicker-input.ts

@@ -32,6 +32,7 @@ import {NgbCalendar} from './ngb-calendar';
 import {NgbDate} from './ngb-date';
 import {NgbDateParserFormatter} from './ngb-date-parser-formatter';
 import {NgbDateStruct} from './ngb-date-struct';
+import {NgbInputDatepickerConfig} from './datepicker-input-config';
 
 const NGB_DATEPICKER_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR,
@@ -258,7 +259,8 @@ export class NgbInputDatepicker implements OnChanges,
       private _vcRef: ViewContainerRef, private _renderer: Renderer2, private _cfr: ComponentFactoryResolver,
       private _ngZone: NgZone, private _service: NgbDatepickerService, private _calendar: NgbCalendar,
       private _dateAdapter: NgbDateAdapter<any>, @Inject(DOCUMENT) private _document: any,
-      private _changeDetector: ChangeDetectorRef) {
+      private _changeDetector: ChangeDetectorRef, config: NgbInputDatepickerConfig) {
+    ['autoClose', 'container', 'positionTarget', 'placement'].forEach(input => this[input] = config[input]);
     this._zoneSubscription = _ngZone.onStable.subscribe(() => this._updatePopupPosition());
   }
 

src/datepicker/datepicker.module.ts

@@ -21,6 +21,7 @@ export {NgbDatepickerDayView} from './datepicker-day-view';
 export {NgbDatepickerNavigation} from './datepicker-navigation';
 export {NgbDatepickerNavigationSelect} from './datepicker-navigation-select';
 export {NgbDatepickerConfig} from './datepicker-config';
+export {NgbInputDatepickerConfig} from './datepicker-input-config';
 export {NgbDatepickerI18n} from './datepicker-i18n';
 export {NgbDateStruct} from './ngb-date-struct';
 export {NgbDate} from './ngb-date';

src/index.ts

@@ -50,6 +50,7 @@ export {
   NgbDateParserFormatter,
   NgbDatepicker,
   NgbDatepickerConfig,
+  NgbInputDatepickerConfig,
   NgbDatepickerI18n,
   NgbDatepickerI18nHebrew,
   NgbDatepickerModule,