Merge branch 'master' into bpenkov/date-time-editor

Author: Lipata

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

@@ -11,6 +11,12 @@
     $this: str-slice(bem--selector-to-string(&), 2, -1);
     @include register-component($this);
 
+    @include b(#{$this}-bar-host) {
+        &:focus {
+            @extend %igx-splitter-bar--focus !optional;
+        }
+    }
+
     @include b(#{$this}-bar) {
         @extend %igx-splitter-bar !optional;
 

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

@@ -1,5 +1,19 @@
 ////
 /// @group themes
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+///
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.
+///
+/// @param {color} $bar-color [null] - The background color of the bar.
+/// @param {color} $handle-color [null] - The color for the bar drag handle.
+/// @param {color} $expander-color [null] - The color for the arrow expander's.
+/// @param {number} $border-radius [null] - the border radios of the splitter bar drag handle
+/// @param {color} $focus-color [null] - The color used for focused splitter bar.
+/// @param {number} $size [null] - The size of the splitter, its width for vertical and height for horizontal splitter.
+///
 @function igx-splitter-theme(
     $palette: $default-palette,
     $schema: $light-schema,
@@ -9,6 +23,7 @@
     $handle-color: null,
     $expander-color: null,
     $border-radius: null,
+    $focus-color: null,
     $size: null
 ) {
     $name: 'igx-splitter';
@@ -41,6 +56,7 @@
         handle-color: $handle-color,
         expander-color: $expander-color,
         border-radius: $border-radius-handle,
+        focus-color: $focus-color,
         size: $size
     ));
 }
@@ -98,6 +114,12 @@
         }
     }
 
+    %igx-splitter-bar--focus {
+        // Remove the default browser outline styles
+        outline: transparent solid 1px;
+        box-shadow: inset 0 0 0 1px --var($theme, 'focus-color');
+    }
+
     %igx-splitter-bar--vertical {
         flex-direction: column;
         height: 100%;

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

@@ -4,15 +4,18 @@
 /// @group schemas
 /// @access private
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
 /// Generates a light splitter schema.
 /// @type {Map}
 /// @property {Map} icon-background [igx-color: ('grays', 400)]- The background color used for splitters of type icon.
-/// @property {Map} icon-color [igx-color: ('grays', 800)] - The icon color used for splitters of type icon.
-/// @property {Map} initials-background [igx-color: ('grays', 400)] - The background color used for splitters of type initials.
-/// @property {Map} initials-color [igx-color: ('grays', 800)] - The text color used for splitters of type initials.
-/// @property {Color} image-background [transparent] - The background color used for splitters of type image.
+/// @property {Map} $bar-color [igx-color: 'surface', darken: 5%] - The background color of the bar.
+/// @property {Map} $handle-color [igx-color: 'surface', darken: 20%] - The color for the bar drag handle.
+/// @property {Map} $expander-color [igx-color: 'surface', darken: 20%] - The color for the arrow expander's.
+/// @property {Map} $border-radius [1] - The border radius fraction, between 0-1 to be used for the splitter component
+/// @property {Map} $focus-color [igx-color: ('secondary', 500)] - The color used for focused splitter bar.
+/// @property {Number} $size [4px] - The size of the splitter, it's width for vertical and height for horizontal splitter.
 /// @see $default-palette
 $_light-splitter: extend(
     $_default-shape-splitter,
@@ -22,6 +25,10 @@ $_light-splitter: extend(
             darken: 5%
         ),
 
+        focus-color: (
+            igx-color: ('secondary', 500)
+        ),
+
         handle-color: (
             igx-color: 'surface',
             darken: 20%

projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input, HostBinding, EventEmitter, Output, HostListener } from '@angular/core';
-import { SplitterType } from '../splitter.component';
-import { IgxSplitterPaneComponent } from '../splitter-pane/splitter-pane.component';
-import { IDragMoveEventArgs, IDragStartEventArgs, DragDirection } from '../../directives/drag-drop/drag-drop.directive';
+import {Component, EventEmitter, HostBinding, HostListener, Input, Output} from '@angular/core';
+import {SplitterType} from '../splitter.component';
+import {IgxSplitterPaneComponent} from '../splitter-pane/splitter-pane.component';
+import {DragDirection, IDragMoveEventArgs, IDragStartEventArgs} from '../../directives/drag-drop/drag-drop.directive';
 
 
 export const SPLITTER_INTERACTION_KEYS = new Set('right down left up arrowright arrowdown arrowleft arrowup'.split(' '));
@@ -17,6 +17,11 @@ export const SPLITTER_INTERACTION_KEYS = new Set('right down left up arrowright
     templateUrl: './splitter-bar.component.html'
 })
 export class IgxSplitBarComponent {
+    /**
+     * Set css class to the host element.
+     */
+    @HostBinding('class.igx-splitter-bar-host')
+    public cssClass = 'igx-splitter-bar-host';
 
     /**
      * Sets/gets `IgxSplitBarComponent` orientation.