feat(dropdown): add scroll strategy provider (#533)

projects/ng-aquila/documentation/examples/dropdown/dropdown-examples.module.ts

@@ -14,6 +14,7 @@ import { DropdownOutlineExampleComponent } from './dropdown-outline/dropdown-out
 import { DropdownPlaceholderExampleComponent } from './dropdown-placeholder/dropdown-placeholder-example';
 import { DropdownReactiveExampleComponent } from './dropdown-reactive/dropdown-reactive-example';
 import { DropdownRenderingItemsExampleComponent } from './dropdown-rendering-items/dropdown-rendering-items-example';
+import { DropdownScrollStrategyProviderExampleComponent } from './dropdown-scroll-strategy-provider/dropdown-scroll-strategy-provider-example';
 import { DropdownSimpleBindingExampleComponent } from './dropdown-simple-binding/dropdown-simple-binding-example';
 import { DropdownStandardExampleComponent } from './dropdown-standard/dropdown-standard-example';
 import { DropdownTemplateDrivenExampleComponent } from './dropdown-template-driven/dropdown-template-driven-example';
@@ -35,6 +36,7 @@ const EXAMPLES = [
     DropdownStandardExampleComponent,
     DropdownTemplateDrivenExampleComponent,
     DropdownLazyExampleComponent,
+    DropdownScrollStrategyProviderExampleComponent,
     MultiSelectExampleComponent,
 ];
 
@@ -61,6 +63,8 @@ export class DropdownExamplesModule {
             'dropdown-standard': DropdownStandardExampleComponent,
             'dropdown-template-driven': DropdownTemplateDrivenExampleComponent,
             'dropdown-lazy': DropdownLazyExampleComponent,
+            'dropdown-scroll-strategy-provider':
+                DropdownScrollStrategyProviderExampleComponent,
             'multi-select': MultiSelectExampleComponent,
         };
     }

projects/ng-aquila/documentation/examples/dropdown/dropdown-scroll-strategy-provider/dropdown-scroll-strategy-provider-example.html

@@ -0,0 +1,13 @@
+<div nxLayout="grid">
+    <div nxRow>
+        <div nxCol="12, 12, 6">
+            <nx-formfield nxLabel="Fruit">
+                <nx-dropdown>
+                    <nx-dropdown-item nxValue="Apple"></nx-dropdown-item>
+                    <nx-dropdown-item nxValue="Orange"></nx-dropdown-item>
+                    <nx-dropdown-item nxValue="Pear"></nx-dropdown-item>
+                </nx-dropdown>
+            </nx-formfield>
+        </div>
+    </div>
+</div>

projects/ng-aquila/documentation/examples/dropdown/dropdown-scroll-strategy-provider/dropdown-scroll-strategy-provider-example.ts

@@ -0,0 +1,24 @@
+import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { Component } from '@angular/core';
+import { NX_DROPDOWN_SCROLL_STRATEGY } from '@aposin/ng-aquila/dropdown';
+
+function scrollStrategyFactory(overlay: Overlay): () => ScrollStrategy {
+    return () => overlay.scrollStrategies.close({ threshold: 100 });
+}
+
+/**
+ * @title Scroll Strategy Provider Example
+ */
+@Component({
+    selector: 'dropdown-scroll-strategy-provider-example',
+    templateUrl: './dropdown-scroll-strategy-provider-example.html',
+    styleUrls: ['./dropdown-scroll-strategy-provider-example.css'],
+    providers: [
+        {
+            provide: NX_DROPDOWN_SCROLL_STRATEGY,
+            useFactory: scrollStrategyFactory,
+            deps: [Overlay],
+        },
+    ],
+})
+export class DropdownScrollStrategyProviderExampleComponent {}

projects/ng-aquila/src/dropdown/dropdown.html

@@ -20,6 +20,7 @@
     cdkConnectedOverlay
     cdkConnectedOverlayHasBackdrop
     cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+    [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
     [cdkConnectedOverlayOrigin]="origin"
     [cdkConnectedOverlayOpen]="panelOpen"
     [cdkConnectedOverlayPositions]="_positions"

projects/ng-aquila/src/dropdown/dropdown.md

@@ -119,6 +119,17 @@ The multi select dropdown is a new component which is a replacement for the `<dr
 
 </div>
 
+### Global Settings
+
+If you want to use a custom scroll strategy for all of your dropdowns, you can use the `NX_DROPDOWN_SCROLL_STRATEGY` injection token with a factory provider. The `Overlay` service from `@angular/cdk/overlay` offers 4 different scroll strategy options:
+
+-   **reposition:** allow background scroll, the overlay moves with the background (default).
+-   **close:** allow background scroll, closes the overlay on scroll.
+-   **block:** disallow background scroll, the overlay does not move.
+-   **noop:** allow background scroll, the overlay does not move.
+
+<!-- example(dropdown-scroll-strategy-provider) -->
+
 ### Accessibility
 
 The dropdown can be accessed via keyboard. If the component owns the focus, the dropdown will open when you hit ENTER. Pressing ESC while the dropdown is open will close it. To select a value while the dropdown is open, use ARROW-UP and ARROW-DOWN. You can quickly navigate to the first item with the HOME key and to the last item with the END key. Pressing the ALT key plus either the ARROW_UP or ARROW_DOWN key opens or closes the dropdown.

projects/ng-aquila/src/dropdown/dropdown.module.ts

@@ -12,7 +12,7 @@ import { NxInputModule } from '@aposin/ng-aquila/input';
 import { NxTooltipModule } from '@aposin/ng-aquila/tooltip';
 
 import { NxDropdownClosedLabelDirective } from './closed-label.directive';
-import { NxDropdownComponent } from './dropdown';
+import { NX_DROPDOWN_SCROLL_STRATEGY_PROVIDER, NxDropdownComponent } from './dropdown';
 import { NxDropdownGroupComponent } from './group/dropdown-group';
 import { NxDropdownItemComponent } from './item/dropdown-item';
 import { NxMultiSelectComponent } from './multi-select/multi-select.component';
@@ -40,6 +40,7 @@ import { NxMultiSelectOptionComponent } from './multi-select/multi-select-option
         NxMultiSelectComponent,
         NxMultiSelectOptionComponent,
     ],
+    providers: [NX_DROPDOWN_SCROLL_STRATEGY_PROVIDER],
     exports: [NxDropdownComponent, NxDropdownItemComponent, NxDropdownGroupComponent, NxDropdownClosedLabelDirective, NxMultiSelectComponent],
 })
 export class NxDropdownModule {}

projects/ng-aquila/src/dropdown/dropdown.ts

@@ -3,7 +3,7 @@ import { Direction, Directionality } from '@angular/cdk/bidi';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
 import { DOWN_ARROW, END, ENTER, HOME, LEFT_ARROW, RIGHT_ARROW, SHIFT, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes';
-import { CdkConnectedOverlay, ConnectionPositionPair, FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, ConnectionPositionPair, FlexibleConnectedPositionStrategy, Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import {
     AfterContentInit,
     AfterViewInit,
@@ -16,6 +16,8 @@ import {
     DoCheck,
     ElementRef,
     EventEmitter,
+    Inject,
+    InjectionToken,
     Input,
     isDevMode,
     NgZone,
@@ -64,6 +66,21 @@ export class NxDropdownSelectChange<T = any> {
     ) {}
 }
 
+/** Injection token that determines the scroll handling while a dropdown is open. */
+export const NX_DROPDOWN_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>('nx-dropdown-scroll-strategy');
+
+/** @docs-private */
+export function NX_DROPDOWN_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => ScrollStrategy {
+    return () => overlay.scrollStrategies.reposition();
+}
+
+/** @docs-private */
+export const NX_DROPDOWN_SCROLL_STRATEGY_PROVIDER = {
+    provide: NX_DROPDOWN_SCROLL_STRATEGY,
+    useFactory: NX_DROPDOWN_SCROLL_STRATEGY_PROVIDER_FACTORY,
+    deps: [Overlay],
+};
+
 @Component({
     selector: 'nx-dropdown',
     templateUrl: 'dropdown.html',
@@ -332,6 +349,12 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
         this._panelOpen = value;
     }
 
+    /** Strategy factory that will be used to handle scrolling while the dropdown panel is open. */
+    private _scrollStrategyFactory = this._defaultScrollStrategyFactory;
+
+    /** Strategy that will be used to handle scrolling while the dropdown panel is open. */
+    _scrollStrategy = this._scrollStrategyFactory();
+
     /**
      * Function that transforms the value into a string.
      * This function is used for displaying and filtering the content
@@ -426,6 +449,7 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
         @Optional() private _parentForm: NgForm,
         @Optional() private _parentFormGroup: FormGroupDirective,
         @Optional() private _dir: Directionality,
+        @Inject(NX_DROPDOWN_SCROLL_STRATEGY) private _defaultScrollStrategyFactory: () => ScrollStrategy,
     ) {
         if (this.ngControl) {
             // Note: we provide the value accessor through here, instead of