angular-dual-listbox/angular-dual-listbox.metadata.json

Angular dual listbox

{"__symbolic":"module","version":4,"metadata":{"BasicList":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"}]}]}},"compareFunction":{"__symbolic":"interface"},"DualListComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"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}"]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":2}}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":2}}]}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":2}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":2}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":2}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":2}}]}],"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":2}}]}],"compare":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":2}}]}],"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":2}}]}],"destination":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":2}}]}],"destinationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers","line":53,"character":30}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"buildAvailable":[{"__symbolic":"method"}],"buildConfirmed":[{"__symbolic":"method"}],"updatedSource":[{"__symbolic":"method"}],"updatedDestination":[{"__symbolic":"method"}],"direction":[{"__symbolic":"method"}],"dragEnd":[{"__symbolic":"method"}],"drag":[{"__symbolic":"method"}],"allowDrop":[{"__symbolic":"method"}],"dragLeave":[{"__symbolic":"method"}],"drop":[{"__symbolic":"method"}],"trueUp":[{"__symbolic":"method"}],"findItemIndex":[{"__symbolic":"method"}],"makeUnavailable":[{"__symbolic":"method"}],"moveItem":[{"__symbolic":"method"}],"isItemSelected":[{"__symbolic":"method"}],"shiftClick":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"selectNone":[{"__symbolic":"method"}],"isAllSelected":[{"__symbolic":"method"}],"isAnySelected":[{"__symbolic":"method"}],"unpick":[{"__symbolic":"method"}],"clearFilter":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"makeId":[{"__symbolic":"method"}],"makeName":[{"__symbolic":"method"}]},"statics":{"AVAILABLE_LIST_NAME":"available","CONFIRMED_LIST_NAME":"confirmed","LTR":"left-to-right","RTL":"right-to-left","DEFAULT_FORMAT":{"add":"Add","remove":"Remove","all":"All","none":"None","direction":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"DualListComponent"},"member":"LTR"},"draggable":true,"locale":{"__symbolic":"reference","name":"undefined"}}}},"AngularDualListBoxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":2},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":9,"character":2}],"declarations":[{"__symbolic":"reference","name":"DualListComponent"}],"exports":[{"__symbolic":"reference","name":"DualListComponent"}]}]}],"members":{}}},"origins":{"BasicList":"./lib/basic-list","compareFunction":"./lib/dual-list.component","DualListComponent":"./lib/dual-list.component","AngularDualListBoxModule":"./lib/angular-dual-listbox.module"},"importAs":"angular-dual-listbox"}