Merge branch 'master' into mkirova/fix-5102-master

Author: ChronosSF

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);
     }
 
     /**

projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss

@@ -35,7 +35,7 @@
 ///     $content-text-color: rgba(0, 0, 0, .8)
 ///   );
 ///   // Pass the theme to the igx-card component mixin
-///   @include igx-calendar($my-card-theme);
+///   @include igx-card($my-card-theme);
 @function igx-card-theme(
     $palette: $default-palette,
     $schema: $light-schema,

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -19,11 +19,13 @@
 ///
 /// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted.
 ///
+/// @param {Color} $content-background [null] - The table body background color.
+/// @param {Color} $content-text-color [null] - The table body text color.
+///
 /// @param {Color} $ghost-header-text-color [null] - The dragged header text color.
 /// @param {Color} $ghost-header-icon-color [null] - The dragged header icon color.
 /// @param {Color} $ghost-header-background [null] - The dragged header background color.
-/// @param {Color} $content-background [null] - The table body background color.
-/// @param {Color} $content-text-color [null] - The table body text color.
+///
 /// @param {Color} $row-odd-background [null] - The background color of odd rows.
 /// @param {Color} $row-even-background [null] - The background color of even rows.
 /// @param {Color} $row-odd-text-color [null] - The text color of odd rows.
@@ -33,50 +35,64 @@
 /// @param {Color} $row-hover-background [null] - The hover row background color.
 /// @param {Color} $row-hover-text-color [null] - The hover row text color.
 /// @param {Color} $row-border-color [null] - The row bottom border color.
-/// @param {Color} $row-highlight [null] - The grid row highlight indication color.
+///
 /// @param {String} $pinned-border-width [null] - The border width of the pinned border.
 /// @param {String} $pinned-border-style [null] - The CSS border style of the pinned border.
 /// @param {Color} $pinned-border-color [null] - The color of the pinned border.
+///
 /// @param {Color} $cell-active-border-color [null] - The border color for the currently active(focused) cell.
 /// @param {Color} $cell-selected-background [null] - The selected cell background color.
 /// @param {Color} $cell-selected-text-color [null] - The selected cell text color.
+/// @param {Color} $cell-editing-background [null] - The background color of the cell being edited.
+/// @param {Color} $cell-edited-value-color [null] - The text color of a sell that has been edited.
+///
+/// @param {Color} $edit-mode-color [null] - The color applied around the row when in editing mode.
+/// @param {Color} $edited-row-indicator [null] - The color applied to the edited row indicator line.
+///
 /// @param {Color} $resize-line-color [null] - The table header resize line color.
+/// @param {Color} $drop-indicator-color [null] - The color applied to the line between the columns when dragging a column.
 ///
 /// @param {Color} $grouparea-background [null] - The grid group area background color.
 ///
 /// @param {Color} $group-row-background [null] - The grid group row background color.
 /// @param {Color} $group-row-selected-background [null] - The drop area background on drop color.
-/// @param {Color} $active-expand-icon-color [null] - The drop area background on drop color.
-/// @param {Color} $active-expand-icon-hover-color [null] - The drop area background on drop color.
 /// @param {Color} $group-label-column-name-text [null] - The grid group row column name text color.
 /// @param {Color} $group-label-icon [null] - The grid group row icon color.
 /// @param {Color} $group-label-text [null] - The grid group row text color.
 ///
 /// @param {Color} $expand-all-icon-color [null] - The grid header expand all group rows icon color.
 /// @param {Color} $expand-all-icon-hover-color [null] - The grid header expand all group rows icon hover color.
+///
 /// @param {Color} $expand-icon-color [null] - The grid row expand icon color.
 /// @param {Color} $expand-icon-hover-color [null] - The grid row expand icon hover color.
+///
+/// @param {Color} $active-expand-icon-color [null] - The drop area background on drop color.
+/// @param {Color} $active-expand-icon-hover-color [null] - The drop area background on drop color.
+///
 /// @param {Color} $group-count-background [null] - The grid group row cont badge background color.
 /// @param {Color} $group-count-text-color [null] - The grid group row cont badge text color.
+///
 /// @param {Color} $drop-area-text-color [null] - The drop area text color.
 /// @param {Color} $drop-area-icon-color [null] - The drop area icon color.
 /// @param {Color} $drop-area-background [null] - The drop area background color.
 /// @param {Color} $drop-area-on-drop-background [null] - The drop area background on drop color.
-/// @param {Color} $tree-filtered-text-color [null] - grouping row background color on focus.
 ///
 /// @param {Color} $filtering-header-background [null] - The background color of the filtered column header.
 /// @param {Color} $filtering-header-text-color [null] - The text color color of the filtered column header.
 /// @param {Color} $filtering-row-background [null] - The background color of the filtering row.
 /// @param {Color} $filtering-row-text-color [null] - The text-color color of the filtering row.
+/// @param {Color} $tree-filtered-text-color [null] - grouping row background color on focus.
 ///
 /// @param {Color} $body-summaries-background [null] - The background color of the summary groups located the body.
 /// @param {Color} $body-summaries-text-color [null] - The text color of the summary results located the body.
 /// @param {Color} $root-summaries-background [null] - The background color of the summary groups located the footer.
 /// @param {Color} $root-summaries-text-color [null] - The text color of the summary results located the footer.
+///
+/// @param {Color} $row-highlight [null] - The grid row highlight indication color.
 /// @param {box-shadow} $grid-shadow [null] - The shadow of the grid.
 /// @param {box-shadow} $drag-shadow [null] - The shadow used for movable elements (ex. column headers).
-/// @param {color} $row-drag-color [null] - The row drag handle color.
 /// @param {color} $row-ghost-background [null] - The dragged row background color.
+/// @param {color} $row-drag-color [null] - The row drag handle color.
 /// @param {border-radius} $drop-area-border-radius [null] - The border radius used for column drop area.
 ///
 /// @requires $default-palette
@@ -91,6 +107,7 @@
 @function igx-grid-theme(
     $palette: $default-palette,
     $schema: $light-schema,
+    $elevations: $elevations,
 
     $header-background: null,
     $header-text-color: null,
@@ -125,10 +142,10 @@
     $cell-selected-background: null,
     $cell-selected-text-color: null,
     $cell-editing-background: null,
+    $cell-edited-value-color: null,
 
     $edit-mode-color: null,
     $edited-row-indicator: null,
-    $cell-edited-value-color: null,
 
     $resize-line-color: null,
     $drop-indicator-color: null,

projects/igniteui-angular/src/lib/data-operations/filtering-condition.ts

@@ -23,21 +23,47 @@ export class IgxFilteringOperand {
             logic: (target: any) => {
                 return target !== null;
             }
+        }, {
+            name: 'in',
+            isUnary: false,
+            iconName: 'is_in',
+            hidden: true,
+            logic: (target: any, searchVal: Set<any>) => {
+                return this.findValueInSet(target, searchVal);
+            }
         }];
     }
 
     public static instance(): IgxFilteringOperand {
         return this._instance || (this._instance = new this());
     }
 
+    /**
+     * @hidden
+     */
+    protected findValueInSet(target: any, searchVal: Set<any>) {
+        return searchVal.has(target);
+    }
+
+    /**
+     * Returns an array of names of the conditions which are visible in the UI
+     */
     public conditionList(): string[] {
-        return this.operations.map((element) => element.name);
+        return this.operations.filter(f => !f.hidden).map((element) => element.name);
     }
 
+    /**
+     * Returns an instance of the condition with the specified name.
+     * @param name The name of the condition.
+     */
     public condition(name: string): IFilteringOperation {
         return this.operations.find((element) => element.name === name);
     }
 
+    /**
+     * Adds a new condition to the filtering operations.
+     * @param operation The filtering operation.
+     */
     public append(operation: IFilteringOperation) {
         this.operations.push(operation);
     }
@@ -362,6 +388,10 @@ export class IgxDateFilteringOperand extends IgxFilteringOperand {
             throw new Error('Could not perform filtering on \'date\' column because the datasource object type is not \'Date\'.');
         }
     }
+
+    protected findValueInSet(target: any, searchVal: Set<any>) {
+        return searchVal.has(new Date(target.getFullYear(), target.getMonth(), target.getDate()).toISOString());
+    }
 }
 
 /**
@@ -532,6 +562,7 @@ export interface IFilteringOperation {
     name: string;
     isUnary: boolean;
     iconName: string;
+    hidden?: boolean;
     logic: (value: any, searchVal?: any, ignoreCase?: boolean) => boolean;
 }
 
@@ -549,27 +580,3 @@ export interface IDateParts {
     seconds: number;
     milliseconds: number;
 }
-
-/**
- * @hidden
- */
-export class InFilteringOperation implements IFilteringOperation {
-    name = 'in';
-    isUnary = false;
-    iconName = 'is_in';
-    logic = (target: any, searchVal: Set<any>) => {
-        return searchVal.has(target);
-    }
-}
-
-/**
- * @hidden
- */
-export class InDateFilteringOperation extends InFilteringOperation {
-    logic = (target: any, searchVal: Set<any>) => {
-        if (target instanceof Date) {
-            return searchVal.has(new Date(target.getFullYear(), target.getMonth(), target.getDate()).toISOString());
-        }
-        return searchVal.has(target);
-    }
-}

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -726,8 +726,10 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 }
                 if (scrToBottom && !this._isAtBottomIndex) {
                     const containerSize = parseInt(this.igxForContainerSize, 10);
-                    const scrollOffset = this.fixedUpdateAllElements(this._virtHeight - containerSize);
-                    this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px';
+                    const maxVirtScrollTop = this._virtHeight - containerSize;
+                    this._bScrollInternal = true;
+                    this._virtScrollTop = maxVirtScrollTop;
+                    this.scrollPosition = maxVirtScrollTop;
                     return;
                 }
                 if (this._adjustToIndex) {