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 • 15.7 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"LISTBOX_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":10,"character":13},"useExisting":{"__symbolic":"reference","name":"Listbox"},"multi":true},"Listbox":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"p-listbox","template":"\n <div [ngClass]=\"{'p-listbox p-component': true, 'p-disabled': disabled}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div class=\"p-listbox-header\" *ngIf=\"headerFacet || headerTemplate\">\n <ng-content select=\"p-header\"></ng-content>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </div>\n <div class=\"p-listbox-header\" *ngIf=\"(checkbox && multiple && showToggleAll) || filter\">\n <div class=\"p-checkbox p-component\" *ngIf=\"checkbox && multiple && showToggleAll\" [ngClass]=\"{'p-checkbox-disabled': disabled || toggleAllDisabled}\">\n <div class=\"p-hidden-accessible\">\n <input type=\"checkbox\" readonly=\"readonly\" [checked]=\"allChecked\" (focus)=\"onHeaderCheckboxFocus()\" (blur)=\"onHeaderCheckboxBlur()\" (keydown.space)=\"toggleAll($event)\" [attr.disabled]=\"disabled || toggleAllDisabled\">\n </div>\n <div #headerchkbox class=\"p-checkbox-box\" [ngClass]=\"{'p-highlight': allChecked, 'p-focus': headerCheckboxFocus, 'p-disabled': disabled || toggleAllDisabled}\" (click)=\"toggleAll($event)\">\n <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check':allChecked}\"></span>\n </div>\n </div>\n <div class=\"p-listbox-filter-container\" *ngIf=\"filter\">\n <input type=\"text\" [value]=\"filterValue||''\" (input)=\"onFilter($event)\" class=\"p-listbox-filter p-inputtext p-component\" [disabled]=\"disabled\" [attr.placeholder]=\"filterPlaceHolder\" [attr.aria-label]=\"ariaFilterLabel\">\n <span class=\"p-listbox-filter-icon pi pi-search\"></span>\n </div>\n </div>\n <div [ngClass]=\"'p-listbox-list-wrapper'\" [ngStyle]=\"listStyle\" [class]=\"listStyleClass\">\n <ul class=\"p-listbox-list\" role=\"listbox\" aria-multiselectable=\"multiple\">\n <ng-container *ngIf=\"group\">\n <ng-template ngFor let-optgroup [ngForOf]=\"optionsToRender\">\n <li class=\"p-listbox-item-group\">\n <span *ngIf=\"!groupTemplate\">{{getOptionGroupLabel(optgroup)||'empty'}}</span>\n <ng-container *ngTemplateOutlet=\"groupTemplate; context: {$implicit: optgroup}\"></ng-container>\n </li>\n <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: getOptionGroupChildren(optgroup)}\"></ng-container>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"!group\">\n <ng-container *ngTemplateOutlet=\"itemslist; context: {$implicit: optionsToRender}\"></ng-container>\n </ng-container>\n <ng-template #itemslist let-optionsToDisplay>\n <li *ngFor=\"let option of optionsToDisplay; let i = index;\" [attr.tabindex]=\"disabled || isOptionDisabled(option) ? null : '0'\" pRipple\n [ngClass]=\"{'p-listbox-item':true,'p-highlight':isSelected(option), 'p-disabled': this.isOptionDisabled(option)}\" role=\"option\" [attr.aria-label]=\"getOptionLabel(option)\"\n [attr.aria-selected]=\"isSelected(option)\" (click)=\"onOptionClick($event,option)\" (dblclick)=\"onOptionDoubleClick($event,option)\" (touchend)=\"onOptionTouchEnd(option)\" (keydown)=\"onOptionKeyDown($event,option)\">\n <div class=\"p-checkbox p-component\" *ngIf=\"checkbox && multiple\" [ngClass]=\"{'p-checkbox-disabled': disabled || isOptionDisabled(option)}\">\n <div class=\"p-checkbox-box\" [ngClass]=\"{'p-highlight':isSelected(option)}\">\n <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check':isSelected(option)}\"></span>\n </div>\n </div>\n <span *ngIf=\"!itemTemplate\">{{getOptionLabel(option)}}</span>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: option, index: i}\"></ng-container>\n </li>\n <li *ngIf=\"hasFilter() && isEmpty(optionsToDisplay)\" class=\"p-listbox-empty-message\">\n <ng-container *ngIf=\"!emptyFilterTemplate && !emptyTemplate; else emptyFilter\">\n {{emptyFilterMessageLabel}}\n </ng-container>\n <ng-container #emptyFilter *ngTemplateOutlet=\"emptyFilterTemplate || emptyTemplate\"></ng-container>\n </li>\n <li *ngIf=\"!hasFilter() && isEmpty(optionsToDisplay)\" class=\"p-listbox-empty-message\">\n <ng-container *ngIf=\"!emptyTemplate; else empty\">\n {{emptyMessageLabel}}\n </ng-container>\n <ng-container #empty *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n </li>\n </ng-template>\n </ul>\n </div>\n <div class=\"p-listbox-footer\" *ngIf=\"footerFacet || footerTemplate\">\n <ng-content select=\"p-footer\"></ng-content>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n </div>\n ","providers":[{"__symbolic":"reference","name":"LISTBOX_VALUE_ACCESSOR"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":85,"character":21},"member":"OnPush"},"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":86,"character":19},"member":"None"},"styles":[".p-listbox-list-wrapper{overflow:auto}.p-listbox-list{list-style-type:none;margin:0;padding:0}.p-listbox-item{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;overflow:hidden;position:relative;user-select:none}.p-listbox-header,.p-listbox-item{align-items:center;display:flex}.p-listbox-filter-container{flex:1 1 auto;position:relative}.p-listbox-filter-icon{margin-top:-.5rem;position:absolute;top:50%}.p-listbox-filter{width:100%}"]}]}],"members":{"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"styleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":5}}]}],"listStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"listStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":103,"character":5}}]}],"checkbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":5}}]}],"filterMatchMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":109,"character":5}}]}],"filterLocale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":111,"character":5}}]}],"metaKeySelection":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":113,"character":5}}]}],"dataKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":115,"character":5}}]}],"showToggleAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":117,"character":5}}]}],"optionLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":119,"character":5}}]}],"optionValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":121,"character":5}}]}],"optionGroupChildren":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"optionGroupLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":5}}]}],"optionDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"ariaFilterLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"filterPlaceHolder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":131,"character":5}}]}],"emptyFilterMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":133,"character":5}}]}],"emptyMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":135,"character":5}}]}],"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":137,"character":5}}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":139,"character":5}}]}],"onClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":141,"character":5}}]}],"onDblClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":143,"character":5}}]}],"headerCheckboxViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":145,"character":5},"arguments":["headerchkbox"]}]}],"headerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":147,"character":5},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"Header","line":147,"character":18}]}]}],"footerFacet":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":149,"character":5},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"Footer","line":149,"character":18}]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":151,"character":5},"arguments":[{"__symbolic":"reference","module":"primeng/api","name":"PrimeTemplate","line":151,"character":21}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":187,"character":27},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":187,"character":50},{"__symbolic":"reference","module":"primeng/api","name":"FilterService","line":187,"character":91},{"__symbolic":"reference","module":"primeng/api","name":"PrimeNGConfig","line":187,"character":121}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":189,"character":5}}]}],"filterValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":200,"character":5}}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"getOptionLabel":[{"__symbolic":"method"}],"getOptionGroupChildren":[{"__symbolic":"method"}],"getOptionGroupLabel":[{"__symbolic":"method"}],"getOptionValue":[{"__symbolic":"method"}],"isOptionDisabled":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"onOptionClick":[{"__symbolic":"method"}],"onOptionTouchEnd":[{"__symbolic":"method"}],"onOptionDoubleClick":[{"__symbolic":"method"}],"onOptionClickSingle":[{"__symbolic":"method"}],"onOptionClickMultiple":[{"__symbolic":"method"}],"onOptionClickCheckbox":[{"__symbolic":"method"}],"removeOption":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"hasFilter":[{"__symbolic":"method"}],"isEmpty":[{"__symbolic":"method"}],"onFilter":[{"__symbolic":"method"}],"activateFilter":[{"__symbolic":"method"}],"toggleAll":[{"__symbolic":"method"}],"checkAll":[{"__symbolic":"method"}],"uncheckAll":[{"__symbolic":"method"}],"onOptionKeyDown":[{"__symbolic":"method"}],"findNextItem":[{"__symbolic":"method"}],"findPrevItem":[{"__symbolic":"method"}],"onHeaderCheckboxFocus":[{"__symbolic":"method"}],"onHeaderCheckboxBlur":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ListboxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":716,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":717,"character":14},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":717,"character":28},{"__symbolic":"reference","module":"primeng/ripple","name":"RippleModule","line":717,"character":42}],"exports":[{"__symbolic":"reference","name":"Listbox"},{"__symbolic":"reference","module":"primeng/api","name":"SharedModule","line":718,"character":23}],"declarations":[{"__symbolic":"reference","name":"Listbox"}]}]}],"members":{}}},"origins":{"LISTBOX_VALUE_ACCESSOR":"./listbox","Listbox":"./listbox","ListboxModule":"./listbox"},"importAs":"primeng/listbox"}