Merge remote-tracking branch 'origin/master' into mpopov/chip-discrepancy

# Conflicts:
#	projects/igniteui-angular/src/lib/chips/chip.component.ts

Author: desig9stein

CHANGELOG.md

@@ -73,6 +73,8 @@ All notable changes for each version of this project will be documented in this
 - **Breaking Changes** - ` $label-floated-background` and `$label-floated-disabled-background` properties of `IgxInputGroupComponent` theme has been removed.
 - `IgxInputGroupComponent` The input group has been refactored so that the floating label for the input of `type="border"` does not require a background to match the surface background under the input field. Also, suffixes and prefixes are refactored to take the full height of the input which makes it easy to add background to them.
 - **Breaking Changes** - `$size` property of `scrollbar-theme` theme has been renamed to `$scrollbar-size`.
+- `IgxSimpleCombo`
+    - The `IgxSimpleCombo` will not open its drop-down on clear.
 
 ## 15.0.1
 

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -11,7 +11,8 @@ import {
     Renderer2,
     TemplateRef,
     Inject,
-    Optional
+    Optional,
+    OnDestroy
 } from '@angular/core';
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/displayDensity';
 import {
@@ -24,6 +25,8 @@ import {
 import {IBaseEventArgs, mkenum} from '../core/utils';
 import { IChipResourceStrings } from '../core/i18n/chip-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
+import { fromEvent, Subject } from 'rxjs';
+import { take, filter } from 'rxjs/operators';
 
 export const IgxChipTypeVariant = mkenum({
     PRIMARY: 'primary',
@@ -85,7 +88,7 @@ let CHIP_ID = 0;
     selector: 'igx-chip',
     templateUrl: 'chip.component.html'
 })
-export class IgxChipComponent extends DisplayDensityBase {
+export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
 
     /**
      * Sets/gets the variant of the chip.
@@ -101,7 +104,6 @@ export class IgxChipComponent extends DisplayDensityBase {
      */
     @Input()
     public variant: string | typeof IgxChipTypeVariant;
-
     /**
      * An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
      *
@@ -599,6 +601,12 @@ export class IgxChipComponent extends DisplayDensityBase {
      */
     public hideBaseElement = false;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public destroy$ = new Subject();
+
     protected _tabIndex = null;
     protected _selected = false;
     protected _selectedItemClass = 'igx-chip__item--selected';
@@ -897,4 +905,9 @@ export class IgxChipComponent extends DisplayDensityBase {
             }
         }
     }
+
+    public ngOnDestroy(): void {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
 }

projects/igniteui-angular/src/lib/chips/chips-area.component.ts

@@ -223,20 +223,20 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
             const changes = this._differ.diff(this.chipsList.toArray());
             if (changes) {
                 changes.forEachAddedItem((addedChip) => {
-                    addedChip.item.moveStart.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+                    addedChip.item.moveStart.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
                         this.onChipMoveStart(args);
                     });
-                    addedChip.item.moveEnd.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+                    addedChip.item.moveEnd.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
                         this.onChipMoveEnd(args);
                     });
-                    addedChip.item.dragEnter.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+                    addedChip.item.dragEnter.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
                         this.onChipDragEnter(args);
                     });
-                    addedChip.item.keyDown.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+                    addedChip.item.keyDown.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
                         this.onChipKeyDown(args);
                     });
                     if (addedChip.item.selectable) {
-                        addedChip.item.selectedChanging.pipe(takeUntil(this.destroy$)).subscribe((args) => {
+                        addedChip.item.selectedChanging.pipe(takeUntil(addedChip.item.destroy$)).subscribe((args) => {
                             this.onChipSelectionChange(args);
                         });
                     }

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

@@ -2163,9 +2163,10 @@
     }
 
     %igx-group-label__count-badge {
-        > div {
-            background: var-get($theme, 'group-count-background');
-            color: var-get($theme, 'group-count-text-color');
+        --background-color: #{var-get($theme, 'group-count-background')};
+        --text-color: #{var-get($theme, 'group-count-text-color')};
+
+        > span {
             font-size: $grid-head-fs;
         }
     }

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -534,7 +534,7 @@
         height: var(--size);
         position: relative;
         max-width: 100%;
-        font-size: 1rem;
+        font-size: rem(16px);
 
         &::after {
             content: '';
@@ -1896,7 +1896,6 @@
 
     %form-group-input {
         @include type-style($input-text) {
-            font-size: 16px;
             margin: 0;
         }
     }

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

@@ -3,7 +3,6 @@ import {
     AfterViewInit,
     ChangeDetectorRef,
     Component,
-    ComponentFactoryResolver,
     Directive,
     Injectable,
     IterableDiffers,
@@ -1336,7 +1335,6 @@ export class TestIgxForOfDirective<T> extends IgxForOfDirective<T> {
         public viewContainer: ViewContainerRef,
         public template: TemplateRef<NgForOfContext<T>>,
         public differs: IterableDiffers,
-        public fResolver: ComponentFactoryResolver,
         public changeDet: ChangeDetectorRef,
         public zone: NgZone,
         protected syncService: IgxForOfScrollSyncService,

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -4,14 +4,14 @@ import {
     AfterViewInit,
     ApplicationRef,
     ChangeDetectorRef,
-    ComponentFactory,
-    ComponentFactoryResolver,
     ComponentRef,
     ContentChild,
     ContentChildren,
+    createComponent,
     Directive,
     DoCheck,
     ElementRef,
+    EnvironmentInjector,
     EventEmitter,
     HostBinding,
     HostListener,
@@ -21,7 +21,6 @@ import {
     IterableChangeRecord,
     IterableDiffers,
     LOCALE_ID,
-    NgModuleRef,
     NgZone,
     OnDestroy,
     OnInit,
@@ -3351,12 +3350,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         protected zone: NgZone,
         @Inject(DOCUMENT) public document: any,
         public cdr: ChangeDetectorRef,
-        protected resolver: ComponentFactoryResolver,
         protected differs: IterableDiffers,
         protected viewRef: ViewContainerRef,
         private appRef: ApplicationRef,
-        private moduleRef: NgModuleRef<any>,
-        private injector: Injector,
+        protected injector: Injector,
+        protected envInjector: EnvironmentInjector,
         public navigation: IgxGridNavigationService,
         public filteringService: IgxFilteringService,
         @Inject(IgxOverlayService) protected overlayService: IgxOverlayService,
@@ -3835,26 +3833,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     private createComponentInstance(component: any) {
-        // TODO: create component instance view viewContainerRef.createComponent(Component, Settings) overload
-        let dynamicFactory: ComponentFactory<any>;
-        const factoryResolver = this.moduleRef
-            ? this.moduleRef.componentFactoryResolver
-            : this.resolver;
-        try {
-            dynamicFactory = factoryResolver.resolveComponentFactory(component);
-        } catch (error) {
-            console.error(error);
-            return null;
-        }
-
-        const injector = this.moduleRef
-            ? this.moduleRef.injector
-            : this.injector;
-        const dynamicComponent: ComponentRef<any> = dynamicFactory.create(
-            injector
-        );
+        const dynamicComponent: ComponentRef<any> = createComponent(component, { environmentInjector: this.envInjector, elementInjector: this.injector } );
         this.appRef.attachView(dynamicComponent.hostView);
-
         return dynamicComponent;
     }
 
@@ -7156,12 +7136,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected autogenerateColumns() {
         const data = this.gridAPI.get_data();
-        const factory = this.resolver.resolveComponentFactory(IgxColumnComponent);
         const fields = this.generateDataFields(data);
         const columns = [];
 
         fields.forEach((field) => {
-            const ref = factory.create(this.viewRef.injector);
+            const ref = createComponent(IgxColumnComponent, { environmentInjector:  this.envInjector, elementInjector: this.injector});
             ref.instance.field = field;
             ref.instance.dataType = this.resolveDataTypes(data[0][field]);
             ref.changeDetectorRef.detectChanges();

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts

@@ -2130,6 +2130,63 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
                 expect(GridFunctions.getAdvancedFilteringTreeChildItems(secondItem, false).length).toBe(1);
             }));
 
+            it('Should respect the changes of the groups applied from the context menu.',
+            fakeAsync(() => {
+                // Apply advanced filter through API.
+                const tree = new FilteringExpressionsTree(FilteringLogic.And);
+                tree.filteringOperands.push({
+                    fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
+                    ignoreCase: true
+                });
+                tree.filteringOperands.push({
+                    fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
+                    ignoreCase: true
+                });
+                grid.advancedFilteringExpressionsTree = tree;
+                fix.detectChanges();
+
+                // Verify the filter changes are applied.
+                expect(grid.filteredData.length).toEqual(0);
+
+                // Open Advanced Filtering dialog.
+                grid.openAdvancedFilteringDialog();
+                fix.detectChanges();
+
+                // Verify tree layout before the group change through context menu.
+                let rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
+                expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(2);
+                expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(2);
+                
+                // Select two chips.
+                GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [0]);
+                GridFunctions.clickAdvancedFilteringTreeExpressionChip(fix, [1]);
+                tick(200);
+
+                // Click "Create Or Group" in context menu.
+                const buttons = GridFunctions.getAdvancedFilteringContextMenuButtons(fix);
+                buttons[2].click();
+                tick(100);
+                fix.detectChanges();
+                         
+                // Close dialog through API.
+                grid.closeAdvancedFilteringDialog(true);
+                tick(100);
+                fix.detectChanges();
+
+                // Open Advanced Filtering dialog.
+                grid.openAdvancedFilteringDialog();
+                fix.detectChanges();
+                
+                // Verify tree layout after the group change through context menu.
+                rootGroup = GridFunctions.getAdvancedFilteringTreeRootGroup(fix);
+                expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, true).length).toBe(1);
+                expect(GridFunctions.getAdvancedFilteringTreeChildItems(rootGroup, false).length).toBe(3);
+                
+                // Verify the filter changes are applied.
+                expect(grid.filteredData.length).toEqual(3);
+            }));
+
+
             it('Should delete all selected conditions when the \'delete filters\' option from context menu is clicked.',
             fakeAsync(() => {
                 // Apply advanced filter through API.

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -2118,6 +2118,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(grid.rowList.length).toEqual(1);
 
             // This Month condition
+            const expectedResults = GridFunctions.createDateFilterConditions(grid, today);
             GridFunctions.openFilterDDAndSelectCondition(fix, 6);
             tick();
             fix.detectChanges();

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts

@@ -1,19 +1,20 @@
 import {
     ApplicationRef,
     ChangeDetectorRef,
-    ComponentFactoryResolver,
+    createComponent,
     Directive,
     ElementRef,
+    EnvironmentInjector,
     EventEmitter,
     Inject,
     Injector,
     Input,
     IterableDiffers,
     LOCALE_ID,
-    NgModuleRef,
     NgZone,
     Optional,
     Output,
+    reflectComponentType,
     TemplateRef,
     ViewChild,
     ViewContainerRef
@@ -158,12 +159,11 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
         zone: NgZone,
         @Inject(DOCUMENT) public document,
         cdr: ChangeDetectorRef,
-        resolver: ComponentFactoryResolver,
         differs: IterableDiffers,
         viewRef: ViewContainerRef,
         appRef: ApplicationRef,
-        moduleRef: NgModuleRef<any>,
         injector: Injector,
+        envInjector: EnvironmentInjector,
         navigation: IgxHierarchicalGridNavigationService,
         filteringService: IgxFilteringService,
         @Inject(IgxOverlayService) protected overlayService: IgxOverlayService,
@@ -182,12 +182,11 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
             zone,
             document,
             cdr,
-            resolver,
             differs,
             viewRef,
             appRef,
-            moduleRef,
             injector,
+            envInjector,
             navigation,
             filteringService,
             overlayService,
@@ -212,8 +211,8 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
         this.updateColumns(result);
         this.initPinning();
 
-        const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
-        const outputs = factoryColumn.outputs.filter(o => o.propName !== 'columnChange');
+        const mirror = reflectComponentType(IgxColumnComponent);
+        const outputs = mirror.outputs.filter(o => o.propName !== 'columnChange');
         outputs.forEach(output => {
             this.columns.forEach(column => {
                 if (column[output.propName]) {
@@ -237,10 +236,10 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
     }
 
     protected _createColGroupComponent(col: IgxColumnGroupComponent) {
-        const factoryGroup = this.resolver.resolveComponentFactory(IgxColumnGroupComponent);
-        const ref = this.viewRef.createComponent(IgxColumnGroupComponent, { injector: this.viewRef.injector });
+        const ref = createComponent(IgxColumnGroupComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
         ref.changeDetectorRef.detectChanges();
-        factoryGroup.inputs.forEach((input) => {
+        const mirror = reflectComponentType(IgxColumnGroupComponent);
+        mirror.inputs.forEach((input) => {
             const propName = input.propName;
             ref.instance[propName] = col[propName];
         });
@@ -258,9 +257,9 @@ export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirect
     }
 
     protected _createColComponent(col) {
-        const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
-        const ref = this.viewRef.createComponent(IgxColumnComponent, { injector: this.viewRef.injector });
-        factoryColumn.inputs.forEach((input) => {
+        const ref = createComponent(IgxColumnComponent, { environmentInjector: this.envInjector, elementInjector: this.injector });
+        const mirror = reflectComponentType(IgxColumnComponent);
+        mirror.inputs.forEach((input) => {
             const propName = input.propName;
             if (!(col[propName] instanceof IgxSummaryOperand)) {
                 ref.instance[propName] = col[propName];