feat(positioning): accept placement values with a space separated str…

…ing (#3034)
ng-bootstrap · Feb 21, 2019 · 28ce374 · 28ce374
1 parent be84733
commit 28ce374
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 12 deletions.
diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -143,7 +143,7 @@ export class NgbInputDatepicker implements OnChanges,
    * Placement of a datepicker popup accepts:
    *    "top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right",
    *    "left", "left-top", "left-bottom", "right", "right-top", "right-bottom"
-   * and array of above values.
+   *  array or a space separated string of above values
    */
   @Input() placement: PlacementArray = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
 

diff --git a/src/dropdown/dropdown.ts b/src/dropdown/dropdown.ts
@@ -170,7 +170,7 @@ export class NgbDropdown implements OnInit,
    * Placement of a popover accepts:
    *    "top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right",
    *    "left", "left-top", "left-bottom", "right", "right-top", "right-bottom"
-   * and array of above values.
+   *  array or a space separated string of above values
    */
   @Input() placement: PlacementArray;
 

diff --git a/src/popover/popover.spec.ts b/src/popover/popover.spec.ts
@@ -384,7 +384,7 @@ describe('ngb-popover', () => {
       expect(windowEl.textContent.trim()).toBe('Great tip!');
     });
 
-    it('should accept placement in array(second value of the array should be applied)', () => {
+    it('should accept placement in array (second value of the array should be applied)', () => {
       const fixture = createTestComponent(`<div ngbPopover="Great tip!" [placement]="['left-top','top-right']"></div>`);
       const directive = fixture.debugElement.query(By.directive(NgbPopover));
 
@@ -398,6 +398,20 @@ describe('ngb-popover', () => {
       expect(windowEl.textContent.trim()).toBe('Great tip!');
     });
 
+    it('should accept placement with space separated values (second value should be applied)', () => {
+      const fixture = createTestComponent(`<div ngbPopover="Great tip!" placement="left-top top-right"></div>`);
+      const directive = fixture.debugElement.query(By.directive(NgbPopover));
+
+      directive.triggerEventHandler('click', {});
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture.nativeElement);
+
+      expect(windowEl).toHaveCssClass('popover');
+      expect(windowEl).toHaveCssClass('bs-popover-top');
+      expect(windowEl).toHaveCssClass('bs-popover-top-right');
+      expect(windowEl.textContent.trim()).toBe('Great tip!');
+    });
+
     it('should apply auto placement', () => {
       const fixture = createTestComponent(`<div ngbPopover="Great tip!" placement="auto"></div>`);
       const directive = fixture.debugElement.query(By.directive(NgbPopover));

diff --git a/src/popover/popover.ts b/src/popover/popover.ts
@@ -81,10 +81,10 @@ export class NgbPopover implements OnInit, OnDestroy, OnChanges {
    */
   @Input() popoverTitle: string | TemplateRef<any>;
   /**
-   * Placement of a popover accepts:
+    * Placement of a popover accepts:
     *    "top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right",
-   *    "left", "left-top", "left-bottom", "right", "right-top", "right-bottom"
-   * and array of above values.
+    *    "left", "left-top", "left-bottom", "right", "right-top", "right-bottom",
+    *  array or a space separated string of above values
     */
   @Input() placement: PlacementArray;
   /**

diff --git a/src/tooltip/tooltip.spec.ts b/src/tooltip/tooltip.spec.ts
@@ -270,7 +270,7 @@ describe('ngb-tooltip', () => {
         expect(windowEl.textContent.trim()).toBe('Great tip!');
       });
 
-      it('should accept placement in array(second value of the array should be applied)', () => {
+      it('should accept placement in array (second value of the array should be applied)', () => {
         const fixture =
             createTestComponent(`<div ngbTooltip="Great tip!" [placement]="['left-top','top-right']"></div>`);
         const directive = fixture.debugElement.query(By.directive(NgbTooltip));
@@ -285,6 +285,20 @@ describe('ngb-tooltip', () => {
         expect(windowEl.textContent.trim()).toBe('Great tip!');
       });
 
+      it('should accept placement with space separated values (second value should be applied)', () => {
+        const fixture = createTestComponent(`<div ngbTooltip="Great tip!" placement="left-top top-right"></div>`);
+        const directive = fixture.debugElement.query(By.directive(NgbTooltip));
+
+        directive.triggerEventHandler('mouseenter', {});
+        fixture.detectChanges();
+        const windowEl = getWindow(fixture.nativeElement);
+
+        expect(windowEl).toHaveCssClass('tooltip');
+        expect(windowEl).toHaveCssClass('bs-tooltip-top');
+        expect(windowEl).toHaveCssClass('bs-tooltip-top-right');
+        expect(windowEl.textContent.trim()).toBe('Great tip!');
+      });
+
       it('should apply auto placement', () => {
         const fixture = createTestComponent(`<div ngbTooltip="Great tip!" placement="auto"></div>`);
         const directive = fixture.debugElement.query(By.directive(NgbTooltip));

diff --git a/src/tooltip/tooltip.ts b/src/tooltip/tooltip.ts
@@ -63,8 +63,8 @@ export class NgbTooltip implements OnInit, OnDestroy {
   /**
     * Placement of a tooltip accepts:
     *    "top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right",
-    *    "left", "left-top", "left-bottom", "right", "right-top", "right-bottom"
-    * and array of above values.
+    *    "left", "left-top", "left-bottom", "right", "right-top", "right-bottom",
+    *  array or a space separated string of above values
     */
   @Input() placement: PlacementArray;
   /**

diff --git a/src/typeahead/typeahead.ts b/src/typeahead/typeahead.ts
@@ -144,7 +144,7 @@ export class NgbTypeahead implements ControlValueAccessor,
   /** Placement of a typeahead accepts:
    *    "top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right",
    *    "left", "left-top", "left-bottom", "right", "right-top", "right-bottom"
-   * and array of above values.
+   *  array or a space separated string of above values
   */
   @Input() placement: PlacementArray = 'bottom-left';
 

diff --git a/src/util/positioning.ts b/src/util/positioning.ts
@@ -159,6 +159,7 @@ export class Positioning {
   }
 }
 
+const placementSeparator = /\s+/;
 const positionService = new Positioning();
 
 /*
@@ -174,7 +175,8 @@ const positionService = new Positioning();
 export function positionElements(
     hostElement: HTMLElement, targetElement: HTMLElement, placement: string | Placement | PlacementArray,
     appendToBody?: boolean, baseClass?: string): Placement {
-  let placementVals: Array<Placement> = Array.isArray(placement) ? placement : [placement as Placement];
+  let placementVals: Array<Placement> =
+      Array.isArray(placement) ? placement : placement.split(placementSeparator) as Array<Placement>;
 
   const allowedPlacements = [
     'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'left-top', 'left-bottom',
@@ -251,4 +253,4 @@ export function positionElements(
 export type Placement = 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' |
     'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
 
-export type PlacementArray = Placement | Array<Placement>;
+export type PlacementArray = Placement | Array<Placement>| string;