feat(datepicker): rename left right classes for positioning

ng-bootstrap · May 12, 2021 · a821d49 · a821d49
1 parent bebd9ab
commit a821d49
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 15 deletions.
diff --git a/demo/src/app/components/datepicker/demos/config/datepicker-config.ts b/demo/src/app/components/datepicker/demos/config/datepicker-config.ts
@@ -1,18 +1,12 @@
 import {Component} from '@angular/core';
-import {
-  NgbCalendar,
-  NgbDate,
-  NgbDateStruct,
-  NgbInputDatepickerConfig
-} from '@ng-bootstrap/ng-bootstrap';
+import {NgbCalendar, NgbDate, NgbDateStruct, NgbInputDatepickerConfig} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'ngbd-datepicker-config',
   templateUrl: './datepicker-config.html',
-  providers: [NgbInputDatepickerConfig] // add config to the component providers
+  providers: [NgbInputDatepickerConfig]  // add config to the component providers
 })
 export class NgbdDatepickerConfig {
-
   model: NgbDateStruct;
 
   constructor(config: NgbInputDatepickerConfig, calendar: NgbCalendar) {
@@ -30,6 +24,6 @@ export class NgbdDatepickerConfig {
     config.autoClose = 'outside';
 
     // setting datepicker popup to open above the input
-    config.placement = ['top-left', 'top-right'];
+    config.placement = ['top-start', 'top-end'];
   }
 }
diff --git a/src/datepicker/datepicker-input-config.spec.ts b/src/datepicker/datepicker-input-config.spec.ts
@@ -7,7 +7,7 @@ describe('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']);
+    expect(config.placement).toEqual(['bottom-start', 'bottom-end', 'top-start', 'top-end']);
     expect(config.restoreFocus).toBe(true);
   });
 });
diff --git a/src/datepicker/datepicker-input-config.ts b/src/datepicker/datepicker-input-config.ts
@@ -16,6 +16,6 @@ export class NgbInputDatepickerConfig extends NgbDatepickerConfig {
   autoClose: boolean | 'inside' | 'outside' = true;
   container: null | 'body';
   positionTarget: string | HTMLElement;
-  placement: PlacementArray = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
+  placement: PlacementArray = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
   restoreFocus: true | HTMLElement | string = true;
 }
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -28,7 +28,7 @@ function customizeConfig(config: NgbInputDatepickerConfig) {
   config.autoClose = 'outside';
   config.container = 'body';
   config.positionTarget = 'positionTarget';
-  config.placement = ['bottom-left', 'top-right'];
+  config.placement = ['bottom-start', 'top-end'];
 }
 
 describe('NgbInputDatepicker', () => {

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -182,9 +182,9 @@ export class NgbInputDatepicker implements OnChanges,
   /**
    * The preferred placement of the datepicker popup.
    *
-   * Possible values are `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`,
-   * `"bottom-right"`, `"left"`, `"left-top"`, `"left-bottom"`, `"right"`, `"right-top"`,
-   * `"right-bottom"`
+   * Possible values are `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`,
+   * `"bottom-end"`, `"start"`, `"start-top"`, `"start-bottom"`, `"end"`, `"end-top"`,
+   * `"end-bottom"`
    *
    * Accepts an array of strings or a string with space separated possible values.
    *