Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into ddincheva/copyBugFixs

Author: ddincheva

CHANGELOG.md

@@ -17,6 +17,7 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
 - `igxGrid`
     - Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally.
+    - Each grid now expose a default handling for boolean column types. The column will display `check` or `close` icon, instead of true/false by default. 
 - `igxTreeGrid`
     - Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
 - `IgxTimePicker`
@@ -96,6 +97,12 @@ The following example shows how you can use the Indigo theme:
 - `IgxSelect` support for `igxHint` directive added.
     - Allows the user to add `igxHint` to be displayed bellow the input element.
 
+## 9.1.9
+
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Expose a setter for grid's `outlet` property, which can be used to set the outlet used to attach the grid's overlays to.
+
 ## 9.1.4
 
 ### New Features

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -319,4 +319,3 @@
         @include ellipsis();
     }
 }
-

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

@@ -407,6 +407,10 @@
             }
         }
 
+        igx-buttongroup {
+            min-width: 30%;
+        }
+
         [igxButton='icon'] {
             margin-#{$left}: rem(16px);
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -325,6 +325,14 @@
         @extend %grid-cell--cross-selected !optional;
     }
 
+    @include e(td, $m: bool) {
+        @extend %igx-grid__td--bool !optional;
+    }
+
+    @include e(td, $m: bool-true) {
+        @extend %igx-grid__td--bool-true !optional;
+    }
+
     @include e(tr, $mods: (selected, filtered)) {
         @extend %grid-row--selected--filtered !optional;
     }

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

@@ -1139,6 +1139,23 @@
         bottom: 0;
     }
 
+    %igx-grid__td--bool {
+        justify-content: center;
+
+        igx-icon {
+            height: rem(18px);
+            width: rem(18px);
+            font-size: rem(18px);
+            color: igx-color($palette, 'grays', 500);
+        }
+    }
+
+    %igx-grid__td--bool-true {
+        igx-icon {
+            color: igx-color($palette, 'grays', 700);
+        }
+    }
+
     %igx-grid__tr--edit {
         border-bottom: 1px solid --var($theme, 'edit-mode-color');
         position: relative;
@@ -1570,15 +1587,16 @@
     }
 
     %igx-grid__th--active {
-        %grid-cell-header,
+        @extend %grid-cell--active;
+
         %igx-grid__th--selected,
         %igx-grid__th--selectable {
-            @extend %grid-cell--active
+            @extend %grid-cell--active;
         }
     }
 
     %igx-grid-summary--active {
-        @extend %grid-cell--active
+        @extend %grid-cell--active;
     }
 
     %igx-grid__th--sortable {

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss

@@ -443,6 +443,9 @@ $_dark-indigo-grid: extend(
 
         cell-selected-background: (
             igx-color: ('grays', 200),
+            to-opaque: (
+                igx-color: 'surface',
+            )
         ),
 
         cell-selected-text-color: (

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss

@@ -688,7 +688,8 @@ $_indigo-grid: extend(
 
         cell-selected-background: (
             igx-color: ('primary', 50),
-            rgba: .5
+            rgba: .5,
+            to-opaque: #fff
         ),
 
         cell-active-border-color: (

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -10,7 +10,15 @@
         [row]="rowData"
         [column]="this.column.field"
         [containerClass]="'igx-grid__td-text'"
-        [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal:grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
+        [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) :
+            column.dataType === 'number' ?
+            (value | igxdecimal:grid.locale) :
+            column.dataType === 'date' ?
+            (value | igxdate: grid.locale) :
+            column.dataType === 'boolean' ? "" :
+            value
+        }}</div>
+    <igx-icon *ngIf="column.dataType === 'boolean'">{{value ? 'check' : 'close'}}</igx-icon>
 </ng-template>
 <ng-template #inlineEditor let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">
@@ -28,7 +36,7 @@
             [igxFocus]="true" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker [style.width.%]="100" [outlet]="grid.outletDirective" mode="dropdown"
+        <igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
             [locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
         </igx-date-picker>
     </ng-container>

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

@@ -287,6 +287,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         return this.editMode || this.cellTemplate ? '' : this.value;
     }
 
+    @HostBinding('class.igx-grid__td--bool-true')
+    public get booleanClass() {
+        return this.column.dataType === 'boolean' && this.value;
+    }
+
     /**
      * Returns a reference to the nativeElement of the cell.
      * ```typescript

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -30,7 +30,7 @@ export interface GridType extends IGridDataBindable {
     selectionService: any;
     navigation: any;
     filteringService: any;
-    outletDirective: any;
+    outlet: any;
 
     calcHeight: number;