primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
1,152 lines (1,129 loc) • 111 kB
JavaScript
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, forwardRef, EventEmitter, signal, inject, computed, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
import * as i3 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { isNotEmpty, uuid, equals, focus, getFirstFocusableElement, isEmpty, isPrintableCharacter, resolveFieldData, findSingle, findLastIndex } from '@primeuix/utils';
import * as i1 from 'primeng/api';
import { Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { Checkbox } from 'primeng/checkbox';
import { IconField } from 'primeng/iconfield';
import { SearchIcon, CheckIcon, BlankIcon } from 'primeng/icons';
import { InputIcon } from 'primeng/inputicon';
import { InputText } from 'primeng/inputtext';
import { Ripple } from 'primeng/ripple';
import { Scroller } from 'primeng/scroller';
import { BaseStyle } from 'primeng/base';
const theme = ({ dt }) => `
.p-listbox {
background: ${dt('listbox.background')};
color: ${dt('listbox.color')};
border: 1px solid ${dt('listbox.border.color')};
border-radius: ${dt('listbox.border.radius')};
transition: background ${dt('listbox.transition.duration')}, color ${dt('listbox.transition.duration')}, border-color ${dt('listbox.transition.duration')},
box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};
outline-color: transparent;
box-shadow: ${dt('listbox.shadow')};
}
.p-listbox.p-focus {
border-color: ${dt('listbox.focus.border.color')};
box-shadow: ${dt('listbox.focus.ring.shadow')};
outline: ${dt('listbox.focus.ring.width')} ${dt('listbox.focus.ring.style')} ${dt('listbox.focus.ring.color')};
outline-offset: ${dt('listbox.focus.ring.offset')};
}
.p-listbox.p-disabled {
opacity: 1;
background: ${dt('listbox.disabled.background')};
color: ${dt('listbox.disabled.color')};
}
.p-listbox.p-disabled .p-listbox-option {
color: ${dt('listbox.disabled.color')};
}
.p-listbox-header {
padding: ${dt('listbox.list.header.padding')};
display: flex;
align-items: center;
}
.p-listbox-header > * {
flex: 1 1 auto;
}
.p-listbox-header > .p-checkbox {
flex: 0 0 auto;
}
.p-listbox-filter {
width: 100%;
}
.p-listbox-list-container {
overflow: auto;
}
.p-listbox-list {
list-style-type: none;
margin: 0;
padding: ${dt('listbox.list.padding')};
outline: 0 none;
display: flex;
flex-direction: column;
gap: ${dt('listbox.list.gap')};
}
.p-listbox-option {
display: flex;
align-items: center;
cursor: pointer;
position: relative;
overflow: hidden;
padding: ${dt('listbox.option.padding')};
border: 0 none;
border-radius: ${dt('listbox.option.border.radius')};
color: ${dt('listbox.option.color')};
transition: background ${dt('listbox.transition.duration')}, color ${dt('listbox.transition.duration')}, border-color ${dt('listbox.transition.duration')},
box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};
}
.p-listbox-striped li:nth-child(even of .p-listbox-option) {
background: ${dt('listbox.option.striped.background')};
}
.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {
background: ${dt('listbox.option.selected.background')};
color: ${dt('listbox.option.selected.color')};
}
.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {
background: ${dt('listbox.option.selected.focus.background')};
color: ${dt('listbox.option.selected.focus.color')};
}
.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {
background: ${dt('listbox.option.focus.background')};
color: ${dt('listbox.option.focus.color')};
}
.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {
background: ${dt('listbox.option.focus.background')};
color: ${dt('listbox.option.focus.color')};
}
.p-listbox-option-check-icon {
position: relative;
margin-inline-start: ${dt('listbox.checkmark.gutter.start')};
margin-inline-end: ${dt('listbox.checkmark.gutter.end')};
color: ${dt('listbox.checkmark.color')};
}
.p-listbox-option-group {
margin: 0;
padding: ${dt('listbox.option.group.padding')};
color: ${dt('listbox.option.group.color')};
background: ${dt('listbox.option.group.background')};
font-weight: ${dt('listbox.option.group.font.weight')};
}
.p-listbox-empty-message {
padding: ${dt('listbox.empty.message.padding')};
}
/* For PrimeNG */
p-listbox.ng-invalid.ng-dirty > .p-listbox.p-component {
border-color: ${dt('listbox.invalid.border.color')};
}
`;
const classes = {
root: ({ props }) => [
'p-listbox p-component',
{
'p-listbox-striped': props.striped,
'p-disabled': props.disabled,
'p-invalid': props.invalid
}
],
header: 'p-listbox-header',
pcFilter: 'p-listbox-filter',
listContainer: 'p-listbox-list-container',
list: 'p-listbox-list',
optionGroup: 'p-listbox-option-group',
option: ({ instance, props, option, index, getItemOptions }) => [
'p-listbox-option',
{
'p-listbox-option-selected': instance.isSelected(option) && props.highlightOnSelect,
'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(index, getItemOptions),
'p-disabled': instance.isOptionDisabled(option)
}
],
optionCheckIcon: 'p-listbox-option-check-icon',
optionBlankIcon: 'p-listbox-option-blank-icon',
emptyMessage: 'p-listbox-empty-message'
};
class ListBoxStyle extends BaseStyle {
name = 'listbox';
theme = theme;
classes = classes;
static ɵfac = /*@__PURE__*/ (() => { let ɵListBoxStyle_BaseFactory; return function ListBoxStyle_Factory(__ngFactoryType__) { return (ɵListBoxStyle_BaseFactory || (ɵListBoxStyle_BaseFactory = i0.ɵɵgetInheritedFactory(ListBoxStyle)))(__ngFactoryType__ || ListBoxStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ListBoxStyle, factory: ListBoxStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListBoxStyle, [{
type: Injectable
}], null, null); })();
/**
*
* ListBox is used to select one or more values from a list of items.
*
* [Live Demo](https://www.primeng.org/listbox/)
*
* @module listboxstyle
*
*/
var ListboxClasses;
(function (ListboxClasses) {
/**
* Class name of the root element
*/
ListboxClasses["root"] = "p-listbox";
/**
* Class name of the header element
*/
ListboxClasses["header"] = "p-listbox-header";
/**
* Class name of the filter element
*/
ListboxClasses["pcFilter"] = "p-listbox-filter";
/**
* Class name of the list container element
*/
ListboxClasses["listContainer"] = "p-listbox-list-container";
/**
* Class name of the list element
*/
ListboxClasses["list"] = "p-listbox-list";
/**
* Class name of the option group element
*/
ListboxClasses["optionGroup"] = "p-listbox-option-group";
/**
* Class name of the option element
*/
ListboxClasses["option"] = "p-listbox-option";
/**
* Class name of the option check icon element
*/
ListboxClasses["optionCheckIcon"] = "p-listbox-option-check-icon";
/**
* Class name of the option blank icon element
*/
ListboxClasses["optionBlankIcon"] = "p-listbox-option-blank-icon";
/**
* Class name of the empty message element
*/
ListboxClasses["emptyMessage"] = "p-listbox-empty-message";
})(ListboxClasses || (ListboxClasses = {}));
const _c0 = ["item"];
const _c1 = ["group"];
const _c2 = ["header"];
const _c3 = ["filter"];
const _c4 = ["footer"];
const _c5 = ["emptyfilter"];
const _c6 = ["empty"];
const _c7 = ["filtericon"];
const _c8 = ["checkicon"];
const _c9 = ["checkmark"];
const _c10 = ["loader"];
const _c11 = ["headerchkbox"];
const _c12 = ["lastHiddenFocusableElement"];
const _c13 = ["firstHiddenFocusableElement"];
const _c14 = ["scroller"];
const _c15 = ["list"];
const _c16 = ["container"];
const _c17 = [[["p-header"]], [["p-footer"]]];
const _c18 = ["p-header", "p-footer"];
const _c19 = (a0, a1) => ({ $implicit: a0, options: a1 });
const _c20 = a0 => ({ "p-checkbox-disabled": a0 });
const _c21 = a0 => ({ $implicit: a0 });
const _c22 = a0 => ({ options: a0 });
const _c23 = a0 => ({ height: a0 });
const _c24 = () => ({});
const _c25 = (a0, a1, a2) => ({ "p-listbox-option-selected": a0, "p-focus": a1, "p-disabled": a2 });
const _c26 = (a0, a1, a2) => ({ $implicit: a0, index: a1, selected: a2 });
const _c27 = a0 => ({ implicit: a0 });
function Listbox_div_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Listbox_div_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 23);
i0.ɵɵprojection(1);
i0.ɵɵtemplate(2, Listbox_div_3_ng_container_2_Template, 1, 0, "ng-container", 24);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerTemplate || ctx_r1._headerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c19, ctx_r1.modelValue(), ctx_r1.visibleOptions()));
} }
function Listbox_div_4_div_1_p_checkbox_4_ng_container_1_ng_template_1_0_ng_template_0_Template(rf, ctx) { }
function Listbox_div_4_div_1_p_checkbox_4_ng_container_1_ng_template_1_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_div_4_div_1_p_checkbox_4_ng_container_1_ng_template_1_0_ng_template_0_Template, 0, 0, "ng-template");
} }
function Listbox_div_4_div_1_p_checkbox_4_ng_container_1_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_div_4_div_1_p_checkbox_4_ng_container_1_ng_template_1_0_Template, 1, 0, null, 24);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(5);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c21, ctx_r1.allSelected()));
} }
function Listbox_div_4_div_1_p_checkbox_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, Listbox_div_4_div_1_p_checkbox_4_ng_container_1_ng_template_1_Template, 1, 4, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementContainerEnd();
} }
function Listbox_div_4_div_1_p_checkbox_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "p-checkbox", 31);
i0.ɵɵtemplate(1, Listbox_div_4_div_1_p_checkbox_4_ng_container_1_Template, 3, 0, "ng-container", 19);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngModel", ctx_r1.allSelected())("disabled", ctx_r1.disabled)("tabindex", -1)("variant", ctx_r1.config.inputStyle() === "filled" ? "filled" : "outlined" || ctx_r1.config.inputVariant() === "filled" ? "filled" : "outlined")("binary", true);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate);
} }
function Listbox_div_4_div_1_Template(rf, ctx) { if (rf & 1) {
const _r3 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 27);
i0.ɵɵlistener("click", function Listbox_div_4_div_1_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onToggleAll($event)); })("keydown", function Listbox_div_4_div_1_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onHeaderCheckboxKeyDown($event)); });
i0.ɵɵelementStart(1, "div", 28)(2, "input", 29, 5);
i0.ɵɵlistener("focus", function Listbox_div_4_div_1_Template_input_focus_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onHeaderCheckboxFocus($event)); })("blur", function Listbox_div_4_div_1_Template_input_blur_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onHeaderCheckboxBlur()); });
i0.ɵɵelementEnd()();
i0.ɵɵtemplate(4, Listbox_div_4_div_1_p_checkbox_4_Template, 2, 6, "p-checkbox", 30);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(6, _c20, ctx_r1.disabled));
i0.ɵɵadvance();
i0.ɵɵattribute("data-p-hidden-accessible", true);
i0.ɵɵadvance();
i0.ɵɵproperty("disabled", ctx_r1.disabled);
i0.ɵɵattribute("checked", ctx_r1.allSelected())("aria-label", ctx_r1.toggleAllAriaLabel);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r1.checkbox && ctx_r1.multiple);
} }
function Listbox_div_4_ng_container_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Listbox_div_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, Listbox_div_4_ng_container_2_ng_container_1_Template, 1, 0, "ng-container", 24);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.filterTemplate || ctx_r1._filterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, ctx_r1.filterOptions));
} }
function Listbox_div_4_ng_template_3_div_0_SearchIcon_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "SearchIcon", 38);
} if (rf & 2) {
i0.ɵɵproperty("styleClass", "p-listbox-filter-icon");
i0.ɵɵattribute("aria-hidden", true);
} }
function Listbox_div_4_ng_template_3_div_0_span_6_1_ng_template_0_Template(rf, ctx) { }
function Listbox_div_4_ng_template_3_div_0_span_6_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_div_4_ng_template_3_div_0_span_6_1_ng_template_0_Template, 0, 0, "ng-template");
} }
function Listbox_div_4_ng_template_3_div_0_span_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 39);
i0.ɵɵtemplate(1, Listbox_div_4_ng_template_3_div_0_span_6_1_Template, 1, 0, null, 40);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(4);
i0.ɵɵattribute("aria-hidden", true);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.filterIconTemplate || ctx_r1._filterIconTemplate);
} }
function Listbox_div_4_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
const _r4 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 34)(1, "p-iconfield")(2, "input", 35, 7);
i0.ɵɵlistener("input", function Listbox_div_4_ng_template_3_div_0_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onFilterChange($event)); })("keydown", function Listbox_div_4_ng_template_3_div_0_Template_input_keydown_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onFilterKeyDown($event)); })("focus", function Listbox_div_4_ng_template_3_div_0_Template_input_focus_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onFilterFocus($event)); })("blur", function Listbox_div_4_ng_template_3_div_0_Template_input_blur_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onFilterBlur($event)); });
i0.ɵɵelementEnd();
i0.ɵɵelementStart(4, "p-inputicon");
i0.ɵɵtemplate(5, Listbox_div_4_ng_template_3_div_0_SearchIcon_5_Template, 1, 2, "SearchIcon", 36)(6, Listbox_div_4_ng_template_3_div_0_span_6_Template, 2, 2, "span", 37);
i0.ɵɵelementEnd()()();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵadvance(2);
i0.ɵɵproperty("value", ctx_r1._filterValue() || "")("disabled", ctx_r1.disabled)("tabindex", !ctx_r1.disabled && !ctx_r1.focused ? ctx_r1.tabindex : -1);
i0.ɵɵattribute("aria-owns", ctx_r1.id + "_list")("aria-activedescendant", ctx_r1.focusedOptionId)("placeholder", ctx_r1.filterPlaceHolder)("aria-label", ctx_r1.ariaFilterLabel);
i0.ɵɵadvance(3);
i0.ɵɵproperty("ngIf", !ctx_r1.filterIconTemplate && !ctx_r1._filterIconTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.filterIconTemplate || ctx_r1._filterIconTemplate);
} }
function Listbox_div_4_ng_template_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_div_4_ng_template_3_div_0_Template, 7, 9, "div", 32);
i0.ɵɵelementStart(1, "span", 33);
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngIf", ctx_r1.filter);
i0.ɵɵadvance();
i0.ɵɵattribute("data-p-hidden-accessible", true);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", ctx_r1.filterResultMessageText, " ");
} }
function Listbox_div_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 23);
i0.ɵɵtemplate(1, Listbox_div_4_div_1_Template, 5, 8, "div", 25)(2, Listbox_div_4_ng_container_2_Template, 2, 4, "ng-container", 26)(3, Listbox_div_4_ng_template_3_Template, 3, 3, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementEnd();
} if (rf & 2) {
const builtInFilterElement_r5 = i0.ɵɵreference(4);
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.checkbox && ctx_r1.multiple && ctx_r1.showToggleAll);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.filterTemplate || ctx_r1._filterTemplate)("ngIfElse", builtInFilterElement_r5);
} }
function Listbox_p_scroller_7_ng_template_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Listbox_p_scroller_7_ng_template_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_p_scroller_7_ng_template_2_ng_container_0_Template, 1, 0, "ng-container", 24);
} if (rf & 2) {
const items_r7 = ctx.$implicit;
const scrollerOptions_r8 = ctx.options;
i0.ɵɵnextContext(2);
const buildInItems_r9 = i0.ɵɵreference(10);
i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c19, items_r7, scrollerOptions_r8));
} }
function Listbox_p_scroller_7_Conditional_4_ng_template_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Listbox_p_scroller_7_Conditional_4_ng_template_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_p_scroller_7_Conditional_4_ng_template_0_ng_container_0_Template, 1, 0, "ng-container", 24);
} if (rf & 2) {
const scrollerOptions_r10 = ctx.options;
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.loaderTemplate || ctx_r1._loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c22, scrollerOptions_r10));
} }
function Listbox_p_scroller_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_p_scroller_7_Conditional_4_ng_template_0_Template, 1, 4, "ng-template", null, 10, i0.ɵɵtemplateRefExtractor);
} }
function Listbox_p_scroller_7_Template(rf, ctx) { if (rf & 1) {
const _r6 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-scroller", 41, 8);
i0.ɵɵlistener("onLazyLoad", function Listbox_p_scroller_7_Template_p_scroller_onLazyLoad_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onLazyLoad.emit($event)); });
i0.ɵɵtemplate(2, Listbox_p_scroller_7_ng_template_2_Template, 1, 5, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor)(4, Listbox_p_scroller_7_Conditional_4_Template, 2, 0);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵstyleMap(i0.ɵɵpureFunction1(9, _c23, ctx_r1.scrollHeight));
i0.ɵɵproperty("items", ctx_r1.visibleOptions())("itemSize", ctx_r1.virtualScrollItemSize)("autoSize", true)("lazy", ctx_r1.lazy)("options", ctx_r1.virtualScrollOptions)("tabindex", ctx_r1.scrollerTabIndex);
i0.ɵɵadvance(4);
i0.ɵɵconditional(ctx_r1.loaderTemplate || ctx_r1._loaderTemplate ? 4 : -1);
} }
function Listbox_ng_container_8_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Listbox_ng_container_8_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, Listbox_ng_container_8_ng_container_1_Template, 1, 0, "ng-container", 24);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
const buildInItems_r9 = i0.ɵɵreference(10);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c19, ctx_r1.visibleOptions(), i0.ɵɵpureFunction0(2, _c24)));
} }
function Listbox_ng_template_9_ng_template_2_ng_container_0_span_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const option_r12 = i0.ɵɵnextContext(2).$implicit;
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r1.getOptionGroupLabel(option_r12.optionGroup));
} }
function Listbox_ng_template_9_ng_template_2_ng_container_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Listbox_ng_template_9_ng_template_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵelementStart(1, "li", 45);
i0.ɵɵtemplate(2, Listbox_ng_template_9_ng_template_2_ng_container_0_span_2_Template, 2, 1, "span", 19)(3, Listbox_ng_template_9_ng_template_2_ng_container_0_ng_container_3_Template, 1, 0, "ng-container", 24);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r12 = i0.ɵɵnextContext();
const option_r12 = ctx_r12.$implicit;
const i_r14 = ctx_r12.index;
const scrollerOptions_r15 = i0.ɵɵnextContext().options;
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c23, scrollerOptions_r15.itemSize + "px"));
i0.ɵɵattribute("id", ctx_r1.id + "_" + ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.groupTemplate && !ctx_r1._groupTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.groupTemplate || ctx_r1._groupTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(7, _c21, option_r12.optionGroup));
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_ng_template_1_0_ng_template_0_Template(rf, ctx) { }
function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_ng_template_1_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_ng_template_1_0_ng_template_0_Template, 0, 0, "ng-template");
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_ng_template_1_0_Template, 1, 0, null, 24);
} if (rf & 2) {
const option_r12 = i0.ɵɵnextContext(4).$implicit;
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c21, ctx_r1.isSelected(option_r12)));
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_ng_template_1_Template, 1, 4, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
i0.ɵɵelementContainerEnd();
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "p-checkbox", 48);
i0.ɵɵtemplate(1, Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_ng_container_1_Template, 3, 0, "ng-container", 19);
i0.ɵɵelementEnd();
} if (rf & 2) {
const option_r12 = i0.ɵɵnextContext(2).$implicit;
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngModel", ctx_r1.isSelected(option_r12))("readonly", true)("disabled", ctx_r1.disabled || ctx_r1.isOptionDisabled(option_r12))("tabindex", -1)("variant", ctx_r1.config.inputStyle() === "filled" ? "filled" : "outlined" || ctx_r1.config.inputVariant() === "filled" ? "filled" : "outlined")("binary", true);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.checkIconTemplate || ctx_r1._checkIconTemplate);
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_ng_container_1_BlankIcon_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "BlankIcon", 50);
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_ng_container_1_CheckIcon_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "CheckIcon", 50);
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_ng_container_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_ng_container_1_BlankIcon_1_Template, 1, 0, "BlankIcon", 49)(2, Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_ng_container_1_CheckIcon_2_Template, 1, 0, "CheckIcon", 49);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const option_r12 = i0.ɵɵnextContext(3).$implicit;
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.isSelected(option_r12));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.isSelected(option_r12));
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_ng_container_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵtemplate(1, Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_ng_container_1_Template, 3, 2, "ng-container", 19)(2, Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_ng_container_2_Template, 1, 0, "ng-container", 24);
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const option_r12 = i0.ɵɵnextContext(2).$implicit;
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.checkmarkTemplate && !ctx_r1._checkmarkTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.checkmarkTemplate || ctx_r1._checkmarkTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(3, _c27, ctx_r1.isSelected(option_r12)));
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_span_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span");
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const option_r12 = i0.ɵɵnextContext(2).$implicit;
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r1.getOptionLabel(option_r12));
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Listbox_ng_template_9_ng_template_2_ng_container_1_Template(rf, ctx) { if (rf & 1) {
const _r16 = i0.ɵɵgetCurrentView();
i0.ɵɵelementContainerStart(0);
i0.ɵɵelementStart(1, "li", 46);
i0.ɵɵlistener("click", function Listbox_ng_template_9_ng_template_2_ng_container_1_Template_li_click_1_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r12 = i0.ɵɵnextContext(); const option_r12 = ctx_r12.$implicit; const i_r14 = ctx_r12.index; const scrollerOptions_r15 = i0.ɵɵnextContext().options; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionSelect($event, option_r12, ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15))); })("dblclick", function Listbox_ng_template_9_ng_template_2_ng_container_1_Template_li_dblclick_1_listener($event) { i0.ɵɵrestoreView(_r16); const option_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOptionDoubleClick($event, option_r12)); })("mousedown", function Listbox_ng_template_9_ng_template_2_ng_container_1_Template_li_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r16); const i_r14 = i0.ɵɵnextContext().index; const scrollerOptions_r15 = i0.ɵɵnextContext().options; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionMouseDown($event, ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15))); })("mouseenter", function Listbox_ng_template_9_ng_template_2_ng_container_1_Template_li_mouseenter_1_listener($event) { i0.ɵɵrestoreView(_r16); const i_r14 = i0.ɵɵnextContext().index; const scrollerOptions_r15 = i0.ɵɵnextContext().options; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionMouseEnter($event, ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15))); })("touchend", function Listbox_ng_template_9_ng_template_2_ng_container_1_Template_li_touchend_1_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onOptionTouchEnd()); });
i0.ɵɵtemplate(2, Listbox_ng_template_9_ng_template_2_ng_container_1_p_checkbox_2_Template, 2, 7, "p-checkbox", 47)(3, Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_3_Template, 3, 5, "ng-container", 19)(4, Listbox_ng_template_9_ng_template_2_ng_container_1_span_4_Template, 2, 1, "span", 19)(5, Listbox_ng_template_9_ng_template_2_ng_container_1_ng_container_5_Template, 1, 0, "ng-container", 24);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
const ctx_r12 = i0.ɵɵnextContext();
const option_r12 = ctx_r12.$implicit;
const i_r14 = ctx_r12.index;
const scrollerOptions_r15 = i0.ɵɵnextContext().options;
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(13, _c23, scrollerOptions_r15.itemSize + "px"))("ngClass", i0.ɵɵpureFunction3(15, _c25, ctx_r1.isSelected(option_r12) && ctx_r1.highlightOnSelect, ctx_r1.focusedOptionIndex() === ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15), ctx_r1.isOptionDisabled(option_r12)));
i0.ɵɵattribute("id", ctx_r1.id + "_" + ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15))("aria-label", ctx_r1.getOptionLabel(option_r12))("aria-selected", ctx_r1.isSelected(option_r12))("aria-disabled", ctx_r1.isOptionDisabled(option_r12))("aria-setsize", ctx_r1.ariaSetSize)("ariaPosInset", ctx_r1.getAriaPosInset(ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15)));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.checkbox && ctx_r1.multiple);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.checkmark);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.itemTemplate && !ctx_r1._itemTemplate);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemTemplate || ctx_r1._itemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(19, _c26, option_r12, ctx_r1.getOptionIndex(i_r14, scrollerOptions_r15), ctx_r1.isSelected(option_r12)));
} }
function Listbox_ng_template_9_ng_template_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_ng_template_9_ng_template_2_ng_container_0_Template, 4, 9, "ng-container", 19)(1, Listbox_ng_template_9_ng_template_2_ng_container_1_Template, 6, 23, "ng-container", 19);
} if (rf & 2) {
const option_r12 = ctx.$implicit;
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("ngIf", ctx_r1.isOptionGroup(option_r12));
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.isOptionGroup(option_r12));
} }
function Listbox_ng_template_9_li_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtext(0);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵtextInterpolate1(" ", ctx_r1.emptyFilterMessageText, " ");
} }
function Listbox_ng_template_9_li_3_Conditional_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0, null, 12);
} }
function Listbox_ng_template_9_li_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_ng_template_9_li_3_Conditional_2_ng_container_0_Template, 2, 0, "ng-container", 40);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyFilterTemplate || ctx_r1._emptyFilterTemplate || ctx_r1._emptyTemplate || ctx_r1.emptyTemplate);
} }
function Listbox_ng_template_9_li_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "li", 51);
i0.ɵɵtemplate(1, Listbox_ng_template_9_li_3_Conditional_1_Template, 1, 1)(2, Listbox_ng_template_9_li_3_Conditional_2_Template, 1, 1, "ng-container");
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵconditional(!ctx_r1.emptyFilterTemplate && !ctx_r1._emptyFilterTemplate && !ctx_r1._emptyTemplate && !ctx_r1.emptyTemplate ? 1 : 2);
} }
function Listbox_ng_template_9_li_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtext(0);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵtextInterpolate1(" ", ctx_r1.emptyMessage, " ");
} }
function Listbox_ng_template_9_li_4_Conditional_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0, null, 13);
} }
function Listbox_ng_template_9_li_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, Listbox_ng_template_9_li_4_Conditional_2_ng_container_0_Template, 2, 0, "ng-container", 40);
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyTemplate || ctx_r1._emptyTemplate);
} }
function Listbox_ng_template_9_li_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "li", 51);
i0.ɵɵtemplate(1, Listbox_ng_template_9_li_4_Conditional_1_Template, 1, 1)(2, Listbox_ng_template_9_li_4_Conditional_2_Template, 1, 1, "ng-container");
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext(2);
i0.ɵɵadvance();
i0.ɵɵconditional(!ctx_r1.emptyTemplate && !ctx_r1._emptyTemplate ? 1 : 2);
} }
function Listbox_ng_template_9_Template(rf, ctx) { if (rf & 1) {
const _r11 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "ul", 42, 11);
i0.ɵɵlistener("focus", function Listbox_ng_template_9_Template_ul_focus_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListFocus($event)); })("blur", function Listbox_ng_template_9_Template_ul_blur_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListBlur($event)); })("keydown", function Listbox_ng_template_9_Template_ul_keydown_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onListKeyDown($event)); });
i0.ɵɵtemplate(2, Listbox_ng_template_9_ng_template_2_Template, 2, 2, "ng-template", 43)(3, Listbox_ng_template_9_li_3_Template, 3, 1, "li", 44)(4, Listbox_ng_template_9_li_4_Template, 3, 1, "li", 44);
i0.ɵɵelementEnd();
} if (rf & 2) {
const items_r17 = ctx.$implicit;
const scrollerOptions_r15 = ctx.options;
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵstyleMap(scrollerOptions_r15.contentStyle);
i0.ɵɵproperty("tabindex", -1)("ngClass", scrollerOptions_r15.contentStyleClass);
i0.ɵɵattribute("aria-multiselectable", true)("aria-activedescendant", ctx_r1.focused ? ctx_r1.focusedOptionId : undefined)("aria-label", ctx_r1.ariaLabel)("aria-disabled", ctx_r1.disabled);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngForOf", items_r17);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx_r1.hasFilter() && ctx_r1.isEmpty());
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", !ctx_r1.hasFilter() && ctx_r1.isEmpty());
} }
function Listbox_div_11_ng_container_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function Listbox_div_11_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 52);
i0.ɵɵprojection(1, 1);
i0.ɵɵtemplate(2, Listbox_div_11_ng_container_2_Template, 1, 0, "ng-container", 24);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.footerTemplate || ctx_r1._footerTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c19, ctx_r1.modelValue(), ctx_r1.visibleOptions()));
} }
function Listbox_span_12_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "span", 22);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r1 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate1(" ", ctx_r1.emptyMessage, " ");
} }
const LISTBOX_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => Listbox),
multi: true
};
/**
* ListBox is used to select one or more values from a list of items.
* @group Components
*/
class Listbox extends BaseComponent {
filterService;
/**
* Unique identifier of the component.
* @group Props
*/
id;
/**
* Text to display when the search is active. Defaults to global value in i18n translation configuration.
* @group Props
* @defaultValue '{0} results are available'
*/
searchMessage;
/**
* Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration.
* @group Props
* @defaultValue 'No selected item'
*/
emptySelectionMessage;
/**
* Text to be displayed in hidden accessible field when options are selected. Defaults to global value in i18n translation configuration.
* @group Props
* @defaultValue '{0} items selected'
*/
selectionMessage;
/**
* Whether to focus on the first visible or selected element when the overlay panel is shown.
* @group Props
*/
autoOptionFocus = true;
/**
* Defines a string that labels the input for accessibility.
* @group Props
*/
ariaLabel;
/**
* When enabled, the focused option is selected.
* @group Props
*/
selectOnFocus;
/**
* Locale to use in searching. The default locale is the host environment's current locale.
* @group Props
*/
searchLocale;
/**
* When enabled, the hovered option will be focused.
* @group Props
*/
focusOnHover = true;
/**
* Text to display when filtering.
* @group Props
*/
filterMessage;
/**
* Fields used when filtering the options, defaults to optionLabel.
* @group Props
*/
filterFields;
/**
* Defines if data is loaded and interacted with in lazy manner.
* @group Props
*/
lazy = false;
/**
* Whether the data should be loaded on demand during scroll.
* @group Props
*/
virtualScroll;
/**
* Height of an item in the list for VirtualScrolling.
* @group Props
*/
virtualScrollItemSize;
/**
* Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
* @group Props
*/
virtualScrollOptions;
/**
* Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
* @group Props
*/
scrollHeight = '14rem';
/**
* Index of the element in tabbing order.
* @group Props
*/
tabindex = 0;
/**
* When specified, allows selecting multiple values.
* @group Props
*/
multiple;
/**
* Inline style of the container.
* @group Props
*/
style;
/**
* Style class of the container.
* @group Props
*/
styleClass;
/**
* Inline style of the list element.
* @group Props
*/
listStyle;
/**
* Style class of the list element.
* @group Props
*/
listStyleClass;
/**
* When present, it specifies that the element value cannot be changed.
* @group Props
*/
readonly;
/**
* When present, it specifies that the element should be disabled.
* @group Props
*/
disabled;
/**
* When specified, allows selecting items with checkboxes.
* @group Props
*/
checkbox = false;
/**
* When specified, displays a filter input at header.
* @group Props
*/
filter = false;
/**
* When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
* @group Props
*/
filterBy;
/**
* Defines how the items are filtered.
* @group Props
*/
filterMatchMode = 'contains';
/**
* Locale to use in filtering. The default locale is the host environment's current locale.
* @group Props
*/
filterLocale;
/**
* Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
* @group Props
*/
metaKeySelection = false;
/**
* A property to uniquely identify a value in options.
* @group Props
*/
dataKey;
/**
* Whether header checkbox is shown in multiple mode.
* @group Props
*/
showToggleAll = true;
/**
* Name of the label field of an option.
* @group Props
*/
optionLabel;
/**
* Name of the value field of an option.
* @group Props
*/
optionValue;
/**
* Name of the options field of an option group.
* @group Props
*/
optionGroupChildren = 'items';
/**
* Name of the label field of an option group.
* @group Props
*/
optionGroupLabel = 'label';
/**
* Name of the disabled field of an option.
* @group Props
*/
optionDisabled;
/**
* Defines a string that labels the filter input.
* @group Props
*/
ariaFilterLabel;
/**
* Defines placeholder of the filter input.
* @group Props
*/
filterPlaceHolder;
/**
* Text to display when filtering does not return any results.
* @group Props
*/
emptyFilterMessage;
/**
* Text to display when there is no data. Defaults to global value in i18n translation configuration.
* @group Props
*/
emptyMessage;
/**
* Whether to display options as grouped when nested options are provided.
* @group Props
*/
group;
/**
* An array of selectitems to display as the available options.
* @group Props
*/
get options() {
return this._options();
}
set options(val) {
this._options.set(val);
}
/**
* When specified, filter displays with this value.
* @group Props
*/
get filterValue() {
return this._filterValue();
}
set filterValue(val) {
this._filterValue.set(val);
}
/**
* Whether all data is selected.
* @group Props
*/
get selectAll() {
return this._selectAll;
}
set selectAll(value) {
this._selectAll = value;
}
/**
* Whether to displays rows with alternating colors.
* @group Props
* @defaultValue false
*/
striped = false;
/**
* Whether the selected option will be add highlight class.
* @group Props
* @defaultValue true
*/
highlightOnSelect = true;
/**
* Whether the selected option will be shown with a check mark.
* @group Props
* @defaultValue false
*/
checkmark = false;
/**
* Callback to invoke on value change.
* @param {ListboxChangeEvent} event - Custom change event.
* @group Emits
*/
onChange = new EventEmitter();
/**
* Callback to invoke when option is clicked.
* @param {ListboxClickEvent} event - Custom click event.
* @group Emits
*/
onClick = new EventEmitter();
/**
* Callback to invoke when option is double clicked.
* @param {ListboxDoubleClickEvent} event - Custom double click event.
* @group Emits
*/
onDblClick = new EventEmitter();
/**
* Callback to invoke when data is filtered.
* @param {ListboxFilterEvent} event - Custom filter event.
* @group Emits
*/
onFilter = new EventEmitter();
/**
* Callback to invoke when component receives focus.
* @param {FocusEvent} event - Focus event.
* @group Emits
*/
onFocus = new EventEmitter();
/**
* Callback to invoke when component loses focus.
* @param {FocusEvent} event - Blur event.
* @group Emits
*/
onBlur = new EventEmitter();
/**
* Callback to invoke when all data is selected.
* @param {ListboxSelectAllChangeEvent} event - Custom select event.
* @group Emits
*/
onSelectAllChange = new EventEmitter();
/**
* Emits on lazy load.
* @param {ScrollerLazyLoadEvent} event - Scroller lazy load event.
* @group Emits
*/
onLazyLoad = new EventEmitter();
headerCheckboxViewChild;
filterViewChild;
lastHiddenFocusableElement;
firstHiddenFocusableElement;
scroller;
listViewChild;
containerViewChild;
headerFacet;
footerFacet;
/**
* Custom item template.
* @group Templates
*/
itemTemplate;
/**
* Custom group template.
* @group Templates
*/
groupTemplate;
/**
* Custom header template.
* @group Templates
*/
headerTemplate;
/**
* Custom filter template.
* @group Templates
*/
filterTemplate;
/**
* Custom footer template.
* @group Templates
*/
footerTemplate;
/**
* Custom empty filter message template.
* @group Templates
*/
emptyFilterTemplate;
/**
* Custom empty message template.
* @group Templates
*/
emptyTemplate;
/**
* Custom filter icon template.
* @group Templates
*/
filterIconTemplate;
/**
* Custom check icon template.
* @group Templates
*/
checkIconTemplate;
/**
* Custom checkmark icon template.
* @group Templates
*/
checkmarkTemplate;
/**
* Custom loader template.
* @group Templates
*/
loaderTemplate;
templates;
_itemTemplate;
_groupTemplate;
_headerTemplate;
_filterTemplate;
_footerTemplate;
_emptyFilterTemplate;
_emptyTemplate;
_filterIconTemplate;
_checkIconTemplate;
_checkmarkTemplate;
_loaderTemplate;
_filterValue = signal(null);
_filteredOptions;
filterOptions;
filtered;
value;
onModelChange = () => { };
onModelTouched = () => { };
optionTouched;
focus;
headerCheckboxFocus;
translationSubscription;
focused;
scrollerTabIndex = '0';
_componentStyle = inject(ListBoxStyle);
get containerClass() {
return {
'p-listbox p-component': true,
'p-listbox-striped': this.striped,
'p-disabled': this.disabled
};
}
get focusedOptionId() {
return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;
}
get filterResultMessageText() {
return isNotEmpty(this.visibleOptions()) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions().length) : this.emptyFilterMessageText;
}
get filterMessageText() {
return this.filterMessage || this.config.translation.searchMessage || '';
}
get searchMessageText() {
return this.searchMessage || this.config.translation.searchMessage || '';
}
get emptyFilterMessageText() {
return this.emptyFilterMessage || this.config.translation.emptySearchMessage || this.config.translation.emptyFilterMessage || '';
}
get selectionMessageText() {
return this.selectionMessage || this.config.translation.selectionMessage || '';
}
get emptySelectionMessageText() {
return this.emptySelectionMessage || this.config.translation.emptySelectionMessage || '';
}
get selectedMessageText() {
return this.hasSelectedOption() ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue().length : '1') : this.emptySelectionMessageText;
}
get ariaSetSize() {
return this.visibleOptions().filter((option) => !this.isOptionGroup(option)).length;
}
get virtualScrollerDisabled() {
return !this.virtualScroll;
}
get searchFields() {
return this.filterBy?.split(',') || this.filterFields || [this.optionLabel];
}
get toggleAllAriaLabel() {
return this.config.translation.aria ? this.config.translation.aria[this.allSelected() ? 'selectAll' : 'unselectAll'] : undefined;
}
searchValue;
searchTimeout;
_selectAll = null;
_options = signal(null);
startRangeIndex = signal(-1);
focusedOptionIndex = signal(-1);
modelValue = signal(null);
visibleOptions = computed(() => {
const options = this.group ? this.flatOptions(this._options()) : this._options() || [];
return this._filterValue() ? this.filterService.filter(options, this.searchFields, this._filterValue(), this.filterMatchMode, this.filterLocale) : options;
});
constructor(filterService) {
super();
this.filterService = filterService;
}
ngOnInit() {
super.ngOnInit();
this.id = this.id || uuid('pn_id_');
this.translationSubscription = this.config.translationObserver.subscribe(() => {
this.cd.markForCheck();
});
this.autoUpdateModel();
if (this.filterBy) {