UNPKG

@swimlane/ngx-datatable

Version:

ngx-datatable is an Angular table grid component for presenting large and complex data.

1,241 lines (1,223 loc) 260 kB
(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('@swimlane/ngx-datatable', ['exports', '@angular/core', '@angular/common', 'rxjs', 'rxjs/operators'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.swimlane = global.swimlane || {}, global.swimlane['ngx-datatable'] = {}), global.ng.core, global.ng.common, global.rxjs, global.rxjs.operators)); }(this, (function (exports, core, common, rxjs, operators) { 'use strict'; /** * Gets the width of the scrollbar. Nesc for windows * http://stackoverflow.com/a/13382873/888165 */ var ScrollbarHelper = /** @class */ (function () { function ScrollbarHelper(document) { this.document = document; this.width = this.getWidth(); } ScrollbarHelper.prototype.getWidth = function () { var outer = this.document.createElement('div'); outer.style.visibility = 'hidden'; outer.style.width = '100px'; outer.style.msOverflowStyle = 'scrollbar'; this.document.body.appendChild(outer); var widthNoScroll = outer.offsetWidth; outer.style.overflow = 'scroll'; var inner = this.document.createElement('div'); inner.style.width = '100%'; outer.appendChild(inner); var widthWithScroll = inner.offsetWidth; outer.parentNode.removeChild(outer); return widthNoScroll - widthWithScroll; }; return ScrollbarHelper; }()); ScrollbarHelper.decorators = [ { type: core.Injectable } ]; ScrollbarHelper.ctorParameters = function () { return [ { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] } ]; }; /** * Gets the width of the scrollbar. Nesc for windows * http://stackoverflow.com/a/13382873/888165 */ var DimensionsHelper = /** @class */ (function () { function DimensionsHelper() { } DimensionsHelper.prototype.getDimensions = function (element) { return element.getBoundingClientRect(); }; return DimensionsHelper; }()); DimensionsHelper.decorators = [ { type: core.Injectable } ]; /** * service to make DatatableComponent aware of changes to * input bindings of DataTableColumnDirective */ var ColumnChangesService = /** @class */ (function () { function ColumnChangesService() { this.columnInputChanges = new rxjs.Subject(); } Object.defineProperty(ColumnChangesService.prototype, "columnInputChanges$", { get: function () { return this.columnInputChanges.asObservable(); }, enumerable: false, configurable: true }); ColumnChangesService.prototype.onInputChange = function () { this.columnInputChanges.next(); }; return ColumnChangesService; }()); ColumnChangesService.decorators = [ { type: core.Injectable } ]; var DataTableFooterTemplateDirective = /** @class */ (function () { function DataTableFooterTemplateDirective(template) { this.template = template; } return DataTableFooterTemplateDirective; }()); DataTableFooterTemplateDirective.decorators = [ { type: core.Directive, args: [{ selector: '[ngx-datatable-footer-template]' },] } ]; DataTableFooterTemplateDirective.ctorParameters = function () { return [ { type: core.TemplateRef } ]; }; /** * Visibility Observer Directive * * Usage: * * <div * visibilityObserver * (visible)="onVisible($event)"> * </div> * */ var VisibilityDirective = /** @class */ (function () { function VisibilityDirective(element, zone) { this.element = element; this.zone = zone; this.isVisible = false; this.visible = new core.EventEmitter(); } VisibilityDirective.prototype.ngOnInit = function () { this.runCheck(); }; VisibilityDirective.prototype.ngOnDestroy = function () { clearTimeout(this.timeout); }; VisibilityDirective.prototype.onVisibilityChange = function () { var _this = this; // trigger zone recalc for columns this.zone.run(function () { _this.isVisible = true; _this.visible.emit(true); }); }; VisibilityDirective.prototype.runCheck = function () { var _this = this; var check = function () { // https://davidwalsh.name/offsetheight-visibility var _a = _this.element.nativeElement, offsetHeight = _a.offsetHeight, offsetWidth = _a.offsetWidth; if (offsetHeight && offsetWidth) { clearTimeout(_this.timeout); _this.onVisibilityChange(); } else { clearTimeout(_this.timeout); _this.zone.runOutsideAngular(function () { _this.timeout = setTimeout(function () { return check(); }, 50); }); } }; this.timeout = setTimeout(function () { return check(); }); }; return VisibilityDirective; }()); VisibilityDirective.decorators = [ { type: core.Directive, args: [{ selector: '[visibilityObserver]' },] } ]; VisibilityDirective.ctorParameters = function () { return [ { type: core.ElementRef }, { type: core.NgZone } ]; }; VisibilityDirective.propDecorators = { isVisible: [{ type: core.HostBinding, args: ['class.visible',] }], visible: [{ type: core.Output }] }; /** * Draggable Directive for Angular2 * * Inspiration: * https://github.com/AngularClass/angular2-examples/blob/master/rx-draggable/directives/draggable.ts * http://stackoverflow.com/questions/35662530/how-to-implement-drag-and-drop-in-angular2 * */ var DraggableDirective = /** @class */ (function () { function DraggableDirective(element) { this.dragX = true; this.dragY = true; this.dragStart = new core.EventEmitter(); this.dragging = new core.EventEmitter(); this.dragEnd = new core.EventEmitter(); this.isDragging = false; this.element = element.nativeElement; } DraggableDirective.prototype.ngOnChanges = function (changes) { if (changes['dragEventTarget'] && changes['dragEventTarget'].currentValue && this.dragModel.dragging) { this.onMousedown(changes['dragEventTarget'].currentValue); } }; DraggableDirective.prototype.ngOnDestroy = function () { this._destroySubscription(); }; DraggableDirective.prototype.onMouseup = function (event) { if (!this.isDragging) return; this.isDragging = false; this.element.classList.remove('dragging'); if (this.subscription) { this._destroySubscription(); this.dragEnd.emit({ event: event, element: this.element, model: this.dragModel }); } }; DraggableDirective.prototype.onMousedown = function (event) { var _this = this; // we only want to drag the inner header text var isDragElm = event.target.classList.contains('draggable'); if (isDragElm && (this.dragX || this.dragY)) { event.preventDefault(); this.isDragging = true; var mouseDownPos_1 = { x: event.clientX, y: event.clientY }; var mouseup = rxjs.fromEvent(document, 'mouseup'); this.subscription = mouseup.subscribe(function (ev) { return _this.onMouseup(ev); }); var mouseMoveSub = rxjs.fromEvent(document, 'mousemove') .pipe(operators.takeUntil(mouseup)) .subscribe(function (ev) { return _this.move(ev, mouseDownPos_1); }); this.subscription.add(mouseMoveSub); this.dragStart.emit({ event: event, element: this.element, model: this.dragModel }); } }; DraggableDirective.prototype.move = function (event, mouseDownPos) { if (!this.isDragging) return; var x = event.clientX - mouseDownPos.x; var y = event.clientY - mouseDownPos.y; if (this.dragX) this.element.style.left = x + "px"; if (this.dragY) this.element.style.top = y + "px"; this.element.classList.add('dragging'); this.dragging.emit({ event: event, element: this.element, model: this.dragModel }); }; DraggableDirective.prototype._destroySubscription = function () { if (this.subscription) { this.subscription.unsubscribe(); this.subscription = undefined; } }; return DraggableDirective; }()); DraggableDirective.decorators = [ { type: core.Directive, args: [{ selector: '[draggable]' },] } ]; DraggableDirective.ctorParameters = function () { return [ { type: core.ElementRef } ]; }; DraggableDirective.propDecorators = { dragEventTarget: [{ type: core.Input }], dragModel: [{ type: core.Input }], dragX: [{ type: core.Input }], dragY: [{ type: core.Input }], dragStart: [{ type: core.Output }], dragging: [{ type: core.Output }], dragEnd: [{ type: core.Output }] }; var ResizeableDirective = /** @class */ (function () { function ResizeableDirective(element, renderer) { this.renderer = renderer; this.resizeEnabled = true; this.resize = new core.EventEmitter(); this.resizing = false; this.element = element.nativeElement; } ResizeableDirective.prototype.ngAfterViewInit = function () { var renderer2 = this.renderer; this.resizeHandle = renderer2.createElement('span'); if (this.resizeEnabled) { renderer2.addClass(this.resizeHandle, 'resize-handle'); } else { renderer2.addClass(this.resizeHandle, 'resize-handle--not-resizable'); } renderer2.appendChild(this.element, this.resizeHandle); }; ResizeableDirective.prototype.ngOnDestroy = function () { this._destroySubscription(); if (this.renderer.destroyNode) { this.renderer.destroyNode(this.resizeHandle); } else if (this.resizeHandle) { this.renderer.removeChild(this.renderer.parentNode(this.resizeHandle), this.resizeHandle); } }; ResizeableDirective.prototype.onMouseup = function () { this.resizing = false; if (this.subscription && !this.subscription.closed) { this._destroySubscription(); this.resize.emit(this.element.clientWidth); } }; ResizeableDirective.prototype.onMousedown = function (event) { var _this = this; var isHandle = event.target.classList.contains('resize-handle'); var initialWidth = this.element.clientWidth; var mouseDownScreenX = event.screenX; if (isHandle) { event.stopPropagation(); this.resizing = true; var mouseup = rxjs.fromEvent(document, 'mouseup'); this.subscription = mouseup.subscribe(function (ev) { return _this.onMouseup(); }); var mouseMoveSub = rxjs.fromEvent(document, 'mousemove') .pipe(operators.takeUntil(mouseup)) .subscribe(function (e) { return _this.move(e, initialWidth, mouseDownScreenX); }); this.subscription.add(mouseMoveSub); } }; ResizeableDirective.prototype.move = function (event, initialWidth, mouseDownScreenX) { var movementX = event.screenX - mouseDownScreenX; var newWidth = initialWidth + movementX; var overMinWidth = !this.minWidth || newWidth >= this.minWidth; var underMaxWidth = !this.maxWidth || newWidth <= this.maxWidth; if (overMinWidth && underMaxWidth) { this.element.style.width = newWidth + "px"; } }; ResizeableDirective.prototype._destroySubscription = function () { if (this.subscription) { this.subscription.unsubscribe(); this.subscription = undefined; } }; return ResizeableDirective; }()); ResizeableDirective.decorators = [ { type: core.Directive, args: [{ selector: '[resizeable]', host: { '[class.resizeable]': 'resizeEnabled' } },] } ]; ResizeableDirective.ctorParameters = function () { return [ { type: core.ElementRef }, { type: core.Renderer2 } ]; }; ResizeableDirective.propDecorators = { resizeEnabled: [{ type: core.Input }], minWidth: [{ type: core.Input }], maxWidth: [{ type: core.Input }], resize: [{ type: core.Output }], onMousedown: [{ type: core.HostListener, args: ['mousedown', ['$event'],] }] }; /*! ***************************************************************************** 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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; return extendStatics(d, b); }; function __extends(d, b) { if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); 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 }; } } var __createBinding = Object.create ? (function (o, m, k, k2) { if (k2 === undefined) k2 = k; Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } }); }) : (function (o, m, k, k2) { if (k2 === undefined) k2 = k; o[k2] = m[k]; }); function __exportStar(m, o) { for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, 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; } /** @deprecated */ function __spread() { for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i])); return ar; } /** @deprecated */ 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 __spreadArray(to, from, pack) { if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { if (ar || !(i in from)) { if (!ar) ar = Array.prototype.slice.call(from, 0, i); ar[i] = from[i]; } } return to.concat(ar || from); } 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; } ; var __setModuleDefault = Object.create ? (function (o, v) { Object.defineProperty(o, "default", { enumerable: true, value: v }); }) : function (o, v) { o["default"] = v; }; function __importStar(mod) { if (mod && mod.__esModule) return mod; var result = {}; if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); __setModuleDefault(result, mod); return result; } function __importDefault(mod) { return (mod && mod.__esModule) ? mod : { default: mod }; } function __classPrivateFieldGet(receiver, state, kind, f) { if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); } function __classPrivateFieldSet(receiver, state, value, kind, f) { if (kind === "m") throw new TypeError("Private method is not writable"); if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter"); if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it"); return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value; } var OrderableDirective = /** @class */ (function () { function OrderableDirective(differs, document) { this.document = document; this.reorder = new core.EventEmitter(); this.targetChanged = new core.EventEmitter(); this.differ = differs.find({}).create(); } OrderableDirective.prototype.ngAfterContentInit = function () { // HACK: Investigate Better Way this.updateSubscriptions(); this.draggables.changes.subscribe(this.updateSubscriptions.bind(this)); }; OrderableDirective.prototype.ngOnDestroy = function () { this.draggables.forEach(function (d) { d.dragStart.unsubscribe(); d.dragging.unsubscribe(); d.dragEnd.unsubscribe(); }); }; OrderableDirective.prototype.updateSubscriptions = function () { var _this = this; var diffs = this.differ.diff(this.createMapDiffs()); if (diffs) { var subscribe = function (_a) { var currentValue = _a.currentValue, previousValue = _a.previousValue; unsubscribe_1({ previousValue: previousValue }); if (currentValue) { currentValue.dragStart.subscribe(_this.onDragStart.bind(_this)); currentValue.dragging.subscribe(_this.onDragging.bind(_this)); currentValue.dragEnd.subscribe(_this.onDragEnd.bind(_this)); } }; var unsubscribe_1 = function (_a) { var previousValue = _a.previousValue; if (previousValue) { previousValue.dragStart.unsubscribe(); previousValue.dragging.unsubscribe(); previousValue.dragEnd.unsubscribe(); } }; diffs.forEachAddedItem(subscribe); // diffs.forEachChangedItem(subscribe.bind(this)); diffs.forEachRemovedItem(unsubscribe_1); } }; OrderableDirective.prototype.onDragStart = function () { var e_1, _a; this.positions = {}; var i = 0; try { for (var _b = __values(this.draggables.toArray()), _c = _b.next(); !_c.done; _c = _b.next()) { var dragger = _c.value; var elm = dragger.element; var left = parseInt(elm.offsetLeft.toString(), 0); this.positions[dragger.dragModel.prop] = { left: left, right: left + parseInt(elm.offsetWidth.toString(), 0), index: i++, element: elm }; } } catch (e_1_1) { e_1 = { error: e_1_1 }; } finally { try { if (_c && !_c.done && (_a = _b.return)) _a.call(_b); } finally { if (e_1) throw e_1.error; } } }; OrderableDirective.prototype.onDragging = function (_a) { var element = _a.element, model = _a.model, event = _a.event; var prevPos = this.positions[model.prop]; var target = this.isTarget(model, event); if (target) { if (this.lastDraggingIndex !== target.i) { this.targetChanged.emit({ prevIndex: this.lastDraggingIndex, newIndex: target.i, initialIndex: prevPos.index }); this.lastDraggingIndex = target.i; } } else if (this.lastDraggingIndex !== prevPos.index) { this.targetChanged.emit({ prevIndex: this.lastDraggingIndex, initialIndex: prevPos.index }); this.lastDraggingIndex = prevPos.index; } }; OrderableDirective.prototype.onDragEnd = function (_a) { var element = _a.element, model = _a.model, event = _a.event; var prevPos = this.positions[model.prop]; var target = this.isTarget(model, event); if (target) { this.reorder.emit({ prevIndex: prevPos.index, newIndex: target.i, model: model }); } this.lastDraggingIndex = undefined; element.style.left = 'auto'; }; OrderableDirective.prototype.isTarget = function (model, event) { var i = 0; var x = event.x || event.clientX; var y = event.y || event.clientY; var targets = this.document.elementsFromPoint(x, y); var _loop_1 = function (prop) { // current column position which throws event. var pos = this_1.positions[prop]; // since we drag the inner span, we need to find it in the elements at the cursor if (model.prop !== prop && targets.find(function (el) { return el === pos.element; })) { return { value: { pos: pos, i: i } }; } i++; }; var this_1 = this; for (var prop in this.positions) { var state_1 = _loop_1(prop); if (typeof state_1 === "object") return state_1.value; } }; OrderableDirective.prototype.createMapDiffs = function () { return this.draggables.toArray().reduce(function (acc, curr) { acc[curr.dragModel.$$id] = curr; return acc; }, {}); }; return OrderableDirective; }()); OrderableDirective.decorators = [ { type: core.Directive, args: [{ selector: '[orderable]' },] } ]; OrderableDirective.ctorParameters = function () { return [ { type: core.KeyValueDiffers }, { type: undefined, decorators: [{ type: core.Inject, args: [common.DOCUMENT,] }] } ]; }; OrderableDirective.propDecorators = { reorder: [{ type: core.Output }], targetChanged: [{ type: core.Output }], draggables: [{ type: core.ContentChildren, args: [DraggableDirective, { descendants: true },] }] }; var LongPressDirective = /** @class */ (function () { function LongPressDirective() { this.pressEnabled = true; this.duration = 500; this.longPressStart = new core.EventEmitter(); this.longPressing = new core.EventEmitter(); this.longPressEnd = new core.EventEmitter(); this.mouseX = 0; this.mouseY = 0; } Object.defineProperty(LongPressDirective.prototype, "press", { get: function () { return this.pressing; }, enumerable: false, configurable: true }); Object.defineProperty(LongPressDirective.prototype, "isLongPress", { get: function () { return this.isLongPressing; }, enumerable: false, configurable: true }); LongPressDirective.prototype.onMouseDown = function (event) { var _this = this; // don't do right/middle clicks if (event.which !== 1 || !this.pressEnabled) return; // don't start drag if its on resize handle var target = event.target; if (target.classList.contains('resize-handle')) return; this.mouseX = event.clientX; this.mouseY = event.clientY; this.pressing = true; this.isLongPressing = false; var mouseup = rxjs.fromEvent(document, 'mouseup'); this.subscription = mouseup.subscribe(function (ev) { return _this.onMouseup(); }); this.timeout = setTimeout(function () { _this.isLongPressing = true; _this.longPressStart.emit({ event: event, model: _this.pressModel }); _this.subscription.add(rxjs.fromEvent(document, 'mousemove') .pipe(operators.takeUntil(mouseup)) .subscribe(function (mouseEvent) { return _this.onMouseMove(mouseEvent); })); _this.loop(event); }, this.duration); this.loop(event); }; LongPressDirective.prototype.onMouseMove = function (event) { if (this.pressing && !this.isLongPressing) { var xThres = Math.abs(event.clientX - this.mouseX) > 10; var yThres = Math.abs(event.clientY - this.mouseY) > 10; if (xThres || yThres) { this.endPress(); } } }; LongPressDirective.prototype.loop = function (event) { var _this = this; if (this.isLongPressing) { this.timeout = setTimeout(function () { _this.longPressing.emit({ event: event, model: _this.pressModel }); _this.loop(event); }, 50); } }; LongPressDirective.prototype.endPress = function () { clearTimeout(this.timeout); this.isLongPressing = false; this.pressing = false; this._destroySubscription(); this.longPressEnd.emit({ model: this.pressModel }); }; LongPressDirective.prototype.onMouseup = function () { this.endPress(); }; LongPressDirective.prototype.ngOnDestroy = function () { this._destroySubscription(); }; LongPressDirective.prototype._destroySubscription = function () { if (this.subscription) { this.subscription.unsubscribe(); this.subscription = undefined; } }; return LongPressDirective; }()); LongPressDirective.decorators = [ { type: core.Directive, args: [{ selector: '[long-press]' },] } ]; LongPressDirective.propDecorators = { pressEnabled: [{ type: core.Input }], pressModel: [{ type: core.Input }], duration: [{ type: core.Input }], longPressStart: [{ type: core.Output }], longPressing: [{ type: core.Output }], longPressEnd: [{ type: core.Output }], press: [{ type: core.HostBinding, args: ['class.press',] }], isLongPress: [{ type: core.HostBinding, args: ['class.longpress',] }], onMouseDown: [{ type: core.HostListener, args: ['mousedown', ['$event'],] }] }; var ScrollerComponent = /** @class */ (function () { function ScrollerComponent(ngZone, element, renderer) { this.ngZone = ngZone; this.renderer = renderer; this.scrollbarV = false; this.scrollbarH = false; this.scroll = new core.EventEmitter(); this.scrollYPos = 0; this.scrollXPos = 0; this.prevScrollYPos = 0; this.prevScrollXPos = 0; this._scrollEventListener = null; this.element = element.nativeElement; } ScrollerComponent.prototype.ngOnInit = function () { // manual bind so we don't always listen if (this.scrollbarV || this.scrollbarH) { var renderer = this.renderer; this.parentElement = renderer.parentNode(renderer.parentNode(this.element)); this._scrollEventListener = this.onScrolled.bind(this); this.parentElement.addEventListener('scroll', this._scrollEventListener); } }; ScrollerComponent.prototype.ngOnDestroy = function () { if (this._scrollEventListener) { this.parentElement.removeEventListener('scroll', this._scrollEventListener); this._scrollEventListener = null; } }; ScrollerComponent.prototype.setOffset = function (offsetY) { if (this.parentElement) { this.parentElement.scrollTop = offsetY; } }; ScrollerComponent.prototype.onScrolled = function (event) { var _this = this; var dom = event.currentTarget; requestAnimationFrame(function () { _this.scrollYPos = dom.scrollTop; _this.scrollXPos = dom.scrollLeft; _this.updateOffset(); }); }; ScrollerComponent.prototype.updateOffset = function () { var direction; if (this.scrollYPos < this.prevScrollYPos) { direction = 'down'; } else if (this.scrollYPos > this.prevScrollYPos) { direction = 'up'; } this.scroll.emit({ direction: direction, scrollYPos: this.scrollYPos, scrollXPos: this.scrollXPos }); this.prevScrollYPos = this.scrollYPos; this.prevScrollXPos = this.scrollXPos; }; return ScrollerComponent; }()); ScrollerComponent.decorators = [ { type: core.Component, args: [{ selector: 'datatable-scroller', template: " <ng-content></ng-content> ", host: { class: 'datatable-scroll' }, changeDetection: core.ChangeDetectionStrategy.OnPush },] } ]; ScrollerComponent.ctorParameters = function () { return [ { type: core.NgZone }, { type: core.ElementRef }, { type: core.Renderer2 } ]; }; ScrollerComponent.propDecorators = { scrollbarV: [{ type: core.Input }], scrollbarH: [{ type: core.Input }], scrollHeight: [{ type: core.HostBinding, args: ['style.height.px',] }, { type: core.Input }], scrollWidth: [{ type: core.HostBinding, args: ['style.width.px',] }, { type: core.Input }], scroll: [{ type: core.Output }] }; var DatatableGroupHeaderTemplateDirective = /** @class */ (function () { function DatatableGroupHeaderTemplateDirective(template) { this.template = template; } return DatatableGroupHeaderTemplateDirective; }()); DatatableGroupHeaderTemplateDirective.decorators = [ { type: core.Directive, args: [{ selector: '[ngx-datatable-group-header-template]' },] } ]; DatatableGroupHeaderTemplateDirective.ctorParameters = function () { return [ { type: core.TemplateRef } ]; }; var DatatableGroupHeaderDirective = /** @class */ (function () { function DatatableGroupHeaderDirective() { /** * Row height is required when virtual scroll is enabled. */ this.rowHeight = 0; /** * Track toggling of group visibility */ this.toggle = new core.EventEmitter(); } Object.defineProperty(DatatableGroupHeaderDirective.prototype, "template", { get: function () { return this._templateInput || this._templateQuery; }, enumerable: false, configurable: true }); /** * Toggle the expansion of a group */ DatatableGroupHeaderDirective.prototype.toggleExpandGroup = function (group) { this.toggle.emit({ type: 'group', value: group }); }; /** * Expand all groups */ DatatableGroupHeaderDirective.prototype.expandAllGroups = function () { this.toggle.emit({ type: 'all', value: true }); }; /** * Collapse all groups */ DatatableGroupHeaderDirective.prototype.collapseAllGroups = function () { this.toggle.emit({ type: 'all', value: false }); }; return DatatableGroupHeaderDirective; }()); DatatableGroupHeaderDirective.decorators = [ { type: core.Directive, args: [{ selector: 'ngx-datatable-group-header' },] } ]; DatatableGroupHeaderDirective.propDecorators = { rowHeight: [{ type: core.Input }], _templateInput: [{ type: core.Input, args: ['template',] }], _templateQuery: [{ type: core.ContentChild, args: [DatatableGroupHeaderTemplateDirective, { read: core.TemplateRef, static: true },] }], toggle: [{ type: core.Output }] }; /** * Always returns the empty string '' */ function emptyStringGetter() { return ''; } /** * Returns the appropriate getter function for this kind of prop. * If prop == null, returns the emptyStringGetter. */ function getterForProp(prop) { if (prop == null) { return emptyStringGetter; } if (typeof prop === 'number') { return numericIndexGetter; } else { // deep or simple if (prop.indexOf('.') !== -1) { return deepValueGetter; } else { return shallowValueGetter; } } } /** * Returns the value at this numeric index. * @param row array of values * @param index numeric index * @returns any or '' if invalid index */ function numericIndexGetter(row, index) { if (row == null) { return ''; } // mimic behavior of deepValueGetter if (!row || index == null) { return row; } var value = row[index]; if (value == null) { return ''; } return value; } /** * Returns the value of a field. * (more efficient than deepValueGetter) * @param obj object containing the field * @param fieldName field name string */ function shallowValueGetter(obj, fieldName) { if (obj == null) { return ''; } if (!obj || !fieldName) { return obj; } var value = obj[fieldName]; if (value == null) { return ''; } return value; } /** * Returns a deep object given a string. zoo['animal.type'] */ function deepValueGetter(obj, path) { if (obj == null) { return ''; } if (!obj || !path) { return obj; } // check if path matches a root-level field // { "a.b.c": 123 } var current = obj[path]; if (current !== undefined) { return current; } current = obj; var split = path.split('.'); if (split.length) { for (var i = 0; i < split.length; i++) { current = current[split[i]]; // if found undefined, return empty string if (current === undefined || current === null) { return ''; } } } return current; } function optionalGetterForProp(prop) { return prop && (function (row) { return getterForProp(prop)(row, prop); }); } /** * This functions rearrange items by their parents * Also sets the level value to each of the items * * Note: Expecting each item has a property called parentId * Note: This algorithm will fail if a list has two or more items with same ID * NOTE: This algorithm will fail if there is a deadlock of relationship * * For example, * * Input * * id -> parent * 1 -> 0 * 2 -> 0 * 3 -> 1 * 4 -> 1 * 5 -> 2 * 7 -> 8 * 6 -> 3 * * * Output * id -> level * 1 -> 0 * --3 -> 1 * ----6 -> 2 * --4 -> 1 * 2 -> 0 * --5 -> 1 * 7 -> 8 * * * @param rows * */ function groupRowsByParents(rows, from, to) { if (from && to) { var nodeById = {}; var l = rows.length; var node = null; nodeById[0] = new TreeNode(); // that's the root node var uniqIDs = rows.reduce(function (arr, item) { var toValue = to(item); if (arr.indexOf(toValue) === -1) { arr.push(toValue); } return arr; }, []); for (var i = 0; i < l; i++) { // make TreeNode objects for each item nodeById[to(rows[i])] = new TreeNode(rows[i]); } for (var i = 0; i < l; i++) { // link all TreeNode objects node = nodeById[to(rows[i])]; var parent = 0; var fromValue = from(node.row); if (!!fromValue && uniqIDs.indexOf(fromValue) > -1) { parent = fromValue;