primenglab 22.0.0-beta.1

package/fesm2022/primenglab-listbox.mjs

@@ -0,0 +1,2108 @@
+export * from 'primenglab/types/listbox';
+import * as i3 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule, CDK_DRAG_CONFIG } from '@angular/cdk/drag-drop';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, forwardRef, input, inject, booleanAttribute, numberAttribute, output, viewChild, contentChild, signal, computed, effect, HostListener, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i2 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { Blank } from '@primeicons/angular/blank';
+import { Check } from '@primeicons/angular/check';
+import { Search } from '@primeicons/angular/search';
+import { uuid, isNotEmpty, equals, focus, getFirstFocusableElement, isEmpty, isPrintableCharacter, resolveFieldData, findSingle, findLastIndex, isFunction } from '@primeuix/utils';
+import { FilterService, Header, Footer, SharedModule } from 'primenglab/api';
+import { PARENT_INSTANCE } from 'primenglab/basecomponent';
+import { BaseEditableHolder } from 'primenglab/baseeditableholder';
+import * as i1 from 'primenglab/bind';
+import { Bind, BindModule } from 'primenglab/bind';
+import { Checkbox } from 'primenglab/checkbox';
+import { IconField } from 'primenglab/iconfield';
+import { InputIcon } from 'primenglab/inputicon';
+import { InputText } from 'primenglab/inputtext';
+import { Ripple } from 'primenglab/ripple';
+import { Scroller } from 'primenglab/scroller';
+import { style as style$1 } from '@primeuix/styles/listbox';
+import { BaseStyle } from 'primenglab/base';
+
+const style = /*css*/ `
+    ${style$1}
+
+    /* For PrimeNG */
+    .p-listbox.ng-invalid.ng-dirty {
+        border-color: dt('listbox.invalid.border.color');
+    }
+
+    .p-listbox-header {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-listbox-header > .p-iconfield {
+        flex-grow: 1;
+    }
+
+    .p-listbox-list-container {
+        height: 100%;
+    }
+
+    /* CDK Drag & Drop styles */
+    .p-listbox-option.cdk-drag-preview {
+        background: dt('listbox.background');
+    }
+
+    .p-listbox-dragging .p-listbox-option:not(.cdk-drag-preview) {
+        pointer-events: none !important;
+    }
+
+    .p-listbox-dragging .p-listbox-option:not(.cdk-drag-preview):hover {
+        background: inherit !important;
+        color: inherit !important;
+    }
+
+    .cdk-drag-placeholder {
+        pointer-events: none;
+    }
+`;
+const classes = {
+    root: ({ instance }) => [
+        'p-listbox p-component',
+        {
+            'p-listbox-striped': instance.striped(),
+            'p-disabled': instance.$disabled(),
+            'p-invalid': instance.invalid(),
+            'p-listbox-fluid': instance.fluid(),
+            'p-listbox-dragging': instance.isDragging()
+        }
+    ],
+    header: 'p-listbox-header',
+    pcFilter: 'p-listbox-filter',
+    listContainer: 'p-listbox-list-container',
+    list: 'p-listbox-list',
+    optionGroup: 'p-listbox-option-group',
+    option: ({ instance, option, i, scrollerOptions }) => [
+        'p-listbox-option',
+        {
+            'p-listbox-option-selected': instance.isSelected(option) && instance.highlightOnSelect(),
+            'p-focus': instance.focusedOptionIndex() === instance.getOptionIndex(i, scrollerOptions),
+            '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';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ListBoxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ListBoxStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ListBoxStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * 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 LISTBOX_INSTANCE = new InjectionToken('LISTBOX_INSTANCE');
+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 BaseEditableHolder {
+    componentName = 'Listbox';
+    hostName = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostName" }] : /* istanbul ignore next */ []));
+    bindDirectiveInstance = inject(Bind, { self: true });
+    $pcListbox = inject(LISTBOX_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    filterService = inject(FilterService);
+    onAfterViewChecked() {
+        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
+    }
+    /**
+     * Unique identifier of the component.
+     * @group Props
+     */
+    id = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+    /**
+     * Text to display when the search is active. Defaults to global value in i18n translation configuration.
+     * @group Props
+     * @defaultValue '{0} results are available'
+     */
+    searchMessage = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "searchMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * 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 = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "emptySelectionMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * 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 = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "selectionMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to focus on the first visible or selected element when the overlay panel is shown.
+     * @group Props
+     */
+    autoOptionFocus = input(true, { ...(ngDevMode ? { debugName: "autoOptionFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Defines a string that labels the input for accessibility.
+     * @group Props
+     */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * When enabled, the focused option is selected.
+     * @group Props
+     */
+    selectOnFocus = input(undefined, { ...(ngDevMode ? { debugName: "selectOnFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Locale to use in searching. The default locale is the host environment's current locale.
+     * @group Props
+     */
+    searchLocale = input(undefined, { ...(ngDevMode ? { debugName: "searchLocale" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When enabled, the hovered option will be focused.
+     * @group Props
+     */
+    focusOnHover = input(true, { ...(ngDevMode ? { debugName: "focusOnHover" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Text to display when filtering.
+     * @group Props
+     */
+    filterMessage = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Fields used when filtering the options, defaults to optionLabel.
+     * @group Props
+     */
+    filterFields = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterFields" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @group Props
+     */
+    lazy = input(false, { ...(ngDevMode ? { debugName: "lazy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the data should be loaded on demand during scroll.
+     * @group Props
+     */
+    virtualScroll = input(undefined, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Height of an item in the list for VirtualScrolling.
+     * @group Props
+     */
+    virtualScrollItemSize = input(undefined, { ...(ngDevMode ? { debugName: "virtualScrollItemSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
+     * @group Props
+     */
+    virtualScrollOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "virtualScrollOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
+     * @group Props
+     */
+    scrollHeight = input('14rem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * When specified, allows selecting multiple values.
+     * @group Props
+     */
+    multiple = input(undefined, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Inline style of the list element.
+     * @group Props
+     */
+    listStyle = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "listStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Style class of the list element.
+     * @group Props
+     */
+    listStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "listStyleClass" }] : /* istanbul ignore next */ []));
+    /**
+     * When present, it specifies that the element value cannot be changed.
+     * @group Props
+     */
+    readonly = input(undefined, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When specified, allows selecting items with checkboxes.
+     * @group Props
+     */
+    checkbox = input(false, { ...(ngDevMode ? { debugName: "checkbox" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When specified, displays a filter input at header.
+     * @group Props
+     */
+    filter = input(false, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @group Props
+     */
+    filterBy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines how the items are filtered.
+     * @group Props
+     */
+    filterMatchMode = input('contains', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterMatchMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @group Props
+     */
+    filterLocale = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterLocale" }] : /* istanbul ignore next */ []));
+    /**
+     * 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 = input(false, { ...(ngDevMode ? { debugName: "metaKeySelection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * A property to uniquely identify a value in options.
+     * @group Props
+     */
+    dataKey = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dataKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether header checkbox is shown in multiple mode.
+     * @group Props
+     */
+    showToggleAll = input(true, { ...(ngDevMode ? { debugName: "showToggleAll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Name of the label field of an option.
+     * @group Props
+     */
+    optionLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the value field of an option.
+     * @group Props
+     */
+    optionValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the options field of an option group.
+     * @group Props
+     */
+    optionGroupChildren = input('items', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionGroupChildren" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the label field of an option group.
+     * @group Props
+     */
+    optionGroupLabel = input('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionGroupLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Name of the disabled field of an option or function to determine disabled state.
+     * @group Props
+     */
+    optionDisabled = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines a string that labels the filter input.
+     * @group Props
+     */
+    ariaFilterLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaFilterLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Defines placeholder of the filter input.
+     * @group Props
+     */
+    filterPlaceHolder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterPlaceHolder" }] : /* istanbul ignore next */ []));
+    /**
+     * Text to display when filtering does not return any results.
+     * @group Props
+     */
+    emptyFilterMessage = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "emptyFilterMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Text to display when there is no data. Defaults to global value in i18n translation configuration.
+     * @group Props
+     */
+    emptyMessage = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to display options as grouped when nested options are provided.
+     * @group Props
+     */
+    group = input(undefined, { ...(ngDevMode ? { debugName: "group" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * An array of selectitems to display as the available options.
+     * @group Props
+     */
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    /**
+     * When specified, filter displays with this value.
+     * @group Props
+     */
+    filterValue = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "filterValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether all data is selected.
+     * @group Props
+     */
+    selectAll = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "selectAll" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to displays rows with alternating colors.
+     * @group Props
+     * @defaultValue false
+     */
+    striped = input(false, { ...(ngDevMode ? { debugName: "striped" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the selected option will be add highlight class.
+     * @group Props
+     * @defaultValue true
+     */
+    highlightOnSelect = input(true, { ...(ngDevMode ? { debugName: "highlightOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether the selected option will be shown with a check mark.
+     * @group Props
+     * @defaultValue false
+     */
+    checkmark = input(false, { ...(ngDevMode ? { debugName: "checkmark" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Whether to enable dragdrop based reordering.
+     * @group Props
+     */
+    dragdrop = input(false, { ...(ngDevMode ? { debugName: "dragdrop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Array to use for CDK drop list data binding. When not provided, uses options array.
+     * @group Props
+     */
+    dropListData = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dropListData" }] : /* istanbul ignore next */ []));
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue undefined
+     * @group Props
+     */
+    fluid = input(undefined, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Callback to invoke on value change.
+     * @param {ListboxChangeEvent} event - Custom change event.
+     * @group Emits
+     */
+    onChange = output();
+    /**
+     * Callback to invoke when option is clicked.
+     * @param {ListboxClickEvent} event - Custom click event.
+     * @group Emits
+     */
+    onClick = output();
+    /**
+     * Callback to invoke when option is double clicked.
+     * @param {ListboxDoubleClickEvent} event - Custom double click event.
+     * @group Emits
+     */
+    onDblClick = output();
+    /**
+     * Callback to invoke when data is filtered.
+     * @param {ListboxFilterEvent} event - Custom filter event.
+     * @group Emits
+     */
+    onFilter = output();
+    /**
+     * Callback to invoke when component receives focus.
+     * @param {FocusEvent} event - Focus event.
+     * @group Emits
+     */
+    onFocus = output();
+    /**
+     * Callback to invoke when component loses focus.
+     * @param {FocusEvent} event - Blur event.
+     * @group Emits
+     */
+    onBlur = output();
+    /**
+     * Callback to invoke when all data is selected.
+     * @param {ListboxSelectAllChangeEvent} event - Custom select event.
+     * @group Emits
+     */
+    onSelectAllChange = output();
+    /**
+     * Emits on lazy load.
+     * @param {ScrollerLazyLoadEvent} event - Scroller lazy load event.
+     * @group Emits
+     */
+    onLazyLoad = output();
+    /**
+     * Emits on item is dropped.
+     * @param {CdkDragDrop<string[]>} event - Scroller lazy load event.
+     * @group Emits
+     */
+    onDrop = output();
+    headerCheckboxViewChild = viewChild('headerchkbox', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerCheckboxViewChild" }] : /* istanbul ignore next */ []));
+    filterViewChild = viewChild('filterInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterViewChild" }] : /* istanbul ignore next */ []));
+    lastHiddenFocusableElement = viewChild('lastHiddenFocusableElement', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastHiddenFocusableElement" }] : /* istanbul ignore next */ []));
+    firstHiddenFocusableElement = viewChild('firstHiddenFocusableElement', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstHiddenFocusableElement" }] : /* istanbul ignore next */ []));
+    scroller = viewChild('scroller', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
+    listViewChild = viewChild('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listViewChild" }] : /* istanbul ignore next */ []));
+    containerViewChild = viewChild('container', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerViewChild" }] : /* istanbul ignore next */ []));
+    headerFacet = contentChild(Header, { ...(ngDevMode ? { debugName: "headerFacet" } : /* istanbul ignore next */ {}), descendants: false });
+    footerFacet = contentChild(Footer, { ...(ngDevMode ? { debugName: "footerFacet" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom item template.
+     * @param {ListboxItemTemplateContext} context - item context.
+     * @see {@link ListboxItemTemplateContext}
+     * @group Templates
+     */
+    itemTemplate = contentChild('item', { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom group template.
+     * @param {ListboxGroupTemplateContext} context - group context.
+     * @see {@link ListboxGroupTemplateContext}
+     * @group Templates
+     */
+    groupTemplate = contentChild('group', { ...(ngDevMode ? { debugName: "groupTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom header template.
+     * @param {ListboxHeaderTemplateContext} context - header context.
+     * @see {@link ListboxHeaderTemplateContext}
+     * @group Templates
+     */
+    headerTemplate = contentChild('header', { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom filter template.
+     * @param {ListboxFilterTemplateContext} context - filter context.
+     * @see {@link ListboxFilterTemplateContext}
+     * @group Templates
+     */
+    filterTemplate = contentChild('filter', { ...(ngDevMode ? { debugName: "filterTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom footer template.
+     * @param {ListboxFooterTemplateContext} context - footer context.
+     * @see {@link ListboxFooterTemplateContext}
+     * @group Templates
+     */
+    footerTemplate = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom empty filter message template.
+     * @group Templates
+     */
+    emptyFilterTemplate = contentChild('emptyfilter', { ...(ngDevMode ? { debugName: "emptyFilterTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom empty message template.
+     * @group Templates
+     */
+    emptyTemplate = contentChild('empty', { ...(ngDevMode ? { debugName: "emptyTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom filter icon template.
+     * @group Templates
+     */
+    filterIconTemplate = contentChild('filtericon', { ...(ngDevMode ? { debugName: "filterIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom check icon template.
+     * @param {ListboxCheckIconTemplateContext} context - check icon context.
+     * @see {@link ListboxCheckIconTemplateContext}
+     * @group Templates
+     */
+    checkIconTemplate = contentChild('checkicon', { ...(ngDevMode ? { debugName: "checkIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom checkmark icon template.
+     * @param {ListboxCheckmarkTemplateContext} context - checkmark context.
+     * @see {@link ListboxCheckmarkTemplateContext}
+     * @group Templates
+     */
+    checkmarkTemplate = contentChild('checkmark', { ...(ngDevMode ? { debugName: "checkmarkTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    /**
+     * Custom loader template.
+     * @param {ListboxLoaderTemplateContext} context - loader context.
+     * @see {@link ListboxLoaderTemplateContext}
+     * @group Templates
+     */
+    loaderTemplate = contentChild('loader', { ...(ngDevMode ? { debugName: "loaderTemplate" } : /* istanbul ignore next */ {}), descendants: false });
+    _filterValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_filterValue" }] : /* istanbul ignore next */ []));
+    _filteredOptions;
+    filterOptions;
+    filtered;
+    value;
+    optionTouched;
+    focus;
+    headerCheckboxFocus;
+    translation = toSignal(this.config.translationObserver, { initialValue: this.config.translation });
+    focused;
+    scrollerTabIndex = '0';
+    _componentStyle = inject(ListBoxStyle);
+    _options = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_options" }] : /* istanbul ignore next */ []));
+    startRangeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startRangeIndex" }] : /* istanbul ignore next */ []));
+    focusedOptionIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : /* istanbul ignore next */ []));
+    isDragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    searchValue;
+    searchTimeout;
+    _internalId = uuid('pn_id_');
+    $id = computed(() => this.id() || this._internalId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$id" }] : /* istanbul ignore next */ []));
+    $tabindex = computed(() => this.tabindex() ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "$tabindex" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for hidden focusable element tabindex
+     */
+    hiddenFocusableTabindex = computed(() => (!this.$disabled() ? this.$tabindex() : -1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenFocusableTabindex" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for header section visibility
+     */
+    hasHeader = computed(() => !!this.headerFacet() || !!this.headerTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for footer section visibility
+     */
+    hasFooter = computed(() => !!this.footerFacet() || !!this.footerTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for checkbox/filter header visibility
+     */
+    hasCheckboxOrFilter = computed(() => (this.checkbox() && this.multiple() && this.showToggleAll()) || this.filter(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasCheckboxOrFilter" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for showing checkbox toggle all
+     */
+    showCheckboxToggleAll = computed(() => this.checkbox() && this.multiple() && this.showToggleAll(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCheckboxToggleAll" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for showing option checkbox
+     */
+    showOptionCheckbox = computed(() => this.checkbox() && this.multiple(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showOptionCheckbox" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for showing filtered empty message
+     */
+    showFilteredEmptyMessage = computed(() => this.hasFilter() && this.isEmpty(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFilteredEmptyMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for showing empty message
+     */
+    showEmptyMessage = computed(() => !this.hasFilter() && this.isEmpty(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showEmptyMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for aria-activedescendant
+     */
+    ariaActiveDescendant = computed(() => (this.focused ? this.focusedOptionId() : undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaActiveDescendant" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for header template context
+     */
+    headerTemplateContext = computed(() => ({ $implicit: this.modelValue(), options: this.visibleOptions() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerTemplateContext" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for footer template context
+     */
+    footerTemplateContext = computed(() => ({ $implicit: this.modelValue(), options: this.visibleOptions() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTemplateContext" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for filter input value
+     */
+    filterInputValue = computed(() => this._filterValue() || '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterInputValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for disabled attribute
+     */
+    disabledAttr = computed(() => (this.$disabled() ? '' : undefined), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledAttr" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for list id
+     */
+    listId = computed(() => `${this.$id()}_list`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listId" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for scroller style
+     */
+    scrollerStyle = computed(() => ({ height: this.scrollHeight() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollerStyle" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for showing default filter empty message
+     */
+    showDefaultFilterEmptyMessage = computed(() => !this.emptyFilterTemplate() && !this.emptyTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDefaultFilterEmptyMessage" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for empty or filter template
+     */
+    emptyOrFilterTemplate = computed(() => this.emptyFilterTemplate() || this.emptyTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyOrFilterTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for build in items context
+     */
+    buildInItemsContext = computed(() => ({ $implicit: this.visibleOptions(), options: {} }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buildInItemsContext" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for dragdrop disabled
+     */
+    dragdropDisabled = computed(() => !this.dragdrop(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragdropDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for check icon context
+     */
+    allSelectedContext = computed(() => ({ $implicit: this.allSelected() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allSelectedContext" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for showing default checkmark
+     */
+    showDefaultCheckmark = computed(() => !this.checkmarkTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDefaultCheckmark" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for showing default item label
+     */
+    showDefaultItemLabel = computed(() => !this.itemTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDefaultItemLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for showing default group label
+     */
+    showDefaultGroupLabel = computed(() => !this.groupTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDefaultGroupLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for showing filter icon
+     */
+    showDefaultFilterIcon = computed(() => !this.filterIconTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDefaultFilterIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Computed property for stable CDK drop list data reference
+     */
+    cdkDropData = computed(() => this.dropListData() || this._options(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cdkDropData" }] : /* istanbul ignore next */ []));
+    checkboxVariant = computed(() => (this.config.inputVariant() === 'filled' ? 'filled' : 'outlined'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkboxVariant" }] : /* istanbul ignore next */ []));
+    listContainerStyle = computed(() => {
+        const listStyle = this.listStyle();
+        const maxHeight = this.virtualScroll() ? 'auto' : this.scrollHeight() || 'auto';
+        return { ...listStyle, 'max-height': maxHeight };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listContainerStyle" }] : /* istanbul ignore next */ []));
+    focusedOptionId = computed(() => (this.focusedOptionIndex() !== -1 ? `${this.$id()}_${this.focusedOptionIndex()}` : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedOptionId" }] : /* istanbul ignore next */ []));
+    filterTabindex = computed(() => (!this.$disabled() && !this.focused ? this.$tabindex() : -1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterTabindex" }] : /* istanbul ignore next */ []));
+    filterResultMessageText = computed(() => {
+        return isNotEmpty(this.visibleOptions()) ? this.filterMessageText().replaceAll('{0}', String(this.visibleOptions().length)) : this.emptyFilterMessageText();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterResultMessageText" }] : /* istanbul ignore next */ []));
+    filterMessageText = computed(() => {
+        const t = this.translation();
+        return this.filterMessage() || t?.searchMessage || '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterMessageText" }] : /* istanbul ignore next */ []));
+    searchMessageText = computed(() => {
+        const t = this.translation();
+        return this.searchMessage() || t?.searchMessage || '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchMessageText" }] : /* istanbul ignore next */ []));
+    emptyFilterMessageText = computed(() => {
+        const t = this.translation();
+        return this.emptyFilterMessage() || t?.emptySearchMessage || t?.emptyFilterMessage || '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyFilterMessageText" }] : /* istanbul ignore next */ []));
+    selectionMessageText = computed(() => {
+        const t = this.translation();
+        return this.selectionMessage() || t?.selectionMessage || '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMessageText" }] : /* istanbul ignore next */ []));
+    emptySelectionMessageText = computed(() => {
+        const t = this.translation();
+        return this.emptySelectionMessage() || t?.emptySelectionMessage || '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptySelectionMessageText" }] : /* istanbul ignore next */ []));
+    selectedMessageText = computed(() => {
+        return this.hasSelectedOption() ? this.selectionMessageText().replaceAll('{0}', this.multiple() ? String(this.modelValue().length) : '1') : this.emptySelectionMessageText();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedMessageText" }] : /* istanbul ignore next */ []));
+    ariaSetSize = computed(() => this.visibleOptions().filter((option) => !this.isOptionGroup(option)).length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSetSize" }] : /* istanbul ignore next */ []));
+    virtualScrollerDisabled = computed(() => !this.virtualScroll(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "virtualScrollerDisabled" }] : /* istanbul ignore next */ []));
+    searchFields = computed(() => this.filterBy()?.split(',') || this.filterFields() || [this.optionLabel()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchFields" }] : /* istanbul ignore next */ []));
+    toggleAllAriaLabel = computed(() => {
+        const t = this.translation();
+        return t?.aria ? t.aria[this.allSelected() ? 'selectAll' : 'unselectAll'] : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toggleAllAriaLabel" }] : /* istanbul ignore next */ []));
+    onHostFocusOut(event) {
+        this.onFocusout(event);
+    }
+    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;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        // Sync options input to internal signal
+        effect(() => {
+            const opts = this.options();
+            if (opts !== undefined) {
+                this._options.set(opts);
+            }
+        });
+        // Sync filterValue input to internal signal
+        effect(() => {
+            const fv = this.filterValue();
+            if (fv !== undefined) {
+                this._filterValue.set(fv);
+            }
+        });
+    }
+    onInit() {
+        this.autoUpdateModel();
+        if (this.filterBy()) {
+            this.filterOptions = {
+                filter: (value) => this.onFilterChange(value),
+                reset: () => this.resetFilter()
+            };
+        }
+    }
+    flatOptions(options) {
+        return (options || []).reduce((result, option, index) => {
+            result.push({ optionGroup: option, group: true, index });
+            const optionGroupChildren = this.getOptionGroupChildren(option);
+            optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
+            return result;
+        }, []);
+    }
+    autoUpdateModel() {
+        if (this.selectOnFocus() && this.autoOptionFocus() && !this.hasSelectedOption() && !this.multiple()) {
+            const focusedOptionIndex = this.findFirstFocusedOptionIndex();
+            this.focusedOptionIndex.set(focusedOptionIndex);
+            this.onOptionSelect(null, this.visibleOptions()[this.focusedOptionIndex()]);
+        }
+    }
+    /**
+     * Updates the model value.
+     * @group Method
+     */
+    updateModel(value, event) {
+        this.value = value;
+        this.writeModelValue(value);
+        this.onModelChange(value);
+        this.onChange.emit({ originalEvent: event, value: this.value });
+    }
+    removeOption(option) {
+        return this.modelValue().filter((val) => !equals(val, this.getOptionValue(option), this.equalityKey() || ''));
+    }
+    onOptionSelect(event, option, index = -1) {
+        if (this.$disabled() || this.isOptionDisabled(option) || this.readonly()) {
+            return;
+        }
+        event && this.onClick.emit({ originalEvent: event, option, value: this.value });
+        this.multiple() ? this.onOptionSelectMultiple(event, option) : this.onOptionSelectSingle(event, option);
+        this.optionTouched = false;
+        index !== -1 && this.focusedOptionIndex.set(index);
+    }
+    onOptionSelectMultiple(event, option) {
+        let selected = this.isSelected(option);
+        let value = [];
+        let metaSelection = this.optionTouched ? false : this.metaKeySelection();
+        if (metaSelection) {
+            let metaKey = event.metaKey || event.ctrlKey;
+            if (selected) {
+                value = metaKey ? this.removeOption(option) : [this.getOptionValue(option)];
+            }
+            else {
+                value = metaKey ? this.modelValue() || [] : [];
+                value = [...(value || []), this.getOptionValue(option)];
+            }
+        }
+        else {
+            value = selected ? this.removeOption(option) : [...(this.modelValue() || []), this.getOptionValue(option)];
+        }
+        this.updateModel(value, event);
+    }
+    onOptionSelectSingle(event, option) {
+        let selected = this.isSelected(option);
+        let valueChanged = false;
+        let value = null;
+        let metaSelection = this.optionTouched ? false : this.metaKeySelection();
+        if (metaSelection) {
+            let metaKey = event.metaKey || event.ctrlKey;
+            if (selected) {
+                if (metaKey) {
+                    value = null;
+                    valueChanged = true;
+                }
+            }
+            else {
+                value = this.getOptionValue(option);
+                valueChanged = true;
+            }
+        }
+        else {
+            value = selected ? null : this.getOptionValue(option);
+            valueChanged = true;
+        }
+        if (valueChanged) {
+            this.updateModel(value, event);
+        }
+    }
+    onOptionSelectRange(event, start = -1, end = -1) {
+        start === -1 && (start = this.findNearestSelectedOptionIndex(end, true));
+        end === -1 && (end = this.findNearestSelectedOptionIndex(start));
+        if (start !== -1 && end !== -1) {
+            const rangeStart = Math.min(start, end);
+            const rangeEnd = Math.max(start, end);
+            const value = this.visibleOptions()
+                .slice(rangeStart, rangeEnd + 1)
+                .filter((option) => this.isValidOption(option))
+                .map((option) => this.getOptionValue(option));
+            this.updateModel(value, event);
+        }
+    }
+    onToggleAll(event) {
+        if (this.$disabled() || this.readonly()) {
+            return;
+        }
+        focus(this.headerCheckboxViewChild()?.nativeElement);
+        if (this.selectAll() !== null && this.selectAll() !== undefined) {
+            this.onSelectAllChange.emit({
+                originalEvent: event,
+                checked: !this.allSelected()
+            });
+        }
+        else {
+            const value = this.allSelected()
+                ? []
+                : this.visibleOptions()
+                    .filter((option) => this.isValidOption(option))
+                    .map((option) => this.getOptionValue(option));
+            this.updateModel(value, event);
+        }
+    }
+    allSelected() {
+        const selectAllValue = this.selectAll();
+        return selectAllValue !== null && selectAllValue !== undefined
+            ? selectAllValue
+            : isNotEmpty(this.visibleOptions()) && this.visibleOptions().every((option) => this.isOptionGroup(option) || this.isOptionDisabled(option) || this.isSelected(option));
+    }
+    onOptionTouchEnd() {
+        if (this.$disabled()) {
+            return;
+        }
+        this.optionTouched = true;
+    }
+    onOptionMouseDown(event, index) {
+        this.changeFocusedOptionIndex(event, index);
+    }
+    onOptionMouseEnter(event, index) {
+        if (this.focusOnHover() && this.focused) {
+            this.changeFocusedOptionIndex(event, index);
+        }
+    }
+    onOptionDoubleClick(event, option) {
+        if (this.$disabled() || this.isOptionDisabled(option) || this.readonly()) {
+            return;
+        }
+        this.onDblClick.emit({
+            originalEvent: event,
+            option: option,
+            value: this.value
+        });
+    }
+    onFirstHiddenFocus(event) {
+        focus(this.listViewChild()?.nativeElement);
+        const firstFocusableEl = getFirstFocusableElement(this.el?.nativeElement, ':not([data-p-hidden-focusable="true"])');
+        const lastEl = this.lastHiddenFocusableElement();
+        const firstEl = this.firstHiddenFocusableElement();
+        lastEl?.nativeElement && (lastEl.nativeElement.tabIndex = isEmpty(firstFocusableEl) ? -1 : undefined);
+        firstEl?.nativeElement && (firstEl.nativeElement.tabIndex = -1);
+    }
+    onLastHiddenFocus(event) {
+        const relatedTarget = event.relatedTarget;
+        const lastEl = this.lastHiddenFocusableElement();
+        const firstEl = this.firstHiddenFocusableElement();
+        if (relatedTarget === this.listViewChild()?.nativeElement) {
+            const firstFocusableEl = getFirstFocusableElement(this.el?.nativeElement, ':not([data-p-hidden-focusable="true"])');
+            focus(firstFocusableEl);
+            firstEl?.nativeElement && (firstEl.nativeElement.tabIndex = undefined);
+        }
+        else {
+            focus(firstEl?.nativeElement);
+        }
+        lastEl?.nativeElement && (lastEl.nativeElement.tabIndex = -1);
+    }
+    onFocusout(event) {
+        const lastEl = this.lastHiddenFocusableElement();
+        const firstEl = this.firstHiddenFocusableElement();
+        if (!this.el.nativeElement.contains(event.relatedTarget) && lastEl && firstEl) {
+            firstEl.nativeElement.tabIndex = lastEl.nativeElement.tabIndex = undefined;
+            this.scrollerTabIndex = '0';
+        }
+    }
+    onListFocus(event) {
+        this.focused = true;
+        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus() ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex();
+        this.focusedOptionIndex.set(focusedOptionIndex);
+        this.scrollInView(focusedOptionIndex);
+        this.onFocus.emit(event);
+        this.scrollerTabIndex = '-1';
+    }
+    onListBlur(event) {
+        this.focused = false;
+        this.focusedOptionIndex.set(-1);
+        this.startRangeIndex.set(-1);
+        this.searchValue = '';
+        this.onBlur.emit(event);
+    }
+    onHeaderCheckboxKeyDown(event) {
+        if (this.$disabled()) {
+            event.preventDefault();
+            return;
+        }
+        switch (event.code) {
+            case 'Space':
+                this.onToggleAll(event);
+                break;
+            case 'Enter':
+                this.onToggleAll(event);
+                break;
+            case 'Tab':
+                this.onHeaderCheckboxTabKeyDown(event);
+                break;
+            default:
+                break;
+        }
+    }
+    onHeaderCheckboxTabKeyDown(event) {
+        focus(this.listViewChild()?.nativeElement);
+        event.preventDefault();
+    }
+    onFilterChange(event) {
+        let value = event.target.value?.trim();
+        this._filterValue.set(value);
+        this.focusedOptionIndex.set(-1);
+        this.startRangeIndex.set(-1);
+        this.onFilter.emit({ originalEvent: event, filter: this._filterValue() });
+        !this.virtualScrollerDisabled() && this.scroller()?.scrollToIndex(0);
+    }
+    onFilterBlur(event) {
+        this.focusedOptionIndex.set(-1);
+        this.startRangeIndex.set(-1);
+    }
+    onListKeyDown(event) {
+        const metaKey = event.metaKey || event.ctrlKey;
+        switch (event.code) {
+            case 'ArrowDown':
+                this.onArrowDownKey(event);
+                break;
+            case 'ArrowUp':
+                this.onArrowUpKey(event);
+                break;
+            case 'Home':
+                this.onHomeKey(event);
+                break;
+            case 'End':
+                this.onEndKey(event);
+                break;
+            case 'PageDown':
+                this.onPageDownKey(event);
+                break;
+            case 'PageUp':
+                this.onPageUpKey(event);
+                break;
+            case 'Enter':
+            case 'Space':
+            case 'NumpadEnter':
+                this.onSpaceKey(event);
+                break;
+            case 'Tab':
+                //NOOP
+                break;
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                this.onShiftKey();
+                break;
+            default:
+                if (this.multiple() && event.code === 'KeyA' && metaKey) {
+                    const value = this.visibleOptions()
+                        .filter((option) => this.isValidOption(option))
+                        .map((option) => this.getOptionValue(option));
+                    this.updateModel(value, event);
+                    event.preventDefault();
+                    break;
+                }
+                if (!metaKey && isPrintableCharacter(event.key)) {
+                    this.searchOptions(event, event.key);
+                    event.preventDefault();
+                }
+                break;
+        }
+    }
+    onFilterKeyDown(event) {
+        switch (event.code) {
+            case 'ArrowDown':
+                this.onArrowDownKey(event);
+                break;
+            case 'ArrowUp':
+                this.onArrowUpKey(event);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                this.onArrowLeftKey(event, true);
+                break;
+            case 'Home':
+                this.onHomeKey(event, true);
+                break;
+            case 'End':
+                this.onEndKey(event, true);
+                break;
+            case 'Enter':
+                this.onEnterKey(event);
+                break;
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                this.onShiftKey();
+                break;
+            default:
+                break;
+        }
+    }
+    onArrowDownKey(event) {
+        const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.findFirstFocusedOptionIndex();
+        if (this.multiple() && event.shiftKey) {
+            this.onOptionSelectRange(event, this.startRangeIndex(), optionIndex);
+        }
+        this.changeFocusedOptionIndex(event, optionIndex);
+        event.preventDefault();
+    }
+    onArrowUpKey(event) {
+        const optionIndex = this.focusedOptionIndex() !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex()) : this.findLastFocusedOptionIndex();
+        if (this.multiple() && event.shiftKey) {
+            this.onOptionSelectRange(event, optionIndex, this.startRangeIndex());
+        }
+        this.changeFocusedOptionIndex(event, optionIndex);
+        event.preventDefault();
+    }
+    onArrowLeftKey(event, pressedInInputText = false) {
+        pressedInInputText && this.focusedOptionIndex.set(-1);
+    }
+    onHomeKey(event, pressedInInputText = false) {
+        if (pressedInInputText) {
+            event.currentTarget.setSelectionRange(0, 0);
+            this.focusedOptionIndex.set(-1);
+        }
+        else {
+            let metaKey = event.metaKey || event.ctrlKey;
+            let optionIndex = this.findFirstOptionIndex();
+            if (this.multiple() && event.shiftKey && metaKey) {
+                this.onOptionSelectRange(event, optionIndex, this.startRangeIndex());
+            }
+            this.changeFocusedOptionIndex(event, optionIndex);
+        }
+        event.preventDefault();
+    }
+    onEndKey(event, pressedInInputText = false) {
+        if (pressedInInputText) {
+            const target = event.currentTarget;
+            const len = target.value.length;
+            target.setSelectionRange(len, len);
+            this.focusedOptionIndex.set(-1);
+        }
+        else {
+            let metaKey = event.metaKey || event.ctrlKey;
+            let optionIndex = this.findLastOptionIndex();
+            if (this.multiple() && event.shiftKey && metaKey) {
+                this.onOptionSelectRange(event, this.startRangeIndex(), optionIndex);
+            }
+            this.changeFocusedOptionIndex(event, optionIndex);
+        }
+        event.preventDefault();
+    }
+    onPageDownKey(event) {
+        this.scrollInView(0);
+        event.preventDefault();
+    }
+    onPageUpKey(event) {
+        this.scrollInView(this.visibleOptions().length - 1);
+        event.preventDefault();
+    }
+    onEnterKey(event) {
+        if (this.focusedOptionIndex() !== -1) {
+            if (this.multiple() && event.shiftKey)
+                this.onOptionSelectRange(event, this.focusedOptionIndex());
+            else
+                this.onOptionSelect(event, this.visibleOptions()[this.focusedOptionIndex()]);
+        }
+        event.preventDefault();
+    }
+    onSpaceKey(event) {
+        this.onEnterKey(event);
+    }
+    onShiftKey() {
+        const focusedOptionIndex = this.focusedOptionIndex();
+        this.startRangeIndex.set(focusedOptionIndex);
+    }
+    getOptionGroupChildren(optionGroup) {
+        return this.optionGroupChildren() ? resolveFieldData(optionGroup, this.optionGroupChildren()) : optionGroup.items;
+    }
+    getOptionGroupLabel(optionGroup) {
+        return this.optionGroupLabel() ? resolveFieldData(optionGroup, this.optionGroupLabel()) : optionGroup && optionGroup.label !== undefined ? optionGroup.label : optionGroup;
+    }
+    getOptionLabel(option) {
+        return this.optionLabel() ? resolveFieldData(option, this.optionLabel()) : option.label != undefined ? option.label : option;
+    }
+    getOptionIndex(index, scrollerOptions) {
+        return this.virtualScrollerDisabled() ? index : scrollerOptions && scrollerOptions.getItemOptions(index)['index'];
+    }
+    getOptionValue(option) {
+        return this.optionValue() ? resolveFieldData(option, this.optionValue()) : !this.optionLabel() && option && option.value !== undefined ? option.value : option;
+    }
+    getOptionTrackKey(option, index) {
+        const key = this.isOptionGroup(option) ? this.getOptionGroupLabel(option.optionGroup) : this.getOptionValue(option);
+        return `${key ?? ''}_${index}`;
+    }
+    getAriaPosInset(index) {
+        return ((this.optionGroupLabel()
+            ? index -
+                this.visibleOptions()
+                    .slice(0, index)
+                    .filter((option) => this.isOptionGroup(option)).length
+            : index) + 1);
+    }
+    getPTOptions(option, itemOptions, index, key) {
+        return this.ptm(key, {
+            context: {
+                selected: this.isSelected(option),
+                focused: this.focusedOptionIndex() === this.getOptionIndex(index, itemOptions),
+                disabled: this.isOptionDisabled(option)
+            }
+        });
+    }
+    getOptionId(index, scrollerOptions) {
+        return `${this.$id()}_${this.getOptionIndex(index, scrollerOptions)}`;
+    }
+    getOptionCheckboxDisabled(option) {
+        return this.$disabled() || this.isOptionDisabled(option);
+    }
+    getCheckIconContext(option) {
+        return { $implicit: this.isSelected(option) };
+    }
+    getCheckmarkContext(option) {
+        return { implicit: this.isSelected(option) };
+    }
+    getGroupTemplateContext(optionGroup) {
+        return { $implicit: optionGroup };
+    }
+    getItemTemplateContext(option, index, scrollerOptions) {
+        return {
+            $implicit: option,
+            index: this.getOptionIndex(index, scrollerOptions),
+            selected: this.isSelected(option),
+            disabled: this.isOptionDisabled(option)
+        };
+    }
+    getFilterTemplateContext() {
+        return { options: this.filterOptions };
+    }
+    getBuildInItemsContext(items, scrollerOptions) {
+        return { $implicit: items, options: scrollerOptions };
+    }
+    getLoaderTemplateContext(scrollerOptions) {
+        return { options: scrollerOptions };
+    }
+    isOptionFocused(index, scrollerOptions) {
+        return this.focusedOptionIndex() === this.getOptionIndex(index, scrollerOptions);
+    }
+    hasSelectedOption() {
+        return isNotEmpty(this.modelValue());
+    }
+    isOptionGroup(option) {
+        return this.optionGroupLabel() && option.optionGroup && option.group;
+    }
+    changeFocusedOptionIndex(event, index) {
+        if (this.focusedOptionIndex() !== index) {
+            this.focusedOptionIndex.set(index);
+            this.scrollInView();
+            if (this.selectOnFocus() && !this.multiple()) {
+                this.onOptionSelect(event, this.visibleOptions()[index]);
+            }
+        }
+    }
+    searchOptions(event, char) {
+        this.searchValue = (this.searchValue || '') + char;
+        let optionIndex = -1;
+        let matched = false;
+        if (this.focusedOptionIndex() !== -1) {
+            optionIndex = this.visibleOptions()
+                .slice(this.focusedOptionIndex())
+                .findIndex((option) => this.isOptionMatched(option));
+            optionIndex =
+                optionIndex === -1
+                    ? this.visibleOptions()
+                        .slice(0, this.focusedOptionIndex())
+                        .findIndex((option) => this.isOptionMatched(option))
+                    : optionIndex + this.focusedOptionIndex();
+        }
+        else {
+            optionIndex = this.visibleOptions().findIndex((option) => this.isOptionMatched(option));
+        }
+        if (optionIndex !== -1) {
+            matched = true;
+        }
+        if (optionIndex === -1 && this.focusedOptionIndex() === -1) {
+            optionIndex = this.findFirstFocusedOptionIndex();
+        }
+        if (optionIndex !== -1) {
+            this.changeFocusedOptionIndex(event, optionIndex);
+        }
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+        }
+        this.searchTimeout = setTimeout(() => {
+            this.searchValue = '';
+            this.searchTimeout = null;
+        }, 500);
+        return matched;
+    }
+    isOptionMatched(option) {
+        return this.isValidOption(option) && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale()).startsWith(this.searchValue?.toLocaleLowerCase(this.filterLocale()));
+    }
+    scrollInView(index = -1) {
+        const id = index !== -1 ? `${this.$id()}_${index}` : this.focusedOptionId();
+        const element = findSingle(this.listViewChild()?.nativeElement, `li[id="${id}"]`);
+        if (element) {
+            element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        }
+        else if (!this.virtualScrollerDisabled()) {
+            this.virtualScroll() && this.scroller()?.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex());
+        }
+    }
+    findFirstOptionIndex() {
+        return this.visibleOptions().findIndex((option) => this.isValidOption(option));
+    }
+    findLastOptionIndex() {
+        return findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option));
+    }
+    findFirstFocusedOptionIndex() {
+        const selectedIndex = this.findFirstSelectedOptionIndex();
+        return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
+    }
+    findLastFocusedOptionIndex() {
+        const selectedIndex = this.findLastSelectedOptionIndex();
+        return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
+    }
+    findLastSelectedOptionIndex() {
+        return this.hasSelectedOption() ? findLastIndex(this.visibleOptions(), (option) => this.isValidSelectedOption(option)) : -1;
+    }
+    findNextOptionIndex(index) {
+        const matchedOptionIndex = index < this.visibleOptions().length - 1
+            ? this.visibleOptions()
+                .slice(index + 1)
+                .findIndex((option) => this.isValidOption(option))
+            : -1;
+        return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
+    }
+    findNextSelectedOptionIndex(index) {
+        const matchedOptionIndex = this.hasSelectedOption() && index < this.visibleOptions().length - 1
+            ? this.visibleOptions()
+                .slice(index + 1)
+                .findIndex((option) => this.isValidSelectedOption(option))
+            : -1;
+        return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
+    }
+    findPrevSelectedOptionIndex(index) {
+        const matchedOptionIndex = this.hasSelectedOption() && index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidSelectedOption(option)) : -1;
+        return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
+    }
+    findFirstSelectedOptionIndex() {
+        return this.hasSelectedOption() ? this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option)) : -1;
+    }
+    findPrevOptionIndex(index) {
+        const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1;
+        return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+    }
+    findSelectedOptionIndex() {
+        if (this.$filled()) {
+            if (this.multiple()) {
+                for (let index = this.modelValue().length - 1; index >= 0; index--) {
+                    const value = this.modelValue()[index];
+                    const matchedOptionIndex = this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option) && this.isEquals(value, this.getOptionValue(option)));
+                    if (matchedOptionIndex > -1)
+                        return matchedOptionIndex;
+                }
+            }
+            else {
+                return this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option));
+            }
+        }
+        return -1;
+    }
+    findNearestSelectedOptionIndex(index, firstCheckUp = false) {
+        let matchedOptionIndex = -1;
+        if (this.hasSelectedOption()) {
+            if (firstCheckUp) {
+                matchedOptionIndex = this.findPrevSelectedOptionIndex(index);
+                matchedOptionIndex = matchedOptionIndex === -1 ? this.findNextSelectedOptionIndex(index) : matchedOptionIndex;
+            }
+            else {
+                matchedOptionIndex = this.findNextSelectedOptionIndex(index);
+                matchedOptionIndex = matchedOptionIndex === -1 ? this.findPrevSelectedOptionIndex(index) : matchedOptionIndex;
+            }
+        }
+        return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+    }
+    equalityKey() {
+        return this.optionValue() ? null : this.dataKey();
+    }
+    isValidSelectedOption(option) {
+        return this.isValidOption(option) && this.isSelected(option);
+    }
+    isOptionDisabled(option) {
+        const optionDisabledValue = this.optionDisabled();
+        if (isFunction(optionDisabledValue)) {
+            return optionDisabledValue(option);
+        }
+        return optionDisabledValue ? resolveFieldData(option, optionDisabledValue) : false;
+    }
+    isEquals(value1, value2) {
+        return equals(value1, value2, this.equalityKey() || '');
+    }
+    isSelected(option) {
+        const optionValue = this.getOptionValue(option);
+        if (this.multiple())
+            return (this.modelValue() || []).some((value) => this.isEquals(value, optionValue));
+        else
+            return this.isEquals(this.modelValue(), optionValue);
+    }
+    isValidOption(option) {
+        return option && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
+    }
+    isEmpty() {
+        return !this._options()?.length || !this.visibleOptions()?.length;
+    }
+    hasFilter() {
+        return this._filterValue() && (this._filterValue()?.trim().length || 0) > 0;
+    }
+    resetFilter() {
+        const filterEl = this.filterViewChild();
+        if (filterEl && filterEl.nativeElement) {
+            filterEl.nativeElement.value = '';
+        }
+        this._filterValue.set(null);
+    }
+    onDragEntered() {
+        this.isDragging.set(true);
+        this.el.nativeElement.setAttribute('p-listbox-dragging', 'true');
+    }
+    onDragExited() {
+        this.isDragging.set(false);
+        this.el.nativeElement.setAttribute('p-listbox-dragging', 'false');
+    }
+    drop(event) {
+        this.isDragging.set(false);
+        if (event) {
+            // If dragdrop is enabled and same container (reordering), automatically handle reordering
+            if (this.dragdrop() && event.previousContainer === event.container) {
+                const currentOptions = [...this._options()];
+                if (this._filterValue()) {
+                    const visible = this.visibleOptions();
+                    const fromItem = visible[event.previousIndex];
+                    const toItem = visible[event.currentIndex];
+                    const realFrom = currentOptions.indexOf(fromItem);
+                    const realTo = currentOptions.indexOf(toItem);
+                    if (realFrom !== -1 && realTo !== -1) {
+                        moveItemInArray(currentOptions, realFrom, realTo);
+                    }
+                }
+                else {
+                    moveItemInArray(currentOptions, event.previousIndex, event.currentIndex);
+                }
+                this._options.set(currentOptions);
+                this.changeFocusedOptionIndex(event, event.currentIndex);
+                // Update model value if needed for selection preservation
+                if (this.modelValue()) {
+                    this.writeModelValue(this.modelValue());
+                    this.onModelChange(this.modelValue());
+                }
+            }
+            // Always emit the event for custom handling
+            this.onDrop.emit(event);
+        }
+    }
+    get containerDataP() {
+        return this.cn({
+            invalid: this.invalid(),
+            disabled: this.$disabled()
+        });
+    }
+    /**
+     * @override
+     *
+     * @see {@link BaseEditableHolder.writeControlValue}
+     * Writes the value to the control.
+     */
+    writeControlValue(value, setModelValue) {
+        this.value = value;
+        setModelValue(this.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: Listbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: Listbox, isStandalone: true, selector: "p-listbox, p-list-box", inputs: { hostName: { classPropertyName: "hostName", publicName: "hostName", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, searchMessage: { classPropertyName: "searchMessage", publicName: "searchMessage", isSignal: true, isRequired: false, transformFunction: null }, emptySelectionMessage: { classPropertyName: "emptySelectionMessage", publicName: "emptySelectionMessage", isSignal: true, isRequired: false, transformFunction: null }, selectionMessage: { classPropertyName: "selectionMessage", publicName: "selectionMessage", isSignal: true, isRequired: false, transformFunction: null }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, searchLocale: { classPropertyName: "searchLocale", publicName: "searchLocale", isSignal: true, isRequired: false, transformFunction: null }, focusOnHover: { classPropertyName: "focusOnHover", publicName: "focusOnHover", isSignal: true, isRequired: false, transformFunction: null }, filterMessage: { classPropertyName: "filterMessage", publicName: "filterMessage", isSignal: true, isRequired: false, transformFunction: null }, filterFields: { classPropertyName: "filterFields", publicName: "filterFields", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, listStyleClass: { classPropertyName: "listStyleClass", publicName: "listStyleClass", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, ariaFilterLabel: { classPropertyName: "ariaFilterLabel", publicName: "ariaFilterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceHolder: { classPropertyName: "filterPlaceHolder", publicName: "filterPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, highlightOnSelect: { classPropertyName: "highlightOnSelect", publicName: "highlightOnSelect", isSignal: true, isRequired: false, transformFunction: null }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: true, isRequired: false, transformFunction: null }, dragdrop: { classPropertyName: "dragdrop", publicName: "dragdrop", isSignal: true, isRequired: false, transformFunction: null }, dropListData: { classPropertyName: "dropListData", publicName: "dropListData", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onClick: "onClick", onDblClick: "onDblClick", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onSelectAllChange: "onSelectAllChange", onLazyLoad: "onLazyLoad", onDrop: "onDrop" }, host: { listeners: { "focusout": "onHostFocusOut($event)" }, properties: { "attr.id": "$id()", "class": "cx('root')", "attr.data-p": "containerDataP" } }, providers: [
+            LISTBOX_VALUE_ACCESSOR,
+            ListBoxStyle,
+            {
+                provide: CDK_DRAG_CONFIG,
+                useValue: {
+                    zIndex: 1200
+                }
+            },
+            { provide: LISTBOX_INSTANCE, useExisting: Listbox },
+            { provide: PARENT_INSTANCE, useExisting: Listbox }
+        ], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, isSignal: true }, { propertyName: "footerFacet", first: true, predicate: Footer, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], isSignal: true }, { propertyName: "filterTemplate", first: true, predicate: ["filter"], isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], isSignal: true }, { propertyName: "emptyFilterTemplate", first: true, predicate: ["emptyfilter"], isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], isSignal: true }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"], isSignal: true }, { propertyName: "checkIconTemplate", first: true, predicate: ["checkicon"], isSignal: true }, { propertyName: "checkmarkTemplate", first: true, predicate: ["checkmark"], isSignal: true }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"], isSignal: true }], viewQueries: [{ propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerchkbox"], descendants: true, isSignal: true }, { propertyName: "filterViewChild", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }, { propertyName: "lastHiddenFocusableElement", first: true, predicate: ["lastHiddenFocusableElement"], descendants: true, isSignal: true }, { propertyName: "firstHiddenFocusableElement", first: true, predicate: ["firstHiddenFocusableElement"], descendants: true, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        <span
+            #firstHiddenFocusableElement
+            role="presentation"
+            class="p-hidden-accessible p-hidden-focusable"
+            [tabindex]="hiddenFocusableTabindex()"
+            (focus)="onFirstHiddenFocus($event)"
+            [attr.data-p-hidden-focusable]="true"
+            [pBind]="ptm('hiddenFirstFocusableElement')"
+        >
+        </span>
+        @if (hasHeader()) {
+            <div [class]="cx('header')" [pBind]="ptm('header')">
+                <ng-content select="p-header"></ng-content>
+                <ng-container *ngTemplateOutlet="headerTemplate(); context: headerTemplateContext()"></ng-container>
+            </div>
+        }
+        @if (hasCheckboxOrFilter()) {
+            <div [class]="cx('header')" [pBind]="ptm('header')">
+                @if (showCheckboxToggleAll()) {
+                    <p-checkbox
+                        #headerchkbox
+                        (onChange)="onToggleAll($event)"
+                        [class]="cx('optionCheckIcon')"
+                        [ngModel]="allSelected()"
+                        [disabled]="$disabled()"
+                        [tabindex]="-1"
+                        [variant]="checkboxVariant()"
+                        [binary]="true"
+                        [attr.aria-label]="toggleAllAriaLabel()"
+                        [pt]="ptm('pcCheckbox')"
+                        [unstyled]="unstyled()"
+                    >
+                        @if (checkIconTemplate()) {
+                            <ng-template #icon>
+                                <ng-container *ngTemplateOutlet="checkIconTemplate(); context: allSelectedContext()"></ng-container>
+                            </ng-template>
+                        }
+                    </p-checkbox>
+                }
+                @if (filterTemplate()) {
+                    <ng-container *ngTemplateOutlet="filterTemplate(); context: getFilterTemplateContext()"></ng-container>
+                } @else {
+                    @if (filter()) {
+                        <p-iconfield [pt]="ptm('pcFilterContainer')" hostName="listbox" [unstyled]="unstyled()">
+                            <input
+                                #filterInput
+                                pInputText
+                                type="text"
+                                [class]="cx('pcFilter')"
+                                role="searchbox"
+                                [value]="filterInputValue()"
+                                [attr.disabled]="disabledAttr()"
+                                [attr.aria-owns]="listId()"
+                                [attr.aria-activedescendant]="focusedOptionId()"
+                                [attr.placeholder]="filterPlaceHolder()"
+                                [attr.aria-label]="ariaFilterLabel()"
+                                [attr.tabindex]="filterTabindex()"
+                                (input)="onFilterChange($event)"
+                                (keydown)="onFilterKeyDown($event)"
+                                (blur)="onFilterBlur($event)"
+                                [pt]="ptm('pcFilter')"
+                                [unstyled]="unstyled()"
+                                hostName="listbox"
+                            />
+                            <p-inputicon [pt]="ptm('pcFilterIconContainer')" [unstyled]="unstyled()">
+                                @if (showDefaultFilterIcon()) {
+                                    <svg data-p-icon="search" [attr.aria-hidden]="true" [pBind]="ptm('filterIcon')" />
+                                } @else {
+                                    <span [attr.aria-hidden]="true">
+                                        <ng-container *ngTemplateOutlet="filterIconTemplate()"></ng-container>
+                                    </span>
+                                }
+                            </p-inputicon>
+                        </p-iconfield>
+                    }
+                    <span role="status" [pBind]="ptm('hiddenFilterResult')" [attr.aria-live]="'polite'" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
+                        {{ filterResultMessageText() }}
+                    </span>
+                }
+            </div>
+        }
+        <div
+            #container
+            [class]="cn(cx('listContainer'), listStyleClass())"
+            [style]="listContainerStyle()"
+            cdkDropList
+            [cdkDropListData]="cdkDropData()"
+            (cdkDropListDropped)="drop($event)"
+            (cdkDropListEntered)="onDragEntered()"
+            (cdkDropListExited)="onDragExited()"
+            [pBind]="ptm('listContainer')"
+        >
+            @if (showFilteredEmptyMessage()) {
+                <div [class]="cx('emptyMessage')" [pBind]="ptm('emptyMessage')">
+                    @if (showDefaultFilterEmptyMessage()) {
+                        {{ emptyFilterMessageText() }}
+                    } @else {
+                        <ng-container *ngTemplateOutlet="emptyOrFilterTemplate()"></ng-container>
+                    }
+                </div>
+            } @else if (showEmptyMessage()) {
+                <div [class]="cx('emptyMessage')" [pBind]="ptm('emptyMessage')">
+                    @if (!emptyTemplate()) {
+                        {{ emptyMessage() }}
+                    } @else {
+                        <ng-container *ngTemplateOutlet="emptyTemplate()"></ng-container>
+                    }
+                </div>
+            } @else {
+                @if (virtualScroll()) {
+                    <p-scroller
+                        [pt]="ptm('virtualScroller')"
+                        hostName="listbox"
+                        #scroller
+                        [items]="visibleOptions()"
+                        [style]="scrollerStyle()"
+                        [itemSize]="virtualScrollItemSize()"
+                        [autoSize]="true"
+                        [lazy]="lazy()"
+                        [options]="virtualScrollOptions()"
+                        (onLazyLoad)="onLazyLoad.emit($event)"
+                        [tabindex]="scrollerTabIndex"
+                    >
+                        <ng-template #content let-items let-scrollerOptions="options">
+                            <ng-container *ngTemplateOutlet="buildInItems; context: getBuildInItemsContext(items, scrollerOptions)"></ng-container>
+                        </ng-template>
+                        @if (loaderTemplate()) {
+                            <ng-template #loader let-scrollerOptions="options">
+                                <ng-container *ngTemplateOutlet="loaderTemplate(); context: getLoaderTemplateContext(scrollerOptions)"></ng-container>
+                            </ng-template>
+                        }
+                    </p-scroller>
+                } @else {
+                    <ng-container *ngTemplateOutlet="buildInItems; context: buildInItemsContext()"></ng-container>
+                }
+
+                <ng-template #buildInItems let-items let-scrollerOptions="options">
+                    <ul
+                        #list
+                        [id]="listId()"
+                        [class]="cn(cx('list'), scrollerOptions.contentStyleClass)"
+                        role="listbox"
+                        [tabindex]="-1"
+                        [attr.aria-multiselectable]="true"
+                        [style]="scrollerOptions.contentStyle"
+                        [attr.aria-activedescendant]="ariaActiveDescendant()"
+                        [attr.aria-label]="ariaLabel()"
+                        [attr.aria-disabled]="$disabled()"
+                        (focus)="onListFocus($event)"
+                        (blur)="onListBlur($event)"
+                        (keydown)="onListKeyDown($event)"
+                        [pBind]="ptm('list')"
+                    >
+                        @for (option of items; track getOptionTrackKey(option, $index); let i = $index) {
+                            @if (isOptionGroup(option)) {
+                                <li
+                                    [attr.id]="getOptionId(i, scrollerOptions)"
+                                    [class]="cx('optionGroup')"
+                                    [pBind]="getPTOptions(option.optionGroup, scrollerOptions, i, 'optionGroup')"
+                                    [style.height.px]="scrollerOptions.itemSize"
+                                    role="option"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="dragdropDisabled()"
+                                    (cdkDragStarted)="isDragging.set(true)"
+                                    (cdkDragEnded)="isDragging.set(false)"
+                                >
+                                    @if (showDefaultGroupLabel()) {
+                                        <span>{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                    }
+                                    <ng-container *ngTemplateOutlet="groupTemplate(); context: getGroupTemplateContext(option.optionGroup)"></ng-container>
+                                </li>
+                            } @else {
+                                <li
+                                    pRipple
+                                    [class]="cx('option', { option, i, scrollerOptions })"
+                                    role="option"
+                                    [attr.id]="getOptionId(i, scrollerOptions)"
+                                    [style.height.px]="scrollerOptions.itemSize"
+                                    [attr.aria-label]="getOptionLabel(option)"
+                                    [attr.aria-selected]="isSelected(option)"
+                                    [attr.aria-disabled]="isOptionDisabled(option)"
+                                    [attr.aria-setsize]="ariaSetSize()"
+                                    [attr.ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                    [attr.data-p-selected]="isSelected(option)"
+                                    [attr.data-p-focused]="isOptionFocused(i, scrollerOptions)"
+                                    [attr.data-p-disabled]="isOptionDisabled(option)"
+                                    [pBind]="getPTOptions(option, scrollerOptions, i, 'option')"
+                                    (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
+                                    (dblclick)="onOptionDoubleClick($event, option)"
+                                    (mousedown)="onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))"
+                                    (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
+                                    (touchend)="onOptionTouchEnd()"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="dragdropDisabled()"
+                                    (cdkDragStarted)="isDragging.set(true)"
+                                    (cdkDragEnded)="isDragging.set(false)"
+                                >
+                                    @if (showOptionCheckbox()) {
+                                        <p-checkbox
+                                            [class]="cx('optionCheckIcon')"
+                                            [ngModel]="isSelected(option)"
+                                            [readonly]="true"
+                                            [disabled]="getOptionCheckboxDisabled(option)"
+                                            [tabindex]="-1"
+                                            [variant]="checkboxVariant()"
+                                            [binary]="true"
+                                            [pt]="ptm('pcCheckbox')"
+                                            hostName="listbox"
+                                            [unstyled]="unstyled()"
+                                        >
+                                            @if (checkIconTemplate()) {
+                                                <ng-template #icon>
+                                                    <ng-container *ngTemplateOutlet="checkIconTemplate(); context: getCheckIconContext(option)"></ng-container>
+                                                </ng-template>
+                                            }
+                                        </p-checkbox>
+                                    }
+                                    @if (checkmark()) {
+                                        @if (showDefaultCheckmark()) {
+                                            @if (!isSelected(option)) {
+                                                <svg data-p-icon="blank" [class]="cx('optionBlankIcon')" [pBind]="ptm('optionBlankIcon')" />
+                                            } @else {
+                                                <svg data-p-icon="check" [class]="cx('optionCheckIcon')" [pBind]="ptm('optionCheckIcon')" />
+                                            }
+                                        }
+                                        <ng-container *ngTemplateOutlet="checkmarkTemplate(); context: getCheckmarkContext(option)"></ng-container>
+                                    }
+                                    @if (showDefaultItemLabel()) {
+                                        <span>{{ getOptionLabel(option) }}</span>
+                                    }
+                                    <ng-container *ngTemplateOutlet="itemTemplate(); context: getItemTemplateContext(option, i, scrollerOptions)"></ng-container>
+                                </li>
+                            }
+                        }
+                    </ul>
+                </ng-template>
+            }
+        </div>
+        @if (hasFooter()) {
+            <ng-content select="p-footer"></ng-content>
+            <ng-container *ngTemplateOutlet="footerTemplate(); context: footerTemplateContext()"></ng-container>
+        }
+        @if (isEmpty()) {
+            <span role="status" aria-live="polite" class="p-hidden-accessible" [pBind]="ptm('hiddenEmptyMessage')">
+                {{ emptyMessage() }}
+            </span>
+        }
+        <span role="status" aria-live="polite" class="p-hidden-accessible" [pBind]="ptm('hiddenSelectedMessage')">
+            {{ selectedMessageText() }}
+        </span>
+        <span
+            #lastHiddenFocusableElement
+            role="presentation"
+            class="p-hidden-accessible p-hidden-focusable"
+            [tabindex]="hiddenFocusableTabindex()"
+            (focus)="onLastHiddenFocus($event)"
+            [attr.data-p-hidden-focusable]="true"
+            [pBind]="ptm('hiddenLastFocusableEl')"
+        >
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "component", type: InputIcon, selector: "p-inputicon", inputs: ["hostName"] }, { kind: "component", type: Search, selector: "svg[data-p-icon=\"search\"]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: Check, selector: "svg[data-p-icon=\"check\"]" }, { kind: "component", type: IconField, selector: "p-iconfield, p-icon-field", inputs: ["hostName", "iconPosition"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: Blank, selector: "svg[data-p-icon=\"blank\"]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: Listbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'p-listbox, p-list-box',
+                    standalone: true,
+                    imports: [NgTemplateOutlet, Ripple, Scroller, InputIcon, Search, Checkbox, Check, IconField, InputText, Blank, FormsModule, SharedModule, DragDropModule, BindModule],
+                    template: `
+        <span
+            #firstHiddenFocusableElement
+            role="presentation"
+            class="p-hidden-accessible p-hidden-focusable"
+            [tabindex]="hiddenFocusableTabindex()"
+            (focus)="onFirstHiddenFocus($event)"
+            [attr.data-p-hidden-focusable]="true"
+            [pBind]="ptm('hiddenFirstFocusableElement')"
+        >
+        </span>
+        @if (hasHeader()) {
+            <div [class]="cx('header')" [pBind]="ptm('header')">
+                <ng-content select="p-header"></ng-content>
+                <ng-container *ngTemplateOutlet="headerTemplate(); context: headerTemplateContext()"></ng-container>
+            </div>
+        }
+        @if (hasCheckboxOrFilter()) {
+            <div [class]="cx('header')" [pBind]="ptm('header')">
+                @if (showCheckboxToggleAll()) {
+                    <p-checkbox
+                        #headerchkbox
+                        (onChange)="onToggleAll($event)"
+                        [class]="cx('optionCheckIcon')"
+                        [ngModel]="allSelected()"
+                        [disabled]="$disabled()"
+                        [tabindex]="-1"
+                        [variant]="checkboxVariant()"
+                        [binary]="true"
+                        [attr.aria-label]="toggleAllAriaLabel()"
+                        [pt]="ptm('pcCheckbox')"
+                        [unstyled]="unstyled()"
+                    >
+                        @if (checkIconTemplate()) {
+                            <ng-template #icon>
+                                <ng-container *ngTemplateOutlet="checkIconTemplate(); context: allSelectedContext()"></ng-container>
+                            </ng-template>
+                        }
+                    </p-checkbox>
+                }
+                @if (filterTemplate()) {
+                    <ng-container *ngTemplateOutlet="filterTemplate(); context: getFilterTemplateContext()"></ng-container>
+                } @else {
+                    @if (filter()) {
+                        <p-iconfield [pt]="ptm('pcFilterContainer')" hostName="listbox" [unstyled]="unstyled()">
+                            <input
+                                #filterInput
+                                pInputText
+                                type="text"
+                                [class]="cx('pcFilter')"
+                                role="searchbox"
+                                [value]="filterInputValue()"
+                                [attr.disabled]="disabledAttr()"
+                                [attr.aria-owns]="listId()"
+                                [attr.aria-activedescendant]="focusedOptionId()"
+                                [attr.placeholder]="filterPlaceHolder()"
+                                [attr.aria-label]="ariaFilterLabel()"
+                                [attr.tabindex]="filterTabindex()"
+                                (input)="onFilterChange($event)"
+                                (keydown)="onFilterKeyDown($event)"
+                                (blur)="onFilterBlur($event)"
+                                [pt]="ptm('pcFilter')"
+                                [unstyled]="unstyled()"
+                                hostName="listbox"
+                            />
+                            <p-inputicon [pt]="ptm('pcFilterIconContainer')" [unstyled]="unstyled()">
+                                @if (showDefaultFilterIcon()) {
+                                    <svg data-p-icon="search" [attr.aria-hidden]="true" [pBind]="ptm('filterIcon')" />
+                                } @else {
+                                    <span [attr.aria-hidden]="true">
+                                        <ng-container *ngTemplateOutlet="filterIconTemplate()"></ng-container>
+                                    </span>
+                                }
+                            </p-inputicon>
+                        </p-iconfield>
+                    }
+                    <span role="status" [pBind]="ptm('hiddenFilterResult')" [attr.aria-live]="'polite'" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
+                        {{ filterResultMessageText() }}
+                    </span>
+                }
+            </div>
+        }
+        <div
+            #container
+            [class]="cn(cx('listContainer'), listStyleClass())"
+            [style]="listContainerStyle()"
+            cdkDropList
+            [cdkDropListData]="cdkDropData()"
+            (cdkDropListDropped)="drop($event)"
+            (cdkDropListEntered)="onDragEntered()"
+            (cdkDropListExited)="onDragExited()"
+            [pBind]="ptm('listContainer')"
+        >
+            @if (showFilteredEmptyMessage()) {
+                <div [class]="cx('emptyMessage')" [pBind]="ptm('emptyMessage')">
+                    @if (showDefaultFilterEmptyMessage()) {
+                        {{ emptyFilterMessageText() }}
+                    } @else {
+                        <ng-container *ngTemplateOutlet="emptyOrFilterTemplate()"></ng-container>
+                    }
+                </div>
+            } @else if (showEmptyMessage()) {
+                <div [class]="cx('emptyMessage')" [pBind]="ptm('emptyMessage')">
+                    @if (!emptyTemplate()) {
+                        {{ emptyMessage() }}
+                    } @else {
+                        <ng-container *ngTemplateOutlet="emptyTemplate()"></ng-container>
+                    }
+                </div>
+            } @else {
+                @if (virtualScroll()) {
+                    <p-scroller
+                        [pt]="ptm('virtualScroller')"
+                        hostName="listbox"
+                        #scroller
+                        [items]="visibleOptions()"
+                        [style]="scrollerStyle()"
+                        [itemSize]="virtualScrollItemSize()"
+                        [autoSize]="true"
+                        [lazy]="lazy()"
+                        [options]="virtualScrollOptions()"
+                        (onLazyLoad)="onLazyLoad.emit($event)"
+                        [tabindex]="scrollerTabIndex"
+                    >
+                        <ng-template #content let-items let-scrollerOptions="options">
+                            <ng-container *ngTemplateOutlet="buildInItems; context: getBuildInItemsContext(items, scrollerOptions)"></ng-container>
+                        </ng-template>
+                        @if (loaderTemplate()) {
+                            <ng-template #loader let-scrollerOptions="options">
+                                <ng-container *ngTemplateOutlet="loaderTemplate(); context: getLoaderTemplateContext(scrollerOptions)"></ng-container>
+                            </ng-template>
+                        }
+                    </p-scroller>
+                } @else {
+                    <ng-container *ngTemplateOutlet="buildInItems; context: buildInItemsContext()"></ng-container>
+                }
+
+                <ng-template #buildInItems let-items let-scrollerOptions="options">
+                    <ul
+                        #list
+                        [id]="listId()"
+                        [class]="cn(cx('list'), scrollerOptions.contentStyleClass)"
+                        role="listbox"
+                        [tabindex]="-1"
+                        [attr.aria-multiselectable]="true"
+                        [style]="scrollerOptions.contentStyle"
+                        [attr.aria-activedescendant]="ariaActiveDescendant()"
+                        [attr.aria-label]="ariaLabel()"
+                        [attr.aria-disabled]="$disabled()"
+                        (focus)="onListFocus($event)"
+                        (blur)="onListBlur($event)"
+                        (keydown)="onListKeyDown($event)"
+                        [pBind]="ptm('list')"
+                    >
+                        @for (option of items; track getOptionTrackKey(option, $index); let i = $index) {
+                            @if (isOptionGroup(option)) {
+                                <li
+                                    [attr.id]="getOptionId(i, scrollerOptions)"
+                                    [class]="cx('optionGroup')"
+                                    [pBind]="getPTOptions(option.optionGroup, scrollerOptions, i, 'optionGroup')"
+                                    [style.height.px]="scrollerOptions.itemSize"
+                                    role="option"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="dragdropDisabled()"
+                                    (cdkDragStarted)="isDragging.set(true)"
+                                    (cdkDragEnded)="isDragging.set(false)"
+                                >
+                                    @if (showDefaultGroupLabel()) {
+                                        <span>{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                    }
+                                    <ng-container *ngTemplateOutlet="groupTemplate(); context: getGroupTemplateContext(option.optionGroup)"></ng-container>
+                                </li>
+                            } @else {
+                                <li
+                                    pRipple
+                                    [class]="cx('option', { option, i, scrollerOptions })"
+                                    role="option"
+                                    [attr.id]="getOptionId(i, scrollerOptions)"
+                                    [style.height.px]="scrollerOptions.itemSize"
+                                    [attr.aria-label]="getOptionLabel(option)"
+                                    [attr.aria-selected]="isSelected(option)"
+                                    [attr.aria-disabled]="isOptionDisabled(option)"
+                                    [attr.aria-setsize]="ariaSetSize()"
+                                    [attr.ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                    [attr.data-p-selected]="isSelected(option)"
+                                    [attr.data-p-focused]="isOptionFocused(i, scrollerOptions)"
+                                    [attr.data-p-disabled]="isOptionDisabled(option)"
+                                    [pBind]="getPTOptions(option, scrollerOptions, i, 'option')"
+                                    (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
+                                    (dblclick)="onOptionDoubleClick($event, option)"
+                                    (mousedown)="onOptionMouseDown($event, getOptionIndex(i, scrollerOptions))"
+                                    (mouseenter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
+                                    (touchend)="onOptionTouchEnd()"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="dragdropDisabled()"
+                                    (cdkDragStarted)="isDragging.set(true)"
+                                    (cdkDragEnded)="isDragging.set(false)"
+                                >
+                                    @if (showOptionCheckbox()) {
+                                        <p-checkbox
+                                            [class]="cx('optionCheckIcon')"
+                                            [ngModel]="isSelected(option)"
+                                            [readonly]="true"
+                                            [disabled]="getOptionCheckboxDisabled(option)"
+                                            [tabindex]="-1"
+                                            [variant]="checkboxVariant()"
+                                            [binary]="true"
+                                            [pt]="ptm('pcCheckbox')"
+                                            hostName="listbox"
+                                            [unstyled]="unstyled()"
+                                        >
+                                            @if (checkIconTemplate()) {
+                                                <ng-template #icon>
+                                                    <ng-container *ngTemplateOutlet="checkIconTemplate(); context: getCheckIconContext(option)"></ng-container>
+                                                </ng-template>
+                                            }
+                                        </p-checkbox>
+                                    }
+                                    @if (checkmark()) {
+                                        @if (showDefaultCheckmark()) {
+                                            @if (!isSelected(option)) {
+                                                <svg data-p-icon="blank" [class]="cx('optionBlankIcon')" [pBind]="ptm('optionBlankIcon')" />
+                                            } @else {
+                                                <svg data-p-icon="check" [class]="cx('optionCheckIcon')" [pBind]="ptm('optionCheckIcon')" />
+                                            }
+                                        }
+                                        <ng-container *ngTemplateOutlet="checkmarkTemplate(); context: getCheckmarkContext(option)"></ng-container>
+                                    }
+                                    @if (showDefaultItemLabel()) {
+                                        <span>{{ getOptionLabel(option) }}</span>
+                                    }
+                                    <ng-container *ngTemplateOutlet="itemTemplate(); context: getItemTemplateContext(option, i, scrollerOptions)"></ng-container>
+                                </li>
+                            }
+                        }
+                    </ul>
+                </ng-template>
+            }
+        </div>
+        @if (hasFooter()) {
+            <ng-content select="p-footer"></ng-content>
+            <ng-container *ngTemplateOutlet="footerTemplate(); context: footerTemplateContext()"></ng-container>
+        }
+        @if (isEmpty()) {
+            <span role="status" aria-live="polite" class="p-hidden-accessible" [pBind]="ptm('hiddenEmptyMessage')">
+                {{ emptyMessage() }}
+            </span>
+        }
+        <span role="status" aria-live="polite" class="p-hidden-accessible" [pBind]="ptm('hiddenSelectedMessage')">
+            {{ selectedMessageText() }}
+        </span>
+        <span
+            #lastHiddenFocusableElement
+            role="presentation"
+            class="p-hidden-accessible p-hidden-focusable"
+            [tabindex]="hiddenFocusableTabindex()"
+            (focus)="onLastHiddenFocus($event)"
+            [attr.data-p-hidden-focusable]="true"
+            [pBind]="ptm('hiddenLastFocusableEl')"
+        >
+        </span>
+    `,
+                    providers: [
+                        LISTBOX_VALUE_ACCESSOR,
+                        ListBoxStyle,
+                        {
+                            provide: CDK_DRAG_CONFIG,
+                            useValue: {
+                                zIndex: 1200
+                            }
+                        },
+                        { provide: LISTBOX_INSTANCE, useExisting: Listbox },
+                        { provide: PARENT_INSTANCE, useExisting: Listbox }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[attr.id]': '$id()',
+                        '[class]': "cx('root')",
+                        '[attr.data-p]': 'containerDataP'
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [], propDecorators: { hostName: [{ type: i0.Input, args: [{ isSignal: true, alias: "hostName", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], searchMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchMessage", required: false }] }], emptySelectionMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptySelectionMessage", required: false }] }], selectionMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMessage", required: false }] }], autoOptionFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOptionFocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], searchLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLocale", required: false }] }], focusOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnHover", required: false }] }], filterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMessage", required: false }] }], filterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFields", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollItemSize", required: false }] }], virtualScrollOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollOptions", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], listStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyleClass", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], checkbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkbox", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], metaKeySelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaKeySelection", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], ariaFilterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaFilterLabel", required: false }] }], filterPlaceHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceHolder", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], filterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValue", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], highlightOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightOnSelect", required: false }] }], checkmark: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkmark", required: false }] }], dragdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragdrop", required: false }] }], dropListData: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListData", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onDblClick: [{ type: i0.Output, args: ["onDblClick"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onSelectAllChange: [{ type: i0.Output, args: ["onSelectAllChange"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onDrop: [{ type: i0.Output, args: ["onDrop"] }], headerCheckboxViewChild: [{ type: i0.ViewChild, args: ['headerchkbox', { isSignal: true }] }], filterViewChild: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], lastHiddenFocusableElement: [{ type: i0.ViewChild, args: ['lastHiddenFocusableElement', { isSignal: true }] }], firstHiddenFocusableElement: [{ type: i0.ViewChild, args: ['firstHiddenFocusableElement', { isSignal: true }] }], scroller: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], listViewChild: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], containerViewChild: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], headerFacet: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Header), { ...{ descendants: false }, isSignal: true }] }], footerFacet: [{ type: i0.ContentChild, args: [i0.forwardRef(() => Footer), { ...{ descendants: false }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['item', { ...{ descendants: false }, isSignal: true }] }], groupTemplate: [{ type: i0.ContentChild, args: ['group', { ...{ descendants: false }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { ...{ descendants: false }, isSignal: true }] }], filterTemplate: [{ type: i0.ContentChild, args: ['filter', { ...{ descendants: false }, isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], emptyFilterTemplate: [{ type: i0.ContentChild, args: ['emptyfilter', { ...{ descendants: false }, isSignal: true }] }], emptyTemplate: [{ type: i0.ContentChild, args: ['empty', { ...{ descendants: false }, isSignal: true }] }], filterIconTemplate: [{ type: i0.ContentChild, args: ['filtericon', { ...{ descendants: false }, isSignal: true }] }], checkIconTemplate: [{ type: i0.ContentChild, args: ['checkicon', { ...{ descendants: false }, isSignal: true }] }], checkmarkTemplate: [{ type: i0.ContentChild, args: ['checkmark', { ...{ descendants: false }, isSignal: true }] }], loaderTemplate: [{ type: i0.ContentChild, args: ['loader', { ...{ descendants: false }, isSignal: true }] }], onHostFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }] } });
+class ListboxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.3", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule], exports: [Listbox, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule, SharedModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ListboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Listbox, SharedModule],
+                    exports: [Listbox, SharedModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LISTBOX_VALUE_ACCESSOR, ListBoxStyle, Listbox, ListboxClasses, ListboxModule };
+//# sourceMappingURL=primenglab-listbox.mjs.map