primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![npm downloads](https://img.shields.io/npm/dm/primeng.sv
1 lines • 11.7 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"OrderList":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"p-orderList","template":"\n <div [ngClass]=\"{'p-orderlist p-component': true, 'p-orderlist-controls-left': controlsPosition === 'left',\n 'p-orderlist-controls-right': controlsPosition === 'right'}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div class=\"p-orderlist-controls\">\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-up\" (click)=\"moveUp()\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-double-up\" (click)=\"moveTop()\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-down\" (click)=\"moveDown()\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-double-down\" (click)=\"moveBottom()\"></button>\n </div>\n <div class=\"p-orderlist-list-container\">\n <div class=\"p-orderlist-header\" *ngIf=\"header || headerTemplate\">\n <div class=\"p-orderlist-title\" *ngIf=\"!headerTemplate\">{{header}}</div>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n <div class=\"p-orderlist-filter-container\" *ngIf=\"filterBy\">\n <div class=\"p-orderlist-filter\">\n <input type=\"text\" role=\"textbox\" (keyup)=\"onFilterKeyup($event)\" class=\"p-orderlist-filter-input p-inputtext p-component\" [attr.placeholder]=\"filterPlaceholder\" [attr.aria-label]=\"ariaFilterLabel\">\n <span class=\"p-orderlist-filter-icon pi pi-search\"></span>\n </div>\n </div>\n <ul #listelement cdkDropList (cdkDropListDropped)=\"onDrop($event)\" class=\"p-orderlist-list\" [ngStyle]=\"listStyle\">\n <ng-template ngFor [ngForTrackBy]=\"trackBy\" let-item [ngForOf]=\"value\" let-i=\"index\" let-l=\"last\">\n <li class=\"p-orderlist-item\" tabindex=\"0\" [ngClass]=\"{'p-highlight':isSelected(item)}\" cdkDrag pRipple [cdkDragData]=\"item\" [cdkDragDisabled]=\"!dragdrop\"\n (click)=\"onItemClick($event,item,i)\" (touchend)=\"onItemTouchEnd()\" (keydown)=\"onItemKeydown($event,item,i)\"\n *ngIf=\"isItemVisible(item)\" role=\"option\" [attr.aria-selected]=\"isSelected(item)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n </ng-template>\n <ng-container *ngIf=\"isEmpty() && (emptyMessageTemplate || emptyFilterMessageTemplate)\">\n <li *ngIf=\"!filterValue || !emptyFilterMessageTemplate\" class=\"p-orderlist-empty-message\">\n <ng-container *ngTemplateOutlet=\"emptyMessageTemplate\"></ng-container>\n </li>\n <li *ngIf=\"filterValue\" class=\"p-orderlist-empty-message\">\n <ng-container *ngTemplateOutlet=\"emptyFilterMessageTemplate\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </div>\n </div>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":51,"character":21},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":52,"character":19},"member":"None"},"styles":[".p-orderlist{display:flex}.p-orderlist-controls{display:flex;flex-direction:column;justify-content:center}.p-orderlist-list-container{flex:1 1 auto}.p-orderlist-list{list-style-type:none;margin:0;min-height:12rem;overflow:auto;padding:0}.p-orderlist-item{cursor:pointer;display:block;overflow:hidden;position:relative}.p-orderlist-item:not(.cdk-drag-disabled){cursor:move}.p-orderlist-item.cdk-drag-placeholder{opacity:0}.p-orderlist-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.p-orderlist.p-state-disabled .p-button,.p-orderlist.p-state-disabled .p-orderlist-item{cursor:default}.p-orderlist.p-state-disabled .p-orderlist-list{overflow:hidden}.p-orderlist-filter{position:relative}.p-orderlist-filter-icon{margin-top:-.5rem;position:absolute;top:50%}.p-orderlist-filter-input{width:100%}.p-orderlist-controls-right .p-orderlist-controls{order:2}.p-orderlist-controls-right .p-orderlist-list-container{order:1}.p-orderlist-list.cdk-drop-list-dragging .p-orderlist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"listStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"filterBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"filterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"filterLocale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":73,"character":5}}]}],"dragdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"controlsPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"ariaFilterLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"filterMatchMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"breakpoint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":85,"character":5}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"onReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":89,"character":5}}]}],"onSelectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":5}}]}],"onFilterEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"listViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":95,"character":5},"arguments":["listelement"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":97,"character":5},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"PrimeTemplate","line":97,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":125,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":125,"character":50},{"__symbolic":"reference","module":"primeng/api","name":"FilterService","line":125,"character":91}]}],"selection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":189,"character":5}}]}],"onItemClick":[{"__symbolic":"method"}],"onFilterKeyup":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"isItemVisible":[{"__symbolic":"method"}],"onItemTouchEnd":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"isEmpty":[{"__symbolic":"method"}],"moveUp":[{"__symbolic":"method"}],"moveTop":[{"__symbolic":"method"}],"moveDown":[{"__symbolic":"method"}],"moveBottom":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"onItemKeydown":[{"__symbolic":"method"}],"findNextItem":[{"__symbolic":"method"}],"findPrevItem":[{"__symbolic":"method"}],"createStyle":[{"__symbolic":"method"}],"destroyStyle":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"OrderListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":481,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":482,"character":14},{"__symbolic":"reference","module":"primeng/button","name":"ButtonModule","line":482,"character":27},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":482,"character":40},{"__symbolic":"reference","module":"primeng/ripple","name":"RippleModule","line":482,"character":53},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":482,"character":66}],"exports":[{"__symbolic":"reference","name":"OrderList"},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":483,"character":24},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":483,"character":37}],"declarations":[{"__symbolic":"reference","name":"OrderList"}]}]}],"members":{}}},"origins":{"OrderList":"./orderlist","OrderListModule":"./orderlist"},"importAs":"primeng/orderlist"}