Merge branch 'master' into dkamburov/kb-test-pinning

Author: ChronosSF

CHANGELOG.md

@@ -13,6 +13,21 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 
+- `igxSplitter` component added.
+    - Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
+        Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the `type` input.
+
+     ```html
+   <igx-splitter [type]="type">
+        <igx-splitter-pane>
+			...
+        </igx-splitter-pane>
+        <igx-splitter-pane>
+			...
+        </igx-splitter-pane>
+    </igx-splitter>
+    ```
+
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Added ability to pin rows to top or bottom depending on the new `pinning` input.
     And new API methods `pinRow` and `unpinRow`.
@@ -50,6 +65,10 @@ All notable changes for each version of this project will be documented in this
 - `IgxToast`:
     - Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
 
+- `IgxDrag`
+    - New `igxDragIgnore` directive that allows children of the `igxDrag` element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
+    - New `dragDirection` input that can specify only one direction of dragging or both.
+
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.
 

ROADMAP.md

@@ -2,23 +2,25 @@
 
 # Current Milestone
 
-## Milestone 11 (Due by April, 2020)
+## Milestone 11 (Due by April 30th, 2020)
 
 1. Dock Manger [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
 2. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
-3. RTL Support across Ignite UI for Angular components [#5958](https://github.com/IgniteUI/igniteui-angular/issues/5958)
+3. Keyboard Navigation Enhancement [#6755](https://github.com/IgniteUI/igniteui-angular/issues/6755)
 4. Column freezing/Pinning on the right (igx-grid) [#5879](https://github.com/IgniteUI/igniteui-angular/issues/5879)
 5. Column Selection for IgxGrid [#6578](https://github.com/IgniteUI/igniteui-angular/issues/6578)
-6. Splitter IgxGrid [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
+6. Splitter [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
 7. Row Pinning IgxGrid [#6640](https://github.com/IgniteUI/igniteui-angular/issues/6640)
 8. Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
+9. Slider does not support RTL [#5212](https://github.com/igniteui/igniteui-angular/issues/5212)
+10. Circular Progress Indicator does not support RTL [#5903](https://github.com/igniteui/igniteui-angular/issues/5903)
 
 
 ## Going down the road
 
 1. Tile Manager
 2. Visual Cell merging
-
+3. RTL Support across Ignite UI for Angular components
 # Previous Milestones 
 
 ## Milestone 10 (Released February 10th, 2020)

projects/igniteui-angular/src/lib/chips/chip.component.html

@@ -2,9 +2,11 @@
     [attr.tabindex]="chipTabindex"
     (keydown)="onChipKeyDown($event)"
     [igxDrag]="{chip: this}"
-    [hideBaseOnDrag]="hideBaseOnDrag"
+    [style.visibility]='hideBaseElement ? "hidden" : "visible"'
     [ghostClass]="ghostClass"
     (dragStart)="onChipDragStart($event)"
+    (ghostCreate)="onChipGhostCreate()"
+    (ghostDestroy)="onChipGhostDestroy()"
     (dragEnd)="onChipDragEnd()"
     (transitioned)="onChipMoveEnd($event)"
     (dragClick)="onChipDragClicked($event)"

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -437,6 +437,12 @@ export class IgxChipComponent extends DisplayDensityBase {
         return !this.disabled ? 0 : '';
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public hideBaseElement = false;
+
     protected _selected = false;
     protected _selectedItemClass = 'igx-chip__item--selected';
     protected _movedWhileRemoving = false;
@@ -624,6 +630,22 @@ export class IgxChipComponent extends DisplayDensityBase {
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public onChipGhostCreate() {
+        this.hideBaseElement = this.hideBaseOnDrag;
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public onChipGhostDestroy() {
+        this.hideBaseElement = false;
+    }
+
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

@@ -177,6 +177,7 @@
         &:hover,
         &:focus {
             @extend %cal-value--month-hover !optional;
+            @extend %cal-value--month-current !optional;
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -743,7 +743,7 @@
     }
 
     %cal-value--month-current {
-        color: --var($theme, 'month-current-text-color') ;
+        color: --var($theme, 'month-current-text-color');
     }
 
     %cal-value--inactive {

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

@@ -17,6 +17,8 @@
 /// @param {String} $header-border-width [null] - The border width used for header borders.
 /// @param {String} $header-border-style [null] - The border style used for header borders.
 /// @param {Color} $header-border-color [null] - The color used for header borders.
+/// @param {Color} $header-selected-background [null] - The table header background color when selected (ex. column selection).
+/// @param {Color} $header-selected-text-color [null] - The table header text color when selected (ex. column selection).
 ///
 /// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted.
 /// @param {color} $sortable-header-icon-hover-color [null] - The icon color on hover in grid header when the column is sortable.
@@ -126,6 +128,9 @@
     $header-border-style: null,
     $header-border-color: null,
 
+    $header-selected-background: null,
+    $header-selected-text-color: null,
+
     $sorted-header-icon-color: null,
 
     $content-background: null,
@@ -230,7 +235,22 @@
 
     $tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($theme, 'row-selected-background')), .5);
     $tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($theme, 'cell-selected-background')), .5);
-    $row-selected-cell-background: darken-color(map-get($theme, 'row-selected-background'), 8%);
+
+    $rs-bg: if(
+        $row-selected-background,
+        $row-selected-background,
+        map-get($theme, 'row-selected-background')
+    );
+
+    $row-selected-cell-background: null;
+
+    @if type-of($rs-bg) == 'color' {
+        @if luminance($rs-bg) < .5 {
+            $row-selected-cell-background: lighten-color($rs-bg, 8%);
+        } @else {
+            $row-selected-cell-background: darken-color($rs-bg, 8%);
+        }
+    }
 
     @if not($ghost-header-icon-color) and $ghost-header-background {
         @if type-of($ghost-header-background) == 'color' {
@@ -250,6 +270,10 @@
         $header-text-color: text-contrast($header-background);
     }
 
+    @if not($header-selected-text-color) and $header-selected-background {
+        $header-selected-text-color: text-contrast($header-selected-background);
+    }
+
     @if not($header-border-color) and $header-background {
         @if type-of($header-background) == 'color' {
             $header-border-color: rgba(text-contrast($header-background), .24);
@@ -442,6 +466,8 @@
 
         header-background: $header-background,
         header-text-color: $header-text-color,
+        header-selected-background:  $header-selected-background,
+        header-selected-text-color:  $header-selected-text-color,
         header-border-width: $header-border-width,
         header-border-style: $header-border-style,
         header-border-color: $header-border-color,
@@ -979,6 +1005,15 @@
         &:hover {
             background: --var($theme, 'row-hover-background');
             color: --var($theme, 'row-hover-text-color');
+
+            %grid-cell--column-selected {
+                background: --var($theme, 'row-selected-hover-background');
+            }
+
+            %grid-cell--cross-selected {
+                color: --var($theme, 'row-selected-text-color');
+                background: --var($theme, 'row-selected-cell-background');
+            }
         }
 
         &%igx-grid__tr--ghost {
@@ -1059,6 +1094,11 @@
         &:hover {
             background: --var($theme, 'row-selected-hover-background');
             color: --var($theme, 'row-selected-text-color');
+
+            %grid-cell--column-selected {
+                color: --var($theme, 'row-selected-text-color');
+                background: --var($theme, 'row-selected-hover-background');
+            }
         }
 
         %igx-grid__tree-grouping-indicator {
@@ -1289,14 +1329,10 @@
     %grid-cell--column-selected {
         color: --var($theme, 'row-selected-text-color');
         background: --var($theme, 'row-selected-background');
-
-        &:hover {
-            background: --var($theme, 'row-selected-hover-background');
-            color: --var($theme, 'row-selected-text-color');
-        }
     }
 
     %grid-cell--cross-selected {
+        color: --var($theme, 'row-selected-text-color');
         background: --var($theme, 'row-selected-cell-background');
     }
 
@@ -1472,14 +1508,14 @@
     }
 
     %igx-grid__th--selectable {
-        color: --var($theme, 'row-selected-text-color');
-        background: --var($theme, 'row-selected-background');
+        color: --var($theme, 'header-selected-text-color');
+        background: --var($theme, 'header-selected-background');
         opacity: .7;
     }
 
     %igx-grid__th--selected {
-        color: --var($theme, 'row-selected-text-color');
-        background: --var($theme, 'row-selected-cell-background');
+        color: --var($theme, 'header-selected-text-color');
+        background: --var($theme, 'header-selected-background');
     }
 
     %igx-grid__th--sortable {
@@ -2208,8 +2244,8 @@
     }
 
     %igx-grid__filtering-cell--selected {
-        color: --var($theme, 'row-selected-text-color');
-        background: --var($theme, 'row-selected-cell-background');
+        color: --var($theme, 'header-selected-text-color');
+        background: --var($theme, 'header-selected-background');
     }
 
     %igx-grid__filtering-cell-indicator {

projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss

@@ -0,0 +1,52 @@
+/// @group components
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @author <a href="https://github.com/simeonoff" target="_blank">Maya Kirova</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+
+@include b(igx-splitter) {
+    // Register the component in the component registry
+    $this: str-slice(bem--selector-to-string(&), 2, -1);
+    @include register-component($this);
+
+    @include b(#{$this}-bar) {
+        @extend %igx-splitter-bar !optional;
+
+        @include e(handle) {
+            @extend %igx-splitter-handle !optional;
+            @extend %igx-splitter-handle--horizontal !optional;
+        }
+
+        @include e(expander, 'start') {
+            @extend %igx-splitter-expander !optional;
+            @extend %igx-splitter-expander--start !optional;
+        }
+
+        @include e(expander, 'end') {
+            @extend %igx-splitter-expander !optional;
+            @extend %igx-splitter-expander--end !optional;
+        }
+
+        @include m('vertical') {
+            @extend %igx-splitter-bar--vertical !optional;
+
+            @include e(handle) {
+                @extend %igx-splitter-handle !optional;
+                @extend %igx-splitter-handle--vertical !optional;
+            }
+
+            @include e(expander, 'start') {
+                @extend %igx-splitter-expander !optional;
+                @extend %igx-splitter-expander--start-vertical !optional;
+            }
+
+            @include e(expander, 'end') {
+                @extend %igx-splitter-expander !optional;
+                @extend %igx-splitter-expander--end-vertical !optional;
+            }
+        }
+    }
+}
+