Merge branch '8.2.x' into mkirova/fix-5683-8.2.x

Author: zdrawku

CHANGELOG.md

@@ -24,6 +24,9 @@ Next example shows how you can use the Fluent theme.
 }
 ```
 
+### Theme Changes
+`igx-badge-theme` - Removed the `$disable-shadow` property to mitigate confusion when specifying `$shadow` explicitly.
+
 For more information about the theming please read our [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index.html)  
 
 ### New Features
@@ -64,6 +67,8 @@ For more information about the theming please read our [documentation](https://w
     - introduced a new `readonly` property that doesn't allow user interaction to change the state, but keeps the default active style. Intended for integration in complex controls that handle the interaction and control the checkbox instead through binding.
 - `IgxOverlay`
     - introduced a new `ContainerPositionStrategy`. The new strategy positions the element inside the containing outlet based on the directions passed in trough PositionSettings.
+- `IgxChip`
+    - add `onSelectionDone` event that is triggered after all animations and transitions related to selection have ended.
 
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/migrations/update-8_2_0/changes/theme-props.json

@@ -0,0 +1,8 @@
+{
+    "$schema": "../../common/schema/theme-props.schema.json",
+    "changes": [{
+        "name": "$disable-shadow",
+        "remove": true,
+        "owner": "igx-badge-theme"
+    }]
+}

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

@@ -107,7 +107,7 @@ export class IgxCarouselComponent implements OnDestroy {
      * Sets the time `interval` in milliseconds before the slide changes.
      * If not set, the carousel will not change `slides` automatically.
      * ```html
-     * <igx-carousel [interval] = "1000"></carousel>
+     * <igx-carousel [interval] = "1000"></igx-carousel>
      * ```
      * @memberof IgxCarouselComponent
      */
@@ -512,12 +512,12 @@ export class IgxCarouselComponent implements OnDestroy {
 })
 
 export class IgxSlideComponent implements OnInit, OnDestroy {
-
+    private _active;
     /**
      * Gets/sets the `index` of the slide inside the carousel.
      * ```html
      * <igx-carousel>
-     *  <igx-slide index = "1"</igx-slide>
+     *  <igx-slide index = "1"></igx-slide>
      * <igx-carousel>
      * ```
      * @memberOf IgxSlideComponent
@@ -528,7 +528,7 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
      * Gets/sets the target `direction` for the slide.
      * ```html
      * <igx-carousel>
-     *  <igx-slide direction="NEXT"</igx-slide>
+     *  <igx-slide direction="NEXT"></igx-slide>
      * <igx-carousel>
      * ```
      * @memberOf IgxSlideComponent
@@ -538,13 +538,31 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
      * Gets/sets the `active` state of the slide.
      * ```html
      * <igx-carousel>
-     *  <igx-slide [active] ="false"</igx-slide>
+     *  <igx-slide [active] ="false"></igx-slide>
+     * <igx-carousel>
+     * ```
+     *
+     * Two-way data binding.
+     * ```html
+     * <igx-carousel>
+     *  <igx-slide [(active)] ="model.isActive"></igx-slide>
      * <igx-carousel>
      * ```
      * @memberof IgxSlideComponent
      */
     @HostBinding('class.active')
-    @Input() public active: boolean;
+    @Input()
+    public get active(): boolean {
+        return this._active;
+    }
+    public set active(value)  {
+        this._active = value;
+        this.activeChange.emit(this._active);
+    }
+    /**
+     *@hidden
+     */
+    @Output() public activeChange = new EventEmitter<boolean>();
 
     constructor(private carousel: IgxCarouselComponent) { }
     /**

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

@@ -12,7 +12,7 @@
     (enter)="onChipDragEnterHandler($event)"
     (dropped)="onChipDrop($event)">
 
-    <div [ngClass]="selectClass(selected)">
+    <div [ngClass]="selectClass(selected)" (transitionend)="onSelectTransitionDone($event)">
         <ng-container *ngTemplateOutlet="selectIconTemplate"></ng-container>
     </div>
 

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

@@ -165,12 +165,23 @@ export class IgxChipComponent extends DisplayDensityBase {
      * ```html
      * <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [selected]="true">
      * ```
+     *
+     * Two-way data binding:
+     * ```html
+     * <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [(selected)]="model.isSelected">
+     * ```
      */
     @Input()
     public set selected(newValue: boolean) {
         this.changeSelection(newValue);
     }
 
+    /**
+     *@hidden
+     */
+    @Output()
+    public selectedChange = new EventEmitter<boolean>();
+
     /**
      * Returns if the `IgxChipComponent` is selected.
      * ```typescript
@@ -281,12 +292,26 @@ export class IgxChipComponent extends DisplayDensityBase {
      * }
      * ```
      * ```html
-     * <igx-chip #myChip [id]="'igx-chip-1'" [draggable]="true" (onSelection)="chipSelect($event)">
+     * <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (onSelection)="chipSelect($event)">
      * ```
      */
     @Output()
     public onSelection = new EventEmitter<IChipSelectEventArgs>();
 
+    /**
+     * Emits event when the `IgxChipComponent` is selected/deselected and any related animations and transitions also end.
+     * ```typescript
+     * chipSelectEnd(event: IBaseChipEventArgs){
+     *     let selectedChip = event.owner;
+     * }
+     * ```
+     * ```html
+     * <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" (onSelectionDone)="chipSelectEnd($event)">
+     * ```
+     */
+    @Output()
+    public onSelectionDone = new EventEmitter<IBaseChipEventArgs>();
+
     /**
      * Emits an event when the `IgxChipComponent` keyboard navigation is being used.
      * Returns the focused/selected `IgxChipComponent`, whether the event should be canceled,
@@ -424,17 +449,29 @@ export class IgxChipComponent extends DisplayDensityBase {
             if (!onSelectArgs.cancel) {
                 this.renderer.addClass(this.chipArea.nativeElement, this._selectedItemClass);
                 this._selected = newValue;
+                this.selectedChange.emit(this._selected);
             }
         } else if (!newValue && this._selected) {
             this.onSelection.emit(onSelectArgs);
 
             if (!onSelectArgs.cancel) {
                 this.renderer.removeClass(this.chipArea.nativeElement, this._selectedItemClass);
                 this._selected = newValue;
+                this.selectedChange.emit(this._selected);
             }
         }
     }
 
+    public onSelectTransitionDone(event) {
+        if (event.propertyName === 'width' && !!event.target.tagName) {
+            // Trigger onSelectionDone on when `width` property is changed and the target is valid element(not comment).
+            this.onSelectionDone.emit({
+                owner: this,
+                originalEvent: event
+            });
+        }
+    }
+
     /**
      * @hidden
      */

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

@@ -13,7 +13,7 @@ import { IgxPrefixDirective } from './../directives/prefix/prefix.directive';
 import { IgxLabelDirective } from './../directives/label/label.directive';
 import { IgxSuffixDirective } from './../directives/suffix/suffix.directive';
 import { DisplayDensity } from '../core/displayDensity';
-import { UIInteractions} from '../test-utils/ui-interactions.spec';
+import { UIInteractions, wait} from '../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../test-utils/configure-suite';
 
 @Component({
@@ -398,13 +398,14 @@ describe('IgxChip', () => {
         });
     });
 
-    it('should fire onSelection event when selectable is true', () => {
+    it('should fire onSelection event when selectable is true', (async() => {
         const fix = TestBed.createComponent(TestChipComponent);
         fix.detectChanges();
 
         const secondChipComp = fix.componentInstance.chips.toArray()[1];
 
         spyOn(secondChipComp.onSelection, 'emit');
+        spyOn(secondChipComp.onSelectionDone, 'emit');
         secondChipComp.chipArea.nativeElement.focus();
 
         const keyEvent = new KeyboardEvent('keydown', {
@@ -413,7 +414,11 @@ describe('IgxChip', () => {
         secondChipComp.chipArea.nativeElement.dispatchEvent(keyEvent);
         fix.detectChanges();
         expect(secondChipComp.onSelection.emit).toHaveBeenCalled();
-    });
+        expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalled();
+
+        await wait(400);
+        expect(secondChipComp.onSelectionDone.emit).toHaveBeenCalled();
+    }));
 
     it('should not fire onSelection event when selectable is false', () => {
         const fix = TestBed.createComponent(TestChipComponent);
@@ -422,6 +427,7 @@ describe('IgxChip', () => {
         const firstChipComp = fix.componentInstance.chips.toArray()[0];
 
         spyOn(firstChipComp.onSelection, 'emit');
+        spyOn(firstChipComp.onSelectionDone, 'emit');
         firstChipComp.elementRef.nativeElement.focus();
 
         const keyEvent = new KeyboardEvent('keydown', {
@@ -430,6 +436,7 @@ describe('IgxChip', () => {
         firstChipComp.elementRef.nativeElement.dispatchEvent(keyEvent);
         fix.detectChanges();
         expect(firstChipComp.onSelection.emit).toHaveBeenCalledTimes(0);
+        expect(firstChipComp.onSelectionDone.emit).toHaveBeenCalledTimes(0);
     });
 
     it('should not fire onSelection event when the remove button is clicked', () => {
@@ -439,6 +446,7 @@ describe('IgxChip', () => {
         const secondChipComp = fix.componentInstance.chips.toArray()[1];
 
         spyOn(secondChipComp.onSelection, 'emit');
+        spyOn(secondChipComp.onSelectionDone, 'emit');
 
         const chipRemoveButton = secondChipComp.elementRef.nativeElement.querySelectorAll('.' + CHIP_REMOVE_BUTTON)[0];
         const removeBtnTop = chipRemoveButton.getBoundingClientRect().top;
@@ -450,5 +458,6 @@ describe('IgxChip', () => {
         fix.detectChanges();
 
         expect(secondChipComp.onSelection.emit).not.toHaveBeenCalled();
+        expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalled();
     });
 });

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

@@ -960,8 +960,8 @@ describe('igxCombo', () => {
             // Combo selection is now based on valueKey:
             // if valueKey is specified, only the key will be written in the selection (not the whole data entry)
             const itemID = combo.valueKey !== null && combo.value !== undefined ?
-            combo.data[itemIndex][combo.valueKey] :
-            combo.data[itemIndex];
+                combo.data[itemIndex][combo.valueKey] :
+                combo.data[itemIndex];
             expect(combo.isItemSelected(itemID)).toBeTruthy();
             expect(combo.selectedItems()[selectedItemIndex]).toEqual(itemID);
         }
@@ -971,8 +971,8 @@ describe('igxCombo', () => {
             itemIndex: number) {
             const checkbox = getCheckbox(dropdownElement, itemIndex);
             const itemID = combo.valueKey !== null && combo.value !== undefined ?
-            combo.data[itemIndex][combo.valueKey] :
-            combo.data[itemIndex];
+                combo.data[itemIndex][combo.valueKey] :
+                combo.data[itemIndex];
             expect(checkbox.classList.contains(CSS_CLASS_CHECKED)).toBeFalsy();
             expect(combo.isItemSelected(itemID)).toBeFalsy();
         }
@@ -2286,6 +2286,37 @@ describe('igxCombo', () => {
                 }, 20);
             }, 10);
         });
+
+        it('Should bind combo data to remote data and clear selection properly', async (done) => {
+            const fixture = TestBed.createComponent(IgxComboRemoteDataComponent);
+            fixture.detectChanges();
+            const combo = fixture.componentInstance.instance;
+            let selectedItems = [combo.data[0], combo.data[1]];
+            const spyObj = jasmine.createSpyObj('event', ['stopPropagation']);
+            combo.toggle();
+            combo.selectItems([selectedItems[0][combo.valueKey], selectedItems[1][combo.valueKey]]);
+            expect(combo.value).toEqual(`${selectedItems[0][combo.displayKey]}, ${selectedItems[1][combo.displayKey]}`);
+            expect(combo.selectedItems()).toEqual([selectedItems[0][combo.valueKey], selectedItems[1][combo.valueKey]]);
+            // Clear items while they are in view
+            combo.handleClearItems(spyObj);
+            expect(combo.selectedItems()).toEqual([]);
+            expect(combo.value).toBe('');
+            selectedItems = [combo.data[2], combo.data[3]];
+            combo.selectItems([selectedItems[0][combo.valueKey], selectedItems[1][combo.valueKey]]);
+            expect(combo.value).toEqual(`${selectedItems[0][combo.displayKey]}, ${selectedItems[1][combo.displayKey]}`);
+
+            // Scroll selected items out of view
+            combo.virtualScrollContainer.scrollTo(40);
+            await wait(60);
+            fixture.detectChanges();
+            combo.handleClearItems(spyObj);
+            expect(combo.selectedItems()).toEqual([]);
+            expect(combo.value).toBe('');
+            combo.selectItems([combo.data[7][combo.valueKey]]);
+            expect(combo.value).toBe(combo.data[7][combo.displayKey]);
+            done();
+        });
+
         it('Should render empty template when combo data source is not set', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxComboEmptyTestComponent);
             fixture.detectChanges();
@@ -3214,7 +3245,7 @@ describe('igxCombo', () => {
             expect(fixture.componentInstance.comboSelectedItems).toEqual([...data].splice(1, 3));
         }));
 
-        it('Should properly initialize when used in a Template form control', fakeAsync (() => {
+        it('Should properly initialize when used in a Template form control', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxComboInTemplatedFormComponent);
             fix.detectChanges();
             tick();

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

@@ -1108,14 +1108,14 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
 
     /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
     private registerRemoteEntries(ids: any[], add = true) {
-        const selection = this.getValueDisplayPairs(ids);
         if (add) {
+            const selection = this.getValueDisplayPairs(ids);
             for (const entry of selection) {
                 this._remoteSelection[entry[this.valueKey]] = entry[this.displayKey];
             }
         } else {
-            for (const entry of selection) {
-                delete this._remoteSelection[entry[this.valueKey]];
+            for (const entry of ids) {
+                delete this._remoteSelection[entry];
             }
         }
     }

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -15,7 +15,6 @@
 /// @param {Color} $text-color [null] - The text color used.
 /// @param {Color} $border-color [null] - The border color used.
 /// @param {Color} $background-color [null] - The background color used.
-/// @param {Bool} $disable-shadow [true] - Sets the badge shadow visibility.
 /// @param {Bool} $disable-border [true] - Sets the badge border visibility.
 /// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the badge.
 /// @param {border-radius} $border-radius [null] - The border radius used for badge component.
@@ -52,7 +51,6 @@
     $background-color: null,
     $shadow: null,
 
-    $disable-shadow: true,
     $disable-border: true
 ) {
     $name: 'igx-badge';
@@ -77,10 +75,6 @@
         $shadow: igx-elevation($elevations, $elevation);
     }
 
-    @if $disable-shadow {
-        $shadow: none;
-    }
-
     @return extend($theme, (
         name: $name,
         palette: $palette,

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

@@ -12,7 +12,6 @@
 /// @requires --var
 @mixin _excel-filtering($theme, $palette) {
     %grid-excel-filter {
-        height: rem(15px);
         display: block;
     }