angular-split-ng6
Version:
Copy of angular-split but with aszechlicki fix, and some other errors patched for angular 6.
1,371 lines (1,362 loc) • 46.7 kB
JavaScript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, EventEmitter, HostBinding, Input, NgModule, NgZone, Output, Renderer2 } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* angular-split
*
* Areas size are set in percentage of the split container.
* Gutters size are set in pixels.
*
* So we set css 'flex-basis' property like this (where 0 <= area.size <= 1):
* calc( { area.size * 100 }% - { area.size * nbGutter * gutterSize }px );
*
* Examples with 3 visible areas and 2 gutters:
*
* | 10px 10px |
* |---------------------[]---------------------[]------------------------------------|
* | calc(20% - 4px) calc(20% - 4px) calc(60% - 12px) |
*
*
* | 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 = /** @class */ (function () {
function SplitComponent(ngZone, elRef, cdRef, renderer) {
this.ngZone = ngZone;
this.elRef = elRef;
this.cdRef = cdRef;
this.renderer = renderer;
this._direction = 'horizontal';
this._useTransition = false;
this._disabled = false;
this._width = null;
this._height = null;
this._gutterSize = 11;
this._gutterColor = '';
this._gutterImageH = '';
this._gutterImageV = '';
this._dir = 'ltr';
this.dragStart = new EventEmitter(false);
this.dragProgress = new EventEmitter(false);
this.dragEnd = new EventEmitter(false);
this.gutterClick = new EventEmitter(false);
this.transitionEndInternal = new Subject();
this.transitionEnd = (/** @type {?} */ (this.transitionEndInternal.asObservable())).pipe(debounceTime(20));
this.isViewInitialized = false;
this.displayedAreas = [];
this.isDragging = false;
this.draggingWithoutMove = false;
this.currentGutterNum = 0;
this.hidedAreas = [];
this.dragListeners = [];
this.dragStartValues = {
sizePixelContainer: 0,
sizePixelA: 0,
sizePixelB: 0,
sizePercentA: 0,
sizePercentB: 0,
};
}
Object.defineProperty(SplitComponent.prototype, "direction", {
get: /**
* @return {?}
*/
function () {
return this._direction;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
var _this = this;
v = (v === 'vertical') ? 'vertical' : 'horizontal';
this._direction = v;
this.displayedAreas.concat(this.hidedAreas).forEach(function (area) {
area.comp.setStyleVisibleAndDir(area.comp.visible, _this.isDragging, _this.direction);
});
this.build(false, false);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "useTransition", {
get: /**
* @return {?}
*/
function () {
return this._useTransition;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
this._useTransition = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
this._disabled = v;
// Force repaint if modified from TS class (instead of the template)
this.cdRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "width", {
get: /**
* @return {?}
*/
function () {
return this._width;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
v = Number(v);
this._width = (!isNaN(v) && v > 0) ? v : null;
this.build(false, false);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "height", {
get: /**
* @return {?}
*/
function () {
return this._height;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
v = Number(v);
this._height = (!isNaN(v) && v > 0) ? v : null;
this.build(false, false);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "gutterSize", {
get: /**
* @return {?}
*/
function () {
return this._gutterSize;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
v = Number(v);
this._gutterSize = (!isNaN(v) && v > 0) ? v : 11;
this.build(false, false);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "gutterColor", {
get: /**
* @return {?}
*/
function () {
return this._gutterColor;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._gutterColor = (typeof v === 'string' && v !== '') ? v : '';
// Force repaint if modified from TS class (instead of the template)
this.cdRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "gutterImageH", {
get: /**
* @return {?}
*/
function () {
return this._gutterImageH;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._gutterImageH = (typeof v === 'string' && v !== '') ? v : '';
// Force repaint if modified from TS class (instead of the template)
this.cdRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "gutterImageV", {
get: /**
* @return {?}
*/
function () {
return this._gutterImageV;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._gutterImageV = (typeof v === 'string' && v !== '') ? v : '';
// Force repaint if modified from TS class (instead of the template)
this.cdRef.markForCheck();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "dir", {
get: /**
* @return {?}
*/
function () {
return this._dir;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
v = (v === 'rtl') ? 'rtl' : 'ltr';
this._dir = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitComponent.prototype, "cssFlexdirection", {
get: /**
* @return {?}
*/
function () {
return (this.direction === 'horizontal') ? 'row' : 'column';
},
enumerable: true,
configurable: 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
});
/**
* @return {?}
*/
SplitComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.isViewInitialized = true;
};
/**
* @param {?} startEvent
* @param {?} gutterOrder
* @param {?} gutterNum
* @return {?}
*/
SplitComponent.prototype.startDragging = /**
* @param {?} startEvent
* @param {?} gutterOrder
* @param {?} gutterNum
* @return {?}
*/
function (startEvent, gutterOrder, gutterNum) {
var _this = this;
startEvent.preventDefault();
// Place code here to allow '(gutterClick)' event even if '[disabled]="true"'.
this.currentGutterNum = gutterNum;
this.draggingWithoutMove = true;
this.ngZone.runOutsideAngular(function () {
_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(); }));
});
if (this.disabled) {
return;
}
var /** @type {?} */ areaA = this.displayedAreas.find(function (a) { return a.order === gutterOrder - 1; });
var /** @type {?} */ areaB = this.displayedAreas.find(function (a) { return a.order === gutterOrder + 1; });
if (!areaA || !areaB) {
return;
}
var /** @type {?} */ prop = (this.direction === 'horizontal') ? '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 /** @type {?} */ start;
if (startEvent instanceof MouseEvent) {
start = {
x: startEvent.screenX,
y: startEvent.screenY,
};
}
else if (startEvent instanceof TouchEvent) {
start = {
x: startEvent.touches[0].screenX,
y: startEvent.touches[0].screenY,
};
}
else {
return;
}
this.ngZone.runOutsideAngular(function () {
_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); }));
});
areaA.comp.lockEvents();
areaB.comp.lockEvents();
this.isDragging = true;
this.notify('start');
};
/**
* @param {?} type
* @return {?}
*/
SplitComponent.prototype.notify = /**
* @param {?} type
* @return {?}
*/
function (type) {
var /** @type {?} */ areasSize = this.displayedAreas.map(function (a) { return a.size * 100; });
switch (type) {
case 'start':
return this.dragStart.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
case 'progress':
return this.dragProgress.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
case 'end':
return this.dragEnd.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
case 'click':
return this.gutterClick.emit({ gutterNum: this.currentGutterNum, sizes: areasSize });
case 'transitionEnd':
return this.transitionEndInternal.next(areasSize);
}
};
/**
* @return {?}
*/
SplitComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.stopDragging();
};
/**
* @param {?} comp
* @return {?}
*/
SplitComponent.prototype.addArea = /**
* @param {?} comp
* @return {?}
*/
function (comp) {
var /** @type {?} */ newArea = {
comp: comp,
order: 0,
size: 0,
};
if (comp.visible === true) {
this.displayedAreas.push(newArea);
}
else {
this.hidedAreas.push(newArea);
}
comp.setStyleVisibleAndDir(comp.visible, this.isDragging, this.direction);
this.build(true, true);
};
/**
* @param {?} comp
* @return {?}
*/
SplitComponent.prototype.removeArea = /**
* @param {?} comp
* @return {?}
*/
function (comp) {
if (this.displayedAreas.some(function (a) { return a.comp === comp; })) {
var /** @type {?} */ area = /** @type {?} */ (this.displayedAreas.find(function (a) { return a.comp === comp; }));
this.displayedAreas.splice(this.displayedAreas.indexOf(area), 1);
this.build(true, true);
}
else if (this.hidedAreas.some(function (a) { return a.comp === comp; })) {
var /** @type {?} */ area = /** @type {?} */ (this.hidedAreas.find(function (a) { return a.comp === comp; }));
this.hidedAreas.splice(this.hidedAreas.indexOf(area), 1);
}
};
/**
* @param {?} comp
* @param {?} resetOrders
* @param {?} resetSizes
* @return {?}
*/
SplitComponent.prototype.updateArea = /**
* @param {?} comp
* @param {?} resetOrders
* @param {?} resetSizes
* @return {?}
*/
function (comp, resetOrders, resetSizes) {
// Only refresh if area is displayed (No need to check inside 'hidedAreas')
var /** @type {?} */ item = this.displayedAreas.find(function (a) { return a.comp === comp; });
if (item) {
this.build(resetOrders, resetSizes);
}
};
/**
* @param {?} comp
* @return {?}
*/
SplitComponent.prototype.showArea = /**
* @param {?} comp
* @return {?}
*/
function (comp) {
var /** @type {?} */ area = this.hidedAreas.find(function (a) { return a.comp === comp; });
if (area) {
comp.setStyleVisibleAndDir(comp.visible, this.isDragging, this.direction);
var /** @type {?} */ areas = this.hidedAreas.splice(this.hidedAreas.indexOf(area), 1);
(_a = this.displayedAreas).push.apply(_a, areas);
this.build(true, true);
}
var _a;
};
/**
* @param {?} comp
* @return {?}
*/
SplitComponent.prototype.hideArea = /**
* @param {?} comp
* @return {?}
*/
function (comp) {
var /** @type {?} */ area = this.displayedAreas.find(function (a) { return a.comp === comp; });
if (area) {
comp.setStyleVisibleAndDir(comp.visible, this.isDragging, this.direction);
var /** @type {?} */ areas = this.displayedAreas.splice(this.displayedAreas.indexOf(area), 1);
areas.forEach(function (area) {
area.order = 0;
area.size = 0;
});
(_a = this.hidedAreas).push.apply(_a, areas);
this.build(true, true);
}
var _a;
};
/**
* @return {?}
*/
SplitComponent.prototype.getNbGutters = /**
* @return {?}
*/
function () {
return this.displayedAreas.length - 1;
};
/**
* @param {?} resetOrders
* @param {?} resetSizes
* @return {?}
*/
SplitComponent.prototype.build = /**
* @param {?} resetOrders
* @param {?} resetSizes
* @return {?}
*/
function (resetOrders, resetSizes) {
var _this = this;
this.stopDragging();
// ¤ AREAS ORDER
if (resetOrders === true) {
// If user provided 'order' for each area, use it to sort them.
if (this.displayedAreas.every(function (a) { return a.comp.order !== null; })) {
this.displayedAreas.sort(function (a, b) { return (/** @type {?} */ (a.comp.order)) - (/** @type {?} */ (b.comp.order)); });
}
// Then set real order with multiples of 2, numbers between will be used by gutters.
this.displayedAreas.forEach(function (area, i) {
area.order = i * 2;
area.comp.setStyleOrder(area.order);
});
}
// ¤ AREAS SIZE PERCENT
if (resetSizes === true) {
var /** @type {?} */ totalUserSize = /** @type {?} */ (this.displayedAreas.reduce(function (total, s) { return s.comp.size ? total + s.comp.size : total; }, 0));
// If user provided 'size' for each area and total == 1, use it.
if (this.displayedAreas.every(function (a) { return a.comp.size !== null; }) && totalUserSize > .999 && totalUserSize < 1.001) {
this.displayedAreas.forEach(function (area) {
area.size = /** @type {?} */ (area.comp.size);
});
}
else {
var /** @type {?} */ size_1 = 1 / this.displayedAreas.length;
this.displayedAreas.forEach(function (area) {
area.size = size_1;
});
}
}
// ¤
// If some real area sizes are less than gutterSize,
// set them to zero and dispatch size to others.
var /** @type {?} */ percentToDispatch = 0;
// Get container pixel size
var /** @type {?} */ containerSizePixel = this.getNbGutters() * this.gutterSize;
if (this.direction === 'horizontal') {
containerSizePixel = this.width ? this.width : this.elRef.nativeElement['offsetWidth'];
}
else {
containerSizePixel = this.height ? this.height : this.elRef.nativeElement['offsetHeight'];
}
this.displayedAreas.forEach(function (area) {
if (area.size * containerSizePixel < _this.gutterSize) {
percentToDispatch += area.size;
area.size = 0;
}
});
if (percentToDispatch > 0 && this.displayedAreas.length > 0) {
var /** @type {?} */ nbAreasNotZero = this.displayedAreas.filter(function (a) { return a.size !== 0; }).length;
if (nbAreasNotZero > 0) {
var /** @type {?} */ percentToAdd_1 = percentToDispatch / nbAreasNotZero;
this.displayedAreas.filter(function (a) { return a.size !== 0; }).forEach(function (area) {
area.size += percentToAdd_1;
});
}
else {
this.displayedAreas[this.displayedAreas.length - 1].size = 1;
}
}
this.refreshStyleSizes();
this.cdRef.markForCheck();
};
/**
* @return {?}
*/
SplitComponent.prototype.refreshStyleSizes = /**
* @return {?}
*/
function () {
var _this = this;
var /** @type {?} */ sumGutterSize = this.getNbGutters() * this.gutterSize;
this.displayedAreas.forEach(function (area) {
area.comp.setStyleFlexbasis("calc( " + area.size * 100 + "% - " + area.size * sumGutterSize + "px )", _this.isDragging);
});
};
/**
* @param {?} event
* @param {?} start
* @param {?} areaA
* @param {?} areaB
* @return {?}
*/
SplitComponent.prototype.dragEvent = /**
* @param {?} event
* @param {?} start
* @param {?} areaA
* @param {?} areaB
* @return {?}
*/
function (event, start, areaA, areaB) {
if (!this.isDragging) {
return;
}
var /** @type {?} */ end;
if (event instanceof MouseEvent) {
end = {
x: event.screenX,
y: event.screenY,
};
}
else if (event instanceof TouchEvent) {
end = {
x: event.touches[0].screenX,
y: event.touches[0].screenY,
};
}
else {
return;
}
this.draggingWithoutMove = false;
this.drag(start, end, areaA, areaB);
};
/**
* @param {?} start
* @param {?} end
* @param {?} areaA
* @param {?} areaB
* @return {?}
*/
SplitComponent.prototype.drag = /**
* @param {?} start
* @param {?} end
* @param {?} areaA
* @param {?} areaB
* @return {?}
*/
function (start, end, areaA, areaB) {
// ¤ AREAS SIZE PIXEL
var /** @type {?} */ devicePixelRatio = window.devicePixelRatio || 1;
var /** @type {?} */ offsetPixel = (this.direction === 'horizontal') ? (start.x - end.x) : (start.y - end.y);
offsetPixel = offsetPixel / devicePixelRatio;
if (this.dir === 'rtl') {
offsetPixel = -offsetPixel;
}
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;
}
else if (newSizePixelA < this.gutterSize) {
newSizePixelB += newSizePixelA;
newSizePixelA = 0;
}
else if (newSizePixelB < this.gutterSize) {
newSizePixelA += newSizePixelB;
newSizePixelB = 0;
}
// ¤ AREAS SIZE PERCENT
if (newSizePixelA === 0) {
areaB.size += areaA.size;
areaA.size = 0;
}
else if (newSizePixelB === 0) {
areaA.size += areaB.size;
areaB.size = 0;
}
else {
// NEW_PERCENT = START_PERCENT / START_PIXEL * NEW_PIXEL;
if (this.dragStartValues.sizePercentA === 0) {
areaB.size = this.dragStartValues.sizePercentB / this.dragStartValues.sizePixelB * newSizePixelB;
areaA.size = this.dragStartValues.sizePercentB - areaB.size;
}
else if (this.dragStartValues.sizePercentB === 0) {
areaA.size = this.dragStartValues.sizePercentA / this.dragStartValues.sizePixelA * newSizePixelA;
areaB.size = this.dragStartValues.sizePercentA - areaA.size;
}
else {
areaA.size = this.dragStartValues.sizePercentA / this.dragStartValues.sizePixelA * newSizePixelA;
areaB.size = (this.dragStartValues.sizePercentA + this.dragStartValues.sizePercentB) - areaA.size;
}
}
this.refreshStyleSizes();
this.notify('progress');
};
/**
* @return {?}
*/
SplitComponent.prototype.stopDragging = /**
* @return {?}
*/
function () {
if (this.isDragging === false && this.draggingWithoutMove === false) {
return;
}
this.displayedAreas.forEach(function (area) {
area.comp.unlockEvents();
});
while (this.dragListeners.length > 0) {
var /** @type {?} */ fct = this.dragListeners.pop();
if (fct) {
fct();
}
}
if (this.draggingWithoutMove === true) {
this.notify('click');
}
else {
this.notify('end');
}
this.isDragging = false;
this.draggingWithoutMove = false;
};
SplitComponent.decorators = [
{ type: Component, args: [{
selector: 'split',
changeDetection: 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 Important to keep following rules even if overrided later by 'HostBinding' \n because if [width] & [height] not provided, when build() is executed,\n 'HostBinding' hasn't been applied yet so code:\n this.elRef.nativeElement[\"offsetHeight\"] gives wrong value! \n */\n width: 100%;\n height: 100%; \n }\n\n split-gutter {\n flex-grow: 0;\n flex-shrink: 0;\n background-position: center center;\n background-repeat: no-repeat;\n }\n "],
template: "\n <ng-content></ng-content>\n <ng-template ngFor let-area [ngForOf]=\"displayedAreas\" let-index=\"index\" let-last=\"last\">\n <split-gutter *ngIf=\"last === false\" \n [order]=\"index*2+1\"\n [direction]=\"direction\"\n [useTransition]=\"useTransition\"\n [size]=\"gutterSize\"\n [color]=\"gutterColor\"\n [imageH]=\"gutterImageH\"\n [imageV]=\"gutterImageV\"\n [disabled]=\"disabled\"\n (mousedown)=\"startDragging($event, index*2+1, index+1)\"\n (touchstart)=\"startDragging($event, index*2+1, index+1)\"></split-gutter>\n </ng-template>",
},] },
];
/** @nocollapse */
SplitComponent.ctorParameters = function () { return [
{ type: NgZone },
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: Renderer2 }
]; };
SplitComponent.propDecorators = {
direction: [{ type: Input }],
useTransition: [{ type: Input }],
disabled: [{ type: Input }],
width: [{ type: Input }],
height: [{ type: Input }],
gutterSize: [{ type: Input }],
gutterColor: [{ type: Input }],
gutterImageH: [{ type: Input }],
gutterImageV: [{ type: Input }],
dir: [{ type: Input }],
dragStart: [{ type: Output }],
dragProgress: [{ type: Output }],
dragEnd: [{ type: Output }],
gutterClick: [{ type: Output }],
transitionEnd: [{ type: Output }],
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',] }]
};
return SplitComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var SplitAreaDirective = /** @class */ (function () {
function SplitAreaDirective(ngZone, elRef, renderer, split) {
this.ngZone = ngZone;
this.elRef = elRef;
this.renderer = renderer;
this.split = split;
this._order = null;
this._size = null;
this._minSize = 0;
this._visible = true;
this.transitionListener = null;
this.lockListeners = [];
}
Object.defineProperty(SplitAreaDirective.prototype, "order", {
get: /**
* @return {?}
*/
function () {
return this._order;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
v = Number(v);
this._order = !isNaN(v) ? v : null;
this.split.updateArea(this, true, false);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitAreaDirective.prototype, "size", {
get: /**
* @return {?}
*/
function () {
return this._size;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
v = Number(v);
this._size = (!isNaN(v) && v >= 0 && v <= 100) ? (v / 100) : null;
this.split.updateArea(this, false, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitAreaDirective.prototype, "minSize", {
get: /**
* @return {?}
*/
function () {
return this._minSize;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
v = Number(v);
this._minSize = (!isNaN(v) && v > 0 && v < 100) ? v / 100 : 0;
this.split.updateArea(this, false, true);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitAreaDirective.prototype, "visible", {
get: /**
* @return {?}
*/
function () {
return this._visible;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
v = (typeof (v) === 'boolean') ? v : (v === 'false' ? false : true);
this._visible = v;
if (this.visible) {
this.split.showArea(this);
}
else {
this.split.hideArea(this);
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
SplitAreaDirective.prototype.ngOnInit = /**
* @return {?}
*/
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.ngZone.runOutsideAngular(function () {
_this.transitionListener = _this.renderer.listen(_this.elRef.nativeElement, 'transitionend', function (e) { return _this.onTransitionEnd(e); });
});
};
/**
* @param {?} prop
* @return {?}
*/
SplitAreaDirective.prototype.getSizePixel = /**
* @param {?} prop
* @return {?}
*/
function (prop) {
return this.elRef.nativeElement[prop];
};
/**
* @param {?} isVisible
* @param {?} isDragging
* @param {?} direction
* @return {?}
*/
SplitAreaDirective.prototype.setStyleVisibleAndDir = /**
* @param {?} isVisible
* @param {?} isDragging
* @param {?} direction
* @return {?}
*/
function (isVisible, isDragging, direction) {
if (isVisible === false) {
this.setStyleFlexbasis('0', isDragging);
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%');
this.renderer.removeStyle(this.elRef.nativeElement, 'width');
}
else {
this.renderer.setStyle(this.elRef.nativeElement, 'width', '100%');
this.renderer.removeStyle(this.elRef.nativeElement, 'height');
}
};
/**
* @param {?} value
* @return {?}
*/
SplitAreaDirective.prototype.setStyleOrder = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.renderer.setStyle(this.elRef.nativeElement, 'order', value);
};
/**
* @param {?} value
* @param {?} isDragging
* @return {?}
*/
SplitAreaDirective.prototype.setStyleFlexbasis = /**
* @param {?} value
* @param {?} isDragging
* @return {?}
*/
function (value, isDragging) {
// If component not yet initialized or gutter being dragged, disable transition
if (this.split.isViewInitialized === false || isDragging === true) {
this.setStyleTransition(false);
}
else {
this.setStyleTransition(this.split.useTransition);
}
this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', value);
};
/**
* @param {?} useTransition
* @return {?}
*/
SplitAreaDirective.prototype.setStyleTransition = /**
* @param {?} useTransition
* @return {?}
*/
function (useTransition) {
if (useTransition) {
this.renderer.setStyle(this.elRef.nativeElement, 'transition', "flex-basis 0.3s");
}
else {
this.renderer.removeStyle(this.elRef.nativeElement, 'transition');
}
};
/**
* @param {?} event
* @return {?}
*/
SplitAreaDirective.prototype.onTransitionEnd = /**
* @param {?} event
* @return {?}
*/
function (event) {
// Limit only flex-basis transition to trigger the event
if (event.propertyName === 'flex-basis') {
this.split.notify('transitionEnd');
}
};
/**
* @return {?}
*/
SplitAreaDirective.prototype.lockEvents = /**
* @return {?}
*/
function () {
var _this = this;
this.ngZone.runOutsideAngular(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'
},] },
];
/** @nocollapse */
SplitAreaDirective.ctorParameters = function () { return [
{ type: NgZone },
{ type: ElementRef },
{ type: Renderer2 },
{ type: SplitComponent }
]; };
SplitAreaDirective.propDecorators = {
order: [{ type: Input }],
size: [{ type: Input }],
minSize: [{ type: Input }],
visible: [{ type: Input }]
};
return SplitAreaDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var SplitGutterDirective = /** @class */ (function () {
////
function SplitGutterDirective(elRef, renderer) {
this.elRef = elRef;
this.renderer = renderer;
this._direction = 'vertical';
this._size = 0;
this._color = '';
this._imageH = '';
this._imageV = '';
this._disabled = false;
}
Object.defineProperty(SplitGutterDirective.prototype, "order", {
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this.renderer.setStyle(this.elRef.nativeElement, 'order', v);
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitGutterDirective.prototype, "direction", {
get: /**
* @return {?}
*/
function () {
return this._direction;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._direction = v;
this.refreshStyle();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitGutterDirective.prototype, "useTransition", {
////
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
if (v) {
this.renderer.setStyle(this.elRef.nativeElement, 'transition', "flex-basis 0.3s");
}
else {
this.renderer.removeStyle(this.elRef.nativeElement, 'transition');
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitGutterDirective.prototype, "size", {
get: /**
* @return {?}
*/
function () {
return this._size;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._size = v;
this.refreshStyle();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitGutterDirective.prototype, "color", {
get: /**
* @return {?}
*/
function () {
return this._color;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._color = v;
this.refreshStyle();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitGutterDirective.prototype, "imageH", {
get: /**
* @return {?}
*/
function () {
return this._imageH;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._imageH = v;
this.refreshStyle();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitGutterDirective.prototype, "imageV", {
get: /**
* @return {?}
*/
function () {
return this._imageV;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._imageV = v;
this.refreshStyle();
},
enumerable: true,
configurable: true
});
Object.defineProperty(SplitGutterDirective.prototype, "disabled", {
get: /**
* @return {?}
*/
function () {
return this._disabled;
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._disabled = v;
this.refreshStyle();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
SplitGutterDirective.prototype.refreshStyle = /**
* @return {?}
*/
function () {
this.renderer.setStyle(this.elRef.nativeElement, 'flex-basis', this.size + "px");
// fix safari bug about gutter height when direction is horizontal
this.renderer.setStyle(this.elRef.nativeElement, 'height', (this.direction === 'vertical') ? this.size + "px" : "100%");
this.renderer.setStyle(this.elRef.nativeElement, 'background-color', (this.color !== '') ? this.color : "#eeeeee");
var /** @type {?} */ state = (this.disabled === true) ? 'disabled' : this.direction;
this.renderer.setStyle(this.elRef.nativeElement, 'background-image', this.getImage(state));
this.renderer.setStyle(this.elRef.nativeElement, 'cursor', this.getCursor(state));
};
/**
* @param {?} state
* @return {?}
*/
SplitGutterDirective.prototype.getCursor = /**
* @param {?} state
* @return {?}
*/
function (state) {
switch (state) {
case 'horizontal':
return 'col-resize';
case 'vertical':
return 'row-resize';
case 'disabled':
return 'default';
}
};
/**
* @param {?} state
* @return {?}
*/
SplitGutterDirective.prototype.getImage = /**
* @param {?} state
* @return {?}
*/
function (state) {
switch (state) {
case 'horizontal':
return (this.imageH !== '') ? this.imageH : defaultImageH;
case 'vertical':
return (this.imageV !== '') ? this.imageV : defaultImageV;
case 'disabled':
return '';
}
};
SplitGutterDirective.decorators = [
{ type: Directive, args: [{
selector: 'split-gutter'
},] },
];
/** @nocollapse */
SplitGutterDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Renderer2 }
]; };
SplitGutterDirective.propDecorators = {
order: [{ type: Input }],
direction: [{ type: Input }],
useTransition: [{ type: Input }],
size: [{ type: Input }],
color: [{ type: Input }],
imageH: [{ type: Input }],
imageV: [{ type: Input }],
disabled: [{ type: Input }]
};
return SplitGutterDirective;
}());
var defaultImageH = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==")';
var defaultImageV = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAMAAABl/6zIAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAABRJREFUeAFjYGRkwIMJSeMHlBkOABP7AEGzSuPKAAAAAElFTkSuQmCC")';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var AngularSplitModule = /** @class */ (function () {
function AngularSplitModule() {
}
/**
* @return {?}
*/
AngularSplitModule.forRoot = /**
* @return {?}
*/
function () {
return {
ngModule: AngularSplitModule,
providers: []
};
};
/**
* @return {?}
*/
AngularSplitModule.forChild = /**
* @return {?}
*/
function () {
return {
ngModule: AngularSplitModule,
providers: []
};
};
AngularSplitModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
declarations: [
SplitComponent,
SplitAreaDirective,
SplitGutterDirective,
],
exports: [
SplitComponent,
SplitAreaDirective,
]
},] },
];
return AngularSplitModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Entry point for all public APIs of the package.
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularSplitModule, SplitComponent, SplitAreaDirective, SplitGutterDirective as ɵa };
//# sourceMappingURL=angular-split-ng6.js.map