Merge branch '8.1.x' of https://github.com/IgniteUI/igniteui-angular into mkirova/fix-5552

Author: 3phase

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

@@ -279,7 +279,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
 
     /**
      * Selects a button by its index.
-     * @memberOf {@link IgxButtonGroupComponent}
      *```typescript
      *@ViewChild("MyChild")
      *private buttonG: IgxButtonGroupComponent;
@@ -288,6 +287,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      *    this.cdr.detectChanges();
      *}
      *```
+     * @memberOf {@link IgxButtonGroupComponent}
      */
     public selectButton(index: number) {
         if (index >= this.buttons.length || index < 0) {
@@ -326,7 +326,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
 
     /**
      * Deselects a button by its index.
-     * @memberOf {@link IgxButtonGroupComponent}
      * ```typescript
      *@ViewChild("MyChild")
      *private buttonG: IgxButtonGroupComponent;
@@ -335,6 +334,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      *    this.cdr.detectChanges();
      *}
      * ```
+     * @memberOf {@link IgxButtonGroupComponent}
      */
     public deselectButton(index: number) {
         if (index >= this.buttons.length || index < 0) {

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

@@ -616,7 +616,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     /**
      * Gets the column `sortStrategy`.
      * ```typescript
-     * let sortStrategy = this.column.sortStrategy'
+     * let sortStrategy = this.column.sortStrategy
      * ```
      * @memberof IgxColumnComponent
      */
@@ -628,10 +628,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * Sets the column `sortStrategy`.
      * ```typescript
      * this.column.sortStrategy = new CustomSortingStrategy().
-     *
-     * class CustomSortingStrategy extends SortingStrategy {
-     * ...
-     * }
+     * class CustomSortingStrategy extends SortingStrategy {...}
      * ```
      * @memberof IgxColumnComponent
      */
@@ -1557,7 +1554,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * Autosize the column to the longest currently visible cell value, including the header cell.
      * ```typescript
      * @ViewChild('grid') grid: IgxGridComponent;
-     *
      * let column = this.grid.columnList.filter(c => c.field === 'ID')[0];
      * column.autosize();
      * ```

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

@@ -445,7 +445,14 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 
     /**
      * Sets the current page index.
+     * ```html
      * <igx-grid #grid [data]="Data" [paging]="true" [page]="5" [autoGenerate]="true"></igx-grid>
+     *```
+     * Two-way data binding.
+     * ```html
+     * <igx-grid #grid [data]="Data" [paging]="true" [(page)]="model.page" [autoGenerate]="true"></igx-grid>
+     * ```
+	 * @memberof IgxGridBaseComponent
      */
     set page(val: number) {
         if (val === this._page || val < 0 || val > this.totalPages - 1) {
@@ -2017,7 +2024,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * for the built-in column hiding UI of the`IgxColumnComponent`.
      * ```typescript
      * const hiddenColText = this.grid.hiddenColumnsText;
-     * ``
+     * ```
+	 * @memberof IgxGridBaseComponent
      */
     @WatchChanges()
     @Input()
@@ -3845,7 +3853,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * Returns how many times the grid contains the string.
      * ```typescript
      * this.grid.findPrev("financial");
-     * ````
+     * ```
      * @param text the string to search.
      * @param caseSensitive optionally, if the search should be case sensitive (defaults to false).
      * @param exactMatch optionally, if the text should match the entire value (defaults to false).

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -425,7 +425,6 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
      * <igx-grid [dropAreaTemplate]="dropAreaRef">
      *      <igx-column [groupable]="true" field="ID"></igx-column>
      * </igx-grid>
-     *
      * <ng-template #myDropArea>
      *      <span> Custom drop area! </span>
      * </ng-template>

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

@@ -160,16 +160,6 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
     @Input()
     public type = 'line';
 
-    /**
-     * An @Input property that sets what display density to be used for the input group.
-     * The allowed values are `compact`, `cosy` and `comfortable`. The default is `comfortable`.
-     * ```html
-     *<igx-select [displayDensity]="'compact'"></igx-select>
-     * ```
-     */
-    @Input()
-    public displayDensity = 'comfortable';
-
     /**
      * The custom template, if any, that should be used when rendering the select TOGGLE(open/close) button
      *

src/app/select/select.sample.html

@@ -4,7 +4,7 @@
 
 <div class="sampleWrapper">
     <h4 class="sample-title">Select with ngModel, set items OnInit</h4>
-    <igx-select #select1
+    <igx-select #displayDensitySelect
     [required]="true"
     [placeholder]="'Pick One'"
     [(ngModel)]="value"
@@ -13,7 +13,8 @@ <h4 class="sample-title">Select with ngModel, set items OnInit</h4>
     (onClosing)="testOnClosing($event)"
     (onClosed)="testOnClosed()"
     (onSelection)="testOnSelection($event)"
-    [disabled]="false">
+    [disabled]="false"
+    [displayDensity]="'cosy'">
         <label igxLabel>Sample Label</label>
         <igx-prefix igxPrefix>
             <igx-icon fontSet="material">alarm</igx-icon>
@@ -24,6 +25,13 @@ <h4 class="sample-title">Select with ngModel, set items OnInit</h4>
         </igx-select-item>
     </igx-select>
 
+    <div>
+        <h4>Display Density</h4>
+        <button igxButton="raised" [disabled]="selectDisplayDensity.displayDensity === compact" (click)="setDensity(compact)">Compact</button>
+        <button igxButton="raised" [disabled]="selectDisplayDensity.displayDensity === cosy" (click)="setDensity(cosy)">Cosy</button>
+        <button igxButton="raised" [disabled]="selectDisplayDensity.displayDensity === comfortable" (click)="setDensity(comfortable)">Comfortable</button>
+    </div>
+
     <h4 class="sample-title">Select - declare items in html template</h4>
     <igx-select #select2
                 [placeholder]="'Pick One'"

src/app/select/select.sample.ts

@@ -4,7 +4,8 @@ import {
     ISelectionEventArgs, CancelableEventArgs, OverlaySettings,
     HorizontalAlignment, VerticalAlignment, scaleInTop, scaleOutBottom, ConnectedPositioningStrategy,
     AbsoluteScrollStrategy,
-    IgxSelectComponent
+    IgxSelectComponent,
+    DisplayDensity
 } from 'igniteui-angular';
 
 @Component({
@@ -19,7 +20,12 @@ export class SelectSampleComponent implements OnInit {
     public select: IgxSelectComponent;
     @ViewChild('model', { read: IgxSelectComponent, static: true })
     public selectFruits: IgxSelectComponent;
+    @ViewChild('displayDensitySelect', { read: IgxSelectComponent, static: true })
+    public selectDisplayDensity: IgxSelectComponent;
 
+    public comfortable = DisplayDensity.comfortable;
+    public cosy = DisplayDensity.cosy;
+    public compact = DisplayDensity.compact;
 
     constructor(fb: FormBuilder) {
         this.reactiveForm = fb.group({
@@ -137,4 +143,8 @@ export class SelectSampleComponent implements OnInit {
             this.selectComponents.first.open(customOverlaySettings);
         }
     }
+
+    setDensity(density: DisplayDensity) {
+        this.selectDisplayDensity.displayDensity = density;
+    }
 }