aui-select-box/aui-select-box.metadata.json

``` npm i aui-select-box ```

{"__symbolic":"module","version":4,"metadata":{"SelectBoxService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"AUI_SELECT_BOX_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":6,"character":11},"useExisting":{"__symbolic":"reference","name":"SelectBoxComponent"},"multi":true},"SelectBoxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"aui-select-box","providers":[{"__symbolic":"reference","name":"AUI_SELECT_BOX_ACCESSOR"},{"__symbolic":"reference","name":"ListFilterPipe"}],"template":"<div class=\"select-box-list-container\" >\r\n    <div class=\"vertical\">\r\n        <input *ngIf=\"!disabled && search\" type=\"text\" class=\"selectbox-search\" [(ngModel)]=\"leftFilterText\" \r\n            [disabled]=\"disabled\" placeholder=\"Search..\"/>\r\n        <div class=\"select-box-list vertical\" cdkDropList #origList=\"cdkDropList\" [cdkDropListConnectedTo]=\"[selList]\" \r\n        (cdkDropListDropped)=\"dragOntoLeftItems($event)\">\r\n            <span class=\"select-box-list-item\" *ngFor=\"let item of originalItems | listFilter:leftFilterText\" \r\n                [ngClass]=\"item.selected ? 'selected' : ''\"\r\n                (click)=\"item.selected= (!disabled && !item.selected)\" \r\n                cdkDrag [cdkDragDisabled]=\"disabled || !item.selected\">\r\n                {{item.value}}\r\n                <div *cdkDragPlaceholder class=\"select-box-placeholder vertical\">\r\n                    <span *ngFor=\"let leftPreview of getLeftSelectedList()\">{{leftPreview.value}}</span>\r\n                </div>\r\n                <div *cdkDragPreview class=\"select-box-preview vertical\">\r\n                    <span *ngFor=\"let leftPreview of getLeftSelectedList()\">{{leftPreview.value}}</span>\r\n                </div>\r\n            </span>\r\n        </div>\r\n        <div *ngIf=\"!disabled && selectAll\"><input type=\"checkbox\" (change)=\"selectAllOnLeft($event)\"\r\n            class=\"selectbox-selectall\" [disabled]=\"disabled\"> Select All</div>\r\n    </div>\r\n\r\n    <div class=\"select-box-buttons\">\r\n        <button class=\"select-box-button\" type=\"button\" (click)=\"addItems()\" \r\n            [disabled]=\"disabled\">&gt;</button>\r\n        <button class=\"select-box-button\" type=\"button\" (click)=\"removeItems()\" \r\n            [disabled]=\"disabled\">&lt;</button>\r\n    </div>\r\n\r\n\r\n    <div class=\"vertical\">\r\n        <input *ngIf=\"!disabled && search\" type=\"text\" class=\"selectbox-search\" [(ngModel)]=\"rightFilterText\" \r\n            [disabled]=\"disabled\" placeholder=\"Search..\"/>\r\n        <div class=\"select-box-list vertical\" cdkDropList #selList=\"cdkDropList\" [cdkDropListConnectedTo]=\"[origList]\" \r\n        (cdkDropListDropped)=\"dragOntoRightItems($event)\">\r\n            <span class=\"select-box-list-item\" *ngFor=\"let item of selectedItems | listFilter:rightFilterText\" \r\n                [ngClass]=\"item.selected ? 'selected' : ''\"\r\n                (click)=\"item.selected= (!disabled && !item.selected)\" \r\n                cdkDrag [cdkDragDisabled]=\"disabled || !item.selected\">\r\n                {{item.value}}\r\n                <div *cdkDragPlaceholder class=\"select-box-placeholder vertical\">\r\n                    <span *ngFor=\"let rightPreview of getRightSelectedList()\">{{rightPreview.value}}</span>\r\n                </div>\r\n                <div *cdkDragPreview class=\"select-box-preview vertical\">\r\n                    <span *ngFor=\"let rightPreview of getRightSelectedList()\">{{rightPreview.value}}</span>\r\n                </div>\r\n            </span>\r\n        </div>\r\n        <div *ngIf=\"!disabled && selectAll\"><input type=\"checkbox\" (change)=\"selectAllOnRight($event)\" \r\n            class=\"selectbox-selectall\" [disabled]=\"disabled\"> Select All</div>\r\n    </div>\r\n\r\n</div>","styles":[".select-box-list-container{display:flex;flex-direction:row}.vertical{display:flex;flex-direction:column}.select-box-list{border:1px solid gray;width:250px;height:250px;overflow-y:scroll}.select-box-list::-webkit-scrollbar{width:12px}.select-box-list::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:10px}.select-box-list::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)}.select-box-list-item{padding:10px;border:1px solid gray;border-radius:25px}.select-box-list-item.selected{background-color:#00f}.select-box-buttons{vertical-align:center;padding:20px;display:flex;flex-direction:column;width:50px;height:250px}.select-box-placeholder span,.select-box-preview span{background-color:#00f;border:.25px solid gray;border-radius:25px;padding:10px}.selectbox-search{height:25px}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"list":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"sort":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"selectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"selectedList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3},"arguments":["value"]}]}],"ngOnInit":[{"__symbolic":"method"}],"getLeftSelectedList":[{"__symbolic":"method"}],"getRightSelectedList":[{"__symbolic":"method"}],"addItems":[{"__symbolic":"method"}],"removeItems":[{"__symbolic":"method"}],"moveItems":[{"__symbolic":"method"}],"dragOntoRightItems":[{"__symbolic":"method"}],"dragOntoLeftItems":[{"__symbolic":"method"}],"changeItemPosition":[{"__symbolic":"method"}],"selectAllOnLeft":[{"__symbolic":"method"}],"selectAllOnRight":[{"__symbolic":"method"}],"changeSelection":[{"__symbolic":"method"}],"setSelectedValues":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"SelectBoxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":9,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":11,"character":4},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":12,"character":4}],"declarations":[{"__symbolic":"reference","name":"SelectBoxComponent"},{"__symbolic":"reference","name":"ListFilterPipe"}],"exports":[{"__symbolic":"reference","name":"SelectBoxComponent"},{"__symbolic":"reference","name":"ListFilterPipe"}]}]}],"members":{}},"ListFilterPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"listFilter"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"SelectBoxService":"./lib/select-box.service","AUI_SELECT_BOX_ACCESSOR":"./lib/select-box.component","SelectBoxComponent":"./lib/select-box.component","SelectBoxModule":"./lib/select-box.module","ListFilterPipe":"./lib/list-filter.pipe"},"importAs":"aui-select-box"}