Making Touch Events Work

.gitignore

@@ -1,6 +1,7 @@
 *.tgz
 .vscode
 node_modules
-lib
+compiled
 *ngfactory.ts
 *.ngsummary.json
+

lib/horizontal-split-pane-separator.component.d.ts

@@ -0,0 +1,5 @@
+import { OnInit } from '@angular/core';
+import { SplitSeparatorComponent } from './split-pane-separator.component';
+export declare class HorizontalSplitSeparatorComponent extends SplitSeparatorComponent implements OnInit {
+    ngAfterViewInit(): void;
+}

lib/horizontal-split-pane-separator.component.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":3,"metadata":{"HorizontalSplitSeparatorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane-separator.component","name":"SplitSeparatorComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"horizontal-split-separator","styles":["\n    :host {\n      background-color: #fff;\n      border-top: 1px solid #ddd;\n      cursor: ns-resize;\n      position: relative;\n    }\n    :host:hover {\n      background-color: #fafafa;\n    }\n\n    .invisible-extension {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      min-height: 7px;\n    }\n\n    .handle {\n      width: 35px;\n      height: 100%;\n      background-color: #eee;\n      margin: auto;\n    }\n  "],"template":"\n    <!-- Used to extend the 'draggable' area in case the separator is too thin,\n    so it's not too hard to drag. -->\n    <div\n      #invisibleExtension\n      [hidden]=\"thickness >= 7\"\n      class=\"invisible-extension\"></div>\n\n    <div class=\"handle\"></div>\n  ","host":{"[style.height.px]":"thickness","$quoted$":["[style.height.px]"]}}]}],"members":{"ngAfterViewInit":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"HorizontalSplitSeparatorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane-separator.component","name":"SplitSeparatorComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"horizontal-split-separator","styles":["\n    :host {\n      background-color: #fff;\n      border-top: 1px solid #ddd;\n      cursor: ns-resize;\n      position: relative;\n    }\n    :host:hover {\n      background-color: #fafafa;\n    }\n\n    .invisible-extension {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      min-height: 7px;\n    }\n\n    .handle {\n      width: 35px;\n      height: 100%;\n      background-color: #eee;\n      margin: auto;\n    }\n  "],"template":"\n    <!-- Used to extend the 'draggable' area in case the separator is too thin,\n    so it's not too hard to drag. -->\n    <div\n      #invisibleExtension\n      [hidden]=\"thickness >= 7\"\n      class=\"invisible-extension\"></div>\n\n    <div class=\"handle\"></div>\n  ","host":{"[style.height.px]":"thickness"}}]}],"members":{"ngAfterViewInit":[{"__symbolic":"method"}]}}}}]

lib/horizontal-split-pane.component.d.ts

@@ -0,0 +1,12 @@
+import { ElementRef } from '@angular/core';
+import { SplitPaneComponent } from './split-pane.component';
+export declare class HorizontalSplitPaneComponent extends SplitPaneComponent {
+    outerContainer: ElementRef;
+    test: number;
+    getTotalSize(): number;
+    getPrimarySize(): number;
+    getSecondarySize(): number;
+    dividerPosition(size: number): void;
+    onMousemove(event: MouseEvent): boolean;
+    onTouchmove(event: TouchEvent): boolean;
+}

lib/horizontal-split-pane.component.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":3,"metadata":{"HorizontalSplitPaneComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane.component","name":"SplitPaneComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"horizontal-split-pane","styles":["\n    .h-outer {\n      height: 100%;\n      width: 100%;\n      display: flex;\n      flex-flow: column;\n    }\n\n    .upper-component {\n      height: calc(50% - 4px);\n    }\n\n    .lower-component {\n      height: calc(50% - 4px);\n    }\n  "],"template":"\n  <div #outer class=\"h-outer\">\n    <div\n      #primaryComponent\n      [hidden]=\"primaryToggledOff\"\n      class=\"upper-component\">\n      <ng-content select=\".split-pane-content-primary\"></ng-content>\n    </div>\n    <horizontal-split-separator\n      #separator\n      [hidden]=\"primaryToggledOff || secondaryToggledOff\"\n      [thickness]=\"separatorThickness\"\n      (notifyWillChangeSize)=\"notifyWillChangeSize($event)\">\n    </horizontal-split-separator>\n    <div\n      #secondaryComponent\n      [hidden]=\"secondaryToggledOff\"\n      class=\"lower-component\">\n      <ng-content select=\".split-pane-content-secondary\"></ng-content>\n    </div>\n  </div>\n  "}]}],"members":{"outerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["outer"]}]}],"test":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"getTotalSize":[{"__symbolic":"method"}],"getPrimarySize":[{"__symbolic":"method"}],"getSecondarySize":[{"__symbolic":"method"}],"dividerPosition":[{"__symbolic":"method"}],"onMousemove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousemove",["$event"]]}]}],"onTouchmove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["touchmove",["$event"]]}]}]}}}},{"__symbolic":"module","version":1,"metadata":{"HorizontalSplitPaneComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"./split-pane.component","name":"SplitPaneComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"horizontal-split-pane","styles":["\n    .h-outer {\n      height: 100%;\n      width: 100%;\n      display: flex;\n      flex-flow: column;\n    }\n\n    .upper-component {\n      height: calc(50% - 4px);\n    }\n\n    .lower-component {\n      height: calc(50% - 4px);\n    }\n  "],"template":"\n  <div #outer class=\"h-outer\">\n    <div\n      #primaryComponent\n      [hidden]=\"primaryToggledOff\"\n      class=\"upper-component\">\n      <ng-content select=\".split-pane-content-primary\"></ng-content>\n    </div>\n    <horizontal-split-separator\n      #separator\n      [hidden]=\"primaryToggledOff || secondaryToggledOff\"\n      [thickness]=\"separatorThickness\"\n      (notifyWillChangeSize)=\"notifyWillChangeSize($event)\">\n    </horizontal-split-separator>\n    <div\n      #secondaryComponent\n      [hidden]=\"secondaryToggledOff\"\n      class=\"lower-component\">\n      <ng-content select=\".split-pane-content-secondary\"></ng-content>\n    </div>\n  </div>\n  "}]}],"members":{"outerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["outer"]}]}],"test":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"getTotalSize":[{"__symbolic":"method"}],"getPrimarySize":[{"__symbolic":"method"}],"getSecondarySize":[{"__symbolic":"method"}],"dividerPosition":[{"__symbolic":"method"}],"onMousemove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousemove",["$event"]]}]}],"onTouchmove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["touchmove",["$event"]]}]}]}}}}]

lib/ng2-split-pane.d.ts

@@ -0,0 +1,5 @@
+import { ModuleWithProviders } from '@angular/core';
+export declare function delayedInit(): ModuleWithProviders;
+export declare class SplitPaneModule {
+    static forRoot: ModuleWithProviders;
+}