@devmn/multi-select
Version:
Angular multi select component that provides two lists controls side-by-side that allows items in one list to be selected and moved* to the other list via drag-and-drop and/or a button-based interface.
1,127 lines (1,120 loc) • 41.4 kB
JavaScript
import { EventEmitter, Component, IterableDiffers, Input, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
/**
* @fileoverview added by tsickle
* Generated from: lib/multi-select.model.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var BasicSelectData = /** @class */ (function () {
function BasicSelectData(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(BasicSelectData.prototype, "name", {
get: /**
* @return {?}
*/
function () {
return this._name;
},
enumerable: true,
configurable: true
});
return BasicSelectData;
}());
if (false) {
/**
* Name of the list
* @type {?}
* @private
*/
BasicSelectData.prototype._name;
/**
* Last element touched
* @type {?}
*/
BasicSelectData.prototype.last;
/**
* text filter
* @type {?}
*/
BasicSelectData.prototype.picker;
/** @type {?} */
BasicSelectData.prototype.dragStart;
/** @type {?} */
BasicSelectData.prototype.dragOver;
/** @type {?} */
BasicSelectData.prototype.pick;
/** @type {?} */
BasicSelectData.prototype.list;
/** @type {?} */
BasicSelectData.prototype.sift;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/multi-select.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var nextId = 0;
var MultiSelectComponent = /** @class */ (function () {
function MultiSelectComponent(differs) {
this.differs = differs;
this.id = "dual-list-" + nextId++;
this.key = '_id';
this.display = '_name';
this.height = '100px';
this.filter = false;
this.format = MultiSelectComponent.DEFAULT_FORMAT;
this.sort = false;
this.disabled = false;
this.loading = false;
this.emptySourceMessage = 'Empty';
this.destinationChange = new EventEmitter();
this.sorter = (/**
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) {
return a._name < b._name ? -1 : a._name > b._name ? 1 : 0;
});
this.available = new BasicSelectData(MultiSelectComponent.AVAILABLE_LIST_NAME);
this.confirmed = new BasicSelectData(MultiSelectComponent.CONFIRMED_LIST_NAME);
this.sourceLoading = false;
}
/**
* @param {?} changeRecord
* @return {?}
*/
MultiSelectComponent.prototype.ngOnChanges = /**
* @param {?} changeRecord
* @return {?}
*/
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 = MultiSelectComponent.LTR;
}
if (typeof this.format.add === 'undefined') {
this.format.add = MultiSelectComponent.DEFAULT_FORMAT.add;
}
if (typeof this.format.remove === 'undefined') {
this.format.remove = MultiSelectComponent.DEFAULT_FORMAT.remove;
}
if (typeof this.format.all === 'undefined') {
this.format.all = MultiSelectComponent.DEFAULT_FORMAT.all;
}
if (typeof this.format.none === 'undefined') {
this.format.none = MultiSelectComponent.DEFAULT_FORMAT.none;
}
if (typeof this.format.draggable === 'undefined') {
this.format.draggable = MultiSelectComponent.DEFAULT_FORMAT.draggable;
}
}
if (changeRecord['source']) {
this.available = new BasicSelectData(MultiSelectComponent.AVAILABLE_LIST_NAME);
this.updatedSource();
this.updatedDestination();
}
if (changeRecord['destination']) {
this.confirmed = new BasicSelectData(MultiSelectComponent.CONFIRMED_LIST_NAME);
this.updatedDestination();
this.updatedSource();
}
};
/**
* @return {?}
*/
MultiSelectComponent.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
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 {?}
*/
MultiSelectComponent.prototype.buildAvailable = /**
* @param {?} source
* @return {?}
*/
function (source) {
var _this = this;
/** @type {?} */
var sourceChanges = this.sourceDiffer.diff(source);
if (sourceChanges) {
sourceChanges.forEachRemovedItem((/**
* @param {?} r
* @return {?}
*/
function (r) {
/** @type {?} */
var idx = _this.findItemIndex(_this.available.list, r.item, _this.key);
if (idx !== -1) {
_this.available.list.splice(idx, 1);
}
}));
sourceChanges.forEachAddedItem((/**
* @param {?} r
* @return {?}
*/
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.sourceLoading = false;
this.available.sift = this.available.list;
return true;
}
return false;
};
/**
* @param {?} destination
* @return {?}
*/
MultiSelectComponent.prototype.buildConfirmed = /**
* @param {?} destination
* @return {?}
*/
function (destination) {
var _this = this;
/** @type {?} */
var moved = false;
/** @type {?} */
var destChanges = this.destinationDiffer.diff(destination);
if (destChanges) {
destChanges.forEachRemovedItem((/**
* @param {?} r
* @return {?}
*/
function (r) {
/** @type {?} */
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((/**
* @param {?} r
* @return {?}
*/
function (r) {
/** @type {?} */
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;
this.destinationLoading = false;
if (moved) {
this.trueUp();
}
return true;
}
return false;
};
/**
* @return {?}
*/
MultiSelectComponent.prototype.updatedSource = /**
* @return {?}
*/
function () {
this.available.list.length = 0;
this.available.pick.length = 0;
if (this.source !== undefined) {
this.sourceDiffer = this.differs.find(this.source).create(null);
}
};
/**
* @return {?}
*/
MultiSelectComponent.prototype.updatedDestination = /**
* @return {?}
*/
function () {
if (this.destination !== undefined) {
this.destinationDiffer = this.differs.find(this.destination).create(null);
}
};
/**
* @return {?}
*/
MultiSelectComponent.prototype.direction = /**
* @return {?}
*/
function () {
return this.format.direction === MultiSelectComponent.LTR;
};
/**
* @param {?=} list
* @return {?}
*/
MultiSelectComponent.prototype.dragEnd = /**
* @param {?=} list
* @return {?}
*/
function (list) {
if (list === void 0) { 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 {?}
*/
MultiSelectComponent.prototype.drag = /**
* @param {?} event
* @param {?} item
* @param {?} list
* @return {?}
*/
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']);
};
/**
* @param {?} event
* @param {?} list
* @return {?}
*/
MultiSelectComponent.prototype.allowDrop = /**
* @param {?} event
* @param {?} list
* @return {?}
*/
function (event, list) {
if (event.dataTransfer.types.length && event.dataTransfer.types[0] === this.id) {
event.preventDefault();
if (!list.dragStart) {
list.dragOver = true;
}
}
return false;
};
/**
* @return {?}
*/
MultiSelectComponent.prototype.dragLeave = /**
* @return {?}
*/
function () {
this.available.dragOver = false;
this.confirmed.dragOver = false;
};
/**
* @param {?} event
* @param {?} list
* @return {?}
*/
MultiSelectComponent.prototype.drop = /**
* @param {?} event
* @param {?} list
* @return {?}
*/
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);
}
}
};
/**
* @private
* @return {?}
*/
MultiSelectComponent.prototype.trueUp = /**
* @private
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var changed = false;
// Clear removed items.
/** @type {?} */
var pos = this.destination.length;
while ((pos -= 1) >= 0) {
/** @type {?} */
var mv = this.confirmed.list.filter((/**
* @param {?} conf
* @return {?}
*/
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) {
/** @type {?} */
var mv = this_1.destination.filter((/**
* @param {?} d
* @return {?}
*/
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((/**
* @param {?} o
* @return {?}
*/
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);
}
};
/**
* @param {?} list
* @param {?} item
* @param {?=} key
* @return {?}
*/
MultiSelectComponent.prototype.findItemIndex = /**
* @param {?} list
* @param {?} item
* @param {?=} key
* @return {?}
*/
function (list, item, key) {
if (key === void 0) { key = '_id'; }
/** @type {?} */
var 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 {?}
*/
MultiSelectComponent.prototype.makeUnavailable = /**
* @private
* @param {?} source
* @param {?} item
* @return {?}
*/
function (source, item) {
/** @type {?} */
var idx = source.list.indexOf(item);
if (idx !== -1) {
source.list.splice(idx, 1);
}
};
/**
* @param {?} source
* @param {?} target
* @param {?=} item
* @param {?=} trueup
* @return {?}
*/
MultiSelectComponent.prototype.moveItem = /**
* @param {?} source
* @param {?} target
* @param {?=} item
* @param {?=} trueup
* @return {?}
*/
function (source, target, item, trueup) {
var _this = this;
if (item === void 0) { item = null; }
if (trueup === void 0) { trueup = true; }
/** @type {?} */
var i = 0;
/** @type {?} */
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?
/** @type {?} */
var mv = [];
if (item) {
/** @type {?} */
var idx = this_2.findItemIndex(source.pick, item);
if (idx !== -1) {
mv[0] = source.pick[idx];
}
}
else {
mv = source.list.filter((/**
* @param {?} src
* @return {?}
*/
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((/**
* @param {?} trg
* @return {?}
*/
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((/**
* @return {?}
*/
function () {
_this.onFilter(source);
_this.onFilter(target);
}), 10);
};
/**
* @param {?} list
* @param {?} item
* @return {?}
*/
MultiSelectComponent.prototype.isItemSelected = /**
* @param {?} list
* @param {?} item
* @return {?}
*/
function (list, item) {
if (list.filter((/**
* @param {?} e
* @return {?}
*/
function (e) { return Object.is(e, item); })).length > 0) {
return true;
}
return false;
};
/**
* @param {?} event
* @param {?} index
* @param {?} source
* @param {?} item
* @return {?}
*/
MultiSelectComponent.prototype.shiftClick = /**
* @param {?} event
* @param {?} index
* @param {?} source
* @param {?} item
* @return {?}
*/
function (event, index, source, item) {
if (event.shiftKey && source.last && !Object.is(item, source.last)) {
/** @type {?} */
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;
};
/**
* @param {?} list
* @param {?} item
* @return {?}
*/
MultiSelectComponent.prototype.selectItem = /**
* @param {?} list
* @param {?} item
* @return {?}
*/
function (list, item) {
/** @type {?} */
var pk = list.filter((/**
* @param {?} e
* @return {?}
*/
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) {
/** @type {?} */
var idx = list.indexOf(pk[i]);
if (idx !== -1) {
list.splice(idx, 1);
}
}
}
else {
list.push(item);
}
};
/**
* @param {?} list
* @param {?} item
* @param {?} isConfirm
* @return {?}
*/
MultiSelectComponent.prototype.clickItem = /**
* @param {?} list
* @param {?} item
* @param {?} isConfirm
* @return {?}
*/
function (list, item, isConfirm) {
/** @type {?} */
var pk = list.filter((/**
* @param {?} e
* @return {?}
*/
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) {
/** @type {?} */
var idx = list.indexOf(pk[i]);
if (idx !== -1) {
list.splice(idx, 1);
}
}
}
else {
list.push(item);
}
if (isConfirm) {
this.moveItem(this.available, this.confirmed);
}
else {
this.moveItem(this.confirmed, this.available);
}
};
/**
* @param {?} source
* @param {?} isConfirm
* @return {?}
*/
MultiSelectComponent.prototype.selectAll = /**
* @param {?} source
* @param {?} isConfirm
* @return {?}
*/
function (source, isConfirm) {
source.pick.length = 0;
source.pick = source.sift.slice(0);
if (isConfirm) {
this.moveItem(this.available, this.confirmed);
}
else {
this.moveItem(this.confirmed, this.available);
}
};
/**
* @param {?} source
* @return {?}
*/
MultiSelectComponent.prototype.isAllSelected = /**
* @param {?} source
* @return {?}
*/
function (source) {
if (source.list.length === 0 || source.list.length === source.pick.length) {
return true;
}
return false;
};
/**
* @param {?} source
* @return {?}
*/
MultiSelectComponent.prototype.isAnySelected = /**
* @param {?} source
* @return {?}
*/
function (source) {
if (source.pick.length > 0) {
return true;
}
return false;
};
/**
* @private
* @param {?} source
* @return {?}
*/
MultiSelectComponent.prototype.unpick = /**
* @private
* @param {?} source
* @return {?}
*/
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);
}
}
};
/**
* @param {?} source
* @return {?}
*/
MultiSelectComponent.prototype.clearFilter = /**
* @param {?} source
* @return {?}
*/
function (source) {
if (source) {
source.picker = '';
this.onFilter(source);
}
};
/**
* @param {?} source
* @return {?}
*/
MultiSelectComponent.prototype.onFilter = /**
* @param {?} source
* @return {?}
*/
function (source) {
var _this = this;
if (source.picker.length > 0) {
try {
/** @type {?} */
var filtered = source.list.filter((/**
* @param {?} item
* @return {?}
*/
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()
.indexOf(source.picker.toLocaleLowerCase()) !== -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 {?}
*/
MultiSelectComponent.prototype.makeId = /**
* @private
* @param {?} item
* @return {?}
*/
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' ]"
// Allow for complex names by passing an array of strings.
// Example: [display]="[ '_type.substring(0,1)', '_name' ]"
/**
* @protected
* @param {?} item
* @param {?=} separator
* @return {?}
*/
MultiSelectComponent.prototype.makeName =
// Allow for complex names by passing an array of strings.
// Example: [display]="[ '_type.substring(0,1)', '_name' ]"
/**
* @protected
* @param {?} item
* @param {?=} separator
* @return {?}
*/
function (item, separator) {
if (separator === void 0) { separator = '_'; }
/** @type {?} */
var 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 {?} */
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
/** @type {?} */
var parts = this.display[i].split('.');
/** @type {?} */
var s = item[parts[0]];
if (s) {
// Use brute force
if (parts[1].indexOf('substring') !== -1) {
/** @type {?} */
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;
};
MultiSelectComponent.AVAILABLE_LIST_NAME = 'available';
MultiSelectComponent.CONFIRMED_LIST_NAME = 'confirmed';
MultiSelectComponent.LTR = 'left-to-right';
MultiSelectComponent.RTL = 'right-to-left';
MultiSelectComponent.DEFAULT_FORMAT = {
add: 'Add',
remove: 'Remove',
all: 'All',
none: 'None',
direction: MultiSelectComponent.LTR,
draggable: true,
locale: undefined,
selectAll: 'select all',
removeAll: 'remove all',
};
MultiSelectComponent.decorators = [
{ type: Component, args: [{
selector: 'multi-select',
template: "<div class=\"multi-select\">\n <div class=\"listbox\" [ngStyle]=\"{ order: direction() ? 1 : 2, 'margin-left': direction() ? 0 : '10px' }\">\n <form *ngIf=\"filter\" class=\"filter\">\n <input class=\"form-control\" name=\"filter-source\" [(ngModel)]=\"available.picker\" (ngModelChange)=\"onFilter(available)\" />\n </form>\n \n <div class=\"record-picker\">\n <ul\n [ngStyle]=\"{ 'max-height': height, 'min-height': height }\"\n [ngClass]=\"{ over: available.dragOver }\"\n (drop)=\"drop($event, confirmed)\"\n (dragover)=\"allowDrop($event, available)\"\n (dragleave)=\"dragLeave()\"\n >\n <li\n *ngFor=\"let item of available.sift; let idx = index\"\n (click)=\"disabled ? null : clickItem(available.pick, item, true); shiftClick($event, idx, available, item)\"\n [ngClass]=\"{ selected: isItemSelected(available.pick, item), disabled: disabled }\"\n [draggable]=\"!disabled && format.draggable\"\n (dragstart)=\"drag($event, item, available)\"\n (dragend)=\"dragEnd(available)\"\n >\n <label>{{ item._name }}</label>\n </li>\n </ul>\n <div class=\"empty_message\" *ngIf=\"available.sift.length === 0\">\n Empty\n </div>\n </div>\n \n <div class=\"button-bar\">\n <button type=\"button\" class=\"multi-button\" (click)=\"selectAll(available, true)\" [disabled]=\"disabled || isAllSelected(available)\">\n Select All\n </button>\n </div>\n \n <div class=\"module-loader list-loader\" *ngIf=\"sourceLoading\">\n <div class=\"spinner spinner-bubble spinner-bubble-primary\"></div>\n </div>\n </div>\n \n <div class=\"listbox\" [ngStyle]=\"{ order: direction() ? 2 : 1, 'margin-left': direction() ? '10px' : 0 }\">\n <form *ngIf=\"filter\" class=\"filter\">\n <input class=\"form-control\" name=\"filter-destination\" [(ngModel)]=\"confirmed.picker\" (ngModelChange)=\"onFilter(confirmed)\" />\n </form>\n \n <div class=\"record-picker\">\n <ul\n [ngStyle]=\"{ 'max-height': height, 'min-height': height }\"\n [ngClass]=\"{ over: confirmed.dragOver }\"\n (drop)=\"drop($event, available)\"\n (dragover)=\"allowDrop($event, confirmed)\"\n (dragleave)=\"dragLeave()\"\n >\n <li\n #itmConf\n *ngFor=\"let item of confirmed.sift; let idx = index\"\n (click)=\"disabled ? null : clickItem(confirmed.pick, item, false); shiftClick($event, idx, confirmed, item)\"\n [ngClass]=\"{ selected: isItemSelected(confirmed.pick, item), disabled: disabled }\"\n [draggable]=\"!disabled && format.draggable\"\n (dragstart)=\"drag($event, item, confirmed)\"\n (dragend)=\"dragEnd(confirmed)\"\n >\n <label>{{ item._name }}</label>\n </li>\n </ul>\n </div>\n \n <div class=\"button-bar\">\n <button type=\"button\" class=\"multi-button\" (click)=\"selectAll(confirmed, false)\" [disabled]=\"disabled || isAllSelected(confirmed)\">\n Remove All\n </button>\n </div>\n \n <div class=\"module-loader list-loader\" *ngIf=\"destinationLoading\">\n <div class=\"spinner spinner-bubble spinner-bubble-primary\"></div>\n </div>\n </div>\n </div>",
styles: ["@charset \"UTF-8\";div.record-picker{overflow-x:hidden;overflow-y:auto;border:1px solid #ddd;border-radius:8px;position:relative;cursor:pointer;scrollbar-base-color:#337ab7;scrollbar-3dlight-color:#337ab7;scrollbar-highlight-color:#337ab7;scrollbar-track-color:#eee;scrollbar-arrow-color:gray;scrollbar-shadow-color:gray}.record-picker ul{margin:0;padding:0 0 1px}.record-picker li{border-top:thin solid #ddd;border-bottom:1px solid #ddd;display:block;padding:2px 2px 2px 10px;margin-bottom:-1px;font-size:.85em;cursor:pointer;white-space:nowrap;min-height:16px}.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{opacity:.5;cursor:default;background-color:inherit}.record-picker li:first-child{border-top-left-radius:8px;border-top-right-radius:8px;border-top:none}.record-picker li:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-bottom:none}.record-picker label{cursor:pointer;font-weight:inherit;font-size:14px;padding:4px;margin-bottom:-1px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.record-picker ul.over{background-color:#d3d3d3}.multi-select{display:flex;flex-direction:row;align-content:flex-start}.multi-select .listbox{width:50%;margin:0}.multi-select .button-bar{margin-top:8px}.point-right::after{content:\"\u25B6\";padding-left:1em}.point-left::before{content:\"\u25C0\";padding-right:1em}.multi-select .button-bar button{width:100%}button.btn-block{display:block;width:100%;margin-bottom:8px}.filter{margin-bottom:-2.2em}.filter::after{content:\"o\";width:40px;color:transparent;font-size:2em;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-repeat:no-repeat;background-position:center center;opacity:.2;top:-36px;left:calc(100% - 21px);position:relative}.empty-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.multi-button{display:inline-block;padding:4px 25px;margin-bottom:3px;font-size:14px;font-weight:500;color:#fff;cursor:pointer;background:#2c8f40;background:linear-gradient(135deg,#2c8f40 0,#49b25e 100%);border:0;border-radius:5px;box-shadow:0 5px 20px -4px rgba(0,0,0,.2);transition:.2s ease-in-out;-webkit-border-radius:5px;-moz-border-radius:5px}.multi-button:hover{color:#fff;text-decoration:none;background:#49b25e;background:linear-gradient(135deg,#2c8f40 0,#49b25e 50%);box-shadow:0 10px 20px -4px rgba(0,0,0,.2);opacity:1}.multi-button-grey{color:#fff;background:#666;background:linear-gradient(135deg,#666 0,#999 100%)}.multi-button-grey:hover{color:#fff;text-decoration:none;background:#999;background:linear-gradient(135deg,#666 0,#999 50%);box-shadow:0 10px 20px -4px rgba(0,0,0,.2);opacity:1}.multi-button-blue{color:#fff;background:#4796f0;background:linear-gradient(135deg,#4796f0 0,#4b74d4 100%)}.multi-button-blue:hover{color:#fff;text-decoration:none;background:#999;background:linear-gradient(135deg,#4796f0 0,#4b74d4 50%);box-shadow:0 10px 20px -4px rgba(0,0,0,.2);opacity:1}.multi-button-big{padding:9px 25px;font-size:16px}.multi-button-small{padding:3px 10px;font-size:12px}"]
}] }
];
/** @nocollapse */
MultiSelectComponent.ctorParameters = function () { return [
{ type: IterableDiffers }
]; };
MultiSelectComponent.propDecorators = {
id: [{ type: Input }],
key: [{ type: Input }],
display: [{ type: Input }],
height: [{ type: Input }],
filter: [{ type: Input }],
format: [{ type: Input }],
sort: [{ type: Input }],
compare: [{ type: Input }],
disabled: [{ type: Input }],
source: [{ type: Input }],
destination: [{ type: Input }],
loading: [{ type: Input }],
emptySourceMessage: [{ type: Input }],
destinationChange: [{ type: Output }],
sourceLoading: [{ type: Input }],
destinationLoading: [{ type: Input }]
};
return MultiSelectComponent;
}());
if (false) {
/** @type {?} */
MultiSelectComponent.AVAILABLE_LIST_NAME;
/** @type {?} */
MultiSelectComponent.CONFIRMED_LIST_NAME;
/** @type {?} */
MultiSelectComponent.LTR;
/** @type {?} */
MultiSelectComponent.RTL;
/** @type {?} */
MultiSelectComponent.DEFAULT_FORMAT;
/** @type {?} */
MultiSelectComponent.prototype.id;
/** @type {?} */
MultiSelectComponent.prototype.key;
/** @type {?} */
MultiSelectComponent.prototype.display;
/** @type {?} */
MultiSelectComponent.prototype.height;
/** @type {?} */
MultiSelectComponent.prototype.filter;
/** @type {?} */
MultiSelectComponent.prototype.format;
/** @type {?} */
MultiSelectComponent.prototype.sort;
/** @type {?} */
MultiSelectComponent.prototype.compare;
/** @type {?} */
MultiSelectComponent.prototype.disabled;
/** @type {?} */
MultiSelectComponent.prototype.source;
/** @type {?} */
MultiSelectComponent.prototype.destination;
/** @type {?} */
MultiSelectComponent.prototype.loading;
/** @type {?} */
MultiSelectComponent.prototype.emptySourceMessage;
/** @type {?} */
MultiSelectComponent.prototype.destinationChange;
/** @type {?} */
MultiSelectComponent.prototype.available;
/** @type {?} */
MultiSelectComponent.prototype.confirmed;
/** @type {?} */
MultiSelectComponent.prototype.sourceDiffer;
/** @type {?} */
MultiSelectComponent.prototype.destinationDiffer;
/** @type {?} */
MultiSelectComponent.prototype.sourceLoading;
/** @type {?} */
MultiSelectComponent.prototype.destinationLoading;
/**
* @type {?}
* @private
*/
MultiSelectComponent.prototype.sorter;
/**
* @type {?}
* @private
*/
MultiSelectComponent.prototype.differs;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/multi-select.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MultiSelectModule = /** @class */ (function () {
function MultiSelectModule() {
}
MultiSelectModule.decorators = [
{ type: NgModule, args: [{
declarations: [MultiSelectComponent],
imports: [
CommonModule,
FormsModule
],
exports: [MultiSelectComponent]
},] }
];
return MultiSelectModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: devmn-multi-select.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { BasicSelectData, MultiSelectComponent, MultiSelectModule };
//# sourceMappingURL=devmn-multi-select.js.map