Merge branch 'master' into mkirova/fix-5803

Author: mpavlinov

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/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/_grid-theme.scss

@@ -675,6 +675,7 @@
     %grid-thead-container {
         grid-row: 3;
         display: flex;
+        overflow: hidden;
 
         %igx-grid__drag-indicator {
             cursor: default;
@@ -823,6 +824,7 @@
         position: relative;
         display: flex;
         grid-row: 4;
+        overflow: hidden;
     }
 
     %grid-tbody-message {
@@ -853,6 +855,7 @@
         width: 100%;
         background: --var($theme, 'header-background');
         z-index: 10001;
+        overflow: hidden;
     }
 
     %grid-thead-thumb {
@@ -867,6 +870,7 @@
 
     %grid-tbody-scrollbar {
         border-left: 1px solid igx-color($palette, 'grays', 300);
+        position: relative;
     }
 
     %grid-scroll-start {
@@ -1788,6 +1792,7 @@
         padding: map-get($grouparea-padding, 'comfortable');
         z-index: 2;
         height: 100%;
+        overflow: hidden;
 
         &:focus {
             outline-style: none;

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

@@ -841,6 +841,7 @@
             font-size: inherit;
             vertical-align: top;
             margin-left: $required-symbol-margin; /* 2px base is 16px */
+            display: inline-block;
         }
     }
 

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -15,7 +15,8 @@
             <igx-icon>today</igx-icon>
         </igx-prefix>
         <label *ngIf="labelVisibility" igxLabel>{{label}}</label>
-        <input #editableInput class="igx-date-picker__input-date" igxInput type="text" [value]="transformedDate"
+        <input #editableInput class="igx-date-picker__input-date" igxInput [igxTextSelection]="true"
+            type="text" [value]="transformedDate"
             [igxMask]="inputMask" [placeholder]="mask" [disabled]="disabled" [displayValuePipe]="displayValuePipe"
             [focusedValuePipe]="inputValuePipe" (blur)="onBlur($event)" (wheel)="onWheel($event)"
             (input)="onInput($event)" (focus)="onFocus()" />
@@ -25,4 +26,4 @@
     </igx-input-group>
 </ng-template>
 
-<ng-container *ngTemplateOutlet="template; context: context"></ng-container>
+<ng-container *ngTemplateOutlet="template; context: context"></ng-container>