feat(positioning): update variation behavior and add adaptive option (#…

…5065)

* feat(positioning): update behavior on variation position

* feat(positioning): update variation behavior and add adaptive option

* fix(tests): fix for datepicker position e2e test

cypress/full/datepicker/placement_spec.ts

@@ -39,8 +39,7 @@ describe('Datepicker demo test suite: Placement', () => {
     cy.viewport(1440, 900);
     datepicker.clickOnDatepickerInput(placement, 1);
     datepicker.isDatepickerOpened(true);
-// TODO https://github.com/cypress-io/cypress/issues/871
-    datepicker.isDatepickerPlacementCorrect(placement, 'bottom', 1); // TODO should be top
+    datepicker.isDatepickerPlacementCorrect(placement, 'top', 1);
     datepicker.clickOnDatepickerInput(placement, 1);
     datepicker.isDatepickerOpened(false);
   });

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

@@ -9,12 +9,12 @@ import { DemoDatepickerConfigMethodComponent } from './demos/config-method/confi
 import { DemoDatePickerConfigObjectComponent } from './demos/config-object/config-object';
 import { DemoDatePickerCustomFormatComponent } from './demos/custom-format/custom-format';
 import { DemoDatepickerDateInitialStateComponent } from './demos/date-initial-state/date-initial-state';
-import { DemoDatepickerDaysDisabledComponent } from './demos/disable-days/disable-days';
 import { DemoDatepickerDatesDisabledComponent } from './demos/disable-dates/disable-dates';
-import { DemoDatepickerInlineComponent } from './demos/inline-datepicker/inline-datepicker.component';
+import { DemoDatepickerDaysDisabledComponent } from './demos/disable-days/disable-days';
 import { DemoDatepickerDisabledComponent } from './demos/disabled/disabled.component';
 import { DemoDatepickerFormsComponent } from './demos/forms/forms.component';
 import { DemoDatepickerHideOnScrollComponent } from './demos/hide-on-scroll/hide-on-scroll';
+import { DemoDatepickerInlineComponent } from './demos/inline-datepicker/inline-datepicker.component';
 import { DemoDatepickerMinMaxComponent } from './demos/min-max/min-max.component';
 import { DemoDatepickerMinModeComponent } from './demos/min-mode/min-mode.component';
 import { DemoDatepickerOutsideClickComponent } from './demos/outside-click/outside-click';
@@ -24,8 +24,9 @@ import { DemoDatepickerReactiveFormsComponent } from './demos/reactive-forms/rea
 import {
   DemoDatePickerSelectDatesFromOtherMonthsComponent
 } from './demos/select-dates-from-other-months/select-dates-from-other-months';
-import { DemoDatePickerSelectWeekComponent } from './demos/select-week/select-week';
+import { DemoDatePickerAdaptivePositionComponent } from './demos/adaptive-position/adaptive-position';
 import { DemoDatepickerCustomTodayClassComponent } from './demos/custom-today-class/custom-today-class.component';
+import { DemoDatePickerSelectWeekComponent } from './demos/select-week/select-week';
 import { DemoDatepickerTriggersCustomComponent } from './demos/triggers-custom/triggers-custom';
 import { DemoDatepickerTriggersManualComponent } from './demos/triggers-manual/triggers-manual';
 import { DemoDatepickerValueChangeEventComponent } from './demos/value-change-event/value-change-event';
@@ -80,6 +81,14 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>with initial state set by <code>bsInlineValue</code> property</p>`,
         outlet: DemoDatepickerInlineComponent
       },
+      {
+        title: 'Adaptive position',
+        anchor: 'adaptive-position',
+        component: require('!!raw-loader?lang=typescript!./demos/adaptive-position/adaptive-position.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/adaptive-position/adaptive-position.html'),
+        description: `<p>You can enable adaptive position via <code>adaptivePosition</code> option in <code>bsConfig</code></p>`,
+        outlet: DemoDatePickerAdaptivePositionComponent
+      },
       {
         title: 'Initial state',
         anchor: 'date-initial-state',

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

@@ -0,0 +1,16 @@
+<div class="row">
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Datepicker"
+           class="form-control"
+           bsDatepicker
+           [bsConfig]="{ adaptivePosition: true }">
+  </div>
+  <div class="col-xs-12 col-12 col-md-4 form-group">
+    <input type="text"
+           placeholder="Daterangepicker"
+           class="form-control"
+           bsDaterangepicker
+           [bsConfig]="{ adaptivePosition: true }">
+  </div>
+</div>

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

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

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

@@ -29,10 +29,12 @@ import { DemoDatepickerTriggersCustomComponent } from './triggers-custom/trigger
 import { DemoDatepickerTriggersManualComponent } from './triggers-manual/triggers-manual';
 import { DemoDatepickerValueChangeEventComponent } from './value-change-event/value-change-event';
 import { DemoDatePickerVisibilityEventsComponent } from './visibility-events/visibility-events';
+import { DemoDatePickerAdaptivePositionComponent } from './adaptive-position/adaptive-position';
 
 
 export const DEMO_COMPONENTS = [
   DatepickerDemoComponent,
+  DemoDatePickerAdaptivePositionComponent,
   DemoDatepickerBasicComponent,
   DemoDatepickerByIsOpenPropComponent,
   DemoDatepickerChangeLocaleComponent,

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

@@ -0,0 +1,5 @@
+<pre class="card card-block card-header mb-3">Model: {{selected | json}}</pre>
+<input [(ngModel)]="selected"
+       [typeahead]="states"
+       adaptivePosition="true"
+       class="form-control">

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

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-typeahead-adaptive-position',
+  templateUrl: './adaptive-position.html'
+})
+export class DemoTypeaheadAdaptivePositionComponent {
+  selected: string;
+  states: string[] = [
+    'Alabama',
+    'Alaska',
+    'Arizona',
+    'Arkansas',
+    'California',
+    'Colorado',
+    'Connecticut',
+    'Delaware',
+    'Florida',
+    'Georgia',
+    'Hawaii',
+    'Idaho',
+    'Illinois',
+    'Indiana',
+    'Iowa',
+    'Kansas',
+    'Kentucky',
+    'Louisiana',
+    'Maine',
+    'Maryland',
+    'Massachusetts',
+    'Michigan',
+    'Minnesota',
+    'Mississippi',
+    'Missouri',
+    'Montana',
+    'Nebraska',
+    'Nevada',
+    'New Hampshire',
+    'New Jersey',
+    'New Mexico',
+    'New York',
+    'North Dakota',
+    'North Carolina',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota',
+    'Tennessee',
+    'Texas',
+    'Utah',
+    'Vermont',
+    'Virginia',
+    'Washington',
+    'West Virginia',
+    'Wisconsin',
+    'Wyoming'
+  ];
+}

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

@@ -1,3 +1,4 @@
+import { DemoTypeaheadAdaptivePositionComponent } from './adaptive-position/adaptive-position';
 import { DemoTypeaheadAsyncComponent } from './async/async';
 import { DemoTypeaheadBasicComponent } from './basic/basic';
 import { DemoTypeaheadConfigComponent } from './config/config';
@@ -15,11 +16,12 @@ import { DemoTypeaheadOnSelectComponent } from './on-select/on-select';
 import { DemoTypeaheadPhraseDelimitersComponent } from './phrase-delimiters/phrase-delimiters';
 import { DemoTypeaheadReactiveFormComponent } from './reactive-form/reactive-form';
 import { DemoTypeaheadScrollableComponent } from './scrollable/scrollable';
+import { DemotypeaheadSelectFirstItemComponent } from './selected-first-item/selected-first-item';
 import { DemoTypeaheadShowOnBlurComponent } from './show-on-blur/show-on-blur';
 import { DemoTypeaheadSingleWorldComponent } from './single-world/single-world';
-import { DemotypeaheadSelectFirstItemComponent } from './selected-first-item/selected-first-item';
 
 export const DEMO_COMPONENTS = [
+  DemoTypeaheadAdaptivePositionComponent,
   DemoTypeaheadAsyncComponent,
   DemoTypeaheadBasicComponent,
   DemoTypeaheadConfigComponent,
@@ -37,7 +39,7 @@ export const DEMO_COMPONENTS = [
   DemoTypeaheadPhraseDelimitersComponent,
   DemoTypeaheadReactiveFormComponent,
   DemoTypeaheadScrollableComponent,
+  DemotypeaheadSelectFirstItemComponent,
   DemoTypeaheadShowOnBlurComponent,
-  DemoTypeaheadSingleWorldComponent,
-  DemotypeaheadSelectFirstItemComponent
+  DemoTypeaheadSingleWorldComponent
 ];

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

@@ -1,3 +1,4 @@
+import { DemoTypeaheadAdaptivePositionComponent } from './demos/adaptive-position/adaptive-position';
 import { DemoTypeaheadAsyncComponent } from './demos/async/async';
 import { DemoTypeaheadBasicComponent } from './demos/basic/basic';
 import { DemoTypeaheadConfigComponent } from './demos/config/config';
@@ -15,9 +16,9 @@ import { DemoTypeaheadOnSelectComponent } from './demos/on-select/on-select';
 import { DemoTypeaheadPhraseDelimitersComponent } from './demos/phrase-delimiters/phrase-delimiters';
 import { DemoTypeaheadReactiveFormComponent } from './demos/reactive-form/reactive-form';
 import { DemoTypeaheadScrollableComponent } from './demos/scrollable/scrollable';
+import { DemotypeaheadSelectFirstItemComponent } from './demos/selected-first-item/selected-first-item';
 import { DemoTypeaheadShowOnBlurComponent } from './demos/show-on-blur/show-on-blur';
 import { DemoTypeaheadSingleWorldComponent } from './demos/single-world/single-world';
-import { DemotypeaheadSelectFirstItemComponent } from './demos/selected-first-item/selected-first-item';
 
 import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section';
 import { ContentSection } from '../../docs/models/content-section.model';
@@ -47,6 +48,16 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         outlet: DemoTypeaheadBasicComponent
       },
+      {
+        title: 'Adaptive position',
+        anchor: 'adaptive-position',
+        description: `
+          <p>You can enable 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: DemoTypeaheadAdaptivePositionComponent
+      },
       {
         title: 'Item template',
         anchor: 'item-template',