dual-pick-list-ng/bundles/dual-pick-list-ng.umd.min.js

Dual pick list Component for Angular 2+

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("util"),require("@angular/forms"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define(["exports","@angular/core","util","@angular/forms","@angular/platform-browser"],e):e(t["dual-pick-list-ng"]={},t.ng.core,t.util,t.ng.forms,t.ng.platformBrowser)}(this,function(t,e,i,n,r){"use strict";var o=function(){function t(){}return t.prototype.transform=function(t,e,n){return t?e&&n&&""!==n?"boolean"==typeof n?t.filter(function(t){return t[e]==n||i.isNullOrUndefined(t[e])}):t.filter(function(t){return"string"==typeof t[e]?t[e].indexOf(n)>-1:t[e]==n}):t:[]},t}();o.decorators=[{type:e.Pipe,args:[{name:"searchfilterDualPickList"}]},{type:e.Injectable}],o.ctorParameters=function(){return[]};var s=this&&this.__rest||function(t,e){var i={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(i[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(t);r<n.length;r++)e.indexOf(n[r])<0&&(i[n[r]]=t[n[r]])}return i},l=function(){function t(){var t=this;this.onTransaction=new e.EventEmitter,this.dispatchTransaction=function(e,i){t.onTransaction.emit({notMove:e.map(function(t){t.isSelected;return s(t,["isSelected"])}),toMove:i.map(function(t){t.isSelected;return s(t,["isSelected"])})})}}return t.prototype.ngOnInit=function(){this.iconsDirection="glyphicon glyphicon-arrow-"+this.position,this.items=this.list.map(function(t){return Object.assign({},t,{isSelected:!1})}).slice(),this.header=this.headerConfig.slice().filter(function(t){return!t.hidden||i.isNullOrUndefined(t.hidden)}),this.filterBy=this.header[0].key},t.prototype.ngOnChanges=function(t){t.list&&(this.items=t.list.currentValue.slice()),t.headerConfig&&(this.header=t.headerConfig.currentValue.slice().filter(function(t){return!t.hidden||i.isNullOrUndefined(t.hidden)})),t.filterBy&&(this.filterBy=t.filterBy.currentValue)},t.prototype.moveAll=function(){this.dispatchTransaction([],this.items)},t.prototype.moveJustSelected=function(){this.dispatchTransaction(this.items.filter(function(t){return!t.isSelected}),this.items.filter(function(t){return t.isSelected}))},t.prototype.setFilterBy=function(t){this.filterBy=t},t.prototype.transact=function(){this.dispatchTransaction(this.items,[])},t}();l.decorators=[{type:e.Component,args:[{selector:"app-pick-list",template:'\n    <div>\n      <label>{{textLabel ? textLabel: \'Not Selected\'}}</label>\n      <div class="form-group input-icon-right" style="margin-bottom: 0px">\n        <i class="glyphicon glyphicon-search"></i>\n        <input type="text"\n               class="form-control"\n               [(ngModel)]="filter"\n               placeholder="{{placeHolder ? placeHolder :\'Search\'}}">\n      </div>\n\n      <div class="btn-group buttons">\n\n        <button *ngIf="position===\'right\'" type="button" class="btn moveall btn-default" title="Move all" (click)="moveAll()"><i class="{{iconsDirection}}"></i> <i class="{{iconsDirection}}"></i></button>\n        <button *ngIf="position===\'right\'" type="button" class="btn move btn-default" style="margin-left: 0" title="Move selected" (click)="moveJustSelected()"><i class="{{iconsDirection}}"></i></button>\n\n        <button *ngIf="position===\'left\'" type="button" class="btn move btn-default" style="margin-left: 0" title="Move selected" (click)="moveJustSelected()"><i class="{{iconsDirection}}"></i></button>\n        <button *ngIf="position===\'left\'" type="button" class="btn moveall btn-default" title="Move all" (click)="moveAll()"><i class="{{iconsDirection}}"></i> <i class="{{iconsDirection}}"></i></button>\n\n      </div>\n\n      <div style="overflow: scroll; height: 192px" >\n        <table class="table table-bordered" >\n          <thead>\n          <tr>\n            <th *ngFor="let h of header" class="text-left" (click)="setFilterBy(h.key)" [ngClass]="{\'filter-by\': filterBy === h.key}">{{h.text}}</th>\n          </tr>\n          </thead>\n          <tbody class="text-left">\n          <tr *ngFor="let itemList of items | searchfilterDualPickList : filterBy : filter" (click)="itemList.isSelected = !itemList.isSelected" [ngClass]="{\'dl-selected\':itemList.isSelected}">\n            <td *ngFor="let l of header |  searchfilterDualPickList : \'hidden\' : false " class="text-left">\n              <span *ngIf="!l.custom">{{itemList[l.key]}}</span>\n              <select *ngIf="l.select" class="form-control" name="{{\'selectLeft\'+\'-\'+index}}" id="selectLeft+\'-\'+index" [(ngModel)]="itemList[l.key]" style="height: inherit;" (ngChange)="transact()">\n                <option *ngFor="let item of l.select.list" value="{{item.id}}">{{item.text}}</option>\n              </select>\n              <input *ngIf="l.checkbox" type="checkbox" [(ngModel)]="itemList[l.key]" (change)="transact()">\n              <button *ngIf="l.button" class="btn btn-default" (click)="l.button.onClick(itemList)">{{l.text}}</button>\n            </td>\n          </tr>\n          </tbody>\n        </table>\n      </div>\n\n    </div>\n  ',styles:["\n    .dl-selected{\n      background: #efefef !important;\n    }\n\n    .filter-by{\n      background: #eee !important;\n    }\n  "]}]}],l.ctorParameters=function(){return[]},l.propDecorators={textLabel:[{type:e.Input}],list:[{type:e.Input}],placeHolder:[{type:e.Input}],headerConfig:[{type:e.Input}],position:[{type:e.Input}],onTransaction:[{type:e.Output}]};var c=this&&this.__rest||function(t,e){var i={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(i[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(t);r<n.length;r++)e.indexOf(n[r])<0&&(i[n[r]]=t[n[r]])}return i},a=function(){function t(){var t=this;this.onTransaction=new e.EventEmitter,this.dispatchTransaction=function(){var e=t.itemsLeft.map(function(t){t.left,t.right,t.isSelected;return c(t,["left","right","isSelected"])}),i=t.itemsRight.map(function(t){t.left,t.right,t.isSelected;return c(t,["left","right","isSelected"])});t.onTransaction.emit({leftList:e,rightList:i})}}return t.prototype.ngOnInit=function(){this.itemsLeft=this.list.filter(function(t){return t.left}).slice().map(function(t){return Object.assign({},t,{isSelected:!1})}),this.itemsRight=this.list.filter(function(t){return t.right}).slice().map(function(t){return Object.assign({},t,{isSelected:!1})}),this.headerLeft=this.headerConfig.left.slice().filter(function(t){return!t.hidden||i.isNullOrUndefined(t.hidden)}),this.headerRight=this.headerConfig.right.slice().filter(function(t){return!t.hidden||i.isNullOrUndefined(t.hidden)}),this.filterLeftBy=this.headerLeft[0].key,this.filterRightBy=this.headerRight[0].key},t.prototype.ngOnChanges=function(t){t.list&&(this.itemsLeft=t.list.currentValue.filter(function(t){return t.left}).slice().map(function(t){return Object.assign({},t,{isSelected:!1})}),this.itemsRight=t.list.currentValue.filter(function(t){return t.right}).slice().map(function(t){return Object.assign({},t,{isSelected:!1})})),t.headerConfig&&(this.headerLeft=t.headerConfig.currentValue.left.slice().filter(function(t){return!t.hidden||i.isNullOrUndefined(t.hidden)}),this.headerRight=t.headerConfig.currentValue.right.slice().filter(function(t){return!t.hidden||i.isNullOrUndefined(t.hidden)}))},t.prototype.getTransactionFromLeft=function(t){this.itemsRight=this.itemsRight.concat(t.toMove).map(function(t){return Object.assign({},t,{isSelected:!1,left:!1,right:!0})}),this.itemsLeft=t.notMove.map(function(t){return t}),this.dispatchTransaction()},t.prototype.getTransactionFromRight=function(t){this.itemsLeft=this.itemsLeft.concat(t.toMove).map(function(t){return Object.assign({},t,{isSelected:!1,left:!0,right:!1})}),this.itemsRight=t.notMove.map(function(t){return t}),this.dispatchTransaction()},t}();a.decorators=[{type:e.Component,args:[{selector:"app-dual-pick-list",template:'\n      <div class="bootstrap-duallistbox-container">\n          <div class="col-md-6">\n              <app-pick-list [position]="\'right\'" [textLabel]="textKeyLeftList" [list]="itemsLeft" [placeHolder]="placeHolder" [headerConfig]="headerLeft" (onTransaction)="getTransactionFromLeft($event)"></app-pick-list>\n          </div>\n          <div class="box2 col-md-6">\n              <app-pick-list [position]="\'left\'" [textLabel]="textKeyRightList" [list]="itemsRight" [placeHolder]="placeHolder" [headerConfig]="headerRight" (onTransaction)="getTransactionFromRight($event)"></app-pick-list>\n          </div>\n\n      </div>\n    ',styles:["\n\n    "]}]}],a.ctorParameters=function(){return[]},a.propDecorators={textKeyLeftList:[{type:e.Input}],textKeyRightList:[{type:e.Input}],list:[{type:e.Input}],placeHolder:[{type:e.Input}],headerConfig:[{type:e.Input}],onTransaction:[{type:e.Output}]};var u=function(){return function(){}}();u.decorators=[{type:e.NgModule,args:[{imports:[r.BrowserModule,n.FormsModule],declarations:[l,o,a],exports:[a,l,o]}]}],u.ctorParameters=function(){return[]};var f=function(){return function(t,e){this.id=t,this.text=e}}(),d=function(){return function(t){void 0===t&&(t=null),this.onClick=t}}(),h=function(){return function(){}}(),p=function(){return function(t){void 0===t&&(t=[]),this.list=t}}(),g=function(){return function(t,e,i,n,r,o){void 0===i&&(i=!1),void 0===n&&(n=null),void 0===r&&(r=null),void 0===o&&(o=null),this.text=t,this.key=e,this.custom=i,this.select=n?new p(n):null,this.button=r?new d(r):null,this.checkbox=o}}();t.DualPickListModule=u,t.TypeSelectDualPickListModel=f,t.HeaderTypeButtonDualPickListModel=d,t.ItemDualPickListModel=h,t.HeaderTypeSelectDualPickListModel=p,t.HeaderDualPickListModel=g,t.ɵc=a,t.ɵa=l,t.ɵb=o,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=dual-pick-list-ng.umd.min.js.map