ngx-sort
Version:
An angular 4 and above component for sorting list supporting drag and drop sort.
1 lines • 8.77 kB
JSON
[{"__symbolic":"module","version":3,"metadata":{"NgxSortableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-sortable","template":"\n <div class=\"sortable-container\" [style.width]='listStyle.width'>\n <div class=\"sortable-header\">\n <label class=\"sortable-name\">{{name}}</label>\n <div class=\"sortable-buttons\" *ngIf=\"active\">\n <button (click)=\"moveUp()\" [disabled]=\"!selectedItem\" title=\"Move Up\">⇧</button>\n <button (click)=\"moveDown()\" [disabled]=\"!selectedItem\" title=\"Move Down\">⇩</button>\n </div>\n </div>\n <ul class=\"sortable-list\" [style.height]='listStyle.height'>\n <li [draggable]=\"active\" (click)=\"selectItem(item)\" *ngFor=\"let item of items; let i = index;\" [ngClass]=\"{'active': item == selectedItem}\"\n (drop)=\"onDrop($event, i)\" (dragover)=\"allowDrop($event,i)\" (dragstart)=\"onDragStart($event, i)\">\n <div class=\"drop-zone\" [style.height]=\"listStyle.dropZoneHeight\" *ngIf=\"onDragOverIndex == i\">\n </div>\n <ng-template ngFor [ngForOf]=\"[item]\" [ngForTemplate]=\"itemTemplate\">\n </ng-template>\n </li>\n </ul>\n </div>\n ","styles":["\n .sortable-container{width:100%;border:1px solid #d9d9d9;border-radius:3px}.sortable-container .sortable-header{width:auto;padding:5px;background:lightgray;border-bottom:1px solid #d9d9d9;height:30px;background-image:linear-gradient(#f6f7f9 0%, #ebedf0 100%);box-sizing:content-box;color:black}.sortable-container .sortable-header .sortable-name{vertical-align:middle;font-size:25px}.sortable-container .sortable-header .sortable-buttons{float:right;height:100%;box-sizing:border-box}.sortable-container .sortable-header .sortable-buttons button{height:30px;width:30px;vertical-align:middle;display:inline-block;box-sizing:border-box;margin-left:5px;border:1px solid #2399e5;color:#FFFFFF;background:#2399e5;-webkit-transition:background-color .2s;-moz-transition:background-color .2s;transition:background-color .2s;border-radius:5px;outline:none}.sortable-container .sortable-header .sortable-buttons button:disabled{cursor:not-allowed}.sortable-container .sortable-header .sortable-buttons button:active,.sortable-container .sortable-header .sortable-buttons button:hover{border:1px solid #156090;background:#186ba0;color:#ffffff}.sortable-container .sortable-header .sortable-buttons button:active:enabled,.sortable-container .sortable-header .sortable-buttons button:hover:enabled{cursor:pointer}.sortable-container .sortable-list{list-style-type:none;margin:0;padding:0px;overflow:auto}.sortable-container .sortable-list .drop-zone{height:30px;background:rgba(225,219,250,0.5);opacity:0.5px;border:2px dotted #e1dbfa}.sortable-container .sortable-list .active{background:#3f94e9 !important;color:white}\n "]}]}],"members":{"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"listStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"listSorted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"selectItem":[{"__symbolic":"method"}],"moveUp":[{"__symbolic":"method"}],"moveDown":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"allowDrop":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"handleDrop":[{"__symbolic":"method"}],"swapElements":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"NgxSortableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ngx-sortable","template":"\n <div class=\"sortable-container\" [style.width]='listStyle.width'>\n <div class=\"sortable-header\">\n <label class=\"sortable-name\">{{name}}</label>\n <div class=\"sortable-buttons\" *ngIf=\"active\">\n <button (click)=\"moveUp()\" [disabled]=\"!selectedItem\" title=\"Move Up\">⇧</button>\n <button (click)=\"moveDown()\" [disabled]=\"!selectedItem\" title=\"Move Down\">⇩</button>\n </div>\n </div>\n <ul class=\"sortable-list\" [style.height]='listStyle.height'>\n <li [draggable]=\"active\" (click)=\"selectItem(item)\" *ngFor=\"let item of items; let i = index;\" [ngClass]=\"{'active': item == selectedItem}\"\n (drop)=\"onDrop($event, i)\" (dragover)=\"allowDrop($event,i)\" (dragstart)=\"onDragStart($event, i)\">\n <div class=\"drop-zone\" [style.height]=\"listStyle.dropZoneHeight\" *ngIf=\"onDragOverIndex == i\">\n </div>\n <ng-template ngFor [ngForOf]=\"[item]\" [ngForTemplate]=\"itemTemplate\">\n </ng-template>\n </li>\n </ul>\n </div>\n ","styles":["\n .sortable-container{width:100%;border:1px solid #d9d9d9;border-radius:3px}.sortable-container .sortable-header{width:auto;padding:5px;background:lightgray;border-bottom:1px solid #d9d9d9;height:30px;background-image:linear-gradient(#f6f7f9 0%, #ebedf0 100%);box-sizing:content-box;color:black}.sortable-container .sortable-header .sortable-name{vertical-align:middle;font-size:25px}.sortable-container .sortable-header .sortable-buttons{float:right;height:100%;box-sizing:border-box}.sortable-container .sortable-header .sortable-buttons button{height:30px;width:30px;vertical-align:middle;display:inline-block;box-sizing:border-box;margin-left:5px;border:1px solid #2399e5;color:#FFFFFF;background:#2399e5;-webkit-transition:background-color .2s;-moz-transition:background-color .2s;transition:background-color .2s;border-radius:5px;outline:none}.sortable-container .sortable-header .sortable-buttons button:disabled{cursor:not-allowed}.sortable-container .sortable-header .sortable-buttons button:active,.sortable-container .sortable-header .sortable-buttons button:hover{border:1px solid #156090;background:#186ba0;color:#ffffff}.sortable-container .sortable-header .sortable-buttons button:active:enabled,.sortable-container .sortable-header .sortable-buttons button:hover:enabled{cursor:pointer}.sortable-container .sortable-list{list-style-type:none;margin:0;padding:0px;overflow:auto}.sortable-container .sortable-list .drop-zone{height:30px;background:rgba(225,219,250,0.5);opacity:0.5px;border:2px dotted #e1dbfa}.sortable-container .sortable-list .active{background:#3f94e9 !important;color:white}\n "]}]}],"members":{"active":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"listStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"listSorted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"selectItem":[{"__symbolic":"method"}],"moveUp":[{"__symbolic":"method"}],"moveDown":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"allowDrop":[{"__symbolic":"method"}],"onDragStart":[{"__symbolic":"method"}],"handleDrop":[{"__symbolic":"method"}],"swapElements":[{"__symbolic":"method"}]}}}}]