angular-split - npm Package Compare versions

Comparing version 0.2.6 to 1.0.0-beta.1

angular-split.d.ts

@@ -0,0 +0,0 @@ /**

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":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSplitModule"},"providers":[]}},"forChild":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSplitModule"},"providers":[]}}}},"ɵa":{"__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            flex-direction: row;\n        }\n\n        :host.vertical {\n            flex-direction: column;\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\n        :host /deep/ split-area {\n            transition: flex-basis 0.3s;\n        }  \n\n        :host.notransition /deep/ split-area {\n            transition: none !important;\n        }      \n\n        :host /deep/ split-area.hided {\n            flex-basis: 0 !important;\n            overflow: hidden !important;\n        }      \n\n        :host.vertical /deep/ split-area.hided {\n            max-width: 0;\n        }\n    "],"template":"\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]=\"areas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false && area.component.visible === true && !isLastVisibleArea(area)\" \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"}}]}],"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"}}]}],"visibleTransition":[{"__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"}}]}],"styleFlexDirection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.vertical"]}]}],"styleFlexDirectionStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.flex-direction"]}]}],"dragging":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["class.notransition"]}]}],"styleWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.width"]}]}],"styleHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.height"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"ngOnChanges":[{"__symbolic":"method"}],"addArea":[{"__symbolic":"method"}],"updateArea":[{"__symbolic":"method"}],"removeArea":[{"__symbolic":"method"}],"hideArea":[{"__symbolic":"method"}],"showArea":[{"__symbolic":"method"}],"isLastVisibleArea":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"refreshStyleSizes":[{"__symbolic":"method"}],"startDragging":[{"__symbolic":"method"}],"dragEvent":[{"__symbolic":"method"}],"drag":[{"__symbolic":"method"}],"stopDragging":[{"__symbolic":"method"}],"notify":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"split-area","host":{"[style.flex-grow]":"\"0\"","[style.flex-shrink]":"\"0\"","[style.overflow-x]":"\"hidden\"","[style.overflow-y]":"\"auto\"","[style.height]":"\"100%\"","[class.hided]":"!visible","(transitionend)":"onTransitionEnd($event)"}}]}],"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"}}]}],"minSizePixel":[{"__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":"Renderer"},{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"lockEvents":[{"__symbolic":"method"}],"unlockEvents":[{"__symbolic":"method"}],"setStyle":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onTransitionEnd":[{"__symbolic":"method"}]}},"ɵc":{"__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":"Renderer"}]}],"refreshStyle":[{"__symbolic":"method"}],"setStyle":[{"__symbolic":"method"}],"getCursor":[{"__symbolic":"method"}],"getImage":[{"__symbolic":"method"}]}}},"origins":{"AngularSplitModule":"./src/modules/angularSplit.module","ɵa":"./src/components/split.component","ɵb":"./src/components/splitArea.directive","ɵc":"./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":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSplitModule"},"providers":[]}},"forChild":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"AngularSplitModule"},"providers":[]}}}},"ɵa":{"__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]=\"areas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false && area.comp.visible === true && !isLastVisibleArea(area)\" \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"}]}],"ngOnChanges":[{"__symbolic":"method"}],"getVisibleAreas":[{"__symbolic":"method"}],"getNbGutters":[{"__symbolic":"method"}],"addArea":[{"__symbolic":"method"}],"updateArea":[{"__symbolic":"method"}],"removeArea":[{"__symbolic":"method"}],"hideArea":[{"__symbolic":"method"}],"showArea":[{"__symbolic":"method"}],"isLastVisibleArea":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"refreshStyleSizes":[{"__symbolic":"method"}],"startDragging":[{"__symbolic":"method"}],"dragEvent":[{"__symbolic":"method"}],"drag":[{"__symbolic":"method"}],"stopDragging":[{"__symbolic":"method"}],"notify":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵb":{"__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":"ɵa"}]}],"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"}]}},"ɵc":{"__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","ɵa":"./src/components/split.component","ɵb":"./src/components/splitArea.directive","ɵc":"./src/components/splitGutter.directive"},"importAs":"angular-split"}

bundles/angular-split.umd.js

@@ -12,14 +12,38 @@ (function (global, factory) {
 /**
- * @record
+ * angular-split
+ *
+ * Areas size are set in percentage of the split container & gutters size in pixels.
+ * We need to subtract gutters size (in pixels) from area size percentages.
+ * So we set css flex-basis like this: "calc( {area.size}% - {area.pxToSubtract}px );"
+ *
+ * When an area size is 0, pixel need to be recalculate.
+ *
+ * Examples:  gutterSize * nbGutters / nbAreasMoreThanZero = 10*2/3 = 6.667px
+ *
+ *                            10px                        10px
+ * |--------------------------[]--------------------------[]--------------------------|
+ *    calc(33.33% - 6.667px)      calc(33.33% - 6.667px)      calc(33.33% - 6.667px)
+ *
+ *
+ *  10px                                                  10px
+ * |[]----------------------------------------------------[]--------------------------|
+ * 0                  calc(66.66% - 13.333px)                  calc(33%% - 6.667px)
+ *
+ *
+ *  10px 10px
+ * |[][]------------------------------------------------------------------------------|
+ * 0 0                                calc(100% - 20px)
+ *
  */
-
 var SplitComponent = (function () {
-    function SplitComponent(cdRef, elementRef, renderer) {
+    function SplitComponent(elRef, cdRef, renderer) {
+        this.elRef = elRef;
         this.cdRef = cdRef;
-        this.elementRef = elementRef;
         this.renderer = renderer;
-        this.direction = 'horizontal';
-        this.gutterSize = 10;
-        this.disabled = false;
-        this.visibleTransition = false;
+        this._direction = 'horizontal';
+        this._visibleTransition = false;
+        this._width = null;
+        this._height = null;
+        this._gutterSize = 10;
+        this._disabled = false;
         this.dragStart = new core.EventEmitter(false);
@@ -29,12 +53,15 @@ this.dragProgress = new core.EventEmitter(false);
         this.visibleTransitionEndInternal = new Subject.Subject();
-        this.visibleTransitionEnd = this.visibleTransitionEndInternal.asObservable().debounceTime(20);
+        this.visibleTransitionEnd = (/** @type {?} */ (this.visibleTransitionEndInternal.asObservable())).debounceTime(20);
+        this._isDragging = false;
         this.areas = [];
-        this.minPercent = 5;
-        this.isDragging = false;
-        this.containerSize = 0;
-        this.areaASize = 0;
-        this.areaBSize = 0;
-        this.eventsDragFct = [];
+        this.dragListeners = [];
+        this.dragStartValues = {
+            sizePixelContainer: 0,
+            sizePixelA: 0,
+            sizePixelB: 0,
+            sizePercentA: 0,
+            sizePercentB: 0,
+        };
     }
-    Object.defineProperty(SplitComponent.prototype, "styleFlexDirection", {
+    Object.defineProperty(SplitComponent.prototype, "direction", {
         get: /**
@@ -44,8 +71,20 @@ * @return {?}
         function () {
-            return this.direction === 'vertical';
+            return this._direction;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            var _this = this;
+            this._direction = (v === 'horizontal') ? v : 'vertical';
+            this.areas.forEach(function (area) {
+                area.comp.setStyleVisibleAndDir(area.comp.visible, _this._direction);
+            });
+            this.refresh();
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "styleFlexDirectionStyle", {
+    Object.defineProperty(SplitComponent.prototype, "visibleTransition", {
         get: /**
@@ -55,8 +94,19 @@ * @return {?}
         function () {
-            return this.direction === 'horizontal' ? 'row' : 'column';
+            return this._visibleTransition;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            var _this = this;
+            this._visibleTransition = Boolean(v);
+            this.areas.forEach(function (area) {
+                area.comp.setStyleTransition(_this._visibleTransition);
+            });
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "dragging", {
+    Object.defineProperty(SplitComponent.prototype, "width", {
         get: /**
@@ -66,9 +116,16 @@ * @return {?}
         function () {
-            // prevent animation of areas when visibleTransition is false, or resizing
-            return !this.visibleTransition || this.isDragging;
+            return this._width;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            this._width = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+            this.refresh();
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "styleWidth", {
+    Object.defineProperty(SplitComponent.prototype, "height", {
         get: /**
@@ -78,8 +135,16 @@ * @return {?}
         function () {
-            return (this.width && !isNaN(this.width) && this.width > 0) ? this.width + 'px' : '100%';
+            return this._height;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            this._height = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+            this.refresh();
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "styleHeight", {
+    Object.defineProperty(SplitComponent.prototype, "gutterSize", {
         get: /**
@@ -89,8 +154,16 @@ * @return {?}
         function () {
-            return (this.height && !isNaN(this.height) && this.height > 0) ? this.height + 'px' : '100%';
+            return this._gutterSize;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            this._gutterSize = !isNaN(v) && v > 0 ? v : 10;
+            this.refresh();
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "visibleAreas", {
+    Object.defineProperty(SplitComponent.prototype, "disabled", {
         get: /**
@@ -100,8 +173,15 @@ * @return {?}
         function () {
-            return this.areas.filter(function (a) { return a.component.visible; });
+            return this._disabled;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            this._disabled = Boolean(v);
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "nbGutters", {
+    Object.defineProperty(SplitComponent.prototype, "cssFlexdirection", {
         get: /**
@@ -111,3 +191,3 @@ * @return {?}
         function () {
-            return this.visibleAreas.length - 1;
+            return (this.direction === 'horizontal') ? 'row' : 'column';
         },
@@ -117,2 +197,64 @@ enumerable: true,
     });
+    Object.defineProperty(SplitComponent.prototype, "cssWidth", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.width ? this.width + "px" : '100%';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitComponent.prototype, "cssHeight", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.height ? this.height + "px" : '100%';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitComponent.prototype, "cssMinwidth", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return (this.direction === 'horizontal') ? this.getNbGutters() * this.gutterSize + "px" : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitComponent.prototype, "cssMinheight", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return (this.direction === 'vertical') ? this.getNbGutters() * this.gutterSize + "px" : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitComponent.prototype, "isDragging", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._isDragging;
+        },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            var _this = this;
+            this._isDragging = v;
+            // Disable transition during dragging to avoid 'lag effect' (whatever it is active or not).
+            this.areas.forEach(function (area) {
+                area.comp.setStyleTransition(v ? false : _this.visibleTransition);
+            });
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
@@ -127,3 +269,3 @@ * @param {?} changes
     function (changes) {
-        if (changes['gutterSize'] || changes['disabled']) {
+        if (changes["gutterSize"] || changes["disabled"]) {
             this.refresh();
@@ -133,46 +275,44 @@ }
     /**
-     * @param {?} component
-     * @param {?} orderUser
-     * @param {?} sizeUser
-     * @param {?} minPixel
      * @return {?}
      */
+    SplitComponent.prototype.getVisibleAreas = /**
+     * @return {?}
+     */
+    function () {
+        return this.areas.filter(function (a) { return a.comp.visible === true; });
+    };
+    /**
+     * @return {?}
+     */
+    SplitComponent.prototype.getNbGutters = /**
+     * @return {?}
+     */
+    function () {
+        return this.getVisibleAreas().length - 1;
+    };
+    /**
+     * @param {?} comp
+     * @return {?}
+     */
     SplitComponent.prototype.addArea = /**
-     * @param {?} component
-     * @param {?} orderUser
-     * @param {?} sizeUser
-     * @param {?} minPixel
+     * @param {?} comp
      * @return {?}
      */
-    function (component, orderUser, sizeUser, minPixel) {
-        this.areas.push({
-            component: component,
-            orderUser: orderUser,
-            order: -1,
-            sizeUser: sizeUser,
-            size: -1,
-            minPixel: minPixel
-        });
+    function (comp) {
+        this.areas.push({ comp: comp, order: -1, size: -1, pxToSubtract: 0 });
+        comp.setStyleVisibleAndDir(comp.visible, this.direction);
+        comp.setStyleTransition(this.visibleTransition);
         this.refresh();
     };
     /**
-     * @param {?} component
-     * @param {?} orderUser
-     * @param {?} sizeUser
-     * @param {?} minPixel
+     * @param {?} comp
      * @return {?}
      */
     SplitComponent.prototype.updateArea = /**
-     * @param {?} component
-     * @param {?} orderUser
-     * @param {?} sizeUser
-     * @param {?} minPixel
+     * @param {?} comp
      * @return {?}
      */
-    function (component, orderUser, sizeUser, minPixel) {
-        var /** @type {?} */ item = this.areas.find(function (a) { return a.component === component; });
+    function (comp) {
+        var /** @type {?} */ item = this.areas.find(function (a) { return a.comp === comp; });
         if (item) {
-            item.orderUser = orderUser;
-            item.sizeUser = sizeUser;
-            item.minPixel = minPixel;
             this.refresh();
@@ -182,15 +322,13 @@ }
     /**
-     * @param {?} area
+     * @param {?} comp
      * @return {?}
      */
     SplitComponent.prototype.removeArea = /**
-     * @param {?} area
+     * @param {?} comp
      * @return {?}
      */
-    function (area) {
-        var /** @type {?} */ item = this.areas.find(function (a) { return a.component === area; });
+    function (comp) {
+        var /** @type {?} */ item = this.areas.find(function (a) { return a.comp === comp; });
         if (item) {
-            var /** @type {?} */ index = this.areas.indexOf(item);
-            this.areas.splice(index, 1);
-            this.areas.forEach(function (a, i) { return a.order = i * 2; });
+            this.areas.splice(this.areas.indexOf(item), 1);
             this.refresh();
@@ -200,11 +338,11 @@ }
     /**
-     * @param {?} area
+     * @param {?} comp
      * @return {?}
      */
     SplitComponent.prototype.hideArea = /**
-     * @param {?} area
+     * @param {?} comp
      * @return {?}
      */
-    function (area) {
-        var /** @type {?} */ item = this.areas.find(function (a) { return a.component === area; });
+    function (comp) {
+        var /** @type {?} */ item = this.areas.find(function (a) { return a.comp === comp; });
         if (item) {
@@ -223,3 +361,3 @@ this.refresh();
     function (area) {
-        var /** @type {?} */ item = this.areas.find(function (a) { return a.component === area; });
+        var /** @type {?} */ item = this.areas.find(function (a) { return a.comp === area; });
         if (item) {
@@ -238,3 +376,4 @@ this.refresh();
     function (area) {
-        return this.visibleAreas.length > 0 ? area === this.visibleAreas[this.visibleAreas.length - 1] : false;
+        var /** @type {?} */ visibleAreas = this.getVisibleAreas();
+        return visibleAreas.length > 0 ? area === visibleAreas[visibleAreas.length - 1] : false;
     };
@@ -250,21 +389,48 @@ /**
         this.stopDragging();
-        // ORDERS: Set css 'order' property depending on user input or added order
-        var /** @type {?} */ nbCorrectOrder = this.areas.filter(function (a) { return a.orderUser !== null && !isNaN(a.orderUser); }).length;
-        if (nbCorrectOrder === this.areas.length) {
-            this.areas.sort(function (a, b) { return Number(a.orderUser) - Number(b.orderUser); });
+        // ¤ AREAS ORDER
+        // Based on user input if all provided or added order by default.
+        if (this.areas.some(function (a) { return a.comp.order === null; }) === false) {
+            this.areas.sort(function (a, b) { return Number(a.comp.order) - Number(b.comp.order); });
         }
         this.areas.forEach(function (a, i) {
             a.order = i * 2;
-            a.component.setStyle('order', a.order);
+            a.comp.setStyleOrder(a.order);
         });
-        // SIZES: Set css 'flex-basis' property depending on user input or equal sizes
-        var /** @type {?} */ totalSize = /** @type {?} */ (this.visibleAreas.map(function (a) { return a.sizeUser; }).reduce(function (acc, s) { return acc + s; }, 0));
-        var /** @type {?} */ nbCorrectSize = this.visibleAreas.filter(function (a) { return a.sizeUser !== null && !isNaN(a.sizeUser) && a.sizeUser >= _this.minPercent; }).length;
-        if (totalSize < 99.99 || totalSize > 100.01 || nbCorrectSize !== this.visibleAreas.length) {
-            var /** @type {?} */ size_1 = Number((100 / this.visibleAreas.length).toFixed(3));
-            this.visibleAreas.forEach(function (a) { return a.size = size_1; });
+        var /** @type {?} */ visibleAreas = this.getVisibleAreas();
+        // ¤ AREAS SIZE PERCENT
+        // Set css 'flex-basis' property depending on user input if all set & ~100% or equal sizes by default.
+        var /** @type {?} */ totalUserSize = /** @type {?} */ (visibleAreas.reduce(function (total, s) { return s.comp.size ? total + s.comp.size : total; }, 0));
+        if (this.areas.some(function (a) { return a.comp.size === null; }) || totalUserSize < .999 || totalUserSize > 1.001) {
+            var /** @type {?} */ size_1 = Number((1 / visibleAreas.length).toFixed(4));
+            visibleAreas.forEach(function (a) {
+                a.size = size_1;
+            });
         }
         else {
-            this.visibleAreas.forEach(function (a) { return a.size = Number(a.sizeUser); });
+            // If some provided % are less than gutterSize > set them to zero and dispatch % to others.
+            var /** @type {?} */ percentToShare_1 = 0;
+            var /** @type {?} */ prop = (this.direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight';
+            var /** @type {?} */ containerSizePixel_1 = this.elRef.nativeElement[prop];
+            visibleAreas.forEach(function (a) {
+                var /** @type {?} */ newSize = Number(a.comp.size);
+                if (newSize * containerSizePixel_1 < _this.gutterSize) {
+                    percentToShare_1 += newSize;
+                    newSize = 0;
+                }
+                a.size = newSize;
+            });
+            if (percentToShare_1 > 0) {
+                var /** @type {?} */ nbAreasNotZero = visibleAreas.filter(function (a) { return a.size !== 0; }).length;
+                var /** @type {?} */ percentToAdd_1 = percentToShare_1 / nbAreasNotZero;
+                visibleAreas.filter(function (a) { return a.size !== 0; }).forEach(function (a) {
+                    a.size += percentToAdd_1;
+                });
+            }
         }
+        // ¤ AREAS PX TO SUBTRACT
+        var /** @type {?} */ totalPxToSubtract = this.getNbGutters() * this.gutterSize;
+        var /** @type {?} */ areasSizeNotZero = visibleAreas.filter(function (a) { return a.size !== 0; });
+        areasSizeNotZero.forEach(function (a) {
+            a.pxToSubtract = totalPxToSubtract / areasSizeNotZero.length;
+        });
         this.refreshStyleSizes();
@@ -280,4 +446,5 @@ this.cdRef.markForCheck();
     function () {
-        var /** @type {?} */ f = this.gutterSize * this.nbGutters / this.visibleAreas.length;
-        this.visibleAreas.forEach(function (a) { return a.component.setStyle('flex-basis', "calc( " + a.size + "% - " + f + "px )"); });
+        this.getVisibleAreas().forEach(function (a) {
+            a.comp.setStyleFlexbasis("calc( " + a.size * 100 + "% - " + a.pxToSubtract + "px )");
+        });
     };
@@ -306,5 +473,7 @@ /**
         var /** @type {?} */ prop = (this.direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight';
-        this.containerSize = this.elementRef.nativeElement[prop];
-        this.areaASize = this.containerSize * areaA.size / 100;
-        this.areaBSize = this.containerSize * areaB.size / 100;
+        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 /** @type {?} */ start;
@@ -314,3 +483,3 @@ if (startEvent instanceof MouseEvent) {
                 x: startEvent.screenX,
-                y: startEvent.screenY
+                y: startEvent.screenY,
             };
@@ -321,3 +490,3 @@ }
                 x: startEvent.touches[0].screenX,
-                y: startEvent.touches[0].screenY
+                y: startEvent.touches[0].screenY,
             };
@@ -328,9 +497,9 @@ }
         }
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'mousemove', function (e) { return _this.dragEvent(e, start, areaA, areaB); }));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'touchmove', function (e) { return _this.dragEvent(e, start, areaA, areaB); }));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'mouseup', function (e) { return _this.stopDragging(); }));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'touchend', function (e) { return _this.stopDragging(); }));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'touchcancel', function (e) { return _this.stopDragging(); }));
-        areaA.component.lockEvents();
-        areaB.component.lockEvents();
+        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 = true;
@@ -361,3 +530,3 @@ this.notify('start');
                 x: event.screenX,
-                y: event.screenY
+                y: event.screenY,
             };
@@ -368,3 +537,3 @@ }
                 x: event.touches[0].screenX,
-                y: event.touches[0].screenY
+                y: event.touches[0].screenY,
             };
@@ -392,24 +561,64 @@ }
     function (start, end, areaA, areaB) {
+        // ¤ AREAS SIZE PIXEL
         var /** @type {?} */ offsetPixel = (this.direction === 'horizontal') ? (start.x - end.x) : (start.y - end.y);
-        var /** @type {?} */ newSizePixelA = this.areaASize - offsetPixel;
-        var /** @type {?} */ newSizePixelB = this.areaBSize + offsetPixel;
-        if (newSizePixelA <= areaA.minPixel && newSizePixelB < areaB.minPixel) {
+        var /** @type {?} */ newSizePixelA = this.dragStartValues.sizePixelA - offsetPixel;
+        var /** @type {?} */ newSizePixelB = this.dragStartValues.sizePixelB + offsetPixel;
+        if (newSizePixelA < this.gutterSize && newSizePixelB < this.gutterSize) {
+            // WTF.. get out of here!
             return;
         }
-        var /** @type {?} */ newSizePercentA = newSizePixelA / this.containerSize * 100;
-        var /** @type {?} */ newSizePercentB = newSizePixelB / this.containerSize * 100;
-        if (newSizePercentA <= this.minPercent) {
-            newSizePercentA = this.minPercent;
-            newSizePercentB = areaA.size + areaB.size - this.minPercent;
+        else if (newSizePixelA < this.gutterSize) {
+            newSizePixelB += newSizePixelA;
+            newSizePixelA = 0;
         }
-        else if (newSizePercentB <= this.minPercent) {
-            newSizePercentB = this.minPercent;
-            newSizePercentA = areaA.size + areaB.size - this.minPercent;
+        else if (newSizePixelB < this.gutterSize) {
+            newSizePixelA += newSizePixelB;
+            newSizePixelB = 0;
         }
+        // ¤ AREAS SIZE PERCENT
+        var /** @type {?} */ debSizeA = areaA.size;
+        var /** @type {?} */ debSizeB = areaB.size;
+        if (newSizePixelA === 0) {
+            areaB.size += areaA.size;
+            areaA.size = 0;
+        }
+        else if (newSizePixelB === 0) {
+            areaA.size += areaB.size;
+            areaB.size = 0;
+        }
         else {
-            newSizePercentA = Number(newSizePercentA.toFixed(3));
-            newSizePercentB = Number((areaA.size + areaB.size - newSizePercentA).toFixed(3));
+            // size = ( ( (total * percentStart - F) / pixelStart * pixelNew ) + F ) / total;
+            if (this.dragStartValues.sizePercentA === 0) {
+                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;
+            }
+            else if (this.dragStartValues.sizePercentB === 0) {
+                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;
+            }
+            else {
+                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;
+                //areaB.size = ( ( (this.dragStartValues.sizePixelContainer * this.dragStartValues.sizePercentB - areaB.pxToSubtract) / this.dragStartValues.sizePixelB * newSizePixelB ) + areaB.pxToSubtract ) / this.dragStartValues.sizePixelContainer;
+            }
         }
-        areaA.size = newSizePercentA;
-        areaB.size = newSizePercentB;
+        var /** @type {?} */ debPxToSubtractA = areaA.pxToSubtract;
+        var /** @type {?} */ debPxToSubtractB = areaB.pxToSubtract;
+        if (areaA.size === 0) {
+            areaB.pxToSubtract += areaA.pxToSubtract;
+            areaA.pxToSubtract = 0;
+        }
+        else if (areaB.size === 0) {
+            areaA.pxToSubtract += areaB.pxToSubtract;
+            areaB.pxToSubtract = 0;
+        }
+        var /** @type {?} */ rd = function (val) { return Math.round(val * 100) / 100; };
+        console.table([{
+                //'start drag PX': rd(this.dragStartValues.sizePixelA) + ' / ' + rd(this.dragStartValues.sizePixelB),
+                //'offset': offsetPixel,
+                //'new temp PX': rd(debSizePxA) + ' / ' + rd(debSizePxB),
+                'new final PX': rd(newSizePixelA) + ' / ' + rd(newSizePixelB),
+                'curr %-px': rd(debSizeA) * 100 + "% - " + rd(debPxToSubtractA) + " / " + rd(debSizeB) * 100 + "% - " + rd(debPxToSubtractB),
+                'new %-px': rd(areaA.size) * 100 + "% - " + rd(areaA.pxToSubtract) + " / " + rd(areaB.size) * 100 + "% - " + rd(areaB.pxToSubtract),
+            }]);
         this.refreshStyleSizes();
@@ -428,5 +637,8 @@ this.notify('progress');
         }
-        this.areas.forEach(function (a) { return a.component.unlockEvents(); });
-        while (this.eventsDragFct.length > 0) {
-            var /** @type {?} */ fct = this.eventsDragFct.pop();
+        this.areas.forEach(function (a) {
+            a.comp.unlockEvents();
+        });
+        console.log('>', this.getVisibleAreas().map(function (a) { return a.size; }).join('/'), '  ', this.getVisibleAreas().map(function (a) { return a.size; }).reduce(function (tot, s) { return tot + s; }, 0));
+        while (this.dragListeners.length > 0) {
+            var /** @type {?} */ fct = this.dragListeners.pop();
             if (fct) {
@@ -436,5 +648,2 @@ fct();
         }
-        this.containerSize = 0;
-        this.areaASize = 0;
-        this.areaBSize = 0;
         this.isDragging = false;
@@ -452,12 +661,12 @@ this.notify('end');
     function (type) {
-        var /** @type {?} */ data = this.visibleAreas.map(function (a) { return a.size; });
+        var /** @type {?} */ areasSize = this.getVisibleAreas().map(function (a) { return a.size; });
         switch (type) {
             case 'start':
-                return this.dragStart.emit(data);
+                return this.dragStart.emit(areasSize);
             case 'progress':
-                return this.dragProgress.emit(data);
+                return this.dragProgress.emit(areasSize);
             case 'end':
-                return this.dragEnd.emit(data);
+                return this.dragEnd.emit(areasSize);
             case 'visibleTransitionEnd':
-                return this.visibleTransitionEndInternal.next(data);
+                return this.visibleTransitionEndInternal.next(areasSize);
         }
@@ -478,4 +687,4 @@ };
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: ["\n        :host {\n            display: flex;\n            flex-wrap: nowrap;\n            justify-content: flex-start;\n            align-items: stretch;\n            flex-direction: row;\n        }\n\n        :host.vertical {\n            flex-direction: column;\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\n        :host /deep/ split-area {\n            transition: flex-basis 0.3s;\n        }  \n\n        :host.notransition /deep/ split-area {\n            transition: none !important;\n        }      \n\n        :host /deep/ split-area.hided {\n            flex-basis: 0 !important;\n            overflow: hidden !important;\n        }      \n\n        :host.vertical /deep/ split-area.hided {\n            max-width: 0;\n        }\n    "],
-                    template: "\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]=\"areas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false && area.component.visible === true && !isLastVisibleArea(area)\" \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>",
+                    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]=\"areas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false && area.comp.visible === true && !isLastVisibleArea(area)\" \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>",
                 },] },
@@ -485,8 +694,9 @@ ];
     SplitComponent.ctorParameters = function () { return [
+        { type: core.ElementRef, },
         { type: core.ChangeDetectorRef, },
-        { type: core.ElementRef, },
-        { type: core.Renderer, },
+        { type: core.Renderer2, },
     ]; };
     SplitComponent.propDecorators = {
         "direction": [{ type: core.Input },],
+        "visibleTransition": [{ type: core.Input },],
         "width": [{ type: core.Input },],
@@ -496,3 +706,2 @@ "height": [{ type: core.Input },],
         "disabled": [{ type: core.Input },],
-        "visibleTransition": [{ type: core.Input },],
         "dragStart": [{ type: core.Output },],
@@ -502,7 +711,7 @@ "dragProgress": [{ type: core.Output },],
         "visibleTransitionEnd": [{ type: core.Output },],
-        "styleFlexDirection": [{ type: core.HostBinding, args: ['class.vertical',] },],
-        "styleFlexDirectionStyle": [{ type: core.HostBinding, args: ['style.flex-direction',] },],
-        "dragging": [{ type: core.HostBinding, args: ['class.notransition',] },],
-        "styleWidth": [{ type: core.HostBinding, args: ['style.width',] },],
-        "styleHeight": [{ type: core.HostBinding, args: ['style.height',] },],
+        "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',] },],
     };
@@ -517,4 +726,4 @@ return SplitComponent;
 var SplitAreaDirective = (function () {
-    function SplitAreaDirective(elementRef, renderer, split) {
-        this.elementRef = elementRef;
+    function SplitAreaDirective(elRef, renderer, split) {
+        this.elRef = elRef;
         this.renderer = renderer;
@@ -524,8 +733,13 @@ this.split = split;
         this._size = null;
-        this._minSizePixel = 0;
+        this._minSize = 0;
         this._visible = true;
-        this.visibility = "block";
-        this.eventsLockFct = [];
+        this.lockListeners = [];
     }
     Object.defineProperty(SplitAreaDirective.prototype, "order", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._order;
+        },
         set: /**
@@ -536,4 +750,4 @@ * @param {?} v
         function (v) {
-            this._order = !isNaN(v) ? v : null;
-            this.split.updateArea(this, this._order, this._size, this._minSizePixel);
+            this._order = !isNaN(/** @type {?} */ (v)) ? v : null;
+            this.split.updateArea(this);
         },
@@ -544,2 +758,8 @@ enumerable: true,
     Object.defineProperty(SplitAreaDirective.prototype, "size", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._size;
+        },
         set: /**
@@ -550,4 +770,4 @@ * @param {?} v
         function (v) {
-            this._size = !isNaN(v) ? v : null;
-            this.split.updateArea(this, this._order, this._size, this._minSizePixel);
+            this._size = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) >= 0 && /** @type {?} */ (v) <= 100) ? (/** @type {?} */ (v) / 100) : null;
+            this.split.updateArea(this);
         },
@@ -557,3 +777,9 @@ enumerable: true,
     });
-    Object.defineProperty(SplitAreaDirective.prototype, "minSizePixel", {
+    Object.defineProperty(SplitAreaDirective.prototype, "minSize", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._minSize;
+        },
         set: /**
@@ -564,4 +790,4 @@ * @param {?} v
         function (v) {
-            this._minSizePixel = (!isNaN(v) && v > 0) ? v : 0;
-            this.split.updateArea(this, this._order, this._size, this._minSizePixel);
+            this._minSize = (!isNaN(v) && v > 0 && v < 100) ? v / 100 : 0;
+            this.split.updateArea(this);
         },
@@ -583,4 +809,4 @@ enumerable: true,
         function (v) {
-            this.visibility = v ? "block" : "none";
             this._visible = v;
+            this.setStyleVisibleAndDir(v, this.split.direction);
             if (this.visible) {
@@ -603,75 +829,142 @@ this.split.showArea(this);
     function () {
-        this.split.addArea(this, this._order, this._size, this._minSizePixel);
+        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); });
     };
     /**
+     * @param {?} prop
      * @return {?}
      */
-    SplitAreaDirective.prototype.lockEvents = /**
+    SplitAreaDirective.prototype.getSizePixel = /**
+     * @param {?} prop
      * @return {?}
      */
-    function () {
-        this.eventsLockFct.push(this.renderer.listen(this.elementRef.nativeElement, 'selectstart', function (e) { return false; }));
-        this.eventsLockFct.push(this.renderer.listen(this.elementRef.nativeElement, 'dragstart', function (e) { return false; }));
+    function (prop) {
+        return this.elRef.nativeElement[prop];
     };
     /**
+     * @param {?} isVisible
+     * @param {?} direction
      * @return {?}
      */
-    SplitAreaDirective.prototype.unlockEvents = /**
+    SplitAreaDirective.prototype.setStyleVisibleAndDir = /**
+     * @param {?} isVisible
+     * @param {?} direction
      * @return {?}
      */
-    function () {
-        while (this.eventsLockFct.length > 0) {
-            var /** @type {?} */ fct = this.eventsLockFct.pop();
-            if (fct) {
-                fct();
+    function (isVisible, direction) {
+        if (isVisible === false) {
+            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');
+            if (direction === 'vertical') {
+                this.renderer.setStyle(this.elRef.nativeElement, 'max-width', '0');
             }
         }
+        else {
+            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');
+        }
+        if (direction === 'horizontal') {
+            this.renderer.setStyle(this.elRef.nativeElement, 'height', '100%');
+        }
+        else {
+            this.renderer.removeStyle(this.elRef.nativeElement, 'height');
+        }
     };
     /**
-     * @param {?} key
+     * @param {?} withTransition
+     * @return {?}
+     */
+    SplitAreaDirective.prototype.setStyleTransition = /**
+     * @param {?} withTransition
+     * @return {?}
+     */
+    function (withTransition) {
+        if (withTransition === true) {
+            this.renderer.setStyle(this.elRef.nativeElement, 'transition', "flex-basis 0.3s");
+        }
+        else {
+            this.renderer.setStyle(this.elRef.nativeElement, 'transition', null);
+        }
+    };
+    /**
      * @param {?} value
      * @return {?}
      */
-    SplitAreaDirective.prototype.setStyle = /**
-     * @param {?} key
+    SplitAreaDirective.prototype.setStyleOrder = /**
      * @param {?} value
      * @return {?}
      */
-    function (key, value) {
-        this.renderer.setElementStyle(this.elementRef.nativeElement, key, value);
+    function (value) {
+        this.renderer.setStyle(this.elRef.nativeElement, 'order', value);
     };
     /**
+     * @param {?} value
      * @return {?}
      */
-    SplitAreaDirective.prototype.ngOnDestroy = /**
+    SplitAreaDirective.prototype.setStyleFlexbasis = /**
+     * @param {?} value
      * @return {?}
      */
-    function () {
-        this.split.removeArea(this);
+    function (value) {
+        this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', value);
     };
     /**
-     * @param {?} evt
+     * @param {?} event
      * @return {?}
      */
     SplitAreaDirective.prototype.onTransitionEnd = /**
-     * @param {?} evt
+     * @param {?} event
      * @return {?}
      */
-    function (evt) {
+    function (event) {
         // Limit only flex-basis transition to trigger the event
-        if (evt.propertyName === 'flex-basis')
+        if (event.propertyName === 'flex-basis') {
             this.split.notify('visibleTransitionEnd');
+        }
     };
+    /**
+     * @return {?}
+     */
+    SplitAreaDirective.prototype.lockEvents = /**
+     * @return {?}
+     */
+    function () {
+        this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement, 'selectstart', function (e) { return false; }));
+        this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement, 'dragstart', function (e) { return false; }));
+    };
+    /**
+     * @return {?}
+     */
+    SplitAreaDirective.prototype.unlockEvents = /**
+     * @return {?}
+     */
+    function () {
+        while (this.lockListeners.length > 0) {
+            var /** @type {?} */ fct = this.lockListeners.pop();
+            if (fct) {
+                fct();
+            }
+        }
+    };
+    /**
+     * @return {?}
+     */
+    SplitAreaDirective.prototype.ngOnDestroy = /**
+     * @return {?}
+     */
+    function () {
+        this.unlockEvents();
+        if (this.transitionListener) {
+            this.transitionListener();
+        }
+        this.split.removeArea(this);
+    };
     SplitAreaDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: 'split-area',
-                    host: {
-                        '[style.flex-grow]': '"0"',
-                        '[style.flex-shrink]': '"0"',
-                        '[style.overflow-x]': '"hidden"',
-                        '[style.overflow-y]': '"auto"',
-                        '[style.height]': '"100%"',
-                        '[class.hided]': '!visible',
-                        '(transitionend)': 'onTransitionEnd($event)'
-                    }
+                    selector: 'split-area'
                 },] },
@@ -682,3 +975,3 @@ ];
         { type: core.ElementRef, },
-        { type: core.Renderer, },
+        { type: core.Renderer2, },
         { type: SplitComponent, },
@@ -689,3 +982,3 @@ ]; };
         "size": [{ type: core.Input },],
-        "minSizePixel": [{ type: core.Input },],
+        "minSize": [{ type: core.Input },],
         "visible": [{ type: core.Input },],
@@ -701,2 +994,3 @@ };
 var SplitGutterDirective = (function () {
+    ////
     function SplitGutterDirective(elementRef, renderer) {
@@ -713,3 +1007,3 @@ this.elementRef = elementRef;
         function (v) {
-            this.setStyle('order', v);
+            this.renderer.setStyle(this.elementRef.nativeElement, 'order', v);
         },
@@ -720,2 +1014,8 @@ enumerable: true,
     Object.defineProperty(SplitGutterDirective.prototype, "direction", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._direction;
+        },
         set: /**
@@ -733,2 +1033,8 @@ * @param {?} v
     Object.defineProperty(SplitGutterDirective.prototype, "size", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._size;
+        },
         set: /**
@@ -746,2 +1052,8 @@ * @param {?} v
     Object.defineProperty(SplitGutterDirective.prototype, "disabled", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._disabled;
+        },
         set: /**
@@ -765,58 +1077,9 @@ * @param {?} v
     function () {
-        this.setStyle('flex-basis', this._size + "px");
+        this.renderer.setStyle(this.elementRef.nativeElement, 'flex-basis', this.size + "px");
         // fix safari bug about gutter height when direction is horizontal
-        this.setStyle('height', (this._direction === 'vertical') ? this._size + "px" : "100%");
-        var /** @type {?} */ state = (this._disabled === true) ? 'disabled' : this._direction;
-        this.setStyle('cursor', this.getCursor(state));
-        this.setStyle('background-image', "url(\"" + this.getImage(state) + "\")");
+        this.renderer.setStyle(this.elementRef.nativeElement, 'height', (this.direction === 'vertical') ? this.size + "px" : "100%");
+        var /** @type {?} */ state = (this.disabled === true) ? 'disabled' : this.direction;
+        this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', getCursor(state));
+        this.renderer.setStyle(this.elementRef.nativeElement, 'background-image', "url(\"" + getImage(state) + "\")");
     };
-    /**
-     * @param {?} key
-     * @param {?} value
-     * @return {?}
-     */
-    SplitGutterDirective.prototype.setStyle = /**
-     * @param {?} key
-     * @param {?} value
-     * @return {?}
-     */
-    function (key, value) {
-        this.renderer.setElementStyle(this.elementRef.nativeElement, key, value);
-    };
-    /**
-     * @param {?} state
-     * @return {?}
-     */
-    SplitGutterDirective.prototype.getCursor = /**
-     * @param {?} state
-     * @return {?}
-     */
-    function (state) {
-        switch (state) {
-            case 'disabled':
-                return 'default';
-            case 'vertical':
-                return 'row-resize';
-            case 'horizontal':
-                return 'col-resize';
-        }
-    };
-    /**
-     * @param {?} state
-     * @return {?}
-     */
-    SplitGutterDirective.prototype.getImage = /**
-     * @param {?} state
-     * @return {?}
-     */
-    function (state) {
-        switch (state) {
-            case 'disabled':
-                return '';
-            case 'vertical':
-                return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC';
-            case 'horizontal':
-                return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==';
-        }
-    };
     SplitGutterDirective.decorators = [
@@ -830,3 +1093,3 @@ { type: core.Directive, args: [{
         { type: core.ElementRef, },
-        { type: core.Renderer, },
+        { type: core.Renderer2, },
     ]; };
@@ -841,2 +1104,32 @@ SplitGutterDirective.propDecorators = {
 }());
+/**
+ * @param {?} state
+ * @return {?}
+ */
+function getCursor(state) {
+    switch (state) {
+        case 'disabled':
+            return 'default';
+        case 'vertical':
+            return 'row-resize';
+        case 'horizontal':
+            return 'col-resize';
+    }
+    return '';
+}
+/**
+ * @param {?} state
+ * @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 '';
+}
 
@@ -843,0 +1136,0 @@ /**

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";var SplitComponent=function(){function SplitComponent(cdRef,elementRef,renderer){this.cdRef=cdRef,this.elementRef=elementRef,this.renderer=renderer,this.direction="horizontal",this.gutterSize=10,this.disabled=!1,this.visibleTransition=!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.areas=[],this.minPercent=5,this.isDragging=!1,this.containerSize=0,this.areaASize=0,this.areaBSize=0,this.eventsDragFct=[]}return Object.defineProperty(SplitComponent.prototype,"styleFlexDirection",{get:function(){return"vertical"===this.direction},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"styleFlexDirectionStyle",{get:function(){return"horizontal"===this.direction?"row":"column"},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"dragging",{get:function(){return!this.visibleTransition||this.isDragging},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"styleWidth",{get:function(){return this.width&&!isNaN(this.width)&&this.width>0?this.width+"px":"100%"},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"styleHeight",{get:function(){return this.height&&!isNaN(this.height)&&this.height>0?this.height+"px":"100%"},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"visibleAreas",{get:function(){return this.areas.filter(function(a){return a.component.visible})},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"nbGutters",{get:function(){return this.visibleAreas.length-1},enumerable:!0,configurable:!0}),SplitComponent.prototype.ngOnChanges=function(changes){(changes.gutterSize||changes.disabled)&&this.refresh()},SplitComponent.prototype.addArea=function(component,orderUser,sizeUser,minPixel){this.areas.push({component:component,orderUser:orderUser,order:-1,sizeUser:sizeUser,size:-1,minPixel:minPixel}),this.refresh()},SplitComponent.prototype.updateArea=function(component,orderUser,sizeUser,minPixel){var item=this.areas.find(function(a){return a.component===component});item&&(item.orderUser=orderUser,item.sizeUser=sizeUser,item.minPixel=minPixel,this.refresh())},SplitComponent.prototype.removeArea=function(area){var item=this.areas.find(function(a){return a.component===area});if(item){var index=this.areas.indexOf(item);this.areas.splice(index,1),this.areas.forEach(function(a,i){return a.order=2*i}),this.refresh()}},SplitComponent.prototype.hideArea=function(area){this.areas.find(function(a){return a.component===area})&&this.refresh()},SplitComponent.prototype.showArea=function(area){this.areas.find(function(a){return a.component===area})&&this.refresh()},SplitComponent.prototype.isLastVisibleArea=function(area){return this.visibleAreas.length>0&&area===this.visibleAreas[this.visibleAreas.length-1]},SplitComponent.prototype.refresh=function(){var _this=this;this.stopDragging(),this.areas.filter(function(a){return null!==a.orderUser&&!isNaN(a.orderUser)}).length===this.areas.length&&this.areas.sort(function(a,b){return Number(a.orderUser)-Number(b.orderUser)}),this.areas.forEach(function(a,i){a.order=2*i,a.component.setStyle("order",a.order)});var totalSize=this.visibleAreas.map(function(a){return a.sizeUser}).reduce(function(acc,s){return acc+s},0),nbCorrectSize=this.visibleAreas.filter(function(a){return null!==a.sizeUser&&!isNaN(a.sizeUser)&&a.sizeUser>=_this.minPercent}).length;if(totalSize<99.99||totalSize>100.01||nbCorrectSize!==this.visibleAreas.length){var size_1=Number((100/this.visibleAreas.length).toFixed(3));this.visibleAreas.forEach(function(a){return a.size=size_1})}else this.visibleAreas.forEach(function(a){return a.size=Number(a.sizeUser)});this.refreshStyleSizes(),this.cdRef.markForCheck()},SplitComponent.prototype.refreshStyleSizes=function(){var f=this.gutterSize*this.nbGutters/this.visibleAreas.length;this.visibleAreas.forEach(function(a){return a.component.setStyle("flex-basis","calc( "+a.size+"% - "+f+"px )")})},SplitComponent.prototype.startDragging=function(startEvent,gutterOrder){var _this=this;if(startEvent.preventDefault(),!this.disabled){var areaA=this.areas.find(function(a){return a.order===gutterOrder-1}),areaB=this.areas.find(function(a){return a.order===gutterOrder+1});if(areaA&&areaB){var prop="horizontal"===this.direction?"offsetWidth":"offsetHeight";this.containerSize=this.elementRef.nativeElement[prop],this.areaASize=this.containerSize*areaA.size/100,this.areaBSize=this.containerSize*areaB.size/100;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.eventsDragFct.push(this.renderer.listenGlobal("document","mousemove",function(e){return _this.dragEvent(e,start,areaA,areaB)})),this.eventsDragFct.push(this.renderer.listenGlobal("document","touchmove",function(e){return _this.dragEvent(e,start,areaA,areaB)})),this.eventsDragFct.push(this.renderer.listenGlobal("document","mouseup",function(e){return _this.stopDragging()})),this.eventsDragFct.push(this.renderer.listenGlobal("document","touchend",function(e){return _this.stopDragging()})),this.eventsDragFct.push(this.renderer.listenGlobal("document","touchcancel",function(e){return _this.stopDragging()})),areaA.component.lockEvents(),areaB.component.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.areaASize-offsetPixel,newSizePixelB=this.areaBSize+offsetPixel;if(!(newSizePixelA<=areaA.minPixel&&newSizePixelB<areaB.minPixel)){var newSizePercentA=newSizePixelA/this.containerSize*100,newSizePercentB=newSizePixelB/this.containerSize*100;newSizePercentA<=this.minPercent?(newSizePercentA=this.minPercent,newSizePercentB=areaA.size+areaB.size-this.minPercent):newSizePercentB<=this.minPercent?(newSizePercentB=this.minPercent,newSizePercentA=areaA.size+areaB.size-this.minPercent):(newSizePercentA=Number(newSizePercentA.toFixed(3)),newSizePercentB=Number((areaA.size+areaB.size-newSizePercentA).toFixed(3))),areaA.size=newSizePercentA,areaB.size=newSizePercentB,this.refreshStyleSizes(),this.notify("progress")}},SplitComponent.prototype.stopDragging=function(){if(this.isDragging){for(this.areas.forEach(function(a){return a.component.unlockEvents()});this.eventsDragFct.length>0;){var fct=this.eventsDragFct.pop();fct&&fct()}this.containerSize=0,this.areaASize=0,this.areaBSize=0,this.isDragging=!1,this.notify("end")}},SplitComponent.prototype.notify=function(type){var data=this.visibleAreas.map(function(a){return a.size});switch(type){case"start":return this.dragStart.emit(data);case"progress":return this.dragProgress.emit(data);case"end":return this.dragEnd.emit(data);case"visibleTransitionEnd":return this.visibleTransitionEndInternal.next(data)}},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            flex-direction: row;\n        }\n\n        :host.vertical {\n            flex-direction: column;\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\n        :host /deep/ split-area {\n            transition: flex-basis 0.3s;\n        }  \n\n        :host.notransition /deep/ split-area {\n            transition: none !important;\n        }      \n\n        :host /deep/ split-area.hided {\n            flex-basis: 0 !important;\n            overflow: hidden !important;\n        }      \n\n        :host.vertical /deep/ split-area.hided {\n            max-width: 0;\n        }\n    "],template:'\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]="areas" let-index="index" let-last="last">\n            <split-gutter *ngIf="last === false && area.component.visible === true && !isLastVisibleArea(area)" \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.ChangeDetectorRef},{type:core.ElementRef},{type:core.Renderer}]},SplitComponent.propDecorators={direction:[{type:core.Input}],width:[{type:core.Input}],height:[{type:core.Input}],gutterSize:[{type:core.Input}],disabled:[{type:core.Input}],visibleTransition:[{type:core.Input}],dragStart:[{type:core.Output}],dragProgress:[{type:core.Output}],dragEnd:[{type:core.Output}],visibleTransitionEnd:[{type:core.Output}],styleFlexDirection:[{type:core.HostBinding,args:["class.vertical"]}],styleFlexDirectionStyle:[{type:core.HostBinding,args:["style.flex-direction"]}],dragging:[{type:core.HostBinding,args:["class.notransition"]}],styleWidth:[{type:core.HostBinding,args:["style.width"]}],styleHeight:[{type:core.HostBinding,args:["style.height"]}]},SplitComponent}(),SplitAreaDirective=function(){function SplitAreaDirective(elementRef,renderer,split){this.elementRef=elementRef,this.renderer=renderer,this.split=split,this._order=null,this._size=null,this._minSizePixel=0,this._visible=!0,this.visibility="block",this.eventsLockFct=[]}return Object.defineProperty(SplitAreaDirective.prototype,"order",{set:function(v){this._order=isNaN(v)?null:v,this.split.updateArea(this,this._order,this._size,this._minSizePixel)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitAreaDirective.prototype,"size",{set:function(v){this._size=isNaN(v)?null:v,this.split.updateArea(this,this._order,this._size,this._minSizePixel)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitAreaDirective.prototype,"minSizePixel",{set:function(v){this._minSizePixel=!isNaN(v)&&v>0?v:0,this.split.updateArea(this,this._order,this._size,this._minSizePixel)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitAreaDirective.prototype,"visible",{get:function(){return this._visible},set:function(v){this.visibility=v?"block":"none",this._visible=v,this.visible?this.split.showArea(this):this.split.hideArea(this)},enumerable:!0,configurable:!0}),SplitAreaDirective.prototype.ngOnInit=function(){this.split.addArea(this,this._order,this._size,this._minSizePixel)},SplitAreaDirective.prototype.lockEvents=function(){this.eventsLockFct.push(this.renderer.listen(this.elementRef.nativeElement,"selectstart",function(e){return!1})),this.eventsLockFct.push(this.renderer.listen(this.elementRef.nativeElement,"dragstart",function(e){return!1}))},SplitAreaDirective.prototype.unlockEvents=function(){for(;this.eventsLockFct.length>0;){var fct=this.eventsLockFct.pop();fct&&fct()}},SplitAreaDirective.prototype.setStyle=function(key,value){this.renderer.setElementStyle(this.elementRef.nativeElement,key,value)},SplitAreaDirective.prototype.ngOnDestroy=function(){this.split.removeArea(this)},SplitAreaDirective.prototype.onTransitionEnd=function(evt){"flex-basis"===evt.propertyName&&this.split.notify("visibleTransitionEnd")},SplitAreaDirective.decorators=[{type:core.Directive,args:[{selector:"split-area",host:{"[style.flex-grow]":'"0"',"[style.flex-shrink]":'"0"',"[style.overflow-x]":'"hidden"',"[style.overflow-y]":'"auto"',"[style.height]":'"100%"',"[class.hided]":"!visible","(transitionend)":"onTransitionEnd($event)"}}]}],SplitAreaDirective.ctorParameters=function(){return[{type:core.ElementRef},{type:core.Renderer},{type:SplitComponent}]},SplitAreaDirective.propDecorators={order:[{type:core.Input}],size:[{type:core.Input}],minSizePixel:[{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.setStyle("order",v)},enumerable:!0,configurable:!0}),Object.defineProperty(SplitGutterDirective.prototype,"direction",{set:function(v){this._direction=v,this.refreshStyle()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitGutterDirective.prototype,"size",{set:function(v){this._size=v,this.refreshStyle()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitGutterDirective.prototype,"disabled",{set:function(v){this._disabled=v,this.refreshStyle()},enumerable:!0,configurable:!0}),SplitGutterDirective.prototype.refreshStyle=function(){this.setStyle("flex-basis",this._size+"px"),this.setStyle("height","vertical"===this._direction?this._size+"px":"100%");var state=!0===this._disabled?"disabled":this._direction;this.setStyle("cursor",this.getCursor(state)),this.setStyle("background-image",'url("'+this.getImage(state)+'")')},SplitGutterDirective.prototype.setStyle=function(key,value){this.renderer.setElementStyle(this.elementRef.nativeElement,key,value)},SplitGutterDirective.prototype.getCursor=function(state){switch(state){case"disabled":return"default";case"vertical":return"row-resize";case"horizontal":return"col-resize"}},SplitGutterDirective.prototype.getImage=function(state){switch(state){case"disabled":return"";case"vertical":return"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC";case"horizontal":return"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=="}},SplitGutterDirective.decorators=[{type:core.Directive,args:[{selector:"split-gutter"}]}],SplitGutterDirective.ctorParameters=function(){return[{type:core.ElementRef},{type:core.Renderer}]},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.ɵa=SplitComponent,exports.ɵb=SplitAreaDirective,exports.ɵc=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.visibleTransitionEndInternal=new Subject.Subject,this.visibleTransitionEnd=this.visibleTransitionEndInternal.asObservable().debounceTime(20),this._isDragging=!1,this.areas=[],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.areas.forEach(function(area){area.comp.setStyleVisibleAndDir(area.comp.visible,_this._direction)}),this.refresh()},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.areas.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.refresh()},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.refresh()},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.refresh()},enumerable:!0,configurable:!0}),Object.defineProperty(SplitComponent.prototype,"disabled",{get:function(){return this._disabled},set:function(v){this._disabled=Boolean(v)},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.areas.forEach(function(area){area.comp.setStyleTransition(!v&&_this.visibleTransition)})},enumerable:!0,configurable:!0}),SplitComponent.prototype.ngOnChanges=function(changes){(changes.gutterSize||changes.disabled)&&this.refresh()},SplitComponent.prototype.getVisibleAreas=function(){return this.areas.filter(function(a){return!0===a.comp.visible})},SplitComponent.prototype.getNbGutters=function(){return this.getVisibleAreas().length-1},SplitComponent.prototype.addArea=function(comp){this.areas.push({comp:comp,order:-1,size:-1,pxToSubtract:0}),comp.setStyleVisibleAndDir(comp.visible,this.direction),comp.setStyleTransition(this.visibleTransition),this.refresh()},SplitComponent.prototype.updateArea=function(comp){this.areas.find(function(a){return a.comp===comp})&&this.refresh()},SplitComponent.prototype.removeArea=function(comp){var item=this.areas.find(function(a){return a.comp===comp});item&&(this.areas.splice(this.areas.indexOf(item),1),this.refresh())},SplitComponent.prototype.hideArea=function(comp){this.areas.find(function(a){return a.comp===comp})&&this.refresh()},SplitComponent.prototype.showArea=function(area){this.areas.find(function(a){return a.comp===area})&&this.refresh()},SplitComponent.prototype.isLastVisibleArea=function(area){var visibleAreas=this.getVisibleAreas();return visibleAreas.length>0&&area===visibleAreas[visibleAreas.length-1]},SplitComponent.prototype.refresh=function(){var _this=this;this.stopDragging(),!1===this.areas.some(function(a){return null===a.comp.order})&&this.areas.sort(function(a,b){return Number(a.comp.order)-Number(b.comp.order)}),this.areas.forEach(function(a,i){a.order=2*i,a.comp.setStyleOrder(a.order)});var visibleAreas=this.getVisibleAreas(),totalUserSize=visibleAreas.reduce(function(total,s){return s.comp.size?total+s.comp.size:total},0);if(this.areas.some(function(a){return null===a.comp.size})||totalUserSize<.999||totalUserSize>1.001){var size_1=Number((1/visibleAreas.length).toFixed(4));visibleAreas.forEach(function(a){a.size=size_1})}else{var percentToShare_1=0,prop="horizontal"===this.direction?"offsetWidth":"offsetHeight",containerSizePixel_1=this.elRef.nativeElement[prop];if(visibleAreas.forEach(function(a){var newSize=Number(a.comp.size);newSize*containerSizePixel_1<_this.gutterSize&&(percentToShare_1+=newSize,newSize=0),a.size=newSize}),percentToShare_1>0){var nbAreasNotZero=visibleAreas.filter(function(a){return 0!==a.size}).length,percentToAdd_1=percentToShare_1/nbAreasNotZero;visibleAreas.filter(function(a){return 0!==a.size}).forEach(function(a){a.size+=percentToAdd_1})}}var totalPxToSubtract=this.getNbGutters()*this.gutterSize,areasSizeNotZero=visibleAreas.filter(function(a){return 0!==a.size});areasSizeNotZero.forEach(function(a){a.pxToSubtract=totalPxToSubtract/areasSizeNotZero.length}),this.refreshStyleSizes(),this.cdRef.markForCheck()},SplitComponent.prototype.refreshStyleSizes=function(){this.getVisibleAreas().forEach(function(a){a.comp.setStyleFlexbasis("calc( "+100*a.size+"% - "+a.pxToSubtract+"px )")})},SplitComponent.prototype.startDragging=function(startEvent,gutterOrder){var _this=this;if(startEvent.preventDefault(),!this.disabled){var areaA=this.areas.find(function(a){return a.order===gutterOrder-1}),areaB=this.areas.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;if(!(newSizePixelA<this.gutterSize&&newSizePixelB<this.gutterSize)){newSizePixelA<this.gutterSize?(newSizePixelB+=newSizePixelA,newSizePixelA=0):newSizePixelB<this.gutterSize&&(newSizePixelA+=newSizePixelB,newSizePixelB=0);var debSizeA=areaA.size,debSizeB=areaB.size;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);var debPxToSubtractA=areaA.pxToSubtract,debPxToSubtractB=areaB.pxToSubtract;0===areaA.size?(areaB.pxToSubtract+=areaA.pxToSubtract,areaA.pxToSubtract=0):0===areaB.size&&(areaA.pxToSubtract+=areaB.pxToSubtract,areaB.pxToSubtract=0);var rd=function(val){return Math.round(100*val)/100};console.table([{"new final PX":rd(newSizePixelA)+" / "+rd(newSizePixelB),"curr %-px":100*rd(debSizeA)+"% - "+rd(debPxToSubtractA)+" / "+100*rd(debSizeB)+"% - "+rd(debPxToSubtractB),"new %-px":100*rd(areaA.size)+"% - "+rd(areaA.pxToSubtract)+" / "+100*rd(areaB.size)+"% - "+rd(areaB.pxToSubtract)}]),this.refreshStyleSizes(),this.notify("progress")}},SplitComponent.prototype.stopDragging=function(){if(this.isDragging){for(this.areas.forEach(function(a){a.comp.unlockEvents()}),console.log(">",this.getVisibleAreas().map(function(a){return a.size}).join("/"),"  ",this.getVisibleAreas().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.getVisibleAreas().map(function(a){return 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]="areas" let-index="index" let-last="last">\n            <split-gutter *ngIf="last === false && area.comp.visible === true && !isLastVisibleArea(area)" \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.ɵa=SplitComponent,exports.ɵb=SplitAreaDirective,exports.ɵc=SplitGutterDirective,Object.defineProperty(exports,"__esModule",{value:!0})});

esm2015/angular-split.js

@@ -1,2 +0,2 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, HostBinding, Input, NgModule, Output, Renderer } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, HostBinding, Input, NgModule, Output, Renderer2 } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -11,19 +11,43 @@ import { Subject as Subject$1 } from 'rxjs/Subject';
 /**
- * @record
+ * angular-split
+ *
+ * Areas size are set in percentage of the split container & gutters size in pixels.
+ * We need to subtract gutters size (in pixels) from area size percentages.
+ * So we set css flex-basis like this: "calc( {area.size}% - {area.pxToSubtract}px );"
+ *
+ * When an area size is 0, pixel need to be recalculate.
+ *
+ * Examples:  gutterSize * nbGutters / nbAreasMoreThanZero = 10*2/3 = 6.667px
+ *
+ *                            10px                        10px
+ * |--------------------------[]--------------------------[]--------------------------|
+ *    calc(33.33% - 6.667px)      calc(33.33% - 6.667px)      calc(33.33% - 6.667px)
+ *
+ *
+ *  10px                                                  10px
+ * |[]----------------------------------------------------[]--------------------------|
+ * 0                  calc(66.66% - 13.333px)                  calc(33%% - 6.667px)
+ *
+ *
+ *  10px 10px
+ * |[][]------------------------------------------------------------------------------|
+ * 0 0                                calc(100% - 20px)
+ *
  */
-
 class SplitComponent {
     /**
+     * @param {?} elRef
      * @param {?} cdRef
-     * @param {?} elementRef
      * @param {?} renderer
      */
-    constructor(cdRef, elementRef, renderer) {
+    constructor(elRef, cdRef, renderer) {
+        this.elRef = elRef;
         this.cdRef = cdRef;
-        this.elementRef = elementRef;
         this.renderer = renderer;
-        this.direction = 'horizontal';
-        this.gutterSize = 10;
-        this.disabled = false;
-        this.visibleTransition = false;
+        this._direction = 'horizontal';
+        this._visibleTransition = false;
+        this._width = null;
+        this._height = null;
+        this._gutterSize = 10;
+        this._disabled = false;
         this.dragStart = new EventEmitter(false);
@@ -33,16 +57,24 @@ this.dragProgress = new EventEmitter(false);
         this.visibleTransitionEndInternal = new Subject$1();
-        this.visibleTransitionEnd = this.visibleTransitionEndInternal.asObservable().debounceTime(20);
+        this.visibleTransitionEnd = (/** @type {?} */ (this.visibleTransitionEndInternal.asObservable())).debounceTime(20);
+        this._isDragging = false;
         this.areas = [];
-        this.minPercent = 5;
-        this.isDragging = false;
-        this.containerSize = 0;
-        this.areaASize = 0;
-        this.areaBSize = 0;
-        this.eventsDragFct = [];
+        this.dragListeners = [];
+        this.dragStartValues = {
+            sizePixelContainer: 0,
+            sizePixelA: 0,
+            sizePixelB: 0,
+            sizePercentA: 0,
+            sizePercentB: 0,
+        };
     }
     /**
+     * @param {?} v
      * @return {?}
      */
-    get styleFlexDirection() {
-        return this.direction === 'vertical';
+    set direction(v) {
+        this._direction = (v === 'horizontal') ? v : 'vertical';
+        this.areas.forEach(area => {
+            area.comp.setStyleVisibleAndDir(area.comp.visible, this._direction);
+        });
+        this.refresh();
     }
@@ -52,11 +84,14 @@ /**
      */
-    get styleFlexDirectionStyle() {
-        return this.direction === 'horizontal' ? 'row' : 'column';
+    get direction() {
+        return this._direction;
     }
     /**
+     * @param {?} v
      * @return {?}
      */
-    get dragging() {
-        // prevent animation of areas when visibleTransition is false, or resizing
-        return !this.visibleTransition || this.isDragging;
+    set visibleTransition(v) {
+        this._visibleTransition = Boolean(v);
+        this.areas.forEach(area => {
+            area.comp.setStyleTransition(this._visibleTransition);
+        });
     }
@@ -66,10 +101,12 @@ /**
      */
-    get styleWidth() {
-        return (this.width && !isNaN(this.width) && this.width > 0) ? this.width + 'px' : '100%';
+    get visibleTransition() {
+        return this._visibleTransition;
     }
     /**
+     * @param {?} v
      * @return {?}
      */
-    get styleHeight() {
-        return (this.height && !isNaN(this.height) && this.height > 0) ? this.height + 'px' : '100%';
+    set width(v) {
+        this._width = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+        this.refresh();
     }
@@ -79,12 +116,94 @@ /**
      */
-    get visibleAreas() {
-        return this.areas.filter(a => a.component.visible);
+    get width() {
+        return this._width;
     }
     /**
+     * @param {?} v
      * @return {?}
      */
-    get nbGutters() {
-        return this.visibleAreas.length - 1;
+    set height(v) {
+        this._height = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+        this.refresh();
     }
     /**
+     * @return {?}
+     */
+    get height() {
+        return this._height;
+    }
+    /**
+     * @param {?} v
+     * @return {?}
+     */
+    set gutterSize(v) {
+        this._gutterSize = !isNaN(v) && v > 0 ? v : 10;
+        this.refresh();
+    }
+    /**
+     * @return {?}
+     */
+    get gutterSize() {
+        return this._gutterSize;
+    }
+    /**
+     * @param {?} v
+     * @return {?}
+     */
+    set disabled(v) {
+        this._disabled = Boolean(v);
+    }
+    /**
+     * @return {?}
+     */
+    get disabled() {
+        return this._disabled;
+    }
+    /**
+     * @return {?}
+     */
+    get cssFlexdirection() {
+        return (this.direction === 'horizontal') ? 'row' : 'column';
+    }
+    /**
+     * @return {?}
+     */
+    get cssWidth() {
+        return this.width ? `${this.width}px` : '100%';
+    }
+    /**
+     * @return {?}
+     */
+    get cssHeight() {
+        return this.height ? `${this.height}px` : '100%';
+    }
+    /**
+     * @return {?}
+     */
+    get cssMinwidth() {
+        return (this.direction === 'horizontal') ? `${this.getNbGutters() * this.gutterSize}px` : null;
+    }
+    /**
+     * @return {?}
+     */
+    get cssMinheight() {
+        return (this.direction === 'vertical') ? `${this.getNbGutters() * this.gutterSize}px` : null;
+    }
+    /**
+     * @param {?} v
+     * @return {?}
+     */
+    set isDragging(v) {
+        this._isDragging = v;
+        // Disable transition during dragging to avoid 'lag effect' (whatever it is active or not).
+        this.areas.forEach(area => {
+            area.comp.setStyleTransition(v ? false : this.visibleTransition);
+        });
+    }
+    /**
+     * @return {?}
+     */
+    get isDragging() {
+        return this._isDragging;
+    }
+    /**
      * @param {?} changes
@@ -94,3 +213,3 @@ * @return {?}
     ngOnChanges(changes) {
-        if (changes['gutterSize'] || changes['disabled']) {
+        if (changes["gutterSize"] || changes["disabled"]) {
             this.refresh();
@@ -100,32 +219,30 @@ }
     /**
-     * @param {?} component
-     * @param {?} orderUser
-     * @param {?} sizeUser
-     * @param {?} minPixel
      * @return {?}
      */
-    addArea(component, orderUser, sizeUser, minPixel) {
-        this.areas.push({
-            component,
-            orderUser,
-            order: -1,
-            sizeUser,
-            size: -1,
-            minPixel
-        });
+    getVisibleAreas() {
+        return this.areas.filter(a => a.comp.visible === true);
+    }
+    /**
+     * @return {?}
+     */
+    getNbGutters() {
+        return this.getVisibleAreas().length - 1;
+    }
+    /**
+     * @param {?} comp
+     * @return {?}
+     */
+    addArea(comp) {
+        this.areas.push({ comp, order: -1, size: -1, pxToSubtract: 0 });
+        comp.setStyleVisibleAndDir(comp.visible, this.direction);
+        comp.setStyleTransition(this.visibleTransition);
         this.refresh();
     }
     /**
-     * @param {?} component
-     * @param {?} orderUser
-     * @param {?} sizeUser
-     * @param {?} minPixel
+     * @param {?} comp
      * @return {?}
      */
-    updateArea(component, orderUser, sizeUser, minPixel) {
-        const /** @type {?} */ item = this.areas.find(a => a.component === component);
+    updateArea(comp) {
+        const /** @type {?} */ item = this.areas.find(a => a.comp === comp);
         if (item) {
-            item.orderUser = orderUser;
-            item.sizeUser = sizeUser;
-            item.minPixel = minPixel;
             this.refresh();
@@ -135,11 +252,9 @@ }
     /**
-     * @param {?} area
+     * @param {?} comp
      * @return {?}
      */
-    removeArea(area) {
-        const /** @type {?} */ item = this.areas.find(a => a.component === area);
+    removeArea(comp) {
+        const /** @type {?} */ item = this.areas.find(a => a.comp === comp);
         if (item) {
-            const /** @type {?} */ index = this.areas.indexOf(item);
-            this.areas.splice(index, 1);
-            this.areas.forEach((a, i) => a.order = i * 2);
+            this.areas.splice(this.areas.indexOf(item), 1);
             this.refresh();
@@ -149,7 +264,7 @@ }
     /**
-     * @param {?} area
+     * @param {?} comp
      * @return {?}
      */
-    hideArea(area) {
-        const /** @type {?} */ item = this.areas.find(a => a.component === area);
+    hideArea(comp) {
+        const /** @type {?} */ item = this.areas.find(a => a.comp === comp);
         if (item) {
@@ -164,3 +279,3 @@ this.refresh();
     showArea(area) {
-        const /** @type {?} */ item = this.areas.find(a => a.component === area);
+        const /** @type {?} */ item = this.areas.find(a => a.comp === area);
         if (item) {
@@ -175,3 +290,4 @@ this.refresh();
     isLastVisibleArea(area) {
-        return this.visibleAreas.length > 0 ? area === this.visibleAreas[this.visibleAreas.length - 1] : false;
+        const /** @type {?} */ visibleAreas = this.getVisibleAreas();
+        return visibleAreas.length > 0 ? area === visibleAreas[visibleAreas.length - 1] : false;
     }
@@ -183,21 +299,48 @@ /**
         this.stopDragging();
-        // ORDERS: Set css 'order' property depending on user input or added order
-        const /** @type {?} */ nbCorrectOrder = this.areas.filter(a => a.orderUser !== null && !isNaN(a.orderUser)).length;
-        if (nbCorrectOrder === this.areas.length) {
-            this.areas.sort((a, b) => Number(a.orderUser) - Number(b.orderUser));
+        // ¤ AREAS ORDER
+        // Based on user input if all provided or added order by default.
+        if (this.areas.some(a => a.comp.order === null) === false) {
+            this.areas.sort((a, b) => Number(a.comp.order) - Number(b.comp.order));
         }
         this.areas.forEach((a, i) => {
             a.order = i * 2;
-            a.component.setStyle('order', a.order);
+            a.comp.setStyleOrder(a.order);
         });
-        // SIZES: Set css 'flex-basis' property depending on user input or equal sizes
-        const /** @type {?} */ totalSize = /** @type {?} */ (this.visibleAreas.map(a => a.sizeUser).reduce((acc, s) => acc + s, 0));
-        const /** @type {?} */ nbCorrectSize = this.visibleAreas.filter(a => a.sizeUser !== null && !isNaN(a.sizeUser) && a.sizeUser >= this.minPercent).length;
-        if (totalSize < 99.99 || totalSize > 100.01 || nbCorrectSize !== this.visibleAreas.length) {
-            const /** @type {?} */ size = Number((100 / this.visibleAreas.length).toFixed(3));
-            this.visibleAreas.forEach(a => a.size = size);
+        const /** @type {?} */ visibleAreas = this.getVisibleAreas();
+        // ¤ AREAS SIZE PERCENT
+        // Set css 'flex-basis' property depending on user input if all set & ~100% or equal sizes by default.
+        const /** @type {?} */ totalUserSize = /** @type {?} */ (visibleAreas.reduce((total, s) => s.comp.size ? total + s.comp.size : total, 0));
+        if (this.areas.some(a => a.comp.size === null) || totalUserSize < .999 || totalUserSize > 1.001) {
+            const /** @type {?} */ size = Number((1 / visibleAreas.length).toFixed(4));
+            visibleAreas.forEach(a => {
+                a.size = size;
+            });
         }
         else {
-            this.visibleAreas.forEach(a => a.size = Number(a.sizeUser));
+            // If some provided % are less than gutterSize > set them to zero and dispatch % to others.
+            let /** @type {?} */ percentToShare = 0;
+            const /** @type {?} */ prop = (this.direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight';
+            const /** @type {?} */ containerSizePixel = this.elRef.nativeElement[prop];
+            visibleAreas.forEach(a => {
+                let /** @type {?} */ newSize = Number(a.comp.size);
+                if (newSize * containerSizePixel < this.gutterSize) {
+                    percentToShare += newSize;
+                    newSize = 0;
+                }
+                a.size = newSize;
+            });
+            if (percentToShare > 0) {
+                const /** @type {?} */ nbAreasNotZero = visibleAreas.filter(a => a.size !== 0).length;
+                const /** @type {?} */ percentToAdd = percentToShare / nbAreasNotZero;
+                visibleAreas.filter(a => a.size !== 0).forEach(a => {
+                    a.size += percentToAdd;
+                });
+            }
         }
+        // ¤ AREAS PX TO SUBTRACT
+        const /** @type {?} */ totalPxToSubtract = this.getNbGutters() * this.gutterSize;
+        const /** @type {?} */ areasSizeNotZero = visibleAreas.filter(a => a.size !== 0);
+        areasSizeNotZero.forEach(a => {
+            a.pxToSubtract = totalPxToSubtract / areasSizeNotZero.length;
+        });
         this.refreshStyleSizes();
@@ -210,4 +353,5 @@ this.cdRef.markForCheck();
     refreshStyleSizes() {
-        const /** @type {?} */ f = this.gutterSize * this.nbGutters / this.visibleAreas.length;
-        this.visibleAreas.forEach(a => a.component.setStyle('flex-basis', `calc( ${a.size}% - ${f}px )`));
+        this.getVisibleAreas().forEach(a => {
+            a.comp.setStyleFlexbasis(`calc( ${a.size * 100}% - ${a.pxToSubtract}px )`);
+        });
     }
@@ -230,5 +374,7 @@ /**
         const /** @type {?} */ prop = (this.direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight';
-        this.containerSize = this.elementRef.nativeElement[prop];
-        this.areaASize = this.containerSize * areaA.size / 100;
-        this.areaBSize = this.containerSize * areaB.size / 100;
+        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;
         let /** @type {?} */ start;
@@ -238,3 +384,3 @@ if (startEvent instanceof MouseEvent) {
                 x: startEvent.screenX,
-                y: startEvent.screenY
+                y: startEvent.screenY,
             };
@@ -245,3 +391,3 @@ }
                 x: startEvent.touches[0].screenX,
-                y: startEvent.touches[0].screenY
+                y: startEvent.touches[0].screenY,
             };
@@ -252,9 +398,9 @@ }
         }
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'mousemove', (e) => this.dragEvent(e, start, areaA, areaB)));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'touchmove', (e) => this.dragEvent(e, start, areaA, areaB)));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'mouseup', (e) => this.stopDragging()));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'touchend', (e) => this.stopDragging()));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'touchcancel', (e) => this.stopDragging()));
-        areaA.component.lockEvents();
-        areaB.component.lockEvents();
+        this.dragListeners.push(this.renderer.listen('document', 'mousemove', (e) => this.dragEvent(e, start, areaA, areaB)));
+        this.dragListeners.push(this.renderer.listen('document', 'touchmove', (e) => this.dragEvent(e, start, areaA, areaB)));
+        this.dragListeners.push(this.renderer.listen('document', 'mouseup', (e) => this.stopDragging()));
+        this.dragListeners.push(this.renderer.listen('document', 'touchend', (e) => this.stopDragging()));
+        this.dragListeners.push(this.renderer.listen('document', 'touchcancel', (e) => this.stopDragging()));
+        areaA.comp.lockEvents();
+        areaB.comp.lockEvents();
         this.isDragging = true;
@@ -278,3 +424,3 @@ this.notify('start');
                 x: event.screenX,
-                y: event.screenY
+                y: event.screenY,
             };
@@ -285,3 +431,3 @@ }
                 x: event.touches[0].screenX,
-                y: event.touches[0].screenY
+                y: event.touches[0].screenY,
             };
@@ -302,24 +448,64 @@ }
     drag(start, end, areaA, areaB) {
+        // ¤ AREAS SIZE PIXEL
         const /** @type {?} */ offsetPixel = (this.direction === 'horizontal') ? (start.x - end.x) : (start.y - end.y);
-        const /** @type {?} */ newSizePixelA = this.areaASize - offsetPixel;
-        const /** @type {?} */ newSizePixelB = this.areaBSize + offsetPixel;
-        if (newSizePixelA <= areaA.minPixel && newSizePixelB < areaB.minPixel) {
+        let /** @type {?} */ newSizePixelA = this.dragStartValues.sizePixelA - offsetPixel;
+        let /** @type {?} */ newSizePixelB = this.dragStartValues.sizePixelB + offsetPixel;
+        if (newSizePixelA < this.gutterSize && newSizePixelB < this.gutterSize) {
+            // WTF.. get out of here!
             return;
         }
-        let /** @type {?} */ newSizePercentA = newSizePixelA / this.containerSize * 100;
-        let /** @type {?} */ newSizePercentB = newSizePixelB / this.containerSize * 100;
-        if (newSizePercentA <= this.minPercent) {
-            newSizePercentA = this.minPercent;
-            newSizePercentB = areaA.size + areaB.size - this.minPercent;
+        else if (newSizePixelA < this.gutterSize) {
+            newSizePixelB += newSizePixelA;
+            newSizePixelA = 0;
         }
-        else if (newSizePercentB <= this.minPercent) {
-            newSizePercentB = this.minPercent;
-            newSizePercentA = areaA.size + areaB.size - this.minPercent;
+        else if (newSizePixelB < this.gutterSize) {
+            newSizePixelA += newSizePixelB;
+            newSizePixelB = 0;
         }
+        // ¤ AREAS SIZE PERCENT
+        const /** @type {?} */ debSizeA = areaA.size;
+        const /** @type {?} */ debSizeB = areaB.size;
+        if (newSizePixelA === 0) {
+            areaB.size += areaA.size;
+            areaA.size = 0;
+        }
+        else if (newSizePixelB === 0) {
+            areaA.size += areaB.size;
+            areaB.size = 0;
+        }
         else {
-            newSizePercentA = Number(newSizePercentA.toFixed(3));
-            newSizePercentB = Number((areaA.size + areaB.size - newSizePercentA).toFixed(3));
+            // size = ( ( (total * percentStart - F) / pixelStart * pixelNew ) + F ) / total;
+            if (this.dragStartValues.sizePercentA === 0) {
+                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;
+            }
+            else if (this.dragStartValues.sizePercentB === 0) {
+                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;
+            }
+            else {
+                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;
+                //areaB.size = ( ( (this.dragStartValues.sizePixelContainer * this.dragStartValues.sizePercentB - areaB.pxToSubtract) / this.dragStartValues.sizePixelB * newSizePixelB ) + areaB.pxToSubtract ) / this.dragStartValues.sizePixelContainer;
+            }
         }
-        areaA.size = newSizePercentA;
-        areaB.size = newSizePercentB;
+        const /** @type {?} */ debPxToSubtractA = areaA.pxToSubtract;
+        const /** @type {?} */ debPxToSubtractB = areaB.pxToSubtract;
+        if (areaA.size === 0) {
+            areaB.pxToSubtract += areaA.pxToSubtract;
+            areaA.pxToSubtract = 0;
+        }
+        else if (areaB.size === 0) {
+            areaA.pxToSubtract += areaB.pxToSubtract;
+            areaB.pxToSubtract = 0;
+        }
+        const /** @type {?} */ rd = (val) => Math.round(val * 100) / 100;
+        console.table([{
+                //'start drag PX': rd(this.dragStartValues.sizePixelA) + ' / ' + rd(this.dragStartValues.sizePixelB),
+                //'offset': offsetPixel,
+                //'new temp PX': rd(debSizePxA) + ' / ' + rd(debSizePxB),
+                'new final PX': rd(newSizePixelA) + ' / ' + rd(newSizePixelB),
+                'curr %-px': `${rd(debSizeA) * 100}% - ${rd(debPxToSubtractA)} / ${rd(debSizeB) * 100}% - ${rd(debPxToSubtractB)}`,
+                'new %-px': `${rd(areaA.size) * 100}% - ${rd(areaA.pxToSubtract)} / ${rd(areaB.size) * 100}% - ${rd(areaB.pxToSubtract)}`,
+            }]);
         this.refreshStyleSizes();
@@ -335,5 +521,8 @@ this.notify('progress');
         }
-        this.areas.forEach(a => a.component.unlockEvents());
-        while (this.eventsDragFct.length > 0) {
-            const /** @type {?} */ fct = this.eventsDragFct.pop();
+        this.areas.forEach(a => {
+            a.comp.unlockEvents();
+        });
+        console.log('>', this.getVisibleAreas().map(a => a.size).join('/'), '  ', this.getVisibleAreas().map(a => a.size).reduce((tot, s) => tot + s, 0));
+        while (this.dragListeners.length > 0) {
+            const /** @type {?} */ fct = this.dragListeners.pop();
             if (fct) {
@@ -343,5 +532,2 @@ fct();
         }
-        this.containerSize = 0;
-        this.areaASize = 0;
-        this.areaBSize = 0;
         this.isDragging = false;
@@ -355,12 +541,12 @@ this.notify('end');
     notify(type) {
-        const /** @type {?} */ data = this.visibleAreas.map(a => a.size);
+        const /** @type {?} */ areasSize = this.getVisibleAreas().map(a => a.size);
         switch (type) {
             case 'start':
-                return this.dragStart.emit(data);
+                return this.dragStart.emit(areasSize);
             case 'progress':
-                return this.dragProgress.emit(data);
+                return this.dragProgress.emit(areasSize);
             case 'end':
-                return this.dragEnd.emit(data);
+                return this.dragEnd.emit(areasSize);
             case 'visibleTransitionEnd':
-                return this.visibleTransitionEndInternal.next(data);
+                return this.visibleTransitionEndInternal.next(areasSize);
         }
@@ -385,9 +571,5 @@ }
             align-items: stretch;
-            flex-direction: row;
+            overflow: hidden;
         }
 
-        :host.vertical {
-            flex-direction: column;
-        }
-
         split-gutter {
@@ -404,19 +586,2 @@ flex-grow: 0;
         }
-
-        :host /deep/ split-area {
-            transition: flex-basis 0.3s;
-        }  
-
-        :host.notransition /deep/ split-area {
-            transition: none !important;
-        }      
-
-        :host /deep/ split-area.hided {
-            flex-basis: 0 !important;
-            overflow: hidden !important;
-        }      
-
-        :host.vertical /deep/ split-area.hided {
-            max-width: 0;
-        }
     `],
@@ -426,3 +591,3 @@ template: `
         <ng-template ngFor let-area [ngForOf]="areas" let-index="index" let-last="last">
-            <split-gutter *ngIf="last === false && area.component.visible === true && !isLastVisibleArea(area)" 
+            <split-gutter *ngIf="last === false && area.comp.visible === true && !isLastVisibleArea(area)" 
                           [order]="index*2+1"
@@ -439,8 +604,9 @@ [direction]="direction"
 SplitComponent.ctorParameters = () => [
+    { type: ElementRef, },
     { type: ChangeDetectorRef, },
-    { type: ElementRef, },
-    { type: Renderer, },
+    { type: Renderer2, },
 ];
 SplitComponent.propDecorators = {
     "direction": [{ type: Input },],
+    "visibleTransition": [{ type: Input },],
     "width": [{ type: Input },],
@@ -450,3 +616,2 @@ "height": [{ type: Input },],
     "disabled": [{ type: Input },],
-    "visibleTransition": [{ type: Input },],
     "dragStart": [{ type: Output },],
@@ -456,7 +621,7 @@ "dragProgress": [{ type: Output },],
     "visibleTransitionEnd": [{ type: Output },],
-    "styleFlexDirection": [{ type: HostBinding, args: ['class.vertical',] },],
-    "styleFlexDirectionStyle": [{ type: HostBinding, args: ['style.flex-direction',] },],
-    "dragging": [{ type: HostBinding, args: ['class.notransition',] },],
-    "styleWidth": [{ type: HostBinding, args: ['style.width',] },],
-    "styleHeight": [{ type: HostBinding, args: ['style.height',] },],
+    "cssFlexdirection": [{ type: HostBinding, args: ['style.flex-direction',] },],
+    "cssWidth": [{ type: HostBinding, args: ['style.width',] },],
+    "cssHeight": [{ type: HostBinding, args: ['style.height',] },],
+    "cssMinwidth": [{ type: HostBinding, args: ['style.min-width',] },],
+    "cssMinheight": [{ type: HostBinding, args: ['style.min-height',] },],
 };
@@ -470,8 +635,8 @@
     /**
-     * @param {?} elementRef
+     * @param {?} elRef
      * @param {?} renderer
      * @param {?} split
      */
-    constructor(elementRef, renderer, split) {
-        this.elementRef = elementRef;
+    constructor(elRef, renderer, split) {
+        this.elRef = elRef;
         this.renderer = renderer;
@@ -481,6 +646,5 @@ this.split = split;
         this._size = null;
-        this._minSizePixel = 0;
+        this._minSize = 0;
         this._visible = true;
-        this.visibility = "block";
-        this.eventsLockFct = [];
+        this.lockListeners = [];
     }
@@ -492,6 +656,12 @@ /**
     set order(v) {
-        this._order = !isNaN(v) ? v : null;
-        this.split.updateArea(this, this._order, this._size, this._minSizePixel);
+        this._order = !isNaN(/** @type {?} */ (v)) ? v : null;
+        this.split.updateArea(this);
     }
     /**
+     * @return {?}
+     */
+    get order() {
+        return this._order;
+    }
+    /**
      * @param {?} v
@@ -501,14 +671,26 @@ * @return {?}
     set size(v) {
-        this._size = !isNaN(v) ? v : null;
-        this.split.updateArea(this, this._order, this._size, this._minSizePixel);
+        this._size = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) >= 0 && /** @type {?} */ (v) <= 100) ? (/** @type {?} */ (v) / 100) : null;
+        this.split.updateArea(this);
     }
     /**
+     * @return {?}
+     */
+    get size() {
+        return this._size;
+    }
+    /**
      * @param {?} v
      * @return {?}
      */
-    set minSizePixel(v) {
-        this._minSizePixel = (!isNaN(v) && v > 0) ? v : 0;
-        this.split.updateArea(this, this._order, this._size, this._minSizePixel);
+    set minSize(v) {
+        this._minSize = (!isNaN(v) && v > 0 && v < 100) ? v / 100 : 0;
+        this.split.updateArea(this);
     }
     /**
+     * @return {?}
+     */
+    get minSize() {
+        return this._minSize;
+    }
+    /**
      * @param {?} v
@@ -518,4 +700,4 @@ * @return {?}
     set visible(v) {
-        this.visibility = v ? "block" : "none";
         this._visible = v;
+        this.setStyleVisibleAndDir(v, this.split.direction);
         if (this.visible) {
@@ -538,58 +720,108 @@ this.split.showArea(this);
     ngOnInit() {
-        this.split.addArea(this, this._order, this._size, this._minSizePixel);
+        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', (e) => this.onTransitionEnd(e));
     }
     /**
+     * @param {?} prop
      * @return {?}
      */
-    lockEvents() {
-        this.eventsLockFct.push(this.renderer.listen(this.elementRef.nativeElement, 'selectstart', (e) => false));
-        this.eventsLockFct.push(this.renderer.listen(this.elementRef.nativeElement, 'dragstart', (e) => false));
+    getSizePixel(prop) {
+        return this.elRef.nativeElement[prop];
     }
     /**
+     * @param {?} isVisible
+     * @param {?} direction
      * @return {?}
      */
-    unlockEvents() {
-        while (this.eventsLockFct.length > 0) {
-            const /** @type {?} */ fct = this.eventsLockFct.pop();
-            if (fct) {
-                fct();
+    setStyleVisibleAndDir(isVisible, direction) {
+        if (isVisible === false) {
+            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');
+            if (direction === 'vertical') {
+                this.renderer.setStyle(this.elRef.nativeElement, 'max-width', '0');
             }
         }
+        else {
+            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');
+        }
+        if (direction === 'horizontal') {
+            this.renderer.setStyle(this.elRef.nativeElement, 'height', '100%');
+        }
+        else {
+            this.renderer.removeStyle(this.elRef.nativeElement, 'height');
+        }
     }
     /**
-     * @param {?} key
+     * @param {?} withTransition
+     * @return {?}
+     */
+    setStyleTransition(withTransition) {
+        if (withTransition === true) {
+            this.renderer.setStyle(this.elRef.nativeElement, 'transition', `flex-basis 0.3s`);
+        }
+        else {
+            this.renderer.setStyle(this.elRef.nativeElement, 'transition', null);
+        }
+    }
+    /**
      * @param {?} value
      * @return {?}
      */
-    setStyle(key, value) {
-        this.renderer.setElementStyle(this.elementRef.nativeElement, key, value);
+    setStyleOrder(value) {
+        this.renderer.setStyle(this.elRef.nativeElement, 'order', value);
     }
     /**
+     * @param {?} value
      * @return {?}
      */
-    ngOnDestroy() {
-        this.split.removeArea(this);
+    setStyleFlexbasis(value) {
+        this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', value);
     }
     /**
-     * @param {?} evt
+     * @param {?} event
      * @return {?}
      */
-    onTransitionEnd(evt) {
+    onTransitionEnd(event) {
         // Limit only flex-basis transition to trigger the event
-        if (evt.propertyName === 'flex-basis')
+        if (event.propertyName === 'flex-basis') {
             this.split.notify('visibleTransitionEnd');
+        }
     }
+    /**
+     * @return {?}
+     */
+    lockEvents() {
+        this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement, 'selectstart', (e) => false));
+        this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement, 'dragstart', (e) => false));
+    }
+    /**
+     * @return {?}
+     */
+    unlockEvents() {
+        while (this.lockListeners.length > 0) {
+            const /** @type {?} */ fct = this.lockListeners.pop();
+            if (fct) {
+                fct();
+            }
+        }
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this.unlockEvents();
+        if (this.transitionListener) {
+            this.transitionListener();
+        }
+        this.split.removeArea(this);
+    }
 }
 SplitAreaDirective.decorators = [
     { type: Directive, args: [{
-                selector: 'split-area',
-                host: {
-                    '[style.flex-grow]': '"0"',
-                    '[style.flex-shrink]': '"0"',
-                    '[style.overflow-x]': '"hidden"',
-                    '[style.overflow-y]': '"auto"',
-                    '[style.height]': '"100%"',
-                    '[class.hided]': '!visible',
-                    '(transitionend)': 'onTransitionEnd($event)'
-                }
+                selector: 'split-area'
             },] },
@@ -600,3 +832,3 @@ ];
     { type: ElementRef, },
-    { type: Renderer, },
+    { type: Renderer2, },
     { type: SplitComponent, },
@@ -607,3 +839,3 @@ ];
     "size": [{ type: Input },],
-    "minSizePixel": [{ type: Input },],
+    "minSize": [{ type: Input },],
     "visible": [{ type: Input },],
@@ -631,3 +863,3 @@ };
     set order(v) {
-        this.setStyle('order', v);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'order', v);
     }
@@ -643,8 +875,6 @@ /**
     /**
-     * @param {?} v
      * @return {?}
      */
-    set size(v) {
-        this._size = v;
-        this.refreshStyle();
+    get direction() {
+        return this._direction;
     }
@@ -655,4 +885,4 @@ /**
      */
-    set disabled(v) {
-        this._disabled = v;
+    set size(v) {
+        this._size = v;
         this.refreshStyle();
@@ -663,45 +893,29 @@ }
      */
-    refreshStyle() {
-        this.setStyle('flex-basis', `${this._size}px`);
-        // fix safari bug about gutter height when direction is horizontal
-        this.setStyle('height', (this._direction === 'vertical') ? `${this._size}px` : `100%`);
-        const /** @type {?} */ state = (this._disabled === true) ? 'disabled' : this._direction;
-        this.setStyle('cursor', this.getCursor(state));
-        this.setStyle('background-image', `url("${this.getImage(state)}")`);
+    get size() {
+        return this._size;
     }
     /**
-     * @param {?} key
-     * @param {?} value
+     * @param {?} v
      * @return {?}
      */
-    setStyle(key, value) {
-        this.renderer.setElementStyle(this.elementRef.nativeElement, key, value);
+    set disabled(v) {
+        this._disabled = v;
+        this.refreshStyle();
     }
     /**
-     * @param {?} state
      * @return {?}
      */
-    getCursor(state) {
-        switch (state) {
-            case 'disabled':
-                return 'default';
-            case 'vertical':
-                return 'row-resize';
-            case 'horizontal':
-                return 'col-resize';
-        }
+    get disabled() {
+        return this._disabled;
     }
     /**
-     * @param {?} state
      * @return {?}
      */
-    getImage(state) {
-        switch (state) {
-            case 'disabled':
-                return '';
-            case 'vertical':
-                return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC';
-            case 'horizontal':
-                return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==';
-        }
+    refreshStyle() {
+        this.renderer.setStyle(this.elementRef.nativeElement, 'flex-basis', `${this.size}px`);
+        // fix safari bug about gutter height when direction is horizontal
+        this.renderer.setStyle(this.elementRef.nativeElement, 'height', (this.direction === 'vertical') ? `${this.size}px` : `100%`);
+        const /** @type {?} */ state = (this.disabled === true) ? 'disabled' : this.direction;
+        this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', getCursor(state));
+        this.renderer.setStyle(this.elementRef.nativeElement, 'background-image', `url("${getImage(state)}")`);
     }
@@ -717,3 +931,3 @@ }
     { type: ElementRef, },
-    { type: Renderer, },
+    { type: Renderer2, },
 ];
@@ -726,2 +940,32 @@ SplitGutterDirective.propDecorators = {
 };
+/**
+ * @param {?} state
+ * @return {?}
+ */
+function getCursor(state) {
+    switch (state) {
+        case 'disabled':
+            return 'default';
+        case 'vertical':
+            return 'row-resize';
+        case 'horizontal':
+            return 'col-resize';
+    }
+    return '';
+}
+/**
+ * @param {?} state
+ * @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 '';
+}
 
@@ -728,0 +972,0 @@ /**

esm5/angular-split.js

@@ -1,2 +0,2 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, HostBinding, Input, NgModule, Output, Renderer } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, HostBinding, Input, NgModule, Output, Renderer2 } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -11,14 +11,38 @@ import { Subject as Subject$1 } from 'rxjs/Subject';
 /**
- * @record
+ * angular-split
+ *
+ * Areas size are set in percentage of the split container & gutters size in pixels.
+ * We need to subtract gutters size (in pixels) from area size percentages.
+ * So we set css flex-basis like this: "calc( {area.size}% - {area.pxToSubtract}px );"
+ *
+ * When an area size is 0, pixel need to be recalculate.
+ *
+ * Examples:  gutterSize * nbGutters / nbAreasMoreThanZero = 10*2/3 = 6.667px
+ *
+ *                            10px                        10px
+ * |--------------------------[]--------------------------[]--------------------------|
+ *    calc(33.33% - 6.667px)      calc(33.33% - 6.667px)      calc(33.33% - 6.667px)
+ *
+ *
+ *  10px                                                  10px
+ * |[]----------------------------------------------------[]--------------------------|
+ * 0                  calc(66.66% - 13.333px)                  calc(33%% - 6.667px)
+ *
+ *
+ *  10px 10px
+ * |[][]------------------------------------------------------------------------------|
+ * 0 0                                calc(100% - 20px)
+ *
  */
-
 var SplitComponent = (function () {
-    function SplitComponent(cdRef, elementRef, renderer) {
+    function SplitComponent(elRef, cdRef, renderer) {
+        this.elRef = elRef;
         this.cdRef = cdRef;
-        this.elementRef = elementRef;
         this.renderer = renderer;
-        this.direction = 'horizontal';
-        this.gutterSize = 10;
-        this.disabled = false;
-        this.visibleTransition = false;
+        this._direction = 'horizontal';
+        this._visibleTransition = false;
+        this._width = null;
+        this._height = null;
+        this._gutterSize = 10;
+        this._disabled = false;
         this.dragStart = new EventEmitter(false);
@@ -28,12 +52,15 @@ this.dragProgress = new EventEmitter(false);
         this.visibleTransitionEndInternal = new Subject$1();
-        this.visibleTransitionEnd = this.visibleTransitionEndInternal.asObservable().debounceTime(20);
+        this.visibleTransitionEnd = (/** @type {?} */ (this.visibleTransitionEndInternal.asObservable())).debounceTime(20);
+        this._isDragging = false;
         this.areas = [];
-        this.minPercent = 5;
-        this.isDragging = false;
-        this.containerSize = 0;
-        this.areaASize = 0;
-        this.areaBSize = 0;
-        this.eventsDragFct = [];
+        this.dragListeners = [];
+        this.dragStartValues = {
+            sizePixelContainer: 0,
+            sizePixelA: 0,
+            sizePixelB: 0,
+            sizePercentA: 0,
+            sizePercentB: 0,
+        };
     }
-    Object.defineProperty(SplitComponent.prototype, "styleFlexDirection", {
+    Object.defineProperty(SplitComponent.prototype, "direction", {
         get: /**
@@ -43,8 +70,20 @@ * @return {?}
         function () {
-            return this.direction === 'vertical';
+            return this._direction;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            var _this = this;
+            this._direction = (v === 'horizontal') ? v : 'vertical';
+            this.areas.forEach(function (area) {
+                area.comp.setStyleVisibleAndDir(area.comp.visible, _this._direction);
+            });
+            this.refresh();
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "styleFlexDirectionStyle", {
+    Object.defineProperty(SplitComponent.prototype, "visibleTransition", {
         get: /**
@@ -54,8 +93,19 @@ * @return {?}
         function () {
-            return this.direction === 'horizontal' ? 'row' : 'column';
+            return this._visibleTransition;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            var _this = this;
+            this._visibleTransition = Boolean(v);
+            this.areas.forEach(function (area) {
+                area.comp.setStyleTransition(_this._visibleTransition);
+            });
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "dragging", {
+    Object.defineProperty(SplitComponent.prototype, "width", {
         get: /**
@@ -65,9 +115,16 @@ * @return {?}
         function () {
-            // prevent animation of areas when visibleTransition is false, or resizing
-            return !this.visibleTransition || this.isDragging;
+            return this._width;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            this._width = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+            this.refresh();
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "styleWidth", {
+    Object.defineProperty(SplitComponent.prototype, "height", {
         get: /**
@@ -77,8 +134,16 @@ * @return {?}
         function () {
-            return (this.width && !isNaN(this.width) && this.width > 0) ? this.width + 'px' : '100%';
+            return this._height;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            this._height = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) > 0) ? v : null;
+            this.refresh();
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "styleHeight", {
+    Object.defineProperty(SplitComponent.prototype, "gutterSize", {
         get: /**
@@ -88,8 +153,16 @@ * @return {?}
         function () {
-            return (this.height && !isNaN(this.height) && this.height > 0) ? this.height + 'px' : '100%';
+            return this._gutterSize;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            this._gutterSize = !isNaN(v) && v > 0 ? v : 10;
+            this.refresh();
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "visibleAreas", {
+    Object.defineProperty(SplitComponent.prototype, "disabled", {
         get: /**
@@ -99,8 +172,15 @@ * @return {?}
         function () {
-            return this.areas.filter(function (a) { return a.component.visible; });
+            return this._disabled;
         },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            this._disabled = Boolean(v);
+        },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(SplitComponent.prototype, "nbGutters", {
+    Object.defineProperty(SplitComponent.prototype, "cssFlexdirection", {
         get: /**
@@ -110,3 +190,3 @@ * @return {?}
         function () {
-            return this.visibleAreas.length - 1;
+            return (this.direction === 'horizontal') ? 'row' : 'column';
         },
@@ -116,2 +196,64 @@ enumerable: true,
     });
+    Object.defineProperty(SplitComponent.prototype, "cssWidth", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.width ? this.width + "px" : '100%';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitComponent.prototype, "cssHeight", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.height ? this.height + "px" : '100%';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitComponent.prototype, "cssMinwidth", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return (this.direction === 'horizontal') ? this.getNbGutters() * this.gutterSize + "px" : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitComponent.prototype, "cssMinheight", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return (this.direction === 'vertical') ? this.getNbGutters() * this.gutterSize + "px" : null;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitComponent.prototype, "isDragging", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._isDragging;
+        },
+        set: /**
+         * @param {?} v
+         * @return {?}
+         */
+        function (v) {
+            var _this = this;
+            this._isDragging = v;
+            // Disable transition during dragging to avoid 'lag effect' (whatever it is active or not).
+            this.areas.forEach(function (area) {
+                area.comp.setStyleTransition(v ? false : _this.visibleTransition);
+            });
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
@@ -126,3 +268,3 @@ * @param {?} changes
     function (changes) {
-        if (changes['gutterSize'] || changes['disabled']) {
+        if (changes["gutterSize"] || changes["disabled"]) {
             this.refresh();
@@ -132,46 +274,44 @@ }
     /**
-     * @param {?} component
-     * @param {?} orderUser
-     * @param {?} sizeUser
-     * @param {?} minPixel
      * @return {?}
      */
+    SplitComponent.prototype.getVisibleAreas = /**
+     * @return {?}
+     */
+    function () {
+        return this.areas.filter(function (a) { return a.comp.visible === true; });
+    };
+    /**
+     * @return {?}
+     */
+    SplitComponent.prototype.getNbGutters = /**
+     * @return {?}
+     */
+    function () {
+        return this.getVisibleAreas().length - 1;
+    };
+    /**
+     * @param {?} comp
+     * @return {?}
+     */
     SplitComponent.prototype.addArea = /**
-     * @param {?} component
-     * @param {?} orderUser
-     * @param {?} sizeUser
-     * @param {?} minPixel
+     * @param {?} comp
      * @return {?}
      */
-    function (component, orderUser, sizeUser, minPixel) {
-        this.areas.push({
-            component: component,
-            orderUser: orderUser,
-            order: -1,
-            sizeUser: sizeUser,
-            size: -1,
-            minPixel: minPixel
-        });
+    function (comp) {
+        this.areas.push({ comp: comp, order: -1, size: -1, pxToSubtract: 0 });
+        comp.setStyleVisibleAndDir(comp.visible, this.direction);
+        comp.setStyleTransition(this.visibleTransition);
         this.refresh();
     };
     /**
-     * @param {?} component
-     * @param {?} orderUser
-     * @param {?} sizeUser
-     * @param {?} minPixel
+     * @param {?} comp
      * @return {?}
      */
     SplitComponent.prototype.updateArea = /**
-     * @param {?} component
-     * @param {?} orderUser
-     * @param {?} sizeUser
-     * @param {?} minPixel
+     * @param {?} comp
      * @return {?}
      */
-    function (component, orderUser, sizeUser, minPixel) {
-        var /** @type {?} */ item = this.areas.find(function (a) { return a.component === component; });
+    function (comp) {
+        var /** @type {?} */ item = this.areas.find(function (a) { return a.comp === comp; });
         if (item) {
-            item.orderUser = orderUser;
-            item.sizeUser = sizeUser;
-            item.minPixel = minPixel;
             this.refresh();
@@ -181,15 +321,13 @@ }
     /**
-     * @param {?} area
+     * @param {?} comp
      * @return {?}
      */
     SplitComponent.prototype.removeArea = /**
-     * @param {?} area
+     * @param {?} comp
      * @return {?}
      */
-    function (area) {
-        var /** @type {?} */ item = this.areas.find(function (a) { return a.component === area; });
+    function (comp) {
+        var /** @type {?} */ item = this.areas.find(function (a) { return a.comp === comp; });
         if (item) {
-            var /** @type {?} */ index = this.areas.indexOf(item);
-            this.areas.splice(index, 1);
-            this.areas.forEach(function (a, i) { return a.order = i * 2; });
+            this.areas.splice(this.areas.indexOf(item), 1);
             this.refresh();
@@ -199,11 +337,11 @@ }
     /**
-     * @param {?} area
+     * @param {?} comp
      * @return {?}
      */
     SplitComponent.prototype.hideArea = /**
-     * @param {?} area
+     * @param {?} comp
      * @return {?}
      */
-    function (area) {
-        var /** @type {?} */ item = this.areas.find(function (a) { return a.component === area; });
+    function (comp) {
+        var /** @type {?} */ item = this.areas.find(function (a) { return a.comp === comp; });
         if (item) {
@@ -222,3 +360,3 @@ this.refresh();
     function (area) {
-        var /** @type {?} */ item = this.areas.find(function (a) { return a.component === area; });
+        var /** @type {?} */ item = this.areas.find(function (a) { return a.comp === area; });
         if (item) {
@@ -237,3 +375,4 @@ this.refresh();
     function (area) {
-        return this.visibleAreas.length > 0 ? area === this.visibleAreas[this.visibleAreas.length - 1] : false;
+        var /** @type {?} */ visibleAreas = this.getVisibleAreas();
+        return visibleAreas.length > 0 ? area === visibleAreas[visibleAreas.length - 1] : false;
     };
@@ -249,21 +388,48 @@ /**
         this.stopDragging();
-        // ORDERS: Set css 'order' property depending on user input or added order
-        var /** @type {?} */ nbCorrectOrder = this.areas.filter(function (a) { return a.orderUser !== null && !isNaN(a.orderUser); }).length;
-        if (nbCorrectOrder === this.areas.length) {
-            this.areas.sort(function (a, b) { return Number(a.orderUser) - Number(b.orderUser); });
+        // ¤ AREAS ORDER
+        // Based on user input if all provided or added order by default.
+        if (this.areas.some(function (a) { return a.comp.order === null; }) === false) {
+            this.areas.sort(function (a, b) { return Number(a.comp.order) - Number(b.comp.order); });
         }
         this.areas.forEach(function (a, i) {
             a.order = i * 2;
-            a.component.setStyle('order', a.order);
+            a.comp.setStyleOrder(a.order);
         });
-        // SIZES: Set css 'flex-basis' property depending on user input or equal sizes
-        var /** @type {?} */ totalSize = /** @type {?} */ (this.visibleAreas.map(function (a) { return a.sizeUser; }).reduce(function (acc, s) { return acc + s; }, 0));
-        var /** @type {?} */ nbCorrectSize = this.visibleAreas.filter(function (a) { return a.sizeUser !== null && !isNaN(a.sizeUser) && a.sizeUser >= _this.minPercent; }).length;
-        if (totalSize < 99.99 || totalSize > 100.01 || nbCorrectSize !== this.visibleAreas.length) {
-            var /** @type {?} */ size_1 = Number((100 / this.visibleAreas.length).toFixed(3));
-            this.visibleAreas.forEach(function (a) { return a.size = size_1; });
+        var /** @type {?} */ visibleAreas = this.getVisibleAreas();
+        // ¤ AREAS SIZE PERCENT
+        // Set css 'flex-basis' property depending on user input if all set & ~100% or equal sizes by default.
+        var /** @type {?} */ totalUserSize = /** @type {?} */ (visibleAreas.reduce(function (total, s) { return s.comp.size ? total + s.comp.size : total; }, 0));
+        if (this.areas.some(function (a) { return a.comp.size === null; }) || totalUserSize < .999 || totalUserSize > 1.001) {
+            var /** @type {?} */ size_1 = Number((1 / visibleAreas.length).toFixed(4));
+            visibleAreas.forEach(function (a) {
+                a.size = size_1;
+            });
         }
         else {
-            this.visibleAreas.forEach(function (a) { return a.size = Number(a.sizeUser); });
+            // If some provided % are less than gutterSize > set them to zero and dispatch % to others.
+            var /** @type {?} */ percentToShare_1 = 0;
+            var /** @type {?} */ prop = (this.direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight';
+            var /** @type {?} */ containerSizePixel_1 = this.elRef.nativeElement[prop];
+            visibleAreas.forEach(function (a) {
+                var /** @type {?} */ newSize = Number(a.comp.size);
+                if (newSize * containerSizePixel_1 < _this.gutterSize) {
+                    percentToShare_1 += newSize;
+                    newSize = 0;
+                }
+                a.size = newSize;
+            });
+            if (percentToShare_1 > 0) {
+                var /** @type {?} */ nbAreasNotZero = visibleAreas.filter(function (a) { return a.size !== 0; }).length;
+                var /** @type {?} */ percentToAdd_1 = percentToShare_1 / nbAreasNotZero;
+                visibleAreas.filter(function (a) { return a.size !== 0; }).forEach(function (a) {
+                    a.size += percentToAdd_1;
+                });
+            }
         }
+        // ¤ AREAS PX TO SUBTRACT
+        var /** @type {?} */ totalPxToSubtract = this.getNbGutters() * this.gutterSize;
+        var /** @type {?} */ areasSizeNotZero = visibleAreas.filter(function (a) { return a.size !== 0; });
+        areasSizeNotZero.forEach(function (a) {
+            a.pxToSubtract = totalPxToSubtract / areasSizeNotZero.length;
+        });
         this.refreshStyleSizes();
@@ -279,4 +445,5 @@ this.cdRef.markForCheck();
     function () {
-        var /** @type {?} */ f = this.gutterSize * this.nbGutters / this.visibleAreas.length;
-        this.visibleAreas.forEach(function (a) { return a.component.setStyle('flex-basis', "calc( " + a.size + "% - " + f + "px )"); });
+        this.getVisibleAreas().forEach(function (a) {
+            a.comp.setStyleFlexbasis("calc( " + a.size * 100 + "% - " + a.pxToSubtract + "px )");
+        });
     };
@@ -305,5 +472,7 @@ /**
         var /** @type {?} */ prop = (this.direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight';
-        this.containerSize = this.elementRef.nativeElement[prop];
-        this.areaASize = this.containerSize * areaA.size / 100;
-        this.areaBSize = this.containerSize * areaB.size / 100;
+        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 /** @type {?} */ start;
@@ -313,3 +482,3 @@ if (startEvent instanceof MouseEvent) {
                 x: startEvent.screenX,
-                y: startEvent.screenY
+                y: startEvent.screenY,
             };
@@ -320,3 +489,3 @@ }
                 x: startEvent.touches[0].screenX,
-                y: startEvent.touches[0].screenY
+                y: startEvent.touches[0].screenY,
             };
@@ -327,9 +496,9 @@ }
         }
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'mousemove', function (e) { return _this.dragEvent(e, start, areaA, areaB); }));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'touchmove', function (e) { return _this.dragEvent(e, start, areaA, areaB); }));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'mouseup', function (e) { return _this.stopDragging(); }));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'touchend', function (e) { return _this.stopDragging(); }));
-        this.eventsDragFct.push(this.renderer.listenGlobal('document', 'touchcancel', function (e) { return _this.stopDragging(); }));
-        areaA.component.lockEvents();
-        areaB.component.lockEvents();
+        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 = true;
@@ -360,3 +529,3 @@ this.notify('start');
                 x: event.screenX,
-                y: event.screenY
+                y: event.screenY,
             };
@@ -367,3 +536,3 @@ }
                 x: event.touches[0].screenX,
-                y: event.touches[0].screenY
+                y: event.touches[0].screenY,
             };
@@ -391,24 +560,64 @@ }
     function (start, end, areaA, areaB) {
+        // ¤ AREAS SIZE PIXEL
         var /** @type {?} */ offsetPixel = (this.direction === 'horizontal') ? (start.x - end.x) : (start.y - end.y);
-        var /** @type {?} */ newSizePixelA = this.areaASize - offsetPixel;
-        var /** @type {?} */ newSizePixelB = this.areaBSize + offsetPixel;
-        if (newSizePixelA <= areaA.minPixel && newSizePixelB < areaB.minPixel) {
+        var /** @type {?} */ newSizePixelA = this.dragStartValues.sizePixelA - offsetPixel;
+        var /** @type {?} */ newSizePixelB = this.dragStartValues.sizePixelB + offsetPixel;
+        if (newSizePixelA < this.gutterSize && newSizePixelB < this.gutterSize) {
+            // WTF.. get out of here!
             return;
         }
-        var /** @type {?} */ newSizePercentA = newSizePixelA / this.containerSize * 100;
-        var /** @type {?} */ newSizePercentB = newSizePixelB / this.containerSize * 100;
-        if (newSizePercentA <= this.minPercent) {
-            newSizePercentA = this.minPercent;
-            newSizePercentB = areaA.size + areaB.size - this.minPercent;
+        else if (newSizePixelA < this.gutterSize) {
+            newSizePixelB += newSizePixelA;
+            newSizePixelA = 0;
         }
-        else if (newSizePercentB <= this.minPercent) {
-            newSizePercentB = this.minPercent;
-            newSizePercentA = areaA.size + areaB.size - this.minPercent;
+        else if (newSizePixelB < this.gutterSize) {
+            newSizePixelA += newSizePixelB;
+            newSizePixelB = 0;
         }
+        // ¤ AREAS SIZE PERCENT
+        var /** @type {?} */ debSizeA = areaA.size;
+        var /** @type {?} */ debSizeB = areaB.size;
+        if (newSizePixelA === 0) {
+            areaB.size += areaA.size;
+            areaA.size = 0;
+        }
+        else if (newSizePixelB === 0) {
+            areaA.size += areaB.size;
+            areaB.size = 0;
+        }
         else {
-            newSizePercentA = Number(newSizePercentA.toFixed(3));
-            newSizePercentB = Number((areaA.size + areaB.size - newSizePercentA).toFixed(3));
+            // size = ( ( (total * percentStart - F) / pixelStart * pixelNew ) + F ) / total;
+            if (this.dragStartValues.sizePercentA === 0) {
+                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;
+            }
+            else if (this.dragStartValues.sizePercentB === 0) {
+                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;
+            }
+            else {
+                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;
+                //areaB.size = ( ( (this.dragStartValues.sizePixelContainer * this.dragStartValues.sizePercentB - areaB.pxToSubtract) / this.dragStartValues.sizePixelB * newSizePixelB ) + areaB.pxToSubtract ) / this.dragStartValues.sizePixelContainer;
+            }
         }
-        areaA.size = newSizePercentA;
-        areaB.size = newSizePercentB;
+        var /** @type {?} */ debPxToSubtractA = areaA.pxToSubtract;
+        var /** @type {?} */ debPxToSubtractB = areaB.pxToSubtract;
+        if (areaA.size === 0) {
+            areaB.pxToSubtract += areaA.pxToSubtract;
+            areaA.pxToSubtract = 0;
+        }
+        else if (areaB.size === 0) {
+            areaA.pxToSubtract += areaB.pxToSubtract;
+            areaB.pxToSubtract = 0;
+        }
+        var /** @type {?} */ rd = function (val) { return Math.round(val * 100) / 100; };
+        console.table([{
+                //'start drag PX': rd(this.dragStartValues.sizePixelA) + ' / ' + rd(this.dragStartValues.sizePixelB),
+                //'offset': offsetPixel,
+                //'new temp PX': rd(debSizePxA) + ' / ' + rd(debSizePxB),
+                'new final PX': rd(newSizePixelA) + ' / ' + rd(newSizePixelB),
+                'curr %-px': rd(debSizeA) * 100 + "% - " + rd(debPxToSubtractA) + " / " + rd(debSizeB) * 100 + "% - " + rd(debPxToSubtractB),
+                'new %-px': rd(areaA.size) * 100 + "% - " + rd(areaA.pxToSubtract) + " / " + rd(areaB.size) * 100 + "% - " + rd(areaB.pxToSubtract),
+            }]);
         this.refreshStyleSizes();
@@ -427,5 +636,8 @@ this.notify('progress');
         }
-        this.areas.forEach(function (a) { return a.component.unlockEvents(); });
-        while (this.eventsDragFct.length > 0) {
-            var /** @type {?} */ fct = this.eventsDragFct.pop();
+        this.areas.forEach(function (a) {
+            a.comp.unlockEvents();
+        });
+        console.log('>', this.getVisibleAreas().map(function (a) { return a.size; }).join('/'), '  ', this.getVisibleAreas().map(function (a) { return a.size; }).reduce(function (tot, s) { return tot + s; }, 0));
+        while (this.dragListeners.length > 0) {
+            var /** @type {?} */ fct = this.dragListeners.pop();
             if (fct) {
@@ -435,5 +647,2 @@ fct();
         }
-        this.containerSize = 0;
-        this.areaASize = 0;
-        this.areaBSize = 0;
         this.isDragging = false;
@@ -451,12 +660,12 @@ this.notify('end');
     function (type) {
-        var /** @type {?} */ data = this.visibleAreas.map(function (a) { return a.size; });
+        var /** @type {?} */ areasSize = this.getVisibleAreas().map(function (a) { return a.size; });
         switch (type) {
             case 'start':
-                return this.dragStart.emit(data);
+                return this.dragStart.emit(areasSize);
             case 'progress':
-                return this.dragProgress.emit(data);
+                return this.dragProgress.emit(areasSize);
             case 'end':
-                return this.dragEnd.emit(data);
+                return this.dragEnd.emit(areasSize);
             case 'visibleTransitionEnd':
-                return this.visibleTransitionEndInternal.next(data);
+                return this.visibleTransitionEndInternal.next(areasSize);
         }
@@ -477,4 +686,4 @@ };
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    styles: ["\n        :host {\n            display: flex;\n            flex-wrap: nowrap;\n            justify-content: flex-start;\n            align-items: stretch;\n            flex-direction: row;\n        }\n\n        :host.vertical {\n            flex-direction: column;\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\n        :host /deep/ split-area {\n            transition: flex-basis 0.3s;\n        }  \n\n        :host.notransition /deep/ split-area {\n            transition: none !important;\n        }      \n\n        :host /deep/ split-area.hided {\n            flex-basis: 0 !important;\n            overflow: hidden !important;\n        }      \n\n        :host.vertical /deep/ split-area.hided {\n            max-width: 0;\n        }\n    "],
-                    template: "\n        <ng-content></ng-content>\n        <ng-template ngFor let-area [ngForOf]=\"areas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false && area.component.visible === true && !isLastVisibleArea(area)\" \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>",
+                    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]=\"areas\" let-index=\"index\" let-last=\"last\">\n            <split-gutter *ngIf=\"last === false && area.comp.visible === true && !isLastVisibleArea(area)\" \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>",
                 },] },
@@ -484,8 +693,9 @@ ];
     SplitComponent.ctorParameters = function () { return [
+        { type: ElementRef, },
         { type: ChangeDetectorRef, },
-        { type: ElementRef, },
-        { type: Renderer, },
+        { type: Renderer2, },
     ]; };
     SplitComponent.propDecorators = {
         "direction": [{ type: Input },],
+        "visibleTransition": [{ type: Input },],
         "width": [{ type: Input },],
@@ -495,3 +705,2 @@ "height": [{ type: Input },],
         "disabled": [{ type: Input },],
-        "visibleTransition": [{ type: Input },],
         "dragStart": [{ type: Output },],
@@ -501,7 +710,7 @@ "dragProgress": [{ type: Output },],
         "visibleTransitionEnd": [{ type: Output },],
-        "styleFlexDirection": [{ type: HostBinding, args: ['class.vertical',] },],
-        "styleFlexDirectionStyle": [{ type: HostBinding, args: ['style.flex-direction',] },],
-        "dragging": [{ type: HostBinding, args: ['class.notransition',] },],
-        "styleWidth": [{ type: HostBinding, args: ['style.width',] },],
-        "styleHeight": [{ type: HostBinding, args: ['style.height',] },],
+        "cssFlexdirection": [{ type: HostBinding, args: ['style.flex-direction',] },],
+        "cssWidth": [{ type: HostBinding, args: ['style.width',] },],
+        "cssHeight": [{ type: HostBinding, args: ['style.height',] },],
+        "cssMinwidth": [{ type: HostBinding, args: ['style.min-width',] },],
+        "cssMinheight": [{ type: HostBinding, args: ['style.min-height',] },],
     };
@@ -516,4 +725,4 @@ return SplitComponent;
 var SplitAreaDirective = (function () {
-    function SplitAreaDirective(elementRef, renderer, split) {
-        this.elementRef = elementRef;
+    function SplitAreaDirective(elRef, renderer, split) {
+        this.elRef = elRef;
         this.renderer = renderer;
@@ -523,8 +732,13 @@ this.split = split;
         this._size = null;
-        this._minSizePixel = 0;
+        this._minSize = 0;
         this._visible = true;
-        this.visibility = "block";
-        this.eventsLockFct = [];
+        this.lockListeners = [];
     }
     Object.defineProperty(SplitAreaDirective.prototype, "order", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._order;
+        },
         set: /**
@@ -535,4 +749,4 @@ * @param {?} v
         function (v) {
-            this._order = !isNaN(v) ? v : null;
-            this.split.updateArea(this, this._order, this._size, this._minSizePixel);
+            this._order = !isNaN(/** @type {?} */ (v)) ? v : null;
+            this.split.updateArea(this);
         },
@@ -543,2 +757,8 @@ enumerable: true,
     Object.defineProperty(SplitAreaDirective.prototype, "size", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._size;
+        },
         set: /**
@@ -549,4 +769,4 @@ * @param {?} v
         function (v) {
-            this._size = !isNaN(v) ? v : null;
-            this.split.updateArea(this, this._order, this._size, this._minSizePixel);
+            this._size = (!isNaN(/** @type {?} */ (v)) && /** @type {?} */ (v) >= 0 && /** @type {?} */ (v) <= 100) ? (/** @type {?} */ (v) / 100) : null;
+            this.split.updateArea(this);
         },
@@ -556,3 +776,9 @@ enumerable: true,
     });
-    Object.defineProperty(SplitAreaDirective.prototype, "minSizePixel", {
+    Object.defineProperty(SplitAreaDirective.prototype, "minSize", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._minSize;
+        },
         set: /**
@@ -563,4 +789,4 @@ * @param {?} v
         function (v) {
-            this._minSizePixel = (!isNaN(v) && v > 0) ? v : 0;
-            this.split.updateArea(this, this._order, this._size, this._minSizePixel);
+            this._minSize = (!isNaN(v) && v > 0 && v < 100) ? v / 100 : 0;
+            this.split.updateArea(this);
         },
@@ -582,4 +808,4 @@ enumerable: true,
         function (v) {
-            this.visibility = v ? "block" : "none";
             this._visible = v;
+            this.setStyleVisibleAndDir(v, this.split.direction);
             if (this.visible) {
@@ -602,75 +828,142 @@ this.split.showArea(this);
     function () {
-        this.split.addArea(this, this._order, this._size, this._minSizePixel);
+        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); });
     };
     /**
+     * @param {?} prop
      * @return {?}
      */
-    SplitAreaDirective.prototype.lockEvents = /**
+    SplitAreaDirective.prototype.getSizePixel = /**
+     * @param {?} prop
      * @return {?}
      */
-    function () {
-        this.eventsLockFct.push(this.renderer.listen(this.elementRef.nativeElement, 'selectstart', function (e) { return false; }));
-        this.eventsLockFct.push(this.renderer.listen(this.elementRef.nativeElement, 'dragstart', function (e) { return false; }));
+    function (prop) {
+        return this.elRef.nativeElement[prop];
     };
     /**
+     * @param {?} isVisible
+     * @param {?} direction
      * @return {?}
      */
-    SplitAreaDirective.prototype.unlockEvents = /**
+    SplitAreaDirective.prototype.setStyleVisibleAndDir = /**
+     * @param {?} isVisible
+     * @param {?} direction
      * @return {?}
      */
-    function () {
-        while (this.eventsLockFct.length > 0) {
-            var /** @type {?} */ fct = this.eventsLockFct.pop();
-            if (fct) {
-                fct();
+    function (isVisible, direction) {
+        if (isVisible === false) {
+            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');
+            if (direction === 'vertical') {
+                this.renderer.setStyle(this.elRef.nativeElement, 'max-width', '0');
             }
         }
+        else {
+            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');
+        }
+        if (direction === 'horizontal') {
+            this.renderer.setStyle(this.elRef.nativeElement, 'height', '100%');
+        }
+        else {
+            this.renderer.removeStyle(this.elRef.nativeElement, 'height');
+        }
     };
     /**
-     * @param {?} key
+     * @param {?} withTransition
+     * @return {?}
+     */
+    SplitAreaDirective.prototype.setStyleTransition = /**
+     * @param {?} withTransition
+     * @return {?}
+     */
+    function (withTransition) {
+        if (withTransition === true) {
+            this.renderer.setStyle(this.elRef.nativeElement, 'transition', "flex-basis 0.3s");
+        }
+        else {
+            this.renderer.setStyle(this.elRef.nativeElement, 'transition', null);
+        }
+    };
+    /**
      * @param {?} value
      * @return {?}
      */
-    SplitAreaDirective.prototype.setStyle = /**
-     * @param {?} key
+    SplitAreaDirective.prototype.setStyleOrder = /**
      * @param {?} value
      * @return {?}
      */
-    function (key, value) {
-        this.renderer.setElementStyle(this.elementRef.nativeElement, key, value);
+    function (value) {
+        this.renderer.setStyle(this.elRef.nativeElement, 'order', value);
     };
     /**
+     * @param {?} value
      * @return {?}
      */
-    SplitAreaDirective.prototype.ngOnDestroy = /**
+    SplitAreaDirective.prototype.setStyleFlexbasis = /**
+     * @param {?} value
      * @return {?}
      */
-    function () {
-        this.split.removeArea(this);
+    function (value) {
+        this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', value);
     };
     /**
-     * @param {?} evt
+     * @param {?} event
      * @return {?}
      */
     SplitAreaDirective.prototype.onTransitionEnd = /**
-     * @param {?} evt
+     * @param {?} event
      * @return {?}
      */
-    function (evt) {
+    function (event) {
         // Limit only flex-basis transition to trigger the event
-        if (evt.propertyName === 'flex-basis')
+        if (event.propertyName === 'flex-basis') {
             this.split.notify('visibleTransitionEnd');
+        }
     };
+    /**
+     * @return {?}
+     */
+    SplitAreaDirective.prototype.lockEvents = /**
+     * @return {?}
+     */
+    function () {
+        this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement, 'selectstart', function (e) { return false; }));
+        this.lockListeners.push(this.renderer.listen(this.elRef.nativeElement, 'dragstart', function (e) { return false; }));
+    };
+    /**
+     * @return {?}
+     */
+    SplitAreaDirective.prototype.unlockEvents = /**
+     * @return {?}
+     */
+    function () {
+        while (this.lockListeners.length > 0) {
+            var /** @type {?} */ fct = this.lockListeners.pop();
+            if (fct) {
+                fct();
+            }
+        }
+    };
+    /**
+     * @return {?}
+     */
+    SplitAreaDirective.prototype.ngOnDestroy = /**
+     * @return {?}
+     */
+    function () {
+        this.unlockEvents();
+        if (this.transitionListener) {
+            this.transitionListener();
+        }
+        this.split.removeArea(this);
+    };
     SplitAreaDirective.decorators = [
         { type: Directive, args: [{
-                    selector: 'split-area',
-                    host: {
-                        '[style.flex-grow]': '"0"',
-                        '[style.flex-shrink]': '"0"',
-                        '[style.overflow-x]': '"hidden"',
-                        '[style.overflow-y]': '"auto"',
-                        '[style.height]': '"100%"',
-                        '[class.hided]': '!visible',
-                        '(transitionend)': 'onTransitionEnd($event)'
-                    }
+                    selector: 'split-area'
                 },] },
@@ -681,3 +974,3 @@ ];
         { type: ElementRef, },
-        { type: Renderer, },
+        { type: Renderer2, },
         { type: SplitComponent, },
@@ -688,3 +981,3 @@ ]; };
         "size": [{ type: Input },],
-        "minSizePixel": [{ type: Input },],
+        "minSize": [{ type: Input },],
         "visible": [{ type: Input },],
@@ -700,2 +993,3 @@ };
 var SplitGutterDirective = (function () {
+    ////
     function SplitGutterDirective(elementRef, renderer) {
@@ -712,3 +1006,3 @@ this.elementRef = elementRef;
         function (v) {
-            this.setStyle('order', v);
+            this.renderer.setStyle(this.elementRef.nativeElement, 'order', v);
         },
@@ -719,2 +1013,8 @@ enumerable: true,
     Object.defineProperty(SplitGutterDirective.prototype, "direction", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._direction;
+        },
         set: /**
@@ -732,2 +1032,8 @@ * @param {?} v
     Object.defineProperty(SplitGutterDirective.prototype, "size", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._size;
+        },
         set: /**
@@ -745,2 +1051,8 @@ * @param {?} v
     Object.defineProperty(SplitGutterDirective.prototype, "disabled", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._disabled;
+        },
         set: /**
@@ -764,58 +1076,9 @@ * @param {?} v
     function () {
-        this.setStyle('flex-basis', this._size + "px");
+        this.renderer.setStyle(this.elementRef.nativeElement, 'flex-basis', this.size + "px");
         // fix safari bug about gutter height when direction is horizontal
-        this.setStyle('height', (this._direction === 'vertical') ? this._size + "px" : "100%");
-        var /** @type {?} */ state = (this._disabled === true) ? 'disabled' : this._direction;
-        this.setStyle('cursor', this.getCursor(state));
-        this.setStyle('background-image', "url(\"" + this.getImage(state) + "\")");
+        this.renderer.setStyle(this.elementRef.nativeElement, 'height', (this.direction === 'vertical') ? this.size + "px" : "100%");
+        var /** @type {?} */ state = (this.disabled === true) ? 'disabled' : this.direction;
+        this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', getCursor(state));
+        this.renderer.setStyle(this.elementRef.nativeElement, 'background-image', "url(\"" + getImage(state) + "\")");
     };
-    /**
-     * @param {?} key
-     * @param {?} value
-     * @return {?}
-     */
-    SplitGutterDirective.prototype.setStyle = /**
-     * @param {?} key
-     * @param {?} value
-     * @return {?}
-     */
-    function (key, value) {
-        this.renderer.setElementStyle(this.elementRef.nativeElement, key, value);
-    };
-    /**
-     * @param {?} state
-     * @return {?}
-     */
-    SplitGutterDirective.prototype.getCursor = /**
-     * @param {?} state
-     * @return {?}
-     */
-    function (state) {
-        switch (state) {
-            case 'disabled':
-                return 'default';
-            case 'vertical':
-                return 'row-resize';
-            case 'horizontal':
-                return 'col-resize';
-        }
-    };
-    /**
-     * @param {?} state
-     * @return {?}
-     */
-    SplitGutterDirective.prototype.getImage = /**
-     * @param {?} state
-     * @return {?}
-     */
-    function (state) {
-        switch (state) {
-            case 'disabled':
-                return '';
-            case 'vertical':
-                return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC';
-            case 'horizontal':
-                return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==';
-        }
-    };
     SplitGutterDirective.decorators = [
@@ -829,3 +1092,3 @@ { type: Directive, args: [{
         { type: ElementRef, },
-        { type: Renderer, },
+        { type: Renderer2, },
     ]; };
@@ -840,2 +1103,32 @@ SplitGutterDirective.propDecorators = {
 }());
+/**
+ * @param {?} state
+ * @return {?}
+ */
+function getCursor(state) {
+    switch (state) {
+        case 'disabled':
+            return 'default';
+        case 'vertical':
+            return 'row-resize';
+        case 'horizontal':
+            return 'col-resize';
+    }
+    return '';
+}
+/**
+ * @param {?} state
+ * @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 '';
+}
 
@@ -842,0 +1135,0 @@ /**

package.json

 {
     "name": "angular-split",
-    "version": "0.2.6",
+    "version": "1.0.0-beta.1",
     "description": "Angular (2+) UI library to split views using CSS flexbox layout.",
@@ -13,5 +13,3 @@ "main": "./bundles/angular-split.umd.js",
         "publish-lib": "npm publish ./dist",
-        "publish-lib:next": "npm publish --tag next ./dist",
-        "compodoc": "compodoc -p tsconfig.json",
-        "compodoc-serve": "compodoc -s"
+        "publish-lib:next": "npm publish --tag next ./dist"
     },
@@ -18,0 +16,0 @@ "typings": "./angular-split.d.ts",

public_api.d.ts

@@ -0,0 +0,0 @@ /**

src/angular-split.d.ts

 export { AngularSplitModule } from './modules/angularSplit.module';

src/components/split.component.d.ts

@@ -1,24 +0,49 @@
-import { ChangeDetectorRef, ElementRef, SimpleChanges, EventEmitter, Renderer, OnDestroy, OnChanges } from '@angular/core';
+import { ChangeDetectorRef, SimpleChanges, EventEmitter, Renderer2, OnDestroy, OnChanges, ElementRef } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
 import { Observable } from 'rxjs/Observable';
-import { Subject } from 'rxjs/Subject';
 import 'rxjs/add/operator/debounceTime';
+import { IArea } from './../interface/IArea';
 import { SplitAreaDirective } from './splitArea.directive';
-export interface IAreaData {
-    component: SplitAreaDirective;
-    sizeUser: number | null;
-    size: number;
-    orderUser: number | null;
-    order: number;
-    minPixel: number;
-}
+/**
+ * angular-split
+ *
+ * Areas size are set in percentage of the split container & gutters size in pixels.
+ * We need to subtract gutters size (in pixels) from area size percentages.
+ * So we set css flex-basis like this: "calc( {area.size}% - {area.pxToSubtract}px );"
+ *
+ * When an area size is 0, pixel need to be recalculate.
+ *
+ * Examples:  gutterSize * nbGutters / nbAreasMoreThanZero = 10*2/3 = 6.667px
+ *
+ *                            10px                        10px
+ * |--------------------------[]--------------------------[]--------------------------|
+ *    calc(33.33% - 6.667px)      calc(33.33% - 6.667px)      calc(33.33% - 6.667px)
+ *
+ *
+ *  10px                                                  10px
+ * |[]----------------------------------------------------[]--------------------------|
+ * 0                  calc(66.66% - 13.333px)                  calc(33%% - 6.667px)
+ *
+ *
+ *  10px 10px
+ * |[][]------------------------------------------------------------------------------|
+ * 0 0                                calc(100% - 20px)
+ *
+ */
 export declare class SplitComponent implements OnChanges, OnDestroy {
+    private elRef;
     private cdRef;
-    private elementRef;
     private renderer;
-    direction: string;
-    width: number;
-    height: number;
+    private _direction;
+    direction: 'horizontal' | 'vertical';
+    private _visibleTransition;
+    visibleTransition: boolean;
+    private _width;
+    width: number | null;
+    private _height;
+    height: number | null;
+    private _gutterSize;
     gutterSize: number;
+    private _disabled;
     disabled: boolean;
-    visibleTransition: boolean;
     dragStart: EventEmitter<number[]>;
@@ -29,24 +54,22 @@ dragProgress: EventEmitter<number[]>;
     visibleTransitionEnd: Observable<number[]>;
-    readonly styleFlexDirection: boolean;
-    readonly styleFlexDirectionStyle: string;
-    readonly dragging: boolean;
-    readonly styleWidth: string;
-    readonly styleHeight: string;
-    private readonly visibleAreas;
-    private readonly nbGutters;
-    areas: Array<IAreaData>;
-    private minPercent;
-    private isDragging;
-    private containerSize;
-    private areaASize;
-    private areaBSize;
-    private eventsDragFct;
-    constructor(cdRef: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer);
+    readonly cssFlexdirection: string;
+    readonly cssWidth: string;
+    readonly cssHeight: string;
+    readonly cssMinwidth: string | null;
+    readonly cssMinheight: string | null;
+    private _isDragging;
+    isDragging: boolean;
+    readonly areas: Array<IArea>;
+    private readonly dragListeners;
+    private readonly dragStartValues;
+    constructor(elRef: ElementRef, cdRef: ChangeDetectorRef, renderer: Renderer2);
     ngOnChanges(changes: SimpleChanges): void;
-    addArea(component: SplitAreaDirective, orderUser: number | null, sizeUser: number | null, minPixel: number): void;
-    updateArea(component: SplitAreaDirective, orderUser: number | null, sizeUser: number | null, minPixel: number): void;
-    removeArea(area: SplitAreaDirective): void;
-    hideArea(area: SplitAreaDirective): void;
+    private getVisibleAreas();
+    private getNbGutters();
+    addArea(comp: SplitAreaDirective): void;
+    updateArea(comp: SplitAreaDirective): void;
+    removeArea(comp: SplitAreaDirective): void;
+    hideArea(comp: SplitAreaDirective): void;
     showArea(area: SplitAreaDirective): void;
-    isLastVisibleArea(area: IAreaData): boolean;
+    isLastVisibleArea(area: IArea): boolean;
     private refresh();
@@ -53,0 +76,0 @@ private refreshStyleSizes();

src/components/splitArea.directive.d.ts

@@ -1,24 +0,28 @@
-import { ElementRef, Renderer, OnInit, OnDestroy } from '@angular/core';
+import { ElementRef, Renderer2, OnInit, OnDestroy } from '@angular/core';
 import { SplitComponent } from './split.component';
 export declare class SplitAreaDirective implements OnInit, OnDestroy {
-    private elementRef;
+    private elRef;
     private renderer;
     private split;
     private _order;
-    order: number;
+    order: number | null;
     private _size;
-    size: any;
-    private _minSizePixel;
-    minSizePixel: number;
+    size: number | null;
+    private _minSize;
+    minSize: number;
     private _visible;
     visible: boolean;
-    visibility: string;
-    eventsLockFct: Array<Function>;
-    constructor(elementRef: ElementRef, renderer: Renderer, split: SplitComponent);
+    private transitionListener;
+    private readonly lockListeners;
+    constructor(elRef: ElementRef, renderer: Renderer2, split: SplitComponent);
     ngOnInit(): void;
+    getSizePixel(prop: 'offsetWidth' | 'offsetHeight'): number;
+    setStyleVisibleAndDir(isVisible: boolean, direction: 'horizontal' | 'vertical'): void;
+    setStyleTransition(withTransition: boolean): void;
+    setStyleOrder(value: number): void;
+    setStyleFlexbasis(value: string): void;
+    private onTransitionEnd(event);
     lockEvents(): void;
     unlockEvents(): void;
-    setStyle(key: string, value: any): void;
     ngOnDestroy(): void;
-    onTransitionEnd(evt: TransitionEvent): void;
 }

src/components/splitGutter.directive.d.ts

@@ -1,2 +0,2 @@
-import { ElementRef, Renderer } from '@angular/core';
+import { ElementRef, Renderer2 } from '@angular/core';
 export declare class SplitGutterDirective {
@@ -12,7 +12,4 @@ private elementRef;
     disabled: boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer);
+    constructor(elementRef: ElementRef, renderer: Renderer2);
     private refreshStyle();
-    private setStyle(key, value);
-    private getCursor(state);
-    private getImage(state);
 }

src/modules/angularSplit.module.d.ts

@@ -0,0 +0,0 @@ import { ModuleWithProviders } from '@angular/core';

No alert changes

Improved metrics

Total package byte prevSize

359879

increased by32.61%

Number of package files

21

increased by10.53%

Lines of code

3430

increased by34.04%

No dependency changes