chore(*): Merge upstream master

Author: rkaraivanov

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.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
@@ -438,13 +449,15 @@ 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);
             }
         }
     }

projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts

@@ -1,5 +1,5 @@
 import { IDropDownBase, IGX_DROPDOWN_BASE } from './drop-down.common';
-import { Input, HostBinding, HostListener, ElementRef, Optional, Inject, DoCheck, Directive } from '@angular/core';
+import { Directive, Input, HostBinding, HostListener, ElementRef, Optional, Inject, DoCheck, Output, EventEmitter } from '@angular/core';
 import { IgxSelectionAPIService } from '../core/selection';
 import { DeprecateProperty, showMessage } from '../core/deprecateDecorators';
 import { IgxDropDownGroupComponent } from './drop-down-group.component';
@@ -125,6 +125,11 @@ export class IgxDropDownItemBase implements DoCheck {
      *  let mySelectedItem = this.dropdown.selectedItem;
      *  let isMyItemSelected = mySelectedItem.selected; // true
      * ```
+     *
+     * Two-way data binding
+     * ```html
+     * <igx-drop-down-item [(selected)]='model.isSelected'></igx-drop-down-item>
+     * ```
      */
     @Input()
     @HostBinding('attr.aria-selected')
@@ -138,8 +143,15 @@ export class IgxDropDownItemBase implements DoCheck {
             return;
         }
         this._selected = value;
+        this.selectedChange.emit(this._selected);
     }
 
+    /**
+     *@hidden
+     */
+    @Output()
+    public selectedChange = new EventEmitter<boolean>();
+
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.ts

@@ -53,6 +53,7 @@ export class IgxDropDownItemComponent extends IgxDropDownItemBase implements DoC
             return;
         }
         this._selected = value;
+        this.selectedChange.emit(this._selected);
     }
     /**
      * @hidden @internal

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts

@@ -27,6 +27,7 @@ export interface AnimationSettings {
     providers: [{ provide: IGX_EXPANSION_PANEL_COMPONENT, useExisting: IgxExpansionPanelComponent }]
 })
 export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterContentInit {
+    private _collapsed = true;
     /**
      * Sets/gets the animation settings of the expansion panel component
      * Open and Close animation should be passed
@@ -95,9 +96,26 @@ export class IgxExpansionPanelComponent implements IgxExpansionPanelBase, AfterC
      * ```html
      *  this.panel.collapsed = true;
      * ```
+     *
+     * Two-way data binding:
+     * ```html
+     * <igx-expansion-panel [(collapsed)]="model.isCollapsed"></igx-expansion-panel>
+     * ```
      */
     @Input()
-    public collapsed = true;
+    public get collapsed(): boolean {
+        return this._collapsed;
+    }
+    public set collapsed(value) {
+        this._collapsed = value;
+        this.collapsedChange.emit(this._collapsed);
+    }
+
+    /**
+     *@hidden
+     */
+    @Output()
+    public collapsedChange = new EventEmitter<boolean>();
 
     /**
      * Emitted when the expansion panel finishes collapsing

projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

@@ -6,7 +6,9 @@ import {
     Input,
     forwardRef,
     QueryList,
-    TemplateRef
+    TemplateRef,
+    Output,
+    EventEmitter
 } from '@angular/core';
 
 import { IgxColumnComponent } from './column.component';
@@ -128,15 +130,28 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
     }
     /**
      * Sets the column group hidden property.
-     * ```typescript
+     * ```html
      * <igx-column [hidden] = "true"></igx-column>
      * ```
+     *
+     * Two-way data binding
+     * ```html
+     * <igx-column [(hidden)] = "model.columns[0].isHidden"></igx-column>
+     * ```
      * @memberof IgxColumnGroupComponent
      */
     set hidden(value: boolean) {
         this._hidden = value;
+        this.hiddenChange.emit(this._hidden);
         this.children.forEach(child => child.hidden = value);
     }
+
+    /**
+     *@hidden
+     */
+    @Output()
+    public hiddenChange = new EventEmitter<boolean>();
+
     /**
      *@hidden
      */
@@ -206,7 +221,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
 
     set width(val) { }
 
-    // constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent & GridType>, public cdr: ChangeDetectorRef) {
+    // constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent & IGridDataBindable>, public cdr: ChangeDetectorRef) {
     //     // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
     //     super(gridAPI, cdr);
     // }

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -8,6 +8,8 @@ import {
     Input,
     QueryList,
     TemplateRef,
+    Output,
+    EventEmitter,
 } from '@angular/core';
 import { notifyChanges } from '../watch-changes';
 import { DataType } from '../../data-operations/data-util';
@@ -215,14 +217,20 @@ export class IgxColumnComponent implements AfterContentInit {
     /**
      * Sets the column hidden property.
      * Default value is `false`.
-     * ```typescript
+     * ```html
      * <igx-column [hidden] = "true"></igx-column>
      * ```
+     *
+     * Two-way data binding.
+     * ```html
+     * <igx-column [(hidden)] = "model.isHidden"></igx-column>
+     * ```
      * @memberof IgxColumnComponent
      */
     set hidden(value: boolean) {
         if (this._hidden !== value) {
             this._hidden = value;
+            this.hiddenChange.emit(this._hidden);
             if (this.columnLayoutChild && this.parent.hidden !== value) {
                 this.parent.hidden = value;
                 return;
@@ -236,6 +244,12 @@ export class IgxColumnComponent implements AfterContentInit {
             }
         }
     }
+
+    /**
+     *@hidden
+     */
+    @Output()
+    public hiddenChange = new EventEmitter<boolean>();
     /**
      * Gets whether the hiding is disabled.
      * ```typescript
@@ -287,6 +301,11 @@ export class IgxColumnComponent implements AfterContentInit {
      * ```html
      * <igx-column [width] = "'25%'"></igx-column>
      * ```
+     *
+     * Two-way data binding.
+     * ```html
+     * <igx-column [(width)]="model.columns[0].width"></igx-column>
+     * ```
      * @memberof IgxColumnComponent
      */
     public set width(value: string) {
@@ -298,9 +317,16 @@ export class IgxColumnComponent implements AfterContentInit {
             if (this.grid) {
                 this.cacheCalcWidth();
             }
+            this.widthChange.emit(this._width);
         }
     }
 
+    /**
+     *@hidden
+     */
+    @Output()
+    public widthChange = new EventEmitter<string>();
+
     /**
      * @hidden
      */
@@ -480,6 +506,11 @@ export class IgxColumnComponent implements AfterContentInit {
      * ```html
      * <igx-column [pinned] = "true"></igx-column>
      * ```
+     *
+     * Two-way data binding.
+     * ```html
+     * <igx-column [(pinned)] = "model.columns[0].isPinned"></igx-column>
+     * ```
      * @memberof IgxColumnComponent
      */
     public set pinned(value: boolean) {
@@ -492,8 +523,16 @@ export class IgxColumnComponent implements AfterContentInit {
                will re-init the group (if present)
             */
             this._pinned = value;
+            this.pinnedChange.emit(this._pinned);
         }
     }
+
+    /**
+     *@hidden
+     */
+    @Output()
+    public pinnedChange = new EventEmitter<boolean>();
+
     /**
      * @deprecated
      * Gets/Sets the `id` of the `igx-grid`.
@@ -1348,6 +1387,7 @@ export class IgxColumnComponent implements AfterContentInit {
         }
 
         this._pinned = true;
+        this.pinnedChange.emit(this._pinned);
         this._unpinnedIndex = grid._unpinnedColumns.indexOf(this);
         index = index !== undefined ? index : grid._pinnedColumns.length;
         const targetColumn = grid._pinnedColumns[index];
@@ -1412,6 +1452,7 @@ export class IgxColumnComponent implements AfterContentInit {
         index = (index !== undefined ? index :
             this._unpinnedIndex !== undefined ? this._unpinnedIndex : this.index);
         this._pinned = false;
+        this.pinnedChange.emit(this._pinned);
 
         const targetColumn = grid._unpinnedColumns[index];