Merge branch 'master' into igniteui-angular-6589

Author: Lipata

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

@@ -314,6 +314,7 @@
 
         @include e(label) {
             @extend %form-group-label--box !optional;
+            @extend %form-group-label--border !optional;
         }
 
         @include e(textarea) {
@@ -325,6 +326,28 @@
         }
     }
 
+    @include mx(border, filled) {
+        @include e(label) {
+            @extend %form-group-label-float !optional;
+            @extend %form-group-label--float-border !optional;
+        }
+    }
+
+    @include mx(border, focused) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+        }
+    }
+
+    @include mx(border, placeholder) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+        }
+    }
+
+
     @include mx(border, cosy) {
         @extend %form-group-display--no-margin-cosy !optional;
 
@@ -341,6 +364,30 @@
         }
     }
 
+    @include mx(border, cosy, filled) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-cosy !optional;
+        }
+    }
+
+    @include mx(border, cosy, focused) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-cosy !optional;
+        }
+    }
+
+    @include mx(border, cosy, placeholder) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-cosy !optional;
+        }
+    }
+
     @include mx(border, compact) {
         @extend %form-group-display--no-margin-compact !optional;
 
@@ -357,6 +404,30 @@
         }
     }
 
+    @include mx(border, compact, filled) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-compact !optional;
+        }
+    }
+
+    @include mx(border, compact, focused) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-compact !optional;
+        }
+    }
+
+    @include mx(border, compact, placeholder) {
+        @include e(label) {
+            @extend %form-group-label--float !optional;
+            @extend %form-group-label--float-border !optional;
+            @extend %form-group-label--float-border-compact !optional;
+        }
+    }
+
     @include mx(valid, border) {
         @include e(bundle) {
             @extend %form-group-bundle-border--success !optional;
@@ -379,6 +450,10 @@
         @include e(bundle) {
             @extend %form-group-bundle-border--disabled !optional;
         }
+
+        @include e(label) {
+            @extend %form-group-label--float-border-disabled !optional;
+        }
     }
 
     // Fluent Theme Start //

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

@@ -114,7 +114,10 @@
     $input-prefix-color: null,
     $input-prefix-background: null,
     $input-suffix-color: null,
-    $input-suffix-background: null
+    $input-suffix-background: null,
+
+    $label-floated-background: null,
+    $label-floated-disabled-background: null
 ) {
     $name: 'igx-input-group';
     $input-group-schema: ();
@@ -234,6 +237,8 @@
         input-suffix-color: $input-suffix-color,
         input-suffix-background: $input-suffix-background,
 
+        label-floated-background: $label-floated-background,
+        label-floated-disabled-background: $label-floated-disabled-background,
         focused-shadow-color: $focused-shadow-color,
         success-shadow-color: $success-shadow-color,
         error-shadow-color: $error-shadow-color,
@@ -477,10 +482,6 @@
         box-shadow: inset 0 0 0 1px --var($theme, 'border-color');
         border-radius: --var($theme, 'border-border-radius');
         background: --var($theme, 'border-background');
-
-        %form-group-label--box + %form-group-input--box {
-            transform: translateY(0);
-        }
     }
 
     %form-group-bundle--border-cosy {
@@ -803,7 +804,7 @@
     %form-group-label {
         @include ellipsis();
         position: absolute;
-        width: 100%;
+        // width: 100%;
         transform: translateY(50%); /* 8px, base is 16px */
         line-height: 1 !important;
         height: rem(18px);
@@ -825,12 +826,35 @@
         transform: translateY(0);
     }
 
+    %form-group-label--border {
+        padding: 0 rem(4px);
+        transition: all $transition-timing;
+    }
+
     %form-group-label--float {
         overflow: visible;
         transform: translateY(-50%) scale(.75);
         margin-top: auto;
     }
 
+    %form-group-label--float-border {
+        // width: auto;
+        transform: translateY(-130%) scale(.75);
+        background: --var($theme, 'label-floated-background', inherit);
+    }
+
+    %form-group-label--float-border-disabled {
+        background: --var($theme, 'label-floated-disabled-background', inherit);
+    }
+
+    %form-group-label--float-border-cosy {
+        transform: translateY(-115%) scale(.75);
+    }
+
+    %form-group-label--float-border-compact {
+        transform: translateY(-105%) scale(.75);
+    }
+
     %form-group-label--fixed {
         transition: color $transition-timing;
     }

projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss

@@ -47,6 +47,17 @@
 /// @requires igx-palette
 $default-palette: igx-palette($primary: #09f, $secondary: #e41c77) !default;
 
+
+/// Default dark palette
+/// @type {Map}
+/// @group palettes
+$default-dark-palette: extend(
+    $default-palette,
+    (
+        surface: (500: #222)
+    )
+) !default;
+
 /// Global Overlay Color
 /// @group palettes
 /// @type Color
@@ -77,14 +88,33 @@ $green-palette: igx-palette(
     $secondary: #72da67
 ) !default;
 
-/// Red palette
+/// Dark green palette,
+/// @type {Map}
+/// @group palettes
+$green-dark-palette: extend(
+    $green-palette,
+    (
+        surface: (500: #222)
+    )
+) !default;
+
+/// Purple palette
 /// @type {Map}
 /// @group palettes
 $purple-palette: igx-palette(
     $primary: #00b4d6,
     $secondary: #514590
 ) !default;
 
+/// Dark purple palette
+/// @type {Map}
+/// @group palettes
+$purple-dark-palette: extend(
+    $purple-palette,
+    (
+        surface: (500: #333)
+    )
+) !default;
 
 /// Fluent Excel palette
 /// @type {Map}
@@ -97,6 +127,16 @@ $fluent-excel-palette: igx-palette(
     $error: #a80000
 ) !default;
 
+/// Fluent Excel dark palette
+/// @type {Map}
+/// @group palettes
+$fluent-excel-dark-palette: extend(
+    $fluent-excel-palette,
+    (
+        surface: (500: #222)
+    )
+) !default;
+
 /// Fluent Word palette
 /// @type {Map}
 /// @group palettes
@@ -105,7 +145,17 @@ $fluent-word-palette: igx-palette(
     $secondary: #2b579a,
     $success: #107c10,
     $warn: #797673,
-    $error: #a80000
+    $error: #a80000,
+) !default;
+
+/// Fluent Word dark palette
+/// @type {Map}
+/// @group palettes
+$fluent-word-dark-palette: extend(
+    $fluent-word-palette,
+    (
+        surface: (500: #222)
+    )
 ) !default;
 
 /// Bootstrap palette
@@ -121,3 +171,13 @@ $bootstrap-palette: igx-palette(
     $surface: #f8f9fa
 ) !default;
 
+/// Bootstrap dark palette
+/// @type {Map}
+/// @group palettes
+$bootstrap-dark-palette: extend(
+    $bootstrap-palette,
+    (
+        surface: (500: #333)
+    )
+) !default;
+

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

@@ -52,6 +52,8 @@
 /// @prop {Number} box-border-radius [.2 .2 0 0] - The border radius fraction, between 0-1 to be used for box input .
 /// @prop {Number} border-border-radius [.2] - The border radius fraction, between 0-1 to be used for border input .
 /// @prop {Number} search-border-radius [.2] - The border radius fraction, between 0-1 to be used for search input .
+/// @prop {Color} label-floated-background [igx-color: surface] - The background color of the label when floated for input of type border.
+/// @prop {Color} label-floated-disabled-background [igx-color: surface] - The background color of the label when floated for input group of type border in its disabled state.
 ///
 /// @requires {function} extend
 /// @requires {map} $_default-shape-input-group
@@ -138,7 +140,7 @@ $_light-input-group: extend(
 
         disabled-border-color: (
             igx-color: ('grays', 500),
-            rgba: .06
+            rgba: .12
         ),
 
         box-background: (
@@ -151,8 +153,14 @@ $_light-input-group: extend(
 
         border-background: transparent,
 
-        border-disabled-background: (
-            igx-color: ('grays', 100)
+        border-disabled-background: transparent,
+
+        label-floated-background: (
+            igx-color: surface
+        ),
+
+        label-floated-disabled-background: (
+            igx-color: surface
         ),
 
         search-background: #fff,

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -14,6 +14,10 @@ import { IgxCell, IgxRow } from './selection/selection.service';
 import { GridType } from './common/grid.interface';
 import { ColumnType } from './common/column.interface';
 import { IRowToggleEventArgs } from './common/events';
+import {
+    ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS
+} from '../core/utils';
+import { first, debounceTime } from 'rxjs/operators';
 /**
  *@hidden
  */
@@ -578,6 +582,12 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
         if (grid.rowEditable) {
             grid.endEdit(true);
         }
+        const eventKey = event && (event as any).key ? (event as any).key.toLowerCase() : null;
+        if (eventKey && this.isToggleKey(eventKey)) {
+            (this.grid as any).zone.onStable.pipe(debounceTime(30)).pipe(first()).subscribe(() => {
+                this.focusActiveCell(rowID);
+            });
+        }
     }
 
     public get_rec_by_id(rowID) {
@@ -588,4 +598,20 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
         return this.grid.expansionStates.get(rowID) !== expanded;
     }
 
+    private isToggleKey(key: string): boolean {
+        return ROW_COLLAPSE_KEYS.has(key) || ROW_EXPAND_KEYS.has(key);
+    }
+
+    private focusActiveCell(rowID) {
+        // persist focused cell
+        const isVirtualized = !this.grid.verticalScrollContainer.dc.instance.notVirtual;
+        const el = this.grid.selectionService.activeElement;
+        if (isVirtualized && el) {
+            const cell = this.get_cell_by_key(rowID, this.grid.visibleColumns[el.column].field);
+            if (cell) {
+                cell.nativeElement.focus();
+            }
+        }
+    }
+
 }

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

@@ -3400,7 +3400,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.expansionStatesChange.emit(this._expansionStates);
         if (this.gridAPI.grid) {
             this.cdr.detectChanges();
-            this._focusActiveCell();
         }
     }
 
@@ -6257,16 +6256,4 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             advancedFilteringDialog.closeDialog();
         }
     }
-
-   protected _focusActiveCell() {
-    // persist focused cell
-    const isVirtualized = !this.verticalScrollContainer.dc.instance.notVirtual;
-    const el = this.selectionService.activeElement;
-    if (isVirtualized && el) {
-        const cell = this.gridAPI.get_cell_by_visible_index(el.row, el.column);
-        if (cell) {
-            cell.nativeElement.focus();
-        }
-    }
-}
 }