angular-split - npm Package Compare versions

Comparing version 1.0.0-beta.2 to 1.0.0-beta.3

angular-split.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":4,"metadata":{"AngularSplitModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"SplitComponent"},{"__symbolic":"reference","name":"SplitAreaDirective"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"SplitComponent"},{"__symbolic":"reference","name":"SplitAreaDirective"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSplitModule"},"providers":[]}},"forChild":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSplitModule"},"providers":[]}}}},"SplitComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"split","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"styles":["\n        :host {\n            display: flex;\n            flex-wrap: nowrap;\n            justify-content: flex-start;\n            align-items: stretch;\n            overflow: hidden;\n        }\n\n        split-gutter {\n            flex-grow: 0;\n            flex-shrink: 0;\n            background-color: #eeeeee;\n            background-position: center center;\n            background-repeat: no-repeat;\n        }\n\n        :host.vertical split-gutter {\n            width: 100%;\n        }\n    "],"template":"\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false\" \n                          [order]=\"index*2+1\"\n                          [direction]=\"direction\"\n                          [size]=\"gutterSize\"\n                          [disabled]=\"disabled\"\n                          (mousedown)=\"startDragging($event, index*2+1)\"\n                          (touchstart)=\"startDragging($event, index*2+1)\"></split-gutter>\n        </ng-template>"}]}],"members":{"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"visibleTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gutterSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragProgress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"visibleTransitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"cssFlexdirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.flex-direction"]}]}],"cssWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"cssHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"cssMinwidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.min-width"]}]}],"cssMinheight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.min-height"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"getNbGutters":[{"__symbolic":"method"}],"addArea":[{"__symbolic":"method"}],"updateArea":[{"__symbolic":"method"}],"removeArea":[{"__symbolic":"method"}],"hideArea":[{"__symbolic":"method"}],"showArea":[{"__symbolic":"method"}],"build":[{"__symbolic":"method"}],"refreshStyleSizes":[{"__symbolic":"method"}],"startDragging":[{"__symbolic":"method"}],"dragEvent":[{"__symbolic":"method"}],"drag":[{"__symbolic":"method"}],"stopDragging":[{"__symbolic":"method"}],"notify":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SplitAreaDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"split-area"}]}],"members":{"order":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","name":"SplitComponent"}]}],"ngOnInit":[{"__symbolic":"method"}],"getSizePixel":[{"__symbolic":"method"}],"setStyleVisibleAndDir":[{"__symbolic":"method"}],"setStyleTransition":[{"__symbolic":"method"}],"setStyleOrder":[{"__symbolic":"method"}],"setStyleFlexbasis":[{"__symbolic":"method"}],"onTransitionEnd":[{"__symbolic":"method"}],"lockEvents":[{"__symbolic":"method"}],"unlockEvents":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"split-gutter"}]}],"members":{"order":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"refreshStyle":[{"__symbolic":"method"}]}}},"origins":{"AngularSplitModule":"./src/modules/angularSplit.module","SplitComponent":"./src/components/split.component","SplitAreaDirective":"./src/components/splitArea.directive","ɵa":"./src/components/splitGutter.directive"},"importAs":"angular-split"}
+{"__symbolic":"module","version":4,"metadata":{"AngularSplitModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"declarations":[{"__symbolic":"reference","name":"SplitComponent"},{"__symbolic":"reference","name":"SplitAreaDirective"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"SplitComponent"},{"__symbolic":"reference","name":"SplitAreaDirective"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSplitModule"},"providers":[]}},"forChild":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSplitModule"},"providers":[]}}}},"SplitComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"split","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"styles":["\n        :host {\n            display: flex;\n            flex-wrap: nowrap;\n            justify-content: flex-start;\n            align-items: stretch;\n            overflow: hidden;\n        }\n\n        split-gutter {\n            flex-grow: 0;\n            flex-shrink: 0;\n            background-color: #eeeeee;\n            background-position: center center;\n            background-repeat: no-repeat;\n        }\n\n        :host.vertical split-gutter {\n            width: 100%;\n        }\n    "],"template":"\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false\" \n                          [order]=\"index*2+1\"\n                          [direction]=\"direction\"\n                          [size]=\"gutterSize\"\n                          [disabled]=\"disabled\"\n                          (mousedown)=\"startDragging($event, index*2+1, index+1)\"\n                          (touchstart)=\"startDragging($event, index*2+1, index+1)\"></split-gutter>\n        </ng-template>"}]}],"members":{"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"visibleTransition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"gutterSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"dragStart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragProgress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"dragEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"gutterClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"visibleTransitionEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"cssFlexdirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.flex-direction"]}]}],"cssWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"cssHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"cssMinwidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.min-width"]}]}],"cssMinheight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.min-height"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"getNbGutters":[{"__symbolic":"method"}],"addArea":[{"__symbolic":"method"}],"updateArea":[{"__symbolic":"method"}],"removeArea":[{"__symbolic":"method"}],"hideArea":[{"__symbolic":"method"}],"showArea":[{"__symbolic":"method"}],"build":[{"__symbolic":"method"}],"refreshStyleSizes":[{"__symbolic":"method"}],"startDragging":[{"__symbolic":"method"}],"dragEvent":[{"__symbolic":"method"}],"drag":[{"__symbolic":"method"}],"stopDragging":[{"__symbolic":"method"}],"notify":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SplitAreaDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"split-area"}]}],"members":{"order":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","name":"SplitComponent"}]}],"ngOnInit":[{"__symbolic":"method"}],"getSizePixel":[{"__symbolic":"method"}],"setStyleVisibleAndDir":[{"__symbolic":"method"}],"setStyleTransition":[{"__symbolic":"method"}],"setStyleOrder":[{"__symbolic":"method"}],"setStyleFlexbasis":[{"__symbolic":"method"}],"onTransitionEnd":[{"__symbolic":"method"}],"lockEvents":[{"__symbolic":"method"}],"unlockEvents":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"split-gutter"}]}],"members":{"order":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"refreshStyle":[{"__symbolic":"method"}]}}},"origins":{"AngularSplitModule":"./src/modules/angularSplit.module","SplitComponent":"./src/components/split.component","SplitAreaDirective":"./src/components/splitArea.directive","ɵa":"./src/components/splitGutter.directive"},"importAs":"angular-split"}

bundles/angular-split.umd.js

@@ -51,5 +51,8 @@ (function (global, factory) {
         this.dragEnd = new core.EventEmitter(false);
+        this.gutterClick = new core.EventEmitter(false);
         this.visibleTransitionEndInternal = new Subject.Subject();
         this.visibleTransitionEnd = (/** @type {?} */ (this.visibleTransitionEndInternal.asObservable())).debounceTime(20);
         this._isDragging = false;
+        this.draggingWithoutMove = false;
+        this.currentGutterNum = 0;
         this.displayedAreas = [];
@@ -79,3 +82,4 @@ this.hidedAreas = [];
             var _this = this;
-            this._direction = (v === 'horizontal') ? v : 'vertical';
+            v = (v === 'vertical') ? 'vertical' : 'horizontal';
+            this._direction = v;
             this.displayedAreas.concat(this.hidedAreas).forEach(function (area) {
@@ -102,3 +106,4 @@ area.comp.setStyleVisibleAndDir(area.comp.visible, _this._direction);
             var _this = this;
-            this._visibleTransition = Boolean(v);
+            v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
+            this._visibleTransition = v;
             this.displayedAreas.concat(this.hidedAreas).forEach(function (area) {
@@ -123,3 +128,4 @@ area.comp.setStyleTransition(_this._visibleTransition);
         function (v) {
-            this._width = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+            v = Number(v);
+            this._width = (!isNaN(v) && v > 0) ? v : null;
             this.build();
@@ -142,3 +148,4 @@ },
         function (v) {
-            this._height = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+            v = Number(v);
+            this._height = (!isNaN(v) && v > 0) ? v : null;
             this.build();
@@ -161,2 +168,3 @@ },
         function (v) {
+            v = Number(v);
             this._gutterSize = !isNaN(v) && v > 0 ? v : 10;
@@ -180,3 +188,4 @@ this.build();
         function (v) {
-            this._disabled = Boolean(v);
+            v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
+            this._disabled = v;
             this.build();
@@ -432,2 +441,3 @@ },
      * @param {?} gutterOrder
+     * @param {?} gutterNum
      * @return {?}
@@ -438,5 +448,6 @@ */
      * @param {?} gutterOrder
+     * @param {?} gutterNum
      * @return {?}
      */
-    function (startEvent, gutterOrder) {
+    function (startEvent, gutterOrder, gutterNum) {
         var _this = this;
@@ -482,2 +493,4 @@ startEvent.preventDefault();
         this.isDragging = true;
+        this.draggingWithoutMove = true;
+        this.currentGutterNum = gutterNum;
         this.notify('start');
@@ -519,2 +532,3 @@ };
         }
+        this.draggingWithoutMove = false;
         this.drag(start, end, areaA, areaB);
@@ -541,2 +555,4 @@ };
         var /** @type {?} */ newSizePixelB = this.dragStartValues.sizePixelB + offsetPixel;
+        //const debSizePxA = newSizePixelA;
+        //const debSizePxB = newSizePixelB;
         if (newSizePixelA < this.gutterSize && newSizePixelB < this.gutterSize) {
@@ -555,2 +571,4 @@ // WTF.. get out of here!
         // ¤ AREAS SIZE PERCENT
+        //const debSizeA = areaA.size;
+        //const debSizeB = areaB.size;
         if (newSizePixelA === 0) {
@@ -580,2 +598,4 @@ areaB.size += areaA.size;
         }
+        //const debPxToSubtractA = areaA.pxToSubtract;
+        //const debPxToSubtractB = areaB.pxToSubtract;
         if (areaA.size === 0) {
@@ -622,3 +642,8 @@ areaB.pxToSubtract += areaA.pxToSubtract;
         this.isDragging = false;
-        this.notify('end');
+        if (this.draggingWithoutMove === true) {
+            this.notify('click');
+        }
+        else {
+            this.notify('end');
+        }
     };
@@ -637,7 +662,9 @@ /**
             case 'start':
-                return this.dragStart.emit(areasSize);
+                return this.dragStart.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
             case 'progress':
-                return this.dragProgress.emit(areasSize);
+                return this.dragProgress.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
             case 'end':
-                return this.dragEnd.emit(areasSize);
+                return this.dragEnd.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
+            case 'click':
+                return this.gutterClick.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
             case 'visibleTransitionEnd':
@@ -661,3 +688,3 @@ return this.visibleTransitionEndInternal.next(areasSize);
                     styles: ["\n        :host {\n            display: flex;\n            flex-wrap: nowrap;\n            justify-content: flex-start;\n            align-items: stretch;\n            overflow: hidden;\n        }\n\n        split-gutter {\n            flex-grow: 0;\n            flex-shrink: 0;\n            background-color: #eeeeee;\n            background-position: center center;\n            background-repeat: no-repeat;\n        }\n\n        :host.vertical split-gutter {\n            width: 100%;\n        }\n    "],
-                    template: "\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false\" \n                          [order]=\"index*2+1\"\n                          [direction]=\"direction\"\n                          [size]=\"gutterSize\"\n                          [disabled]=\"disabled\"\n                          (mousedown)=\"startDragging($event, index*2+1)\"\n                          (touchstart)=\"startDragging($event, index*2+1)\"></split-gutter>\n        </ng-template>",
+                    template: "\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false\" \n                          [order]=\"index*2+1\"\n                          [direction]=\"direction\"\n                          [size]=\"gutterSize\"\n                          [disabled]=\"disabled\"\n                          (mousedown)=\"startDragging($event, index*2+1, index+1)\"\n                          (touchstart)=\"startDragging($event, index*2+1, index+1)\"></split-gutter>\n        </ng-template>",
                 },] },
@@ -681,2 +708,3 @@ ];
         "dragEnd": [{ type: core.Output },],
+        "gutterClick": [{ type: core.Output },],
         "visibleTransitionEnd": [{ type: core.Output },],
@@ -719,3 +747,4 @@ "cssFlexdirection": [{ type: core.HostBinding, args: ['style.flex-direction',] },],
         function (v) {
-            this._order = !isNaN(/** @type {?} */ (v)) ? v : null;
+            v = Number(v);
+            this._order = !isNaN(v) ? v : null;
             this.split.updateArea(this);
@@ -738,3 +767,4 @@ },
         function (v) {
-            this._size = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) >= 0 && /** @type {?} */ (v) <= 100) ? (/** @type {?} */ (v) / 100) : null;
+            v = Number(v);
+            this._size = (!isNaN(v) && v >= 0 && v <= 100) ? (v / 100) : null;
             this.split.updateArea(this);
@@ -757,2 +787,3 @@ },
         function (v) {
+            v = Number(v);
             this._minSize = (!isNaN(v) && v > 0 && v < 100) ? v / 100 : 0;
@@ -776,2 +807,3 @@ this.split.updateArea(this);
         function (v) {
+            v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
             this._visible = v;
@@ -778,0 +810,0 @@ this.setStyleVisibleAndDir(v, this.split.direction);

bundles/angular-split.umd.min.js

@@ -1,1 +0,1 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("@angular/common"),require("rxjs/Subject"),require("rxjs/add/operator/debounceTime")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","rxjs/Subject","rxjs/add/operator/debounceTime"],factory):factory((global.ng=global.ng||{},global.ng.angularSplit={}),global.ng.core,global.ng.common,global.Rx)}(this,function(exports,core,common,Subject){"use strict";function getCursor(state){switch(state){case"disabled":return"default";case"vertical":return"row-resize";case"horizontal":return"col-resize"}return""}function getImage(state){switch(state){case"vertical":return"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC";case"horizontal":return"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==";case"disabled":return""}return""}var SplitComponent=function(){function SplitComponent(elRef,cdRef,renderer){this.elRef=elRef,this.cdRef=cdRef,this.renderer=renderer,this._direction="horizontal",this._visibleTransition=!1,this._width=null,this._height=null,this._gutterSize=10,this._disabled=!1,this.dragStart=new core.EventEmitter(!1),this.dragProgress=new core.EventEmitter(!1),this.dragEnd=new core.EventEmitter(!1),this.visibleTransitionEndInternal=new Subject.Subject,this.visibleTransitionEnd=this.visibleTransitionEndInternal.asObservable().debounceTime(20),this._isDragging=!1,this.displayedAreas=[],this.hidedAreas=[],this.dragListeners=[],this.dragStartValues={sizePixelContainer:0,sizePixelA:0,sizePixelB:0,sizePercentA:0,sizePercentB:0}}return Object.defineProperty(SplitComponent.prototype,"direction",{get:function(){return this._direction},set:function(v){var _this=this;this._direction="horizontal"===v?v:"vertical",this.displayedAreas.concat(this.hidedAreas).forEach(function(area){area.comp.setStyleVisibleAndDir(area.comp.visible,_this._direction)}),this.build()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"visibleTransition",{get:function(){return this._visibleTransition},set:function(v){var _this=this;this._visibleTransition=Boolean(v),this.displayedAreas.concat(this.hidedAreas).forEach(function(area){area.comp.setStyleTransition(_this._visibleTransition)})},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"width",{get:function(){return this._width},set:function(v){this._width=!isNaN(v)&&v>0?v:null,this.build()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"height",{get:function(){return this._height},set:function(v){this._height=!isNaN(v)&&v>0?v:null,this.build()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"gutterSize",{get:function(){return this._gutterSize},set:function(v){this._gutterSize=!isNaN(v)&&v>0?v:10,this.build()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"disabled",{get:function(){return this._disabled},set:function(v){this._disabled=Boolean(v),this.build()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"cssFlexdirection",{get:function(){return"horizontal"===this.direction?"row":"column"},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"cssWidth",{get:function(){return this.width?this.width+"px":"100%"},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"cssHeight",{get:function(){return this.height?this.height+"px":"100%"},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"cssMinwidth",{get:function(){return"horizontal"===this.direction?this.getNbGutters()*this.gutterSize+"px":null},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"cssMinheight",{get:function(){return"vertical"===this.direction?this.getNbGutters()*this.gutterSize+"px":null},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"isDragging",{get:function(){return this._isDragging},set:function(v){var _this=this;this._isDragging=v,this.displayedAreas.concat(this.hidedAreas).forEach(function(area){area.comp.setStyleTransition(!v&&_this.visibleTransition)})},enumerable:!0,configurable:!0}),SplitComponent.prototype.getNbGutters=function(){return this.displayedAreas.length-1},SplitComponent.prototype.addArea=function(comp){var newArea={comp:comp,order:-1,size:-1,pxToSubtract:0};!0===comp.visible?this.displayedAreas.push(newArea):this.hidedAreas.push(newArea),comp.setStyleVisibleAndDir(comp.visible,this.direction),comp.setStyleTransition(this.visibleTransition),this.build()},SplitComponent.prototype.updateArea=function(comp){this.displayedAreas.find(function(a){return a.comp===comp})&&this.build()},SplitComponent.prototype.removeArea=function(comp){if(this.displayedAreas.some(function(a){return a.comp===comp})){area=this.displayedAreas.find(function(a){return a.comp===comp});this.displayedAreas.splice(this.displayedAreas.indexOf(area),1),this.build()}else if(this.hidedAreas.some(function(a){return a.comp===comp})){var area=this.hidedAreas.find(function(a){return a.comp===comp});this.hidedAreas.splice(this.hidedAreas.indexOf(area),1)}},SplitComponent.prototype.hideArea=function(comp){var area=this.displayedAreas.find(function(a){return a.comp===comp});if(area){var areas=this.displayedAreas.splice(this.displayedAreas.indexOf(area),1);(_a=this.hidedAreas).push.apply(_a,areas),this.build()}var _a},SplitComponent.prototype.showArea=function(comp){var area=this.hidedAreas.find(function(a){return a.comp===comp});if(area){var areas=this.hidedAreas.splice(this.hidedAreas.indexOf(area),1);(_a=this.displayedAreas).push.apply(_a,areas),this.build()}var _a},SplitComponent.prototype.build=function(){var _this=this;this.stopDragging(),this.displayedAreas.every(function(a){return null!==a.comp.order})&&this.displayedAreas.sort(function(a,b){return a.comp.order-b.comp.order}),this.displayedAreas.forEach(function(area,i){area.order=2*i,area.comp.setStyleOrder(area.order)});var totalUserSize=this.displayedAreas.reduce(function(total,s){return s.comp.size?total+s.comp.size:total},0);if(this.displayedAreas.some(function(a){return null===a.comp.size})||totalUserSize<.999||totalUserSize>1.001){var size_1=Number((1/this.displayedAreas.length).toFixed(4));this.displayedAreas.forEach(function(area){area.size=size_1})}else{var percentToShare_1=0,prop="horizontal"===this.direction?"offsetWidth":"offsetHeight",containerSizePixel_1=this.elRef.nativeElement[prop];if(this.displayedAreas.forEach(function(area){var newSize=Number(area.comp.size);newSize*containerSizePixel_1<_this.gutterSize&&(percentToShare_1+=newSize,newSize=0),area.size=newSize}),percentToShare_1>0){var nbAreasNotZero=this.displayedAreas.filter(function(a){return 0!==a.size}).length,percentToAdd_1=percentToShare_1/nbAreasNotZero;this.displayedAreas.filter(function(a){return 0!==a.size}).forEach(function(area){area.size+=percentToAdd_1})}}var totalPxToSubtract=this.getNbGutters()*this.gutterSize,areasSizeNotZero=this.displayedAreas.filter(function(a){return 0!==a.size});areasSizeNotZero.forEach(function(area){area.pxToSubtract=totalPxToSubtract/areasSizeNotZero.length}),this.refreshStyleSizes(),this.cdRef.markForCheck()},SplitComponent.prototype.refreshStyleSizes=function(){this.displayedAreas.forEach(function(area){area.comp.setStyleFlexbasis("calc( "+100*area.size+"% - "+area.pxToSubtract+"px )")})},SplitComponent.prototype.startDragging=function(startEvent,gutterOrder){var _this=this;if(startEvent.preventDefault(),!this.disabled){var areaA=this.displayedAreas.find(function(a){return a.order===gutterOrder-1}),areaB=this.displayedAreas.find(function(a){return a.order===gutterOrder+1});if(areaA&&areaB){var prop="horizontal"===this.direction?"offsetWidth":"offsetHeight";this.dragStartValues.sizePixelContainer=this.elRef.nativeElement[prop],this.dragStartValues.sizePixelA=areaA.comp.getSizePixel(prop),this.dragStartValues.sizePixelB=areaB.comp.getSizePixel(prop),this.dragStartValues.sizePercentA=areaA.size,this.dragStartValues.sizePercentB=areaB.size;var start;if(startEvent instanceof MouseEvent)start={x:startEvent.screenX,y:startEvent.screenY};else{if(!(startEvent instanceof TouchEvent))return;start={x:startEvent.touches[0].screenX,y:startEvent.touches[0].screenY}}this.dragListeners.push(this.renderer.listen("document","mousemove",function(e){return _this.dragEvent(e,start,areaA,areaB)})),this.dragListeners.push(this.renderer.listen("document","touchmove",function(e){return _this.dragEvent(e,start,areaA,areaB)})),this.dragListeners.push(this.renderer.listen("document","mouseup",function(e){return _this.stopDragging()})),this.dragListeners.push(this.renderer.listen("document","touchend",function(e){return _this.stopDragging()})),this.dragListeners.push(this.renderer.listen("document","touchcancel",function(e){return _this.stopDragging()})),areaA.comp.lockEvents(),areaB.comp.lockEvents(),this.isDragging=!0,this.notify("start")}}},SplitComponent.prototype.dragEvent=function(event,start,areaA,areaB){if(this.isDragging){var end;if(event instanceof MouseEvent)end={x:event.screenX,y:event.screenY};else{if(!(event instanceof TouchEvent))return;end={x:event.touches[0].screenX,y:event.touches[0].screenY}}this.drag(start,end,areaA,areaB)}},SplitComponent.prototype.drag=function(start,end,areaA,areaB){var offsetPixel="horizontal"===this.direction?start.x-end.x:start.y-end.y,newSizePixelA=this.dragStartValues.sizePixelA-offsetPixel,newSizePixelB=this.dragStartValues.sizePixelB+offsetPixel;newSizePixelA<this.gutterSize&&newSizePixelB<this.gutterSize||(newSizePixelA<this.gutterSize?(newSizePixelB+=newSizePixelA,newSizePixelA=0):newSizePixelB<this.gutterSize&&(newSizePixelA+=newSizePixelB,newSizePixelB=0),0===newSizePixelA?(areaB.size+=areaA.size,areaA.size=0):0===newSizePixelB?(areaA.size+=areaB.size,areaB.size=0):0===this.dragStartValues.sizePercentA?(areaB.size=((this.dragStartValues.sizePixelContainer*this.dragStartValues.sizePercentB-areaB.pxToSubtract)/this.dragStartValues.sizePixelB*newSizePixelB+areaB.pxToSubtract)/this.dragStartValues.sizePixelContainer,areaA.size=this.dragStartValues.sizePercentB-areaB.size):0===this.dragStartValues.sizePercentB?(areaA.size=((this.dragStartValues.sizePixelContainer*this.dragStartValues.sizePercentA-areaA.pxToSubtract)/this.dragStartValues.sizePixelA*newSizePixelA+areaA.pxToSubtract)/this.dragStartValues.sizePixelContainer,areaB.size=this.dragStartValues.sizePercentA-areaA.size):(areaA.size=((this.dragStartValues.sizePixelContainer*this.dragStartValues.sizePercentA-areaA.pxToSubtract)/this.dragStartValues.sizePixelA*newSizePixelA+areaA.pxToSubtract)/this.dragStartValues.sizePixelContainer,areaB.size=this.dragStartValues.sizePercentA+this.dragStartValues.sizePercentB-areaA.size),0===areaA.size?(areaB.pxToSubtract+=areaA.pxToSubtract,areaA.pxToSubtract=0):0===areaB.size&&(areaA.pxToSubtract+=areaB.pxToSubtract,areaB.pxToSubtract=0),this.refreshStyleSizes(),this.notify("progress"))},SplitComponent.prototype.stopDragging=function(){if(this.isDragging){for(this.displayedAreas.forEach(function(area){area.comp.unlockEvents()}),console.log(">",this.displayedAreas.map(function(a){return a.size}).join("/"),"  ",this.displayedAreas.map(function(a){return a.size}).reduce(function(tot,s){return tot+s},0));this.dragListeners.length>0;){var fct=this.dragListeners.pop();fct&&fct()}this.isDragging=!1,this.notify("end")}},SplitComponent.prototype.notify=function(type){var areasSize=this.displayedAreas.map(function(a){return 100*a.size});switch(type){case"start":return this.dragStart.emit(areasSize);case"progress":return this.dragProgress.emit(areasSize);case"end":return this.dragEnd.emit(areasSize);case"visibleTransitionEnd":return this.visibleTransitionEndInternal.next(areasSize)}},SplitComponent.prototype.ngOnDestroy=function(){this.stopDragging()},SplitComponent.decorators=[{type:core.Component,args:[{selector:"split",changeDetection:core.ChangeDetectionStrategy.OnPush,styles:["\n        :host {\n            display: flex;\n            flex-wrap: nowrap;\n            justify-content: flex-start;\n            align-items: stretch;\n            overflow: hidden;\n        }\n\n        split-gutter {\n            flex-grow: 0;\n            flex-shrink: 0;\n            background-color: #eeeeee;\n            background-position: center center;\n            background-repeat: no-repeat;\n        }\n\n        :host.vertical split-gutter {\n            width: 100%;\n        }\n    "],template:'\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]="displayedAreas" let-index="index" let-last="last">\n            <split-gutter *ngIf="last === false" \n                          [order]="index*2+1"\n                          [direction]="direction"\n                          [size]="gutterSize"\n                          [disabled]="disabled"\n                          (mousedown)="startDragging($event, index*2+1)"\n                          (touchstart)="startDragging($event, index*2+1)"></split-gutter>\n        </ng-template>'}]}],SplitComponent.ctorParameters=function(){return[{type:core.ElementRef},{type:core.ChangeDetectorRef},{type:core.Renderer2}]},SplitComponent.propDecorators={direction:[{type:core.Input}],visibleTransition:[{type:core.Input}],width:[{type:core.Input}],height:[{type:core.Input}],gutterSize:[{type:core.Input}],disabled:[{type:core.Input}],dragStart:[{type:core.Output}],dragProgress:[{type:core.Output}],dragEnd:[{type:core.Output}],visibleTransitionEnd:[{type:core.Output}],cssFlexdirection:[{type:core.HostBinding,args:["style.flex-direction"]}],cssWidth:[{type:core.HostBinding,args:["style.width"]}],cssHeight:[{type:core.HostBinding,args:["style.height"]}],cssMinwidth:[{type:core.HostBinding,args:["style.min-width"]}],cssMinheight:[{type:core.HostBinding,args:["style.min-height"]}]},SplitComponent}(),SplitAreaDirective=function(){function SplitAreaDirective(elRef,renderer,split){this.elRef=elRef,this.renderer=renderer,this.split=split,this._order=null,this._size=null,this._minSize=0,this._visible=!0,this.lockListeners=[]}return Object.defineProperty(SplitAreaDirective.prototype,"order",{get:function(){return this._order},set:function(v){this._order=isNaN(v)?null:v,this.split.updateArea(this)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitAreaDirective.prototype,"size",{get:function(){return this._size},set:function(v){this._size=!isNaN(v)&&v>=0&&v<=100?v/100:null,this.split.updateArea(this)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitAreaDirective.prototype,"minSize",{get:function(){return this._minSize},set:function(v){this._minSize=!isNaN(v)&&v>0&&v<100?v/100:0,this.split.updateArea(this)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitAreaDirective.prototype,"visible",{get:function(){return this._visible},set:function(v){this._visible=v,this.setStyleVisibleAndDir(v,this.split.direction),this.visible?this.split.showArea(this):this.split.hideArea(this)},enumerable:!0,configurable:!0}),SplitAreaDirective.prototype.ngOnInit=function(){var _this=this;this.split.addArea(this),this.renderer.setStyle(this.elRef.nativeElement,"flex-grow","0"),this.renderer.setStyle(this.elRef.nativeElement,"flex-shrink","0"),this.transitionListener=this.renderer.listen(this.elRef.nativeElement,"transitionend",function(e){return _this.onTransitionEnd(e)})},SplitAreaDirective.prototype.getSizePixel=function(prop){return this.elRef.nativeElement[prop]},SplitAreaDirective.prototype.setStyleVisibleAndDir=function(isVisible,direction){!1===isVisible?(this.renderer.setStyle(this.elRef.nativeElement,"flex-basis","0"),this.renderer.setStyle(this.elRef.nativeElement,"overflow-x","hidden"),this.renderer.setStyle(this.elRef.nativeElement,"overflow-y","hidden"),"vertical"===direction&&this.renderer.setStyle(this.elRef.nativeElement,"max-width","0")):(this.renderer.setStyle(this.elRef.nativeElement,"overflow-x","hidden"),this.renderer.setStyle(this.elRef.nativeElement,"overflow-y","auto"),this.renderer.removeStyle(this.elRef.nativeElement,"max-width")),"horizontal"===direction?this.renderer.setStyle(this.elRef.nativeElement,"height","100%"):this.renderer.removeStyle(this.elRef.nativeElement,"height")},SplitAreaDirective.prototype.setStyleTransition=function(withTransition){!0===withTransition?this.renderer.setStyle(this.elRef.nativeElement,"transition","flex-basis 0.3s"):this.renderer.setStyle(this.elRef.nativeElement,"transition",null)},SplitAreaDirective.prototype.setStyleOrder=function(value){this.renderer.setStyle(this.elRef.nativeElement,"order",value)},SplitAreaDirective.prototype.setStyleFlexbasis=function(value){this.renderer.setStyle(this.elRef.nativeElement,"flex-basis",value)},SplitAreaDirective.prototype.onTransitionEnd=function(event){"flex-basis"===event.propertyName&&this.split.notify("visibleTransitionEnd")},SplitAreaDirective.prototype.lockEvents=function(){this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement,"selectstart",function(e){return!1})),this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement,"dragstart",function(e){return!1}))},SplitAreaDirective.prototype.unlockEvents=function(){for(;this.lockListeners.length>0;){var fct=this.lockListeners.pop();fct&&fct()}},SplitAreaDirective.prototype.ngOnDestroy=function(){this.unlockEvents(),this.transitionListener&&this.transitionListener(),this.split.removeArea(this)},SplitAreaDirective.decorators=[{type:core.Directive,args:[{selector:"split-area"}]}],SplitAreaDirective.ctorParameters=function(){return[{type:core.ElementRef},{type:core.Renderer2},{type:SplitComponent}]},SplitAreaDirective.propDecorators={order:[{type:core.Input}],size:[{type:core.Input}],minSize:[{type:core.Input}],visible:[{type:core.Input}]},SplitAreaDirective}(),SplitGutterDirective=function(){function SplitGutterDirective(elementRef,renderer){this.elementRef=elementRef,this.renderer=renderer,this._disabled=!1}return Object.defineProperty(SplitGutterDirective.prototype,"order",{set:function(v){this.renderer.setStyle(this.elementRef.nativeElement,"order",v)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitGutterDirective.prototype,"direction",{get:function(){return this._direction},set:function(v){this._direction=v,this.refreshStyle()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitGutterDirective.prototype,"size",{get:function(){return this._size},set:function(v){this._size=v,this.refreshStyle()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitGutterDirective.prototype,"disabled",{get:function(){return this._disabled},set:function(v){this._disabled=v,this.refreshStyle()},enumerable:!0,configurable:!0}),SplitGutterDirective.prototype.refreshStyle=function(){this.renderer.setStyle(this.elementRef.nativeElement,"flex-basis",this.size+"px"),this.renderer.setStyle(this.elementRef.nativeElement,"height","vertical"===this.direction?this.size+"px":"100%");var state=!0===this.disabled?"disabled":this.direction;this.renderer.setStyle(this.elementRef.nativeElement,"cursor",getCursor(state)),this.renderer.setStyle(this.elementRef.nativeElement,"background-image",'url("'+getImage(state)+'")')},SplitGutterDirective.decorators=[{type:core.Directive,args:[{selector:"split-gutter"}]}],SplitGutterDirective.ctorParameters=function(){return[{type:core.ElementRef},{type:core.Renderer2}]},SplitGutterDirective.propDecorators={order:[{type:core.Input}],direction:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}]},SplitGutterDirective}(),AngularSplitModule=function(){function AngularSplitModule(){}return AngularSplitModule.forRoot=function(){return{ngModule:AngularSplitModule,providers:[]}},AngularSplitModule.forChild=function(){return{ngModule:AngularSplitModule,providers:[]}},AngularSplitModule.decorators=[{type:core.NgModule,args:[{imports:[common.CommonModule],declarations:[SplitComponent,SplitAreaDirective,SplitGutterDirective],exports:[SplitComponent,SplitAreaDirective]}]}],AngularSplitModule.ctorParameters=function(){return[]},AngularSplitModule}();exports.AngularSplitModule=AngularSplitModule,exports.SplitComponent=SplitComponent,exports.SplitAreaDirective=SplitAreaDirective,exports.ɵa=SplitGutterDirective,Object.defineProperty(exports,"__esModule",{value:!0})});
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("@angular/common"),require("rxjs/Subject"),require("rxjs/add/operator/debounceTime")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","rxjs/Subject","rxjs/add/operator/debounceTime"],factory):factory((global.ng=global.ng||{},global.ng.angularSplit={}),global.ng.core,global.ng.common,global.Rx)}(this,function(exports,core,common,Subject){"use strict";function getCursor(state){switch(state){case"disabled":return"default";case"vertical":return"row-resize";case"horizontal":return"col-resize"}return""}function getImage(state){switch(state){case"vertical":return"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC";case"horizontal":return"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==";case"disabled":return""}return""}var SplitComponent=function(){function SplitComponent(elRef,cdRef,renderer){this.elRef=elRef,this.cdRef=cdRef,this.renderer=renderer,this._direction="horizontal",this._visibleTransition=!1,this._width=null,this._height=null,this._gutterSize=10,this._disabled=!1,this.dragStart=new core.EventEmitter(!1),this.dragProgress=new core.EventEmitter(!1),this.dragEnd=new core.EventEmitter(!1),this.gutterClick=new core.EventEmitter(!1),this.visibleTransitionEndInternal=new Subject.Subject,this.visibleTransitionEnd=this.visibleTransitionEndInternal.asObservable().debounceTime(20),this._isDragging=!1,this.draggingWithoutMove=!1,this.currentGutterNum=0,this.displayedAreas=[],this.hidedAreas=[],this.dragListeners=[],this.dragStartValues={sizePixelContainer:0,sizePixelA:0,sizePixelB:0,sizePercentA:0,sizePercentB:0}}return Object.defineProperty(SplitComponent.prototype,"direction",{get:function(){return this._direction},set:function(v){var _this=this;v="vertical"===v?"vertical":"horizontal",this._direction=v,this.displayedAreas.concat(this.hidedAreas).forEach(function(area){area.comp.setStyleVisibleAndDir(area.comp.visible,_this._direction)}),this.build()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"visibleTransition",{get:function(){return this._visibleTransition},set:function(v){var _this=this;v="boolean"==typeof v?v:"false"!==v,this._visibleTransition=v,this.displayedAreas.concat(this.hidedAreas).forEach(function(area){area.comp.setStyleTransition(_this._visibleTransition)})},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"width",{get:function(){return this._width},set:function(v){v=Number(v),this._width=!isNaN(v)&&v>0?v:null,this.build()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"height",{get:function(){return this._height},set:function(v){v=Number(v),this._height=!isNaN(v)&&v>0?v:null,this.build()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"gutterSize",{get:function(){return this._gutterSize},set:function(v){v=Number(v),this._gutterSize=!isNaN(v)&&v>0?v:10,this.build()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"disabled",{get:function(){return this._disabled},set:function(v){v="boolean"==typeof v?v:"false"!==v,this._disabled=v,this.build()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"cssFlexdirection",{get:function(){return"horizontal"===this.direction?"row":"column"},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"cssWidth",{get:function(){return this.width?this.width+"px":"100%"},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"cssHeight",{get:function(){return this.height?this.height+"px":"100%"},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"cssMinwidth",{get:function(){return"horizontal"===this.direction?this.getNbGutters()*this.gutterSize+"px":null},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"cssMinheight",{get:function(){return"vertical"===this.direction?this.getNbGutters()*this.gutterSize+"px":null},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"isDragging",{get:function(){return this._isDragging},set:function(v){var _this=this;this._isDragging=v,this.displayedAreas.concat(this.hidedAreas).forEach(function(area){area.comp.setStyleTransition(!v&&_this.visibleTransition)})},enumerable:!0,configurable:!0}),SplitComponent.prototype.getNbGutters=function(){return this.displayedAreas.length-1},SplitComponent.prototype.addArea=function(comp){var newArea={comp:comp,order:-1,size:-1,pxToSubtract:0};!0===comp.visible?this.displayedAreas.push(newArea):this.hidedAreas.push(newArea),comp.setStyleVisibleAndDir(comp.visible,this.direction),comp.setStyleTransition(this.visibleTransition),this.build()},SplitComponent.prototype.updateArea=function(comp){this.displayedAreas.find(function(a){return a.comp===comp})&&this.build()},SplitComponent.prototype.removeArea=function(comp){if(this.displayedAreas.some(function(a){return a.comp===comp})){area=this.displayedAreas.find(function(a){return a.comp===comp});this.displayedAreas.splice(this.displayedAreas.indexOf(area),1),this.build()}else if(this.hidedAreas.some(function(a){return a.comp===comp})){var area=this.hidedAreas.find(function(a){return a.comp===comp});this.hidedAreas.splice(this.hidedAreas.indexOf(area),1)}},SplitComponent.prototype.hideArea=function(comp){var area=this.displayedAreas.find(function(a){return a.comp===comp});if(area){var areas=this.displayedAreas.splice(this.displayedAreas.indexOf(area),1);(_a=this.hidedAreas).push.apply(_a,areas),this.build()}var _a},SplitComponent.prototype.showArea=function(comp){var area=this.hidedAreas.find(function(a){return a.comp===comp});if(area){var areas=this.hidedAreas.splice(this.hidedAreas.indexOf(area),1);(_a=this.displayedAreas).push.apply(_a,areas),this.build()}var _a},SplitComponent.prototype.build=function(){var _this=this;this.stopDragging(),this.displayedAreas.every(function(a){return null!==a.comp.order})&&this.displayedAreas.sort(function(a,b){return a.comp.order-b.comp.order}),this.displayedAreas.forEach(function(area,i){area.order=2*i,area.comp.setStyleOrder(area.order)});var totalUserSize=this.displayedAreas.reduce(function(total,s){return s.comp.size?total+s.comp.size:total},0);if(this.displayedAreas.some(function(a){return null===a.comp.size})||totalUserSize<.999||totalUserSize>1.001){var size_1=Number((1/this.displayedAreas.length).toFixed(4));this.displayedAreas.forEach(function(area){area.size=size_1})}else{var percentToShare_1=0,prop="horizontal"===this.direction?"offsetWidth":"offsetHeight",containerSizePixel_1=this.elRef.nativeElement[prop];if(this.displayedAreas.forEach(function(area){var newSize=Number(area.comp.size);newSize*containerSizePixel_1<_this.gutterSize&&(percentToShare_1+=newSize,newSize=0),area.size=newSize}),percentToShare_1>0){var nbAreasNotZero=this.displayedAreas.filter(function(a){return 0!==a.size}).length,percentToAdd_1=percentToShare_1/nbAreasNotZero;this.displayedAreas.filter(function(a){return 0!==a.size}).forEach(function(area){area.size+=percentToAdd_1})}}var totalPxToSubtract=this.getNbGutters()*this.gutterSize,areasSizeNotZero=this.displayedAreas.filter(function(a){return 0!==a.size});areasSizeNotZero.forEach(function(area){area.pxToSubtract=totalPxToSubtract/areasSizeNotZero.length}),this.refreshStyleSizes(),this.cdRef.markForCheck()},SplitComponent.prototype.refreshStyleSizes=function(){this.displayedAreas.forEach(function(area){area.comp.setStyleFlexbasis("calc( "+100*area.size+"% - "+area.pxToSubtract+"px )")})},SplitComponent.prototype.startDragging=function(startEvent,gutterOrder,gutterNum){var _this=this;if(startEvent.preventDefault(),!this.disabled){var areaA=this.displayedAreas.find(function(a){return a.order===gutterOrder-1}),areaB=this.displayedAreas.find(function(a){return a.order===gutterOrder+1});if(areaA&&areaB){var prop="horizontal"===this.direction?"offsetWidth":"offsetHeight";this.dragStartValues.sizePixelContainer=this.elRef.nativeElement[prop],this.dragStartValues.sizePixelA=areaA.comp.getSizePixel(prop),this.dragStartValues.sizePixelB=areaB.comp.getSizePixel(prop),this.dragStartValues.sizePercentA=areaA.size,this.dragStartValues.sizePercentB=areaB.size;var start;if(startEvent instanceof MouseEvent)start={x:startEvent.screenX,y:startEvent.screenY};else{if(!(startEvent instanceof TouchEvent))return;start={x:startEvent.touches[0].screenX,y:startEvent.touches[0].screenY}}this.dragListeners.push(this.renderer.listen("document","mousemove",function(e){return _this.dragEvent(e,start,areaA,areaB)})),this.dragListeners.push(this.renderer.listen("document","touchmove",function(e){return _this.dragEvent(e,start,areaA,areaB)})),this.dragListeners.push(this.renderer.listen("document","mouseup",function(e){return _this.stopDragging()})),this.dragListeners.push(this.renderer.listen("document","touchend",function(e){return _this.stopDragging()})),this.dragListeners.push(this.renderer.listen("document","touchcancel",function(e){return _this.stopDragging()})),areaA.comp.lockEvents(),areaB.comp.lockEvents(),this.isDragging=!0,this.draggingWithoutMove=!0,this.currentGutterNum=gutterNum,this.notify("start")}}},SplitComponent.prototype.dragEvent=function(event,start,areaA,areaB){if(this.isDragging){var end;if(event instanceof MouseEvent)end={x:event.screenX,y:event.screenY};else{if(!(event instanceof TouchEvent))return;end={x:event.touches[0].screenX,y:event.touches[0].screenY}}this.draggingWithoutMove=!1,this.drag(start,end,areaA,areaB)}},SplitComponent.prototype.drag=function(start,end,areaA,areaB){var offsetPixel="horizontal"===this.direction?start.x-end.x:start.y-end.y,newSizePixelA=this.dragStartValues.sizePixelA-offsetPixel,newSizePixelB=this.dragStartValues.sizePixelB+offsetPixel;newSizePixelA<this.gutterSize&&newSizePixelB<this.gutterSize||(newSizePixelA<this.gutterSize?(newSizePixelB+=newSizePixelA,newSizePixelA=0):newSizePixelB<this.gutterSize&&(newSizePixelA+=newSizePixelB,newSizePixelB=0),0===newSizePixelA?(areaB.size+=areaA.size,areaA.size=0):0===newSizePixelB?(areaA.size+=areaB.size,areaB.size=0):0===this.dragStartValues.sizePercentA?(areaB.size=((this.dragStartValues.sizePixelContainer*this.dragStartValues.sizePercentB-areaB.pxToSubtract)/this.dragStartValues.sizePixelB*newSizePixelB+areaB.pxToSubtract)/this.dragStartValues.sizePixelContainer,areaA.size=this.dragStartValues.sizePercentB-areaB.size):0===this.dragStartValues.sizePercentB?(areaA.size=((this.dragStartValues.sizePixelContainer*this.dragStartValues.sizePercentA-areaA.pxToSubtract)/this.dragStartValues.sizePixelA*newSizePixelA+areaA.pxToSubtract)/this.dragStartValues.sizePixelContainer,areaB.size=this.dragStartValues.sizePercentA-areaA.size):(areaA.size=((this.dragStartValues.sizePixelContainer*this.dragStartValues.sizePercentA-areaA.pxToSubtract)/this.dragStartValues.sizePixelA*newSizePixelA+areaA.pxToSubtract)/this.dragStartValues.sizePixelContainer,areaB.size=this.dragStartValues.sizePercentA+this.dragStartValues.sizePercentB-areaA.size),0===areaA.size?(areaB.pxToSubtract+=areaA.pxToSubtract,areaA.pxToSubtract=0):0===areaB.size&&(areaA.pxToSubtract+=areaB.pxToSubtract,areaB.pxToSubtract=0),this.refreshStyleSizes(),this.notify("progress"))},SplitComponent.prototype.stopDragging=function(){if(this.isDragging){for(this.displayedAreas.forEach(function(area){area.comp.unlockEvents()}),console.log(">",this.displayedAreas.map(function(a){return a.size}).join("/"),"  ",this.displayedAreas.map(function(a){return a.size}).reduce(function(tot,s){return tot+s},0));this.dragListeners.length>0;){var fct=this.dragListeners.pop();fct&&fct()}this.isDragging=!1,!0===this.draggingWithoutMove?this.notify("click"):this.notify("end")}},SplitComponent.prototype.notify=function(type){var areasSize=this.displayedAreas.map(function(a){return 100*a.size});switch(type){case"start":return this.dragStart.emit({gutterNum:this.currentGutterNum,sizes:areasSize});case"progress":return this.dragProgress.emit({gutterNum:this.currentGutterNum,sizes:areasSize});case"end":return this.dragEnd.emit({gutterNum:this.currentGutterNum,sizes:areasSize});case"click":return this.gutterClick.emit({gutterNum:this.currentGutterNum,sizes:areasSize});case"visibleTransitionEnd":return this.visibleTransitionEndInternal.next(areasSize)}},SplitComponent.prototype.ngOnDestroy=function(){this.stopDragging()},SplitComponent.decorators=[{type:core.Component,args:[{selector:"split",changeDetection:core.ChangeDetectionStrategy.OnPush,styles:["\n        :host {\n            display: flex;\n            flex-wrap: nowrap;\n            justify-content: flex-start;\n            align-items: stretch;\n            overflow: hidden;\n        }\n\n        split-gutter {\n            flex-grow: 0;\n            flex-shrink: 0;\n            background-color: #eeeeee;\n            background-position: center center;\n            background-repeat: no-repeat;\n        }\n\n        :host.vertical split-gutter {\n            width: 100%;\n        }\n    "],template:'\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]="displayedAreas" let-index="index" let-last="last">\n            <split-gutter *ngIf="last === false" \n                          [order]="index*2+1"\n                          [direction]="direction"\n                          [size]="gutterSize"\n                          [disabled]="disabled"\n                          (mousedown)="startDragging($event, index*2+1, index+1)"\n                          (touchstart)="startDragging($event, index*2+1, index+1)"></split-gutter>\n        </ng-template>'}]}],SplitComponent.ctorParameters=function(){return[{type:core.ElementRef},{type:core.ChangeDetectorRef},{type:core.Renderer2}]},SplitComponent.propDecorators={direction:[{type:core.Input}],visibleTransition:[{type:core.Input}],width:[{type:core.Input}],height:[{type:core.Input}],gutterSize:[{type:core.Input}],disabled:[{type:core.Input}],dragStart:[{type:core.Output}],dragProgress:[{type:core.Output}],dragEnd:[{type:core.Output}],gutterClick:[{type:core.Output}],visibleTransitionEnd:[{type:core.Output}],cssFlexdirection:[{type:core.HostBinding,args:["style.flex-direction"]}],cssWidth:[{type:core.HostBinding,args:["style.width"]}],cssHeight:[{type:core.HostBinding,args:["style.height"]}],cssMinwidth:[{type:core.HostBinding,args:["style.min-width"]}],cssMinheight:[{type:core.HostBinding,args:["style.min-height"]}]},SplitComponent}(),SplitAreaDirective=function(){function SplitAreaDirective(elRef,renderer,split){this.elRef=elRef,this.renderer=renderer,this.split=split,this._order=null,this._size=null,this._minSize=0,this._visible=!0,this.lockListeners=[]}return Object.defineProperty(SplitAreaDirective.prototype,"order",{get:function(){return this._order},set:function(v){v=Number(v),this._order=isNaN(v)?null:v,this.split.updateArea(this)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitAreaDirective.prototype,"size",{get:function(){return this._size},set:function(v){v=Number(v),this._size=!isNaN(v)&&v>=0&&v<=100?v/100:null,this.split.updateArea(this)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitAreaDirective.prototype,"minSize",{get:function(){return this._minSize},set:function(v){v=Number(v),this._minSize=!isNaN(v)&&v>0&&v<100?v/100:0,this.split.updateArea(this)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitAreaDirective.prototype,"visible",{get:function(){return this._visible},set:function(v){v="boolean"==typeof v?v:"false"!==v,this._visible=v,this.setStyleVisibleAndDir(v,this.split.direction),this.visible?this.split.showArea(this):this.split.hideArea(this)},enumerable:!0,configurable:!0}),SplitAreaDirective.prototype.ngOnInit=function(){var _this=this;this.split.addArea(this),this.renderer.setStyle(this.elRef.nativeElement,"flex-grow","0"),this.renderer.setStyle(this.elRef.nativeElement,"flex-shrink","0"),this.transitionListener=this.renderer.listen(this.elRef.nativeElement,"transitionend",function(e){return _this.onTransitionEnd(e)})},SplitAreaDirective.prototype.getSizePixel=function(prop){return this.elRef.nativeElement[prop]},SplitAreaDirective.prototype.setStyleVisibleAndDir=function(isVisible,direction){!1===isVisible?(this.renderer.setStyle(this.elRef.nativeElement,"flex-basis","0"),this.renderer.setStyle(this.elRef.nativeElement,"overflow-x","hidden"),this.renderer.setStyle(this.elRef.nativeElement,"overflow-y","hidden"),"vertical"===direction&&this.renderer.setStyle(this.elRef.nativeElement,"max-width","0")):(this.renderer.setStyle(this.elRef.nativeElement,"overflow-x","hidden"),this.renderer.setStyle(this.elRef.nativeElement,"overflow-y","auto"),this.renderer.removeStyle(this.elRef.nativeElement,"max-width")),"horizontal"===direction?this.renderer.setStyle(this.elRef.nativeElement,"height","100%"):this.renderer.removeStyle(this.elRef.nativeElement,"height")},SplitAreaDirective.prototype.setStyleTransition=function(withTransition){!0===withTransition?this.renderer.setStyle(this.elRef.nativeElement,"transition","flex-basis 0.3s"):this.renderer.setStyle(this.elRef.nativeElement,"transition",null)},SplitAreaDirective.prototype.setStyleOrder=function(value){this.renderer.setStyle(this.elRef.nativeElement,"order",value)},SplitAreaDirective.prototype.setStyleFlexbasis=function(value){this.renderer.setStyle(this.elRef.nativeElement,"flex-basis",value)},SplitAreaDirective.prototype.onTransitionEnd=function(event){"flex-basis"===event.propertyName&&this.split.notify("visibleTransitionEnd")},SplitAreaDirective.prototype.lockEvents=function(){this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement,"selectstart",function(e){return!1})),this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement,"dragstart",function(e){return!1}))},SplitAreaDirective.prototype.unlockEvents=function(){for(;this.lockListeners.length>0;){var fct=this.lockListeners.pop();fct&&fct()}},SplitAreaDirective.prototype.ngOnDestroy=function(){this.unlockEvents(),this.transitionListener&&this.transitionListener(),this.split.removeArea(this)},SplitAreaDirective.decorators=[{type:core.Directive,args:[{selector:"split-area"}]}],SplitAreaDirective.ctorParameters=function(){return[{type:core.ElementRef},{type:core.Renderer2},{type:SplitComponent}]},SplitAreaDirective.propDecorators={order:[{type:core.Input}],size:[{type:core.Input}],minSize:[{type:core.Input}],visible:[{type:core.Input}]},SplitAreaDirective}(),SplitGutterDirective=function(){function SplitGutterDirective(elementRef,renderer){this.elementRef=elementRef,this.renderer=renderer,this._disabled=!1}return Object.defineProperty(SplitGutterDirective.prototype,"order",{set:function(v){this.renderer.setStyle(this.elementRef.nativeElement,"order",v)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitGutterDirective.prototype,"direction",{get:function(){return this._direction},set:function(v){this._direction=v,this.refreshStyle()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitGutterDirective.prototype,"size",{get:function(){return this._size},set:function(v){this._size=v,this.refreshStyle()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitGutterDirective.prototype,"disabled",{get:function(){return this._disabled},set:function(v){this._disabled=v,this.refreshStyle()},enumerable:!0,configurable:!0}),SplitGutterDirective.prototype.refreshStyle=function(){this.renderer.setStyle(this.elementRef.nativeElement,"flex-basis",this.size+"px"),this.renderer.setStyle(this.elementRef.nativeElement,"height","vertical"===this.direction?this.size+"px":"100%");var state=!0===this.disabled?"disabled":this.direction;this.renderer.setStyle(this.elementRef.nativeElement,"cursor",getCursor(state)),this.renderer.setStyle(this.elementRef.nativeElement,"background-image",'url("'+getImage(state)+'")')},SplitGutterDirective.decorators=[{type:core.Directive,args:[{selector:"split-gutter"}]}],SplitGutterDirective.ctorParameters=function(){return[{type:core.ElementRef},{type:core.Renderer2}]},SplitGutterDirective.propDecorators={order:[{type:core.Input}],direction:[{type:core.Input}],size:[{type:core.Input}],disabled:[{type:core.Input}]},SplitGutterDirective}(),AngularSplitModule=function(){function AngularSplitModule(){}return AngularSplitModule.forRoot=function(){return{ngModule:AngularSplitModule,providers:[]}},AngularSplitModule.forChild=function(){return{ngModule:AngularSplitModule,providers:[]}},AngularSplitModule.decorators=[{type:core.NgModule,args:[{imports:[common.CommonModule],declarations:[SplitComponent,SplitAreaDirective,SplitGutterDirective],exports:[SplitComponent,SplitAreaDirective]}]}],AngularSplitModule.ctorParameters=function(){return[]},AngularSplitModule}();exports.AngularSplitModule=AngularSplitModule,exports.SplitComponent=SplitComponent,exports.SplitAreaDirective=SplitAreaDirective,exports.ɵa=SplitGutterDirective,Object.defineProperty(exports,"__esModule",{value:!0})});

esm2015/angular-split.js

@@ -55,5 +55,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, HostBinding, Input, NgModule, Output, Renderer2 } from '@angular/core';
         this.dragEnd = new EventEmitter(false);
+        this.gutterClick = new EventEmitter(false);
         this.visibleTransitionEndInternal = new Subject$1();
         this.visibleTransitionEnd = (/** @type {?} */ (this.visibleTransitionEndInternal.asObservable())).debounceTime(20);
         this._isDragging = false;
+        this.draggingWithoutMove = false;
+        this.currentGutterNum = 0;
         this.displayedAreas = [];
@@ -75,3 +78,4 @@ this.hidedAreas = [];
     set direction(v) {
-        this._direction = (v === 'horizontal') ? v : 'vertical';
+        v = (v === 'vertical') ? 'vertical' : 'horizontal';
+        this._direction = v;
         [...this.displayedAreas, ...this.hidedAreas].forEach(area => {
@@ -93,3 +97,4 @@ area.comp.setStyleVisibleAndDir(area.comp.visible, this._direction);
     set visibleTransition(v) {
-        this._visibleTransition = Boolean(v);
+        v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
+        this._visibleTransition = v;
         [...this.displayedAreas, ...this.hidedAreas].forEach(area => {
@@ -110,3 +115,4 @@ area.comp.setStyleTransition(this._visibleTransition);
     set width(v) {
-        this._width = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+        v = Number(v);
+        this._width = (!isNaN(v) && v > 0) ? v : null;
         this.build();
@@ -125,3 +131,4 @@ }
     set height(v) {
-        this._height = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+        v = Number(v);
+        this._height = (!isNaN(v) && v > 0) ? v : null;
         this.build();
@@ -140,2 +147,3 @@ }
     set gutterSize(v) {
+        v = Number(v);
         this._gutterSize = !isNaN(v) && v > 0 ? v : 10;
@@ -155,3 +163,4 @@ this.build();
     set disabled(v) {
-        this._disabled = Boolean(v);
+        v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
+        this._disabled = v;
         this.build();
@@ -353,5 +362,6 @@ }
      * @param {?} gutterOrder
+     * @param {?} gutterNum
      * @return {?}
      */
-    startDragging(startEvent, gutterOrder) {
+    startDragging(startEvent, gutterOrder, gutterNum) {
         startEvent.preventDefault();
@@ -396,2 +406,4 @@ if (this.disabled) {
         this.isDragging = true;
+        this.draggingWithoutMove = true;
+        this.currentGutterNum = gutterNum;
         this.notify('start');
@@ -426,2 +438,3 @@ }
         }
+        this.draggingWithoutMove = false;
         this.drag(start, end, areaA, areaB);
@@ -441,2 +454,4 @@ }
         let /** @type {?} */ newSizePixelB = this.dragStartValues.sizePixelB + offsetPixel;
+        //const debSizePxA = newSizePixelA;
+        //const debSizePxB = newSizePixelB;
         if (newSizePixelA < this.gutterSize && newSizePixelB < this.gutterSize) {
@@ -455,2 +470,4 @@ // WTF.. get out of here!
         // ¤ AREAS SIZE PERCENT
+        //const debSizeA = areaA.size;
+        //const debSizeB = areaB.size;
         if (newSizePixelA === 0) {
@@ -480,2 +497,4 @@ areaB.size += areaA.size;
         }
+        //const debPxToSubtractA = areaA.pxToSubtract;
+        //const debPxToSubtractB = areaB.pxToSubtract;
         if (areaA.size === 0) {
@@ -519,3 +538,8 @@ areaB.pxToSubtract += areaA.pxToSubtract;
         this.isDragging = false;
-        this.notify('end');
+        if (this.draggingWithoutMove === true) {
+            this.notify('click');
+        }
+        else {
+            this.notify('end');
+        }
     }
@@ -530,7 +554,9 @@ /**
             case 'start':
-                return this.dragStart.emit(areasSize);
+                return this.dragStart.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
             case 'progress':
-                return this.dragProgress.emit(areasSize);
+                return this.dragProgress.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
             case 'end':
-                return this.dragEnd.emit(areasSize);
+                return this.dragEnd.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
+            case 'click':
+                return this.gutterClick.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
             case 'visibleTransitionEnd':
@@ -580,4 +606,4 @@ return this.visibleTransitionEndInternal.next(areasSize);
                           [disabled]="disabled"
-                          (mousedown)="startDragging($event, index*2+1)"
-                          (touchstart)="startDragging($event, index*2+1)"></split-gutter>
+                          (mousedown)="startDragging($event, index*2+1, index+1)"
+                          (touchstart)="startDragging($event, index*2+1, index+1)"></split-gutter>
         </ng-template>`,
@@ -602,2 +628,3 @@ },] },
     "dragEnd": [{ type: Output },],
+    "gutterClick": [{ type: Output },],
     "visibleTransitionEnd": [{ type: Output },],
@@ -636,3 +663,4 @@ "cssFlexdirection": [{ type: HostBinding, args: ['style.flex-direction',] },],
     set order(v) {
-        this._order = !isNaN(/** @type {?} */ (v)) ? v : null;
+        v = Number(v);
+        this._order = !isNaN(v) ? v : null;
         this.split.updateArea(this);
@@ -651,3 +679,4 @@ }
     set size(v) {
-        this._size = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) >= 0 && /** @type {?} */ (v) <= 100) ? (/** @type {?} */ (v) / 100) : null;
+        v = Number(v);
+        this._size = (!isNaN(v) && v >= 0 && v <= 100) ? (v / 100) : null;
         this.split.updateArea(this);
@@ -666,2 +695,3 @@ }
     set minSize(v) {
+        v = Number(v);
         this._minSize = (!isNaN(v) && v > 0 && v < 100) ? v / 100 : 0;
@@ -681,2 +711,3 @@ this.split.updateArea(this);
     set visible(v) {
+        v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
         this._visible = v;
@@ -683,0 +714,0 @@ this.setStyleVisibleAndDir(v, this.split.direction);

esm5/angular-split.js

@@ -50,5 +50,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, HostBinding, Input, NgModule, Output, Renderer2 } from '@angular/core';
         this.dragEnd = new EventEmitter(false);
+        this.gutterClick = new EventEmitter(false);
         this.visibleTransitionEndInternal = new Subject$1();
         this.visibleTransitionEnd = (/** @type {?} */ (this.visibleTransitionEndInternal.asObservable())).debounceTime(20);
         this._isDragging = false;
+        this.draggingWithoutMove = false;
+        this.currentGutterNum = 0;
         this.displayedAreas = [];
@@ -78,3 +81,4 @@ this.hidedAreas = [];
             var _this = this;
-            this._direction = (v === 'horizontal') ? v : 'vertical';
+            v = (v === 'vertical') ? 'vertical' : 'horizontal';
+            this._direction = v;
             this.displayedAreas.concat(this.hidedAreas).forEach(function (area) {
@@ -101,3 +105,4 @@ area.comp.setStyleVisibleAndDir(area.comp.visible, _this._direction);
             var _this = this;
-            this._visibleTransition = Boolean(v);
+            v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
+            this._visibleTransition = v;
             this.displayedAreas.concat(this.hidedAreas).forEach(function (area) {
@@ -122,3 +127,4 @@ area.comp.setStyleTransition(_this._visibleTransition);
         function (v) {
-            this._width = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+            v = Number(v);
+            this._width = (!isNaN(v) && v > 0) ? v : null;
             this.build();
@@ -141,3 +147,4 @@ },
         function (v) {
-            this._height = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+            v = Number(v);
+            this._height = (!isNaN(v) && v > 0) ? v : null;
             this.build();
@@ -160,2 +167,3 @@ },
         function (v) {
+            v = Number(v);
             this._gutterSize = !isNaN(v) && v > 0 ? v : 10;
@@ -179,3 +187,4 @@ this.build();
         function (v) {
-            this._disabled = Boolean(v);
+            v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
+            this._disabled = v;
             this.build();
@@ -431,2 +440,3 @@ },
      * @param {?} gutterOrder
+     * @param {?} gutterNum
      * @return {?}
@@ -437,5 +447,6 @@ */
      * @param {?} gutterOrder
+     * @param {?} gutterNum
      * @return {?}
      */
-    function (startEvent, gutterOrder) {
+    function (startEvent, gutterOrder, gutterNum) {
         var _this = this;
@@ -481,2 +492,4 @@ startEvent.preventDefault();
         this.isDragging = true;
+        this.draggingWithoutMove = true;
+        this.currentGutterNum = gutterNum;
         this.notify('start');
@@ -518,2 +531,3 @@ };
         }
+        this.draggingWithoutMove = false;
         this.drag(start, end, areaA, areaB);
@@ -540,2 +554,4 @@ };
         var /** @type {?} */ newSizePixelB = this.dragStartValues.sizePixelB + offsetPixel;
+        //const debSizePxA = newSizePixelA;
+        //const debSizePxB = newSizePixelB;
         if (newSizePixelA < this.gutterSize && newSizePixelB < this.gutterSize) {
@@ -554,2 +570,4 @@ // WTF.. get out of here!
         // ¤ AREAS SIZE PERCENT
+        //const debSizeA = areaA.size;
+        //const debSizeB = areaB.size;
         if (newSizePixelA === 0) {
@@ -579,2 +597,4 @@ areaB.size += areaA.size;
         }
+        //const debPxToSubtractA = areaA.pxToSubtract;
+        //const debPxToSubtractB = areaB.pxToSubtract;
         if (areaA.size === 0) {
@@ -621,3 +641,8 @@ areaB.pxToSubtract += areaA.pxToSubtract;
         this.isDragging = false;
-        this.notify('end');
+        if (this.draggingWithoutMove === true) {
+            this.notify('click');
+        }
+        else {
+            this.notify('end');
+        }
     };
@@ -636,7 +661,9 @@ /**
             case 'start':
-                return this.dragStart.emit(areasSize);
+                return this.dragStart.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
             case 'progress':
-                return this.dragProgress.emit(areasSize);
+                return this.dragProgress.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
             case 'end':
-                return this.dragEnd.emit(areasSize);
+                return this.dragEnd.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
+            case 'click':
+                return this.gutterClick.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
             case 'visibleTransitionEnd':
@@ -660,3 +687,3 @@ return this.visibleTransitionEndInternal.next(areasSize);
                     styles: ["\n        :host {\n            display: flex;\n            flex-wrap: nowrap;\n            justify-content: flex-start;\n            align-items: stretch;\n            overflow: hidden;\n        }\n\n        split-gutter {\n            flex-grow: 0;\n            flex-shrink: 0;\n            background-color: #eeeeee;\n            background-position: center center;\n            background-repeat: no-repeat;\n        }\n\n        :host.vertical split-gutter {\n            width: 100%;\n        }\n    "],
-                    template: "\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false\" \n                          [order]=\"index*2+1\"\n                          [direction]=\"direction\"\n                          [size]=\"gutterSize\"\n                          [disabled]=\"disabled\"\n                          (mousedown)=\"startDragging($event, index*2+1)\"\n                          (touchstart)=\"startDragging($event, index*2+1)\"></split-gutter>\n        </ng-template>",
+                    template: "\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false\" \n                          [order]=\"index*2+1\"\n                          [direction]=\"direction\"\n                          [size]=\"gutterSize\"\n                          [disabled]=\"disabled\"\n                          (mousedown)=\"startDragging($event, index*2+1, index+1)\"\n                          (touchstart)=\"startDragging($event, index*2+1, index+1)\"></split-gutter>\n        </ng-template>",
                 },] },
@@ -680,2 +707,3 @@ ];
         "dragEnd": [{ type: Output },],
+        "gutterClick": [{ type: Output },],
         "visibleTransitionEnd": [{ type: Output },],
@@ -718,3 +746,4 @@ "cssFlexdirection": [{ type: HostBinding, args: ['style.flex-direction',] },],
         function (v) {
-            this._order = !isNaN(/** @type {?} */ (v)) ? v : null;
+            v = Number(v);
+            this._order = !isNaN(v) ? v : null;
             this.split.updateArea(this);
@@ -737,3 +766,4 @@ },
         function (v) {
-            this._size = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) >= 0 && /** @type {?} */ (v) <= 100) ? (/** @type {?} */ (v) / 100) : null;
+            v = Number(v);
+            this._size = (!isNaN(v) && v >= 0 && v <= 100) ? (v / 100) : null;
             this.split.updateArea(this);
@@ -756,2 +786,3 @@ },
         function (v) {
+            v = Number(v);
             this._minSize = (!isNaN(v) && v > 0 && v < 100) ? v / 100 : 0;
@@ -775,2 +806,3 @@ this.split.updateArea(this);
         function (v) {
+            v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
             this._visible = v;
@@ -777,0 +809,0 @@ this.setStyleVisibleAndDir(v, this.split.direction);

package.json

 {
     "name": "angular-split",
-    "version": "1.0.0-beta.2",
+    "version": "1.0.0-beta.3",
     "description": "Angular (2+) UI library to split views using CSS flexbox layout.",
@@ -5,0 +5,0 @@ "main": "./bundles/angular-split.umd.js",

src/components/split.component.d.ts

 import { ChangeDetectorRef, EventEmitter, Renderer2, OnDestroy, ElementRef } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
 import { Observable } from 'rxjs/Observable';
@@ -49,6 +48,19 @@ import 'rxjs/add/operator/debounceTime';
     disabled: boolean;
-    dragStart: EventEmitter<number[]>;
-    dragProgress: EventEmitter<number[]>;
-    dragEnd: EventEmitter<number[]>;
-    visibleTransitionEndInternal: Subject<number[]>;
+    dragStart: EventEmitter<{
+        gutterNum: number;
+        sizes: number[];
+    }>;
+    dragProgress: EventEmitter<{
+        gutterNum: number;
+        sizes: number[];
+    }>;
+    dragEnd: EventEmitter<{
+        gutterNum: number;
+        sizes: number[];
+    }>;
+    gutterClick: EventEmitter<{
+        gutterNum: number;
+        sizes: number[];
+    }>;
+    private visibleTransitionEndInternal;
     visibleTransitionEnd: Observable<number[]>;
@@ -62,2 +74,4 @@ readonly cssFlexdirection: string;
     isDragging: boolean;
+    private draggingWithoutMove;
+    private currentGutterNum;
     readonly displayedAreas: Array<IArea>;
@@ -76,3 +90,3 @@ readonly hidedAreas: Array<IArea>;
     private refreshStyleSizes();
-    startDragging(startEvent: MouseEvent | TouchEvent, gutterOrder: number): void;
+    startDragging(startEvent: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void;
     private dragEvent(event, start, areaA, areaB);
@@ -79,0 +93,0 @@ private drag(start, end, areaA, areaB);

No alert changes

Improved metrics

Total package byte prevSize

375777

increased by3.84%

Lines of code

3501

increased by3.21%

No dependency changes