source: trip-planner-front/node_modules/primeng/fesm2020/primeng-listbox.mjs

Last change on this file was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos
  • Property mode set to 100644
File size: 33.3 KB
RevLine 
[59329aa]1import * as i0 from '@angular/core';
2import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
3import * as i2 from '@angular/common';
4import { CommonModule } from '@angular/common';
5import * as i1 from 'primeng/api';
6import { TranslationKeys, Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
7import { DomHandler } from 'primeng/dom';
8import { ObjectUtils } from 'primeng/utils';
9import { NG_VALUE_ACCESSOR } from '@angular/forms';
10import * as i3 from 'primeng/ripple';
11import { RippleModule } from 'primeng/ripple';
12
13const LISTBOX_VALUE_ACCESSOR = {
14 provide: NG_VALUE_ACCESSOR,
15 useExisting: forwardRef(() => Listbox),
16 multi: true
17};
18class Listbox {
19 constructor(el, cd, filterService, config) {
20 this.el = el;
21 this.cd = cd;
22 this.filterService = filterService;
23 this.config = config;
24 this.checkbox = false;
25 this.filter = false;
26 this.filterMatchMode = 'contains';
27 this.metaKeySelection = true;
28 this.showToggleAll = true;
29 this.optionGroupChildren = "items";
30 this.onChange = new EventEmitter();
31 this.onClick = new EventEmitter();
32 this.onDblClick = new EventEmitter();
33 this.onModelChange = () => { };
34 this.onModelTouched = () => { };
35 }
36 get options() {
37 return this._options;
38 }
39 set options(val) {
40 this._options = val;
41 if (this.hasFilter())
42 this.activateFilter();
43 }
44 get filterValue() {
45 return this._filterValue;
46 }
47 set filterValue(val) {
48 this._filterValue = val;
49 this.activateFilter();
50 }
51 ngOnInit() {
52 this.translationSubscription = this.config.translationObserver.subscribe(() => {
53 this.cd.markForCheck();
54 });
55 }
56 ngAfterContentInit() {
57 this.templates.forEach((item) => {
58 switch (item.getType()) {
59 case 'item':
60 this.itemTemplate = item.template;
61 break;
62 case 'group':
63 this.groupTemplate = item.template;
64 break;
65 case 'header':
66 this.headerTemplate = item.template;
67 break;
68 case 'footer':
69 this.footerTemplate = item.template;
70 break;
71 case 'empty':
72 this.emptyTemplate = item.template;
73 break;
74 case 'emptyfilter':
75 this.emptyFilterTemplate = item.template;
76 break;
77 default:
78 this.itemTemplate = item.template;
79 break;
80 }
81 });
82 }
83 getOptionLabel(option) {
84 return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : (option.label != undefined ? option.label : option);
85 }
86 getOptionGroupChildren(optionGroup) {
87 return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;
88 }
89 getOptionGroupLabel(optionGroup) {
90 return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : (optionGroup.label != undefined ? optionGroup.label : optionGroup);
91 }
92 getOptionValue(option) {
93 return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : (this.optionLabel || option.value === undefined ? option : option.value);
94 }
95 isOptionDisabled(option) {
96 return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : (option.disabled !== undefined ? option.disabled : false);
97 }
98 writeValue(value) {
99 this.value = value;
100 this.cd.markForCheck();
101 }
102 registerOnChange(fn) {
103 this.onModelChange = fn;
104 }
105 registerOnTouched(fn) {
106 this.onModelTouched = fn;
107 }
108 setDisabledState(val) {
109 this.disabled = val;
110 this.cd.markForCheck();
111 }
112 onOptionClick(event, option) {
113 if (this.disabled || this.isOptionDisabled(option) || this.readonly) {
114 return;
115 }
116 if (this.multiple) {
117 if (this.checkbox)
118 this.onOptionClickCheckbox(event, option);
119 else
120 this.onOptionClickMultiple(event, option);
121 }
122 else {
123 this.onOptionClickSingle(event, option);
124 }
125 this.onClick.emit({
126 originalEvent: event,
127 option: option,
128 value: this.value
129 });
130 this.optionTouched = false;
131 }
132 onOptionTouchEnd(option) {
133 if (this.disabled || this.isOptionDisabled(option) || this.readonly) {
134 return;
135 }
136 this.optionTouched = true;
137 }
138 onOptionDoubleClick(event, option) {
139 if (this.disabled || this.isOptionDisabled(option) || this.readonly) {
140 return;
141 }
142 this.onDblClick.emit({
143 originalEvent: event,
144 option: option,
145 value: this.value
146 });
147 }
148 onOptionClickSingle(event, option) {
149 let selected = this.isSelected(option);
150 let valueChanged = false;
151 let metaSelection = this.optionTouched ? false : this.metaKeySelection;
152 if (metaSelection) {
153 let metaKey = (event.metaKey || event.ctrlKey);
154 if (selected) {
155 if (metaKey) {
156 this.value = null;
157 valueChanged = true;
158 }
159 }
160 else {
161 this.value = this.getOptionValue(option);
162 valueChanged = true;
163 }
164 }
165 else {
166 this.value = selected ? null : this.getOptionValue(option);
167 valueChanged = true;
168 }
169 if (valueChanged) {
170 this.onModelChange(this.value);
171 this.onChange.emit({
172 originalEvent: event,
173 value: this.value
174 });
175 }
176 }
177 onOptionClickMultiple(event, option) {
178 let selected = this.isSelected(option);
179 let valueChanged = false;
180 let metaSelection = this.optionTouched ? false : this.metaKeySelection;
181 if (metaSelection) {
182 let metaKey = (event.metaKey || event.ctrlKey);
183 if (selected) {
184 if (metaKey) {
185 this.removeOption(option);
186 }
187 else {
188 this.value = [this.getOptionValue(option)];
189 }
190 valueChanged = true;
191 }
192 else {
193 this.value = (metaKey) ? this.value || [] : [];
194 this.value = [...this.value, this.getOptionValue(option)];
195 valueChanged = true;
196 }
197 }
198 else {
199 if (selected) {
200 this.removeOption(option);
201 }
202 else {
203 this.value = [...this.value || [], this.getOptionValue(option)];
204 }
205 valueChanged = true;
206 }
207 if (valueChanged) {
208 this.onModelChange(this.value);
209 this.onChange.emit({
210 originalEvent: event,
211 value: this.value
212 });
213 }
214 }
215 onOptionClickCheckbox(event, option) {
216 if (this.disabled || this.readonly) {
217 return;
218 }
219 let selected = this.isSelected(option);
220 if (selected) {
221 this.removeOption(option);
222 }
223 else {
224 this.value = this.value ? this.value : [];
225 this.value = [...this.value, this.getOptionValue(option)];
226 }
227 this.onModelChange(this.value);
228 this.onChange.emit({
229 originalEvent: event,
230 value: this.value
231 });
232 }
233 removeOption(option) {
234 this.value = this.value.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.dataKey));
235 }
236 isSelected(option) {
237 let selected = false;
238 let optionValue = this.getOptionValue(option);
239 if (this.multiple) {
240 if (this.value) {
241 for (let val of this.value) {
242 if (ObjectUtils.equals(val, optionValue, this.dataKey)) {
243 selected = true;
244 break;
245 }
246 }
247 }
248 }
249 else {
250 selected = ObjectUtils.equals(this.value, optionValue, this.dataKey);
251 }
252 return selected;
253 }
254 get allChecked() {
255 let optionsToRender = this.optionsToRender;
256 if (!optionsToRender || optionsToRender.length === 0) {
257 return false;
258 }
259 else {
260 let selectedDisabledItemsLength = 0;
261 let unselectedDisabledItemsLength = 0;
262 let selectedEnabledItemsLength = 0;
263 let visibleOptionsLength = this.group ? 0 : this.optionsToRender.length;
264 for (let option of optionsToRender) {
265 if (!this.group) {
266 let disabled = this.isOptionDisabled(option);
267 let selected = this.isSelected(option);
268 if (disabled) {
269 if (selected)
270 selectedDisabledItemsLength++;
271 else
272 unselectedDisabledItemsLength++;
273 }
274 else {
275 if (selected)
276 selectedEnabledItemsLength++;
277 else
278 return false;
279 }
280 }
281 else {
282 for (let opt of this.getOptionGroupChildren(option)) {
283 let disabled = this.isOptionDisabled(opt);
284 let selected = this.isSelected(opt);
285 if (disabled) {
286 if (selected)
287 selectedDisabledItemsLength++;
288 else
289 unselectedDisabledItemsLength++;
290 }
291 else {
292 if (selected)
293 selectedEnabledItemsLength++;
294 else {
295 return false;
296 }
297 }
298 visibleOptionsLength++;
299 }
300 }
301 }
302 return (visibleOptionsLength === selectedDisabledItemsLength
303 || visibleOptionsLength === selectedEnabledItemsLength
304 || selectedEnabledItemsLength && visibleOptionsLength === (selectedEnabledItemsLength + unselectedDisabledItemsLength + selectedDisabledItemsLength));
305 }
306 }
307 get optionsToRender() {
308 return this._filteredOptions || this.options;
309 }
310 get emptyMessageLabel() {
311 return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
312 }
313 get emptyFilterMessageLabel() {
314 return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
315 }
316 hasFilter() {
317 return this._filterValue && this._filterValue.trim().length > 0;
318 }
319 isEmpty(optionsToDisplay) {
320 return !optionsToDisplay || (optionsToDisplay && optionsToDisplay.length === 0);
321 }
322 onFilter(event) {
323 this._filterValue = event.target.value;
324 this.activateFilter();
325 }
326 activateFilter() {
327 if (this.hasFilter() && this._options) {
328 if (this.group) {
329 let searchFields = (this.optionLabel || 'label').split(',');
330 let filteredGroups = [];
331 for (let optgroup of this.options) {
332 let filteredSubOptions = this.filterService.filter(this.getOptionGroupChildren(optgroup), searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
333 if (filteredSubOptions && filteredSubOptions.length) {
334 filteredGroups.push({ ...optgroup, ...{ [this.optionGroupChildren]: filteredSubOptions } });
335 }
336 }
337 this._filteredOptions = filteredGroups;
338 }
339 else {
340 this._filteredOptions = this._options.filter(option => this.filterService.filters[this.filterMatchMode](this.getOptionLabel(option), this._filterValue, this.filterLocale));
341 }
342 }
343 else {
344 this._filteredOptions = null;
345 }
346 }
347 get toggleAllDisabled() {
348 let optionsToRender = this.optionsToRender;
349 if (!optionsToRender || optionsToRender.length === 0) {
350 return true;
351 }
352 else {
353 for (let option of optionsToRender) {
354 if (!this.isOptionDisabled(option))
355 return false;
356 }
357 return true;
358 }
359 }
360 toggleAll(event) {
361 if (this.disabled || this.toggleAllDisabled || this.readonly) {
362 return;
363 }
364 let allChecked = this.allChecked;
365 if (allChecked)
366 this.uncheckAll();
367 else
368 this.checkAll();
369 this.onModelChange(this.value);
370 this.onChange.emit({ originalEvent: event, value: this.value });
371 event.preventDefault();
372 }
373 checkAll() {
374 let optionsToRender = this.optionsToRender;
375 let val = [];
376 optionsToRender.forEach(opt => {
377 if (!this.group) {
378 let optionDisabled = this.isOptionDisabled(opt);
379 if (!optionDisabled || (optionDisabled && this.isSelected(opt))) {
380 val.push(this.getOptionValue(opt));
381 }
382 }
383 else {
384 let subOptions = this.getOptionGroupChildren(opt);
385 if (subOptions) {
386 subOptions.forEach(option => {
387 let optionDisabled = this.isOptionDisabled(option);
388 if (!optionDisabled || (optionDisabled && this.isSelected(option))) {
389 val.push(this.getOptionValue(option));
390 }
391 });
392 }
393 }
394 });
395 this.value = val;
396 }
397 uncheckAll() {
398 let optionsToRender = this.optionsToRender;
399 let val = [];
400 optionsToRender.forEach(opt => {
401 if (!this.group) {
402 let optionDisabled = this.isOptionDisabled(opt);
403 if (optionDisabled && this.isSelected(opt)) {
404 val.push(this.getOptionValue(opt));
405 }
406 }
407 else {
408 if (opt.items) {
409 opt.items.forEach(option => {
410 let optionDisabled = this.isOptionDisabled(option);
411 if (optionDisabled && this.isSelected(option)) {
412 val.push(this.getOptionValue(option));
413 }
414 });
415 }
416 }
417 });
418 this.value = val;
419 }
420 onOptionKeyDown(event, option) {
421 if (this.readonly) {
422 return;
423 }
424 let item = event.currentTarget;
425 switch (event.which) {
426 //down
427 case 40:
428 var nextItem = this.findNextItem(item);
429 if (nextItem) {
430 nextItem.focus();
431 }
432 event.preventDefault();
433 break;
434 //up
435 case 38:
436 var prevItem = this.findPrevItem(item);
437 if (prevItem) {
438 prevItem.focus();
439 }
440 event.preventDefault();
441 break;
442 //enter
443 case 13:
444 this.onOptionClick(event, option);
445 event.preventDefault();
446 break;
447 }
448 }
449 findNextItem(item) {
450 let nextItem = item.nextElementSibling;
451 if (nextItem)
452 return DomHandler.hasClass(nextItem, 'p-disabled') || DomHandler.isHidden(nextItem) || DomHandler.hasClass(nextItem, 'p-listbox-item-group') ? this.findNextItem(nextItem) : nextItem;
453 else
454 return null;
455 }
456 findPrevItem(item) {
457 let prevItem = item.previousElementSibling;
458 if (prevItem)
459 return DomHandler.hasClass(prevItem, 'p-disabled') || DomHandler.isHidden(prevItem) || DomHandler.hasClass(prevItem, 'p-listbox-item-group') ? this.findPrevItem(prevItem) : prevItem;
460 else
461 return null;
462 }
463 onHeaderCheckboxFocus() {
464 this.headerCheckboxFocus = true;
465 }
466 onHeaderCheckboxBlur() {
467 this.headerCheckboxFocus = false;
468 }
469 ngOnDestroy() {
470 if (this.translationSubscription) {
471 this.translationSubscription.unsubscribe();
472 }
473 }
474}
475Listbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Listbox, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FilterService }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
476Listbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Listbox, selector: "p-listbox", inputs: { multiple: "multiple", style: "style", styleClass: "styleClass", listStyle: "listStyle", listStyleClass: "listStyleClass", readonly: "readonly", disabled: "disabled", checkbox: "checkbox", filter: "filter", filterMatchMode: "filterMatchMode", filterLocale: "filterLocale", metaKeySelection: "metaKeySelection", dataKey: "dataKey", showToggleAll: "showToggleAll", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", optionDisabled: "optionDisabled", ariaFilterLabel: "ariaFilterLabel", filterPlaceHolder: "filterPlaceHolder", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", group: "group", options: "options", filterValue: "filterValue" }, outputs: { onChange: "onChange", onClick: "onClick", onDblClick: "onDblClick" }, host: { classAttribute: "p-element" }, providers: [LISTBOX_VALUE_ACCESSOR], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerchkbox"], descendants: true }], ngImport: i0, template: `
477 <div [ngClass]="{'p-listbox p-component': true, 'p-disabled': disabled}" [ngStyle]="style" [class]="styleClass">
478 <div class="p-listbox-header" *ngIf="headerFacet || headerTemplate">
479 <ng-content select="p-header"></ng-content>
480 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
481 </div>
482 <div class="p-listbox-header" *ngIf="(checkbox && multiple && showToggleAll) || filter">
483 <div class="p-checkbox p-component" *ngIf="checkbox && multiple && showToggleAll" [ngClass]="{'p-checkbox-disabled': disabled || toggleAllDisabled}">
484 <div class="p-hidden-accessible">
485 <input type="checkbox" readonly="readonly" [checked]="allChecked" (focus)="onHeaderCheckboxFocus()" (blur)="onHeaderCheckboxBlur()" (keydown.space)="toggleAll($event)" [disabled]="disabled || toggleAllDisabled">
486 </div>
487 <div #headerchkbox class="p-checkbox-box" [ngClass]="{'p-highlight': allChecked, 'p-focus': headerCheckboxFocus, 'p-disabled': disabled || toggleAllDisabled}" (click)="toggleAll($event)">
488 <span class="p-checkbox-icon" [ngClass]="{'pi pi-check':allChecked}"></span>
489 </div>
490 </div>
491 <div class="p-listbox-filter-container" *ngIf="filter">
492 <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">
493 <span class="p-listbox-filter-icon pi pi-search"></span>
494 </div>
495 </div>
496 <div [ngClass]="'p-listbox-list-wrapper'" [ngStyle]="listStyle" [class]="listStyleClass">
497 <ul class="p-listbox-list" role="listbox" aria-multiselectable="multiple">
498 <ng-container *ngIf="group">
499 <ng-template ngFor let-optgroup [ngForOf]="optionsToRender">
500 <li class="p-listbox-item-group">
501 <span *ngIf="!groupTemplate">{{getOptionGroupLabel(optgroup)||'empty'}}</span>
502 <ng-container *ngTemplateOutlet="groupTemplate; context: {$implicit: optgroup}"></ng-container>
503 </li>
504 <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: getOptionGroupChildren(optgroup)}"></ng-container>
505 </ng-template>
506 </ng-container>
507 <ng-container *ngIf="!group">
508 <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: optionsToRender}"></ng-container>
509 </ng-container>
510 <ng-template #itemslist let-optionsToDisplay>
511 <li *ngFor="let option of optionsToDisplay; let i = index;" [attr.tabindex]="disabled || isOptionDisabled(option) ? null : '0'" pRipple
512 [ngClass]="{'p-listbox-item':true,'p-highlight':isSelected(option), 'p-disabled': this.isOptionDisabled(option)}" role="option" [attr.aria-label]="getOptionLabel(option)"
513 [attr.aria-selected]="isSelected(option)" (click)="onOptionClick($event,option)" (dblclick)="onOptionDoubleClick($event,option)" (touchend)="onOptionTouchEnd(option)" (keydown)="onOptionKeyDown($event,option)">
514 <div class="p-checkbox p-component" *ngIf="checkbox && multiple" [ngClass]="{'p-checkbox-disabled': disabled || isOptionDisabled(option)}">
515 <div class="p-checkbox-box" [ngClass]="{'p-highlight':isSelected(option)}">
516 <span class="p-checkbox-icon" [ngClass]="{'pi pi-check':isSelected(option)}"></span>
517 </div>
518 </div>
519 <span *ngIf="!itemTemplate">{{getOptionLabel(option)}}</span>
520 <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: i}"></ng-container>
521 </li>
522 <li *ngIf="hasFilter() && isEmpty(optionsToDisplay)" class="p-listbox-empty-message">
523 <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
524 {{emptyFilterMessageLabel}}
525 </ng-container>
526 <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
527 </li>
528 <li *ngIf="!hasFilter() && isEmpty(optionsToDisplay)" class="p-listbox-empty-message">
529 <ng-container *ngIf="!emptyTemplate; else empty">
530 {{emptyMessageLabel}}
531 </ng-container>
532 <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
533 </li>
534 </ng-template>
535 </ul>
536 </div>
537 <div class="p-listbox-footer" *ngIf="footerFacet || footerTemplate">
538 <ng-content select="p-footer"></ng-content>
539 <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
540 </div>
541 </div>
542 `, isInline: true, styles: [".p-listbox-list-wrapper{overflow:auto}.p-listbox-list{list-style-type:none;margin:0;padding:0}.p-listbox-item{cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-listbox-header{display:flex;align-items:center}.p-listbox-filter-container{position:relative;flex:1 1 auto}.p-listbox-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-listbox-filter{width:100%}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.Ripple, selector: "[pRipple]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
543i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Listbox, decorators: [{
544 type: Component,
545 args: [{ selector: 'p-listbox', template: `
546 <div [ngClass]="{'p-listbox p-component': true, 'p-disabled': disabled}" [ngStyle]="style" [class]="styleClass">
547 <div class="p-listbox-header" *ngIf="headerFacet || headerTemplate">
548 <ng-content select="p-header"></ng-content>
549 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
550 </div>
551 <div class="p-listbox-header" *ngIf="(checkbox && multiple && showToggleAll) || filter">
552 <div class="p-checkbox p-component" *ngIf="checkbox && multiple && showToggleAll" [ngClass]="{'p-checkbox-disabled': disabled || toggleAllDisabled}">
553 <div class="p-hidden-accessible">
554 <input type="checkbox" readonly="readonly" [checked]="allChecked" (focus)="onHeaderCheckboxFocus()" (blur)="onHeaderCheckboxBlur()" (keydown.space)="toggleAll($event)" [disabled]="disabled || toggleAllDisabled">
555 </div>
556 <div #headerchkbox class="p-checkbox-box" [ngClass]="{'p-highlight': allChecked, 'p-focus': headerCheckboxFocus, 'p-disabled': disabled || toggleAllDisabled}" (click)="toggleAll($event)">
557 <span class="p-checkbox-icon" [ngClass]="{'pi pi-check':allChecked}"></span>
558 </div>
559 </div>
560 <div class="p-listbox-filter-container" *ngIf="filter">
561 <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">
562 <span class="p-listbox-filter-icon pi pi-search"></span>
563 </div>
564 </div>
565 <div [ngClass]="'p-listbox-list-wrapper'" [ngStyle]="listStyle" [class]="listStyleClass">
566 <ul class="p-listbox-list" role="listbox" aria-multiselectable="multiple">
567 <ng-container *ngIf="group">
568 <ng-template ngFor let-optgroup [ngForOf]="optionsToRender">
569 <li class="p-listbox-item-group">
570 <span *ngIf="!groupTemplate">{{getOptionGroupLabel(optgroup)||'empty'}}</span>
571 <ng-container *ngTemplateOutlet="groupTemplate; context: {$implicit: optgroup}"></ng-container>
572 </li>
573 <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: getOptionGroupChildren(optgroup)}"></ng-container>
574 </ng-template>
575 </ng-container>
576 <ng-container *ngIf="!group">
577 <ng-container *ngTemplateOutlet="itemslist; context: {$implicit: optionsToRender}"></ng-container>
578 </ng-container>
579 <ng-template #itemslist let-optionsToDisplay>
580 <li *ngFor="let option of optionsToDisplay; let i = index;" [attr.tabindex]="disabled || isOptionDisabled(option) ? null : '0'" pRipple
581 [ngClass]="{'p-listbox-item':true,'p-highlight':isSelected(option), 'p-disabled': this.isOptionDisabled(option)}" role="option" [attr.aria-label]="getOptionLabel(option)"
582 [attr.aria-selected]="isSelected(option)" (click)="onOptionClick($event,option)" (dblclick)="onOptionDoubleClick($event,option)" (touchend)="onOptionTouchEnd(option)" (keydown)="onOptionKeyDown($event,option)">
583 <div class="p-checkbox p-component" *ngIf="checkbox && multiple" [ngClass]="{'p-checkbox-disabled': disabled || isOptionDisabled(option)}">
584 <div class="p-checkbox-box" [ngClass]="{'p-highlight':isSelected(option)}">
585 <span class="p-checkbox-icon" [ngClass]="{'pi pi-check':isSelected(option)}"></span>
586 </div>
587 </div>
588 <span *ngIf="!itemTemplate">{{getOptionLabel(option)}}</span>
589 <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: option, index: i}"></ng-container>
590 </li>
591 <li *ngIf="hasFilter() && isEmpty(optionsToDisplay)" class="p-listbox-empty-message">
592 <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
593 {{emptyFilterMessageLabel}}
594 </ng-container>
595 <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
596 </li>
597 <li *ngIf="!hasFilter() && isEmpty(optionsToDisplay)" class="p-listbox-empty-message">
598 <ng-container *ngIf="!emptyTemplate; else empty">
599 {{emptyMessageLabel}}
600 </ng-container>
601 <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
602 </li>
603 </ng-template>
604 </ul>
605 </div>
606 <div class="p-listbox-footer" *ngIf="footerFacet || footerTemplate">
607 <ng-content select="p-footer"></ng-content>
608 <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
609 </div>
610 </div>
611 `, providers: [LISTBOX_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
612 'class': 'p-element'
613 }, styles: [".p-listbox-list-wrapper{overflow:auto}.p-listbox-list{list-style-type:none;margin:0;padding:0}.p-listbox-item{cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-listbox-header{display:flex;align-items:center}.p-listbox-filter-container{position:relative;flex:1 1 auto}.p-listbox-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-listbox-filter{width:100%}\n"] }]
614 }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FilterService }, { type: i1.PrimeNGConfig }]; }, propDecorators: { multiple: [{
615 type: Input
616 }], style: [{
617 type: Input
618 }], styleClass: [{
619 type: Input
620 }], listStyle: [{
621 type: Input
622 }], listStyleClass: [{
623 type: Input
624 }], readonly: [{
625 type: Input
626 }], disabled: [{
627 type: Input
628 }], checkbox: [{
629 type: Input
630 }], filter: [{
631 type: Input
632 }], filterMatchMode: [{
633 type: Input
634 }], filterLocale: [{
635 type: Input
636 }], metaKeySelection: [{
637 type: Input
638 }], dataKey: [{
639 type: Input
640 }], showToggleAll: [{
641 type: Input
642 }], optionLabel: [{
643 type: Input
644 }], optionValue: [{
645 type: Input
646 }], optionGroupChildren: [{
647 type: Input
648 }], optionGroupLabel: [{
649 type: Input
650 }], optionDisabled: [{
651 type: Input
652 }], ariaFilterLabel: [{
653 type: Input
654 }], filterPlaceHolder: [{
655 type: Input
656 }], emptyFilterMessage: [{
657 type: Input
658 }], emptyMessage: [{
659 type: Input
660 }], group: [{
661 type: Input
662 }], onChange: [{
663 type: Output
664 }], onClick: [{
665 type: Output
666 }], onDblClick: [{
667 type: Output
668 }], headerCheckboxViewChild: [{
669 type: ViewChild,
670 args: ['headerchkbox']
671 }], headerFacet: [{
672 type: ContentChild,
673 args: [Header]
674 }], footerFacet: [{
675 type: ContentChild,
676 args: [Footer]
677 }], templates: [{
678 type: ContentChildren,
679 args: [PrimeTemplate]
680 }], options: [{
681 type: Input
682 }], filterValue: [{
683 type: Input
684 }] } });
685class ListboxModule {
686}
687ListboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
688ListboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ListboxModule, declarations: [Listbox], imports: [CommonModule, SharedModule, RippleModule], exports: [Listbox, SharedModule] });
689ListboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ListboxModule, imports: [[CommonModule, SharedModule, RippleModule], SharedModule] });
690i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: ListboxModule, decorators: [{
691 type: NgModule,
692 args: [{
693 imports: [CommonModule, SharedModule, RippleModule],
694 exports: [Listbox, SharedModule],
695 declarations: [Listbox]
696 }]
697 }] });
698
699/**
700 * Generated bundle index. Do not edit.
701 */
702
703export { LISTBOX_VALUE_ACCESSOR, Listbox, ListboxModule };
Note: See TracBrowser for help on using the repository browser.