misanek-angular-dual-listbox
Version:
Angular 4+ component for a dual listbox control.
770 lines (765 loc) • 35 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/common'), require('/forms')) :
typeof define === 'function' && define.amd ? define(['exports', '/core', '@angular/common', '/forms'], factory) :
(factory((global['misanek-angular-dual-listbox'] = {}),global.ng.core,global.ng.common,global.ng.forms));
}(this, (function (exports,core,common,forms) { 'use strict';
var BasicList = /** @class */ (function () {
/**
* @param {?} name
*/
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", {
/**
* @return {?}
*/
get: function () {
return this._name;
},
enumerable: true,
configurable: true
});
return BasicList;
}());
var nextId = 0;
var DualListComponent = /** @class */ (function () {
/**
* @param {?} differs
*/
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);
}
/**
* @param {?} changeRecord
* @return {?}
*/
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();
}
};
/**
* @return {?}
*/
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);
}
};
/**
* @param {?} source
* @return {?}
*/
DualListComponent.prototype.buildAvailable = function (source) {
var _this = this;
var /** @type {?} */ sourceChanges = this.sourceDiffer.diff(source);
if (sourceChanges) {
sourceChanges.forEachRemovedItem(function (r) {
var /** @type {?} */ 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;
};
/**
* @param {?} destination
* @return {?}
*/
DualListComponent.prototype.buildConfirmed = function (destination) {
var _this = this;
var /** @type {?} */ moved = false;
var /** @type {?} */ destChanges = this.destinationDiffer.diff(destination);
if (destChanges) {
destChanges.forEachRemovedItem(function (r) {
var /** @type {?} */ 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 /** @type {?} */ 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 {?}
*/
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);
}
};
/**
* @return {?}
*/
DualListComponent.prototype.updatedDestination = function () {
if (this.destination !== undefined) {
this.destinationDiffer = this.differs.find(this.destination).create(null);
}
};
/**
* @return {?}
*/
DualListComponent.prototype.direction = function () {
return this.format.direction === DualListComponent.LTR;
};
/**
* @param {?=} list
* @return {?}
*/
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;
};
/**
* @param {?} event
* @param {?} item
* @param {?} list
* @return {?}
*/
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']);
};
/**
* @param {?} event
* @param {?} list
* @return {?}
*/
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;
};
/**
* @return {?}
*/
DualListComponent.prototype.dragLeave = function () {
this.available.dragOver = false;
this.confirmed.dragOver = false;
};
/**
* @param {?} event
* @param {?} list
* @return {?}
*/
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);
}
}
};
/**
* @return {?}
*/
DualListComponent.prototype.trueUp = function () {
var _this = this;
var /** @type {?} */ changed = false;
// Clear removed items.
var /** @type {?} */ pos = this.destination.length;
while ((pos -= 1) >= 0) {
var /** @type {?} */ 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 /** @type {?} */ 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 /** @type {?} */ i = 0, /** @type {?} */ len = this.confirmed.list.length; i < len; i += 1) {
_loop_1(/** @type {?} */ i, /** @type {?} */ len);
}
if (changed) {
this.destinationChange.emit(this.destination);
}
};
/**
* @param {?} list
* @param {?} item
* @param {?=} key
* @return {?}
*/
DualListComponent.prototype.findItemIndex = function (list, item, key) {
if (key === void 0) { key = '_id'; }
var /** @type {?} */ 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;
};
/**
* @param {?} source
* @param {?} item
* @return {?}
*/
DualListComponent.prototype.makeUnavailable = function (source, item) {
var /** @type {?} */ idx = source.list.indexOf(item);
if (idx !== -1) {
source.list.splice(idx, 1);
}
};
/**
* @param {?} source
* @param {?} target
* @param {?=} item
* @param {?=} trueup
* @return {?}
*/
DualListComponent.prototype.moveItem = function (source, target, item, trueup) {
var _this = this;
if (item === void 0) { item = null; }
if (trueup === void 0) { trueup = true; }
var /** @type {?} */ i = 0;
var /** @type {?} */ 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 /** @type {?} */ mv = [];
if (item) {
var /** @type {?} */ 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);
};
/**
* @param {?} list
* @param {?} item
* @return {?}
*/
DualListComponent.prototype.isItemSelected = function (list, item) {
if (list.filter(function (e) { return Object.is(e, item); }).length > 0) {
return true;
}
return false;
};
/**
* @param {?} event
* @param {?} index
* @param {?} source
* @param {?} item
* @return {?}
*/
DualListComponent.prototype.shiftClick = function (event, index, source, item) {
if (event.shiftKey && source.last && !Object.is(item, source.last)) {
var /** @type {?} */ idx = source.sift.indexOf(source.last);
if (index > idx) {
for (var /** @type {?} */ i = (idx + 1); i < index; i += 1) {
this.selectItem(source.pick, source.sift[i]);
}
}
else if (idx !== -1) {
for (var /** @type {?} */ i = (index + 1); i < idx; i += 1) {
this.selectItem(source.pick, source.sift[i]);
}
}
}
source.last = item;
};
/**
* @param {?} event
* @param {?} list
* @param {?} item
* @return {?}
*/
DualListComponent.prototype.selectItemClick = function (event, list, item) {
if (this.format.ctrl_click && list.length !== 0 && !event.ctrlKey && !event.shiftKey) {
list.splice(0, list.length);
this.selectItem(list, item);
}
else {
this.selectItem(list, item);
}
};
/**
* @param {?} list
* @param {?} item
* @return {?}
*/
DualListComponent.prototype.selectItem = function (list, item) {
var /** @type {?} */ pk = list.filter(function (e) {
return Object.is(e, item);
});
if (pk.length > 0) {
// Already in list, so deselect.
for (var /** @type {?} */ i = 0, /** @type {?} */ len = pk.length; i < len; i += 1) {
var /** @type {?} */ idx = list.indexOf(pk[i]);
if (idx !== -1) {
list.splice(idx, 1);
}
}
}
else {
list.push(item);
}
};
/**
* @param {?} source
* @return {?}
*/
DualListComponent.prototype.selectAll = function (source) {
source.pick.length = 0;
source.pick = source.sift.slice(0);
};
/**
* @param {?} source
* @return {?}
*/
DualListComponent.prototype.selectNone = function (source) {
source.pick.length = 0;
};
/**
* @param {?} source
* @return {?}
*/
DualListComponent.prototype.isAllSelected = function (source) {
if (source.list.length === 0 || source.list.length === source.pick.length) {
return true;
}
return false;
};
/**
* @param {?} source
* @return {?}
*/
DualListComponent.prototype.isAnySelected = function (source) {
if (source.pick.length > 0) {
return true;
}
return false;
};
/**
* @param {?} source
* @return {?}
*/
DualListComponent.prototype.unpick = function (source) {
for (var /** @type {?} */ 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 {?}
*/
DualListComponent.prototype.clearFilter = function (source) {
if (source) {
source.picker = '';
this.onFilter(source);
}
};
/**
* @param {?} source
* @return {?}
*/
DualListComponent.prototype.onFilter = function (source) {
var _this = this;
if (source.picker.length > 0) {
try {
var /** @type {?} */ 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;
}
};
/**
* @param {?} item
* @return {?}
*/
DualListComponent.prototype.makeId = function (item) {
if (typeof item === 'object') {
return item[this.key];
}
else {
return item;
}
};
/**
* @param {?} item
* @param {?=} separator
* @return {?}
*/
DualListComponent.prototype.makeName = function (item, separator) {
if (separator === void 0) { separator = '_'; }
var /** @type {?} */ 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';
}
}
}
var /** @type {?} */ 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 /** @type {?} */ i = 0, /** @type {?} */ 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 /** @type {?} */ parts = this.display[i].split('.');
var /** @type {?} */ s = item[parts[0]];
if (s) {
// Use brute force
if (parts[1].indexOf('substring') !== -1) {
var /** @type {?} */ 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,
ctrl_click: false
};
DualListComponent.decorators = [
{ type: core.Component, args: [{
selector: 'dual-list',
template: "\n <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 : selectItemClick($event, 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 : selectItemClick($event, 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\t",
styles: ["\n div.record-picker {\n \toverflow-x: hidden;\n \toverflow-y: auto;\n \tborder: 1px solid #ddd;\n \tborder-radius:8px;\n \tposition: relative;\n \tcursor: pointer;\n }\n\n /* http://www.ourtuts.com/how-to-customize-browser-scrollbars-using-css3/ */\n div.record-picker::-webkit-scrollbar {\n \twidth: 12px;\n }\n\n div.record-picker::-webkit-scrollbar-button {\n \twidth: 0px;\n \theight: 0px;\n }\n\n div.record-picker {\n \tscrollbar-base-color: #337ab7;\n \tscrollbar-3dlight-color: #337ab7;\n \tscrollbar-highlight-color: #337ab7;\n \tscrollbar-track-color: #eee;\n \tscrollbar-arrow-color: gray;\n \tscrollbar-shadow-color: gray;\n \tscrollbar-dark-shadow-color: gray;\n }\n\n div.record-picker::-webkit-scrollbar-track {\n \tbackground:#eee;\n \t-webkit-box-shadow: 0px 0px 3px #dfdfdf inset;\n \t box-shadow: 0px 0px 3px #dfdfdf inset;\n \tborder-top-right-radius: 8px;\n \tborder-bottom-right-radius: 8px;\n }\n\n div.record-picker::-webkit-scrollbar-thumb {\n \tbackground: #337ab7;\n \tborder: thin solid gray;\n \tborder-top-right-radius: 8px;\n \tborder-bottom-right-radius: 8px;\n }\n\n div.record-picker::-webkit-scrollbar-thumb:hover {\n \tbackground: #286090;\n }\n\n .record-picker ul {\n \tmargin: 0;\n \tpadding: 0 0 1px 0;\n }\n\n .record-picker li {\n \tborder-top: thin solid #ddd;\n \tborder-bottom: 1px solid #ddd;\n \tdisplay: block;\n \tpadding: 2px 2px 2px 10px;\n \tmargin-bottom: -1px;\n \tfont-size: 0.85em;\n \tcursor: pointer;\n \twhite-space: nowrap;\n \tmin-height:16px;\n }\n\n .record-picker li:hover {\n \tbackground-color: #f5f5f5;\n }\n\n .record-picker li.selected {\n \tbackground-color: #d9edf7;\n }\n\n .record-picker li.selected:hover {\n \tbackground-color: #c4e3f3;\n }\n\n .record-picker li.disabled {\n \topacity: 0.5;\n \tcursor: default;\n \tbackground-color: inherit;\n }\n\n .record-picker li:first-child {\n \tborder-top-left-radius: 8px;\n \tborder-top-right-radius: 8px;\n \tborder-top: none;\n }\n\n .record-picker li:last-child {\n \tborder-bottom-left-radius: 8px;\n \tborder-bottom-right-radius: 8px;\n \tborder-bottom: none;\n }\n\n .record-picker label {\n \tcursor: pointer;\n \tfont-weight: inherit;\n \tfont-size: 14px;\n \tpadding: 4px;\n \tmargin-bottom: -1px;\n \t-webkit-touch-callout: none;\n \t-webkit-user-select: none;\n \t-moz-user-select: none;\n \t-ms-user-select: none;\n \tuser-select: none;\n }\n\n .record-picker ul.over {\n \tbackground-color:lightgray;\n }\n\n .dual-list {\n \tdisplay: -webkit-box;\n \tdisplay: -ms-flexbox;\n \tdisplay: flex;\n \t-webkit-box-orient: horizontal;\n \t-webkit-box-direction: normal;\n \t -ms-flex-direction: row;\n \t flex-direction: row;\n \t-ms-flex-line-pack: start;\n \t align-content: flex-start;\n }\n\n .dual-list .listbox {\n \twidth: 50%;\n \tmargin: 0px;\n }\n\n .dual-list .button-bar {\n \tmargin-top: 8px;\n }\n\n /* ▶ */\n .point-right::after {\n \tcontent: \"\\25B6\";\n \tpadding-left: 1em;\n }\n\n /* ◀ */\n .point-left::before {\n \tcontent: \"\\25C0\";\n \tpadding-right: 1em;\n }\n\n .dual-list .button-bar button {\n \twidth: 47%;\n }\n\n button.btn-block {\n \tdisplay: block;\n \twidth: 100%;\n \tmargin-bottom: 8px;\n }\n\n .filter {\n \tmargin-bottom: -2.2em;\n }\n\n .filter::after {\n \tcontent:\"o\";\n \twidth:40px;\n \tcolor:transparent;\n \tfont-size:2em;\n \tbackground-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>');\n \tbackground-repeat:no-repeat;\n \tbackground-position:center center;\n \topacity:.2;\n \ttop: -36px;\n \tleft: calc(100% - 21px);\n \tposition:relative;\n }\n\t"]
},] },
];
/**
* @nocollapse
*/
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]
},] },
];
/**
* @nocollapse
*/
AngularDualListBoxModule.ctorParameters = function () { return []; };
exports.BasicList = BasicList;
exports.DualListComponent = DualListComponent;
exports.AngularDualListBoxModule = AngularDualListBoxModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=misanek-angular-dual-listbox.umd.js.map