@davvidess/angular-split
Version:
Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.
1,239 lines (1,210 loc) • 82.5 kB
JavaScript
(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('@davvidess/angular-split', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators'], factory) :
(global = global || self, factory((global.davvidess = global.davvidess || {}, global.davvidess['angular-split'] = {}), global.ng.core, global.ng.common, global.rxjs, global.rxjs.operators));
}(this, (function (exports, core, common, rxjs, operators) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function __createBinding(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}
function __exportStar(m, exports) {
for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) exports[p] = m[p];
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
function __importStar(mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result.default = mod;
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @param {?} event
* @return {?}
*/
function getPointFromEvent(event) {
// TouchEvent
if (((/** @type {?} */ (event))).changedTouches !== undefined && ((/** @type {?} */ (event))).changedTouches.length > 0) {
return {
x: ((/** @type {?} */ (event))).changedTouches[0].clientX,
y: ((/** @type {?} */ (event))).changedTouches[0].clientY,
};
}
// MouseEvent
else if (((/** @type {?} */ (event))).clientX !== undefined && ((/** @type {?} */ (event))).clientY !== undefined) {
return {
x: ((/** @type {?} */ (event))).clientX,
y: ((/** @type {?} */ (event))).clientY,
};
}
return null;
}
/**
* @param {?} elRef
* @param {?} direction
* @return {?}
*/
function getElementPixelSize(elRef, direction) {
/** @type {?} */
var rect = ((/** @type {?} */ (elRef.nativeElement))).getBoundingClientRect();
return direction === 'horizontal' ? rect.width : rect.height;
}
/**
* @param {?} v
* @return {?}
*/
function getInputBoolean(v) {
return typeof v === 'boolean' ? v : v === 'false' ? false : true;
}
/**
* @template T
* @param {?} v
* @param {?} defaultValue
* @return {?}
*/
function getInputPositiveNumber(v, defaultValue) {
if (v === null || v === undefined)
return defaultValue;
v = Number(v);
return !isNaN(v) && v >= 0 ? v : defaultValue;
}
/**
* @param {?} unit
* @param {?} sizes
* @return {?}
*/
function isUserSizesValid(unit, sizes) {
// All sizes have to be not null and total should be 100
if (unit === 'percent') {
/** @type {?} */
var total = sizes.reduce((/**
* @param {?} total
* @param {?} s
* @return {?}
*/
function (total, s) { return (s !== null ? total + s : total); }), 0);
return sizes.every((/**
* @param {?} s
* @return {?}
*/
function (s) { return s !== null; })) && total > 99.9 && total < 100.1;
}
// A size at null is mandatory but only one.
if (unit === 'pixel') {
return sizes.filter((/**
* @param {?} s
* @return {?}
*/
function (s) { return s === null; })).length === 1;
}
}
/**
* @param {?} a
* @return {?}
*/
function getAreaMinSize(a) {
if (a.size === null) {
return null;
}
if (a.component.lockSize === true) {
return a.size;
}
if (a.component.minSize === null) {
return null;
}
if (a.component.minSize > a.size) {
return a.size;
}
return a.component.minSize;
}
/**
* @param {?} a
* @return {?}
*/
function getAreaMaxSize(a) {
if (a.size === null) {
return null;
}
if (a.component.lockSize === true) {
return a.size;
}
if (a.component.maxSize === null) {
return null;
}
if (a.component.maxSize < a.size) {
return a.size;
}
return a.component.maxSize;
}
/**
* @param {?} unit
* @param {?} sideAreas
* @param {?} pixels
* @param {?} allAreasSizePixel
* @return {?}
*/
function getGutterSideAbsorptionCapacity(unit, sideAreas, pixels, allAreasSizePixel) {
return sideAreas.reduce((/**
* @param {?} acc
* @param {?} area
* @return {?}
*/
function (acc, area) {
/** @type {?} */
var res = getAreaAbsorptionCapacity(unit, area, acc.remain, allAreasSizePixel);
acc.list.push(res);
acc.remain = res.pixelRemain;
return acc;
}), { remain: pixels, list: [] });
}
/**
* @param {?} unit
* @param {?} areaSnapshot
* @param {?} pixels
* @param {?} allAreasSizePixel
* @return {?}
*/
function getAreaAbsorptionCapacity(unit, areaSnapshot, pixels, allAreasSizePixel) {
// No pain no gain
if (pixels === 0) {
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: 0,
percentAfterAbsorption: areaSnapshot.sizePercentAtStart,
pixelRemain: 0,
};
}
// Area start at zero and need to be reduced, not possible
if (areaSnapshot.sizePixelAtStart === 0 && pixels < 0) {
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: 0,
percentAfterAbsorption: 0,
pixelRemain: pixels,
};
}
if (unit === 'percent') {
return getAreaAbsorptionCapacityPercent(areaSnapshot, pixels, allAreasSizePixel);
}
if (unit === 'pixel') {
return getAreaAbsorptionCapacityPixel(areaSnapshot, pixels, allAreasSizePixel);
}
}
/**
* @param {?} areaSnapshot
* @param {?} pixels
* @param {?} allAreasSizePixel
* @return {?}
*/
function getAreaAbsorptionCapacityPercent(areaSnapshot, pixels, allAreasSizePixel) {
/** @type {?} */
var tempPixelSize = areaSnapshot.sizePixelAtStart + pixels;
/** @type {?} */
var tempPercentSize = (tempPixelSize / allAreasSizePixel) * 100
// ENLARGE AREA
;
// ENLARGE AREA
if (pixels > 0) {
// If maxSize & newSize bigger than it > absorb to max and return remaining pixels
if (areaSnapshot.area.maxSize !== null && tempPercentSize > areaSnapshot.area.maxSize) {
// Use area.area.maxSize as newPercentSize and return calculate pixels remaining
/** @type {?} */
var maxSizePixel = (areaSnapshot.area.maxSize / 100) * allAreasSizePixel;
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: maxSizePixel,
percentAfterAbsorption: areaSnapshot.area.maxSize,
pixelRemain: areaSnapshot.sizePixelAtStart + pixels - maxSizePixel,
};
}
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: pixels,
percentAfterAbsorption: tempPercentSize > 100 ? 100 : tempPercentSize,
pixelRemain: 0,
};
}
// REDUCE AREA
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) {
// Use area.area.minSize as newPercentSize and return calculate pixels remaining
/** @type {?} */
var minSizePixel = (areaSnapshot.area.minSize / 100) * allAreasSizePixel;
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: minSizePixel,
percentAfterAbsorption: areaSnapshot.area.minSize,
pixelRemain: areaSnapshot.sizePixelAtStart + pixels - minSizePixel,
};
}
// If reduced under zero > return remaining pixels
else if (tempPercentSize < 0) {
// Use 0 as newPercentSize and return calculate pixels remaining
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: -areaSnapshot.sizePixelAtStart,
percentAfterAbsorption: 0,
pixelRemain: pixels + areaSnapshot.sizePixelAtStart,
};
}
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: pixels,
percentAfterAbsorption: tempPercentSize,
pixelRemain: 0,
};
}
}
/**
* @param {?} areaSnapshot
* @param {?} pixels
* @param {?} containerSizePixel
* @return {?}
*/
function getAreaAbsorptionCapacityPixel(areaSnapshot, pixels, containerSizePixel) {
/** @type {?} */
var tempPixelSize = areaSnapshot.sizePixelAtStart + pixels
// ENLARGE AREA
;
// ENLARGE AREA
if (pixels > 0) {
// If maxSize & newSize bigger than it > absorb to max and return remaining pixels
if (areaSnapshot.area.maxSize !== null && tempPixelSize > areaSnapshot.area.maxSize) {
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: areaSnapshot.area.maxSize - areaSnapshot.sizePixelAtStart,
percentAfterAbsorption: -1,
pixelRemain: tempPixelSize - areaSnapshot.area.maxSize,
};
}
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: pixels,
percentAfterAbsorption: -1,
pixelRemain: 0,
};
}
// REDUCE AREA
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) {
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: areaSnapshot.area.minSize + pixels - tempPixelSize,
percentAfterAbsorption: -1,
pixelRemain: tempPixelSize - areaSnapshot.area.minSize,
};
}
// If reduced under zero > return remaining pixels
else if (tempPixelSize < 0) {
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: -areaSnapshot.sizePixelAtStart,
percentAfterAbsorption: -1,
pixelRemain: pixels + areaSnapshot.sizePixelAtStart,
};
}
return {
areaSnapshot: areaSnapshot,
pixelAbsorb: pixels,
percentAfterAbsorption: -1,
pixelRemain: 0,
};
}
}
/**
* @param {?} unit
* @param {?} item
* @return {?}
*/
function updateAreaSize(unit, item) {
if (unit === 'percent') {
item.areaSnapshot.area.size = item.percentAfterAbsorption;
}
else if (unit === 'pixel') {
// Update size except for the wildcard size area
if (item.areaSnapshot.area.size !== null) {
item.areaSnapshot.area.size = item.areaSnapshot.sizePixelAtStart + item.pixelAbsorb;
}
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* angular-split
*
*
* PERCENT MODE ([unit]="'percent'")
* ___________________________________________________________________________________________
* | A [g1] B [g2] C [g3] D [g4] E |
* |-------------------------------------------------------------------------------------------|
* | 20 30 20 15 15 | <-- [size]="x"
* | 10px 10px 10px 10px | <-- [gutterSize]="10"
* |calc(20% - 8px) calc(30% - 12px) calc(20% - 8px) calc(15% - 6px) calc(15% - 6px)| <-- CSS flex-basis property (with flex-grow&shrink at 0)
* | 152px 228px 152px 114px 114px | <-- el.getBoundingClientRect().width
* |___________________________________________________________________________________________|
* 800px <-- el.getBoundingClientRect().width
* flex-basis = calc( { area.size }% - { area.size/100 * nbGutter*gutterSize }px );
*
*
* PIXEL MODE ([unit]="'pixel'")
* ___________________________________________________________________________________________
* | A [g1] B [g2] C [g3] D [g4] E |
* |-------------------------------------------------------------------------------------------|
* | 100 250 * 150 100 | <-- [size]="y"
* | 10px 10px 10px 10px | <-- [gutterSize]="10"
* | 0 0 100px 0 0 250px 1 1 auto 0 0 150px 0 0 100px | <-- CSS flex property (flex-grow/flex-shrink/flex-basis)
* | 100px 250px 200px 150px 100px | <-- el.getBoundingClientRect().width
* |___________________________________________________________________________________________|
* 800px <-- el.getBoundingClientRect().width
*
*/
var SplitComponent = /** @class */ (function () {
function SplitComponent(ngZone, elRef, cdRef, renderer) {
this.ngZone = ngZone;
this.elRef = elRef;
this.cdRef = cdRef;
this.renderer = renderer;
this._direction = 'horizontal';
////
this._unit = 'percent';
////
this._gutterSize = 11;
////
this._gutterStep = 1;
////
this._restrictMove = false;
////
this._useTransition = false;
////
this._disabled = false;
////
this._dir = 'ltr';
////
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.isDragging = false;
this.isWaitingClear = 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;
}
Object.defineProperty(SplitComponent.prototype, "direction", {
get: /**
* @return {?}
*/
function () {
return this._direction;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._direction = v === 'vertical' ? 'vertical' : 'horizontal';
this.renderer.addClass(this.elRef.nativeElement, "as-" + this._direction);
this.renderer.removeClass(this.elRef.nativeElement, "as-" + (this._direction === 'vertical' ? 'horizontal' : 'vertical'));
this.build(false, false);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "unit", {
get: /**
* @return {?}
*/
function () {
return this._unit;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._unit = v === 'pixel' ? 'pixel' : 'percent';
this.renderer.addClass(this.elRef.nativeElement, "as-" + this._unit);
this.renderer.removeClass(this.elRef.nativeElement, "as-" + (this._unit === 'pixel' ? 'percent' : 'pixel'));
this.build(false, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "gutterSize", {
get: /**
* @return {?}
*/
function () {
return this._gutterSize;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._gutterSize = getInputPositiveNumber(v, 11);
this.build(false, false);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "gutterStep", {
get: /**
* @return {?}
*/
function () {
return this._gutterStep;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._gutterStep = getInputPositiveNumber(v, 1);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "restrictMove", {
get: /**
* @return {?}
*/
function () {
return this._restrictMove;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._restrictMove = getInputBoolean(v);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "useTransition", {
get: /**
* @return {?}
*/
function () {
return this._useTransition;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._useTransition = getInputBoolean(v);
if (this._useTransition)
this.renderer.addClass(this.elRef.nativeElement, 'as-transition');
else
this.renderer.removeClass(this.elRef.nativeElement, 'as-transition');
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._disabled = getInputBoolean(v);
if (this._disabled)
this.renderer.addClass(this.elRef.nativeElement, 'as-disabled');
else
this.renderer.removeClass(this.elRef.nativeElement, 'as-disabled');
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "dir", {
get: /**
* @return {?}
*/
function () {
return this._dir;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._dir = v === 'rtl' ? 'rtl' : 'ltr';
this.renderer.setAttribute(this.elRef.nativeElement, 'dir', this._dir);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "gutterDblClickDuration", {
get: /**
* @return {?}
*/
function () {
return this._gutterDblClickDuration;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._gutterDblClickDuration = getInputPositiveNumber(v, 0);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "transitionEnd", {
get: /**
* @return {?}
*/
function () {
var _this = this;
return new rxjs.Observable((/**
* @param {?} subscriber
* @return {?}
*/
function (subscriber) { return (_this.transitionEndSubscriber = subscriber); })).pipe(operators.debounceTime(20));
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
SplitComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
function () {
// To avoid transition at first rendering
setTimeout((/**
* @return {?}
*/
function () { return _this.renderer.addClass(_this.elRef.nativeElement, 'as-init'); }));
}));
};
/**
* @private
* @return {?}
*/
SplitComponent.prototype.getNbGutters = /**
* @private
* @return {?}
*/
function () {
return this.displayedAreas.length === 0 ? 0 : this.displayedAreas.length - 1;
};
/**
* @param {?} component
* @return {?}
*/
SplitComponent.prototype.addArea = /**
* @param {?} component
* @return {?}
*/
function (component) {
/** @type {?} */
var newArea = {
component: component,
order: 0,
size: 0,
minSize: null,
maxSize: null,
};
if (component.visible === true) {
this.displayedAreas.push(newArea);
this.build(true, true);
}
else {
this.hidedAreas.push(newArea);
}
};
/**
* @param {?} component
* @return {?}
*/
SplitComponent.prototype.removeArea = /**
* @param {?} component
* @return {?}
*/
function (component) {
if (this.displayedAreas.some((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.component === component; }))) {
/** @type {?} */
var area = this.displayedAreas.find((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.component === component; }));
this.displayedAreas.splice(this.displayedAreas.indexOf(area), 1);
this.build(true, true);
}
else if (this.hidedAreas.some((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.component === component; }))) {
/** @type {?} */
var area = this.hidedAreas.find((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.component === component; }));
this.hidedAreas.splice(this.hidedAreas.indexOf(area), 1);
}
};
/**
* @param {?} component
* @param {?} resetOrders
* @param {?} resetSizes
* @return {?}
*/
SplitComponent.prototype.updateArea = /**
* @param {?} component
* @param {?} resetOrders
* @param {?} resetSizes
* @return {?}
*/
function (component, resetOrders, resetSizes) {
if (component.visible === true) {
this.build(resetOrders, resetSizes);
}
};
/**
* @param {?} component
* @return {?}
*/
SplitComponent.prototype.showArea = /**
* @param {?} component
* @return {?}
*/
function (component) {
var _a;
/** @type {?} */
var area = this.hidedAreas.find((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.component === component; }));
if (area === undefined) {
return;
}
/** @type {?} */
var areas = this.hidedAreas.splice(this.hidedAreas.indexOf(area), 1);
(_a = this.displayedAreas).push.apply(_a, __spread(areas));
this.build(true, true);
};
/**
* @param {?} comp
* @return {?}
*/
SplitComponent.prototype.hideArea = /**
* @param {?} comp
* @return {?}
*/
function (comp) {
var _a;
/** @type {?} */
var area = this.displayedAreas.find((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.component === comp; }));
if (area === undefined) {
return;
}
/** @type {?} */
var areas = this.displayedAreas.splice(this.displayedAreas.indexOf(area), 1);
areas.forEach((/**
* @param {?} area
* @return {?}
*/
function (area) {
area.order = 0;
area.size = 0;
}));
(_a = this.hidedAreas).push.apply(_a, __spread(areas));
this.build(true, true);
};
/**
* @return {?}
*/
SplitComponent.prototype.getVisibleAreaSizes = /**
* @return {?}
*/
function () {
return this.displayedAreas.map((/**
* @param {?} a
* @return {?}
*/
function (a) { return (a.size === null ? '*' : a.size); }));
};
/**
* @param {?} sizes
* @return {?}
*/
SplitComponent.prototype.setVisibleAreaSizes = /**
* @param {?} sizes
* @return {?}
*/
function (sizes) {
if (sizes.length !== this.displayedAreas.length) {
return false;
}
/** @type {?} */
var formatedSizes = sizes.map((/**
* @param {?} s
* @return {?}
*/
function (s) { return getInputPositiveNumber(s, null); }));
/** @type {?} */
var isValid = isUserSizesValid(this.unit, formatedSizes);
if (isValid === false) {
return false;
}
// @ts-ignore
this.displayedAreas.forEach((/**
* @param {?} area
* @param {?} i
* @return {?}
*/
function (area, i) { return (area.component._size = formatedSizes[i]); }));
this.build(false, true);
return true;
};
/**
* @private
* @param {?} resetOrders
* @param {?} resetSizes
* @return {?}
*/
SplitComponent.prototype.build = /**
* @private
* @param {?} resetOrders
* @param {?} resetSizes
* @return {?}
*/
function (resetOrders, resetSizes) {
this.stopDragging();
// ¤ AREAS ORDER
if (resetOrders === true) {
// If user provided 'order' for each area, use it to sort them.
if (this.displayedAreas.every((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.component.order !== null; }))) {
this.displayedAreas.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) { return (/** @type {?} */ (a.component.order)) - (/** @type {?} */ (b.component.order)); }));
}
// Then set real order with multiples of 2, numbers between will be used by gutters.
this.displayedAreas.forEach((/**
* @param {?} area
* @param {?} i
* @return {?}
*/
function (area, i) {
area.order = i * 2;
area.component.setStyleOrder(area.order);
}));
}
// ¤ AREAS SIZE
if (resetSizes === true) {
/** @type {?} */
var useUserSizes_1 = isUserSizesValid(this.unit, this.displayedAreas.map((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.component.size; })));
switch (this.unit) {
case 'percent': {
/** @type {?} */
var defaultSize_1 = 100 / this.displayedAreas.length;
this.displayedAreas.forEach((/**
* @param {?} area
* @return {?}
*/
function (area) {
area.size = useUserSizes_1 ? (/** @type {?} */ (area.component.size)) : defaultSize_1;
area.minSize = getAreaMinSize(area);
area.maxSize = getAreaMaxSize(area);
}));
break;
}
case 'pixel': {
if (useUserSizes_1) {
this.displayedAreas.forEach((/**
* @param {?} area
* @return {?}
*/
function (area) {
area.size = area.component.size;
area.minSize = getAreaMinSize(area);
area.maxSize = getAreaMaxSize(area);
}));
}
else {
/** @type {?} */
var wildcardSizeAreas = this.displayedAreas.filter((/**
* @param {?} a
* @return {?}
*/
function (a) { return a.component.size === null; }))
// No wildcard area > Need to select one arbitrarily > first
;
// No wildcard area > Need to select one arbitrarily > first
if (wildcardSizeAreas.length === 0 && this.displayedAreas.length > 0) {
this.displayedAreas.forEach((/**
* @param {?} area
* @param {?} i
* @return {?}
*/
function (area, i) {
area.size = i === 0 ? null : area.component.size;
area.minSize = i === 0 ? null : getAreaMinSize(area);
area.maxSize = i === 0 ? null : getAreaMaxSize(area);
}));
}
// More than one wildcard area > Need to keep only one arbitrarly > first
else if (wildcardSizeAreas.length > 1) {
/** @type {?} */
var alreadyGotOne_1 = false;
this.displayedAreas.forEach((/**
* @param {?} area
* @return {?}
*/
function (area) {
if (area.component.size === null) {
if (alreadyGotOne_1 === false) {
area.size = null;
area.minSize = null;
area.maxSize = null;
alreadyGotOne_1 = true;
}
else {
area.size = 100;
area.minSize = null;
area.maxSize = null;
}
}
else {
area.size = area.component.size;
area.minSize = getAreaMinSize(area);
area.maxSize = getAreaMaxSize(area);
}
}));
}
}
break;
}
}
}
this.refreshStyleSizes();
this.cdRef.markForCheck();
};
/**
* @private
* @return {?}
*/
SplitComponent.prototype.refreshStyleSizes = /**
* @private
* @return {?}
*/
function () {
var _this = this;
///////////////////////////////////////////
// PERCENT MODE
if (this.unit === 'percent') {
// Only one area > flex-basis 100%
if (this.displayedAreas.length === 1) {
this.displayedAreas[0].component.setStyleFlex(0, 0, "100%", false, false);
}
// Multiple areas > use each percent basis
else {
/** @type {?} */
var sumGutterSize_1 = this.getNbGutters() * this.gutterSize;
this.displayedAreas.forEach((/**
* @param {?} area
* @return {?}
*/
function (area) {
area.component.setStyleFlex(0, 0, "calc( " + area.size + "% - " + ((/** @type {?} */ (area.size)) / 100) * sumGutterSize_1 + "px )", area.minSize !== null && area.minSize === area.size ? true : false, area.maxSize !== null && area.maxSize === area.size ? true : false);
}));
}
}
///////////////////////////////////////////
// PIXEL MODE
else if (this.unit === 'pixel') {
this.displayedAreas.forEach((/**
* @param {?} area
* @return {?}
*/
function (area) {
// Area with wildcard size
if (area.size === null) {
if (_this.displayedAreas.length === 1) {
area.component.setStyleFlex(1, 1, "100%", false, false);
}
else {
area.component.setStyleFlex(1, 1, "auto", false, false);
}
}
// Area with pixel size
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
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);
}
}
}));
}
};
/**
* @param {?} event
* @param {?} gutterNum
* @return {?}
*/
SplitComponent.prototype.clickGutter = /**
* @param {?} event
* @param {?} gutterNum
* @return {?}
*/
function (event, gutterNum) {
var _this = this;
/** @type {?} */
var tempPoint = getPointFromEvent(event)
// Be sure mouseup/touchend happened at same point as mousedown/touchstart to trigger click/dblclick
;
// Be sure mouseup/touchend happened at same point as mousedown/touchstart to trigger click/dblclick
if (this.startPoint && this.startPoint.x === tempPoint.x && this.startPoint.y === tempPoint.y) {
// If timeout in progress and new click > clearTimeout & dblClickEvent
if (this._clickTimeout !== null) {
window.clearTimeout(this._clickTimeout);
this._clickTimeout = null;
this.notify('dblclick', gutterNum);
this.stopDragging();
}
// Else start timeout to call clickEvent at end
else {
this._clickTimeout = window.setTimeout((/**
* @return {?}
*/
function () {
_this._clickTimeout