import { EventEmitter, Component, IterableDiffers, Input, Output, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class BasicList { /** * @param {?} name */ constructor(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 = []; } /** * @return {?} */ get name() { return this._name; } } /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** @type {?} */ var nextId = 0; class DualListComponent { /** * @param {?} differs */ constructor(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 EventEmitter(); this.sorter = (/** * @param {?} a * @param {?} b * @return {?} */ (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); } /** * @param {?} changeRecord * @return {?} */ ngOnChanges(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(); } } /** * @return {?} */ ngDoCheck() { if (this.source && this.buildAvailable(this.source)) { this.onFilter(this.available); } if (this.destination && this.buildConfirmed(this.destination)) { this.onFilter(this.confirmed); } } /** * @param {?} source * @return {?} */ buildAvailable(source) { /** @type {?} */ const sourceChanges = this.sourceDiffer.diff(source); if (sourceChanges) { sourceChanges.forEachRemovedItem((/** * @param {?} r * @return {?} */ (r) => { /** @type {?} */ const idx = this.findItemIndex(this.available.list, r.item, this.key); if (idx !== -1) { this.available.list.splice(idx, 1); } })); sourceChanges.forEachAddedItem((/** * @param {?} r * @return {?} */ (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; } /** * @param {?} destination * @return {?} */ buildConfirmed(destination) { /** @type {?} */ let moved = false; /** @type {?} */ const destChanges = this.destinationDiffer.diff(destination); if (destChanges) { destChanges.forEachRemovedItem((/** * @param {?} r * @return {?} */ (r) => { /** @type {?} */ const 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((/** * @param {?} r * @return {?} */ (r) => { /** @type {?} */ const 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; } /** * @return {?} */ updatedSource() { this.available.list.length = 0; this.available.pick.length = 0; if (this.source !== undefined) { this.sourceDiffer = this.differs.find(this.source).create(null); } } /** * @return {?} */ updatedDestination() { if (this.destination !== undefined) { this.destinationDiffer = this.differs.find(this.destination).create(null); } } /** * @return {?} */ direction() { return this.format.direction === DualListComponent.LTR; } /** * @param {?=} list * @return {?} */ dragEnd(list = null) { if (list) { list.dragStart = false; } else { this.available.dragStart = false; this.confirmed.dragStart = false; } return false; } /** * @param {?} event * @param {?} item * @param {?} list * @return {?} */ drag(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']); } /** * @param {?} event * @param {?} list * @return {?} */ allowDrop(event, list) { if (event.dataTransfer.types.length && (event.dataTransfer.types[0] === this.id)) { event.preventDefault(); if (!list.dragStart) { list.dragOver = true; } } return false; } /** * @return {?} */ dragLeave() { this.available.dragOver = false; this.confirmed.dragOver = false; } /** * @param {?} event * @param {?} list * @return {?} */ drop(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); } } } /** * @private * @return {?} */ trueUp() { /** @type {?} */ let changed = false; // Clear removed items. /** @type {?} */ let pos = this.destination.length; while ((pos -= 1) >= 0) { /** @type {?} */ const mv = this.confirmed.list.filter((/** * @param {?} conf * @return {?} */ 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; } } // Push added items. for (let i = 0, len = this.confirmed.list.length; i < len; i += 1) { /** @type {?} */ let mv = this.destination.filter((/** * @param {?} d * @return {?} */ (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.source.filter((/** * @param {?} o * @return {?} */ (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.destination.push(mv[0]); changed = true; } } } if (changed) { this.destinationChange.emit(this.destination); } } /** * @param {?} list * @param {?} item * @param {?=} key * @return {?} */ findItemIndex(list, item, key = '_id') { /** @type {?} */ let idx = -1; /** * @param {?} e * @return {?} */ function matchObject(e) { if (e._id === item[key]) { idx = list.indexOf(e); return true; } return false; } /** * @param {?} e * @return {?} */ 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; } /** * @private * @param {?} source * @param {?} item * @return {?} */ makeUnavailable(source, item) { /** @type {?} */ const idx = source.list.indexOf(item); if (idx !== -1) { source.list.splice(idx, 1); } } /** * @param {?} source * @param {?} target * @param {?=} item * @param {?=} trueup * @return {?} */ moveItem(source, target, item = null, trueup = true) { /** @type {?} */ let i = 0; /** @type {?} */ let len = source.pick.length; if (item) { i = source.list.indexOf(item); len = i + 1; } for (; i < len; i += 1) { // Is the pick still in list? /** @type {?} */ let mv = []; if (item) { /** @type {?} */ const idx = this.findItemIndex(source.pick, item); if (idx !== -1) { mv[0] = source.pick[idx]; } } else { mv = source.list.filter((/** * @param {?} src * @return {?} */ 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((/** * @param {?} trg * @return {?} */ trg => trg._id === mv[0]._id)).length === 0) { target.list.push(mv[0]); } this.makeUnavailable(source, mv[0]); } } 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((/** * @return {?} */ () => { this.onFilter(source); this.onFilter(target); }), 10); } /** * @param {?} list * @param {?} item * @return {?} */ isItemSelected(list, item) { if (list.filter((/** * @param {?} e * @return {?} */ e => Object.is(e, item))).length > 0) { return true; } return false; } /** * @param {?} event * @param {?} index * @param {?} source * @param {?} item * @return {?} */ shiftClick(event, index, source, item) { if (event.shiftKey && source.last && !Object.is(item, source.last)) { /** @type {?} */ const idx = source.sift.indexOf(source.last); if (index > idx) { for (let i = (idx + 1); i < index; i += 1) { this.selectItem(source.pick, source.sift[i]); } } else if (idx !== -1) { for (let i = (index + 1); i < idx; i += 1) { this.selectItem(source.pick, source.sift[i]); } } } source.last = item; } /** * @param {?} list * @param {?} item * @return {?} */ selectItem(list, item) { /** @type {?} */ const pk = list.filter((/** * @param {?} e * @return {?} */ (e) => { return Object.is(e, item); })); if (pk.length > 0) { // Already in list, so deselect. for (let i = 0, len = pk.length; i < len; i += 1) { /** @type {?} */ const idx = list.indexOf(pk[i]); if (idx !== -1) { list.splice(idx, 1); } } } else { list.push(item); } } /** * @param {?} source * @return {?} */ selectAll(source) { source.pick.length = 0; source.pick = source.sift.slice(0); } /** * @param {?} source * @return {?} */ selectNone(source) { source.pick.length = 0; } /** * @param {?} source * @return {?} */ isAllSelected(source) { if (source.list.length === 0 || source.list.length === source.pick.length) { return true; } return false; } /** * @param {?} source * @return {?} */ isAnySelected(source) { if (source.pick.length > 0) { return true; } return false; } /** * @private * @param {?} source * @return {?} */ unpick(source) { for (let i = source.pick.length - 1; i >= 0; i -= 1) { if (source.sift.indexOf(source.pick[i]) === -1) { source.pick.splice(i, 1); } } } /** * @param {?} source * @return {?} */ clearFilter(source) { if (source) { source.picker = ''; this.onFilter(source); } } /** * @param {?} source * @return {?} */ onFilter(source) { if (source.picker.length > 0) { try { /** @type {?} */ const filtered = source.list.filter((/** * @param {?} item * @return {?} */ (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; } } /** * @private * @param {?} item * @return {?} */ makeId(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' ]" /** * @protected * @param {?} item * @param {?=} separator * @return {?} */ makeName(item, separator = '_') { /** @type {?} */ const display = this.display; /** * @param {?} itm * @return {?} */ 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'; } } } /** @type {?} */ let str = ''; if (this.display !== undefined) { switch (Object.prototype.toString.call(this.display)) { case '[object Function]': str = this.display(item); break; case '[object Array]': for (let 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 /** @type {?} */ const parts = this.display[i].split('.'); /** @type {?} */ const s = item[parts[0]]; if (s) { // Use brute force if (parts[1].indexOf('substring') !== -1) { /** @type {?} */ const 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; } } 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: Component, args: [{ selector: 'dual-list', template: "