@ng-matero/extensions 12.5.1 → 12.7.0

package/bundles/mtxSplit.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/split', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-matero'] = global['ng-matero'] || {}, global['ng-matero'].extensions = global['ng-matero'].extensions || {}, global['ng-matero'].extensions.split = {}), global.ng.core, global.ng.common, global.rxjs, global.rxjs.operators));
-}(this, (function (exports, core, common, rxjs, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/material/core'), require('rxjs'), require('rxjs/operators')) :
+    typeof define === 'function' && define.amd ? define('@ng-matero/extensions/split', ['exports', '@angular/core', '@angular/common', '@angular/material/core', 'rxjs', 'rxjs/operators'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-matero"] = global["ng-matero"] || {}, global["ng-matero"].extensions = global["ng-matero"].extensions || {}, global["ng-matero"].extensions.split = {}), global.ng.core, global.ng.common, global.ng.material.core, global.rxjs, global.rxjs.operators));
+})(this, (function (exports, core$1, common, core, rxjs, operators) { 'use strict';
 
     function getPointFromEvent(event) {
         // TouchEvent
@@ -14,7 +14,6 @@
             };
         }
         // MouseEvent
-        // tslint:disable-next-line: one-line
         else if (event.clientX !== undefined &&
             event.clientY !== undefined) {
             return {
@@ -137,7 +136,6 @@
             };
         }
         // REDUCE AREA
-        // tslint:disable-next-line: one-line
         else if (pixels < 0) {
             // If minSize & newSize smaller than it > absorb to min and return remaining pixels
             if (areaSnapshot.area.minSize !== null && tempPercentSize < areaSnapshot.area.minSize) {
@@ -151,7 +149,6 @@
                 };
             }
             // If reduced under zero > return remaining pixels
-            // tslint:disable-next-line: one-line
             else if (tempPercentSize < 0) {
                 // Use 0 as newPercentSize and return calculate pixels remaining
                 return {
@@ -190,7 +187,6 @@
             };
         }
         // REDUCE AREA
-        // tslint:disable-next-line: one-line
         else if (pixels < 0) {
             // If minSize & newSize smaller than it > absorb to min and return remaining pixels
             if (areaSnapshot.area.minSize !== null && tempPixelSize < areaSnapshot.area.minSize) {
@@ -202,7 +198,6 @@
                 };
             }
             // If reduced under zero > return remaining pixels
-            // tslint:disable-next-line: one-line
             else if (tempPixelSize < 0) {
                 return {
                     areaSnapshot: areaSnapshot,
@@ -549,6 +544,14 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
+    // Boilerplate for applying mixins to _MtxSplitComponentBase.
+    /** @docs-private */
+    var _MtxSplitComponentBase = core.mixinColor(/** @class */ (function () {
+        function class_1(_elementRef) {
+            this._elementRef = _elementRef;
+        }
+        return class_1;
+    }()));
     /**
      * mtx-split
      *
@@ -578,47 +581,50 @@
      *                                                                                 800px         <-- el.getBoundingClientRect().width
      *
      */
-    var MtxSplitComponent = /** @class */ (function () {
+    var MtxSplitComponent = /** @class */ (function (_super) {
+        __extends(MtxSplitComponent, _super);
         function MtxSplitComponent(ngZone, elRef, cdRef, renderer) {
-            this.ngZone = ngZone;
-            this.elRef = elRef;
-            this.cdRef = cdRef;
-            this.renderer = renderer;
-            this._direction = 'horizontal';
+            var _this = _super.call(this, elRef) || this;
+            _this.ngZone = ngZone;
+            _this.elRef = elRef;
+            _this.cdRef = cdRef;
+            _this.renderer = renderer;
+            _this._direction = 'horizontal';
             ////
-            this._unit = 'percent';
+            _this._unit = 'percent';
             ////
-            this._gutterSize = 4;
+            _this._gutterSize = 4;
             ////
-            this._gutterStep = 1;
+            _this._gutterStep = 1;
             ////
-            this._restrictMove = false;
+            _this._restrictMove = false;
             ////
-            this._useTransition = false;
+            _this._useTransition = false;
             ////
-            this._disabled = false;
+            _this._disabled = false;
             ////
-            this._dir = 'ltr';
+            _this._dir = 'ltr';
             ////
-            this._gutterDblClickDuration = 0;
+            _this._gutterDblClickDuration = 0;
             ////
-            this.dragStart = new core.EventEmitter(false);
-            this.dragEnd = new core.EventEmitter(false);
-            this.gutterClick = new core.EventEmitter(false);
-            this.gutterDblClick = new core.EventEmitter(false);
-            this.dragProgressSubject = new rxjs.Subject();
-            this.dragProgress$ = this.dragProgressSubject.asObservable();
+            _this.dragStart = new core$1.EventEmitter(false);
+            _this.dragEnd = new core$1.EventEmitter(false);
+            _this.gutterClick = new core$1.EventEmitter(false);
+            _this.gutterDblClick = new core$1.EventEmitter(false);
+            _this.dragProgressSubject = new rxjs.Subject();
+            _this.dragProgress$ = _this.dragProgressSubject.asObservable();
             ////
-            this.isDragging = false;
-            this.dragListeners = [];
-            this.snapshot = null;
-            this.startPoint = null;
-            this.endPoint = null;
-            this.displayedAreas = [];
-            this.hidedAreas = [];
-            this._clickTimeout = null;
+            _this.isDragging = false;
+            _this.dragListeners = [];
+            _this.snapshot = null;
+            _this.startPoint = null;
+            _this.endPoint = null;
+            _this.displayedAreas = [];
+            _this.hidedAreas = [];
+            _this._clickTimeout = null;
             // To force adding default class, could be override by user @Input() or not
-            this.direction = this._direction;
+            _this.direction = _this._direction;
+            return _this;
         }
         Object.defineProperty(MtxSplitComponent.prototype, "direction", {
             get: function () {
@@ -816,6 +822,7 @@
             if (isValid === false) {
                 return false;
             }
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             this.displayedAreas.forEach(function (area, i) { return (area.component._size = formatedSizes[i]); });
             this.build(false, true);
@@ -867,7 +874,6 @@
                                 });
                             }
                             // More than one wildcard area > Need to keep only one arbitrarly > first
-                            // tslint:disable-next-line: one-line
                             else if (wildcardSizeAreas.length > 1) {
                                 var alreadyGotOne_1 = false;
                                 this.displayedAreas.forEach(function (area) {
@@ -909,7 +915,6 @@
                     this.displayedAreas[0].component.setStyleFlex(0, 0, "100%", false, false);
                 }
                 // Multiple areas > use each percent basis
-                // tslint:disable-next-line: one-line
                 else {
                     var sumGutterSize_1 = this.getNbGutters() * this.gutterSize;
                     this.displayedAreas.forEach(function (area) {
@@ -919,7 +924,6 @@
             }
             ///////////////////////////////////////////
             // PIXEL MODE
-            // tslint:disable-next-line: one-line
             else if (this.unit === 'pixel') {
                 this.displayedAreas.forEach(function (area) {
                     // Area with wildcard size
@@ -932,14 +936,12 @@
                         }
                     }
                     // Area with pixel size
-                    // tslint:disable-next-line: one-line
                     else {
                         // Only one area > flex-basis 100%
                         if (_this.displayedAreas.length === 1) {
                             area.component.setStyleFlex(0, 0, "100%", false, false);
                         }
                         // Multiple areas > use each pixel basis
-                        // tslint:disable-next-line: one-line
                         else {
                             area.component.setStyleFlex(0, 0, area.size + "px", area.minSize !== null && area.minSize === area.size ? true : false, area.maxSize !== null && area.maxSize === area.size ? true : false);
                         }
@@ -960,7 +962,6 @@
                     this.stopDragging();
                 }
                 // Else start timeout to call clickEvent at end
-                // tslint:disable-next-line: one-line
                 else {
                     this._clickTimeout = window.setTimeout(function () {
                         _this._clickTimeout = null;
@@ -1062,6 +1063,7 @@
             // Each gutter side areas can't absorb all offset
             if (areasBefore.remain !== 0 && areasAfter.remain !== 0) {
                 if (Math.abs(areasBefore.remain) === Math.abs(areasAfter.remain)) {
+                    /** */
                 }
                 else if (Math.abs(areasBefore.remain) > Math.abs(areasAfter.remain)) {
                     areasAfter = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasAfterGutter, steppedOffset + areasBefore.remain, this.snapshot.allAreasSizePixel);
@@ -1071,12 +1073,10 @@
                 }
             }
             // Areas before gutter can't absorbs all offset > need to recalculate sizes for areas after gutter.
-            // tslint:disable-next-line: one-line
             else if (areasBefore.remain !== 0) {
                 areasAfter = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasAfterGutter, steppedOffset + areasBefore.remain, this.snapshot.allAreasSizePixel);
             }
             // Areas after gutter can't absorbs all offset > need to recalculate sizes for areas before gutter.
-            // tslint:disable-next-line: one-line
             else if (areasAfter.remain !== 0) {
                 areasBefore = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasBeforeGutter, -(steppedOffset - areasAfter.remain), this.snapshot.allAreasSizePixel);
             }
@@ -1166,18 +1166,19 @@
             this.stopDragging();
         };
         return MtxSplitComponent;
-    }());
+    }(_MtxSplitComponentBase));
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxSplitComponent.decorators = [
-        { type: core.Component, args: [{
+        { type: core$1.Component, args: [{
                     selector: 'mtx-split',
                     exportAs: 'mtxSplit',
                     host: {
                         class: 'mtx-split',
                     },
-                    encapsulation: core.ViewEncapsulation.None,
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    template: "<ng-content></ng-content>\r\n<ng-template ngFor [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\r\n  <div #gutterEls class=\"mtx-split-gutter\"\r\n       *ngIf=\"last === false\"\r\n       [style.flex-basis.px]=\"gutterSize\"\r\n       [style.order]=\"index * 2 + 1\"\r\n       (mousedown)=\"startDragging($event, index * 2 + 1, index + 1)\"\r\n       (touchstart)=\"startDragging($event, index * 2 + 1, index + 1)\"\r\n       (mouseup)=\"clickGutter($event, index + 1)\"\r\n       (touchend)=\"clickGutter($event, index + 1)\">\r\n    <div class=\"mtx-split-gutter-handle\"></div>\r\n  </div>\r\n</ng-template>\r\n",
+                    encapsulation: core$1.ViewEncapsulation.None,
+                    changeDetection: core$1.ChangeDetectionStrategy.OnPush,
+                    template: "<ng-content></ng-content>\r\n<ng-template ngFor [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\r\n  <div #gutterEls class=\"mtx-split-gutter\" [ngClass]=\"['mat-' + color]\"\r\n       *ngIf=\"last === false\"\r\n       [style.flex-basis.px]=\"gutterSize\"\r\n       [style.order]=\"index * 2 + 1\"\r\n       (mousedown)=\"startDragging($event, index * 2 + 1, index + 1)\"\r\n       (touchstart)=\"startDragging($event, index * 2 + 1, index + 1)\"\r\n       (mouseup)=\"clickGutter($event, index + 1)\"\r\n       (touchend)=\"clickGutter($event, index + 1)\">\r\n    <div class=\"mtx-split-gutter-handle\"></div>\r\n  </div>\r\n</ng-template>\r\n",
+                    inputs: ['color'],
                     styles: [".mtx-split{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;overflow:hidden;width:100%;height:100%}.mtx-split>.mtx-split-gutter{position:relative;display:flex;flex-grow:0;flex-shrink:0;align-items:center;justify-content:center}.mtx-split>.mtx-split-gutter>.mtx-split-gutter-handle{position:absolute;opacity:0}.mtx-split>.mtx-split-pane{flex-grow:0;flex-shrink:0;overflow-x:hidden;overflow-y:auto}.mtx-split>.mtx-split-pane.mtx-split-pane-hidden{flex:0 1 0!important;overflow-x:hidden;overflow-y:hidden}.mtx-split.mtx-split-horizontal{flex-direction:row}.mtx-split.mtx-split-horizontal>.mtx-split-gutter{flex-direction:row;height:100%;cursor:col-resize}.mtx-split.mtx-split-horizontal>.mtx-split-gutter>.mtx-split-gutter-handle{width:8px;height:100%;left:-2px;right:2px}.mtx-split.mtx-split-horizontal>.mtx-split-pane{height:100%}.mtx-split.mtx-split-vertical{flex-direction:column}.mtx-split.mtx-split-vertical>.mtx-split-gutter{flex-direction:column;width:100%;cursor:row-resize}.mtx-split.mtx-split-vertical>.mtx-split-gutter>.mtx-split-gutter-handle{width:100%;height:8px;top:-2px;bottom:2px}.mtx-split.mtx-split-vertical>.mtx-split-pane{width:100%}.mtx-split.mtx-split-vertical>.mtx-split-pane.mtx-split-pane-hidden{max-width:0}.mtx-split.mtx-split-disabled>.mtx-split-gutter{cursor:default}.mtx-split.mtx-split-disabled>.mtx-split-gutter .mtx-split-gutter-handle{background-image:none}.mtx-split.mtx-split-transition.mtx-split-init:not(.mtx-dragging)>.mtx-split-gutter,.mtx-split.mtx-split-transition.mtx-split-init:not(.mtx-dragging)>.mtx-split-pane{transition:flex-basis .3s}\n"]
                 },] }
     ];
@@ -1189,28 +1190,28 @@
      * @nocollapse
      */
     MtxSplitComponent.ctorParameters = function () { return [
-        { type: core.NgZone },
-        { type: core.ElementRef },
-        { type: core.ChangeDetectorRef },
-        { type: core.Renderer2 }
+        { type: core$1.NgZone },
+        { type: core$1.ElementRef },
+        { type: core$1.ChangeDetectorRef },
+        { type: core$1.Renderer2 }
     ]; };
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxSplitComponent.propDecorators = {
-        direction: [{ type: core.Input }],
-        unit: [{ type: core.Input }],
-        gutterSize: [{ type: core.Input }],
-        gutterStep: [{ type: core.Input }],
-        restrictMove: [{ type: core.Input }],
-        useTransition: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        dir: [{ type: core.Input }],
-        gutterDblClickDuration: [{ type: core.Input }],
-        dragStart: [{ type: core.Output }],
-        dragEnd: [{ type: core.Output }],
-        gutterClick: [{ type: core.Output }],
-        gutterDblClick: [{ type: core.Output }],
-        transitionEnd: [{ type: core.Output }],
-        gutterEls: [{ type: core.ViewChildren, args: ['gutterEls',] }]
+        direction: [{ type: core$1.Input }],
+        unit: [{ type: core$1.Input }],
+        gutterSize: [{ type: core$1.Input }],
+        gutterStep: [{ type: core$1.Input }],
+        restrictMove: [{ type: core$1.Input }],
+        useTransition: [{ type: core$1.Input }],
+        disabled: [{ type: core$1.Input }],
+        dir: [{ type: core$1.Input }],
+        gutterDblClickDuration: [{ type: core$1.Input }],
+        dragStart: [{ type: core$1.Output }],
+        dragEnd: [{ type: core$1.Output }],
+        gutterClick: [{ type: core$1.Output }],
+        gutterDblClick: [{ type: core$1.Output }],
+        transitionEnd: [{ type: core$1.Output }],
+        gutterEls: [{ type: core$1.ViewChildren, args: ['gutterEls',] }]
     };
 
     var MtxSplitPaneDirective = /** @class */ (function () {
@@ -1365,7 +1366,7 @@
     }());
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxSplitPaneDirective.decorators = [
-        { type: core.Directive, args: [{
+        { type: core$1.Directive, args: [{
                     selector: 'mtx-split-pane, [mtx-split-pane]',
                     exportAs: 'mtxSplitPane',
                 },] }
@@ -1378,19 +1379,19 @@
      * @nocollapse
      */
     MtxSplitPaneDirective.ctorParameters = function () { return [
-        { type: core.NgZone },
-        { type: core.ElementRef },
-        { type: core.Renderer2 },
+        { type: core$1.NgZone },
+        { type: core$1.ElementRef },
+        { type: core$1.Renderer2 },
         { type: MtxSplitComponent }
     ]; };
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxSplitPaneDirective.propDecorators = {
-        order: [{ type: core.Input }],
-        size: [{ type: core.Input }],
-        minSize: [{ type: core.Input }],
-        maxSize: [{ type: core.Input }],
-        lockSize: [{ type: core.Input }],
-        visible: [{ type: core.Input }]
+        order: [{ type: core$1.Input }],
+        size: [{ type: core$1.Input }],
+        minSize: [{ type: core$1.Input }],
+        maxSize: [{ type: core$1.Input }],
+        lockSize: [{ type: core$1.Input }],
+        visible: [{ type: core$1.Input }]
     };
 
     var MtxSplitModule = /** @class */ (function () {
@@ -1400,7 +1401,7 @@
     }());
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxSplitModule.decorators = [
-        { type: core.NgModule, args: [{
+        { type: core$1.NgModule, args: [{
                     imports: [common.CommonModule],
                     declarations: [MtxSplitComponent, MtxSplitPaneDirective],
                     exports: [MtxSplitComponent, MtxSplitPaneDirective],
@@ -1426,5 +1427,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=mtxSplit.umd.js.map