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

Angular 4+ component for a dual listbox control.

{"__symbolic":"module","version":3,"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"},"arguments":[{"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   /* &nbsp;&nbsp;&nbsp;&#9654; */\n   .point-right::after {\n   \tcontent: \"\\25B6\";\n   \tpadding-left: 1em;\n   }\n\n   /* &#9664;&nbsp;&nbsp;&nbsp; */\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"]}]}],"members":{"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"compare":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"destination":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"destinationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers"}]}],"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"}],"selectItemClick":[{"__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"},"ctrl_click":false}}},"AngularDualListBoxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule"}],"declarations":[{"__symbolic":"reference","name":"DualListComponent"}],"exports":[{"__symbolic":"reference","name":"DualListComponent"}]}]}],"members":{}}},"origins":{"BasicList":"./src/basic-list","compareFunction":"./src/dual-list.component","DualListComponent":"./src/dual-list.component","AngularDualListBoxModule":"./src/angular-dual-listbox.module"},"importAs":"misanek-angular-dual-listbox"}