From c499b8a7e4ca37da46aa5b891c7fdc9dfb39627c Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Wed, 25 Mar 2020 13:18:10 +0200
Subject: [PATCH 01/44] feat(igxSplitter): Adding basic splitter in repo.
 Adding basic sample.

---
 .../splitbar/split-bar.component.html         |   5 +
 .../splitbar/split-bar.component.scss         |  36 ++++
 .../splitter/splitbar/split-bar.component.ts  | 101 +++++++++++
 .../splitpane/split-pane.component.html       |   1 +
 .../splitpane/split-pane.component.ts         |  91 ++++++++++
 .../src/lib/splitter/splitter.component.html  |   9 +
 .../src/lib/splitter/splitter.component.ts    | 165 ++++++++++++++++++
 .../src/lib/splitter/splitter.directives.ts   |  81 +++++++++
 .../src/lib/splitter/splitter.module.ts       |  25 +++
 projects/igniteui-angular/src/public_api.ts   |   1 +
 src/app/app.component.ts                      |   7 +-
 src/app/app.module.ts                         |   2 +
 src/app/routing.ts                            |   5 +
 src/app/shared/shared.module.ts               |   2 +
 src/app/splitter/slitter.sample.ts            |   9 +
 src/app/splitter/splitter.sample.html         |  19 ++
 src/app/splitter/splitter.sample.scss         |   2 +
 17 files changed, 560 insertions(+), 1 deletion(-)
 create mode 100644 projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
 create mode 100644 projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
 create mode 100644 projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
 create mode 100644 projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.html
 create mode 100644 projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
 create mode 100644 projects/igniteui-angular/src/lib/splitter/splitter.component.html
 create mode 100644 projects/igniteui-angular/src/lib/splitter/splitter.component.ts
 create mode 100644 projects/igniteui-angular/src/lib/splitter/splitter.directives.ts
 create mode 100644 projects/igniteui-angular/src/lib/splitter/splitter.module.ts
 create mode 100644 src/app/splitter/slitter.sample.ts
 create mode 100644 src/app/splitter/splitter.sample.html
 create mode 100644 src/app/splitter/splitter.sample.scss

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
new file mode 100644
index 00000000000..c188c8d4cea
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
@@ -0,0 +1,5 @@
+<div class="split-bar" [style.flex-direction]="direction" splitter (pointerDown)="onPointerDown($event)" (pointerMove)="onPointerMove($event)">
+    <div class="split-bar-indicator"></div>
+    <div class="split-bar-indicator"></div>
+    <div class="split-bar-indicator"></div>
+</div>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
new file mode 100644
index 00000000000..d28382a0551
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
@@ -0,0 +1,36 @@
+
+@mixin square($size, $radius: 0) {
+    width: $size;
+    height: $size;
+
+    @if $radius != 0 {
+        border-radius: $radius;
+    }
+}
+
+$splitter-color: rgba(235,235,235,0.8);
+$splitter-border-width: (1);
+$splitter-border-style: (solid);
+$splitter-border-color: ($splitter-color);
+$splitter-dot-size: rem(2px);
+$splitter-dot-border-radius: rem(1px);
+
+
+.split-bar {
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+    align-items: center;
+    background: $splitter-color;
+    border-width: $splitter-border-width;
+    border-style: $splitter-border-style;
+    border-color: $splitter-border-color;
+}
+
+.split-bar-indicator {
+    
+    @include square($splitter-dot-size, $splitter-dot-border-radius);
+    margin: $splitter-dot-size;
+    background: 'black';
+    //background: $main-color-4;
+}
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
new file mode 100644
index 00000000000..c15da12dfdf
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
@@ -0,0 +1,101 @@
+import { Component, Input, HostBinding, EventEmitter, Output } from '@angular/core';
+import { SplitterType } from '../splitter.component';
+import { SplitPaneComponent } from '../splitpane/split-pane.component';
+
+/**
+ * Provides reference to `SplitBarComponent` component.
+ * Represents the draggable gripper that visually separates panes and allows for changing their sizes.
+ * @export
+ * @class SplitBarComponent
+ */
+@Component({
+    selector: 'split-bar',
+    styleUrls: ['./split-bar.component.scss'],
+    templateUrl: './split-bar.component.html'
+})
+export class SplitBarComponent {
+
+    /**
+     * Sets/gets `SplitterComponent` orientation.
+     * @type SplitterType
+     * @memberof SplitBarComponent
+     */
+    @Input()
+    public type: SplitterType = SplitterType.Vertical;
+
+    /**
+     * Sets/gets the `SplitPaneComponent` associated with the current `SplitBarComponent`.
+     * @memberof SplitBarComponent
+     */
+    @Input()
+    public pane!: SplitPaneComponent;
+
+    /**
+     * An event that is emitted whenever we start dragging the current `SplitBarComponent`.
+     * @memberof SplitBarComponent
+     */
+    @Output()
+    public moveStart = new EventEmitter<SplitPaneComponent>();
+
+    /**
+     * An event that is emitted while we are dragging the current `SplitBarComponent`.
+     * @memberof SplitBarComponent
+     */
+    @Output()
+    public moving = new EventEmitter<number>();
+
+    /**
+     * Gets the cursor associated with the current `SplitBarComponent`.
+     * @readonly
+     * @type string
+     * @memberof SplitBarComponent
+     */
+    @HostBinding('style.cursor')
+    public get cursor(): string {
+        return this.type === SplitterType.Horizontal ? 'col-resize' : 'row-resize';
+    }
+
+    /**
+     * Sets/gets the `display` property of the current `SplitBarComponent`.
+     * @memberof SplitBarComponent
+     */
+    @HostBinding('style.display')
+    public display = 'flex';
+
+    /**
+     * Gets the `flex-direction` property of the current `SplitBarComponent`.
+     * @readonly
+     * @type string
+     * @memberof SplitBarComponent
+     */
+    public get direction(): string {
+        return this.type === SplitterType.Horizontal ? 'column' : 'row';
+    }
+
+    /**
+     * A temporary holder for the pointer coordinates.
+     * @private
+     * @memberof SplitBarComponent
+     */
+    private startPoint!: number;
+
+    /**
+     * A method that handles the `PoinerDown` event firing.
+     * @param  {PointerEvent} event The `PoinerDown` event payload.
+     * @return {void}@memberof SplitBarComponent
+     */
+    public onPointerDown(event: PointerEvent) {
+        this.startPoint = this.type === SplitterType.Horizontal ? event.clientX : event.clientY;
+        this.moveStart.emit(this.pane);
+    }
+
+    /**
+     * A method that handles the `PoinerMove` event firing.
+     * @param  {PointerEvent} event The `PoinerMove` event payload.
+     * @return {void}@memberof SplitBarComponent
+     */
+    public onPointerMove(event: PointerEvent) {
+        const delta = this.startPoint - (this.type === SplitterType.Horizontal ? event.clientX : event.clientY);
+        this.moving.emit(delta);
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.html b/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.html
new file mode 100644
index 00000000000..95a0b70bdc7
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
new file mode 100644
index 00000000000..856746c14e8
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
@@ -0,0 +1,91 @@
+import { Component, HostBinding, Input, ElementRef } from '@angular/core';
+
+/**
+ * Provides reference to `SplitPaneComponent` component.
+ * Represents individual resizable panes. Users can control the resize behavior via the min and max size properties.
+ * @export
+ * @class SplitPaneComponent
+ */
+@Component({
+    selector: 'split-pane',
+    templateUrl: './split-pane.component.html'
+})
+export class SplitPaneComponent {
+
+    /**
+     * Sets/gets the size of the current `SplitPaneComponent`.
+     * @memberof SplitPaneComponent
+     */
+    @Input()
+    public size = 'auto';
+
+    /**
+     * Sets/gets the minimum allowable size of the current `SplitPaneComponent`.
+     * @memberof SplitPaneComponent
+     */
+    @Input()
+    public minSize!: string;
+
+    /**
+     * Sets/gets the maximum allowable size of the current `SplitPaneComponent`.
+     * @memberof SplitPaneComponent
+     */
+    @Input()
+    public maxSize!: string;
+
+    /**
+     * Sets/gets the `order` property of the current `SplitPaneComponent`.
+     * @memberof SplitPaneComponent
+     */
+    @Input()
+    @HostBinding('style.order')
+    public order!: number;
+
+    /**
+     * Gets the host native element.
+     * @readonly
+     * @type *
+     * @memberof SplitPaneComponent
+     */
+    public get element(): any {
+        return this.el.nativeElement;
+    }
+
+    /**
+     * Sets/gets the `overflow` property of the current `SplitPaneComponent`.
+     * @memberof SplitPaneComponent
+     */
+    @HostBinding('style.overflow')
+    public overflow = 'auto';
+
+    /**
+     * Sets/gets the `minHeight` and `minWidth` propertis of the current `SplitPaneComponent`.
+     * @memberof SplitPaneComponent
+     */
+    @HostBinding('style.min-height')
+    @HostBinding('style.min-width')
+    public minHeight = 0;
+
+    /**
+     * Sets/gets the `maxHeight` and `maxWidth` propertis of the current `SplitPaneComponent`.
+     * @memberof SplitPaneComponent
+     */
+    @HostBinding('style.max-height')
+    @HostBinding('style.max-width')
+    public maxHeight = '100%';
+
+    /**
+     * Gets the `flex` property of the current `SplitPaneComponent`.
+     * @readonly
+     * @memberof SplitPaneComponent
+     */
+    @HostBinding('style.flex')
+    public get flex() {
+        const grow = this.size !== 'auto' ? 0 : 1;
+        const shrink = this.size !== 'auto' ? 0 : 1;
+
+        return `${grow} ${shrink} ${this.size}`;
+    }
+
+    constructor(private el: ElementRef) { }
+}
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.html b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
new file mode 100644
index 00000000000..00b400b7260
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
@@ -0,0 +1,9 @@
+<ng-content select="split-pane"></ng-content>
+<ng-container *ngFor="let pane of panes; let last = last">
+    <split-bar *ngIf="!last" [style.order]="pane.order + 1"
+                    [type]="type"
+                    [pane]="pane"
+                    (moveStart)="onMoveStart($event)"
+                    (moving)="onMoving($event)">
+    </split-bar>
+</ng-container>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
new file mode 100644
index 00000000000..4aa37de9f4d
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -0,0 +1,165 @@
+import { Component, QueryList, Input, ContentChildren, AfterContentInit, HostBinding, Output, EventEmitter } from '@angular/core';
+import { SplitPaneComponent } from './splitpane/split-pane.component';
+
+/**
+ * An enumeration that defines the `SplitterComponent` panes orientation.
+ * @export
+ * @enum {number}
+ */
+export enum SplitterType {
+    Horizontal,
+    Vertical
+}
+
+/**
+ * Provides reference to `SplitterComponent` component.
+ * The splitter consists of resizable panes that can be arranged either vertically or horizontally.
+ * There is a gripper between each couple of panes that helps widen or shrink them.
+ * @export
+ * @class SplitterComponent
+ * @implements AfterContentInit
+ */
+@Component({
+    selector: 'splitter',
+    templateUrl: './splitter.component.html'
+})
+export class SplitterComponent implements AfterContentInit {
+
+    /**
+     * Sets/gets `SplitterComponent` orientation.
+     * @type SplitterType
+     * @memberof SplitterComponent
+     */
+    @Input()
+    public type: SplitterType = SplitterType.Vertical;
+
+    @Output()
+    public panesChange = new EventEmitter<SplitPaneComponent[]>();
+
+    /**
+     * A list of all `SplitPaneComponent` items.
+     * @memberof SplitterComponent
+     */
+    @ContentChildren(SplitPaneComponent, { read: SplitPaneComponent })
+    public panes!: QueryList<SplitPaneComponent>;
+
+    /**
+     * Gets the `flex-direction` property of the current `SplitterComponent`.
+     * @readonly
+     * @type string
+     * @memberof SplitterComponent
+     */
+    @HostBinding('style.flex-direction')
+    public get direction(): string {
+        return this.type === SplitterType.Horizontal ? 'row' : 'column';
+    }
+
+    /**
+     * Sets/gets the `overflow` property of the current `SplitterComponent`.
+     * @memberof SplitterComponent
+     */
+    @HostBinding('style.overflow')
+    public overflow = 'hidden';
+
+    /**
+     * Sets/gets the `display` property of the current `SplitterComponent`.
+     * @memberof SplitterComponent
+     */
+    @HostBinding('style.display')
+    public display = 'flex';
+
+    /**
+     * A field that holds the initial size of the main `SplitPaneComponent` in each couple of panes devided by a gripper.
+     * @private
+     * @memberof SplitterComponent
+     */
+    private initialPaneSize!: number;
+
+    /**
+     * A field that holds the initial size of the sibling `SplitPaneComponent` in each couple of panes devided by a gripper.
+     * @private
+     * @memberof SplitterComponent
+     */
+    private initialSiblingSize!: number;
+
+    /**
+     * The main `SplitPaneComponent` in each couple of panes devided by a gripper.
+     * @private
+     * @memberof SplitterComponent
+     */
+    private pane!: SplitPaneComponent;
+
+    /**
+     * The sibling `SplitPaneComponent` in each couple of panes devided by a gripper.
+     * @private
+     * @memberof SplitterComponent
+     */
+    private sibling!: SplitPaneComponent;
+
+    public ngAfterContentInit(): void {
+        this.assignFlexOrder();
+        this.panes.changes.subscribe(() => {
+            requestAnimationFrame(() => {
+                this.panesChange.emit(this.panes.toArray());
+                this.assignFlexOrder();
+            });
+        });
+    }
+
+    /**
+     * This method performs some initialization logic when the user starts dragging the gripper between each couple of panes.
+     * @param  {SplitPaneComponent} pane The main `SplitPaneComponent` associated with the currently dragged `SplitBarComponent`.
+     * @return {void}@memberof SplitterComponent
+     */
+    public onMoveStart(pane: SplitPaneComponent) {
+        const panes = this.panes.toArray();
+        this.pane = pane;
+        this.sibling = panes[panes.indexOf(this.pane) + 1];
+
+        const paneRect = this.pane.element.getBoundingClientRect();
+        this.initialPaneSize = this.type === SplitterType.Horizontal ? paneRect.width : paneRect.height;
+        if (this.pane.size === 'auto') {
+            this.pane.size = this.type === SplitterType.Horizontal ? paneRect.width : paneRect.height;
+        }
+
+        const siblingRect = this.sibling.element.getBoundingClientRect();
+        this.initialSiblingSize = this.type === SplitterType.Horizontal ? siblingRect.width : siblingRect.height;
+        if (this.sibling.size === 'auto') {
+            this.sibling.size = this.type === SplitterType.Horizontal ? siblingRect.width : siblingRect.height;
+        }
+    }
+
+    /**
+     * This method performs some calculations concerning the sizes each couple of panes while the gripper between them is being dragged.
+     * @param  {number} delta The differnce along the X (or Y) axis between the initial and the current point while dragging the gripper.
+     * @return {void}@memberof SplitterComponent
+     */
+    public onMoving(delta: number) {
+        const min = parseInt(this.pane.minSize, 10) || 0;
+        const max = parseInt(this.pane.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
+        const minSibling = parseInt(this.sibling.minSize, 10) || 0;
+        const maxSibling = parseInt(this.sibling.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
+
+        const paneSize = this.initialPaneSize - delta;
+        const siblingSize = this.initialSiblingSize + delta;
+        if (paneSize < min || paneSize > max || siblingSize < minSibling || siblingSize > maxSibling) {
+            return;
+        }
+
+        this.pane.size = paneSize + 'px';
+        this.sibling.size = siblingSize + 'px';
+    }
+
+    /**
+     * This method takes care for assigning an `order` property on each `SplitPaneComponent`.
+     * @private
+     * @return {void}@memberof SplitterComponent
+     */
+    private assignFlexOrder() {
+        let k = 0;
+        this.panes.forEach((pane: SplitPaneComponent) => {
+            pane.order = k;
+            k += 2;
+        });
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.directives.ts b/projects/igniteui-angular/src/lib/splitter/splitter.directives.ts
new file mode 100644
index 00000000000..9e011ffead8
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.directives.ts
@@ -0,0 +1,81 @@
+import {
+    Directive,
+    HostListener,
+    Output, EventEmitter,
+    OnDestroy,
+    AfterViewInit,
+    ElementRef,
+    Inject
+} from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+/**
+ * When applied on a DOM element, this directive provides means for subscribing/unsubscribing for some `PointerEvent` events in order
+ * to facilitate and make the dragging of the `SplitBarComponent` possible.
+ * @export
+ * @class SplitterDirective
+ * @implements AfterViewInit
+ * @implements OnDestroy
+ */
+@Directive({
+    selector: '[splitter]'
+})
+export class SplitterDirective implements AfterViewInit, OnDestroy {
+
+    /**
+     * An event that is emitted whenever the `PointerDown` event is fired on the host element.
+     * @memberof SplitterDirective
+     */
+    @Output()
+    public pointerDown = new EventEmitter<PointerEvent>();
+
+    /**
+     * An event that is emitted whenever the `PointerMove` event is fired on the host element.
+     * @memberof SplitterDirective
+     */
+    @Output()
+    public pointerMove = new EventEmitter<PointerEvent>();
+
+    constructor(@Inject(DOCUMENT) private document, private element: ElementRef) { }
+
+    public ngAfterViewInit(): void {
+        this.element.nativeElement.addEventListener('pointerdown', this.onPointerDown);
+    }
+
+    public ngOnDestroy(): void {
+        this.element.nativeElement.removeEventListener('pointerdown', this.onPointerDown);
+    }
+
+    /**
+     * A method that handles the `PoinerDown` event firing.
+     * @private
+     * @memberof SplitterDirective
+     */
+    private onPointerDown = (event: PointerEvent) => {
+        if (this.document.defaultView) {
+            this.pointerDown.emit(event);
+            this.document.defaultView.addEventListener('pointermove', this.onPointerMove);
+        }
+    }
+
+    /**
+     * A method that handles the `PoinerMove` event firing.
+     * @private
+     * @memberof SplitterDirective
+     */
+    private onPointerMove = (event: PointerEvent) => {
+        event.preventDefault();
+        this.pointerMove.emit(event);
+    }
+
+    /**
+     * Listens for `PointerUp` event on the document.
+     * @return {void}@memberof SplitterDirective
+     */
+    @HostListener('document:pointerup')
+    public onPointerUp() {
+        if (this.document.defaultView) {
+            this.document.defaultView.removeEventListener('pointermove', this.onPointerMove);
+        }
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
new file mode 100644
index 00000000000..22799bd29ed
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SplitBarComponent } from './splitbar/split-bar.component';
+import { SplitPaneComponent } from './splitpane/split-pane.component';
+import { SplitterComponent } from './splitter.component';
+import { SplitterDirective } from './splitter.directives';
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    declarations: [
+        SplitterComponent,
+        SplitPaneComponent,
+        SplitBarComponent,
+        SplitterDirective
+    ],
+    exports: [
+        SplitterComponent,
+        SplitPaneComponent,
+        SplitBarComponent,
+        SplitterDirective
+    ]
+})
+export class SplitterModule { }
diff --git a/projects/igniteui-angular/src/public_api.ts b/projects/igniteui-angular/src/public_api.ts
index 720ee06e21b..120c2568817 100644
--- a/projects/igniteui-angular/src/public_api.ts
+++ b/projects/igniteui-angular/src/public_api.ts
@@ -91,6 +91,7 @@ export * from './lib/tabs/index';
 export * from './lib/time-picker/time-picker.component';
 export * from './lib/toast/toast.component';
 export * from './lib/select/index';
+export * from './lib/splitter/splitter.module';
 
 
 /**
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e76c796b9f3..d8e106a95c3 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -354,9 +354,14 @@ export class AppComponent implements OnInit {
         },
         {
             link: '/slider',
-            icon: 'linear_scale',
+            icon: 'tab',
             name: 'Slider'
         },
+        {
+            link: '/splitter',
+            icon: 'linear_scale',
+            name: 'Splitter'
+        },
         {
             link: '/snackbar',
             icon: 'feedback',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 436538a5c65..d1e60b83431 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -38,6 +38,7 @@ import { NavdrawerSampleComponent } from './navdrawer/navdrawer.sample';
 import { ProgressbarSampleComponent } from './progressbar/progressbar.sample';
 import { RippleSampleComponent } from './ripple/ripple.sample';
 import { SliderSampleComponent } from './slider/slider.sample';
+import { SplitterSampleComponent } from './splitter/slitter.sample';
 import { SnackbarSampleComponent } from './snackbar/snackbar.sample';
 import { ColorsSampleComponent } from './styleguide/colors/color.sample';
 import { ShadowsSampleComponent } from './styleguide/shadows/shadows.sample';
@@ -160,6 +161,7 @@ const components = [
     RippleSampleComponent,
     SelectSampleComponent,
     SliderSampleComponent,
+    SplitterSampleComponent,
     SnackbarSampleComponent,
     BottomNavSampleComponent,
     BottomNavRoutingSampleComponent,
diff --git a/src/app/routing.ts b/src/app/routing.ts
index 2745466630d..3a506d660d2 100644
--- a/src/app/routing.ts
+++ b/src/app/routing.ts
@@ -23,6 +23,7 @@ import { NavdrawerSampleComponent } from './navdrawer/navdrawer.sample';
 import { ProgressbarSampleComponent } from './progressbar/progressbar.sample';
 import { RippleSampleComponent } from './ripple/ripple.sample';
 import { SliderSampleComponent } from './slider/slider.sample';
+import { SplitterSampleComponent } from './splitter/slitter.sample';
 import { SnackbarSampleComponent } from './snackbar/snackbar.sample';
 import { ColorsSampleComponent } from './styleguide/colors/color.sample';
 import { ShadowsSampleComponent } from './styleguide/shadows/shadows.sample';
@@ -250,6 +251,10 @@ const appRoutes = [
         path: 'slider',
         component: SliderSampleComponent
     },
+    {
+        path: 'splitter',
+        component: SplitterSampleComponent
+    },
     {
         path: 'snackbar',
         component: SnackbarSampleComponent
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index abfa6badabb..7a5b2d48eb2 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -32,6 +32,7 @@ import {
     IgxSliderModule,
     IgxSnackbarModule,
     IgxSwitchModule,
+    SplitterModule,
     IgxTabsModule,
     IgxTimePickerModule,
     IgxToastModule,
@@ -74,6 +75,7 @@ const igniteModules = [
     IgxSliderModule,
     IgxSnackbarModule,
     IgxSwitchModule,
+    SplitterModule,
     IgxTabsModule,
     IgxTimePickerModule,
     IgxToastModule,
diff --git a/src/app/splitter/slitter.sample.ts b/src/app/splitter/slitter.sample.ts
new file mode 100644
index 00000000000..987709ffb32
--- /dev/null
+++ b/src/app/splitter/slitter.sample.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-splitter-sample',
+    styleUrls: ['splitter.sample.scss'],
+    templateUrl: 'splitter.sample.html'
+})
+export class SplitterSampleComponent {
+}
diff --git a/src/app/splitter/splitter.sample.html b/src/app/splitter/splitter.sample.html
new file mode 100644
index 00000000000..f7bb22170df
--- /dev/null
+++ b/src/app/splitter/splitter.sample.html
@@ -0,0 +1,19 @@
+<div class="sample-wrapper">
+    <splitter [type]="0">
+        <split-pane>
+            <div style='height:500px;'>
+               Pane 1
+            </div>
+        </split-pane>
+        <split-pane>
+            <div style='height:500px;'>
+                Pane 2
+             </div>
+        </split-pane>
+        <split-pane>
+            <div style='height:500px;'>
+                Pane 3
+             </div>
+        </split-pane>
+    </splitter>
+</div>
diff --git a/src/app/splitter/splitter.sample.scss b/src/app/splitter/splitter.sample.scss
new file mode 100644
index 00000000000..8fc5388db1a
--- /dev/null
+++ b/src/app/splitter/splitter.sample.scss
@@ -0,0 +1,2 @@
+@import '../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities';
+

From 371484ca359ff51cd64f4b6d1f06abdb509b0867 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Wed, 25 Mar 2020 13:47:09 +0200
Subject: [PATCH 02/44] chore(*): Prefix names with 'igx-'.

---
 .../splitbar/split-bar.component.html         |  8 ++---
 .../splitbar/split-bar.component.scss         |  4 +--
 .../splitter/splitbar/split-bar.component.ts  | 13 ++++---
 .../splitpane/split-pane.component.ts         | 27 +++++----------
 .../src/lib/splitter/splitter.component.html  |  6 ++--
 .../src/lib/splitter/splitter.component.ts    | 34 +++++++++----------
 .../src/lib/splitter/splitter.module.ts       | 20 +++++------
 src/app/shared/shared.module.ts               |  4 +--
 src/app/splitter/splitter.sample.html         | 16 ++++-----
 9 files changed, 61 insertions(+), 71 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
index c188c8d4cea..642097a9186 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
@@ -1,5 +1,5 @@
-<div class="split-bar" [style.flex-direction]="direction" splitter (pointerDown)="onPointerDown($event)" (pointerMove)="onPointerMove($event)">
-    <div class="split-bar-indicator"></div>
-    <div class="split-bar-indicator"></div>
-    <div class="split-bar-indicator"></div>
+<div class="igx-split-bar" [style.flex-direction]="direction" splitter (pointerDown)="onPointerDown($event)" (pointerMove)="onPointerMove($event)">
+    <div class="igx-split-bar-indicator"></div>
+    <div class="igx-split-bar-indicator"></div>
+    <div class="igx-split-bar-indicator"></div>
 </div>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
index d28382a0551..7ceb1f6d801 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
@@ -16,7 +16,7 @@ $splitter-dot-size: rem(2px);
 $splitter-dot-border-radius: rem(1px);
 
 
-.split-bar {
+.igx-split-bar {
     display: flex;
     flex-grow: 1;
     justify-content: center;
@@ -27,7 +27,7 @@ $splitter-dot-border-radius: rem(1px);
     border-color: $splitter-border-color;
 }
 
-.split-bar-indicator {
+.igx-split-bar-indicator {
     
     @include square($splitter-dot-size, $splitter-dot-border-radius);
     margin: $splitter-dot-size;
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
index c15da12dfdf..4d8fa70ed8d 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, HostBinding, EventEmitter, Output } from '@angular/core';
 import { SplitterType } from '../splitter.component';
-import { SplitPaneComponent } from '../splitpane/split-pane.component';
+import { IgxSplitterPaneComponent } from '../splitpane/split-pane.component';
 
 /**
  * Provides reference to `SplitBarComponent` component.
@@ -9,16 +9,15 @@ import { SplitPaneComponent } from '../splitpane/split-pane.component';
  * @class SplitBarComponent
  */
 @Component({
-    selector: 'split-bar',
+    selector: 'igx-split-bar',
     styleUrls: ['./split-bar.component.scss'],
     templateUrl: './split-bar.component.html'
 })
-export class SplitBarComponent {
+export class IgxSplitBarComponent {
 
     /**
-     * Sets/gets `SplitterComponent` orientation.
+     * Sets/gets `IgxSplitBarComponent` orientation.
      * @type SplitterType
-     * @memberof SplitBarComponent
      */
     @Input()
     public type: SplitterType = SplitterType.Vertical;
@@ -28,14 +27,14 @@ export class SplitBarComponent {
      * @memberof SplitBarComponent
      */
     @Input()
-    public pane!: SplitPaneComponent;
+    public pane!: IgxSplitterPaneComponent;
 
     /**
      * An event that is emitted whenever we start dragging the current `SplitBarComponent`.
      * @memberof SplitBarComponent
      */
     @Output()
-    public moveStart = new EventEmitter<SplitPaneComponent>();
+    public moveStart = new EventEmitter<IgxSplitterPaneComponent>();
 
     /**
      * An event that is emitted while we are dragging the current `SplitBarComponent`.
diff --git a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
index 856746c14e8..163c6e86864 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
@@ -7,35 +7,31 @@ import { Component, HostBinding, Input, ElementRef } from '@angular/core';
  * @class SplitPaneComponent
  */
 @Component({
-    selector: 'split-pane',
+    selector: 'igx-splitter-pane',
     templateUrl: './split-pane.component.html'
 })
-export class SplitPaneComponent {
+export class IgxSplitterPaneComponent {
 
     /**
-     * Sets/gets the size of the current `SplitPaneComponent`.
-     * @memberof SplitPaneComponent
+     * Sets/gets the size of the current `IgxSplitterPaneComponent`.
      */
     @Input()
     public size = 'auto';
 
     /**
-     * Sets/gets the minimum allowable size of the current `SplitPaneComponent`.
-     * @memberof SplitPaneComponent
+     * Sets/gets the minimum allowable size of the current `IgxSplitterPaneComponent`.
      */
     @Input()
     public minSize!: string;
 
     /**
-     * Sets/gets the maximum allowable size of the current `SplitPaneComponent`.
-     * @memberof SplitPaneComponent
+     * Sets/gets the maximum allowable size of the current `IgxSplitterPaneComponent`.
      */
     @Input()
     public maxSize!: string;
 
     /**
-     * Sets/gets the `order` property of the current `SplitPaneComponent`.
-     * @memberof SplitPaneComponent
+     * Sets/gets the `order` property of the current `IgxSplitterPaneComponent`.
      */
     @Input()
     @HostBinding('style.order')
@@ -45,22 +41,19 @@ export class SplitPaneComponent {
      * Gets the host native element.
      * @readonly
      * @type *
-     * @memberof SplitPaneComponent
      */
     public get element(): any {
         return this.el.nativeElement;
     }
 
     /**
-     * Sets/gets the `overflow` property of the current `SplitPaneComponent`.
-     * @memberof SplitPaneComponent
+     * Sets/gets the `overflow` property of the current `IgxSplitterPaneComponent`.
      */
     @HostBinding('style.overflow')
     public overflow = 'auto';
 
     /**
-     * Sets/gets the `minHeight` and `minWidth` propertis of the current `SplitPaneComponent`.
-     * @memberof SplitPaneComponent
+     * Sets/gets the `minHeight` and `minWidth` propertis of the current `IgxSplitterPaneComponent`.
      */
     @HostBinding('style.min-height')
     @HostBinding('style.min-width')
@@ -68,16 +61,14 @@ export class SplitPaneComponent {
 
     /**
      * Sets/gets the `maxHeight` and `maxWidth` propertis of the current `SplitPaneComponent`.
-     * @memberof SplitPaneComponent
      */
     @HostBinding('style.max-height')
     @HostBinding('style.max-width')
     public maxHeight = '100%';
 
     /**
-     * Gets the `flex` property of the current `SplitPaneComponent`.
+     * Gets the `flex` property of the current `IgxSplitterPaneComponent`.
      * @readonly
-     * @memberof SplitPaneComponent
      */
     @HostBinding('style.flex')
     public get flex() {
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.html b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
index 00b400b7260..8391d558731 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
@@ -1,9 +1,9 @@
-<ng-content select="split-pane"></ng-content>
+<ng-content select="igx-splitter-pane"></ng-content>
 <ng-container *ngFor="let pane of panes; let last = last">
-    <split-bar *ngIf="!last" [style.order]="pane.order + 1"
+    <igx-split-bar *ngIf="!last" [style.order]="pane.order + 1"
                     [type]="type"
                     [pane]="pane"
                     (moveStart)="onMoveStart($event)"
                     (moving)="onMoving($event)">
-    </split-bar>
+    </igx-split-bar>
 </ng-container>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index 4aa37de9f4d..682d151cf09 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -1,5 +1,5 @@
 import { Component, QueryList, Input, ContentChildren, AfterContentInit, HostBinding, Output, EventEmitter } from '@angular/core';
-import { SplitPaneComponent } from './splitpane/split-pane.component';
+import { IgxSplitterPaneComponent } from './splitpane/split-pane.component';
 
 /**
  * An enumeration that defines the `SplitterComponent` panes orientation.
@@ -20,10 +20,10 @@ export enum SplitterType {
  * @implements AfterContentInit
  */
 @Component({
-    selector: 'splitter',
+    selector: 'igx-splitter',
     templateUrl: './splitter.component.html'
 })
-export class SplitterComponent implements AfterContentInit {
+export class IgxSplitterComponent implements AfterContentInit {
 
     /**
      * Sets/gets `SplitterComponent` orientation.
@@ -34,14 +34,14 @@ export class SplitterComponent implements AfterContentInit {
     public type: SplitterType = SplitterType.Vertical;
 
     @Output()
-    public panesChange = new EventEmitter<SplitPaneComponent[]>();
+    public panesChange = new EventEmitter<IgxSplitterPaneComponent[]>();
 
     /**
-     * A list of all `SplitPaneComponent` items.
+     * A list of all `IgxSplitterPaneComponent` items.
      * @memberof SplitterComponent
      */
-    @ContentChildren(SplitPaneComponent, { read: SplitPaneComponent })
-    public panes!: QueryList<SplitPaneComponent>;
+    @ContentChildren(IgxSplitterPaneComponent, { read: IgxSplitterPaneComponent })
+    public panes!: QueryList<IgxSplitterPaneComponent>;
 
     /**
      * Gets the `flex-direction` property of the current `SplitterComponent`.
@@ -69,32 +69,32 @@ export class SplitterComponent implements AfterContentInit {
     public display = 'flex';
 
     /**
-     * A field that holds the initial size of the main `SplitPaneComponent` in each couple of panes devided by a gripper.
+     * A field that holds the initial size of the main `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
      * @private
      * @memberof SplitterComponent
      */
     private initialPaneSize!: number;
 
     /**
-     * A field that holds the initial size of the sibling `SplitPaneComponent` in each couple of panes devided by a gripper.
+     * A field that holds the initial size of the sibling `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
      * @private
      * @memberof SplitterComponent
      */
     private initialSiblingSize!: number;
 
     /**
-     * The main `SplitPaneComponent` in each couple of panes devided by a gripper.
+     * The main `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
      * @private
      * @memberof SplitterComponent
      */
-    private pane!: SplitPaneComponent;
+    private pane!: IgxSplitterPaneComponent;
 
     /**
-     * The sibling `SplitPaneComponent` in each couple of panes devided by a gripper.
+     * The sibling `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
      * @private
      * @memberof SplitterComponent
      */
-    private sibling!: SplitPaneComponent;
+    private sibling!: IgxSplitterPaneComponent;
 
     public ngAfterContentInit(): void {
         this.assignFlexOrder();
@@ -108,10 +108,10 @@ export class SplitterComponent implements AfterContentInit {
 
     /**
      * This method performs some initialization logic when the user starts dragging the gripper between each couple of panes.
-     * @param  {SplitPaneComponent} pane The main `SplitPaneComponent` associated with the currently dragged `SplitBarComponent`.
+     * @param  {IgxSplitterPaneComponent} pane The main `IgxSplitterPaneComponent` associated with the currently dragged `SplitBarComponent`.
      * @return {void}@memberof SplitterComponent
      */
-    public onMoveStart(pane: SplitPaneComponent) {
+    public onMoveStart(pane: IgxSplitterPaneComponent) {
         const panes = this.panes.toArray();
         this.pane = pane;
         this.sibling = panes[panes.indexOf(this.pane) + 1];
@@ -151,13 +151,13 @@ export class SplitterComponent implements AfterContentInit {
     }
 
     /**
-     * This method takes care for assigning an `order` property on each `SplitPaneComponent`.
+     * This method takes care for assigning an `order` property on each `IgxSplitterPaneComponent`.
      * @private
      * @return {void}@memberof SplitterComponent
      */
     private assignFlexOrder() {
         let k = 0;
-        this.panes.forEach((pane: SplitPaneComponent) => {
+        this.panes.forEach((pane: IgxSplitterPaneComponent) => {
             pane.order = k;
             k += 2;
         });
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
index 22799bd29ed..7f567f79872 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
@@ -1,8 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { SplitBarComponent } from './splitbar/split-bar.component';
-import { SplitPaneComponent } from './splitpane/split-pane.component';
-import { SplitterComponent } from './splitter.component';
+import { IgxSplitBarComponent } from './splitbar/split-bar.component';
+import { IgxSplitterPaneComponent } from './splitpane/split-pane.component';
+import { IgxSplitterComponent } from './splitter.component';
 import { SplitterDirective } from './splitter.directives';
 
 @NgModule({
@@ -10,16 +10,16 @@ import { SplitterDirective } from './splitter.directives';
         CommonModule
     ],
     declarations: [
-        SplitterComponent,
-        SplitPaneComponent,
-        SplitBarComponent,
+        IgxSplitterComponent,
+        IgxSplitterPaneComponent,
+        IgxSplitBarComponent,
         SplitterDirective
     ],
     exports: [
-        SplitterComponent,
-        SplitPaneComponent,
-        SplitBarComponent,
+        IgxSplitterComponent,
+        IgxSplitterPaneComponent,
+        IgxSplitBarComponent,
         SplitterDirective
     ]
 })
-export class SplitterModule { }
+export class IgxSplitterModule { }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 7a5b2d48eb2..990f2026a79 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -32,7 +32,7 @@ import {
     IgxSliderModule,
     IgxSnackbarModule,
     IgxSwitchModule,
-    SplitterModule,
+    IgxSplitterModule,
     IgxTabsModule,
     IgxTimePickerModule,
     IgxToastModule,
@@ -75,7 +75,7 @@ const igniteModules = [
     IgxSliderModule,
     IgxSnackbarModule,
     IgxSwitchModule,
-    SplitterModule,
+    IgxSplitterModule,
     IgxTabsModule,
     IgxTimePickerModule,
     IgxToastModule,
diff --git a/src/app/splitter/splitter.sample.html b/src/app/splitter/splitter.sample.html
index f7bb22170df..d8ad44149f8 100644
--- a/src/app/splitter/splitter.sample.html
+++ b/src/app/splitter/splitter.sample.html
@@ -1,19 +1,19 @@
 <div class="sample-wrapper">
-    <splitter [type]="0">
-        <split-pane>
+    <igx-splitter [type]="0">
+        <igx-splitter-pane>
             <div style='height:500px;'>
                Pane 1
             </div>
-        </split-pane>
-        <split-pane>
+        </igx-splitter-pane>
+        <igx-splitter-pane>
             <div style='height:500px;'>
                 Pane 2
              </div>
-        </split-pane>
-        <split-pane>
+        </igx-splitter-pane>
+        <igx-splitter-pane>
             <div style='height:500px;'>
                 Pane 3
              </div>
-        </split-pane>
-    </splitter>
+        </igx-splitter-pane>
+    </igx-splitter>
 </div>

From b1235825133f9f1ac8cfe6a64ef6ce042b1b79dc Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 26 Mar 2020 12:56:33 +0200
Subject: [PATCH 03/44] chore(*): Rename styles.

---
 .../splitbar/split-bar.component.html         |  8 ++---
 .../splitbar/split-bar.component.scss         | 29 +++++++------------
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
index 642097a9186..1bfe1a4ec63 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
@@ -1,5 +1,5 @@
-<div class="igx-split-bar" [style.flex-direction]="direction" splitter (pointerDown)="onPointerDown($event)" (pointerMove)="onPointerMove($event)">
-    <div class="igx-split-bar-indicator"></div>
-    <div class="igx-split-bar-indicator"></div>
-    <div class="igx-split-bar-indicator"></div>
+<div class="igx-splitter-bar" [style.flex-direction]="direction" splitter (pointerDown)="onPointerDown($event)" (pointerMove)="onPointerMove($event)">
+    <div class="igx-splitter-bar-indicator"></div>
+    <div class="igx-splitter-bar-indicator"></div>
+    <div class="igx-splitter-bar-indicator"></div>
 </div>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
index 7ceb1f6d801..71a1f9f785e 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
@@ -1,22 +1,13 @@
 
-@mixin square($size, $radius: 0) {
-    width: $size;
-    height: $size;
-
-    @if $radius != 0 {
-        border-radius: $radius;
-    }
-}
-
 $splitter-color: rgba(235,235,235,0.8);
-$splitter-border-width: (1);
-$splitter-border-style: (solid);
+$splitter-border-width: 1px;
+$splitter-border-style: solid;
 $splitter-border-color: ($splitter-color);
-$splitter-dot-size: rem(2px);
-$splitter-dot-border-radius: rem(1px);
+$splitter-dot-size: .125rem;
+$splitter-dot-border-radius: .0625rem;
 
 
-.igx-split-bar {
+.igx-splitter-bar {
     display: flex;
     flex-grow: 1;
     justify-content: center;
@@ -27,10 +18,10 @@ $splitter-dot-border-radius: rem(1px);
     border-color: $splitter-border-color;
 }
 
-.igx-split-bar-indicator {
-    
-    @include square($splitter-dot-size, $splitter-dot-border-radius);
+.igx-splitter-bar-indicator {
+    width: $splitter-dot-size;
+    height: $splitter-dot-size;
+    border-radius: $splitter-dot-border-radius;
     margin: $splitter-dot-size;
-    background: 'black';
-    //background: $main-color-4;
+   background: grey;
 }
\ No newline at end of file

From f824cf42f64701d5555ba630a1db1a5e9f8371bd Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 26 Mar 2020 14:39:05 +0200
Subject: [PATCH 04/44] chore(*): Refactor styles to accomodate expanders and
 show a handle for resize in the middle.

---
 .../splitbar/split-bar.component.html         |  8 ++++++--
 .../splitbar/split-bar.component.scss         | 19 ++++++++++++-------
 .../src/lib/splitter/splitter.module.ts       |  3 ++-
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
index 1bfe1a4ec63..a51e3552053 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
@@ -1,5 +1,9 @@
 <div class="igx-splitter-bar" [style.flex-direction]="direction" splitter (pointerDown)="onPointerDown($event)" (pointerMove)="onPointerMove($event)">
+    <div class="igx-splitter-bar-expander">
+        <!-- <igx-icon fontSet="material">arrow_right</igx-icon> -->
+    </div>    
     <div class="igx-splitter-bar-indicator"></div>
-    <div class="igx-splitter-bar-indicator"></div>
-    <div class="igx-splitter-bar-indicator"></div>
+    <div class="igx-splitter-bar-expander">
+        <!-- <igx-icon fontSet="material">arrow_left</igx-icon> -->
+    </div>
 </div>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
index 71a1f9f785e..cc3b9c34406 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
@@ -3,8 +3,9 @@ $splitter-color: rgba(235,235,235,0.8);
 $splitter-border-width: 1px;
 $splitter-border-style: solid;
 $splitter-border-color: ($splitter-color);
-$splitter-dot-size: .125rem;
-$splitter-dot-border-radius: .0625rem;
+$splitter-indicator-size: .125rem;
+$splitter-size: 0.5rem;
+
 
 
 .igx-splitter-bar {
@@ -16,12 +17,16 @@ $splitter-dot-border-radius: .0625rem;
     border-width: $splitter-border-width;
     border-style: $splitter-border-style;
     border-color: $splitter-border-color;
+    width: $splitter-size;
+
+    .igx-icon {
+        color: white;
+    }
 }
 
 .igx-splitter-bar-indicator {
-    width: $splitter-dot-size;
-    height: $splitter-dot-size;
-    border-radius: $splitter-dot-border-radius;
-    margin: $splitter-dot-size;
-   background: grey;
+    width: $splitter-indicator-size;
+    height: 25%;
+    margin: $splitter-indicator-size;
+    background: white;
 }
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
index 7f567f79872..0c81a5a42d4 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
@@ -4,10 +4,11 @@ import { IgxSplitBarComponent } from './splitbar/split-bar.component';
 import { IgxSplitterPaneComponent } from './splitpane/split-pane.component';
 import { IgxSplitterComponent } from './splitter.component';
 import { SplitterDirective } from './splitter.directives';
+import { IgxIconModule } from '../icon';
 
 @NgModule({
     imports: [
-        CommonModule
+        CommonModule, IgxIconModule
     ],
     declarations: [
         IgxSplitterComponent,

From 2e732e839ff524340a871d39eb1308ebcd97a78c Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 26 Mar 2020 15:11:50 +0200
Subject: [PATCH 05/44] chore(*): Tweak styles for vertical/horziontal type.
 Add sample for horizontal.

---
 .../splitbar/split-bar.component.html         |  7 +++++--
 .../splitbar/split-bar.component.scss         | 16 +++++++++++----
 .../splitter/splitbar/split-bar.component.ts  |  1 -
 src/app/splitter/splitter.sample.html         | 20 +++++++++++++++++++
 4 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
index a51e3552053..ca790f7694a 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
@@ -1,8 +1,11 @@
-<div class="igx-splitter-bar" [style.flex-direction]="direction" splitter (pointerDown)="onPointerDown($event)" (pointerMove)="onPointerMove($event)">
+<div class="igx-splitter-bar" [style.flex-direction]="direction">
     <div class="igx-splitter-bar-expander">
         <!-- <igx-icon fontSet="material">arrow_right</igx-icon> -->
     </div>    
-    <div class="igx-splitter-bar-indicator"></div>
+    <div class="igx-splitter-bar-indicator" [style.cursor]='cursor'
+    [class.igx-splitter-bar-indicator-vertical]='type === 0'
+    [class.igx-splitter-bar-indicator-horizontal]='type === 1'
+    splitter (pointerDown)="onPointerDown($event)" (pointerMove)="onPointerMove($event)"></div>
     <div class="igx-splitter-bar-expander">
         <!-- <igx-icon fontSet="material">arrow_left</igx-icon> -->
     </div>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
index cc3b9c34406..ff396de832b 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
@@ -1,10 +1,9 @@
 
-$splitter-color: rgba(235,235,235,0.8);
+$splitter-color: rgba(189,189,189,0.8);
 $splitter-border-width: 1px;
 $splitter-border-style: solid;
 $splitter-border-color: ($splitter-color);
 $splitter-indicator-size: .125rem;
-$splitter-size: 0.5rem;
 
 
 
@@ -17,7 +16,6 @@ $splitter-size: 0.5rem;
     border-width: $splitter-border-width;
     border-style: $splitter-border-style;
     border-color: $splitter-border-color;
-    width: $splitter-size;
 
     .igx-icon {
         color: white;
@@ -25,8 +23,18 @@ $splitter-size: 0.5rem;
 }
 
 .igx-splitter-bar-indicator {
-    width: $splitter-indicator-size;
+    margin: $splitter-indicator-size;
+    background: white;
+}
+
+.igx-splitter-bar-indicator-vertical {
     height: 25%;
+    width: 100%;
     margin: $splitter-indicator-size;
     background: white;
+}
+
+.igx-splitter-bar-indicator-horizontal {
+    height: 100%;
+    width: 25%;
 }
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
index 4d8fa70ed8d..056961aa239 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
@@ -49,7 +49,6 @@ export class IgxSplitBarComponent {
      * @type string
      * @memberof SplitBarComponent
      */
-    @HostBinding('style.cursor')
     public get cursor(): string {
         return this.type === SplitterType.Horizontal ? 'col-resize' : 'row-resize';
     }
diff --git a/src/app/splitter/splitter.sample.html b/src/app/splitter/splitter.sample.html
index d8ad44149f8..ce8cb5d63fe 100644
--- a/src/app/splitter/splitter.sample.html
+++ b/src/app/splitter/splitter.sample.html
@@ -1,3 +1,4 @@
+<div>Vertical</div>
 <div class="sample-wrapper">
     <igx-splitter [type]="0">
         <igx-splitter-pane>
@@ -16,4 +17,23 @@
              </div>
         </igx-splitter-pane>
     </igx-splitter>
+
+<div>Horizontal</div>
+    <igx-splitter [type]="1">
+        <igx-splitter-pane>
+            <div style='width:200px; height:100px;'>
+               Pane 1
+            </div>
+        </igx-splitter-pane>
+        <igx-splitter-pane>
+            <div style='width:200px;height:100px;'>
+                Pane 2
+             </div>
+        </igx-splitter-pane>
+        <igx-splitter-pane>
+            <div style='width:200px;height:100px;'>
+                Pane 3
+             </div>
+        </igx-splitter-pane>
+    </igx-splitter>
 </div>

From 44b4ef39ef4b62255cc61b0f81e247a1cb73eccc Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 26 Mar 2020 16:52:50 +0200
Subject: [PATCH 06/44] chore(*): Use igxDrag to handle drag/drop. Remove
 redundant directive.

---
 .../splitbar/split-bar.component.html         |  8 +-
 .../splitter/splitbar/split-bar.component.ts  | 25 ++++++
 .../src/lib/splitter/splitter.directives.ts   | 81 -------------------
 .../src/lib/splitter/splitter.module.ts       | 10 +--
 4 files changed, 35 insertions(+), 89 deletions(-)
 delete mode 100644 projects/igniteui-angular/src/lib/splitter/splitter.directives.ts

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
index ca790f7694a..e7de7045d79 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
@@ -1,11 +1,15 @@
-<div class="igx-splitter-bar" [style.flex-direction]="direction">
+<div class="igx-splitter-bar" [style.flex-direction]="direction" igxDrag [ghost]="false"
+(dragStart)='onDragStart($event)'
+(dragMove)="onDragMove($event)"
+(dragEnd)="onDragEnd($event)">
     <div class="igx-splitter-bar-expander">
         <!-- <igx-icon fontSet="material">arrow_right</igx-icon> -->
     </div>    
     <div class="igx-splitter-bar-indicator" [style.cursor]='cursor'
     [class.igx-splitter-bar-indicator-vertical]='type === 0'
     [class.igx-splitter-bar-indicator-horizontal]='type === 1'
-    splitter (pointerDown)="onPointerDown($event)" (pointerMove)="onPointerMove($event)"></div>
+    igxDragHandle
+    ></div>
     <div class="igx-splitter-bar-expander">
         <!-- <igx-icon fontSet="material">arrow_left</igx-icon> -->
     </div>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
index 056961aa239..abb9dbe95a4 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, HostBinding, EventEmitter, Output } from '@angular/core';
 import { SplitterType } from '../splitter.component';
 import { IgxSplitterPaneComponent } from '../splitpane/split-pane.component';
+import { IDragMoveEventArgs, IDragStartEventArgs } from '../../directives/drag-drop/drag-drop.directive';
 
 /**
  * Provides reference to `SplitBarComponent` component.
@@ -96,4 +97,28 @@ export class IgxSplitBarComponent {
         const delta = this.startPoint - (this.type === SplitterType.Horizontal ? event.clientX : event.clientY);
         this.moving.emit(delta);
     }
+
+    public onDragStart(event: IDragStartEventArgs) {
+        this.startPoint = this.type === SplitterType.Horizontal ? event.startX : event.startY;
+        this.moveStart.emit(this.pane);
+    }
+
+    public onDragMove(event: IDragMoveEventArgs) {
+        const isHorizontal = this.type === SplitterType.Horizontal;
+        const curr =  isHorizontal ? event.pageX : event.pageY;     
+        if (isHorizontal) {
+            event.nextPageY = event.pageY;
+        } else {
+            event.nextPageX = event.pageX;
+        }
+        const delta = this.startPoint - curr;
+        if (delta !== 0 ) {
+            this.moving.emit(delta);
+        }
+    }
+
+    public onDragEnd(event: IDragMoveEventArgs) {
+        event.owner.element.nativeElement.style.transform = '';
+    }
+
 }
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.directives.ts b/projects/igniteui-angular/src/lib/splitter/splitter.directives.ts
deleted file mode 100644
index 9e011ffead8..00000000000
--- a/projects/igniteui-angular/src/lib/splitter/splitter.directives.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import {
-    Directive,
-    HostListener,
-    Output, EventEmitter,
-    OnDestroy,
-    AfterViewInit,
-    ElementRef,
-    Inject
-} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-
-/**
- * When applied on a DOM element, this directive provides means for subscribing/unsubscribing for some `PointerEvent` events in order
- * to facilitate and make the dragging of the `SplitBarComponent` possible.
- * @export
- * @class SplitterDirective
- * @implements AfterViewInit
- * @implements OnDestroy
- */
-@Directive({
-    selector: '[splitter]'
-})
-export class SplitterDirective implements AfterViewInit, OnDestroy {
-
-    /**
-     * An event that is emitted whenever the `PointerDown` event is fired on the host element.
-     * @memberof SplitterDirective
-     */
-    @Output()
-    public pointerDown = new EventEmitter<PointerEvent>();
-
-    /**
-     * An event that is emitted whenever the `PointerMove` event is fired on the host element.
-     * @memberof SplitterDirective
-     */
-    @Output()
-    public pointerMove = new EventEmitter<PointerEvent>();
-
-    constructor(@Inject(DOCUMENT) private document, private element: ElementRef) { }
-
-    public ngAfterViewInit(): void {
-        this.element.nativeElement.addEventListener('pointerdown', this.onPointerDown);
-    }
-
-    public ngOnDestroy(): void {
-        this.element.nativeElement.removeEventListener('pointerdown', this.onPointerDown);
-    }
-
-    /**
-     * A method that handles the `PoinerDown` event firing.
-     * @private
-     * @memberof SplitterDirective
-     */
-    private onPointerDown = (event: PointerEvent) => {
-        if (this.document.defaultView) {
-            this.pointerDown.emit(event);
-            this.document.defaultView.addEventListener('pointermove', this.onPointerMove);
-        }
-    }
-
-    /**
-     * A method that handles the `PoinerMove` event firing.
-     * @private
-     * @memberof SplitterDirective
-     */
-    private onPointerMove = (event: PointerEvent) => {
-        event.preventDefault();
-        this.pointerMove.emit(event);
-    }
-
-    /**
-     * Listens for `PointerUp` event on the document.
-     * @return {void}@memberof SplitterDirective
-     */
-    @HostListener('document:pointerup')
-    public onPointerUp() {
-        if (this.document.defaultView) {
-            this.document.defaultView.removeEventListener('pointermove', this.onPointerMove);
-        }
-    }
-}
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
index 0c81a5a42d4..f3ebd5f9fa8 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
@@ -3,24 +3,22 @@ import { CommonModule } from '@angular/common';
 import { IgxSplitBarComponent } from './splitbar/split-bar.component';
 import { IgxSplitterPaneComponent } from './splitpane/split-pane.component';
 import { IgxSplitterComponent } from './splitter.component';
-import { SplitterDirective } from './splitter.directives';
 import { IgxIconModule } from '../icon';
+import { IgxDragDropModule } from '../directives/drag-drop/drag-drop.directive';
 
 @NgModule({
     imports: [
-        CommonModule, IgxIconModule
+        CommonModule, IgxIconModule, IgxDragDropModule
     ],
     declarations: [
         IgxSplitterComponent,
         IgxSplitterPaneComponent,
-        IgxSplitBarComponent,
-        SplitterDirective
+        IgxSplitBarComponent
     ],
     exports: [
         IgxSplitterComponent,
         IgxSplitterPaneComponent,
-        IgxSplitBarComponent,
-        SplitterDirective
+        IgxSplitBarComponent
     ]
 })
 export class IgxSplitterModule { }

From de1fe1d0cf159536cd5f82e15b837b642597c446 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 26 Mar 2020 16:58:16 +0200
Subject: [PATCH 07/44] chore(*): Trigger change while moving.

---
 .../src/lib/splitter/splitbar/split-bar.component.ts   |  1 +
 .../src/lib/splitter/splitpane/split-pane.component.ts | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
index abb9dbe95a4..4a84291e129 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
@@ -114,6 +114,7 @@ export class IgxSplitBarComponent {
         const delta = this.startPoint - curr;
         if (delta !== 0 ) {
             this.moving.emit(delta);
+            event.owner.element.nativeElement.style.transform = ''
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
index 163c6e86864..d75438de04c 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
@@ -12,11 +12,19 @@ import { Component, HostBinding, Input, ElementRef } from '@angular/core';
 })
 export class IgxSplitterPaneComponent {
 
+    public _size = 'auto'
     /**
      * Sets/gets the size of the current `IgxSplitterPaneComponent`.
      */
     @Input()
-    public size = 'auto';
+    get size() {
+        return this._size;
+    }
+
+    set size(value) {
+        this._size = value;
+        this.el.nativeElement.style.flex = this.flex;
+    }
 
     /**
      * Sets/gets the minimum allowable size of the current `IgxSplitterPaneComponent`.

From 28e31d64e7c6cf8a9122cae02e26eac16d51fcea Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 26 Mar 2020 17:07:59 +0200
Subject: [PATCH 08/44] chore(*): Cancel event to prevent element misalingment.
 Remove unneccessary handler.

---
 .../src/lib/splitter/splitbar/split-bar.component.html     | 3 +--
 .../src/lib/splitter/splitbar/split-bar.component.ts       | 7 ++-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
index e7de7045d79..c8953496e06 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
@@ -1,7 +1,6 @@
 <div class="igx-splitter-bar" [style.flex-direction]="direction" igxDrag [ghost]="false"
 (dragStart)='onDragStart($event)'
-(dragMove)="onDragMove($event)"
-(dragEnd)="onDragEnd($event)">
+(dragMove)="onDragMove($event)">
     <div class="igx-splitter-bar-expander">
         <!-- <igx-icon fontSet="material">arrow_right</igx-icon> -->
     </div>    
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
index 4a84291e129..65e795b0ca3 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
@@ -114,12 +114,9 @@ export class IgxSplitBarComponent {
         const delta = this.startPoint - curr;
         if (delta !== 0 ) {
             this.moving.emit(delta);
-            event.owner.element.nativeElement.style.transform = ''
+            event.cancel = true;
+            event.owner.element.nativeElement.style.transform = '';
         }
     }
 
-    public onDragEnd(event: IDragMoveEventArgs) {
-        event.owner.element.nativeElement.style.transform = '';
-    }
-
 }

From f68b1f9078a33c9979f3c96d349e939f061b4c80 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 26 Mar 2020 19:09:08 +0200
Subject: [PATCH 09/44] chore(*): Move styles.

---
 .../splitter/_splitter-component.scss         | 28 ++++++++
 .../components/splitter/_splitter-theme.scss  | 67 +++++++++++++++++++
 .../src/lib/core/styles/themes/_core.scss     |  1 +
 .../src/lib/core/styles/themes/_index.scss    | 10 +++
 .../splitbar/split-bar.component.html         |  8 +--
 .../splitbar/split-bar.component.scss         | 40 -----------
 .../splitter/splitbar/split-bar.component.ts  |  1 -
 7 files changed, 110 insertions(+), 45 deletions(-)
 create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss
 create mode 100644 projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
 delete mode 100644 projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss
new file mode 100644
index 00000000000..1ee5c655a1a
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss
@@ -0,0 +1,28 @@
+/// @group components
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @requires {mixin} bem-block	/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem	/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod	/// @requires {mixin} bem-mod
+////
+
+@include b(igx-splitter) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+
+    @include e(bar) {
+        @extend %igx-splitter-bar !optional;
+    }
+
+    @include e(bar-handle) {
+        @extend %igx-splitter-bar-handle !optional;
+    }
+
+    @include e(handle-vertical) {
+        @extend %igx-splitter-handle-vertical !optional;
+    }
+
+    @include e(handle-horizontal) {
+        @extend %igx-splitter-handle-horizontal !optional;
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
new file mode 100644
index 00000000000..76a42e674ad
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -0,0 +1,67 @@
+////
+/// @group themes
+@function igx-splitter-theme(
+    $palette: $default-palette,
+    $schema: $light-schema,
+    $elevations: $elevations,
+
+    $border-radius: null,
+    $button-shadow: null,
+) {
+    $name: 'igx-splitter';
+    $splitter-schema: ();
+
+    $theme: apply-palette($splitter-schema, $palette);
+
+    @return extend($theme, (
+        name: $name,
+        palette: $palette,
+    ));
+}
+
+/// @param {Map} $theme - The theme used to style the component.
+/// @requires {mixin} igx-root-css-vars
+/// @requires rem
+/// @requires --var
+@mixin igx-splitter($theme) {
+    @include igx-root-css-vars($theme);
+
+    
+    $splitter-color: rgba(189,189,189,0.8);
+    $splitter-border-width: 1px;
+    $splitter-border-style: solid;
+    $splitter-border-color: ($splitter-color);
+    $splitter-indicator-size: .125rem;
+
+    %igx-splitter-bar {
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+        align-items: center;
+        background: $splitter-color;
+        border-width: $splitter-border-width;
+        border-style: $splitter-border-style;
+        border-color: $splitter-border-color;
+    
+        .igx-icon {
+            color: white;
+        }
+    }
+
+    %igx-splitter-bar-handle {
+        margin: $splitter-indicator-size;
+        background: white;
+    }
+
+    %igx-splitter-handle-vertical {
+        height: 25%;
+        width: 100%;
+        margin: $splitter-indicator-size;
+        background: white;
+    }
+    
+    %igx-splitter-handle-horizontal {
+        height: 100%;
+        width: 25%;
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
index 8fc3548ad05..8e335642c48 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss
@@ -53,6 +53,7 @@
 @import '../components/radio/radio-component';
 @import '../components/scrollbar/scrollbar-component';
 @import '../components/slider/slider-component';
+@import '../components/splitter/splitter-component';
 @import '../components/snackbar/snackbar-component';
 @import '../components/switch/switch-component';
 @import '../components/tabs/tabs-component';
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
index b8eb967d04d..c66cdf7932a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
@@ -38,6 +38,7 @@
 @import '../components/switch/switch-theme';
 @import '../components/snackbar/snackbar-theme';
 @import '../components/slider/slider-theme';
+@import '../components/splitter/splitter-theme';
 @import '../components/ripple/ripple-theme';
 @import '../components/radio/radio-theme';
 @import '../components/progress/progress-theme';
@@ -198,6 +199,15 @@
         ));
     }
 
+    @if not(index($exclude, 'igx-splitter')) {
+        @include igx-splitter(igx-splitter-theme(
+            $palette,
+            $schema,
+            $border-radius: $roundness,
+            $button-shadow: if($elevation == false, none, null),
+        ));
+    }
+
     @if not(index($exclude, 'igx-checkbox')) {
         @include igx-checkbox(igx-checkbox-theme(
             $palette,
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
index c8953496e06..7e90538892e 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
@@ -1,12 +1,12 @@
-<div class="igx-splitter-bar" [style.flex-direction]="direction" igxDrag [ghost]="false"
+<div class="igx-splitter__bar" [style.flex-direction]="direction" igxDrag [ghost]="false"
 (dragStart)='onDragStart($event)'
 (dragMove)="onDragMove($event)">
     <div class="igx-splitter-bar-expander">
         <!-- <igx-icon fontSet="material">arrow_right</igx-icon> -->
     </div>    
-    <div class="igx-splitter-bar-indicator" [style.cursor]='cursor'
-    [class.igx-splitter-bar-indicator-vertical]='type === 0'
-    [class.igx-splitter-bar-indicator-horizontal]='type === 1'
+    <div class="igx-splitter__bar-handle" [style.cursor]='cursor'
+    [class.igx-splitter__handle-vertical]='type === 0'
+    [class.igx-splitter__handle-horizontal]='type === 1'
     igxDragHandle
     ></div>
     <div class="igx-splitter-bar-expander">
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
deleted file mode 100644
index ff396de832b..00000000000
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-
-$splitter-color: rgba(189,189,189,0.8);
-$splitter-border-width: 1px;
-$splitter-border-style: solid;
-$splitter-border-color: ($splitter-color);
-$splitter-indicator-size: .125rem;
-
-
-
-.igx-splitter-bar {
-    display: flex;
-    flex-grow: 1;
-    justify-content: center;
-    align-items: center;
-    background: $splitter-color;
-    border-width: $splitter-border-width;
-    border-style: $splitter-border-style;
-    border-color: $splitter-border-color;
-
-    .igx-icon {
-        color: white;
-    }
-}
-
-.igx-splitter-bar-indicator {
-    margin: $splitter-indicator-size;
-    background: white;
-}
-
-.igx-splitter-bar-indicator-vertical {
-    height: 25%;
-    width: 100%;
-    margin: $splitter-indicator-size;
-    background: white;
-}
-
-.igx-splitter-bar-indicator-horizontal {
-    height: 100%;
-    width: 25%;
-}
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
index 65e795b0ca3..9567105e8a3 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
@@ -11,7 +11,6 @@ import { IDragMoveEventArgs, IDragStartEventArgs } from '../../directives/drag-d
  */
 @Component({
     selector: 'igx-split-bar',
-    styleUrls: ['./split-bar.component.scss'],
     templateUrl: './split-bar.component.html'
 })
 export class IgxSplitBarComponent {

From fc6a7e9a4879276defdc7f48ee07e45af1b5f16f Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 27 Mar 2020 11:00:44 +0200
Subject: [PATCH 10/44] chore(*): Fixing imports, fixing lint.

---
 .../src/lib/splitter/splitbar/split-bar.component.ts           | 2 +-
 .../src/lib/splitter/splitpane/split-pane.component.ts         | 2 +-
 .../igniteui-angular/src/lib/splitter/splitter.component.ts    | 3 ++-
 projects/igniteui-angular/src/lib/splitter/splitter.module.ts  | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
index 9567105e8a3..e9b223468be 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
@@ -104,7 +104,7 @@ export class IgxSplitBarComponent {
 
     public onDragMove(event: IDragMoveEventArgs) {
         const isHorizontal = this.type === SplitterType.Horizontal;
-        const curr =  isHorizontal ? event.pageX : event.pageY;     
+        const curr =  isHorizontal ? event.pageX : event.pageY;
         if (isHorizontal) {
             event.nextPageY = event.pageY;
         } else {
diff --git a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
index d75438de04c..8b2f7af80cb 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
@@ -12,7 +12,7 @@ import { Component, HostBinding, Input, ElementRef } from '@angular/core';
 })
 export class IgxSplitterPaneComponent {
 
-    public _size = 'auto'
+    public _size = 'auto';
     /**
      * Sets/gets the size of the current `IgxSplitterPaneComponent`.
      */
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index 682d151cf09..baceb6f0740 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -108,7 +108,8 @@ export class IgxSplitterComponent implements AfterContentInit {
 
     /**
      * This method performs some initialization logic when the user starts dragging the gripper between each couple of panes.
-     * @param  {IgxSplitterPaneComponent} pane The main `IgxSplitterPaneComponent` associated with the currently dragged `SplitBarComponent`.
+     * @param  {IgxSplitterPaneComponent} pane
+     * The main `IgxSplitterPaneComponent` associated with the currently dragged `SplitBarComponent`.
      * @return {void}@memberof SplitterComponent
      */
     public onMoveStart(pane: IgxSplitterPaneComponent) {
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
index f3ebd5f9fa8..8b4febea7f5 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { IgxSplitBarComponent } from './splitbar/split-bar.component';
 import { IgxSplitterPaneComponent } from './splitpane/split-pane.component';
 import { IgxSplitterComponent } from './splitter.component';
-import { IgxIconModule } from '../icon';
+import { IgxIconModule } from '../icon/index';
 import { IgxDragDropModule } from '../directives/drag-drop/drag-drop.directive';
 
 @NgModule({

From d4b0de6fb3258ec9f3535c2ed23d7750b41e1bba Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 27 Mar 2020 11:35:50 +0200
Subject: [PATCH 11/44] chore(*): Include icons.

---
 .../src/lib/splitter/splitbar/split-bar.component.html   | 4 ++--
 .../src/lib/splitter/splitbar/split-bar.component.ts     | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
index 7e90538892e..4a12fc2830a 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
@@ -2,7 +2,7 @@
 (dragStart)='onDragStart($event)'
 (dragMove)="onDragMove($event)">
     <div class="igx-splitter-bar-expander">
-        <!-- <igx-icon fontSet="material">arrow_right</igx-icon> -->
+        <igx-icon fontSet="material">{{collapsePrevIcon}}</igx-icon>
     </div>    
     <div class="igx-splitter__bar-handle" [style.cursor]='cursor'
     [class.igx-splitter__handle-vertical]='type === 0'
@@ -10,6 +10,6 @@
     igxDragHandle
     ></div>
     <div class="igx-splitter-bar-expander">
-        <!-- <igx-icon fontSet="material">arrow_left</igx-icon> -->
+        <igx-icon fontSet="material">{{collapseNextIcon}}</igx-icon>
     </div>
 </div>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
index e9b223468be..b4705a3d415 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
@@ -70,6 +70,15 @@ export class IgxSplitBarComponent {
         return this.type === SplitterType.Horizontal ? 'column' : 'row';
     }
 
+    get collapseNextIcon() {
+        return this.type === SplitterType.Horizontal ? 'arrow_right' : 'arrow_drop_down';
+    }
+
+    get collapsePrevIcon() {
+        return this.type === SplitterType.Horizontal ? 'arrow_left' : 'arrow_drop_up';
+    }
+
+
     /**
      * A temporary holder for the pointer coordinates.
      * @private

From 42d087229c1609301e8a077007e777e68760fd2b Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 27 Mar 2020 11:56:45 +0200
Subject: [PATCH 12/44] chore(*): Fix style lint.

---
 .../lib/core/styles/components/splitter/_splitter-theme.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
index 76a42e674ad..cd35165a941 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -27,7 +27,7 @@
     @include igx-root-css-vars($theme);
 
     
-    $splitter-color: rgba(189,189,189,0.8);
+    $splitter-color: rgba(189, 189, 189, .8);
     $splitter-border-width: 1px;
     $splitter-border-style: solid;
     $splitter-border-color: ($splitter-color);

From ebb74b02d29e7577857410bd5ad76b3a93009e4b Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 27 Mar 2020 15:17:08 +0200
Subject: [PATCH 13/44] chore(*): Add splitter spec file.

---
 .../lib/splitter/splitter.component.spec.ts   | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
new file mode 100644
index 00000000000..29ab057ce68
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
@@ -0,0 +1,55 @@
+import { IgxSplitterModule } from './splitter.module';
+import { configureTestSuite } from '../test-utils/configure-suite';
+import { TestBed, async } from '@angular/core/testing';
+import { Component, ViewChild } from '@angular/core';
+import { SplitterType, IgxSplitterComponent } from './splitter.component';
+
+describe('IgxSplitter', () => {
+    configureTestSuite();
+    beforeAll(async(() => {
+
+        return TestBed.configureTestingModule({
+            declarations: [ SplitterTestComponent ],
+            imports: [
+                IgxSplitterModule
+            ]
+        }).compileComponents();
+    }));
+
+    let fixture, splitter;
+    beforeEach(async(() => {
+        fixture = TestBed.createComponent(SplitterTestComponent);
+        fixture.detectChanges();
+        splitter = fixture.componentInstance.snackbar;
+    }));
+
+    it('should render pane content correctly in splitter.', () => {});
+    it('should render vertical splitter.', () => {});
+    it('should render horizontal splitter.', () => {});
+    it('should allow resizing vertical splitter via drag', () => {});
+    it('should allow resizing horizontal splitter via drag', () => {});
+    it('should honor minSize/maxSize when resizing.', () => {});
+
+});
+
+@Component({
+    template: `
+    <igx-splitter [type]="type">
+    <igx-splitter-pane>
+        <div>
+           Pane 1
+        </div>
+    </igx-splitter-pane>
+    <igx-splitter-pane>
+        <div>
+            Pane 2
+         </div>
+    </igx-splitter-pane>
+</igx-splitter>
+    `,
+})
+export class SplitterTestComponent {
+    type = SplitterType.Vertical;
+    @ViewChild(IgxSplitterComponent, { static: true })
+    public splitter: IgxSplitterComponent;
+}

From 5a86ed8a96ec3295275e76d558b1e86f9bd3375c Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 27 Mar 2020 15:34:31 +0200
Subject: [PATCH 14/44] chore(*): Rename split-bar to splitter-bar for
 consitency.

---
 .../splitter-bar.component.html}                            | 0
 .../splitter-bar.component.ts}                              | 6 +++---
 .../splitter-pane.component.html}                           | 0
 .../splitter-pane.component.ts}                             | 2 +-
 .../src/lib/splitter/splitter.component.html                | 4 ++--
 .../igniteui-angular/src/lib/splitter/splitter.component.ts | 2 +-
 .../igniteui-angular/src/lib/splitter/splitter.module.ts    | 4 ++--
 7 files changed, 9 insertions(+), 9 deletions(-)
 rename projects/igniteui-angular/src/lib/splitter/{splitbar/split-bar.component.html => splitter-bar/splitter-bar.component.html} (100%)
 rename projects/igniteui-angular/src/lib/splitter/{splitbar/split-bar.component.ts => splitter-bar/splitter-bar.component.ts} (95%)
 rename projects/igniteui-angular/src/lib/splitter/{splitpane/split-pane.component.html => splitter-pane/splitter-pane.component.html} (100%)
 rename projects/igniteui-angular/src/lib/splitter/{splitpane/split-pane.component.ts => splitter-pane/splitter-pane.component.ts} (97%)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
similarity index 100%
rename from projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.html
rename to projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
diff --git a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
similarity index 95%
rename from projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
rename to projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index b4705a3d415..73a28e9deb8 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitbar/split-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, HostBinding, EventEmitter, Output } from '@angular/core';
 import { SplitterType } from '../splitter.component';
-import { IgxSplitterPaneComponent } from '../splitpane/split-pane.component';
+import { IgxSplitterPaneComponent } from '../splitter-pane/splitter-pane.component';
 import { IDragMoveEventArgs, IDragStartEventArgs } from '../../directives/drag-drop/drag-drop.directive';
 
 /**
@@ -10,8 +10,8 @@ import { IDragMoveEventArgs, IDragStartEventArgs } from '../../directives/drag-d
  * @class SplitBarComponent
  */
 @Component({
-    selector: 'igx-split-bar',
-    templateUrl: './split-bar.component.html'
+    selector: 'igx-splitter-bar',
+    templateUrl: './splitter-bar.component.html'
 })
 export class IgxSplitBarComponent {
 
diff --git a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.html
similarity index 100%
rename from projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.html
rename to projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.html
diff --git a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
similarity index 97%
rename from projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
rename to projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
index 8b2f7af80cb..77084541fed 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitpane/split-pane.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
@@ -8,7 +8,7 @@ import { Component, HostBinding, Input, ElementRef } from '@angular/core';
  */
 @Component({
     selector: 'igx-splitter-pane',
-    templateUrl: './split-pane.component.html'
+    templateUrl: './splitter-pane.component.html'
 })
 export class IgxSplitterPaneComponent {
 
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.html b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
index 8391d558731..7b1a2d7ba74 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
@@ -1,9 +1,9 @@
 <ng-content select="igx-splitter-pane"></ng-content>
 <ng-container *ngFor="let pane of panes; let last = last">
-    <igx-split-bar *ngIf="!last" [style.order]="pane.order + 1"
+    <igx-splitter-bar *ngIf="!last" [style.order]="pane.order + 1"
                     [type]="type"
                     [pane]="pane"
                     (moveStart)="onMoveStart($event)"
                     (moving)="onMoving($event)">
-    </igx-split-bar>
+    </igx-splitter-bar>
 </ng-container>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index baceb6f0740..c1968512e75 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -1,5 +1,5 @@
 import { Component, QueryList, Input, ContentChildren, AfterContentInit, HostBinding, Output, EventEmitter } from '@angular/core';
-import { IgxSplitterPaneComponent } from './splitpane/split-pane.component';
+import { IgxSplitterPaneComponent } from './splitter-pane/splitter-pane.component';
 
 /**
  * An enumeration that defines the `SplitterComponent` panes orientation.
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
index 8b4febea7f5..a36c897d2ac 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IgxSplitBarComponent } from './splitbar/split-bar.component';
-import { IgxSplitterPaneComponent } from './splitpane/split-pane.component';
+import { IgxSplitBarComponent } from './splitter-bar/splitter-bar.component';
+import { IgxSplitterPaneComponent } from './splitter-pane/splitter-pane.component';
 import { IgxSplitterComponent } from './splitter.component';
 import { IgxIconModule } from '../icon/index';
 import { IgxDragDropModule } from '../directives/drag-drop/drag-drop.directive';

From fa92adfa15a90c76537140e0a31df5ecd0d3649b Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 27 Mar 2020 17:48:40 +0200
Subject: [PATCH 15/44] chore(*): Add tests.

---
 .../lib/splitter/splitter.component.spec.ts   | 113 ++++++++++++++++--
 src/app/splitter/splitter.sample.html         |   2 +-
 2 files changed, 104 insertions(+), 11 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
index 29ab057ce68..afa094ec227 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
@@ -3,6 +3,10 @@ import { configureTestSuite } from '../test-utils/configure-suite';
 import { TestBed, async } from '@angular/core/testing';
 import { Component, ViewChild } from '@angular/core';
 import { SplitterType, IgxSplitterComponent } from './splitter.component';
+import { By } from '@angular/platform-browser';
+
+
+const SPLITTERBAR_CLASS = 'igx-splitter-bar';
 
 describe('IgxSplitter', () => {
     configureTestSuite();
@@ -20,15 +24,104 @@ describe('IgxSplitter', () => {
     beforeEach(async(() => {
         fixture = TestBed.createComponent(SplitterTestComponent);
         fixture.detectChanges();
-        splitter = fixture.componentInstance.snackbar;
+        splitter = fixture.componentInstance.splitter;
     }));
 
-    it('should render pane content correctly in splitter.', () => {});
-    it('should render vertical splitter.', () => {});
-    it('should render horizontal splitter.', () => {});
-    it('should allow resizing vertical splitter via drag', () => {});
-    it('should allow resizing horizontal splitter via drag', () => {});
-    it('should honor minSize/maxSize when resizing.', () => {});
+    it('should render pane content correctly in splitter.', () => {
+        expect(splitter.panes.length).toBe(2);
+        const firstPane = splitter.panes.toArray()[0].element;
+        const secondPane = splitter.panes.toArray()[1].element;
+        expect(firstPane.textContent.trim()).toBe('Pane 1');
+        expect(secondPane.textContent.trim()).toBe('Pane 2');
+
+        const splitterBar = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).nativeElement;
+        expect(firstPane.style.order).toBe('0');
+        expect(splitterBar.style.order).toBe('1');
+        expect(secondPane.style.order).toBe('2');
+    });
+
+    it('should render vertical splitter.', () => {
+        fixture.componentInstance.type = SplitterType.Vertical;
+        fixture.detectChanges();
+
+        const splitterBar = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
+        expect(splitterBar.context.direction).toBe('row');
+        expect(splitterBar.context.collapseNextIcon).toBe('arrow_drop_down');
+        expect(splitterBar.context.collapsePrevIcon).toBe('arrow_drop_up');
+    });
+    it('should render horizontal splitter.', () => {
+        const splitterBar = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
+        expect(splitterBar.context.direction).toBe('column');
+        expect(splitterBar.context.collapseNextIcon).toBe('arrow_right');
+        expect(splitterBar.context.collapsePrevIcon).toBe('arrow_left');
+    });
+    it('should allow resizing vertical splitter', () => {
+        fixture.componentInstance.type = SplitterType.Vertical;
+        fixture.detectChanges();
+        const pane1 =  splitter.panes.toArray()[0];
+        const pane2 = splitter.panes.toArray()[1];
+        expect(pane1.size).toBe('auto');
+        expect(pane2.size).toBe('auto');
+        const pane1_originalSize = pane1.element.offsetHeight;
+        const pane2_originalSize = pane2.element.offsetHeight;
+        const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context;
+        splitterBarComponent.moveStart.emit(pane1);
+        splitterBarComponent.moving.emit(-100);
+        fixture.detectChanges();
+        expect(pane1.size).toBe(pane1_originalSize + 100 + 'px');
+        expect(pane2.size).toBe(pane2_originalSize - 100 + 'px');
+
+        splitterBarComponent.moving.emit(100);
+        fixture.detectChanges();
+        expect(pane1.size).toBe(pane1_originalSize - 100 + 'px');
+        expect(pane2.size).toBe(pane2_originalSize + 100 + 'px');
+    });
+    it('should allow resizing horizontal splitter', () => {
+        const pane1 =  splitter.panes.toArray()[0];
+        const pane2 = splitter.panes.toArray()[1];
+        expect(pane1.size).toBe('auto');
+        expect(pane2.size).toBe('auto');
+        const pane1_originalSize = pane1.element.offsetWidth;
+        const pane2_originalSize = pane2.element.offsetWidth;
+        const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context;
+        splitterBarComponent.moveStart.emit(pane1);
+        splitterBarComponent.moving.emit(-100);
+        fixture.detectChanges();
+
+        expect(parseFloat(pane1.size)).toBeCloseTo(pane1_originalSize + 100, 0);
+        expect(parseFloat(pane2.size)).toBeCloseTo(pane2_originalSize - 100, 0);
+
+        splitterBarComponent.moving.emit(100);
+        fixture.detectChanges();
+        expect(parseFloat(pane1.size)).toBeCloseTo(pane1_originalSize - 100, 0);
+        expect(parseFloat(pane2.size)).toBeCloseTo(pane2_originalSize + 100, 0);
+    });
+    it('should honor minSize/maxSize when resizing.', () => {
+        fixture.componentInstance.type = SplitterType.Vertical;
+        fixture.detectChanges();
+        const pane1 =  splitter.panes.toArray()[0];
+        const pane2 = splitter.panes.toArray()[1];
+        pane1.minSize = '100px';
+        pane1.maxSize = '300px';
+        fixture.detectChanges();
+
+        const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context;
+        splitterBarComponent.moveStart.emit(pane1);
+        splitterBarComponent.moving.emit(100);
+        splitterBarComponent.moveStart.emit(pane1);
+        splitterBarComponent.moving.emit(100);
+        fixture.detectChanges();
+        expect(pane1.size).toBe('100px');
+        expect(pane2.size).toBe('300px');
+
+        splitterBarComponent.moveStart.emit(pane1);
+        splitterBarComponent.moving.emit(-200);
+        splitterBarComponent.moveStart.emit(pane1);
+        splitterBarComponent.moving.emit(-50);
+        fixture.detectChanges();
+        expect(pane1.size).toBe('300px');
+        expect(pane2.size).toBe('100px');
+    });
 
 });
 
@@ -36,12 +129,12 @@ describe('IgxSplitter', () => {
     template: `
     <igx-splitter [type]="type">
     <igx-splitter-pane>
-        <div>
+        <div style='height:200px;'>
            Pane 1
         </div>
     </igx-splitter-pane>
     <igx-splitter-pane>
-        <div>
+        <div style='height:200px;'>
             Pane 2
          </div>
     </igx-splitter-pane>
@@ -49,7 +142,7 @@ describe('IgxSplitter', () => {
     `,
 })
 export class SplitterTestComponent {
-    type = SplitterType.Vertical;
+    type = SplitterType.Horizontal;
     @ViewChild(IgxSplitterComponent, { static: true })
     public splitter: IgxSplitterComponent;
 }
diff --git a/src/app/splitter/splitter.sample.html b/src/app/splitter/splitter.sample.html
index ce8cb5d63fe..396af3f35ad 100644
--- a/src/app/splitter/splitter.sample.html
+++ b/src/app/splitter/splitter.sample.html
@@ -1,7 +1,7 @@
 <div>Vertical</div>
 <div class="sample-wrapper">
     <igx-splitter [type]="0">
-        <igx-splitter-pane>
+        <igx-splitter-pane [minSize]='100'>
             <div style='height:500px;'>
                Pane 1
             </div>

From 23dd2d02d2716b119e0e67523efea62ed39c432e Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 27 Mar 2020 17:59:24 +0200
Subject: [PATCH 16/44] chore(*): Remove unused code.

---
 .../splitter-bar/splitter-bar.component.ts    | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index 73a28e9deb8..7d7113f6901 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -86,26 +86,6 @@ export class IgxSplitBarComponent {
      */
     private startPoint!: number;
 
-    /**
-     * A method that handles the `PoinerDown` event firing.
-     * @param  {PointerEvent} event The `PoinerDown` event payload.
-     * @return {void}@memberof SplitBarComponent
-     */
-    public onPointerDown(event: PointerEvent) {
-        this.startPoint = this.type === SplitterType.Horizontal ? event.clientX : event.clientY;
-        this.moveStart.emit(this.pane);
-    }
-
-    /**
-     * A method that handles the `PoinerMove` event firing.
-     * @param  {PointerEvent} event The `PoinerMove` event payload.
-     * @return {void}@memberof SplitBarComponent
-     */
-    public onPointerMove(event: PointerEvent) {
-        const delta = this.startPoint - (this.type === SplitterType.Horizontal ? event.clientX : event.clientY);
-        this.moving.emit(delta);
-    }
-
     public onDragStart(event: IDragStartEventArgs) {
         this.startPoint = this.type === SplitterType.Horizontal ? event.startX : event.startY;
         this.moveStart.emit(this.pane);

From cd8d72dbb5595d035aa9e31388a04d4deab9aa1d Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 27 Mar 2020 18:47:59 +0200
Subject: [PATCH 17/44] chore(*): Add "resizable" input for pane to
 allow/disallow resizing.

---
 .../splitter-bar/splitter-bar.component.ts        | 15 +++++++++++++++
 .../splitter-pane/splitter-pane.component.ts      |  7 +++++++
 .../src/lib/splitter/splitter.component.html      |  1 +
 .../src/lib/splitter/splitter.component.spec.ts   |  9 +++++++++
 .../src/lib/splitter/splitter.component.ts        | 10 ++++++++++
 5 files changed, 42 insertions(+)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index 7d7113f6901..b9f4f7ae000 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -29,6 +29,12 @@ export class IgxSplitBarComponent {
     @Input()
     public pane!: IgxSplitterPaneComponent;
 
+    /**
+     * Sets/Gets the `SplitPaneComponent` sibling components associated with the current `SplitBarComponent`.
+     */
+    @Input()
+    public siblings!: Array<IgxSplitterPaneComponent>;
+
     /**
      * An event that is emitted whenever we start dragging the current `SplitBarComponent`.
      * @memberof SplitBarComponent
@@ -87,6 +93,10 @@ export class IgxSplitBarComponent {
     private startPoint!: number;
 
     public onDragStart(event: IDragStartEventArgs) {
+        if (this.resizeDisallowed) {
+            event.cancel = true;
+            return;
+        }
         this.startPoint = this.type === SplitterType.Horizontal ? event.startX : event.startY;
         this.moveStart.emit(this.pane);
     }
@@ -107,4 +117,9 @@ export class IgxSplitBarComponent {
         }
     }
 
+    protected get resizeDisallowed() {
+        const relatedTabs = [this.pane, ... this.siblings];
+        return !!relatedTabs.find(x => x.resizable === false);
+    }
+
 }
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
index 77084541fed..a4f3145bfd8 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
@@ -38,6 +38,13 @@ export class IgxSplitterPaneComponent {
     @Input()
     public maxSize!: string;
 
+    /**
+     * Sets/Gets whether pane is resizable.
+     */
+    @Input()
+    public resizable = true;
+
+
     /**
      * Sets/gets the `order` property of the current `IgxSplitterPaneComponent`.
      */
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.html b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
index 7b1a2d7ba74..2c622b69540 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
@@ -3,6 +3,7 @@
     <igx-splitter-bar *ngIf="!last" [style.order]="pane.order + 1"
                     [type]="type"
                     [pane]="pane"
+                    [siblings]='getSiblings(pane)'
                     (moveStart)="onMoveStart($event)"
                     (moving)="onMoving($event)">
     </igx-splitter-bar>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
index afa094ec227..63353746689 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
@@ -123,6 +123,15 @@ describe('IgxSplitter', () => {
         expect(pane2.size).toBe('100px');
     });
 
+    it('should not allow drag resize if resizable is set to false.', () => {
+        const pane1 =  splitter.panes.toArray()[0];
+        pane1.resizable = false;
+        const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context;
+        const args = {cancel: false};
+        splitterBarComponent.onDragStart(args);
+        expect(args.cancel).toBeTruthy();
+    });
+
 });
 
 @Component({
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index c1968512e75..ae69dfe8ee2 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -163,4 +163,14 @@ export class IgxSplitterComponent implements AfterContentInit {
             k += 2;
         });
     }
+
+    public getSiblings(pane: IgxSplitterPaneComponent): Array<IgxSplitterPaneComponent> {
+        const panes = this.panes.toArray();
+        const index = panes.indexOf(pane);
+        const siblings = [panes[index + 1]];
+        if (index > 0) {
+            siblings.push(panes[index - 1]);
+        }
+        return siblings;
+    }
 }

From 1483eb8f7f0141dc45888252589c697e92f6f86c Mon Sep 17 00:00:00 2001
From: Martin Dragnev <MDragnev@infragistics.com>
Date: Wed, 1 Apr 2020 18:35:16 +0300
Subject: [PATCH 18/44] feat(IgxSplitter): Adding expand/collapse functionality
 #6639

---
 .../splitter-bar/splitter-bar.component.html  | 12 +++----
 .../splitter-bar/splitter-bar.component.ts    | 35 +++++++++++++++++++
 .../splitter-pane/splitter-pane.component.ts  | 23 +++++++++++-
 .../src/lib/splitter/splitter.component.html  |  5 +--
 .../src/lib/splitter/splitter.component.ts    | 12 +++++++
 5 files changed, 78 insertions(+), 9 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
index 4a12fc2830a..f0cc362f3e5 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
@@ -1,15 +1,15 @@
 <div class="igx-splitter__bar" [style.flex-direction]="direction" igxDrag [ghost]="false"
 (dragStart)='onDragStart($event)'
 (dragMove)="onDragMove($event)">
-    <div class="igx-splitter-bar-expander">
-        <igx-icon fontSet="material">{{collapsePrevIcon}}</igx-icon>
-    </div>    
+    <div class="igx-splitter-bar-expander" (click)='onCollapsing($event)'>
+        <igx-icon fontSet="material" [hidden]='prevButtonHidden'>{{collapsePrevIcon}}</igx-icon>
+    </div>
     <div class="igx-splitter__bar-handle" [style.cursor]='cursor'
     [class.igx-splitter__handle-vertical]='type === 0'
     [class.igx-splitter__handle-horizontal]='type === 1'
     igxDragHandle
     ></div>
-    <div class="igx-splitter-bar-expander">
-        <igx-icon fontSet="material">{{collapseNextIcon}}</igx-icon>
+    <div class="igx-splitter-bar-expander" (click)='onCollapsing($event)' >
+        <igx-icon fontSet="material" [hidden]='nextButtonHidden' >{{collapseNextIcon}}</igx-icon>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index b9f4f7ae000..1fde5cce5ff 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -49,6 +49,12 @@ export class IgxSplitBarComponent {
     @Output()
     public moving = new EventEmitter<number>();
 
+    /**
+     * An event that is emitted when collapsing the pane
+     */
+    @Output()
+    public collapse = new EventEmitter<IgxSplitterPaneComponent>();
+
     /**
      * Gets the cursor associated with the current `SplitBarComponent`.
      * @readonly
@@ -92,6 +98,15 @@ export class IgxSplitBarComponent {
      */
     private startPoint!: number;
 
+    get prevButtonHidden() {
+        const isPaneHidden = this.pane.hidden;
+        return isPaneHidden ? true : false;
+    }
+
+    get nextButtonHidden() {
+        const isSiblingHidden = this.siblings[0].hidden;
+        return isSiblingHidden ? true : false;
+    }
     public onDragStart(event: IDragStartEventArgs) {
         if (this.resizeDisallowed) {
             event.cancel = true;
@@ -122,4 +137,24 @@ export class IgxSplitBarComponent {
         return !!relatedTabs.find(x => x.resizable === false);
     }
 
+    public onCollapsing(event: any) {
+        const arrowElement = event.srcElement;
+        const direction = arrowElement.innerText === 'arrow_left' || arrowElement.innerText === 'arrow_drop_up' ? 0 : 1;
+        let _pane = null;
+        const sibling = this.siblings[0];
+        if (!direction) {
+            if (!this.pane.hidden || !sibling.hidden) {
+                if (sibling.hidden) {
+                    _pane = sibling;
+                } else {
+                    if (!this.pane.hidden) {
+                       _pane = this.pane;
+                    }
+                }
+            }
+        } else {
+            _pane = !this.pane.hidden ? sibling : this.pane;
+        }
+        this.collapse.emit(_pane);
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
index a4f3145bfd8..caf44edcffa 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
@@ -75,7 +75,7 @@ export class IgxSplitterPaneComponent {
     public minHeight = 0;
 
     /**
-     * Sets/gets the `maxHeight` and `maxWidth` propertis of the current `SplitPaneComponent`.
+     * Sets/gets the `maxHeight` and `maxWidth` propertis of the current `IgxSplitterPaneComponent`.
      */
     @HostBinding('style.max-height')
     @HostBinding('style.max-width')
@@ -93,5 +93,26 @@ export class IgxSplitterPaneComponent {
         return `${grow} ${shrink} ${this.size}`;
     }
 
+    /**
+     * Sets/gets the 'display' property of the current `IgxSplitterPaneComponent`
+     */
+    @HostBinding('style.display')
+    public display = 'flex';
+
+    private _hidden = false;
+
+    /**
+     * Sets/gets whether current `IgxSplitterPanecomponent` is hidden
+     */
+    @Input()
+    public set hidden(value) {
+        this._hidden = value;
+        this.display = this._hidden ? 'none' : 'flex' ;
+    }
+
+    public get hidden() {
+        return this._hidden;
+    }
+
     constructor(private el: ElementRef) { }
 }
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.html b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
index 2c622b69540..2b6eddf3f67 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
@@ -5,6 +5,7 @@
                     [pane]="pane"
                     [siblings]='getSiblings(pane)'
                     (moveStart)="onMoveStart($event)"
-                    (moving)="onMoving($event)">
+                    (moving)="onMoving($event)"
+                    (collapse)="onCollapsing($event)">
     </igx-splitter-bar>
-</ng-container>
\ No newline at end of file
+</ng-container>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index ae69dfe8ee2..11b9af32cc2 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -151,6 +151,18 @@ export class IgxSplitterComponent implements AfterContentInit {
         this.sibling.size = siblingSize + 'px';
     }
 
+    /**
+     * This method performs the collapsing of the pane
+     * @param pane
+     */
+    public onCollapsing(pane: IgxSplitterPaneComponent) {
+        if (!pane) {
+            return;
+        }
+        this.pane = pane;
+        this.pane.hidden = !this.pane.hidden;
+    }
+
     /**
      * This method takes care for assigning an `order` property on each `IgxSplitterPaneComponent`.
      * @private

From f4677db7bd5592b3ded6c3d1ce96c0e2f2fbd50c Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 2 Apr 2020 10:49:38 +0300
Subject: [PATCH 19/44] refactor(splitter): add initial styling for all
 elements

---
 .../splitter/_splitter-component.scss         | 54 ++++++++++-----
 .../components/splitter/_splitter-theme.scss  | 67 ++++++++++++++-----
 .../splitter-bar/splitter-bar.component.html  | 26 +++----
 .../splitter-bar/splitter-bar.component.ts    | 37 ----------
 4 files changed, 102 insertions(+), 82 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss
index 1ee5c655a1a..75da58e80a8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-component.scss
@@ -1,28 +1,52 @@
 /// @group components
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-/// @requires {mixin} bem-block	/// @requires {mixin} bem-block
-/// @requires {mixin} bem-elem	/// @requires {mixin} bem-elem
-/// @requires {mixin} bem-mod	/// @requires {mixin} bem-mod
+/// @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: bem--selector-to-string(&);
-    @include register-component(str-slice($this, 2, -1));
+    $this: str-slice(bem--selector-to-string(&), 2, -1);
+    @include register-component($this);
 
-    @include e(bar) {
+    @include b(#{$this}-bar) {
         @extend %igx-splitter-bar !optional;
-    }
 
-    @include e(bar-handle) {
-        @extend %igx-splitter-bar-handle !optional;
-    }
+        @include e(handle) {
+            @extend %igx-splitter-handle !optional;
+            @extend %igx-splitter-handle--horizontal !optional;
+        }
 
-    @include e(handle-vertical) {
-        @extend %igx-splitter-handle-vertical !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 e(handle-horizontal) {
-        @extend %igx-splitter-handle-horizontal !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;
+            }
+        }
     }
 }
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
index cd35165a941..b030c07fd3e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -4,7 +4,6 @@
     $palette: $default-palette,
     $schema: $light-schema,
     $elevations: $elevations,
-
     $border-radius: null,
     $button-shadow: null,
 ) {
@@ -26,12 +25,11 @@
 @mixin igx-splitter($theme) {
     @include igx-root-css-vars($theme);
 
-    
     $splitter-color: rgba(189, 189, 189, .8);
     $splitter-border-width: 1px;
     $splitter-border-style: solid;
     $splitter-border-color: ($splitter-color);
-    $splitter-indicator-size: .125rem;
+    $splitter-indicator-size: rem(16px);
 
     %igx-splitter-bar {
         display: flex;
@@ -42,26 +40,65 @@
         border-width: $splitter-border-width;
         border-style: $splitter-border-style;
         border-color: $splitter-border-color;
-    
-        .igx-icon {
+
+        igx-icon {
             color: white;
         }
     }
 
-    %igx-splitter-bar-handle {
-        margin: $splitter-indicator-size;
-        background: white;
+    %igx-splitter-bar--vertical {
+        flex-direction: column;
+        height: 100%;
     }
 
-    %igx-splitter-handle-vertical {
-        height: 25%;
-        width: 100%;
-        margin: $splitter-indicator-size;
+    %igx-splitter-handle {
         background: white;
+        border-radius: 2px;
     }
-    
-    %igx-splitter-handle-horizontal {
-        height: 100%;
+
+    %igx-splitter-handle--horizontal {
+        cursor: row-resize;
         width: 25%;
+        height: 4px;
+        margin: 0 48px;
+    }
+
+    %igx-splitter-handle--vertical {
+        cursor: col-resize;
+        width: 4px;
+        height: 25%;
+        margin: 48px 0;
+    }
+
+    %igx-splitter-expander {
+        position: relative;
+        width: 0;
+        height: 0;
+        border-right: 4px solid transparent;
+        border-left: 4px solid transparent;
+        cursor: pointer;
+    }
+
+    %igx-splitter-expander--start {
+        border-bottom: 4px solid white;
+    }
+
+    %igx-splitter-expander--end {
+        border-bottom: unset;
+        border-top: 4px solid white;
+    }
+
+    %igx-splitter-expander--start-vertical {
+        border-top: 4px solid transparent;
+        border-right: 4px solid white;
+        border-bottom: 4px solid transparent;
+        border-left: unset;
+    }
+
+    %igx-splitter-expander--end-vertical {
+        border-top: 4px solid transparent;
+        border-right: unset;
+        border-bottom: 4px solid transparent;
+        border-left: 4px solid white;
     }
 }
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
index 4a12fc2830a..6034c9ca5e2 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
@@ -1,15 +1,11 @@
-<div class="igx-splitter__bar" [style.flex-direction]="direction" igxDrag [ghost]="false"
-(dragStart)='onDragStart($event)'
-(dragMove)="onDragMove($event)">
-    <div class="igx-splitter-bar-expander">
-        <igx-icon fontSet="material">{{collapsePrevIcon}}</igx-icon>
-    </div>    
-    <div class="igx-splitter__bar-handle" [style.cursor]='cursor'
-    [class.igx-splitter__handle-vertical]='type === 0'
-    [class.igx-splitter__handle-horizontal]='type === 1'
-    igxDragHandle
-    ></div>
-    <div class="igx-splitter-bar-expander">
-        <igx-icon fontSet="material">{{collapseNextIcon}}</igx-icon>
-    </div>
-</div>
\ No newline at end of file
+<div class="igx-splitter-bar"
+    [class.igx-splitter-bar--vertical]='type === 0'
+    igxDrag
+    [ghost]="false"
+    (dragStart)='onDragStart($event)'
+    (dragMove)="onDragMove($event)"
+>
+    <div class="igx-splitter-bar__expander--start"></div>
+    <div class="igx-splitter-bar__handle" igxDragHandle></div>
+    <div class="igx-splitter-bar__expander--end"></div>
+</div>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index b9f4f7ae000..683549a33f3 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -49,42 +49,6 @@ export class IgxSplitBarComponent {
     @Output()
     public moving = new EventEmitter<number>();
 
-    /**
-     * Gets the cursor associated with the current `SplitBarComponent`.
-     * @readonly
-     * @type string
-     * @memberof SplitBarComponent
-     */
-    public get cursor(): string {
-        return this.type === SplitterType.Horizontal ? 'col-resize' : 'row-resize';
-    }
-
-    /**
-     * Sets/gets the `display` property of the current `SplitBarComponent`.
-     * @memberof SplitBarComponent
-     */
-    @HostBinding('style.display')
-    public display = 'flex';
-
-    /**
-     * Gets the `flex-direction` property of the current `SplitBarComponent`.
-     * @readonly
-     * @type string
-     * @memberof SplitBarComponent
-     */
-    public get direction(): string {
-        return this.type === SplitterType.Horizontal ? 'column' : 'row';
-    }
-
-    get collapseNextIcon() {
-        return this.type === SplitterType.Horizontal ? 'arrow_right' : 'arrow_drop_down';
-    }
-
-    get collapsePrevIcon() {
-        return this.type === SplitterType.Horizontal ? 'arrow_left' : 'arrow_drop_up';
-    }
-
-
     /**
      * A temporary holder for the pointer coordinates.
      * @private
@@ -121,5 +85,4 @@ export class IgxSplitBarComponent {
         const relatedTabs = [this.pane, ... this.siblings];
         return !!relatedTabs.find(x => x.resizable === false);
     }
-
 }

From 5d477ac798f72b7bba1bd7c3df7db0fa96b57295 Mon Sep 17 00:00:00 2001
From: Martin Dragnev <MDragnev@infragistics.com>
Date: Thu, 2 Apr 2020 11:35:29 +0300
Subject: [PATCH 20/44] refactor(IgxSplitter): Applying changes about
 collapsing

---
 .../splitter-bar/splitter-bar.component.html  |  4 +--
 .../splitter-bar/splitter-bar.component.ts    | 26 ++++++++++++++-----
 .../splitter-pane/splitter-pane.component.ts  |  8 +++++-
 .../src/lib/splitter/splitter.component.ts    |  4 +--
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
index 6034c9ca5e2..56ed2251c48 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
@@ -5,7 +5,7 @@
     (dragStart)='onDragStart($event)'
     (dragMove)="onDragMove($event)"
 >
-    <div class="igx-splitter-bar__expander--start"></div>
+    <div class="igx-splitter-bar__expander--start" (click)='onCollapsing(false)' [hidden]='prevButtonHidden'></div>
     <div class="igx-splitter-bar__handle" igxDragHandle></div>
-    <div class="igx-splitter-bar__expander--end"></div>
+    <div class="igx-splitter-bar__expander--end" (click)='onCollapsing(true)' [hidden]='nextButtonHidden'></div>
 </div>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index 8cc982dc8a8..5db1094493b 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -49,6 +49,11 @@ export class IgxSplitBarComponent {
     @Output()
     public moving = new EventEmitter<number>();
 
+    /**
+     * An event that is emitted when collapsing the pane
+     */
+    @Output()
+    public collapse = new EventEmitter<IgxSplitterPaneComponent>();
     /**
      * A temporary holder for the pointer coordinates.
      * @private
@@ -56,14 +61,18 @@ export class IgxSplitBarComponent {
      */
     private startPoint!: number;
 
-    get prevButtonHidden() {
-        const isPaneHidden = this.pane.hidden;
-        return isPaneHidden ? true : false;
+    /**
+     * @hidden @internal
+     */
+    public get prevButtonHidden() {
+        return this.pane.hidden;
     }
 
-    get nextButtonHidden() {
-        const isSiblingHidden = this.siblings[0].hidden;
-        return isSiblingHidden ? true : false;
+    /**
+     * @hidden @internal
+     */
+    public get nextButtonHidden() {
+        return this.siblings[0].hidden;
     }
     public onDragStart(event: IDragStartEventArgs) {
         if (this.resizeDisallowed) {
@@ -94,4 +103,9 @@ export class IgxSplitBarComponent {
         const relatedTabs = [this.pane, ... this.siblings];
         return !!relatedTabs.find(x => x.resizable === false);
     }
+
+    public onCollapsing(direction: boolean) {
+        const sibling = this.siblings[0];
+        this.collapse.emit(sibling.hidden && !direction || !this.pane.hidden && direction ? sibling : this.pane);
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
index caf44edcffa..218edaacbc9 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, Input, ElementRef } from '@angular/core';
+import { Component, HostBinding, Input, ElementRef, Output, EventEmitter } from '@angular/core';
 
 /**
  * Provides reference to `SplitPaneComponent` component.
@@ -114,5 +114,11 @@ export class IgxSplitterPaneComponent {
         return this._hidden;
     }
 
+    /**
+     * Event fired when collapsing and changing the hidden state of the current pane
+     */
+    @Output()
+    public onPaneToggle = new EventEmitter<IgxSplitterPaneComponent>();
+
     constructor(private el: ElementRef) { }
 }
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index 11b9af32cc2..3c626819234 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -159,8 +159,8 @@ export class IgxSplitterComponent implements AfterContentInit {
         if (!pane) {
             return;
         }
-        this.pane = pane;
-        this.pane.hidden = !this.pane.hidden;
+        pane.hidden = !pane.hidden;
+        pane.onPaneToggle.emit(pane);
     }
 
     /**

From fd86e05afcc748c86a22049c84b3def8da9c9083 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 2 Apr 2020 13:20:13 +0300
Subject: [PATCH 21/44] chore(*): Updating tests.

---
 .../src/lib/splitter/splitter.component.spec.ts  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
index 63353746689..2fbb64ada68 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
@@ -7,6 +7,8 @@ import { By } from '@angular/platform-browser';
 
 
 const SPLITTERBAR_CLASS = 'igx-splitter-bar';
+const SPLITTERBAR_DIV_CLASS = '.igx-splitter-bar';
+const SPLITTER_BAR_VERTICAL_CLASS = 'igx-splitter-bar--vertical';
 
 describe('IgxSplitter', () => {
     configureTestSuite();
@@ -44,16 +46,14 @@ describe('IgxSplitter', () => {
         fixture.componentInstance.type = SplitterType.Vertical;
         fixture.detectChanges();
 
-        const splitterBar = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
-        expect(splitterBar.context.direction).toBe('row');
-        expect(splitterBar.context.collapseNextIcon).toBe('arrow_drop_down');
-        expect(splitterBar.context.collapsePrevIcon).toBe('arrow_drop_up');
+        const splitterBarDIV = fixture.debugElement.query(By.css(SPLITTERBAR_DIV_CLASS));
+        const hasVerticalClass = splitterBarDIV.nativeElement.classList.contains(SPLITTER_BAR_VERTICAL_CLASS);
+        expect(hasVerticalClass).toBeFalsy();
     });
     it('should render horizontal splitter.', () => {
-        const splitterBar = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
-        expect(splitterBar.context.direction).toBe('column');
-        expect(splitterBar.context.collapseNextIcon).toBe('arrow_right');
-        expect(splitterBar.context.collapsePrevIcon).toBe('arrow_left');
+        const splitterBarDIV = fixture.debugElement.query(By.css(SPLITTERBAR_DIV_CLASS));
+        const hasVerticalClass = splitterBarDIV.nativeElement.classList.contains(SPLITTER_BAR_VERTICAL_CLASS);
+        expect(hasVerticalClass).toBeTruthy();
     });
     it('should allow resizing vertical splitter', () => {
         fixture.componentInstance.type = SplitterType.Vertical;

From ac11e0a42df1139bb43e2e26171429931e97f4ab Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 2 Apr 2020 14:09:42 +0300
Subject: [PATCH 22/44] refactor(themes): add initial splitter themes

---
 .../components/splitter/_splitter-theme.scss  | 62 ++++++++++---------
 .../src/lib/core/styles/themes/_index.scss    |  1 -
 .../src/lib/core/styles/themes/_palettes.scss | 10 +--
 .../styles/themes/schemas/dark/_index.scss    |  7 +++
 .../themes/schemas/dark/_scrollbar.scss       |  5 --
 .../styles/themes/schemas/dark/_splitter.scss | 39 ++++++++++++
 .../styles/themes/schemas/light/_index.scss   |  5 ++
 .../themes/schemas/light/_splitter.scss       | 57 +++++++++++++++++
 .../themes/schemas/shape/_splitter.scss       | 27 ++++++++
 src/styles/igniteui-theme.scss                |  9 ++-
 10 files changed, 179 insertions(+), 43 deletions(-)
 create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_splitter.scss
 create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_splitter.scss
 create mode 100644 projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
index b030c07fd3e..9b7600d8298 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -4,17 +4,32 @@
     $palette: $default-palette,
     $schema: $light-schema,
     $elevations: $elevations,
+
+    $bar-color: null,
+    $handle-color: null,
+    $expander-color: null,
     $border-radius: null,
-    $button-shadow: null,
+    $size: null
 ) {
     $name: 'igx-splitter';
     $splitter-schema: ();
 
+    @if map-has-key($schema, $name) {
+        $splitter-schema: map-get($schema, $name);
+    } @else {
+        $splitter-schema: $schema;
+    }
+
     $theme: apply-palette($splitter-schema, $palette);
 
     @return extend($theme, (
         name: $name,
         palette: $palette,
+        bar-color: $bar-color,
+        handle-color: $handle-color,
+        expander-color: $expander-color,
+        border-radius: $border-radius,
+        size: $size
     ));
 }
 
@@ -24,12 +39,7 @@
 /// @requires --var
 @mixin igx-splitter($theme) {
     @include igx-root-css-vars($theme);
-
-    $splitter-color: rgba(189, 189, 189, .8);
-    $splitter-border-width: 1px;
-    $splitter-border-style: solid;
-    $splitter-border-color: ($splitter-color);
-    $splitter-indicator-size: rem(16px);
+    $splitter-color: --var($theme, 'bar-color');
 
     %igx-splitter-bar {
         display: flex;
@@ -37,13 +47,7 @@
         justify-content: center;
         align-items: center;
         background: $splitter-color;
-        border-width: $splitter-border-width;
-        border-style: $splitter-border-style;
-        border-color: $splitter-border-color;
-
-        igx-icon {
-            color: white;
-        }
+        border: 1px solid $splitter-color;
     }
 
     %igx-splitter-bar--vertical {
@@ -52,53 +56,53 @@
     }
 
     %igx-splitter-handle {
-        background: white;
+        background: --var($theme, 'handle-color');
         border-radius: 2px;
     }
 
     %igx-splitter-handle--horizontal {
         cursor: row-resize;
         width: 25%;
-        height: 4px;
-        margin: 0 48px;
+        height: --var($theme, 'size');
+        margin: 0 rem(48px);
     }
 
     %igx-splitter-handle--vertical {
         cursor: col-resize;
-        width: 4px;
+        width: --var($theme, 'size');
         height: 25%;
-        margin: 48px 0;
+        margin: rem(48px) 0;
     }
 
     %igx-splitter-expander {
         position: relative;
         width: 0;
         height: 0;
-        border-right: 4px solid transparent;
-        border-left: 4px solid transparent;
+        border-right: --var($theme, 'size') solid transparent;
+        border-left: --var($theme, 'size') solid transparent;
         cursor: pointer;
     }
 
     %igx-splitter-expander--start {
-        border-bottom: 4px solid white;
+        border-bottom: --var($theme, 'size') solid --var($theme, 'expander-color');
     }
 
     %igx-splitter-expander--end {
         border-bottom: unset;
-        border-top: 4px solid white;
+        border-top: --var($theme, 'size') solid --var($theme, 'expander-color');
     }
 
     %igx-splitter-expander--start-vertical {
-        border-top: 4px solid transparent;
-        border-right: 4px solid white;
-        border-bottom: 4px solid transparent;
+        border-top: --var($theme, 'size') solid transparent;
+        border-right: --var($theme, 'size') solid --var($theme, 'expander-color');
+        border-bottom: --var($theme, 'size') solid transparent;
         border-left: unset;
     }
 
     %igx-splitter-expander--end-vertical {
-        border-top: 4px solid transparent;
+        border-top: --var($theme, 'size') solid transparent;
         border-right: unset;
-        border-bottom: 4px solid transparent;
-        border-left: 4px solid white;
+        border-bottom: --var($theme, 'size') solid transparent;
+        border-left: --var($theme, 'size') solid --var($theme, 'expander-color');
     }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
index c66cdf7932a..bdacac534b4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
@@ -204,7 +204,6 @@
             $palette,
             $schema,
             $border-radius: $roundness,
-            $button-shadow: if($elevation == false, none, null),
         ));
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss
index e462433f0ac..5b4687f76ed 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss
@@ -51,11 +51,11 @@ $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-dark-palette: igx-palette(
+    $primary: igx-color($default-palette, 'primary'),
+    $secondary: igx-color($default-palette, 'secondary'),
+    $surface: #222,
+    $grays: #fff
 ) !default;
 
 /// Global Overlay Color
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
index c7cdbec9843..a16012b71f8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
@@ -38,6 +38,7 @@
 @import './scrollbar';
 @import './slider';
 @import './snackbar';
+@import './splitter';
 @import './switch';
 @import './tabs';
 @import './time-picker';
@@ -82,6 +83,7 @@
 /// @property {Map} igx-scrollbar [$_dark-scrollbar]
 /// @property {Map} igx-slider [$_dark-slider]
 /// @property {Map} igx-snackbar [$_dark-snackbar]
+/// @property {Map} igx-splitter [$_dark-splitter]
 /// @property {Map} igx-switch [$_dark-switch]
 /// @property {Map} igx-tabs [$_dark-tabs]
 /// @property {Map} igx-time-picker [$_dark-time-picker]
@@ -124,6 +126,7 @@ $dark-schema: (
     igx-scrollbar: $_dark-scrollbar,
     igx-slider: $_dark-slider,
     igx-snackbar: $_dark-snackbar,
+    igx-splitter: $_dark-splitter,
     igx-switch: $_dark-switch,
     igx-tabs: $_dark-tabs,
     igx-time-picker: $_dark-time-picker,
@@ -169,6 +172,7 @@ $dark-schema: (
 /// @property {map} igx-scrollbar [$_dark-fluent-scrollbar],
 /// @property {map} igx-slider [$_dark-fluent-slider],
 /// @property {map} igx-snackbar [$_dark-fluent-snackbar],
+/// @property {map} igx-splitter [$_dark-fluent-splitter],
 /// @property {map} igx-switch [$_dark-fluent-switch],
 /// @property {map} igx-tabs [$_dark-fluent-tabs],
 /// @property {map} igx-time-picker [$_dark-fluent-time-picker],
@@ -211,6 +215,7 @@ $dark-fluent-schema: (
     igx-scrollbar: $_dark-fluent-scrollbar,
     igx-slider: $_dark-fluent-slider,
     igx-snackbar: $_dark-fluent-snackbar,
+    igx-splitter: $_dark-fluent-splitter,
     igx-switch: $_dark-fluent-switch,
     igx-tabs: $_dark-fluent-tabs,
     igx-time-picker: $_dark-fluent-time-picker,
@@ -256,6 +261,7 @@ $dark-fluent-schema: (
 /// @property {map} igx-scrollbar [$_dark-bootstrap-scrollbar],
 /// @property {map} igx-slider [$_dark-bootstrap-slider],
 /// @property {map} igx-snackbar [$_dark-bootstrap-snackbar],
+/// @property {map} igx-splitter [$_dark-bootstrap-splitter],
 /// @property {map} igx-switch [$_dark-bootstrap-switch],
 /// @property {map} igx-tabs [$_dark-bootstrap-tabs],
 /// @property {map} igx-time-picker [$_dark-bootstrap-time-picker],
@@ -298,6 +304,7 @@ $dark-bootstrap-schema: (
     igx-scrollbar: $_dark-bootstrap-scrollbar,
     igx-slider: $_dark-bootstrap-slider,
     igx-snackbar: $_dark-bootstrap-snackbar,
+    igx-splitter: $_dark-bootstrap-splitter,
     igx-switch: $_dark-bootstrap-switch,
     igx-tabs: $_dark-bootstrap-tabs,
     igx-time-picker: $_dark-bootstrap-time-picker,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss
index 1ae63442f09..daa82c7bf96 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_scrollbar.scss
@@ -20,11 +20,6 @@ $_dark-scrollbar: extend(
             igx-color: 'surface',
             lighten: 20%
         ),
-
-        track-background: (
-            igx-color: 'surface',
-            lighten: 5%
-        ),
     )
 );
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_splitter.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_splitter.scss
new file mode 100644
index 00000000000..27f81fe897c
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_splitter.scss
@@ -0,0 +1,39 @@
+@import '../light/splitter';
+
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a dark splitter schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-splitter
+$_dark-splitter: extend(
+    $_light-splitter,
+    (
+        handle-color: (
+            igx-color: 'surface',
+            lighten: 20%
+        ),
+
+        expander-color: (
+            igx-color: 'surface',
+            lighten: 20%
+        ),
+    )
+);
+
+/// Generates a fluent splitter schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-splitter
+$_dark-fluent-splitter: extend($_fluent-splitter);
+
+/// Generates a bootstrap splitter schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-splitter
+$_dark-bootstrap-splitter: extend($_bootstrap-splitter);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
index c91b32b9d8a..4f67c8e036e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
@@ -39,6 +39,7 @@
 @import './scrollbar';
 @import './slider';
 @import './snackbar';
+@import './splitter';
 @import './switch';
 @import './tabs';
 @import './time-picker';
@@ -83,6 +84,7 @@
 /// @property {Map} igx-scrollbar [$_light-scrollbar]
 /// @property {Map} igx-slider [$_light-slider]
 /// @property {Map} igx-snackbar [$_light-snackbar]
+/// @property {Map} igx-splitter [$_light-splitter]
 /// @property {Map} igx-switch [$_light-switch]
 /// @property {Map} igx-tabs [$_light-tabs]
 /// @property {Map} igx-time-picker [$_light-time-picker]
@@ -125,6 +127,7 @@ $light-schema: (
     igx-scrollbar: $_light-scrollbar,
     igx-slider: $_light-slider,
     igx-snackbar: $_light-snackbar,
+    igx-splitter: $_light-splitter,
     igx-switch: $_light-switch,
     igx-tabs: $_light-tabs,
     igx-time-picker: $_light-time-picker,
@@ -169,6 +172,7 @@ $light-fluent-schema: (
     igx-scrollbar: $_fluent-scrollbar,
     igx-slider: $_fluent-slider,
     igx-snackbar: $_fluent-snackbar,
+    igx-splitter: $_fluent-splitter,
     igx-switch: $_fluent-switch,
     igx-tabs: $_fluent-tabs,
     igx-time-picker: $_fluent-time-picker,
@@ -213,6 +217,7 @@ $light-bootstrap-schema: (
     igx-scrollbar: $_bootstrap-scrollbar,
     igx-slider: $_bootstrap-slider,
     igx-snackbar: $_bootstrap-snackbar,
+    igx-splitter: $_bootstrap-splitter,
     igx-switch: $_bootstrap-switch,
     igx-tabs: $_bootstrap-tabs,
     igx-time-picker: $_bootstrap-time-picker,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_splitter.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_splitter.scss
new file mode 100644
index 00000000000..08b0b2e9777
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_splitter.scss
@@ -0,0 +1,57 @@
+@import '../shape/splitter';
+
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</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.
+/// @see $default-palette
+$_light-splitter: extend(
+    $_default-shape-splitter,
+    (
+        bar-color: (
+            igx-color: 'surface',
+            darken: 5%
+        ),
+
+        handle-color: (
+            igx-color: 'surface',
+            darken: 20%
+        ),
+
+        expander-color: (
+            igx-color: 'surface',
+            darken: 20%
+        ),
+
+        size: 4px
+    )
+);
+
+/// Generates a fluent splitter schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-splitter
+$_fluent-splitter: extend($_light-splitter);
+
+/// Generates a bootstrap splitter schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-splitter
+/// @requires $_bootstrap-shape-splitter
+$_bootstrap-splitter: extend(
+    $_light-splitter,
+    $_bootstrap-shape-splitter,
+    (
+        variant: 'bootstrap',
+    )
+);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss
new file mode 100644
index 00000000000..524e2065087
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss
@@ -0,0 +1,27 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-shape-splitter: (
+    border-radius-round: 1,
+    border-radius-square: 0
+);
+
+/// @type Map
+$_round-shape-splitter: (
+    border-radius-round: 1,
+    border-radius-square: 0
+);
+
+/// @type Map
+$_square-shape-splitter: (
+    border-radius-round: 0,
+    border-radius-square: 0
+);
+
+/// @type Map
+$_bootstrap-shape-splitter: (
+    border-radius-round: 1,
+    border-radius-square: 0
+);
diff --git a/src/styles/igniteui-theme.scss b/src/styles/igniteui-theme.scss
index 63eaa4ba3d6..88dbe2bb8e5 100644
--- a/src/styles/igniteui-theme.scss
+++ b/src/styles/igniteui-theme.scss
@@ -6,16 +6,19 @@
 @import 'app-layout';
 
 /* autoprefixer grid: on */
-$igx-background-color: igx-color($default-palette, 'surface');
+$palette: $default-palette;
+$schema: $light-schema;
+
+$igx-background-color: igx-color($palette, 'surface');
 $igx-foreground-color: text-contrast($igx-background-color);
 
 body {
     background: $igx-background-color;
-    color: #222;
+    color: rgba($igx-foreground-color, .87);
 }
 
 @include igx-core($direction: ltr);
-@include igx-theme($default-palette, $schema: $light-schema);
+@include igx-theme($palette, $schema: $schema);
 
 .nav-header {
     @include nav-logo('../assets/images/rsrcs/igniteui-logo-light-bg', $igx-background-color);

From be37fecb066b14afa29411a85ffb4752b4e3fd97 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 2 Apr 2020 14:40:59 +0300
Subject: [PATCH 23/44] refactor(splitter): improve theme

---
 .../components/splitter/_splitter-theme.scss       | 14 +++++++++++++-
 .../styles/themes/schemas/shape/_splitter.scss     | 12 ++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
index 9b7600d8298..0942da876f6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -20,8 +20,20 @@
         $splitter-schema: $schema;
     }
 
+    $border-radius: round-borders(
+        if($border-radius, $border-radius, map-get($splitter-schema, 'border-radius')), 0, 2px
+    );
+
     $theme: apply-palette($splitter-schema, $palette);
 
+    @if not($handle-color) and $bar-color {
+        $handle-color: text-contrast($bar-color);
+    }
+
+    @if not($expander-color) and $bar-color {
+        $expander-color: text-contrast($bar-color);
+    }
+
     @return extend($theme, (
         name: $name,
         palette: $palette,
@@ -57,7 +69,7 @@
 
     %igx-splitter-handle {
         background: --var($theme, 'handle-color');
-        border-radius: 2px;
+        border-radius: --var($theme, 'border-radius');
     }
 
     %igx-splitter-handle--horizontal {
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss
index 524e2065087..6d82113c37e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_splitter.scss
@@ -4,24 +4,20 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 $_default-shape-splitter: (
-    border-radius-round: 1,
-    border-radius-square: 0
+    border-radius: 1,
 );
 
 /// @type Map
 $_round-shape-splitter: (
-    border-radius-round: 1,
-    border-radius-square: 0
+    border-radius: 1,
 );
 
 /// @type Map
 $_square-shape-splitter: (
-    border-radius-round: 0,
-    border-radius-square: 0
+    border-radius: 0,
 );
 
 /// @type Map
 $_bootstrap-shape-splitter: (
-    border-radius-round: 1,
-    border-radius-square: 0
+    border-radius: 1,
 );

From b87d8afc148e8d04bb5d4ec7a0ea13936f84cd72 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 2 Apr 2020 15:14:09 +0300
Subject: [PATCH 24/44] refactor(splitter): improve theme

---
 .../lib/core/styles/components/splitter/_splitter-theme.scss  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
index 0942da876f6..d00e0a1ea0d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -20,7 +20,7 @@
         $splitter-schema: $schema;
     }
 
-    $border-radius: round-borders(
+    $border-radius-handle: round-borders(
         if($border-radius, $border-radius, map-get($splitter-schema, 'border-radius')), 0, 2px
     );
 
@@ -40,7 +40,7 @@
         bar-color: $bar-color,
         handle-color: $handle-color,
         expander-color: $expander-color,
-        border-radius: $border-radius,
+        border-radius: $border-radius-handle,
         size: $size
     ));
 }

From 42ab929132c1b75644da28ee252865c95b25d496 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 2 Apr 2020 16:31:19 +0300
Subject: [PATCH 25/44] chore(*): Fix issue with [resizable] input on pane.

---
 .../splitter/splitter-bar/splitter-bar.component.ts   | 11 ++++++++++-
 .../src/lib/splitter/splitter.component.html          |  6 +++---
 .../src/lib/splitter/splitter.component.ts            | 11 +++++------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index 683549a33f3..4b7fc81746e 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -22,6 +22,15 @@ export class IgxSplitBarComponent {
     @Input()
     public type: SplitterType = SplitterType.Vertical;
 
+    /**
+     * Sets/gets `IgxSplitBarComponent` element order.
+     * @type SplitterType
+     */
+    @HostBinding('style.order')
+    @Input()
+    public order!: number;
+
+
     /**
      * Sets/gets the `SplitPaneComponent` associated with the current `SplitBarComponent`.
      * @memberof SplitBarComponent
@@ -82,7 +91,7 @@ export class IgxSplitBarComponent {
     }
 
     protected get resizeDisallowed() {
-        const relatedTabs = [this.pane, ... this.siblings];
+        const relatedTabs = this.siblings;
         return !!relatedTabs.find(x => x.resizable === false);
     }
 }
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.html b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
index 2c622b69540..b1aa112bd28 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
@@ -1,9 +1,9 @@
 <ng-content select="igx-splitter-pane"></ng-content>
-<ng-container *ngFor="let pane of panes; let last = last">
-    <igx-splitter-bar *ngIf="!last" [style.order]="pane.order + 1"
+<ng-container *ngFor="let pane of panes; let last = last; let index= index;">
+    <igx-splitter-bar *ngIf="!last" [order]='pane.order + 1'
                     [type]="type"
                     [pane]="pane"
-                    [siblings]='getSiblings(pane)'
+                    [siblings]='getPaneSiblingsByOrder(pane.order + 1, index)'
                     (moveStart)="onMoveStart($event)"
                     (moving)="onMoving($event)">
     </igx-splitter-bar>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index ae69dfe8ee2..0a6c3ea5fbb 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -164,13 +164,12 @@ export class IgxSplitterComponent implements AfterContentInit {
         });
     }
 
-    public getSiblings(pane: IgxSplitterPaneComponent): Array<IgxSplitterPaneComponent> {
+    /** @hidden @internal */
+    public getPaneSiblingsByOrder(order: number, barIndex: number): Array<IgxSplitterPaneComponent> {
         const panes = this.panes.toArray();
-        const index = panes.indexOf(pane);
-        const siblings = [panes[index + 1]];
-        if (index > 0) {
-            siblings.push(panes[index - 1]);
-        }
+        const prevPane = panes[order - barIndex - 1];
+        const nextPane = panes[order - barIndex];
+        const siblings = [prevPane, nextPane];
         return siblings;
     }
 }

From dbb31a442f7e11b4361ed1f85e06db8522d36371 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 2 Apr 2020 16:42:02 +0300
Subject: [PATCH 26/44] chore(*): Prevent pane from being resized when
 collapsed.

---
 projects/igniteui-angular/src/lib/splitter/splitter.component.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index a567e17e5f6..2cdf0ae19af 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -160,6 +160,7 @@ export class IgxSplitterComponent implements AfterContentInit {
             return;
         }
         pane.hidden = !pane.hidden;
+        pane.resizable = !pane.hidden;
         pane.onPaneToggle.emit(pane);
     }
 

From 02d95f6b8be05b1435865b31c970414e784574f4 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 2 Apr 2020 17:28:01 +0300
Subject: [PATCH 27/44] chore(*): Refactor toggle logic after changes to
 sibling collection.

---
 .../splitter-bar/splitter-bar.component.ts    | 21 +++++++++++++------
 .../src/lib/splitter/splitter.component.html  |  2 +-
 .../src/lib/splitter/splitter.component.ts    |  4 ++--
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index 7f014bf0459..b6f54257909 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -62,7 +62,7 @@ export class IgxSplitBarComponent {
      * An event that is emitted when collapsing the pane
      */
     @Output()
-    public collapse = new EventEmitter<IgxSplitterPaneComponent>();
+    public togglePane = new EventEmitter<IgxSplitterPaneComponent>();
     /**
      * A temporary holder for the pointer coordinates.
      * @private
@@ -74,14 +74,14 @@ export class IgxSplitBarComponent {
      * @hidden @internal
      */
     public get prevButtonHidden() {
-        return this.pane.hidden;
+        return this.siblings[0].hidden;
     }
 
     /**
      * @hidden @internal
      */
     public get nextButtonHidden() {
-        return this.siblings[0].hidden;
+        return this.siblings[1].hidden;
     }
     public onDragStart(event: IDragStartEventArgs) {
         if (this.resizeDisallowed) {
@@ -113,8 +113,17 @@ export class IgxSplitBarComponent {
         return !!relatedTabs.find(x => x.resizable === false);
     }
 
-    public onCollapsing(direction: boolean) {
-        const sibling = this.siblings[0];
-        this.collapse.emit(sibling.hidden && !direction || !this.pane.hidden && direction ? sibling : this.pane);
+    public onCollapsing(next: boolean) {
+        const prevSibling = this.siblings[0];
+        const nextSibling = this.siblings[1];
+        let target;
+        if (next) {
+            // if next is clicked when prev pane is hidden, show prev pane, else hide next pane.
+            target = prevSibling.hidden ? prevSibling : nextSibling;
+        } else {
+            // if prev is clicked when next pane is hidden, show next pane, else hide prev pane.
+            target = nextSibling.hidden ? nextSibling : prevSibling;
+        }
+        this.togglePane.emit(target);
     }
 }
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.html b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
index fa97b277bf1..8fdcfc42ddf 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
@@ -6,6 +6,6 @@
                     [siblings]='getPaneSiblingsByOrder(pane.order + 1, index)'
                     (moveStart)="onMoveStart($event)"
                     (moving)="onMoving($event)"
-                    (collapse)="onCollapsing($event)">
+                    (togglePane)="onToggling($event)">
     </igx-splitter-bar>
 </ng-container>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index 2cdf0ae19af..b90b48a2989 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -152,10 +152,10 @@ export class IgxSplitterComponent implements AfterContentInit {
     }
 
     /**
-     * This method performs the collapsing of the pane
+     * This method performs the toggling of the pane visibility
      * @param pane
      */
-    public onCollapsing(pane: IgxSplitterPaneComponent) {
+    public onToggling(pane: IgxSplitterPaneComponent) {
         if (!pane) {
             return;
         }

From 5062d8fcb47e8c768e42fcc505e8950cb7158f95 Mon Sep 17 00:00:00 2001
From: Martin Dragnev <MDragnev@infragistics.com>
Date: Thu, 2 Apr 2020 18:15:11 +0300
Subject: [PATCH 28/44] chore(*): Refactor expand buttons logic when two
 adjacent panes are collapsed

---
 .../src/lib/splitter/splitter-bar/splitter-bar.component.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index b6f54257909..a3762f938be 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -74,14 +74,14 @@ export class IgxSplitBarComponent {
      * @hidden @internal
      */
     public get prevButtonHidden() {
-        return this.siblings[0].hidden;
+        return this.siblings[0].hidden && !this.siblings[1].hidden;
     }
 
     /**
      * @hidden @internal
      */
     public get nextButtonHidden() {
-        return this.siblings[1].hidden;
+        return this.siblings[1].hidden && !this.siblings[0].hidden;
     }
     public onDragStart(event: IDragStartEventArgs) {
         if (this.resizeDisallowed) {

From 1fd16fb94a0f6178c9a77b08d74728e878781fb5 Mon Sep 17 00:00:00 2001
From: Vasil Mihalkov <VMihalkov@infragistics.com>
Date: Thu, 2 Apr 2020 22:51:51 +0300
Subject: [PATCH 29/44] feat(splitter): Added arrow keys interactions #6639

---
 .../splitter-bar/splitter-bar.component.html  |   2 +-
 .../splitter-bar/splitter-bar.component.ts    | 115 +++++++++++++++++-
 2 files changed, 114 insertions(+), 3 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
index 4a12fc2830a..d393c82dd7b 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
@@ -1,4 +1,4 @@
-<div class="igx-splitter__bar" [style.flex-direction]="direction" igxDrag [ghost]="false"
+<div tabindex="0" class="igx-splitter__bar" [style.flex-direction]="direction" igxDrag [ghost]="false"
 (dragStart)='onDragStart($event)'
 (dragMove)="onDragMove($event)">
     <div class="igx-splitter-bar-expander">
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index b9f4f7ae000..2139d6b8e6d 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, HostBinding, EventEmitter, Output } from '@angular/core';
+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 } from '../../directives/drag-drop/drag-drop.directive';
@@ -84,7 +84,6 @@ export class IgxSplitBarComponent {
         return this.type === SplitterType.Horizontal ? 'arrow_left' : 'arrow_drop_up';
     }
 
-
     /**
      * A temporary holder for the pointer coordinates.
      * @private
@@ -92,6 +91,67 @@ export class IgxSplitBarComponent {
      */
     private startPoint!: number;
 
+        /**
+     * A field that holds the initial size of the main `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
+     * @private
+     * @memberof SplitterComponent
+     */
+    private initialPaneSize!: number;
+
+    /**
+     * A field that holds the initial size of the sibling `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
+     * @private
+     * @memberof SplitterComponent
+     */
+    private initialSiblingSize!: number;
+
+    /**
+     * The sibling `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
+     * @private
+     * @memberof SplitterComponent
+     */
+    private sibling!: IgxSplitterPaneComponent;
+
+    /**
+    * @hidden
+    * @internal
+    */
+    @HostListener('keydown', ['$event'])
+    keyEvent(event: KeyboardEvent) {
+        const key = event.code.toLowerCase();
+        event.stopPropagation();
+        if (this.pane.resizable && this.siblings[0].resizable) {
+            switch (key) {
+                case 'arrowup':
+                    if (this.type === 1) {
+                        event.preventDefault();
+                        this.moveUpOrLeft();
+                    }
+                    break;
+                case 'arrowdown':
+                    if (this.type === 1) {
+                        event.preventDefault();
+                        this.moveDownOrRight();
+                    }
+                    break;
+                case 'arrowleft':
+                    if (this.type === 0) {
+                        event.preventDefault();
+                        this.moveUpOrLeft();
+                    }
+                    break;
+                case 'arrowright':
+                    if (this.type === 0) {
+                        event.preventDefault();
+                        this.moveDownOrRight();
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+
     public onDragStart(event: IDragStartEventArgs) {
         if (this.resizeDisallowed) {
             event.cancel = true;
@@ -122,4 +182,55 @@ export class IgxSplitBarComponent {
         return !!relatedTabs.find(x => x.resizable === false);
     }
 
+    private moveUpOrLeft() {
+        this.panesInitialization();
+
+        const min = parseInt(this.pane.minSize, 10) || 0;
+        const max = parseInt(this.pane.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
+        const minSibling = parseInt(this.sibling.minSize, 10) || 0;
+        const maxSibling = parseInt(this.sibling.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
+
+        const paneSize = this.initialPaneSize - 10;
+        const siblingSize = this.initialSiblingSize + 10;
+        if (paneSize < min || paneSize > max || siblingSize < minSibling || siblingSize > maxSibling) {
+            return;
+        }
+
+        this.pane.size = paneSize + 'px';
+        this.sibling.size = siblingSize + 'px';
+    }
+
+    private moveDownOrRight() {
+        this.panesInitialization();
+
+        const min = parseInt(this.pane.minSize, 10) || 0;
+        const max = parseInt(this.pane.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
+        const minSibling = parseInt(this.sibling.minSize, 10) || 0;
+        const maxSibling = parseInt(this.sibling.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
+
+        const paneSize = this.initialPaneSize + 10;
+        const siblingSize = this.initialSiblingSize - 10;
+        if (paneSize < min || paneSize > max || siblingSize < minSibling || siblingSize > maxSibling) {
+            return;
+        }
+
+        this.pane.size = paneSize + 'px';
+        this.sibling.size = siblingSize + 'px';
+    }
+
+    private panesInitialization() {
+        this.sibling = this.siblings[0];
+
+        const paneRect = this.pane.element.getBoundingClientRect();
+        this.initialPaneSize = this.type === SplitterType.Horizontal ? paneRect.width : paneRect.height;
+        if (this.pane.size === 'auto') {
+            this.pane.size = this.type === SplitterType.Horizontal ? paneRect.width : paneRect.height;
+        }
+
+        const siblingRect = this.sibling.element.getBoundingClientRect();
+        this.initialSiblingSize = this.type === SplitterType.Horizontal ? siblingRect.width : siblingRect.height;
+        if (this.sibling.size === 'auto') {
+            this.sibling.size = this.type === SplitterType.Horizontal ? siblingRect.width : siblingRect.height;
+        }
+    }
 }

From 76a5bd25e61f5cd3104f843138ce6efaf462541c Mon Sep 17 00:00:00 2001
From: Vasil Mihalkov <VMihalkov@infragistics.com>
Date: Fri, 3 Apr 2020 10:59:59 +0300
Subject: [PATCH 30/44] feat(splitter): Added tests for arrow keys #6639

---
 .../splitter-bar/splitter-bar.component.ts    |  2 +-
 .../lib/splitter/splitter.component.spec.ts   | 61 ++++++++++++++++++-
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index 2139d6b8e6d..0689bf701d0 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -118,7 +118,7 @@ export class IgxSplitBarComponent {
     */
     @HostListener('keydown', ['$event'])
     keyEvent(event: KeyboardEvent) {
-        const key = event.code.toLowerCase();
+        const key = event.key.toLowerCase();
         event.stopPropagation();
         if (this.pane.resizable && this.siblings[0].resizable) {
             switch (key) {
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
index 63353746689..d91f79e3021 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
@@ -1,9 +1,10 @@
 import { IgxSplitterModule } from './splitter.module';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { TestBed, async } from '@angular/core/testing';
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, DebugElement } from '@angular/core';
 import { SplitterType, IgxSplitterComponent } from './splitter.component';
 import { By } from '@angular/platform-browser';
+import { UIInteractions } from '../test-utils/ui-interactions.spec';
 
 
 const SPLITTERBAR_CLASS = 'igx-splitter-bar';
@@ -132,6 +133,64 @@ describe('IgxSplitter', () => {
         expect(args.cancel).toBeTruthy();
     });
 
+    it('should allow resizing with up/down arrow keys', () => {
+        fixture.componentInstance.type = SplitterType.Vertical;
+        fixture.detectChanges();
+        const pane1 =  splitter.panes.toArray()[0];
+        const pane2 = splitter.panes.toArray()[1];
+        expect(pane1.size).toBe('auto');
+        expect(pane2.size).toBe('auto');
+        const pane1_originalSize = pane1.element.offsetHeight;
+        const pane2_originalSize = pane2.element.offsetHeight;
+        const splitterBarComponent: DebugElement = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
+        splitterBarComponent.nativeElement.focus();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowUp', splitterBarComponent);
+        fixture.detectChanges();
+        expect(pane1.size).toBe(pane1_originalSize - 10 + 'px');
+        expect(pane2.size).toBe(pane2_originalSize + 10 + 'px');
+
+        UIInteractions.triggerEventHandlerKeyDown('ArrowDown', splitterBarComponent);
+        UIInteractions.triggerEventHandlerKeyDown('ArrowDown', splitterBarComponent);
+        fixture.detectChanges();
+        expect(pane1.size).toBe(pane1_originalSize + 10 + 'px');
+        expect(pane2.size).toBe(pane2_originalSize - 10 + 'px');
+
+        pane2.resizable = false;
+        UIInteractions.triggerEventHandlerKeyDown('ArrowDown', splitterBarComponent);
+        fixture.detectChanges();
+        expect(pane1.size).toBe(pane1_originalSize + 10 + 'px');
+        expect(pane2.size).toBe(pane2_originalSize - 10 + 'px');
+    });
+
+    it('should allow resizing with left/right arrow keys', () => {
+        fixture.componentInstance.type = SplitterType.Horizontal;
+        fixture.detectChanges();
+        const pane1 =  splitter.panes.toArray()[0];
+        const pane2 = splitter.panes.toArray()[1];
+        expect(pane1.size).toBe('auto');
+        expect(pane2.size).toBe('auto');
+        const pane1_originalSize = pane1.element.offsetWidth;
+        const pane2_originalSize = pane2.element.offsetWidth;
+        const splitterBarComponent: DebugElement = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
+        splitterBarComponent.nativeElement.focus();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowLeft', splitterBarComponent);
+        fixture.detectChanges();
+        expect(parseFloat(pane1.size)).toBeCloseTo(pane1_originalSize - 10, 0);
+        expect(parseFloat(pane2.size)).toBeCloseTo(pane2_originalSize + 10, 0);
+
+        UIInteractions.triggerEventHandlerKeyDown('ArrowRight', splitterBarComponent);
+        UIInteractions.triggerEventHandlerKeyDown('ArrowRight', splitterBarComponent);
+        fixture.detectChanges();
+        expect(parseFloat(pane1.size)).toBeCloseTo(pane1_originalSize + 10, 0);
+        expect(parseFloat(pane2.size)).toBeCloseTo(pane2_originalSize - 10, 0);
+
+        pane1.resizable = false;
+        UIInteractions.triggerEventHandlerKeyDown('ArrowRight', splitterBarComponent);
+        fixture.detectChanges();
+        expect(parseFloat(pane1.size)).toBeCloseTo(pane1_originalSize + 10, 0);
+        expect(parseFloat(pane2.size)).toBeCloseTo(pane2_originalSize - 10, 0);
+    });
+
 });
 
 @Component({

From aa7d92caa074ef4f9f5ae542f0752ec7ce6990b1 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 3 Apr 2020 15:08:58 +0300
Subject: [PATCH 31/44] chore(*): Add more complex sample with grids Reset
 sizes if splitter type changes. Add  missing event.

---
 .../splitter-pane/splitter-pane.component.ts  |  7 ++
 .../src/lib/splitter/splitter.component.ts    | 13 ++-
 src/app/splitter/slitter.sample.ts            | 87 ++++++++++++++++++-
 src/app/splitter/splitter.sample.html         | 55 +++++++-----
 src/app/splitter/splitter.sample.scss         |  4 +
 5 files changed, 142 insertions(+), 24 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
index 218edaacbc9..6921ac02016 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-pane/splitter-pane.component.ts
@@ -24,8 +24,15 @@ export class IgxSplitterPaneComponent {
     set size(value) {
         this._size = value;
         this.el.nativeElement.style.flex = this.flex;
+        this.sizeChange.emit(value);
     }
 
+    /**
+     * @hidden @internal
+     */
+    @Output()
+    public sizeChange = new EventEmitter<string>();
+
     /**
      * Sets/gets the minimum allowable size of the current `IgxSplitterPaneComponent`.
      */
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index b90b48a2989..8438dcf32b7 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -24,14 +24,23 @@ export enum SplitterType {
     templateUrl: './splitter.component.html'
 })
 export class IgxSplitterComponent implements AfterContentInit {
-
+    private _type: SplitterType = SplitterType.Vertical;
     /**
      * Sets/gets `SplitterComponent` orientation.
      * @type SplitterType
      * @memberof SplitterComponent
      */
     @Input()
-    public type: SplitterType = SplitterType.Vertical;
+    get type() {
+        return this._type;
+    }
+    set type(value) {
+        this._type = value;
+        if (this.panes) {
+            // if type is changed runtime, should reset sizes.
+            this.panes.forEach(x => x.size='auto');
+        }        
+    }
 
     @Output()
     public panesChange = new EventEmitter<IgxSplitterPaneComponent[]>();
diff --git a/src/app/splitter/slitter.sample.ts b/src/app/splitter/slitter.sample.ts
index 987709ffb32..6e209b779ce 100644
--- a/src/app/splitter/slitter.sample.ts
+++ b/src/app/splitter/slitter.sample.ts
@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { SplitterType } from 'projects/igniteui-angular/src/lib/splitter/splitter.component';
+import { RemoteService } from '../shared/remote.service';
+import { IgxGridComponent } from 'igniteui-angular';
 
 @Component({
     selector: 'app-splitter-sample',
@@ -6,4 +9,86 @@ import { Component } from '@angular/core';
     templateUrl: 'splitter.sample.html'
 })
 export class SplitterSampleComponent {
+    type = SplitterType.Horizontal;
+    data1 = [];
+    data2 = [];
+    data3 = [];
+    primaryKeys = [
+        { name: 'CustomerID', type: 'string', level: 0 },
+        { name: 'OrderID', type: 'number', level: 1 },
+        { name: 'EmployeeID', type: 'number', level: 2 },
+        { name: 'ProductID', type: 'number', level: 2 }
+    ];
+
+    @ViewChild('grid1', { static: true })
+    grid1: IgxGridComponent;
+
+    @ViewChild('grid2', { static: true })
+    grid2: IgxGridComponent;
+
+    @ViewChild('grid3', { static: true })
+    grid3: IgxGridComponent;
+
+    constructor(private remoteService: RemoteService) {
+        remoteService.url = 'https://services.odata.org/V4/Northwind/Northwind.svc/';
+
+        this.remoteService.urlBuilder = (dataState) => this.buildUrl(dataState);
+    }
+
+    public buildUrl(dataState) {
+        let qS = '';
+        if (dataState) {
+            qS += `${dataState.key}?`;
+
+            const level = dataState.level;
+            if (level > 0) {
+                const parentKey = this.primaryKeys.find((key) => key.level === level - 1);
+                const parentID = typeof dataState.parentID !== 'object' ? dataState.parentID : dataState.parentID[parentKey.name];
+
+                if (parentKey.type === 'string') {
+                    qS += `$filter=${parentKey.name} eq '${parentID}'`;
+                } else {
+                    qS += `$filter=${parentKey.name} eq ${parentID}`;
+                }
+            }
+        }
+        return `${this.remoteService.url}${qS}`;
+    }
+
+    changeType() {
+        if (this.type === SplitterType.Horizontal) {
+            this.type = SplitterType.Vertical;
+        } else {
+            this.type = SplitterType.Horizontal;
+        }
+    }
+
+    public ngAfterViewInit() {
+        this.remoteService.getData({ parentID: null, level: 0, key: 'Customers' }, (data) => {
+            this.data1 = data['value'];
+            this.grid1.isLoading = false;
+            this.grid1.selectRows([this.data1[0].CustomerID], true);
+            const evt = { newSelection: [this.data1[0].CustomerID]};
+            this.onCustomerSelection(evt);
+        });
+    }
+
+    public onCustomerSelection(evt) {
+        const newSelection = evt.newSelection[0];
+        this.remoteService.getData({ parentID: newSelection, level: 1, key: 'Orders' }, (data) => {
+            this.data2 = data['value'];
+            this.grid2.isLoading = false;
+            this.grid2.selectRows([this.data2[0].OrderID], true);
+            const evt = { newSelection: [this.data2[0].OrderID]};
+            this.onOrderSelection(evt);
+        });
+    }
+
+    public onOrderSelection(evt) {
+        const newSelection = evt.newSelection[0];
+        this.remoteService.getData({ parentID: newSelection, level: 2, key: 'Order_Details' }, (data) => {
+            this.data3 = data['value'];
+            this.grid3.isLoading = false;
+        });
+    }
 }
diff --git a/src/app/splitter/splitter.sample.html b/src/app/splitter/splitter.sample.html
index 396af3f35ad..3430ec07379 100644
--- a/src/app/splitter/splitter.sample.html
+++ b/src/app/splitter/splitter.sample.html
@@ -1,39 +1,52 @@
-<div>Vertical</div>
 <div class="sample-wrapper">
-    <igx-splitter [type]="0">
-        <igx-splitter-pane [minSize]='100'>
-            <div style='height:500px;'>
+    <igx-switch (change)='changeType()' style="padding-left: 10px">Toggle Splitter Direction</igx-switch>
+    <div>Simple sample</div>
+    <igx-splitter [type]="type" style='height: 30vh;'>
+        <igx-splitter-pane>
+            <div style='width:100%;'>
                Pane 1
             </div>
         </igx-splitter-pane>
         <igx-splitter-pane>
-            <div style='height:500px;'>
+            <div style='width:100%;'>
                 Pane 2
              </div>
         </igx-splitter-pane>
         <igx-splitter-pane>
-            <div style='height:500px;'>
+            <div style='width:100%;'>
                 Pane 3
              </div>
         </igx-splitter-pane>
     </igx-splitter>
-
-<div>Horizontal</div>
-    <igx-splitter [type]="1">
-        <igx-splitter-pane>
-            <div style='width:200px; height:100px;'>
-               Pane 1
-            </div>
+    <div>Sample with Grids</div>
+    <igx-splitter [type]="type" style='height: 60vh;'>
+        <igx-splitter-pane [minSize]='100' (sizeChange)='grid1.notifyChanges(true)'>
+            <igx-grid #grid1 class="grid" displayDensity="cosy" [rowSelection]="'single'" (onRowSelectionChange)="onCustomerSelection($event)" 
+            [data]="data1" [isLoading]="true" [primaryKey]="'CustomerID'" [autoGenerate]="false">
+                <igx-column field="CustomerID" [hidden]='true'></igx-column>
+                <igx-column field="CompanyName"></igx-column>
+                <igx-column field="ContactName"></igx-column>
+                <igx-column field="ContactTitle"></igx-column>
+                <igx-column field="Country"></igx-column>
+            </igx-grid>
         </igx-splitter-pane>
-        <igx-splitter-pane>
-            <div style='width:200px;height:100px;'>
-                Pane 2
-             </div>
+        <igx-splitter-pane (sizeChange)='grid2.notifyChanges(true)'>
+            <igx-grid #grid2 class="grid" [rowSelection]="'single'" (onRowSelectionChange)="onOrderSelection($event)"  displayDensity="cosy" [data]="data2" [isLoading]="true" [primaryKey]="'OrderID'" [autoGenerate]="false">
+                <igx-column field="OrderID" [hidden]='true'></igx-column>
+                <igx-column field="OrderDate"></igx-column>
+                <igx-column field="ShipCountry"></igx-column>
+                <igx-column field="ShipCity"></igx-column>
+                <igx-column field="ShipAddress"></igx-column>
+            </igx-grid>
         </igx-splitter-pane>
-        <igx-splitter-pane>
-            <div style='width:200px;height:100px;'>
-                Pane 3
-             </div>
+        <igx-splitter-pane (sizeChange)='grid3.notifyChanges(true)'>
+            <igx-grid #grid3 class="grid" displayDensity="cosy" [data]="data3" [isLoading]="true" [primaryKey]="'ProductID'" [autoGenerate]="false">
+                <igx-column field="ProductID" [hidden]='true'></igx-column>
+                <igx-column field="UnitPrice"></igx-column>
+                <igx-column field="Quantity"></igx-column>
+                <igx-column field="Discount"></igx-column>
+            </igx-grid>
         </igx-splitter-pane>
     </igx-splitter>
+
 </div>
diff --git a/src/app/splitter/splitter.sample.scss b/src/app/splitter/splitter.sample.scss
index 8fc5388db1a..89de093521f 100644
--- a/src/app/splitter/splitter.sample.scss
+++ b/src/app/splitter/splitter.sample.scss
@@ -1,2 +1,6 @@
 @import '../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities';
 
+.grid {
+    margin-right: 5px;
+    margin-left: 5px;
+}
\ No newline at end of file

From d3b6a387b7ea0ab5bdbb8438ee4ad260edabe8cf Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Fri, 3 Apr 2020 15:12:29 +0300
Subject: [PATCH 32/44] chore(*): Fix lint.

---
 .../igniteui-angular/src/lib/splitter/splitter.component.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index 8438dcf32b7..c04ef2b013b 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -38,8 +38,8 @@ export class IgxSplitterComponent implements AfterContentInit {
         this._type = value;
         if (this.panes) {
             // if type is changed runtime, should reset sizes.
-            this.panes.forEach(x => x.size='auto');
-        }        
+            this.panes.forEach(x => x.size = 'auto');
+        }
     }
 
     @Output()

From b561ce897aad3c10f93d434856151631a756191d Mon Sep 17 00:00:00 2001
From: Martin Dragnev <MDragnev@infragistics.com>
Date: Fri, 3 Apr 2020 17:42:07 +0300
Subject: [PATCH 33/44] chore(*): Adding tests for pane toggle

---
 .../lib/splitter/splitter.component.spec.ts   | 96 ++++++++++++++++++-
 1 file changed, 95 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
index 2fbb64ada68..2254b4c45c9 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
@@ -131,9 +131,78 @@ describe('IgxSplitter', () => {
         splitterBarComponent.onDragStart(args);
         expect(args.cancel).toBeTruthy();
     });
-
 });
 
+describe('IgxSplitter pane toggle', () => {
+    configureTestSuite();
+    beforeAll(async(() => {
+
+        return TestBed.configureTestingModule({
+            declarations: [ SplitterTogglePaneComponent ],
+            imports: [
+                IgxSplitterModule
+            ]
+        }).compileComponents();
+    }));
+
+    let fixture, splitter;
+    beforeEach(async(() => {
+        fixture = TestBed.createComponent(SplitterTogglePaneComponent);
+        fixture.detectChanges();
+        splitter = fixture.componentInstance.splitter;
+    }));
+
+    it('should collapse/expand panes', () => {
+        const pane1 = splitter.panes.toArray()[0];
+        const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context;
+
+        // collapse left sibling pane
+        splitterBarComponent.onCollapsing(0);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeTruthy();
+
+        // expand left sibling pane
+        splitterBarComponent.onCollapsing(1);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeFalsy();
+    });
+
+    it('should be able to expand both siblings when they are collapsed', () => {
+        const panes = splitter.panes.toArray();
+        const pane1 = panes[0];
+        const pane2 = panes[1];
+        const splitterBarComponents = fixture.debugElement.queryAll(By.css(SPLITTERBAR_CLASS));
+        const splitterBar1 = splitterBarComponents[0].context;
+        const splitterBar2 = splitterBarComponents[1].context;
+
+        splitterBar1.onCollapsing(0);
+        splitterBar2.onCollapsing(0);
+        fixture.detectChanges();
+
+        expect(pane1.hidden).toBeTruthy();
+        expect(pane2.hidden).toBeTruthy();
+
+        splitterBar1.onCollapsing(1);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeFalsy();
+    });
+
+    it('should not be able to resize a pane when it is hidden', () => {
+        const pane1 = splitter.panes.toArray()[0];
+        const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context;
+
+        // collapse left sibling pane
+        splitterBarComponent.onCollapsing(0);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeTruthy();
+        expect(pane1.resizable).toBeFalsy();
+
+        splitterBarComponent.onCollapsing(1);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeFalsy();
+        expect(pane1.resizable).toBeTruthy();
+    });
+});
 @Component({
     template: `
     <igx-splitter [type]="type">
@@ -155,3 +224,28 @@ export class SplitterTestComponent {
     @ViewChild(IgxSplitterComponent, { static: true })
     public splitter: IgxSplitterComponent;
 }
+
+@Component({
+    template: `
+    <igx-splitter [type]="type">
+    <igx-splitter-pane>
+        <div style='height:200px;'>
+           Pane 1
+        </div>
+    </igx-splitter-pane>
+    <igx-splitter-pane>
+        <div style='height:200px;'>
+            Pane 2
+         </div>
+    </igx-splitter-pane>
+    <igx-splitter-pane>
+        <div style='height:200px;'>
+            Pane 3
+         </div>
+    </igx-splitter-pane>
+</igx-splitter>
+    `,
+})
+
+export class SplitterTogglePaneComponent extends SplitterTestComponent {
+}

From f1e8d3026d3c8d3941c1a3624482b63dca07dd64 Mon Sep 17 00:00:00 2001
From: Vasil Mihalkov <VMihalkov@infragistics.com>
Date: Mon, 6 Apr 2020 09:08:15 +0300
Subject: [PATCH 34/44] feat(splitter): Allow expand/collapse with keyboard
 #6639

---
 .../splitter-bar/splitter-bar.component.ts    | 53 +++++++++++++------
 .../lib/splitter/splitter.component.spec.ts   | 46 ++++++++++++++++
 2 files changed, 84 insertions(+), 15 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index c697a783877..b48421b9b51 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -107,43 +107,66 @@ export class IgxSplitBarComponent {
     private sibling!: IgxSplitterPaneComponent;
 
     /**
-    * @hidden
-    * @internal
-    */
+     * @hidden
+     * @internal
+     */
     @HostListener('keydown', ['$event'])
     keyEvent(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
+        const ctrl = event.ctrlKey;
         event.stopPropagation();
-        if (this.pane.resizable && this.siblings[0].resizable) {
             switch (key) {
                 case 'arrowup':
                     if (this.type === 1) {
-                        event.preventDefault();
-                        this.moveUpOrLeft();
+                        if (ctrl) {
+                            this.pane.hidden ? this.onCollapsing(true) : this.onCollapsing(false);
+                            break;
+                        }
+                        if (this.pane.resizable && this.siblings[1].resizable) {
+                            event.preventDefault();
+                            this.moveUpOrLeft();
+                        }
                     }
                     break;
                 case 'arrowdown':
                     if (this.type === 1) {
-                        event.preventDefault();
-                        this.moveDownOrRight();
+                        if (ctrl) {
+                            this.siblings[1].hidden ? this.onCollapsing(false) : this.onCollapsing(true);
+                            break;
+                        }
+                        if (this.pane.resizable && this.siblings[1].resizable) {
+                            event.preventDefault();
+                            this.moveDownOrRight();
+                        }
                     }
                     break;
                 case 'arrowleft':
                     if (this.type === 0) {
-                        event.preventDefault();
-                        this.moveUpOrLeft();
+                        if (ctrl) {
+                            this.pane.hidden ? this.onCollapsing(true) : this.onCollapsing(false);
+                            break;
+                        }
+                        if (this.pane.resizable && this.siblings[1].resizable) {
+                            event.preventDefault();
+                            this.moveUpOrLeft();
+                        }
                     }
                     break;
                 case 'arrowright':
                     if (this.type === 0) {
-                        event.preventDefault();
-                        this.moveDownOrRight();
+                        if (ctrl) {
+                            this.siblings[1].hidden ? this.onCollapsing(false) : this.onCollapsing(true);
+                            break;
+                        }
+                        if (this.pane.resizable && this.siblings[1].resizable) {
+                            event.preventDefault();
+                            this.moveDownOrRight();
+                        }
                     }
                     break;
                 default:
                     break;
             }
-        }
     }
 
     public get nextButtonHidden() {
@@ -216,7 +239,7 @@ export class IgxSplitBarComponent {
     }
 
     private panesInitialization() {
-        this.sibling = this.siblings[0];
+        this.sibling = this.siblings[1];
 
         const paneRect = this.pane.element.getBoundingClientRect();
         this.initialPaneSize = this.type === SplitterType.Horizontal ? paneRect.width : paneRect.height;
@@ -230,7 +253,7 @@ export class IgxSplitBarComponent {
             this.sibling.size = this.type === SplitterType.Horizontal ? siblingRect.width : siblingRect.height;
         }
     }
-    
+
     public onCollapsing(next: boolean) {
         const prevSibling = this.siblings[0];
         const nextSibling = this.siblings[1];
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
index ce034e36f21..50dc1333b80 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
@@ -191,6 +191,52 @@ describe('IgxSplitter', () => {
         expect(parseFloat(pane2.size)).toBeCloseTo(pane2_originalSize - 10, 0);
     });
 
+    fit('should allow expand/collapse with Ctrl + up/down arrow keys', () => {
+        fixture.componentInstance.type = SplitterType.Vertical;
+        fixture.detectChanges();
+        const pane1 =  splitter.panes.toArray()[0];
+        const pane2 = splitter.panes.toArray()[1];
+        expect(pane1.size).toBe('auto');
+        expect(pane2.size).toBe('auto');
+        const splitterBarComponent: DebugElement = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
+        splitterBarComponent.nativeElement.focus();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowUp', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeTruthy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowDown', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeFalsy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowDown', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane2.hidden).toBeTruthy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowUp', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane2.hidden).toBeFalsy();
+    });
+
+    fit('should allow expand/collapse with Ctrl + left/right arrow keys', () => {
+        fixture.componentInstance.type = SplitterType.Horizontal;
+        fixture.detectChanges();
+        const pane1 =  splitter.panes.toArray()[0];
+        const pane2 = splitter.panes.toArray()[1];
+        expect(pane1.size).toBe('auto');
+        expect(pane2.size).toBe('auto');
+        const splitterBarComponent: DebugElement = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS));
+        splitterBarComponent.nativeElement.focus();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowLeft', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeTruthy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowRight', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane1.hidden).toBeFalsy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowRight', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane2.hidden).toBeTruthy();
+        UIInteractions.triggerEventHandlerKeyDown('ArrowLeft', splitterBarComponent, false, false, true);
+        fixture.detectChanges();
+        expect(pane2.hidden).toBeFalsy();
+    });
+
 });
 
 @Component({

From affba94304efc6e2778fb8c43ab2818a3d19df00 Mon Sep 17 00:00:00 2001
From: Vasil Mihalkov <VMihalkov@infragistics.com>
Date: Mon, 6 Apr 2020 10:02:50 +0300
Subject: [PATCH 35/44] feat(splitter): Removed fit #6639

---
 .../src/lib/splitter/splitter.component.spec.ts               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
index 50dc1333b80..bae74156b2d 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts
@@ -191,7 +191,7 @@ describe('IgxSplitter', () => {
         expect(parseFloat(pane2.size)).toBeCloseTo(pane2_originalSize - 10, 0);
     });
 
-    fit('should allow expand/collapse with Ctrl + up/down arrow keys', () => {
+    it('should allow expand/collapse with Ctrl + up/down arrow keys', () => {
         fixture.componentInstance.type = SplitterType.Vertical;
         fixture.detectChanges();
         const pane1 =  splitter.panes.toArray()[0];
@@ -214,7 +214,7 @@ describe('IgxSplitter', () => {
         expect(pane2.hidden).toBeFalsy();
     });
 
-    fit('should allow expand/collapse with Ctrl + left/right arrow keys', () => {
+    it('should allow expand/collapse with Ctrl + left/right arrow keys', () => {
         fixture.componentInstance.type = SplitterType.Horizontal;
         fixture.detectChanges();
         const pane1 =  splitter.panes.toArray()[0];

From 8948e63d1b12253f2b5b0aea6e2c9008fa193e36 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Mon, 6 Apr 2020 12:44:54 +0300
Subject: [PATCH 36/44] chore(*): Remove margins for sample.

---
 src/app/splitter/splitter.sample.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/app/splitter/splitter.sample.scss b/src/app/splitter/splitter.sample.scss
index 89de093521f..ef4134bb18c 100644
--- a/src/app/splitter/splitter.sample.scss
+++ b/src/app/splitter/splitter.sample.scss
@@ -1,6 +1 @@
 @import '../../../projects/igniteui-angular/src/lib/core/styles/themes/utilities';
-
-.grid {
-    margin-right: 5px;
-    margin-left: 5px;
-}
\ No newline at end of file

From c94ef920547532d295dc0ede3d910bed0d73a347 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Mon, 6 Apr 2020 17:40:36 +0300
Subject: [PATCH 37/44] chore(*): Add short description for igxSplitter to the
 Changelog.

---
 CHANGELOG.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f12d0b1ae6..76853c18d1a 100644
--- a/CHANGELOG.md
+++ b/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`.

From 14b232756d480a5441ff22c50e4ec0ebadc82791 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Tue, 7 Apr 2020 19:23:38 +0300
Subject: [PATCH 38/44] fix(igxSplitter): Reset sibling pane sizes when pane is
 collapsed.

---
 .../src/lib/splitter/splitter.component.ts      | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index c04ef2b013b..5a2c932976c 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -168,6 +168,8 @@ export class IgxSplitterComponent implements AfterContentInit {
         if (!pane) {
             return;
         }
+        // reset sibling sizes when pane is collapsed.
+        this._getSiblings(pane).forEach(sibling => sibling.size = 'auto');
         pane.hidden = !pane.hidden;
         pane.resizable = !pane.hidden;
         pane.onPaneToggle.emit(pane);
@@ -194,4 +196,19 @@ export class IgxSplitterComponent implements AfterContentInit {
         const siblings = [prevPane, nextPane];
         return siblings;
     }
+
+
+    /** @hidden @internal */
+    private _getSiblings(pane: IgxSplitterPaneComponent) {
+        const panes = this.panes.toArray();
+        const index = panes.indexOf(pane);
+        const siblings = [];
+        if (index !== 0) {
+            siblings.push(panes[index - 1]);
+        }
+        if (index !== panes.length - 1) {
+            siblings.push(panes[index + 1]);
+        }
+        return siblings;
+    }
 }

From 1aa058b4763c14255ed03fa146646f28c358cefa Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Wed, 8 Apr 2020 15:01:27 +0300
Subject: [PATCH 39/44] chore(*): Minor API doc changes. Adding sample with
 nested splitters.

---
 .../src/lib/splitter/splitter.component.html  |  2 +-
 .../src/lib/splitter/splitter.component.ts    | 17 +++++++------
 src/app/splitter/splitter.sample.html         | 24 +++++++++++++++++++
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.html b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
index 8fdcfc42ddf..087c7895f52 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.html
@@ -6,6 +6,6 @@
                     [siblings]='getPaneSiblingsByOrder(pane.order + 1, index)'
                     (moveStart)="onMoveStart($event)"
                     (moving)="onMoving($event)"
-                    (togglePane)="onToggling($event)">
+                    (togglePane)="togglePane($event)">
     </igx-splitter-bar>
 </ng-container>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
index 5a2c932976c..e011f7181e9 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts
@@ -42,6 +42,9 @@ export class IgxSplitterComponent implements AfterContentInit {
         }
     }
 
+    /**
+     * Event emitted when panes collection is changed.
+     */
     @Output()
     public panesChange = new EventEmitter<IgxSplitterPaneComponent[]>();
 
@@ -105,6 +108,7 @@ export class IgxSplitterComponent implements AfterContentInit {
      */
     private sibling!: IgxSplitterPaneComponent;
 
+    /** @hidden @internal */
     public ngAfterContentInit(): void {
         this.assignFlexOrder();
         this.panes.changes.subscribe(() => {
@@ -116,10 +120,10 @@ export class IgxSplitterComponent implements AfterContentInit {
     }
 
     /**
+     * @hidden @internal
      * This method performs some initialization logic when the user starts dragging the gripper between each couple of panes.
      * @param  {IgxSplitterPaneComponent} pane
      * The main `IgxSplitterPaneComponent` associated with the currently dragged `SplitBarComponent`.
-     * @return {void}@memberof SplitterComponent
      */
     public onMoveStart(pane: IgxSplitterPaneComponent) {
         const panes = this.panes.toArray();
@@ -140,9 +144,9 @@ export class IgxSplitterComponent implements AfterContentInit {
     }
 
     /**
+     * @hidden @internal
      * This method performs some calculations concerning the sizes each couple of panes while the gripper between them is being dragged.
      * @param  {number} delta The differnce along the X (or Y) axis between the initial and the current point while dragging the gripper.
-     * @return {void}@memberof SplitterComponent
      */
     public onMoving(delta: number) {
         const min = parseInt(this.pane.minSize, 10) || 0;
@@ -161,10 +165,10 @@ export class IgxSplitterComponent implements AfterContentInit {
     }
 
     /**
-     * This method performs the toggling of the pane visibility
-     * @param pane
+     * Toggles pane visibility.
+     * @param pane - The pane to be hidden/shown.
      */
-    public onToggling(pane: IgxSplitterPaneComponent) {
+    public togglePane(pane: IgxSplitterPaneComponent) {
         if (!pane) {
             return;
         }
@@ -176,9 +180,8 @@ export class IgxSplitterComponent implements AfterContentInit {
     }
 
     /**
+     * @hidden @internal
      * This method takes care for assigning an `order` property on each `IgxSplitterPaneComponent`.
-     * @private
-     * @return {void}@memberof SplitterComponent
      */
     private assignFlexOrder() {
         let k = 0;
diff --git a/src/app/splitter/splitter.sample.html b/src/app/splitter/splitter.sample.html
index 3430ec07379..f1712652efe 100644
--- a/src/app/splitter/splitter.sample.html
+++ b/src/app/splitter/splitter.sample.html
@@ -18,6 +18,30 @@
              </div>
         </igx-splitter-pane>
     </igx-splitter>
+    <div>Nested splitters sample</div>
+    <igx-splitter style='height: 30vh;' [type]='0' >
+        <igx-splitter-pane>
+            <igx-splitter [type]='1' [style.width]='"100%"'>
+                <igx-splitter-pane>
+                    Pane1.1
+                </igx-splitter-pane>
+                <igx-splitter-pane>
+                    Pane1.2
+                </igx-splitter-pane>
+            </igx-splitter>
+        </igx-splitter-pane>
+        <igx-splitter-pane>
+            <igx-splitter [type]='1' [style.width]='"100%"'>
+                <igx-splitter-pane>
+                    Pane2.1
+                </igx-splitter-pane>
+                <igx-splitter-pane>
+                    Pane2.2
+                </igx-splitter-pane>
+            </igx-splitter>
+        </igx-splitter-pane>
+    </igx-splitter>
+
     <div>Sample with Grids</div>
     <igx-splitter [type]="type" style='height: 60vh;'>
         <igx-splitter-pane [minSize]='100' (sizeChange)='grid1.notifyChanges(true)'>

From 6a710cf464c82d8f53e1723a11b8f9e7ea561a53 Mon Sep 17 00:00:00 2001
From: Vasil Mihalkov <VMihalkov@infragistics.com>
Date: Wed, 8 Apr 2020 18:00:07 +0300
Subject: [PATCH 40/44] feat(splitter): Apply suggested changes #6639

---
 .../splitter-bar/splitter-bar.component.html  |   2 +-
 .../splitter-bar/splitter-bar.component.ts    | 102 +++++-------------
 2 files changed, 27 insertions(+), 77 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
index 57c7cda7f47..56ed2251c48 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
@@ -1,4 +1,4 @@
-<div tabindex="0" class="igx-splitter-bar"
+<div class="igx-splitter-bar"
     [class.igx-splitter-bar--vertical]='type === 0'
     igxDrag
     [ghost]="false"
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index b48421b9b51..f8ab1ef77bc 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -30,6 +30,12 @@ export class IgxSplitBarComponent {
     @Input()
     public order!: number;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('attr.tabindex')
+    public tabindex = 0;
 
     /**
      * Sets/gets the `SplitPaneComponent` associated with the current `SplitBarComponent`.
@@ -77,14 +83,6 @@ export class IgxSplitBarComponent {
         return this.siblings[0].hidden && !this.siblings[1].hidden;
     }
 
-    get collapseNextIcon() {
-        return this.type === SplitterType.Horizontal ? 'arrow_right' : 'arrow_drop_down';
-    }
-
-    get collapsePrevIcon() {
-        return this.type === SplitterType.Horizontal ? 'arrow_left' : 'arrow_drop_up';
-    }
-
     /**
      * A field that holds the initial size of the main `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
      * @private
@@ -117,50 +115,54 @@ export class IgxSplitBarComponent {
         event.stopPropagation();
             switch (key) {
                 case 'arrowup':
-                    if (this.type === 1) {
+                    if (this.type === SplitterType.Vertical) {
                         if (ctrl) {
-                            this.pane.hidden ? this.onCollapsing(true) : this.onCollapsing(false);
+                            this.onCollapsing(false);
                             break;
                         }
-                        if (this.pane.resizable && this.siblings[1].resizable) {
+                        if (!this.resizeDisallowed) {
                             event.preventDefault();
-                            this.moveUpOrLeft();
+                            this.moveStart.emit(this.pane);
+                            this.moving.emit(10);
                         }
                     }
                     break;
                 case 'arrowdown':
-                    if (this.type === 1) {
+                    if (this.type === SplitterType.Vertical) {
                         if (ctrl) {
-                            this.siblings[1].hidden ? this.onCollapsing(false) : this.onCollapsing(true);
+                            this.onCollapsing(true);
                             break;
                         }
-                        if (this.pane.resizable && this.siblings[1].resizable) {
+                        if (!this.resizeDisallowed) {
                             event.preventDefault();
-                            this.moveDownOrRight();
+                            this.moveStart.emit(this.pane);
+                            this.moving.emit(-10);
                         }
                     }
                     break;
                 case 'arrowleft':
-                    if (this.type === 0) {
+                    if (this.type === SplitterType.Horizontal) {
                         if (ctrl) {
-                            this.pane.hidden ? this.onCollapsing(true) : this.onCollapsing(false);
+                            this.onCollapsing(false);
                             break;
                         }
-                        if (this.pane.resizable && this.siblings[1].resizable) {
+                        if (!this.resizeDisallowed) {
                             event.preventDefault();
-                            this.moveUpOrLeft();
+                            this.moveStart.emit(this.pane);
+                            this.moving.emit(10);
                         }
                     }
                     break;
                 case 'arrowright':
-                    if (this.type === 0) {
+                    if (this.type === SplitterType.Horizontal) {
                         if (ctrl) {
-                            this.siblings[1].hidden ? this.onCollapsing(false) : this.onCollapsing(true);
+                            this.onCollapsing(true);
                             break;
                         }
-                        if (this.pane.resizable && this.siblings[1].resizable) {
+                        if (!this.resizeDisallowed) {
                             event.preventDefault();
-                            this.moveDownOrRight();
+                            this.moveStart.emit(this.pane);
+                            this.moving.emit(-10);
                         }
                     }
                     break;
@@ -202,58 +204,6 @@ export class IgxSplitBarComponent {
         return !!relatedTabs.find(x => x.resizable === false);
     }
 
-    private moveUpOrLeft() {
-        this.panesInitialization();
-
-        const min = parseInt(this.pane.minSize, 10) || 0;
-        const max = parseInt(this.pane.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
-        const minSibling = parseInt(this.sibling.minSize, 10) || 0;
-        const maxSibling = parseInt(this.sibling.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
-
-        const paneSize = this.initialPaneSize - 10;
-        const siblingSize = this.initialSiblingSize + 10;
-        if (paneSize < min || paneSize > max || siblingSize < minSibling || siblingSize > maxSibling) {
-            return;
-        }
-
-        this.pane.size = paneSize + 'px';
-        this.sibling.size = siblingSize + 'px';
-    }
-
-    private moveDownOrRight() {
-        this.panesInitialization();
-
-        const min = parseInt(this.pane.minSize, 10) || 0;
-        const max = parseInt(this.pane.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
-        const minSibling = parseInt(this.sibling.minSize, 10) || 0;
-        const maxSibling = parseInt(this.sibling.maxSize, 10) || this.initialPaneSize + this.initialSiblingSize;
-
-        const paneSize = this.initialPaneSize + 10;
-        const siblingSize = this.initialSiblingSize - 10;
-        if (paneSize < min || paneSize > max || siblingSize < minSibling || siblingSize > maxSibling) {
-            return;
-        }
-
-        this.pane.size = paneSize + 'px';
-        this.sibling.size = siblingSize + 'px';
-    }
-
-    private panesInitialization() {
-        this.sibling = this.siblings[1];
-
-        const paneRect = this.pane.element.getBoundingClientRect();
-        this.initialPaneSize = this.type === SplitterType.Horizontal ? paneRect.width : paneRect.height;
-        if (this.pane.size === 'auto') {
-            this.pane.size = this.type === SplitterType.Horizontal ? paneRect.width : paneRect.height;
-        }
-
-        const siblingRect = this.sibling.element.getBoundingClientRect();
-        this.initialSiblingSize = this.type === SplitterType.Horizontal ? siblingRect.width : siblingRect.height;
-        if (this.sibling.size === 'auto') {
-            this.sibling.size = this.type === SplitterType.Horizontal ? siblingRect.width : siblingRect.height;
-        }
-    }
-
     public onCollapsing(next: boolean) {
         const prevSibling = this.siblings[0];
         const nextSibling = this.siblings[1];

From 5242428e2a44b2d42e75619fe1eed1817b0f2336 Mon Sep 17 00:00:00 2001
From: Vasil Mihalkov <VMihalkov@infragistics.com>
Date: Thu, 9 Apr 2020 10:18:58 +0300
Subject: [PATCH 41/44] feat(splitter): Removed needless properties #6639

---
 .../splitter-bar/splitter-bar.component.ts    | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index f8ab1ef77bc..f24df95caeb 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -83,27 +83,6 @@ export class IgxSplitBarComponent {
         return this.siblings[0].hidden && !this.siblings[1].hidden;
     }
 
-    /**
-     * A field that holds the initial size of the main `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
-     * @private
-     * @memberof SplitterComponent
-     */
-    private initialPaneSize!: number;
-
-    /**
-     * A field that holds the initial size of the sibling `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
-     * @private
-     * @memberof SplitterComponent
-     */
-    private initialSiblingSize!: number;
-
-    /**
-     * The sibling `IgxSplitterPaneComponent` in each couple of panes devided by a gripper.
-     * @private
-     * @memberof SplitterComponent
-     */
-    private sibling!: IgxSplitterPaneComponent;
-
     /**
      * @hidden
      * @internal

From 841a8e9048f850e6af454aa68328710f68393100 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 9 Apr 2020 10:37:15 +0300
Subject: [PATCH 42/44] feat(igxSplitter): Make whole splitter bar draggable.
 Utilize new igxDrag properties - igxDragIgnore, dragDirection.

---
 .../splitter-bar/splitter-bar.component.html     |  7 ++++---
 .../splitter-bar/splitter-bar.component.ts       | 16 +++++++++-------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
index 56ed2251c48..3cda47ff07c 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.html
@@ -2,10 +2,11 @@
     [class.igx-splitter-bar--vertical]='type === 0'
     igxDrag
     [ghost]="false"
+    [dragDirection]='dragDir'
     (dragStart)='onDragStart($event)'
     (dragMove)="onDragMove($event)"
 >
-    <div class="igx-splitter-bar__expander--start" (click)='onCollapsing(false)' [hidden]='prevButtonHidden'></div>
-    <div class="igx-splitter-bar__handle" igxDragHandle></div>
-    <div class="igx-splitter-bar__expander--end" (click)='onCollapsing(true)' [hidden]='nextButtonHidden'></div>
+    <div class="igx-splitter-bar__expander--start" igxDragIgnore (click)='onCollapsing(false)' [hidden]='prevButtonHidden'></div>
+    <div class="igx-splitter-bar__handle" ></div>
+    <div class="igx-splitter-bar__expander--end" igxDragIgnore (click)='onCollapsing(true)' [hidden]='nextButtonHidden'></div>
 </div>
diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index a3762f938be..6f1b26324b8 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, HostBinding, EventEmitter, Output } from '@angular/core';
 import { SplitterType } from '../splitter.component';
 import { IgxSplitterPaneComponent } from '../splitter-pane/splitter-pane.component';
-import { IDragMoveEventArgs, IDragStartEventArgs } from '../../directives/drag-drop/drag-drop.directive';
+import { IDragMoveEventArgs, IDragStartEventArgs, DragDirection } from '../../directives/drag-drop/drag-drop.directive';
 
 /**
  * Provides reference to `SplitBarComponent` component.
@@ -77,6 +77,13 @@ export class IgxSplitBarComponent {
         return this.siblings[0].hidden && !this.siblings[1].hidden;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public get dragDir() {
+        return this.type === SplitterType.Horizontal ? DragDirection.VERTICAL : DragDirection.HORIZONTAL;
+    }
+
     /**
      * @hidden @internal
      */
@@ -95,13 +102,8 @@ export class IgxSplitBarComponent {
     public onDragMove(event: IDragMoveEventArgs) {
         const isHorizontal = this.type === SplitterType.Horizontal;
         const curr =  isHorizontal ? event.pageX : event.pageY;
-        if (isHorizontal) {
-            event.nextPageY = event.pageY;
-        } else {
-            event.nextPageX = event.pageX;
-        }
         const delta = this.startPoint - curr;
-        if (delta !== 0 ) {
+        if (delta !== 0) {
             this.moving.emit(delta);
             event.cancel = true;
             event.owner.element.nativeElement.style.transform = '';

From 8fbfe6e453d6e648e11144ee35bd5a4538001453 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Thu, 9 Apr 2020 11:33:24 +0300
Subject: [PATCH 43/44] refactor(splitter): update theme with bigger hitbox
 area

---
 .../components/splitter/_splitter-theme.scss  | 90 ++++++++++++++++++-
 1 file changed, 88 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
index d00e0a1ea0d..b0733eb6575 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -52,19 +52,68 @@
 @mixin igx-splitter($theme) {
     @include igx-root-css-vars($theme);
     $splitter-color: --var($theme, 'bar-color');
+    $hitbox-size: 4px;
+    $debug-hitbox: false;
+    $hitbox-debug-color: rgba(coral, .24);
+
+    %handle-area {
+        position: absolute;
+        content: '';
+        width: 100%;
+        height: $hitbox-size;
+        background: if($debug-hitbox, $hitbox-debug-color, transparent);
+    }
+
+    %handle-area--vertical {
+        width: $hitbox-size;
+        height: 100%;
+    }
 
     %igx-splitter-bar {
+        position: relative;
         display: flex;
         flex-grow: 1;
         justify-content: center;
         align-items: center;
         background: $splitter-color;
         border: 1px solid $splitter-color;
+        cursor: row-resize;
+        z-index: 99;
+        opacity: .68;
+        transition: opacity .15s $ease-out-quad !important;
+
+        &::before {
+            @extend %handle-area;
+            top: 100%;
+        }
+
+        &::after {
+            @extend %handle-area;
+            bottom: 100%;
+        }
+
+        &:hover {
+            transition: all .25s ease-out;
+            opacity: 1;
+        }
     }
 
     %igx-splitter-bar--vertical {
         flex-direction: column;
         height: 100%;
+        cursor: col-resize;
+
+        &::before {
+            @extend %handle-area--vertical;
+            top: 0;
+            right: 100%;
+        }
+
+        &::after {
+            @extend %handle-area--vertical;
+            top: 0;
+            left: 100%;
+        }
     }
 
     %igx-splitter-handle {
@@ -73,19 +122,23 @@
     }
 
     %igx-splitter-handle--horizontal {
-        cursor: row-resize;
         width: 25%;
         height: --var($theme, 'size');
         margin: 0 rem(48px);
     }
 
     %igx-splitter-handle--vertical {
-        cursor: col-resize;
         width: --var($theme, 'size');
         height: 25%;
         margin: rem(48px) 0;
     }
 
+    %igx-splitter-hitbox {
+        position: absolute;
+        content: '';
+        background: if($debug-hitbox, $hitbox-debug-color, transparent);
+    }
+
     %igx-splitter-expander {
         position: relative;
         width: 0;
@@ -93,15 +146,32 @@
         border-right: --var($theme, 'size') solid transparent;
         border-left: --var($theme, 'size') solid transparent;
         cursor: pointer;
+        z-index: 1;
     }
 
     %igx-splitter-expander--start {
         border-bottom: --var($theme, 'size') solid --var($theme, 'expander-color');
+
+        &::before {
+            @extend %igx-splitter-hitbox;
+            top: calc(100% - #{map-get($theme, 'size')});
+            left: calc(100% - #{map-get($theme, 'size') * 2});
+            width: #{map-get($theme, 'size') * 4};
+            height: #{map-get($theme, 'size') * 3};
+        }
     }
 
     %igx-splitter-expander--end {
         border-bottom: unset;
         border-top: --var($theme, 'size') solid --var($theme, 'expander-color');
+
+        &::before {
+            @extend %igx-splitter-hitbox;
+            top: calc(100% - #{map-get($theme, 'size') * 2});
+            left: calc(100% - #{map-get($theme, 'size') * 2});
+            width: #{map-get($theme, 'size') * 4};
+            height: #{map-get($theme, 'size') * 3};
+        }
     }
 
     %igx-splitter-expander--start-vertical {
@@ -109,6 +179,14 @@
         border-right: --var($theme, 'size') solid --var($theme, 'expander-color');
         border-bottom: --var($theme, 'size') solid transparent;
         border-left: unset;
+
+        &::before {
+            @extend %igx-splitter-hitbox;
+            top: calc(100% - #{map-get($theme, 'size') * 2});
+            left: calc(100% - #{map-get($theme, 'size')});
+            width: #{map-get($theme, 'size') * 3};
+            height: #{map-get($theme, 'size') * 4};
+        }
     }
 
     %igx-splitter-expander--end-vertical {
@@ -116,5 +194,13 @@
         border-right: unset;
         border-bottom: --var($theme, 'size') solid transparent;
         border-left: --var($theme, 'size') solid --var($theme, 'expander-color');
+
+        &::before {
+            @extend %igx-splitter-hitbox;
+            left: calc(100% - #{map-get($theme, 'size') * 2});
+            top: calc(100% - #{map-get($theme, 'size') * 2});
+            height: #{map-get($theme, 'size') * 4};
+            width: #{map-get($theme, 'size') * 3};
+        }
     }
 }

From 5fd2317c6bdc4604661bf2af1d847c0f37d92b4e Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 9 Apr 2020 12:24:33 +0300
Subject: [PATCH 44/44] chore(*): Prevent ctrl+arrow keys on splitter bar.

---
 .../splitter/splitter-bar/splitter-bar.component.ts    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
index a64ff382ce1..f730f0ea018 100644
--- a/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
+++ b/projects/igniteui-angular/src/lib/splitter/splitter-bar/splitter-bar.component.ts
@@ -3,6 +3,9 @@ import { SplitterType } from '../splitter.component';
 import { IgxSplitterPaneComponent } from '../splitter-pane/splitter-pane.component';
 import { IDragMoveEventArgs, IDragStartEventArgs, DragDirection } from '../../directives/drag-drop/drag-drop.directive';
 
+
+export const SPLITTER_INTERACTION_KEYS = new Set('right down left up arrowright arrowdown arrowleft arrowup'.split(' '));
+
 /**
  * Provides reference to `SplitBarComponent` component.
  * Represents the draggable gripper that visually separates panes and allows for changing their sizes.
@@ -91,8 +94,12 @@ export class IgxSplitBarComponent {
         const key = event.key.toLowerCase();
         const ctrl = event.ctrlKey;
         event.stopPropagation();
+        if (SPLITTER_INTERACTION_KEYS.has(key)) {
+            event.preventDefault();
+        }
             switch (key) {
                 case 'arrowup':
+                case 'up':
                     if (this.type === SplitterType.Vertical) {
                         if (ctrl) {
                             this.onCollapsing(false);
@@ -106,6 +113,7 @@ export class IgxSplitBarComponent {
                     }
                     break;
                 case 'arrowdown':
+                case 'down':
                     if (this.type === SplitterType.Vertical) {
                         if (ctrl) {
                             this.onCollapsing(true);
@@ -119,6 +127,7 @@ export class IgxSplitBarComponent {
                     }
                     break;
                 case 'arrowleft':
+                case 'left':
                     if (this.type === SplitterType.Horizontal) {
                         if (ctrl) {
                             this.onCollapsing(false);
@@ -132,6 +141,7 @@ export class IgxSplitBarComponent {
                     }
                     break;
                 case 'arrowright':
+                case 'right':
                     if (this.type === SplitterType.Horizontal) {
                         if (ctrl) {
                             this.onCollapsing(true);