UNPKG

angular-dual-listbox

Version:
616 lines (607 loc) 31.8 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms')) : typeof define === 'function' && define.amd ? define('angular-dual-listbox', ['exports', '@angular/core', '@angular/common', '@angular/forms'], factory) : (global = global || self, factory(global['angular-dual-listbox'] = {}, global.ng.core, global.ng.common, global.ng.forms)); }(this, (function (exports, core, common, forms) { 'use strict'; var BasicList = /** @class */ (function () { function BasicList(name) { this._name = name; this.last = null; this.picker = ''; this.dragStart = false; this.dragOver = false; // Arrays will contain objects of { _id, _name }. this.pick = []; this.list = []; this.sift = []; } Object.defineProperty(BasicList.prototype, "name", { get: function () { return this._name; }, enumerable: false, configurable: true }); return BasicList; }()); var nextId = 0; var DualListComponent = /** @class */ (function () { function DualListComponent(differs) { this.differs = differs; this.id = "dual-list-" + nextId++; this.key = '_id'; this.display = '_name'; this.height = '100px'; this.filter = false; this.format = DualListComponent.DEFAULT_FORMAT; this.sort = false; this.disabled = false; this.destinationChange = new core.EventEmitter(); this.sorter = function (a, b) { return (a._name < b._name) ? -1 : ((a._name > b._name) ? 1 : 0); }; this.available = new BasicList(DualListComponent.AVAILABLE_LIST_NAME); this.confirmed = new BasicList(DualListComponent.CONFIRMED_LIST_NAME); } DualListComponent.prototype.ngOnChanges = function (changeRecord) { if (changeRecord['filter']) { if (changeRecord['filter'].currentValue === false) { this.clearFilter(this.available); this.clearFilter(this.confirmed); } } if (changeRecord['sort']) { if (changeRecord['sort'].currentValue === true && this.compare === undefined) { this.compare = this.sorter; } else if (changeRecord['sort'].currentValue === false) { this.compare = undefined; } } if (changeRecord['format']) { this.format = changeRecord['format'].currentValue; if (typeof (this.format.direction) === 'undefined') { this.format.direction = DualListComponent.LTR; } if (typeof (this.format.add) === 'undefined') { this.format.add = DualListComponent.DEFAULT_FORMAT.add; } if (typeof (this.format.remove) === 'undefined') { this.format.remove = DualListComponent.DEFAULT_FORMAT.remove; } if (typeof (this.format.all) === 'undefined') { this.format.all = DualListComponent.DEFAULT_FORMAT.all; } if (typeof (this.format.none) === 'undefined') { this.format.none = DualListComponent.DEFAULT_FORMAT.none; } if (typeof (this.format.draggable) === 'undefined') { this.format.draggable = DualListComponent.DEFAULT_FORMAT.draggable; } } if (changeRecord['source']) { this.available = new BasicList(DualListComponent.AVAILABLE_LIST_NAME); this.updatedSource(); this.updatedDestination(); } if (changeRecord['destination']) { this.confirmed = new BasicList(DualListComponent.CONFIRMED_LIST_NAME); this.updatedDestination(); this.updatedSource(); } }; DualListComponent.prototype.ngDoCheck = function () { if (this.source && this.buildAvailable(this.source)) { this.onFilter(this.available); } if (this.destination && this.buildConfirmed(this.destination)) { this.onFilter(this.confirmed); } }; DualListComponent.prototype.buildAvailable = function (source) { var _this = this; var sourceChanges = this.sourceDiffer.diff(source); if (sourceChanges) { sourceChanges.forEachRemovedItem(function (r) { var idx = _this.findItemIndex(_this.available.list, r.item, _this.key); if (idx !== -1) { _this.available.list.splice(idx, 1); } }); sourceChanges.forEachAddedItem(function (r) { // Do not add duplicates even if source has duplicates. if (_this.findItemIndex(_this.available.list, r.item, _this.key) === -1) { _this.available.list.push({ _id: _this.makeId(r.item), _name: _this.makeName(r.item) }); } }); if (this.compare !== undefined) { this.available.list.sort(this.compare); } this.available.sift = this.available.list; return true; } return false; }; DualListComponent.prototype.buildConfirmed = function (destination) { var _this = this; var moved = false; var destChanges = this.destinationDiffer.diff(destination); if (destChanges) { destChanges.forEachRemovedItem(function (r) { var idx = _this.findItemIndex(_this.confirmed.list, r.item, _this.key); if (idx !== -1) { if (!_this.isItemSelected(_this.confirmed.pick, _this.confirmed.list[idx])) { _this.selectItem(_this.confirmed.pick, _this.confirmed.list[idx]); } _this.moveItem(_this.confirmed, _this.available, _this.confirmed.list[idx], false); moved = true; } }); destChanges.forEachAddedItem(function (r) { var idx = _this.findItemIndex(_this.available.list, r.item, _this.key); if (idx !== -1) { if (!_this.isItemSelected(_this.available.pick, _this.available.list[idx])) { _this.selectItem(_this.available.pick, _this.available.list[idx]); } _this.moveItem(_this.available, _this.confirmed, _this.available.list[idx], false); moved = true; } }); if (this.compare !== undefined) { this.confirmed.list.sort(this.compare); } this.confirmed.sift = this.confirmed.list; if (moved) { this.trueUp(); } return true; } return false; }; DualListComponent.prototype.updatedSource = function () { this.available.list.length = 0; this.available.pick.length = 0; if (this.source !== undefined) { this.sourceDiffer = this.differs.find(this.source).create(null); } }; DualListComponent.prototype.updatedDestination = function () { if (this.destination !== undefined) { this.destinationDiffer = this.differs.find(this.destination).create(null); } }; DualListComponent.prototype.direction = function () { return this.format.direction === DualListComponent.LTR; }; DualListComponent.prototype.dragEnd = function (list) { if (list === void 0) { list = null; } if (list) { list.dragStart = false; } else { this.available.dragStart = false; this.confirmed.dragStart = false; } return false; }; DualListComponent.prototype.drag = function (event, item, list) { if (!this.isItemSelected(list.pick, item)) { this.selectItem(list.pick, item); } list.dragStart = true; // Set a custom type to be this dual-list's id. event.dataTransfer.setData(this.id, item['_id']); }; DualListComponent.prototype.allowDrop = function (event, list) { if (event.dataTransfer.types.length && (event.dataTransfer.types[0] === this.id)) { event.preventDefault(); if (!list.dragStart) { list.dragOver = true; } } return false; }; DualListComponent.prototype.dragLeave = function () { this.available.dragOver = false; this.confirmed.dragOver = false; }; DualListComponent.prototype.drop = function (event, list) { if (event.dataTransfer.types.length && (event.dataTransfer.types[0] === this.id)) { event.preventDefault(); this.dragLeave(); this.dragEnd(); if (list === this.available) { this.moveItem(this.available, this.confirmed); } else { this.moveItem(this.confirmed, this.available); } } }; DualListComponent.prototype.trueUp = function () { var _this = this; var changed = false; // Clear removed items. var pos = this.destination.length; while ((pos -= 1) >= 0) { var mv = this.confirmed.list.filter(function (conf) { if (typeof _this.destination[pos] === 'object') { return conf._id === _this.destination[pos][_this.key]; } else { return conf._id === _this.destination[pos]; } }); if (mv.length === 0) { // Not found so remove. this.destination.splice(pos, 1); changed = true; } } var _loop_1 = function (i, len) { var mv = this_1.destination.filter(function (d) { if (typeof d === 'object') { return (d[_this.key] === _this.confirmed.list[i]._id); } else { return (d === _this.confirmed.list[i]._id); } }); if (mv.length === 0) { // Not found so add. mv = this_1.source.filter(function (o) { if (typeof o === 'object') { return (o[_this.key] === _this.confirmed.list[i]._id); } else { return (o === _this.confirmed.list[i]._id); } }); if (mv.length > 0) { this_1.destination.push(mv[0]); changed = true; } } }; var this_1 = this; // Push added items. for (var i = 0, len = this.confirmed.list.length; i < len; i += 1) { _loop_1(i, len); } if (changed) { this.destinationChange.emit(this.destination); } }; DualListComponent.prototype.findItemIndex = function (list, item, key) { if (key === void 0) { key = '_id'; } var idx = -1; function matchObject(e) { if (e._id === item[key]) { idx = list.indexOf(e); return true; } return false; } function match(e) { if (e._id === item) { idx = list.indexOf(e); return true; } return false; } // Assumption is that the arrays do not have duplicates. if (typeof item === 'object') { list.filter(matchObject); } else { list.filter(match); } return idx; }; DualListComponent.prototype.makeUnavailable = function (source, item) { var idx = source.list.indexOf(item); if (idx !== -1) { source.list.splice(idx, 1); } }; DualListComponent.prototype.moveItem = function (source, target, item, trueup) { var _this = this; if (item === void 0) { item = null; } if (trueup === void 0) { trueup = true; } var i = 0; var len = source.pick.length; if (item) { i = source.list.indexOf(item); len = i + 1; } var _loop_2 = function () { // Is the pick still in list? var mv = []; if (item) { var idx = this_2.findItemIndex(source.pick, item); if (idx !== -1) { mv[0] = source.pick[idx]; } } else { mv = source.list.filter(function (src) { return (src._id === source.pick[i]._id); }); } // Should only ever be 1 if (mv.length === 1) { // Add if not already in target. if (target.list.filter(function (trg) { return trg._id === mv[0]._id; }).length === 0) { target.list.push(mv[0]); } this_2.makeUnavailable(source, mv[0]); } }; var this_2 = this; for (; i < len; i += 1) { _loop_2(); } if (this.compare !== undefined) { target.list.sort(this.compare); } source.pick.length = 0; // Update destination if (trueup) { this.trueUp(); } // Delay ever-so-slightly to prevent race condition. setTimeout(function () { _this.onFilter(source); _this.onFilter(target); }, 10); }; DualListComponent.prototype.isItemSelected = function (list, item) { if (list.filter(function (e) { return Object.is(e, item); }).length > 0) { return true; } return false; }; DualListComponent.prototype.shiftClick = function (event, index, source, item) { if (event.shiftKey && source.last && !Object.is(item, source.last)) { var idx = source.sift.indexOf(source.last); if (index > idx) { for (var i = (idx + 1); i < index; i += 1) { this.selectItem(source.pick, source.sift[i]); } } else if (idx !== -1) { for (var i = (index + 1); i < idx; i += 1) { this.selectItem(source.pick, source.sift[i]); } } } source.last = item; }; DualListComponent.prototype.selectItem = function (list, item) { var pk = list.filter(function (e) { return Object.is(e, item); }); if (pk.length > 0) { // Already in list, so deselect. for (var i = 0, len = pk.length; i < len; i += 1) { var idx = list.indexOf(pk[i]); if (idx !== -1) { list.splice(idx, 1); } } } else { list.push(item); } }; DualListComponent.prototype.selectAll = function (source) { source.pick.length = 0; source.pick = source.sift.slice(0); }; DualListComponent.prototype.selectNone = function (source) { source.pick.length = 0; }; DualListComponent.prototype.isAllSelected = function (source) { if (source.list.length === 0 || source.list.length === source.pick.length) { return true; } return false; }; DualListComponent.prototype.isAnySelected = function (source) { if (source.pick.length > 0) { return true; } return false; }; DualListComponent.prototype.unpick = function (source) { for (var i = source.pick.length - 1; i >= 0; i -= 1) { if (source.sift.indexOf(source.pick[i]) === -1) { source.pick.splice(i, 1); } } }; DualListComponent.prototype.clearFilter = function (source) { if (source) { source.picker = ''; this.onFilter(source); } }; DualListComponent.prototype.onFilter = function (source) { var _this = this; if (source.picker.length > 0) { try { var filtered = source.list.filter(function (item) { if (Object.prototype.toString.call(item) === '[object Object]') { if (item._name !== undefined) { // @ts-ignore: remove when d.ts has locale as an argument. return item._name.toLocaleLowerCase(_this.format.locale).indexOf(source.picker.toLocaleLowerCase(_this.format.locale)) !== -1; } else { // @ts-ignore: remove when d.ts has locale as an argument. return JSON.stringify(item).toLocaleLowerCase(_this.format.locale).indexOf(source.picker.toLocaleLowerCase(_this.format.locale)) !== -1; } } else { // @ts-ignore: remove when d.ts has locale as an argument. return item.toLocaleLowerCase(_this.format.locale).indexOf(source.picker.toLocaleLowerCase(_this.format.locale)) !== -1; } }); source.sift = filtered; this.unpick(source); } catch (e) { if (e instanceof RangeError) { this.format.locale = undefined; } source.sift = source.list; } } else { source.sift = source.list; } }; DualListComponent.prototype.makeId = function (item) { if (typeof item === 'object') { return item[this.key]; } else { return item; } }; // Allow for complex names by passing an array of strings. // Example: [display]="[ '_type.substring(0,1)', '_name' ]" DualListComponent.prototype.makeName = function (item, separator) { if (separator === void 0) { separator = '_'; } var display = this.display; function fallback(itm) { switch (Object.prototype.toString.call(itm)) { case '[object Number]': return itm; case '[object String]': return itm; default: if (itm !== undefined) { return itm[display]; } else { return 'undefined'; } } } var str = ''; if (this.display !== undefined) { switch (Object.prototype.toString.call(this.display)) { case '[object Function]': str = this.display(item); break; case '[object Array]': for (var i = 0, len = this.display.length; i < len; i += 1) { if (str.length > 0) { str = str + separator; } if (this.display[i].indexOf('.') === -1) { // Simple, just add to string. str = str + item[this.display[i]]; } else { // Complex, some action needs to be performed var parts = this.display[i].split('.'); var s = item[parts[0]]; if (s) { // Use brute force if (parts[1].indexOf('substring') !== -1) { var nums = (parts[1].substring(parts[1].indexOf('(') + 1, parts[1].indexOf(')'))).split(','); switch (nums.length) { case 1: str = str + s.substring(parseInt(nums[0], 10)); break; case 2: str = str + s.substring(parseInt(nums[0], 10), parseInt(nums[1], 10)); break; default: str = str + s; break; } } else { // method not approved, so just add s. str = str + s; } } } } break; default: str = fallback(item); break; } } else { str = fallback(item); } return str; }; return DualListComponent; }()); DualListComponent.AVAILABLE_LIST_NAME = 'available'; DualListComponent.CONFIRMED_LIST_NAME = 'confirmed'; DualListComponent.LTR = 'left-to-right'; DualListComponent.RTL = 'right-to-left'; DualListComponent.DEFAULT_FORMAT = { add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: DualListComponent.LTR, draggable: true, locale: undefined }; DualListComponent.decorators = [ { type: core.Component, args: [{ selector: 'dual-list', template: "<div class=\"dual-list\">\n\t<div class=\"listbox\" [ngStyle]=\"{ 'order' : direction() ? 1 : 2, 'margin-left' : direction() ? 0 : '10px' }\">\n\t\t<button type=\"button\" name=\"addBtn\" class=\"btn btn-primary btn-block\"\n\t\t\t(click)=\"moveItem(available, confirmed)\" [ngClass]=\"direction() ? 'point-right' : 'point-left'\"\n\t\t\t[disabled]=\"available.pick.length === 0\">{{format.add}}</button>\n\n\t\t<form *ngIf=\"filter\" class=\"filter\">\n\t\t\t<input class=\"form-control\" name=\"filterSource\" [(ngModel)]=\"available.picker\" (ngModelChange)=\"onFilter(available)\">\n\t\t</form>\n\n\t\t<div class=\"record-picker\">\n\t\t\t<ul [ngStyle]=\"{'max-height': height, 'min-height': height}\" [ngClass]=\"{over:available.dragOver}\"\n\t\t\t\t(drop)=\"drop($event, confirmed)\" (dragover)=\"allowDrop($event, available)\" (dragleave)=\"dragLeave()\">\n\t\t\t\t<li *ngFor=\"let item of available.sift; let idx=index;\"\n\t\t\t\t\t(click)=\"disabled ? null : selectItem(available.pick, item); shiftClick($event, idx, available, item)\"\n\t\t\t\t\t[ngClass]=\"{selected: isItemSelected(available.pick, item), disabled: disabled}\"\n\t\t\t\t\t[draggable]=\"!disabled && format.draggable\" (dragstart)=\"drag($event, item, available)\" (dragend)=\"dragEnd(available)\"\n\t\t\t\t><label>{{item._name}}</label></li>\n\t\t\t</ul>\n\t\t</div>\n\n\t\t<div class=\"button-bar\">\n\t\t\t<button type=\"button\" class=\"btn btn-primary pull-left\" (click)=\"selectAll(available)\"\n\t\t\t\t[disabled]=\"disabled || isAllSelected(available)\">{{format.all}}</button>\n\t\t\t<button type=\"button\" class=\"btn btn-default pull-right\" (click)=\"selectNone(available)\"\n\t\t\t\t[disabled]=\"!isAnySelected(available)\">{{format.none}}</button>\n\t\t</div>\n\t</div>\n\n\t<div class=\"listbox\" [ngStyle]=\"{ 'order' : direction() ? 2 : 1, 'margin-left' : direction() ? '10px' : 0 }\">\n\t\t<button type=\"button\" name=\"removeBtn\" class=\"btn btn-primary btn-block\"\n\t\t\t(click)=\"moveItem(confirmed, available)\" [ngClass]=\"direction() ? 'point-left' : 'point-right'\"\n\t\t\t[disabled]=\"confirmed.pick.length === 0\">{{format.remove}}</button>\n\n\t\t<form *ngIf=\"filter\" class=\"filter\">\n\t\t\t<input class=\"form-control\" name=\"filterDestination\" [(ngModel)]=\"confirmed.picker\" (ngModelChange)=\"onFilter(confirmed)\">\n\t\t</form>\n\n\t\t<div class=\"record-picker\">\n\t\t\t<ul [ngStyle]=\"{'max-height': height, 'min-height': height}\" [ngClass]=\"{over:confirmed.dragOver}\"\n\t\t\t\t(drop)=\"drop($event, available)\" (dragover)=\"allowDrop($event, confirmed)\" (dragleave)=\"dragLeave()\">\n\t\t\t\t<li #itmConf *ngFor=\"let item of confirmed.sift; let idx=index;\"\n\t\t\t\t\t(click)=\"disabled ? null : selectItem(confirmed.pick, item); shiftClick($event, idx, confirmed, item)\"\n\t\t\t\t\t[ngClass]=\"{selected: isItemSelected(confirmed.pick, item), disabled: disabled}\"\n\t\t\t\t\t[draggable]=\"!disabled && format.draggable\" (dragstart)=\"drag($event, item, confirmed)\" (dragend)=\"dragEnd(confirmed)\"\n\t\t\t\t><label>{{item._name}}</label></li>\n\t\t\t</ul>\n\t\t</div>\n\n\t\t<div class=\"button-bar\">\n\t\t\t<button type=\"button\" class=\"btn btn-primary pull-left\" (click)=\"selectAll(confirmed)\"\n\t\t\t\t[disabled]=\"disabled || isAllSelected(confirmed)\">{{format.all}}</button>\n\t\t\t<button type=\"button\" class=\"btn btn-default pull-right\" (click)=\"selectNone(confirmed)\"\n\t\t\t\t[disabled]=\"!isAnySelected(confirmed)\">{{format.none}}</button>\n\t\t</div>\n\t</div>\n</div>\n", styles: ["div.record-picker{border:1px solid #ddd;border-radius:8px;cursor:pointer;overflow-x:hidden;overflow-y:auto;position:relative}div.record-picker::-webkit-scrollbar{width:12px}div.record-picker::-webkit-scrollbar-button{height:0;width:0}div.record-picker{scrollbar-3dlight-color:#337ab7;scrollbar-arrow-color:grey;scrollbar-base-color:#337ab7;scrollbar-dark-shadow-color:grey;scrollbar-highlight-color:#337ab7;scrollbar-shadow-color:grey;scrollbar-track-color:#eee}div.record-picker::-webkit-scrollbar-track{background:#eee;border-bottom-right-radius:8px;border-top-right-radius:8px;box-shadow:inset 0 0 3px #dfdfdf}div.record-picker::-webkit-scrollbar-thumb{background:#337ab7;border:thin solid grey;border-bottom-right-radius:8px;border-top-right-radius:8px}div.record-picker::-webkit-scrollbar-thumb:hover{background:#286090}.record-picker ul{margin:0;padding:0 0 1px}.record-picker li{border-bottom:1px solid #ddd;border-top:thin solid #ddd;cursor:pointer;display:block;font-size:.85em;margin-bottom:-1px;min-height:16px;padding:2px 2px 2px 10px;white-space:nowrap}.record-picker li:hover{background-color:#f5f5f5}.record-picker li.selected{background-color:#d9edf7}.record-picker li.selected:hover{background-color:#c4e3f3}.record-picker li.disabled{background-color:inherit;cursor:default;opacity:.5}.record-picker li:first-child{border-top:none;border-top-left-radius:8px;border-top-right-radius:8px}.record-picker li:last-child{border-bottom:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.record-picker label{-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;cursor:pointer;font-size:14px;font-weight:inherit;margin-bottom:-1px;padding:4px;user-select:none}.record-picker ul.over{background-color:#d3d3d3}.dual-list{align-content:flex-start;display:flex;flex-direction:row}.dual-list .listbox{margin:0;width:50%}.dual-list .button-bar{margin-top:8px}.point-right:after{content:\"\\25B6\";padding-left:1em}.point-left:before{content:\"\\25C0\";padding-right:1em}.dual-list .button-bar button{width:47%}button.btn-block{display:block;margin-bottom:8px;width:100%}.filter{margin-bottom:-2.2em}.filter:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M0 64l192 192v192l128-32V256L512 64H0z\"/></svg>');background-position:50%;background-repeat:no-repeat;color:transparent;content:\"o\";font-size:2em;left:calc(100% - 21px);opacity:.2;position:relative;top:-36px;width:40px}"] },] } ]; DualListComponent.ctorParameters = function () { return [ { type: core.IterableDiffers } ]; }; DualListComponent.propDecorators = { id: [{ type: core.Input }], key: [{ type: core.Input }], display: [{ type: core.Input }], height: [{ type: core.Input }], filter: [{ type: core.Input }], format: [{ type: core.Input }], sort: [{ type: core.Input }], compare: [{ type: core.Input }], disabled: [{ type: core.Input }], source: [{ type: core.Input }], destination: [{ type: core.Input }], destinationChange: [{ type: core.Output }] }; var AngularDualListBoxModule = /** @class */ (function () { function AngularDualListBoxModule() { } return AngularDualListBoxModule; }()); AngularDualListBoxModule.decorators = [ { type: core.NgModule, args: [{ imports: [ common.CommonModule, forms.FormsModule ], declarations: [DualListComponent], exports: [DualListComponent] },] } ]; /* * Public API Surface of angular-dual-listbox */ /** * Generated bundle index. Do not edit. */ exports.AngularDualListBoxModule = AngularDualListBoxModule; exports.BasicList = BasicList; exports.DualListComponent = DualListComponent; Object.defineProperty(exports, '__esModule', { value: true }); }))); //# sourceMappingURL=angular-dual-listbox.umd.js.map