fix(popover): Popover position fix with scrollable div when adaptive …

…position was enabled (#6423)

Co-authored-by: udayk <uday.appam@wavemaker.com>

apps/ngx-bootstrap-docs/src/ng-api-doc.ts

@@ -3318,6 +3318,11 @@ export const ngdoc: any = {
         "defaultValue": "click",
         "type": "string",
         "description": "<p>Specifies events that should trigger. Supports a space separated list of\nevent names.</p>\n"
+      },
+      {
+        "name": "boundariesElement",
+        "type": "\"viewport\" | \"scrollParent\" | \"window\"",
+        "description": ""
       }
     ],
     "outputs": [

libs/doc-pages/popover/src/lib/demos/adaptive-position-overflow-boundary/adaptive-position-overflow-boundary.css

@@ -0,0 +1,8 @@
+
+.container {
+    height:100px;
+    overflow: auto;
+}
+.btn-padding {
+    padding: 15px;
+}

libs/doc-pages/popover/src/lib/demos/adaptive-position-overflow-boundary/adaptive-position-overflow-boundary.html

@@ -0,0 +1,21 @@
+<div class="container">
+
+    <div class="btn-padding">
+        <button type="button" class="btn btn-default btn-secondary"
+            popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top"
+            [adaptivePosition]="true" container="body" boundariesElement="viewport" placement="top">
+            Popover on top
+        </button>
+
+    </div>
+
+
+    <div class="btn-padding">
+        <button type="button" class="btn btn-default btn-secondary"
+            popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on bottom"
+            [adaptivePosition]="true" container="body" boundariesElement="viewport" placement="bottom">
+            Popover on bottom
+        </button>
+    </div>
+
+</div>

libs/doc-pages/popover/src/lib/demos/adaptive-position-overflow-boundary/adaptive-position-overflow-boundary.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'demo-popover-adaptive-position-overflow-boundary',
+  templateUrl: './adaptive-position-overflow-boundary.html',
+  styleUrls: ['./adaptive-position-overflow-boundary.css']
+
+})
+export class DemoAdaptivePositionOverflowBoundaryComponent {}

libs/doc-pages/popover/src/lib/demos/index.ts

@@ -18,9 +18,11 @@ import { DemoPopoverStylingLocalComponent } from './styling-local/styling-local'
 import { DemoPopoverTriggersCustomComponent } from './triggers-custom/triggers-custom';
 import { DemoPopoverTriggersManualComponent } from './triggers-manual/triggers-manual';
 import { DemoPopoverCornerPlacementComponent } from './corner-placement/corner-placement';
+import { DemoAdaptivePositionOverflowBoundaryComponent } from './adaptive-position-overflow-boundary/adaptive-position-overflow-boundary';
 
 export const DEMO_COMPONENTS = [
   DemoPopoverAdaptivePositionComponent,
+  DemoAdaptivePositionOverflowBoundaryComponent,
   DemoPopoverBasicComponent,
   DemoPopoverByIsOpenPropComponent,
   DemoPopoverClassComponent,

libs/doc-pages/popover/src/lib/popover-section.list.ts

@@ -26,6 +26,7 @@ import {
   NgApiDocComponent,
   NgApiDocConfigComponent
 } from '@ngx-bootstrap-doc/docs';
+import { DemoAdaptivePositionOverflowBoundaryComponent } from './demos/adaptive-position-overflow-boundary/adaptive-position-overflow-boundary';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -73,6 +74,16 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader!./demos/adaptive-position/adaptive-position.html'),
         outlet: DemoPopoverAdaptivePositionComponent
       },
+      {
+        title: 'Adaptive position with overflow boundary',
+        anchor: 'adaptive-position-overflow-boundary',
+        description: `
+          <p>You can control the popover boundaries via <code>boundariesElement</code> input or config option.   <code>boundariesElement</code> property of a popover can contain boundaries namely <code>viewport, scrollParent, window</code>.</p>
+        `,
+        component: require('!!raw-loader!./demos/adaptive-position-overflow-boundary/adaptive-position-overflow-boundary.ts'),
+        html: require('!!raw-loader!./demos/adaptive-position-overflow-boundary/adaptive-position-overflow-boundary.html'),
+        outlet: DemoAdaptivePositionOverflowBoundaryComponent
+      },
       {
         title: 'Dismiss on next click',
         anchor: 'popover-dismiss',
@@ -240,6 +251,11 @@ export const demoComponentContent: ContentSection[] = [
         anchor: 'adaptive-position-ex',
         outlet: DemoPopoverAdaptivePositionComponent
       },
+      {
+        title: 'Adaptive position with overflow boundary',
+        anchor: 'adaptive-position-overflow-boundary-ex',
+        outlet: DemoAdaptivePositionOverflowBoundaryComponent
+      },
       {
         title: 'Dismiss on next click',
         anchor: 'popover-dismiss-ex',

src/popover/popover.config.ts

@@ -29,4 +29,6 @@ export class PopoverConfig {
   container?: string;
   /** delay before showing the tooltip */
   delay = 0;
+
+  boundariesElement?:string;
 }

src/popover/popover.directive.ts

@@ -20,6 +20,8 @@ export class PopoverDirective implements OnInit, OnDestroy {
   popoverId = id++;
   /** sets disable adaptive position */
   @Input() adaptivePosition = true;
+
+  @Input() boundariesElement?: ('viewport' | 'scrollParent' | 'window');
   /**
    * Content to be displayed as popover.
    */
@@ -159,7 +161,8 @@ export class PopoverDirective implements OnInit, OnDestroy {
           enabled: this.adaptivePosition
         },
         preventOverflow: {
-          enabled: this.adaptivePosition
+          enabled: this.adaptivePosition,
+          boundariesElement: this.boundariesElement || 'scrollParent' 
         }
       }
     });