chore(*): merge conflicts

Author: nrobakova

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/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/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 } from '@angular/core';
+import { 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';
@@ -122,6 +122,11 @@ export abstract 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')
@@ -135,8 +140,15 @@ export abstract 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/column.component.ts

@@ -9,7 +9,9 @@ import {
     QueryList,
     TemplateRef,
     forwardRef,
-    OnDestroy
+    OnDestroy,
+    Output,
+    EventEmitter
 } from '@angular/core';
 import { DataType } from '../data-operations/data-util';
 import { GridBaseAPIService } from './api.service';
@@ -218,14 +220,20 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     /**
      * 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;
@@ -239,6 +247,12 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
             }
         }
     }
+
+    /**
+     *@hidden
+     */
+    @Output()
+    public hiddenChange = new EventEmitter<boolean>();
     /**
      * Gets whether the hiding is disabled.
      * ```typescript
@@ -290,6 +304,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * ```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) {
@@ -301,9 +320,16 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
             if (this.grid) {
                 this.cacheCalcWidth();
             }
+            this.widthChange.emit(this._width);
         }
     }
 
+    /**
+     *@hidden
+     */
+    @Output()
+    public widthChange = new EventEmitter<string>();
+
     /**
      * @hidden
      */
@@ -483,6 +509,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * ```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) {
@@ -495,8 +526,16 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
                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`.
@@ -1356,6 +1395,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
         }
 
         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];
@@ -1420,6 +1460,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
         index = (index !== undefined ? index :
             this._unpinnedIndex !== undefined ? this._unpinnedIndex : this.index);
         this._pinned = false;
+        this.pinnedChange.emit(this._pinned);
 
         const targetColumn = grid._unpinnedColumns[index];
 
@@ -1769,15 +1810,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
      */