fix(positioning): fix errors on invalid position

demo/src/app/components/+accordion/docs/usage.md

@@ -1,9 +1,15 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
 // RECOMMENDED
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 // or
 import { AccordionModule } from 'ngx-bootstrap';
 
 @NgModule({
-  imports: [AccordionModule.forRoot(),...]
+  imports: [
+    BrowserAnimationsModule,
+    AccordionModule.forRoot(),
+    ...
+  ]
 })
 export class AppModule(){}

demo/src/app/components/+collapse/docs/usage.md

@@ -1,9 +1,15 @@
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
 // RECOMMENDED
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 // or
 import { CollapseModule } from 'ngx-bootstrap';
 
 @NgModule({
-  imports: [CollapseModule.forRoot(),...]
+  imports: [
+    BrowserAnimationsModule,
+    CollapseModule.forRoot(),
+    ...
+  ]
 })
 export class AppModule(){}

demo/src/app/components/+popover/demos/placement/placement.html

@@ -1,34 +1,34 @@
 <button type="button" class="btn btn-default btn-secondary"
         popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
         popoverTitle="Popover on top"
-        placement="top">
+        placement="top left top">
   Popover on top
 </button>
 
 <button type="button" class="btn btn-default btn-secondary"
         popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
         popoverTitle="Popover on right"
-        placement="right">
+        placement="auto 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">
+        placement="auto auto auto auto">
   Popover auto
 </button>
 
 <button type="button" class="btn btn-default btn-secondary"
         popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
         popoverTitle="Popover on left"
-        placement="left">
+        placement="left awtw4rta4wt">
   Popover on left
 </button>
 
 <button type="button" class="btn btn-default btn-secondary"
         popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
         popoverTitle="Popover on bottom"
-        placement="bottom">
+        placement="bottom start">
   Popover on bottom
 </button>

demo/src/app/components/+tooltip/demos/adaptive-position/adaptive-position.html

@@ -0,0 +1,13 @@
+<button type="button" class="btn btn-default btn-secondary mb-2"
+        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        [adaptivePosition]="false"
+        placement="top">
+  Tooltip on top
+</button>
+
+<button type="button" class="btn btn-default btn-secondary mb-2"
+        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
+        [adaptivePosition]="false"
+        placement="right">
+  Tooltip on right
+</button>

demo/src/app/components/+tooltip/demos/adaptive-position/adaptive-position.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-tooltip-adaptive-position',
+  templateUrl: './adaptive-position.html'
+})
+export class DemoTooltipAdaptivePositionComponent {}

demo/src/app/components/+tooltip/demos/index.ts

@@ -1,3 +1,4 @@
+import { DemoTooltipAdaptivePositionComponent } from './adaptive-position/adaptive-position';
 import { DemoTooltipBasicComponent } from './basic/basic';
 import { DemoTooltipClassComponent } from './class/class';
 import { DemoTooltipConfigComponent } from './config/config';
@@ -14,6 +15,7 @@ import { DemoTooltipTriggersCustomComponent } from './triggers-custom/triggers-c
 import { DemoTooltipTriggersManualComponent } from './triggers-manual/triggers-manual';
 
 export const DEMO_COMPONENTS = [
+  DemoTooltipAdaptivePositionComponent,
   DemoTooltipBasicComponent,
   DemoTooltipClassComponent,
   DemoTooltipConfigComponent,

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

@@ -1,3 +1,4 @@
+import { DemoTooltipAdaptivePositionComponent } from './demos/adaptive-position/adaptive-position';
 import { DemoTooltipBasicComponent } from './demos/basic/basic';
 import { DemoTooltipClassComponent } from './demos/class/class';
 import { DemoTooltipConfigComponent } from './demos/config/config';
@@ -53,6 +54,16 @@ export const demoComponentContent: ContentSection[] = [
           used to detect a position that fits the component on the screen.</p>`,
         outlet: DemoTooltipPlacementComponent
       },
+      {
+        title: 'Disable adaptive position',
+        anchor: 'adaptive-position',
+        description: `
+          <p>You can disable adaptive position via <code>adaptivePosition</code> input or config option</p>
+        `,
+        component: require('!!raw-loader?lang=typescript!./demos/adaptive-position/adaptive-position.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/adaptive-position/adaptive-position.html'),
+        outlet: DemoTooltipAdaptivePositionComponent
+      },
       {
         title: 'Dismiss on next click',
         anchor: 'dismiss',
@@ -129,13 +140,6 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/styling-local/styling-local.html'),
         outlet: DemoTooltipStylingLocalComponent
       },
-      /*{
-        title: 'Global styling',
-        anchor: 'styling-global',
-        component: require('!!raw-loader?lang=typescript!./demos/styling-global/styling-global.ts'),
-        html: require('!!raw-loader?lang=markup!./demos/styling-global/styling-global.html'),
-        outlet: DemoTooltipStylingGlobalComponent
-      },*/
       {
         title: 'Custom class',
         anchor: 'custom-class',

demo/src/app/docs/demo-section-components/demo-examples-section/examples.component.ts

@@ -94,7 +94,8 @@ export class ExamplesComponent {
         'app/ngx-bootstrap-demo.component.ts': this.getTs(ts)
       },
       dependencies: {
-        'ngx-bootstrap': 'latest'
+        '@angular/animations': 'latest',
+        'ngx-bootstrap': 'next'
       },
       title: 'stackblitz demo',
       description: 'stackblitz demo',

demo/src/app/docs/demo-section-components/demo-examples-section/stackblitz/app.module.ts

@@ -10,6 +10,7 @@ export function getAppModuleCode(className: string, moduleData: NgxModuleData) {
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ${moduleData.moduleName} } from 'ngx-bootstrap/${moduleData.moduleFolder}';
 ${className === 'DemoModalWithPopupsComponent' ? `import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { PopoverModule } from 'ngx-bootstrap/popover';` : ''}
@@ -26,6 +27,7 @@ import { ${className === 'DemoModalServiceFromComponent' ? `${className}, ModalC
     ${moduleData.moduleName}.forRoot(),
     ${className === 'DemoModalWithPopupsComponent' ? `TooltipModule.forRoot(),
     PopoverModule.forRoot(),` : ''}
+    BrowserAnimationsModule,
     CommonModule,
     FormsModule,
     ReactiveFormsModule,

demo/src/ng-api-doc.ts

@@ -2060,7 +2060,7 @@ export const ngdoc: any = {
     "properties": [
       {
         "name": "dropdownMenu",
-        "type": "Promise<any>",
+        "type": "Promise<BsComponentRef<any>>",
         "description": "<p>Content to be displayed as popover.</p>\n"
       }
     ]
@@ -3308,6 +3308,12 @@ export const ngdoc: any = {
     "description": "<p>Default values provider for tooltip</p>\n",
     "methods": [],
     "properties": [
+      {
+        "name": "adaptivePosition",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>sets disable adaptive position</p>\n"
+      },
       {
         "name": "container",
         "type": "string",
@@ -3340,6 +3346,11 @@ export const ngdoc: any = {
     "selector": "[tooltip], [tooltipHtml]",
     "exportAs": "bs-tooltip",
     "inputs": [
+      {
+        "name": "adaptivePosition",
+        "type": "boolean",
+        "description": "<p>sets disable adaptive position</p>\n"
+      },
       {
         "name": "container",
         "type": "string",

schematics/src/ng-add/index.ts

@@ -27,6 +27,8 @@ import { hasNgModuleImport } from '../utils/ng-module-imports';
 const bootstrapStylePath =  `./node_modules/bootstrap/dist/css/bootstrap.min.css`;
 const datePickerStylePath =  `./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css`;
 const datepickerComponentName = 'datepicker';
+const accordionComponentName = 'accordion';
+const collapseComponentName = 'collapse';
 
 /* tslint:disable-next-line: no-default-export */
 export default function (options: Schema): Rule {
@@ -42,7 +44,8 @@ export default function (options: Schema): Rule {
       : addStyles(options, insertBootstrapStyles),
     componentName
       ? addModuleOfComponent(options.project, componentName)
-      : noop()
+      : noop(),
+    addAnimationModule(options.project, componentName)
   ]);
 }
 
@@ -92,8 +95,8 @@ function addModuleOfComponent(projectName: string | undefined, componentName: st
 function addPackageJsonDependencies(): Rule {
   return (host: Tree, context: SchematicContext) => {
     const dependencies: { name: string; version: string }[] = [
-      { name: 'bootstrap', version: '4.2.1' },
-      { name: 'ngx-bootstrap', version: '^3.1.4' }
+      { name: 'bootstrap', version: '4.1.1' },
+      { name: 'ngx-bootstrap', version: '^4.1.1' }
     ];
 
     dependencies.forEach(dependency => {
@@ -127,3 +130,18 @@ function insertCommonStyles(project: WorkspaceProject, host: Tree, workspace: Wo
 
   insertBootstrapStyles(project, host, workspace);
 }
+
+function addAnimationModule(projectName: string | undefined, componentName: string) {
+  return (host: Tree) => {
+    if (!(!componentName || componentName === accordionComponentName || componentName === collapseComponentName)) {
+      return host;
+    }
+
+    const workspace = getWorkspace(host);
+    const project = getProjectFromWorkspace(workspace, projectName);
+
+    addModuleImportToRootModule(host, 'BrowserAnimationsModule', '@angular/platform-browser/animations', project);
+
+    return host;
+  };
+}

src/datepicker/themes/bs/bs-datepicker-container.component.ts

@@ -46,7 +46,8 @@ export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponen
         flip: {
           enabled: this._config.adaptivePosition
         }
-      }
+      },
+      allowedPositions: ['top', 'bottom']
     });
 
     this.isOtherMonthsActive = this._config.selectFromOtherMonth;

src/datepicker/themes/bs/bs-daterangepicker-container.component.ts

@@ -49,7 +49,8 @@ export class BsDaterangepickerContainerComponent extends BsDatepickerAbstractCom
         flip: {
           enabled: this._config.adaptivePosition
         }
-      }
+      },
+      allowedPositions: ['top', 'bottom']
     });
 
     this.containerClass = this._config.containerClass;

src/dropdown/bs-dropdown-toggle.directive.ts

@@ -82,6 +82,14 @@ export class BsDropdownToggleDirective implements OnDestroy {
   }
 
   ngOnDestroy(): void {
+    if (this._documentClickListener) {
+      this._documentClickListener();
+    }
+
+    if (this._escKeyUpListener) {
+      this._escKeyUpListener();
+    }
+
     for (const sub of this._subscriptions) {
       sub.unsubscribe();
     }

src/positioning/models/index.ts

@@ -36,4 +36,5 @@ export interface Options {
       enabled: boolean;
     };
   };
+  allowedPositions?: string[];
 }

src/positioning/modifiers/flip.ts

@@ -41,10 +41,7 @@ export function flip(data: Data): Data {
   const target = data.instance.target;
   const host = data.instance.host;
 
-  const adaptivePosition = variation
-    ? computeAutoPlacement('auto', offsetsHost, target, host, ['top', 'bottom'])
-    : computeAutoPlacement('auto', offsetsHost, target, host);
-
+  const adaptivePosition = computeAutoPlacement('auto', offsetsHost, target, host, data.options.allowedPositions);
   const flipOrder = [placement, adaptivePosition];
 
   /* tslint:disable-next-line: cyclomatic-complexity */

src/positioning/modifiers/initData.ts

@@ -12,10 +12,11 @@ export function initData(
 
   const hostElPosition = getReferenceOffsets(targetElement, hostElement);
 
-  if (!position.match(/^(auto)*\s*(left|right|top|bottom)*$/)) {
-    /* tslint:disable-next-line: no-parameter-reassignment */
-    position = 'auto';
-  }
+  if (!position.match(/^(auto)*\s*(left|right|top|bottom)*$/)
+    && !position.match(/^(left|right|top|bottom)*\s*(start|end)*$/)) {
+      /* tslint:disable-next-line: no-parameter-reassignment */
+      position = 'auto';
+    }
 
   const placementAuto = !!position.match(/auto/g);
 
@@ -25,7 +26,7 @@ export function initData(
     : position;
 
   const targetOffset = getTargetOffsets(targetElement, hostElPosition, placement);
-  placement = computeAutoPlacement(placement, hostElPosition, targetElement, hostElement);
+  placement = computeAutoPlacement(placement, hostElPosition, targetElement, hostElement, options.allowedPositions);
 
   return {
     options,

src/positioning/modifiers/preventOverflow.ts

@@ -71,7 +71,10 @@ export function preventOverflow(data: Data) {
       ? 'primary'
       : 'secondary';
 
-    data.offsets.target = { ...data.offsets.target, ...(check as any)[side](placement) };
+    data.offsets.target = {
+      ...data.offsets.target,
+      ...(check as any)[side](placement)
+    };
 
   });
 

src/positioning/modifiers/shift.ts

@@ -12,9 +12,9 @@ export function shift(data: Data): Data {
     const measurement = isVertical ? 'width' : 'height';
 
     const shiftOffsets = {
-      left: { [side]: host[side] },
-      right: {
-        [side]: host[side] + host[measurement] - host[measurement]
+      start: { [side]: host[side] },
+      end: {
+        [side]: host[side] + host[measurement] - target[measurement]
       }
     };
 

src/positioning/ng-positioning.ts

@@ -54,10 +54,9 @@ export function positionElements(
     options
   );
 
-  const target = data.instance.target;
   const offsets = getOffsets(data);
 
-  setStyles(target, {
+  setStyles(targetElement, {
     'will-change': 'transform',
     top: '0px',
     left: '0px',