@ptsecurity/mosaic 12.1.0 → 12.3.0

package/bundles/ptsecurity-mosaic-splitter.umd.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@ptsecurity/mosaic/icon'), require('@angular/cdk/coercion')) :
     typeof define === 'function' && define.amd ? define('@ptsecurity/mosaic/splitter', ['exports', '@angular/common', '@angular/core', '@ptsecurity/mosaic/icon', '@angular/cdk/coercion'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ptsecurity = global.ptsecurity || {}, global.ptsecurity.mosaic = global.ptsecurity.mosaic || {}, global.ptsecurity.mosaic.splitter = {}), global.ng.common, global.ng.core, global.ptsecurity.mosaic.icon, global.ng.cdk.coercion));
-}(this, (function (exports, i1, i0, icon, coercion) { 'use strict';
+})(this, (function (exports, i1, i0, icon, coercion) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -71,33 +69,43 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(McGutterDirective.prototype, "isVertical", {
+            get: function () {
+                return this._direction === exports.Direction.Vertical;
+            },
+            enumerable: false,
+            configurable: true
+        });
         McGutterDirective.prototype.ngOnInit = function () {
             this.setStyle("flex-basis" /* FlexBasis */, coercion.coerceCssPixelValue(this.size));
-            this.setStyle(this.isVertical() ? "height" /* Height */ : "width" /* Width */, coercion.coerceCssPixelValue(this.size));
+            this.setStyle(this.isVertical ? "height" /* Height */ : "width" /* Width */, coercion.coerceCssPixelValue(this.size));
             this.setStyle("order" /* Order */, this.order);
-            if (!this.isVertical()) {
+            if (!this.isVertical) {
                 this.setStyle("height" /* Height */, '100%');
             }
             // fix IE issue with gutter icon. flex-direction is requied for flex alignment options
-            this.setStyle("flex-direction" /* FlexDirection */, this.isVertical() ? 'row' : 'column');
+            this.setStyle("flex-direction" /* FlexDirection */, this.isVertical ? 'row' : 'column');
         };
-        McGutterDirective.prototype.isVertical = function () {
-            return this.direction === exports.Direction.Vertical;
+        McGutterDirective.prototype.getPosition = function () {
+            return {
+                x: this.elementRef.nativeElement.offsetLeft,
+                y: this.elementRef.nativeElement.offsetTop
+            };
         };
         McGutterDirective.prototype.setStyle = function (property, value) {
             this.renderer.setStyle(this.elementRef.nativeElement, property, value);
         };
         return McGutterDirective;
     }());
-    /** @nocollapse */ McGutterDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: McGutterDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ McGutterDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: McGutterDirective, selector: "mc-gutter", inputs: { direction: "direction", order: "order", size: "size" }, host: { listeners: { "mousedown": "dragged = true" }, properties: { "class.mc-gutter_vertical": "isVertical()", "class.mc-gutter_dragged": "dragged" }, classAttribute: "mc-gutter" }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: McGutterDirective, decorators: [{
+    /** @nocollapse */ McGutterDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McGutterDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ McGutterDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McGutterDirective, selector: "mc-gutter", inputs: { direction: "direction", order: "order", size: "size" }, host: { listeners: { "mousedown": "dragged = true" }, properties: { "class.mc-gutter_vertical": "isVertical", "class.mc-gutter_dragged": "dragged" }, classAttribute: "mc-gutter" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McGutterDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: 'mc-gutter',
                         host: {
                             class: 'mc-gutter',
-                            '[class.mc-gutter_vertical]': 'isVertical()',
+                            '[class.mc-gutter_vertical]': 'isVertical',
                             '[class.mc-gutter_dragged]': 'dragged',
                             '(mousedown)': 'dragged = true'
                         }
@@ -109,20 +117,122 @@
                 }], size: [{
                     type: i0.Input
                 }] } });
+    var McGutterGhostDirective = /** @class */ (function () {
+        function McGutterGhostDirective(elementRef, renderer) {
+            this.elementRef = elementRef;
+            this.renderer = renderer;
+            this._x = 0;
+            this._y = 0;
+            this._direction = exports.Direction.Vertical;
+            this._size = 6;
+        }
+        Object.defineProperty(McGutterGhostDirective.prototype, "x", {
+            get: function () {
+                return this._x;
+            },
+            set: function (x) {
+                this._x = x;
+                this.setStyle("left" /* Left */, coercion.coerceCssPixelValue(x));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(McGutterGhostDirective.prototype, "y", {
+            get: function () {
+                return this._y;
+            },
+            set: function (y) {
+                this._y = y;
+                this.setStyle("top" /* Top */, coercion.coerceCssPixelValue(y));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(McGutterGhostDirective.prototype, "direction", {
+            get: function () {
+                return this._direction;
+            },
+            set: function (direction) {
+                this._direction = direction;
+                this.updateDimensions();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(McGutterGhostDirective.prototype, "size", {
+            get: function () {
+                return this._size;
+            },
+            set: function (size) {
+                this._size = coercion.coerceNumberProperty(size);
+                this.updateDimensions();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(McGutterGhostDirective.prototype, "isVertical", {
+            get: function () {
+                return this.direction === exports.Direction.Vertical;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        McGutterGhostDirective.prototype.updateDimensions = function () {
+            this.setStyle(this.isVertical ? "width" /* Width */ : "height" /* Height */, '100%');
+            this.setStyle(this.isVertical ? "height" /* Height */ : "width" /* Width */, coercion.coerceCssPixelValue(this.size));
+        };
+        McGutterGhostDirective.prototype.setStyle = function (property, value) {
+            this.renderer.setStyle(this.elementRef.nativeElement, property, value);
+        };
+        return McGutterGhostDirective;
+    }());
+    /** @nocollapse */ McGutterGhostDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McGutterGhostDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ McGutterGhostDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McGutterGhostDirective, selector: "mc-gutter-ghost", inputs: { visible: "visible", x: "x", y: "y", direction: "direction", size: "size" }, host: { properties: { "class.mc-gutter-ghost_vertical": "isVertical", "class.mc-gutter-ghost_visible": "visible" }, classAttribute: "mc-gutter-ghost" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McGutterGhostDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: 'mc-gutter-ghost',
+                        host: {
+                            class: 'mc-gutter-ghost',
+                            '[class.mc-gutter-ghost_vertical]': 'isVertical',
+                            '[class.mc-gutter-ghost_visible]': 'visible'
+                        }
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { visible: [{
+                    type: i0.Input
+                }], x: [{
+                    type: i0.Input
+                }], y: [{
+                    type: i0.Input
+                }], direction: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }] } });
     var McSplitterComponent = /** @class */ (function () {
         function McSplitterComponent(elementRef, changeDetectorRef, ngZone, renderer) {
             this.elementRef = elementRef;
             this.changeDetectorRef = changeDetectorRef;
             this.ngZone = ngZone;
             this.renderer = renderer;
+            this.gutterPositionChange = new i0.EventEmitter();
             this.areas = [];
-            this.isDragging = false;
+            this._isDragging = false;
             this.areaPositionDivider = 2;
             this.listeners = [];
             this._hideGutters = false;
             this._disabled = false;
+            this._useGhost = false;
             this._gutterSize = 6;
+            this._resizing = false;
         }
+        Object.defineProperty(McSplitterComponent.prototype, "isDragging", {
+            get: function () {
+                return this._isDragging;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(McSplitterComponent.prototype, "hideGutters", {
             get: function () {
                 return this._hideGutters;
@@ -153,6 +263,16 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(McSplitterComponent.prototype, "useGhost", {
+            get: function () {
+                return this._useGhost;
+            },
+            set: function (useGhost) {
+                this._useGhost = coercion.coerceBooleanProperty(useGhost);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(McSplitterComponent.prototype, "gutterSize", {
             get: function () {
                 return this._gutterSize;
@@ -164,6 +284,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(McSplitterComponent.prototype, "resizing", {
+            get: function () {
+                return this._resizing;
+            },
+            enumerable: false,
+            configurable: true
+        });
         McSplitterComponent.prototype.addArea = function (area) {
             var index = this.areas.length;
             var order = index * this.areaPositionDivider;
@@ -188,26 +315,41 @@
                 return;
             }
             event.preventDefault();
-            var leftArea = this.areas[leftAreaIndex];
-            var rightArea = this.areas[rightAreaIndex];
             var startPoint = {
                 x: event.screenX,
                 y: event.screenY
             };
+            var leftArea = this.areas[leftAreaIndex];
+            var rightArea = this.areas[rightAreaIndex];
             leftArea.initialSize = leftArea.area.getSize();
             rightArea.initialSize = rightArea.area.getSize();
-            this.areas.forEach(function (item) {
-                var size = item.area.getSize();
-                item.area.disableFlex();
-                item.area.setSize(size);
-            });
-            this.ngZone.runOutsideAngular(function () {
-                _this.listeners.push(_this.renderer.listen('document', 'mouseup', function () { return _this.onMouseUp(); }));
-            });
+            var currentGutter;
+            if (this.useGhost) {
+                // tslint:disable-next-line:no-magic-numbers
+                var gutterOrder_1 = leftAreaIndex * 2 + 1;
+                currentGutter = this.gutters.find(function (gutter) { return gutter.order === gutterOrder_1; });
+                if (currentGutter) {
+                    var gutterPosition = currentGutter.getPosition();
+                    this.ghost.direction = currentGutter.direction;
+                    this.ghost.size = currentGutter.size;
+                    this.ghost.x = gutterPosition.x;
+                    this.ghost.y = gutterPosition.y;
+                    this.ghost.visible = true;
+                    this.setStyle("cursor" /* Cursor */, currentGutter.direction === exports.Direction.Vertical ? 'row-resize' : 'col-resize');
+                }
+            }
+            else {
+                this.areas.forEach(function (item) {
+                    var size = item.area.getSize();
+                    item.area.disableFlex();
+                    item.area.setSize(size);
+                });
+            }
+            this.listeners.push(this.renderer.listen('document', 'mouseup', function () { return _this.onMouseUp(leftArea, rightArea, currentGutter); }));
             this.ngZone.runOutsideAngular(function () {
-                _this.listeners.push(_this.renderer.listen('document', 'mousemove', function (e) { return _this.onMouseMove(e, startPoint, leftArea, rightArea); }));
+                _this.listeners.push(_this.renderer.listen('document', 'mousemove', function (e) { return _this.onMouseMove(e, startPoint, leftArea, rightArea, currentGutter); }));
             });
-            this.isDragging = true;
+            this._isDragging = true;
         };
         McSplitterComponent.prototype.removeArea = function (area) {
             var indexToRemove = -1;
@@ -235,7 +377,7 @@
                 }
             });
         };
-        McSplitterComponent.prototype.onMouseMove = function (event, startPoint, leftArea, rightArea) {
+        McSplitterComponent.prototype.onMouseMove = function (event, startPoint, leftArea, rightArea, currentGutter) {
             if (!this.isDragging || this.disabled) {
                 return;
             }
@@ -246,11 +388,28 @@
             var offset = this.isVertical()
                 ? startPoint.y - endPoint.y
                 : startPoint.x - endPoint.x;
-            var newLeftAreaSize = leftArea.initialSize - offset;
-            var newRightAreaSize = rightArea.initialSize + offset;
+            if (this.useGhost && currentGutter) {
+                var gutterPosition = currentGutter.getPosition();
+                var leftPos = leftArea.area.getPosition();
+                var rightPos = rightArea.area.getPosition();
+                var rightMin = rightArea.area.getMinSize() || 0;
+                var leftMin = leftArea.area.getMinSize() || 0;
+                var key = this.isVertical() ? 'y' : 'x';
+                var minPos = leftPos[key] - leftMin;
+                var maxPos = rightPos[key] + (rightArea.area.getSize() || 0) - rightMin - currentGutter.size;
+                var newPos = gutterPosition[key] - offset;
+                this.ghost[key] = newPos < minPos ? minPos : Math.min(newPos, maxPos);
+            }
+            else {
+                this.resizeAreas(leftArea, rightArea, offset);
+            }
+        };
+        McSplitterComponent.prototype.resizeAreas = function (leftArea, rightArea, sizeOffset) {
+            var newLeftAreaSize = leftArea.initialSize - sizeOffset;
+            var newRightAreaSize = rightArea.initialSize + sizeOffset;
             var minLeftAreaSize = leftArea.area.getMinSize();
             var minRightAreaSize = rightArea.area.getMinSize();
-            if (newLeftAreaSize <= minLeftAreaSize || newRightAreaSize <= minRightAreaSize) {
+            if (newLeftAreaSize < minLeftAreaSize || newRightAreaSize < minRightAreaSize) {
                 return;
             }
             else if (newLeftAreaSize <= 0) {
@@ -266,24 +425,34 @@
                 rightArea.area.setSize(newRightAreaSize);
             }
         };
-        McSplitterComponent.prototype.onMouseUp = function () {
+        McSplitterComponent.prototype.onMouseUp = function (leftArea, rightArea, currentGutter) {
             while (this.listeners.length > 0) {
                 var unsubscribe = this.listeners.pop();
                 if (unsubscribe) {
                     unsubscribe();
                 }
             }
-            this.isDragging = false;
+            if (this.useGhost && currentGutter) {
+                var gutterPosition = currentGutter.getPosition();
+                var offset = this.ghost.direction === exports.Direction.Vertical ?
+                    gutterPosition.y - this.ghost.y :
+                    gutterPosition.x - this.ghost.x;
+                this.resizeAreas(leftArea, rightArea, offset);
+                this.ghost.visible = false;
+                this.setStyle("cursor" /* Cursor */, 'unset');
+            }
+            this._isDragging = false;
             this.updateGutter();
+            this.gutterPositionChange.emit();
         };
         McSplitterComponent.prototype.setStyle = function (property, value) {
             this.renderer.setStyle(this.elementRef.nativeElement, property, value);
         };
         return McSplitterComponent;
     }());
-    /** @nocollapse */ McSplitterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: McSplitterComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ McSplitterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: McSplitterComponent, selector: "mc-splitter", inputs: { hideGutters: "hideGutters", direction: "direction", disabled: "disabled", gutterSize: "gutterSize" }, host: { classAttribute: "mc-splitter" }, viewQueries: [{ propertyName: "gutters", predicate: McGutterDirective, descendants: true }], exportAs: ["mcSplitter"], ngImport: i0__namespace, template: "<ng-content></ng-content>\n\n<ng-template ngFor let-area [ngForOf]=\"areas\" let-index=\"index\" let-last=\"last\">\n    <mc-gutter *ngIf=\"last === false\"\n               [direction]=\"direction\"\n               [attr.disabled]=\"disabled || null\"\n               [style.display]=\"hideGutters ? 'none' : 'flex'\"\n               [size]=\"gutterSize\"\n               [order]=\"index * 2 + 1\"\n               (mousedown)=\"onMouseDown($event, index, index + 1)\">\n    </mc-gutter>\n</ng-template>\n", styles: [".mc-splitter{display:flex;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.mc-splitter .mc-splitter-area{overflow:hidden}.mc-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.mc-gutter.mc-gutter_vertical>.mc-icon{transform:rotate(90deg)}\n"], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: McGutterDirective, selector: "mc-gutter", inputs: ["direction", "order", "size"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: McSplitterComponent, decorators: [{
+    /** @nocollapse */ McSplitterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McSplitterComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ McSplitterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McSplitterComponent, selector: "mc-splitter", inputs: { hideGutters: "hideGutters", direction: "direction", disabled: "disabled", useGhost: "useGhost", gutterSize: "gutterSize" }, outputs: { gutterPositionChange: "gutterPositionChange" }, host: { classAttribute: "mc-splitter" }, viewQueries: [{ propertyName: "ghost", first: true, predicate: McGutterGhostDirective, descendants: true }, { propertyName: "gutters", predicate: McGutterDirective, descendants: true }], exportAs: ["mcSplitter"], ngImport: i0__namespace, template: "<ng-content></ng-content>\n\n<ng-template ngFor let-area [ngForOf]=\"areas\" let-index=\"index\" let-last=\"last\">\n    <mc-gutter *ngIf=\"last === false\"\n               [direction]=\"direction\"\n               [attr.disabled]=\"disabled || null\"\n               [style.display]=\"hideGutters ? 'none' : 'flex'\"\n               [size]=\"gutterSize\"\n               [order]=\"index * 2 + 1\"\n               (mousedown)=\"onMouseDown($event, index, index + 1)\">\n    </mc-gutter>\n</ng-template>\n\n<mc-gutter-ghost *ngIf=\"useGhost\"></mc-gutter-ghost>\n", styles: [".mc-splitter{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.mc-splitter .mc-splitter-area{overflow:hidden}.mc-splitter .mc-splitter-area_resizing{pointer-events:none}.mc-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.mc-gutter.mc-gutter_vertical>.mc-icon{transform:rotate(90deg)}.mc-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.mc-gutter-ghost.mc-gutter-ghost_vertical>.mc-icon{transform:rotate(90deg)}.mc-gutter-ghost.mc-gutter-ghost_visible{display:block}\n"], directives: [{ type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: McGutterDirective, selector: "mc-gutter", inputs: ["direction", "order", "size"] }, { type: McGutterGhostDirective, selector: "mc-gutter-ghost", inputs: ["visible", "x", "y", "direction", "size"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McSplitterComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'mc-splitter',
@@ -297,15 +466,22 @@
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { gutters: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { gutterPositionChange: [{
+                    type: i0.Output
+                }], gutters: [{
                     type: i0.ViewChildren,
                     args: [McGutterDirective]
+                }], ghost: [{
+                    type: i0.ViewChild,
+                    args: [McGutterGhostDirective]
                 }], hideGutters: [{
                     type: i0.Input
                 }], direction: [{
                     type: i0.Input
                 }], disabled: [{
                     type: i0.Input
+                }], useGhost: [{
+                    type: i0.Input
                 }], gutterSize: [{
                     type: i0.Input
                 }] } });
@@ -314,11 +490,16 @@
             this.elementRef = elementRef;
             this.renderer = renderer;
             this.splitter = splitter;
+            this.sizeChange = new i0.EventEmitter();
         }
+        McSplitterAreaDirective.prototype.isResizing = function () {
+            return this.splitter.isDragging;
+        };
         McSplitterAreaDirective.prototype.disableFlex = function () {
             this.renderer.removeStyle(this.elementRef.nativeElement, 'flex');
         };
         McSplitterAreaDirective.prototype.ngOnInit = function () {
+            var _this = this;
             this.splitter.addArea(this);
             this.removeStyle("max-width" /* MaxWidth */);
             if (this.splitter.direction === exports.Direction.Vertical) {
@@ -329,6 +510,7 @@
                 this.setStyle("height" /* Height */, '100%');
                 this.removeStyle("width" /* Width */);
             }
+            this.splitter.gutterPositionChange.subscribe(function () { return _this.emitSizeChange(); });
         };
         McSplitterAreaDirective.prototype.ngOnDestroy = function () {
             this.splitter.removeArea(this);
@@ -337,7 +519,7 @@
             this.setStyle("order" /* Order */, order);
         };
         McSplitterAreaDirective.prototype.setSize = function (size) {
-            if (size) {
+            if (!isNaN(size)) {
                 var sz = coercion.coerceNumberProperty(size);
                 this.setStyle(this.getSizeProperty(), coercion.coerceCssPixelValue(sz));
             }
@@ -345,6 +527,12 @@
         McSplitterAreaDirective.prototype.getSize = function () {
             return this.elementRef.nativeElement[this.getOffsetSizeProperty()];
         };
+        McSplitterAreaDirective.prototype.getPosition = function () {
+            return {
+                x: this.elementRef.nativeElement.offsetLeft,
+                y: this.elementRef.nativeElement.offsetTop
+            };
+        };
         McSplitterAreaDirective.prototype.getMinSize = function () {
             var styles = getComputedStyle(this.elementRef.nativeElement);
             return parseFloat(styles[this.getMinSizeProperty()]);
@@ -373,37 +561,44 @@
         McSplitterAreaDirective.prototype.removeStyle = function (style) {
             this.renderer.removeStyle(this.elementRef.nativeElement, style);
         };
+        McSplitterAreaDirective.prototype.emitSizeChange = function () {
+            this.sizeChange.emit(this.getSize());
+        };
         return McSplitterAreaDirective;
     }());
-    /** @nocollapse */ McSplitterAreaDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: McSplitterAreaDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: McSplitterComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ McSplitterAreaDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.5", type: McSplitterAreaDirective, selector: "[mc-splitter-area]", host: { classAttribute: "mc-splitter-area" }, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: McSplitterAreaDirective, decorators: [{
+    /** @nocollapse */ McSplitterAreaDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McSplitterAreaDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: McSplitterComponent }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ McSplitterAreaDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McSplitterAreaDirective, selector: "[mc-splitter-area]", outputs: { sizeChange: "sizeChange" }, host: { properties: { "class.mc-splitter-area_resizing": "isResizing()" }, classAttribute: "mc-splitter-area" }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McSplitterAreaDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[mc-splitter-area]',
                         host: {
-                            class: 'mc-splitter-area'
+                            class: 'mc-splitter-area',
+                            '[class.mc-splitter-area_resizing]': 'isResizing()'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }, { type: McSplitterComponent }]; } });
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }, { type: McSplitterComponent }]; }, propDecorators: { sizeChange: [{
+                    type: i0.Output
+                }] } });
 
     var McSplitterModule = /** @class */ (function () {
         function McSplitterModule() {
         }
         return McSplitterModule;
     }());
-    /** @nocollapse */ McSplitterModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: McSplitterModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ McSplitterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: McSplitterModule, declarations: [McGutterDirective,
+    /** @nocollapse */ McSplitterModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McSplitterModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ McSplitterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McSplitterModule, declarations: [McGutterDirective,
+            McGutterGhostDirective,
             McSplitterAreaDirective,
             McSplitterComponent], imports: [i1.CommonModule,
             icon.McIconModule], exports: [McGutterDirective,
             McSplitterAreaDirective,
             McSplitterComponent] });
-    /** @nocollapse */ McSplitterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: McSplitterModule, imports: [[
+    /** @nocollapse */ McSplitterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McSplitterModule, imports: [[
                 i1.CommonModule,
                 icon.McIconModule
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: McSplitterModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: McSplitterModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
@@ -417,6 +612,7 @@
                         ],
                         declarations: [
                             McGutterDirective,
+                            McGutterGhostDirective,
                             McSplitterAreaDirective,
                             McSplitterComponent
                         ]
@@ -428,11 +624,12 @@
      */
 
     exports.McGutterDirective = McGutterDirective;
+    exports.McGutterGhostDirective = McGutterGhostDirective;
     exports.McSplitterAreaDirective = McSplitterAreaDirective;
     exports.McSplitterComponent = McSplitterComponent;
     exports.McSplitterModule = McSplitterModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=ptsecurity-mosaic-splitter.umd.js.map