feat(splitter): splitter component

commitlint.config.js

@@ -27,6 +27,7 @@ module.exports = {
                 'progress-spinner',
                 'radio',
                 'select',
+                'splitter',
                 'tabs',
                 'timepicker',
                 'tooltip',

package.json

@@ -156,6 +156,7 @@
         "server-dev:progress-spinner": "npm run server-dev -- --env.component progress-spinner",
         "server-dev:radio": "npm run server-dev -- --env.component radio",
         "server-dev:select": "npm run server-dev -- --env.component select",
+        "server-dev:splitter": "npm run server-dev -- --env.component splitter",
         "server-dev:tag": "npm run server-dev -- --env.component tag",
         "server-dev:theme-picker": "npm run server-dev -- --env.component theme-picker",
         "server-dev:tree": "npm run server-dev -- --env.component tree",

src/lib-dev/splitter/module.ts

@@ -0,0 +1,34 @@
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { McSplitterModule } from '../../lib/splitter';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DemoComponent {}
+
+
+@NgModule({
+    declarations: [
+        DemoComponent
+    ],
+    imports: [
+        BrowserModule,
+        McSplitterModule
+    ],
+    bootstrap: [
+        DemoComponent
+    ]
+})
+export class DemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));
+

src/lib-dev/splitter/styles.scss

@@ -0,0 +1,17 @@
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
+@import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/visual/prebuilt/default-visual';
+
+.horizontal-block {
+    height: 100px;
+    border: 1px solid black;
+}
+
+.vertical-block {
+    height: 300px;
+    border: 1px solid black;
+}
+
+.min-width-500 {
+    min-width: 30%;
+}

src/lib-dev/splitter/template.html

@@ -0,0 +1,55 @@
+<h1 class="mc-h1">Splitter examples</h1>
+
+<p>
+    Splitter is designer to use with Mosaic icons and Mosaic flex layout so import VISUAL and ICONS to use it.
+</p>
+
+<h2 class="mc-h2">Horizontal</h2>
+
+<mc-splitter class="horizontal-block" direction="horizontal">
+    <mc-splitter-area class="layout-padding">first</mc-splitter-area>
+    <mc-splitter-area class="flex-20 layout-padding">second</mc-splitter-area>
+    <mc-splitter-area class="layout-padding">third</mc-splitter-area>
+</mc-splitter>
+
+<br>
+
+<h2 class="mc-h2">Vertical</h2>
+
+<mc-splitter class="vertical-block" direction="vertical">
+    <mc-splitter-area class="layout-padding">first</mc-splitter-area>
+    <mc-splitter-area class="layout-padding">second</mc-splitter-area>
+    <mc-splitter-area class="layout-padding">third</mc-splitter-area>
+</mc-splitter>
+
+<br>
+
+<h2 class="mc-h2">Default direction</h2>
+
+<mc-splitter class="horizontal-block">
+    <mc-splitter-area class="flex-33 layout-padding">first</mc-splitter-area>
+    <mc-splitter-area class="flex layout-padding">second</mc-splitter-area>
+    <mc-splitter-area class="flex-33 layout-padding">third</mc-splitter-area>
+</mc-splitter>
+
+<br>
+
+<h2 class="mc-h2">Disabled</h2>
+
+<mc-splitter class="horizontal-block" direction="horizontal" disabled>
+    <mc-splitter-area class="flex-33 layout-padding">first</mc-splitter-area>
+    <mc-splitter-area class="flex-20 layout-padding">second</mc-splitter-area>
+    <mc-splitter-area class="flex layout-padding">third</mc-splitter-area>
+</mc-splitter>
+
+<br>
+
+<h2 class="mc-h2">min-width for the first area</h2>
+
+<mc-splitter class="horizontal-block">
+    <mc-splitter-area class="flex-33 layout-padding min-width-500">first</mc-splitter-area>
+    <mc-splitter-area class="flex-20 layout-padding">second</mc-splitter-area>
+    <mc-splitter-area class="flex layout-padding">third</mc-splitter-area>
+</mc-splitter>
+
+<br>

src/lib/core/theming/_all-theme.scss

@@ -18,6 +18,7 @@
 @import '../option/option-theme';
 @import '../../tag/tag-theme';
 @import '../../tooltip/tooltip-theme';
+@import '../../splitter/splitter-theme';
 
 
 @mixin mosaic-theme($theme) {
@@ -42,4 +43,5 @@
     @include mc-option-theme($theme);
     @include mc-tag-theme($theme);
     @include mc-tooltip-theme($theme);
+    @include mc-splitter-theme($theme);
 }

src/lib/public-api.ts

@@ -19,5 +19,6 @@ export * from '@ptsecurity/mosaic/radio';
 export * from '@ptsecurity/mosaic/tree';
 export * from '@ptsecurity/mosaic/tag';
 export * from '@ptsecurity/mosaic/select';
+export * from '@ptsecurity/mosaic/splitter';
 export * from '@ptsecurity/mosaic/tooltip';
 

src/lib/splitter/_splitter-theme.scss

@@ -0,0 +1,9 @@
+@mixin mc-splitter-theme($theme) {
+    $primary: map-get($theme, primary);
+    $second: map-get($theme, second);
+
+    .mc-gutter {
+        background-color: mc-color($second, 60);
+        color: mc-color($second, 600);
+    }
+}

src/lib/splitter/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/lib/splitter/public-api.ts

@@ -0,0 +1,2 @@
+export * from './splitter.module';
+export * from './splitter.component';

src/lib/splitter/spliltter.spec.ts

@@ -0,0 +1,119 @@
+import { Component, Type } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { Direction, McGutterDirective, McSplitterAreaDirective, McSplitterComponent, McSplitterModule } from './index';
+
+
+function createTestComponent<T>(component: Type<T>) {
+    TestBed
+        .resetTestingModule()
+        .configureTestingModule({
+            imports: [ McSplitterModule ],
+            declarations: [ component ],
+            providers: []
+        })
+        .compileComponents();
+
+    return TestBed.createComponent<T>(component);
+}
+
+function checkDirection<T>(fixture: ComponentFixture<T>,
+                           direction: Direction,
+                           guttersCount: number,
+                           gutterSize: number) {
+
+    const splitter = fixture.debugElement.query(By.directive(McSplitterComponent));
+    const gutters = fixture.debugElement.queryAll(By.directive(McGutterDirective));
+
+    const mainAxisClass = direction === Direction.Vertical
+        ? 'layout-column'
+        : 'layout-row';
+
+    const crossAxisClass = direction === Direction.Vertical
+        ? 'layout-row'
+        : 'layout-column';
+
+    const expectedWidth = (direction === Direction.Vertical)
+        ? ''
+        : `${gutterSize}px`;
+
+    const expectedHeight = (direction === Direction.Vertical)
+        ? `${gutterSize}px`
+        : '';
+
+    expect(splitter.nativeElement.classList.contains(mainAxisClass)).toBe(true);
+    expect(splitter.nativeElement.classList.contains(crossAxisClass)).toBe(false);
+    expect(gutters.length).toBe(guttersCount);
+    expect(gutters.every((gutter) => gutter.nativeElement.style.width === expectedWidth)).toBe(true);
+    expect(gutters.every((gutter) => gutter.nativeElement.style.height === expectedHeight)).toBe(true);
+}
+
+
+@Component({
+    selector: 'mc-demo-spllitter',
+    template: `
+        <mc-splitter>
+            <mc-splitter-area>first</mc-splitter-area>
+            <mc-splitter-area>second</mc-splitter-area>
+            <mc-splitter-area>third</mc-splitter-area>
+        </mc-splitter>
+    `
+})
+class McSplitterDefaultDirection {}
+
+@Component({
+    selector: 'mc-demo-spllitter',
+    template: `
+        <mc-splitter [direction]="direction">
+            <mc-splitter-area>first</mc-splitter-area>
+            <mc-splitter-area>second</mc-splitter-area>
+            <mc-splitter-area>third</mc-splitter-area>
+        </mc-splitter>
+    `
+})
+class McSplitterDirection {
+    direction: Direction = Direction.Vertical;
+}
+
+describe('McSplitter', () => {
+    describe('direction', () => {
+        it('should be default', () => {
+            const fixture = createTestComponent(McSplitterDefaultDirection);
+
+            fixture.detectChanges();
+
+            const areas = fixture.debugElement.queryAll(By.directive(McSplitterAreaDirective));
+            const expectedAreasCount = 3;
+            const expectedGuttersCount = expectedAreasCount - 1;
+            const expectedGutterSize = 6;
+
+            checkDirection(fixture, Direction.Horizontal, expectedGuttersCount, expectedGutterSize);
+
+            expect(areas.length).toBe(expectedAreasCount);
+        });
+
+
+        it('should be horizontal', () => {
+            const fixture = createTestComponent(McSplitterDirection);
+            const expectedGuttersCount = 2;
+            const expectedGutterSize = 6;
+
+            fixture.componentInstance.direction = Direction.Horizontal;
+            fixture.detectChanges();
+
+            checkDirection(fixture, Direction.Horizontal, expectedGuttersCount, expectedGutterSize);
+        });
+
+        it('should be vertical', () => {
+            const fixture = createTestComponent(McSplitterDirection);
+            const expectedGuttersCount = 2;
+            const expectedGutterSize = 6;
+
+            fixture.componentInstance.direction = Direction.Vertical;
+            fixture.detectChanges();
+
+            checkDirection(fixture, Direction.Vertical, expectedGuttersCount, expectedGutterSize);
+        });
+    });
+});

src/lib/splitter/splitter.component.html

@@ -0,0 +1,12 @@
+<ng-content></ng-content>
+<ng-template ngFor let-area [ngForOf]="areas" let-index="index" let-last="last">
+    <mc-gutter *ngIf="last === false"
+               [direction]="direction"
+               [disabled]="disabled"
+               [size]="gutterSize"
+               (mousedown)="onMouseDown($event, index, index + 1)"
+               class="mc-gutter flex-none layout-row layout-align-center-center flex-order-{{index * 2 + 1}}"
+    >
+        <i class="mc-splitter-icon" mc-icon="mc-ellipsis_16" [class.mc-splitter-icon-vertical]="direction === 'vertical'" *ngIf="!disabled"></i>
+    </mc-gutter>
+</ng-template>