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 • 21.1 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"PickList":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"p-pickList","template":"\n <div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"'p-picklist p-component'\" cdkDropListGroup>\n <div class=\"p-picklist-buttons p-picklist-source-controls\" *ngIf=\"showSourceControls\">\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-up\" [disabled]=\"disabled\" (click)=\"moveUp(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-double-up\" [disabled]=\"disabled\" (click)=\"moveTop(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-down\" [disabled]=\"disabled\" (click)=\"moveDown(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-double-down\" [disabled]=\"disabled\" (click)=\"moveBottom(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)\"></button>\n </div>\n <div class=\"p-picklist-list-wrapper p-picklist-source-wrapper\">\n <div class=\"p-picklist-header\" *ngIf=\"sourceHeader || sourceHeaderTemplate\">\n <div class=\"p-picklist-title\" *ngIf=\"!sourceHeaderTemplate\">{{sourceHeader}}</div>\n <ng-container *ngTemplateOutlet=\"sourceHeaderTemplate\"></ng-container>\n </div>\n <div class=\"p-picklist-filter-container\" *ngIf=\"filterBy && showSourceFilter !== false\">\n <div class=\"p-picklist-filter\">\n <input #sourceFilter type=\"text\" role=\"textbox\" (keyup)=\"onFilter($event,source,SOURCE_LIST)\" class=\"p-picklist-filter-input p-inputtext p-component\" [disabled]=\"disabled\" [attr.placeholder]=\"sourceFilterPlaceholder\" [attr.aria-label]=\"ariaSourceFilterLabel\">\n <span class=\"p-picklist-filter-icon pi pi-search\"></span>\n </div>\n </div>\n \n <ul #sourcelist class=\"p-picklist-list p-picklist-source\" cdkDropList [cdkDropListData]=\"source\" (cdkDropListDropped)=\"onDrop($event, SOURCE_LIST)\"\n [ngStyle]=\"sourceStyle\" role=\"listbox\" aria-multiselectable=\"multiple\">\n <ng-template ngFor let-item [ngForOf]=\"source\" [ngForTrackBy]=\"sourceTrackBy || trackBy\" let-i=\"index\" let-l=\"last\">\n <li [ngClass]=\"{'p-picklist-item':true,'p-highlight':isSelected(item,selectedItemsSource),'p-disabled': disabled}\" pRipple cdkDrag [cdkDragData]=\"item\" [cdkDragDisabled]=\"!dragdrop\"\n (click)=\"onItemClick($event,item,selectedItemsSource,onSourceSelect)\" (dblclick)=\"onSourceItemDblClick()\" (touchend)=\"onItemTouchEnd()\" (keydown)=\"onItemKeydown($event,item,selectedItemsSource,onSourceSelect)\"\n *ngIf=\"isItemVisible(item, SOURCE_LIST)\" tabindex=\"0\" role=\"option\" [attr.aria-selected]=\"isSelected(item, selectedItemsSource)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n </ng-template>\n <ng-container *ngIf=\"isEmpty(SOURCE_LIST) && (emptyMessageSourceTemplate || emptyFilterMessageSourceTemplate)\">\n <li class=\"p-picklist-empty-message\" *ngIf=\"!filterValueSource || !emptyFilterMessageSourceTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyMessageSourceTemplate\"></ng-container>\n </li>\n <li class=\"p-picklist-empty-message\" *ngIf=\"filterValueSource\">\n <ng-container *ngTemplateOutlet=\"emptyFilterMessageSourceTemplate\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </div>\n <div class=\"p-picklist-buttons p-picklist-transfer-buttons\">\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-right\" [disabled]=\"disabled\" (click)=\"moveRight()\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-double-right\" [disabled]=\"disabled\" (click)=\"moveAllRight()\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-left\" [disabled]=\"disabled\" (click)=\"moveLeft()\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-double-left\" [disabled]=\"disabled\" (click)=\"moveAllLeft()\"></button>\n </div>\n <div class=\"p-picklist-list-wrapper p-picklist-target-wrapper\">\n <div class=\"p-picklist-header\" *ngIf=\"targetHeader || targetHeaderTemplate\">\n <div class=\"p-picklist-title\" *ngIf=\"!targetHeaderTemplate\">{{targetHeader}}</div>\n <ng-container *ngTemplateOutlet=\"targetHeaderTemplate\"></ng-container>\n </div>\n <div class=\"p-picklist-filter-container\" *ngIf=\"filterBy && showTargetFilter !== false\">\n <div class=\"p-picklist-filter\">\n <input #targetFilter type=\"text\" role=\"textbox\" (keyup)=\"onFilter($event,target,TARGET_LIST)\" class=\"p-picklist-filter-input p-inputtext p-component\" [disabled]=\"disabled\" [attr.placeholder]=\"targetFilterPlaceholder\" [attr.aria-label]=\"ariaTargetFilterLabel\">\n <span class=\"p-picklist-filter-icon pi pi-search\"></span>\n </div>\n </div>\n <ul #targetlist class=\"p-picklist-list p-picklist-target\" cdkDropList [cdkDropListData]=\"target\" (cdkDropListDropped)=\"onDrop($event, TARGET_LIST)\"\n [ngStyle]=\"targetStyle\" role=\"listbox\" aria-multiselectable=\"multiple\">\n <ng-template ngFor let-item [ngForOf]=\"target\" [ngForTrackBy]=\"targetTrackBy || trackBy\" let-i=\"index\" let-l=\"last\">\n <li [ngClass]=\"{'p-picklist-item':true,'p-highlight':isSelected(item,selectedItemsTarget), 'p-disabled': disabled}\" pRipple cdkDrag [cdkDragData]=\"item\" [cdkDragDisabled]=\"!dragdrop\"\n (click)=\"onItemClick($event,item,selectedItemsTarget,onTargetSelect)\" (dblclick)=\"onTargetItemDblClick()\" (touchend)=\"onItemTouchEnd()\" (keydown)=\"onItemKeydown($event,item,selectedItemsTarget,onTargetSelect)\"\n *ngIf=\"isItemVisible(item, TARGET_LIST)\" tabindex=\"0\" role=\"option\" [attr.aria-selected]=\"isSelected(item, selectedItemsTarget)\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n </li>\n </ng-template>\n <ng-container *ngIf=\"isEmpty(TARGET_LIST) && (emptyMessageTargetTemplate || emptyFilterMessageTargetTemplate)\">\n <li class=\"p-picklist-empty-message\" *ngIf=\"!filterValueTarget || !emptyFilterMessageTargetTemplate\">\n <ng-container *ngTemplateOutlet=\"emptyMessageTargetTemplate\"></ng-container>\n </li>\n <li class=\"p-picklist-empty-message\" *ngIf=\"filterValueTarget\">\n <ng-container *ngTemplateOutlet=\"emptyFilterMessageTargetTemplate\"></ng-container>\n </li>\n </ng-container>\n </ul>\n </div>\n <div class=\"p-picklist-buttons p-picklist-target-controls\" *ngIf=\"showTargetControls\">\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-up\" [disabled]=\"disabled\" (click)=\"moveUp(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-double-up\" [disabled]=\"disabled\" (click)=\"moveTop(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-down\" [disabled]=\"disabled\" (click)=\"moveDown(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)\"></button>\n <button type=\"button\" pButton pRipple icon=\"pi pi-angle-double-down\" [disabled]=\"disabled\" (click)=\"moveBottom(targetlist,target,selectedItemsTarget,onTargetReorder,TARGET_LIST)\"></button>\n </div>\n </div>\n ","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":94,"character":21},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":95,"character":19},"member":"None"},"styles":[".p-picklist{display:flex}.p-picklist-buttons{display:flex;flex-direction:column;justify-content:center}.p-picklist-list-wrapper{flex:1 1 50%}.p-picklist-list{list-style-type:none;margin:0;min-height:12rem;overflow:auto;padding:0}.p-picklist-item{cursor:pointer;display:block;overflow:hidden;position:relative}.p-picklist-item:not(.cdk-drag-disabled){cursor:move}.p-picklist-item.cdk-drag-placeholder{opacity:0}.p-picklist-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.p-picklist-filter{position:relative}.p-picklist-filter-icon{margin-top:-.5rem;position:absolute;top:50%}.p-picklist-filter-input{width:100%}.p-picklist-list.cdk-drop-list-dragging .p-picklist-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}"]}]}],"members":{"source":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":5}}]}],"target":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"sourceHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":5}}]}],"targetHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"responsive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":108,"character":5}}]}],"filterBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":5}}]}],"filterLocale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":112,"character":5}}]}],"trackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":5}}]}],"sourceTrackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":116,"character":5}}]}],"targetTrackBy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":5}}]}],"showSourceFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":120,"character":5}}]}],"showTargetFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":5}}]}],"dragdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":126,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":130,"character":5}}]}],"sourceStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"targetStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":134,"character":5}}]}],"showSourceControls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":136,"character":5}}]}],"showTargetControls":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":138,"character":5}}]}],"sourceFilterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":140,"character":5}}]}],"targetFilterPlaceholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":142,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":144,"character":5}}]}],"ariaSourceFilterLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":146,"character":5}}]}],"ariaTargetFilterLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":148,"character":5}}]}],"filterMatchMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":150,"character":5}}]}],"breakpoint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":152,"character":5}}]}],"onMoveToSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":154,"character":5}}]}],"onMoveAllToSource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":156,"character":5}}]}],"onMoveAllToTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":158,"character":5}}]}],"onMoveToTarget":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":160,"character":5}}]}],"onSourceReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":162,"character":5}}]}],"onTargetReorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":164,"character":5}}]}],"onSourceSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":166,"character":5}}]}],"onTargetSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":168,"character":5}}]}],"onSourceFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":170,"character":5}}]}],"onTargetFilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":172,"character":5}}]}],"listViewSourceChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":174,"character":5},"arguments":["sourcelist"]}]}],"listViewTargetChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":176,"character":5},"arguments":["targetlist"]}]}],"sourceFilterViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":178,"character":5},"arguments":["sourceFilter"]}]}],"targetFilterViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":180,"character":5},"arguments":["targetFilter"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":182,"character":5},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"PrimeTemplate","line":182,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":228,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":228,"character":50},{"__symbolic":"reference","module":"primeng/api","name":"FilterService","line":228,"character":91}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onItemClick":[{"__symbolic":"method"}],"onSourceItemDblClick":[{"__symbolic":"method"}],"onTargetItemDblClick":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"filter":[{"__symbolic":"method"}],"isItemVisible":[{"__symbolic":"method"}],"isEmpty":[{"__symbolic":"method"}],"isVisibleInList":[{"__symbolic":"method"}],"onItemTouchEnd":[{"__symbolic":"method"}],"sortByIndexInList":[{"__symbolic":"method"}],"moveUp":[{"__symbolic":"method"}],"moveTop":[{"__symbolic":"method"}],"moveDown":[{"__symbolic":"method"}],"moveBottom":[{"__symbolic":"method"}],"moveRight":[{"__symbolic":"method"}],"moveAllRight":[{"__symbolic":"method"}],"moveLeft":[{"__symbolic":"method"}],"moveAllLeft":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"findIndexInSelection":[{"__symbolic":"method"}],"onDrop":[{"__symbolic":"method"}],"getDropIndexes":[{"__symbolic":"method"}],"findFilteredCurrentIndex":[{"__symbolic":"method"}],"resetFilter":[{"__symbolic":"method"}],"onItemKeydown":[{"__symbolic":"method"}],"findNextItem":[{"__symbolic":"method"}],"findPrevItem":[{"__symbolic":"method"}],"createStyle":[{"__symbolic":"method"}],"destroyStyle":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"PickListModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":804,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":805,"character":14},{"__symbolic":"reference","module":"primeng/button","name":"ButtonModule","line":805,"character":27},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":805,"character":40},{"__symbolic":"reference","module":"primeng/ripple","name":"RippleModule","line":805,"character":53},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":805,"character":66}],"exports":[{"__symbolic":"reference","name":"PickList"},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":806,"character":23},{"__symbolic":"reference","module":"@angular/cdk/drag-drop","name":"DragDropModule","line":806,"character":36}],"declarations":[{"__symbolic":"reference","name":"PickList"}]}]}],"members":{}}},"origins":{"PickList":"./picklist","PickListModule":"./picklist"},"importAs":"primeng/picklist"}