feat(positioning): auto option for positioning

demo/src/app/components/+popover/demos/four-directions/four-directions.html

@@ -25,3 +25,10 @@
         placement="right">
   Popover on right
 </button>
+
+<button type="button" class="btn btn-default btn-secondary"
+        popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        popoverTitle="Popover auto"
+        placement="auto">
+  Popover auto
+</button>

demo/src/app/components/+popover/popover-section.component.ts

@@ -49,6 +49,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   <!-- four directions -->
   <h2 routerLink="." fragment="four-directions" id="four-directions">Four directions</h2>
   Four positioning options are available: top, right, bottom, and left aligned.
+  Besides that, auto option may be used to detect a position that fits the component on screen.
   <ng-sample-box [ts]="demos.forDirections.component" [html]="demos.forDirections.html">
     <demo-popover-four-directions></demo-popover-four-directions>
   </ng-sample-box>

demo/src/app/components/+tooltip/demos/four-directions/four-directions.html

@@ -21,3 +21,9 @@
         placement="right">
   Tooltip on right
 </button>
+
+<button type="button" class="btn btn-default btn-secondary"
+        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        placement="auto">
+  Tooltip auto
+</button>

demo/src/app/components/+tooltip/tooltip-section.component.ts

@@ -47,6 +47,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   <!-- four directions -->
   <h2 routerLink="." fragment="four-directions" id="four-directions">Four directions</h2>
   Four positioning options are available: top, right, bottom, and left aligned.
+  Besides that, auto option may be used to detect a position that fits the component on screen.
   <ng-sample-box [ts]="demos.forDirections.component" [html]="demos.forDirections.html">
     <demo-tooltip-four-directions></demo-tooltip-four-directions>
   </ng-sample-box>

src/popover/popover.config.ts

@@ -9,7 +9,7 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class PopoverConfig {
   /**
-   * Placement of a popover. Accepts: "top", "bottom", "left", "right"
+   * Placement of a popover. Accepts: "top", "bottom", "left", "right", "auto"
    */
   public placement: string = 'top';
   /**

src/popover/popover.directive.ts

@@ -22,7 +22,7 @@ export class PopoverDirective implements OnInit, OnDestroy {
   /**
    * Placement of a popover. Accepts: "top", "bottom", "left", "right"
    */
-  @Input() public placement: 'top' | 'bottom' | 'left' | 'right';
+  @Input() public placement: 'top' | 'bottom' | 'left' | 'right' | 'auto';
   /**
    * Specifies events that should trigger. Supports a space separated list of
    * event names.

src/positioning/ng-positioning.ts

@@ -83,7 +83,7 @@ export class Positioning {
       bottom: hostElPosition.top + hostElPosition.height
     };
     const targetElBCR = targetElement.getBoundingClientRect();
-    const placementPrimary = placement.split(' ')[0] || 'top';
+    let placementPrimary = placement.split(' ')[0] || 'top';
     const placementSecondary = placement.split(' ')[1] || 'center';
 
     let targetElPosition: ClientRect = {
@@ -95,6 +95,22 @@ export class Positioning {
       right: targetElBCR.width || targetElement.offsetWidth
     };
 
+    if (placementPrimary==="auto") {
+      if (targetElPosition.top + hostElPosition.top - targetElement.offsetHeight < 0) {
+        placementPrimary = "bottom";
+      }
+      if (targetElPosition.bottom + hostElPosition.bottom + targetElement.offsetHeight > window.innerHeight) {
+        placementPrimary = "top";
+      }
+      if (targetElPosition.left + hostElPosition.left - targetElement.offsetWidth < 0) {
+        placementPrimary = "right";
+      }
+      if (targetElPosition.right + hostElPosition.right + targetElement.offsetWidth > window.innerWidth ) {
+        placementPrimary = "left";
+      }
+      targetElement.classList.add(placementPrimary);
+    }
+
     switch (placementPrimary) {
       case 'top':
         targetElPosition.top = hostElPosition.top - targetElement.offsetHeight;

src/spec/ng-bootstrap/popover.spec.ts

@@ -232,6 +232,24 @@ describe('popover', () => {
       expect(windowEl.textContent.trim())
         .toBe('Great tip!');
     });
+
+    it('should use auto position', () => {
+      const fixture = createTestComponent(`<div popover="Great tip!" placement="auto"></div>`);
+      const directive = fixture.debugElement.query(By.directive(PopoverDirective));
+
+      directive.triggerEventHandler('click', {});
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture.nativeElement);
+
+      expect(windowEl)
+        .toHaveCssClass('popover');
+      expect(windowEl)
+        .toHaveCssClass('popover-auto');
+      expect(windowEl)
+        .toHaveCssClass('left');
+      expect(windowEl.textContent.trim())
+        .toBe('Great tip!');
+    });
   });
 
   describe('container', () => {

src/spec/ng-bootstrap/tooltip.spec.ts

@@ -187,6 +187,20 @@ describe('tooltip', () => {
         expect(windowEl).toHaveCssClass('tooltip-left');
         expect(windowEl.textContent.trim()).toBe('Great tip!');
       });
+
+      it('should use auto position', () => {
+        const fixture = createTestComponent(`<div tooltip="Great tip!" placement="auto"></div>`);
+        const directive = fixture.debugElement.query(By.directive(TooltipDirective));
+
+        directive.triggerEventHandler('mouseenter', {});
+        fixture.detectChanges();
+        const windowEl = getWindow(fixture.nativeElement);
+
+        expect(windowEl).toHaveCssClass('tooltip');
+        expect(windowEl).toHaveCssClass('tooltip-auto');
+        expect(windowEl).toHaveCssClass('left');
+        expect(windowEl.textContent.trim()).toBe('Great tip!');
+      });
     });
 
     describe('triggers', () => {