angular-dual-listbox
Version:
Angular dual listbox
2 lines • 15.8 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define("angular-dual-listbox",["exports","@angular/core","@angular/common","@angular/forms"],e):e((t=t||self)["angular-dual-listbox"]={},t.ng.core,t.ng.common,t.ng.forms)}(this,(function(t,e,i,r){"use strict";var o=function(){function t(t){this._name=t,this.last=null,this.picker="",this.dragStart=!1,this.dragOver=!1,this.pick=[],this.list=[],this.sift=[]}return Object.defineProperty(t.prototype,"name",{get:function(){return this._name},enumerable:!1,configurable:!0}),t}(),n=0,a=function(){function t(i){this.differs=i,this.id="dual-list-"+n++,this.key="_id",this.display="_name",this.height="100px",this.filter=!1,this.format=t.DEFAULT_FORMAT,this.sort=!1,this.disabled=!1,this.destinationChange=new e.EventEmitter,this.sorter=function(t,e){return t._name<e._name?-1:t._name>e._name?1:0},this.available=new o(t.AVAILABLE_LIST_NAME),this.confirmed=new o(t.CONFIRMED_LIST_NAME)}return t.prototype.ngOnChanges=function(e){e.filter&&!1===e.filter.currentValue&&(this.clearFilter(this.available),this.clearFilter(this.confirmed)),e.sort&&(!0===e.sort.currentValue&&void 0===this.compare?this.compare=this.sorter:!1===e.sort.currentValue&&(this.compare=void 0)),e.format&&(this.format=e.format.currentValue,void 0===this.format.direction&&(this.format.direction=t.LTR),void 0===this.format.add&&(this.format.add=t.DEFAULT_FORMAT.add),void 0===this.format.remove&&(this.format.remove=t.DEFAULT_FORMAT.remove),void 0===this.format.all&&(this.format.all=t.DEFAULT_FORMAT.all),void 0===this.format.none&&(this.format.none=t.DEFAULT_FORMAT.none),void 0===this.format.draggable&&(this.format.draggable=t.DEFAULT_FORMAT.draggable)),e.source&&(this.available=new o(t.AVAILABLE_LIST_NAME),this.updatedSource(),this.updatedDestination()),e.destination&&(this.confirmed=new o(t.CONFIRMED_LIST_NAME),this.updatedDestination(),this.updatedSource())},t.prototype.ngDoCheck=function(){this.source&&this.buildAvailable(this.source)&&this.onFilter(this.available),this.destination&&this.buildConfirmed(this.destination)&&this.onFilter(this.confirmed)},t.prototype.buildAvailable=function(t){var e=this,i=this.sourceDiffer.diff(t);return!!i&&(i.forEachRemovedItem((function(t){var i=e.findItemIndex(e.available.list,t.item,e.key);-1!==i&&e.available.list.splice(i,1)})),i.forEachAddedItem((function(t){-1===e.findItemIndex(e.available.list,t.item,e.key)&&e.available.list.push({_id:e.makeId(t.item),_name:e.makeName(t.item)})})),void 0!==this.compare&&this.available.list.sort(this.compare),this.available.sift=this.available.list,!0)},t.prototype.buildConfirmed=function(t){var e=this,i=!1,r=this.destinationDiffer.diff(t);return!!r&&(r.forEachRemovedItem((function(t){var r=e.findItemIndex(e.confirmed.list,t.item,e.key);-1!==r&&(e.isItemSelected(e.confirmed.pick,e.confirmed.list[r])||e.selectItem(e.confirmed.pick,e.confirmed.list[r]),e.moveItem(e.confirmed,e.available,e.confirmed.list[r],!1),i=!0)})),r.forEachAddedItem((function(t){var r=e.findItemIndex(e.available.list,t.item,e.key);-1!==r&&(e.isItemSelected(e.available.pick,e.available.list[r])||e.selectItem(e.available.pick,e.available.list[r]),e.moveItem(e.available,e.confirmed,e.available.list[r],!1),i=!0)})),void 0!==this.compare&&this.confirmed.list.sort(this.compare),this.confirmed.sift=this.confirmed.list,i&&this.trueUp(),!0)},t.prototype.updatedSource=function(){this.available.list.length=0,this.available.pick.length=0,void 0!==this.source&&(this.sourceDiffer=this.differs.find(this.source).create(null))},t.prototype.updatedDestination=function(){void 0!==this.destination&&(this.destinationDiffer=this.differs.find(this.destination).create(null))},t.prototype.direction=function(){return this.format.direction===t.LTR},t.prototype.dragEnd=function(t){return void 0===t&&(t=null),t?t.dragStart=!1:(this.available.dragStart=!1,this.confirmed.dragStart=!1),!1},t.prototype.drag=function(t,e,i){this.isItemSelected(i.pick,e)||this.selectItem(i.pick,e),i.dragStart=!0,t.dataTransfer.setData(this.id,e._id)},t.prototype.allowDrop=function(t,e){return t.dataTransfer.types.length&&t.dataTransfer.types[0]===this.id&&(t.preventDefault(),e.dragStart||(e.dragOver=!0)),!1},t.prototype.dragLeave=function(){this.available.dragOver=!1,this.confirmed.dragOver=!1},t.prototype.drop=function(t,e){t.dataTransfer.types.length&&t.dataTransfer.types[0]===this.id&&(t.preventDefault(),this.dragLeave(),this.dragEnd(),e===this.available?this.moveItem(this.available,this.confirmed):this.moveItem(this.confirmed,this.available))},t.prototype.trueUp=function(){for(var t=this,e=!1,i=this.destination.length;(i-=1)>=0;){0===this.confirmed.list.filter((function(e){return"object"==typeof t.destination[i]?e._id===t.destination[i][t.key]:e._id===t.destination[i]})).length&&(this.destination.splice(i,1),e=!0)}for(var r=function(i,r){var n=o.destination.filter((function(e){return"object"==typeof e?e[t.key]===t.confirmed.list[i]._id:e===t.confirmed.list[i]._id}));0===n.length&&(n=o.source.filter((function(e){return"object"==typeof e?e[t.key]===t.confirmed.list[i]._id:e===t.confirmed.list[i]._id}))).length>0&&(o.destination.push(n[0]),e=!0)},o=this,n=0,a=this.confirmed.list.length;n<a;n+=1)r(n);e&&this.destinationChange.emit(this.destination)},t.prototype.findItemIndex=function(t,e,i){void 0===i&&(i="_id");var r=-1;return"object"==typeof e?t.filter((function(o){return o._id===e[i]&&(r=t.indexOf(o),!0)})):t.filter((function(i){return i._id===e&&(r=t.indexOf(i),!0)})),r},t.prototype.makeUnavailable=function(t,e){var i=t.list.indexOf(e);-1!==i&&t.list.splice(i,1)},t.prototype.moveItem=function(t,e,i,r){var o=this;void 0===i&&(i=null),void 0===r&&(r=!0);var n=0,a=t.pick.length;i&&(a=(n=t.list.indexOf(i))+1);for(var l=function(){var r=[];if(i){var o=s.findItemIndex(t.pick,i);-1!==o&&(r[0]=t.pick[o])}else r=t.list.filter((function(e){return e._id===t.pick[n]._id}));1===r.length&&(0===e.list.filter((function(t){return t._id===r[0]._id})).length&&e.list.push(r[0]),s.makeUnavailable(t,r[0]))},s=this;n<a;n+=1)l();void 0!==this.compare&&e.list.sort(this.compare),t.pick.length=0,r&&this.trueUp(),setTimeout((function(){o.onFilter(t),o.onFilter(e)}),10)},t.prototype.isItemSelected=function(t,e){return t.filter((function(t){return Object.is(t,e)})).length>0},t.prototype.shiftClick=function(t,e,i,r){if(t.shiftKey&&i.last&&!Object.is(r,i.last)){var o=i.sift.indexOf(i.last);if(e>o)for(var n=o+1;n<e;n+=1)this.selectItem(i.pick,i.sift[n]);else if(-1!==o)for(n=e+1;n<o;n+=1)this.selectItem(i.pick,i.sift[n])}i.last=r},t.prototype.selectItem=function(t,e){var i=t.filter((function(t){return Object.is(t,e)}));if(i.length>0)for(var r=0,o=i.length;r<o;r+=1){var n=t.indexOf(i[r]);-1!==n&&t.splice(n,1)}else t.push(e)},t.prototype.selectAll=function(t){t.pick.length=0,t.pick=t.sift.slice(0)},t.prototype.selectNone=function(t){t.pick.length=0},t.prototype.isAllSelected=function(t){return 0===t.list.length||t.list.length===t.pick.length},t.prototype.isAnySelected=function(t){return t.pick.length>0},t.prototype.unpick=function(t){for(var e=t.pick.length-1;e>=0;e-=1)-1===t.sift.indexOf(t.pick[e])&&t.pick.splice(e,1)},t.prototype.clearFilter=function(t){t&&(t.picker="",this.onFilter(t))},t.prototype.onFilter=function(t){var e=this;if(t.picker.length>0)try{var i=t.list.filter((function(i){return"[object Object]"===Object.prototype.toString.call(i)?void 0!==i._name?-1!==i._name.toLocaleLowerCase(e.format.locale).indexOf(t.picker.toLocaleLowerCase(e.format.locale)):-1!==JSON.stringify(i).toLocaleLowerCase(e.format.locale).indexOf(t.picker.toLocaleLowerCase(e.format.locale)):-1!==i.toLocaleLowerCase(e.format.locale).indexOf(t.picker.toLocaleLowerCase(e.format.locale))}));t.sift=i,this.unpick(t)}catch(e){e instanceof RangeError&&(this.format.locale=void 0),t.sift=t.list}else t.sift=t.list},t.prototype.makeId=function(t){return"object"==typeof t?t[this.key]:t},t.prototype.makeName=function(t,e){void 0===e&&(e="_");var i=this.display;function r(t){switch(Object.prototype.toString.call(t)){case"[object Number]":case"[object String]":return t;default:return void 0!==t?t[i]:"undefined"}}var o="";if(void 0!==this.display)switch(Object.prototype.toString.call(this.display)){case"[object Function]":o=this.display(t);break;case"[object Array]":for(var n=0,a=this.display.length;n<a;n+=1)if(o.length>0&&(o+=e),-1===this.display[n].indexOf("."))o+=t[this.display[n]];else{var l=this.display[n].split("."),s=t[l[0]];if(s)if(-1!==l[1].indexOf("substring")){var d=l[1].substring(l[1].indexOf("(")+1,l[1].indexOf(")")).split(",");switch(d.length){case 1:o+=s.substring(parseInt(d[0],10));break;case 2:o+=s.substring(parseInt(d[0],10),parseInt(d[1],10));break;default:o+=s}}else o+=s}break;default:o=r(t)}else o=r(t);return o},t}();a.AVAILABLE_LIST_NAME="available",a.CONFIRMED_LIST_NAME="confirmed",a.LTR="left-to-right",a.RTL="right-to-left",a.DEFAULT_FORMAT={add:"Add",remove:"Remove",all:"All",none:"None",direction:a.LTR,draggable:!0,locale:void 0},a.decorators=[{type:e.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}']}]}],a.ctorParameters=function(){return[{type:e.IterableDiffers}]},a.propDecorators={id:[{type:e.Input}],key:[{type:e.Input}],display:[{type:e.Input}],height:[{type:e.Input}],filter:[{type:e.Input}],format:[{type:e.Input}],sort:[{type:e.Input}],compare:[{type:e.Input}],disabled:[{type:e.Input}],source:[{type:e.Input}],destination:[{type:e.Input}],destinationChange:[{type:e.Output}]};var l=function(){};l.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule,r.FormsModule],declarations:[a],exports:[a]}]}],t.AngularDualListBoxModule=l,t.BasicList=o,t.DualListComponent=a,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=angular-dual-listbox.umd.min.js.map