Merge pull request #5248 from IgniteUI/vslavov/combo-expose-overlay

refactor(combo): expose overlay settings

Author: zdrawku

CHANGELOG.md

@@ -14,6 +14,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`
     - `IgxColumnGroup`
         - Re-templating the column group header is now possible using the `headerTemplate` input property or the `igxHeader` directive.
+- `IgxCombo`
+    - Input `[overlaySettings]` - allows an object of type `OverlaySettings` to be passed. These custom overlay settings control how the drop-down list displays.
 
 ## 8.0.2
 - `igx-list-theme` now have some new parameters for styling.

projects/igniteui-angular/src/lib/combo/README.md

@@ -265,6 +265,7 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 |  `ariaLabelledBy`        | defines label ID related to combo                 | boolean                     |
 |  `type`                  | Combo style. - "line", "box", "border", "search"                                        | string                      |
 |  `valid`                 | gets if control is valid, when used in a form     | boolean                     |
+|  `overlaySettings`       | gets/sets the custom overlay settings that control how the drop-down list displays | OverlaySettings         |
 
 ### Getters
 | Name                     | Description                                       | Type                        |

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -16,6 +16,7 @@ import { DefaultSortingStrategy } from '../data-operations/sorting-strategy';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { IgxDropDownItemBase } from '../drop-down/drop-down-item.base';
 import { DisplayDensity, DisplayDensityToken } from '../core/density';
+import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/index';
 
 const CSS_CLASS_COMBO = 'igx-combo';
 const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -185,6 +186,23 @@ describe('igxCombo', () => {
             expect(combo.displayKey).toEqual('region');
             expect(combo.displayKey === combo.valueKey).toBeFalsy();
         });
+        it('Should properly get/set overlaySettings', () => {
+            const fixture = TestBed.createComponent(IgxComboTestComponent);
+            fixture.detectChanges();
+            const combo = fixture.componentInstance.combo;
+            const defaultSettings = (combo as any)._overlaySettings;
+            spyOn(combo.dropdown, 'toggle');
+            combo.toggle();
+            expect(combo.dropdown.toggle).toHaveBeenCalledWith(defaultSettings);
+            const newSettings = {
+                positionStrategy: new ConnectedPositioningStrategy({ target: fixture.elementRef.nativeElement}),
+                scrollStrategy: new AbsoluteScrollStrategy(fixture.elementRef.nativeElement)
+            };
+            combo.overlaySettings = newSettings;
+            const expectedSettings = Object.assign({}, defaultSettings, newSettings);
+            combo.toggle();
+            expect(combo.dropdown.toggle).toHaveBeenCalledWith(expectedSettings);
+        });
 
         describe('EditorProvider', () => {
             it('Should return correct edit element', () => {

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -42,22 +42,6 @@ import { IgxComboAPIService } from './combo.api';
 import { EditorProvider } from '../core/edit-provider';
 import { take } from 'rxjs/operators';
 
-/** Custom strategy to provide the combo with callback on initial positioning */
-class ComboConnectedPositionStrategy extends ConnectedPositioningStrategy {
-    private _callback: () => void;
-    constructor(callback: () => void) {
-        super();
-        this._callback = callback;
-    }
-
-    position(contentElement, size, document?, initialCall?) {
-        if (initialCall) {
-            this._callback();
-        }
-        super.position(contentElement, size);
-    }
-}
-
 /**
  * @hidden
  */
@@ -124,7 +108,7 @@ const noop = () => { };
     ]
 })
 export class IgxComboComponent extends DisplayDensityBase implements IgxComboBase, AfterViewInit, ControlValueAccessor, OnInit,
- OnDestroy, EditorProvider {
+    OnDestroy, EditorProvider {
     /**
      * @hidden @internal
      */
@@ -148,10 +132,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     private _filteredData = [];
     private _itemHeight = null;
     private _itemsMaxHeight = null;
-    private _positionCallback: () => void;
     private _onChangeCallback: (_: any) => void = noop;
-    private overlaySettings: OverlaySettings = {
+    private _overlaySettings: OverlaySettings = {
         scrollStrategy: new AbsoluteScrollStrategy(),
+        positionStrategy: new ConnectedPositioningStrategy(),
         modal: false,
         closeOnOutsideClick: true,
         excludePositionTarget: true
@@ -171,6 +155,26 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     @ViewChild(IgxForOfDirective, { read: IgxForOfDirective, static: true })
     protected virtDir: IgxForOfDirective<any>;
 
+    /**
+     * Set custom overlay settings that control how the combo's list of items is displayed.
+     * Set:
+     * ```html
+     * <igx-combo [overlaySettings] = "customOverlaySettings"></igx-combo>
+     * ```
+     *
+     * ```typescript
+     *  const customSettings = { positionStrategy: { settings: { target: myTarget } } };
+     *  combo.overlaySettings = customSettings;
+     * ```
+     * Get any custom overlay settings used by the combo:
+     * ```typescript
+     *  const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;
+     * ```
+     */
+
+    @Input()
+    public overlaySettings: OverlaySettings = null;
+
     /**
      * @hidden @internal
      */
@@ -1249,9 +1253,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public ngOnInit() {
         this.ngControl = this.injector.get(NgControl, null);
-        this._positionCallback = () => this.dropdown.updateScrollPosition();
-        this.overlaySettings.positionStrategy = new ComboConnectedPositionStrategy(this._positionCallback);
-        this.overlaySettings.positionStrategy.settings.target = this.elementRef.nativeElement;
+        this._overlaySettings.positionStrategy.settings.target = this.elementRef.nativeElement;
         this.selection.set(this.id, new Set());
     }
 
@@ -1263,7 +1265,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
 
         if (this.ngControl) {
             this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
-    }
+        }
     }
 
     /**
@@ -1358,7 +1360,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      *```
      */
     public toggle(): void {
-        this.dropdown.toggle(this.overlaySettings);
+        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+        this.dropdown.toggle(overlaySettings);
     }
 
     /**
@@ -1370,7 +1373,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      *```
      */
     public open(): void {
-        this.dropdown.open(this.overlaySettings);
+        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+        this.dropdown.open(overlaySettings);
     }
 
     /**

src/app/combo/combo.sample.html

@@ -78,12 +78,21 @@ <h4>Search Input</h4>
             <igx-switch [(ngModel)]="filterableFlag">Filterable</igx-switch><br/>
             <igx-switch [(ngModel)]="customValuesFlag">Custom Values</igx-switch>
         </div>
+        <div>
+            <h4>Overlay Settings</h4>
+            <button igxButton="raised" (click)="changeOverlaySettings(1)">Elastic Top</button>
+            <button igxButton="raised" (click)="changeOverlaySettings(2)">Global with Animations</button>
+            <button igxButton="raised" (click)="changeOverlaySettings(0)">Initial</button>
+        </div>
+        <div>
+            <h4>Item Height</h4>
+            <button igxButton="raised" [disabled]="combo.itemHeight === 56" (click)="combo.itemHeight = 56">
+                Set ItemHeight to 56
+            </button>
+            <button igxButton="raised" [disabled]="combo.itemHeight === null" (click)="combo.itemHeight = null">
+                Reset ItemHeight
+            </button>
+        </div>
     </section>
     </div>
-    <button igxButton (click)="combo.itemHeight = 56">
-        Set ItemHeight to 56
-    </button>
-    <button igxButton (click)="combo.itemHeight = null">
-        Reset ItemHeight
-    </button>
 </div>

src/app/combo/combo.sample.ts

@@ -1,6 +1,10 @@
-import { Component, ViewChild, OnInit, TemplateRef } from '@angular/core';
-import { IgxComboComponent, IComboSelectionChangeEventArgs, DisplayDensity } from 'igniteui-angular';
+import { Component, ViewChild, OnInit, TemplateRef, AfterViewInit, ElementRef } from '@angular/core';
+import { IgxComboComponent, IComboSelectionChangeEventArgs,
+    DisplayDensity, OverlaySettings, AutoPositionStrategy, VerticalAlignment, HorizontalAlignment, GlobalPositionStrategy,
+    scaleInCenter, scaleOutCenter, ElasticPositionStrategy
+} from 'igniteui-angular';
 import { take } from 'rxjs/operators';
+import { cloneDeep } from 'lodash';
 
 const primitive = ['1', '2', '3', '4', '5', '6'];
 const complex = [{
@@ -28,10 +32,12 @@ const complex = [{
     templateUrl: './combo.sample.html',
     styleUrls: ['combo.sample.css']
 })
-export class ComboSampleComponent implements OnInit {
+export class ComboSampleComponent implements OnInit, AfterViewInit {
+    private overlaySettings: OverlaySettings[] = [null, null, null];
     private width = '160px';
     @ViewChild(IgxComboComponent, { static: true }) public igxCombo: IgxComboComponent;
     @ViewChild('comboTemplate', { read: IgxComboComponent, static: false }) public comboTemplate: IgxComboComponent;
+    @ViewChild(IgxComboComponent, { read: ElementRef, static: true }) private comboRef: ElementRef;
     public toggleItemState = false;
     private initData: any[] = [];
     public filterableFlag = true;
@@ -123,6 +129,26 @@ export class ComboSampleComponent implements OnInit {
         });
     }
 
+    ngAfterViewInit() {
+        this.overlaySettings[0] = cloneDeep(this.igxCombo.overlaySettings);
+        this.overlaySettings[1] = {
+            positionStrategy: new ElasticPositionStrategy({ target: this.comboRef.nativeElement,
+                verticalDirection: VerticalAlignment.Top, verticalStartPoint: VerticalAlignment.Bottom,
+                horizontalDirection: HorizontalAlignment.Left, horizontalStartPoint: HorizontalAlignment.Right }),
+            modal: false,
+            closeOnOutsideClick: true,
+        };
+        this.overlaySettings[2] = {
+            positionStrategy: new GlobalPositionStrategy({ openAnimation: scaleInCenter, closeAnimation: scaleOutCenter }),
+            modal: true,
+            closeOnOutsideClick: true,
+        };
+    }
+
+    changeOverlaySettings(index: number) {
+        this.igxCombo.overlaySettings = this.overlaySettings[index];
+    }
+
     changeItemTemplate() {
         const comboTemplate = this.initialItemTemplate ? null : this.igxCombo.itemTemplate;
         this.igxCombo.itemTemplate = this.initialItemTemplate ? this.initialItemTemplate : this.customItemTemplate ;