@wawjs/ngx-prime 22.0.4 → 22.0.6

package/fesm2022/wawjs-ngx-prime-listbox.mjs

@@ -7,6 +7,7 @@ import * as i0 from '@angular/core';
 import { Injectable, InjectionToken, forwardRef, inject, input, booleanAttribute, numberAttribute, computed, output, viewChild, contentChild, contentChildren, signal, effect, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { Listbox as Listbox$1, Option } from '@angular/aria/listbox';
 import { uuid, isNotEmpty, equals, focus, getFirstFocusableElement, isEmpty, isPrintableCharacter, resolveFieldData, findSingle, findLastIndex, isFunction } from '@wawjs/css-prime-utils';
 import { FilterService, Header, Footer, PrimeTemplate, SharedModule } from '@wawjs/ngx-prime/api';
 import { PARENT_INSTANCE } from '@wawjs/ngx-prime/basecomponent';
@@ -94,10 +95,10 @@ class ListBoxStyle extends BaseStyle {
     name = 'listbox';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListBoxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListBoxStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListBoxStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListBoxStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListBoxStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListBoxStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -679,6 +680,49 @@ class Listbox extends BaseEditableHolder {
     ...(ngDevMode ? [{ debugName: "focusedOptionIndex" }] : /* istanbul ignore next */ []));
     isDragging = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
+    /**
+     * The `ngListbox` instance, present only when `!virtualScroll()` (virtualized lists only
+     * mount their visible items, which is incompatible with `@angular/aria`'s DOM-based item
+     * discovery, so the manual `onListKeyDown` implementation is kept for that case).
+     */
+    ariaListboxRef = viewChild(Listbox$1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaListboxRef" }] : /* istanbul ignore next */ []));
+    /** Mirrors `modelValue()` into the aria listbox's array-shaped `value`, when present. */
+    syncAriaValueEffect = effect(() => {
+        const ariaListbox = this.ariaListboxRef();
+        if (!ariaListbox) {
+            return;
+        }
+        const modelValue = this.modelValue();
+        const arr = this.multiple() ? (modelValue ?? []) : modelValue == null ? [] : [modelValue];
+        const current = ariaListbox.value();
+        if (current.length !== arr.length || !current.every((val, i) => equals(val, arr[i], this.equalityKey() || ''))) {
+            ariaListbox.value.set(arr);
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncAriaValueEffect" }] : /* istanbul ignore next */ []));
+    /**
+     * Propagates keyboard-driven selection changes (arrow-key "follow focus" in single-select
+     * mode, Shift+range selection, Ctrl/Cmd+A) from the aria listbox's own `value` model back
+     * through our existing `onOptionSelect`-derived state, since `ngListbox` mutates its `value`
+     * model directly rather than calling our selection methods.
+     */
+    syncFromAriaEffect = effect(() => {
+        const ariaListbox = this.ariaListboxRef();
+        if (!ariaListbox) {
+            return;
+        }
+        const ariaArr = ariaListbox.value();
+        const nextValue = this.multiple() ? ariaArr : ariaArr.length ? ariaArr[0] : null;
+        const currentValue = this.modelValue();
+        const changed = this.multiple() ? !equals(nextValue, currentValue ?? [], this.equalityKey() || '') || nextValue.length !== (currentValue ?? []).length : !equals(nextValue, currentValue, this.equalityKey() || '');
+        if (changed) {
+            this.writeModelValue(nextValue);
+            this.onModelChange(nextValue);
+            this.onChange.emit({ originalEvent: undefined, value: nextValue });
+        }
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "syncFromAriaEffect" }] : /* istanbul ignore next */ []));
     onHostFocusOut(event) {
         this.onFocusout(event);
     }
@@ -1390,8 +1434,8 @@ class Listbox extends BaseEditableHolder {
             this.translationSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Listbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: Listbox, isStandalone: true, selector: "p-listbox, 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 }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", 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": "resolvedId", "class": "cn(cx('root'), styleClass())", "attr.data-p": "containerDataP" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Listbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: Listbox, isStandalone: true, selector: "p-listbox, 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 }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", 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": "resolvedId", "class": "cn(cx('root'), styleClass())", "attr.data-p": "containerDataP" } }, providers: [
             LISTBOX_VALUE_ACCESSOR,
             ListBoxStyle,
             {
@@ -1402,7 +1446,7 @@ class Listbox extends BaseEditableHolder {
             },
             { provide: LISTBOX_INSTANCE, useExisting: Listbox },
             { provide: PARENT_INSTANCE, useExisting: Listbox }
-        ], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true, isSignal: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], isSignal: true }, { propertyName: "emptyFilterTemplate", first: true, predicate: ["emptyfilter"], isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], isSignal: true }, { propertyName: "checkmarkTemplate", first: true, predicate: ["checkmark"], isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "checkIconTemplate", first: true, predicate: ["checkicon"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }], viewQueries: [{ propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerchkbox"], descendants: true, isSignal: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], 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: `
+        ], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true, isSignal: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ["item"], isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], isSignal: true }, { propertyName: "emptyFilterTemplate", first: true, predicate: ["emptyfilter"], isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], isSignal: true }, { propertyName: "checkmarkTemplate", first: true, predicate: ["checkmark"], isSignal: true }, { propertyName: "templates", predicate: PrimeTemplate, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "checkIconTemplate", first: true, predicate: ["checkicon"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }], viewQueries: [{ propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerchkbox"], descendants: true, isSignal: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], 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 }, { propertyName: "ariaListboxRef", first: true, predicate: Listbox$1, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
         <span
             #firstHiddenFocusableElement
             role="presentation"
@@ -1539,9 +1583,70 @@ class Listbox extends BaseEditableHolder {
                     </p-scroller>
                 }
                 @if (!virtualScroll()) {
-                    <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
+                    <ng-container *ngTemplateOutlet="buildInItemsAria; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                 }
 
+                <ng-template #optionGroupItem let-option let-scrollerOptions="options" let-i="i">
+                    <li
+                        [attr.id]="resolvedId + '_' + getOptionIndex(i, scrollerOptions)"
+                        [class]="cx('optionGroup')"
+                        [pBind]="getPTOptions(option.optionGroup, scrollerOptions, i, 'optionGroup')"
+                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                        role="option"
+                        cdkDrag
+                        [cdkDragData]="option"
+                        [cdkDragDisabled]="!dragdrop()"
+                        (cdkDragStarted)="isDragging.set(true)"
+                        (cdkDragEnded)="isDragging.set(false)"
+                    >
+                        @if (!groupTemplate() && !_groupTemplate) {
+                            <span>{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                        }
+                        <ng-container *ngTemplateOutlet="groupTemplate() || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
+                    </li>
+                </ng-template>
+
+                <ng-template #optionItemContent let-option>
+                    @if (checkbox() && multiple()) {
+                        <p-checkbox
+                            [class]="cx('optionCheckIcon')"
+                            [ngModel]="isSelected(option)"
+                            [readonly]="true"
+                            [disabled]="$disabled() || isOptionDisabled(option)"
+                            [tabindex]="-1"
+                            [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
+                            [binary]="true"
+                            [pt]="ptm('pcCheckbox')"
+                            hostName="listbox"
+                            [unstyled]="unstyled()"
+                        >
+                            @if (checkIconTemplate || _checkIconTemplate) {
+                                <ng-template #icon>
+                                    <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: isSelected(option) }"></ng-template>
+                                </ng-template>
+                            }
+                        </p-checkbox>
+                    }
+                    @if (checkmark()) {
+                        <ng-container>
+                            @if (!checkmarkTemplate() && !_checkmarkTemplate) {
+                                <ng-container>
+                                    @if (!isSelected(option)) {
+                                        <svg data-p-icon="blank" [class]="cx('optionBlankIcon')" [pBind]="ptm('optionBlankIcon')" />
+                                    }
+                                    @if (isSelected(option)) {
+                                        <svg data-p-icon="check" [class]="cx('optionCheckIcon')" [pBind]="ptm('optionCheckIcon')" />
+                                    }
+                                </ng-container>
+                            }
+                            <ng-container *ngTemplateOutlet="checkmarkTemplate() || _checkmarkTemplate; context: { implicit: isSelected(option) }"></ng-container>
+                        </ng-container>
+                    }
+                    @if (!itemTemplate() && !_itemTemplate) {
+                        <span>{{ getOptionLabel(option) }}</span>
+                    }
+                </ng-template>
+
                 <ng-template #buildInItems let-items let-scrollerOptions="options">
                     <ul
                         #list
@@ -1562,23 +1667,7 @@ class Listbox extends BaseEditableHolder {
                     >
                         @for (option of items; track option; let i = $index) {
                             @if (isOptionGroup(option)) {
-                                <li
-                                    [attr.id]="resolvedId + '_' + getOptionIndex(i, scrollerOptions)"
-                                    [class]="cx('optionGroup')"
-                                    [pBind]="getPTOptions(option.optionGroup, scrollerOptions, i, 'optionGroup')"
-                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                    role="option"
-                                    cdkDrag
-                                    [cdkDragData]="option"
-                                    [cdkDragDisabled]="!dragdrop()"
-                                    (cdkDragStarted)="isDragging.set(true)"
-                                    (cdkDragEnded)="isDragging.set(false)"
-                                >
-                                    @if (!groupTemplate() && !_groupTemplate) {
-                                        <span>{{ getOptionGroupLabel(option.optionGroup) }}</span>
-                                    }
-                                    <ng-container *ngTemplateOutlet="groupTemplate() || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
-                                </li>
+                                <ng-container *ngTemplateOutlet="optionGroupItem; context: { $implicit: option, options: scrollerOptions, i }"></ng-container>
                             }
                             @if (!isOptionGroup(option)) {
                                 <li
@@ -1607,44 +1696,86 @@ class Listbox extends BaseEditableHolder {
                                     (cdkDragStarted)="isDragging.set(true)"
                                     (cdkDragEnded)="isDragging.set(false)"
                                 >
-                                    @if (checkbox() && multiple()) {
-                                        <p-checkbox
-                                            [class]="cx('optionCheckIcon')"
-                                            [ngModel]="isSelected(option)"
-                                            [readonly]="true"
-                                            [disabled]="$disabled() || isOptionDisabled(option)"
-                                            [tabindex]="-1"
-                                            [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
-                                            [binary]="true"
-                                            [pt]="ptm('pcCheckbox')"
-                                            hostName="listbox"
-                                            [unstyled]="unstyled()"
-                                        >
-                                            @if (checkIconTemplate || _checkIconTemplate) {
-                                                <ng-template #icon>
-                                                    <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: isSelected(option) }"></ng-template>
-                                                </ng-template>
+                                    <ng-container
+                                        *ngTemplateOutlet="
+                                            optionItemContent;
+                                            context: {
+                                                $implicit: option,
+                                                index: getOptionIndex(i, scrollerOptions),
+                                                selected: isSelected(option),
+                                                disabled: isOptionDisabled(option)
                                             }
-                                        </p-checkbox>
-                                    }
-                                    @if (checkmark()) {
-                                        <ng-container>
-                                            @if (!checkmarkTemplate() && !_checkmarkTemplate) {
-                                                <ng-container>
-                                                    @if (!isSelected(option)) {
-                                                        <svg data-p-icon="blank" [class]="cx('optionBlankIcon')" [pBind]="ptm('optionBlankIcon')" />
-                                                    }
-                                                    @if (isSelected(option)) {
-                                                        <svg data-p-icon="check" [class]="cx('optionCheckIcon')" [pBind]="ptm('optionCheckIcon')" />
-                                                    }
-                                                </ng-container>
+                                        "
+                                    ></ng-container>
+                                    <ng-container
+                                        *ngTemplateOutlet="
+                                            itemTemplate() || _itemTemplate;
+                                            context: {
+                                                $implicit: option,
+                                                index: getOptionIndex(i, scrollerOptions),
+                                                selected: isSelected(option),
+                                                disabled: isOptionDisabled(option)
                                             }
-                                            <ng-container *ngTemplateOutlet="checkmarkTemplate() || _checkmarkTemplate; context: { implicit: isSelected(option) }"></ng-container>
-                                        </ng-container>
-                                    }
-                                    @if (!itemTemplate() && !_itemTemplate) {
-                                        <span>{{ getOptionLabel(option) }}</span>
-                                    }
+                                        "
+                                    ></ng-container>
+                                </li>
+                            }
+                        }
+                    </ul>
+                </ng-template>
+
+                <ng-template #buildInItemsAria let-items let-scrollerOptions="options">
+                    <ul
+                        #ariaList
+                        ngListbox
+                        [multi]="multiple()"
+                        [readonly]="readonly()"
+                        [disabled]="$disabled()"
+                        [id]="resolvedId + '_list'"
+                        [class]="cx('list')"
+                        [ngClass]="scrollerOptions.contentStyleClass"
+                        [style]="scrollerOptions.contentStyle"
+                        [attr.aria-label]="ariaLabel()"
+                        (focus)="onListFocus($event)"
+                        (blur)="onListBlur($event)"
+                        [pBind]="ptm('list')"
+                    >
+                        @for (option of items; track option; let i = $index) {
+                            @if (isOptionGroup(option)) {
+                                <ng-container *ngTemplateOutlet="optionGroupItem; context: { $implicit: option, options: scrollerOptions, i }"></ng-container>
+                            }
+                            @if (!isOptionGroup(option)) {
+                                <li
+                                    ngOption
+                                    pRipple
+                                    [value]="getOptionValue(option)"
+                                    [disabled]="isOptionDisabled(option)"
+                                    [label]="getOptionLabel(option)"
+                                    [class]="cx('option', { option, i, scrollerOptions })"
+                                    [attr.id]="resolvedId + '_' + getOptionIndex(i, scrollerOptions)"
+                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                    [attr.data-p-selected]="isSelected(option)"
+                                    [attr.data-p-disabled]="isOptionDisabled(option)"
+                                    [pBind]="getPTOptions(option, scrollerOptions, i, 'option')"
+                                    (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
+                                    (dblclick)="onOptionDoubleClick($event, option)"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="!dragdrop()"
+                                    (cdkDragStarted)="isDragging.set(true)"
+                                    (cdkDragEnded)="isDragging.set(false)"
+                                >
+                                    <ng-container
+                                        *ngTemplateOutlet="
+                                            optionItemContent;
+                                            context: {
+                                                $implicit: option,
+                                                index: getOptionIndex(i, scrollerOptions),
+                                                selected: isSelected(option),
+                                                disabled: isOptionDisabled(option)
+                                            }
+                                        "
+                                    ></ng-container>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             itemTemplate() || _itemTemplate;
@@ -1685,14 +1816,14 @@ class Listbox extends BaseEditableHolder {
             [pBind]="ptm('hiddenLastFocusableEl')"
         >
         </span>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", 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, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: CheckIcon, selector: "[data-p-icon=\"check\"]" }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: BlankIcon, selector: "[data-p-icon=\"blank\"]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: i4.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: i4.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 });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", 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, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: CheckIcon, selector: "[data-p-icon=\"check\"]" }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: BlankIcon, selector: "[data-p-icon=\"blank\"]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: i4.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: i4.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"] }, { kind: "directive", type: Listbox$1, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: Listbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: Listbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-listbox, p-listBox, p-list-box',
                     standalone: true,
-                    imports: [CommonModule, Ripple, Scroller, InputIcon, SearchIcon, Checkbox, CheckIcon, IconField, InputText, BlankIcon, FormsModule, SharedModule, DragDropModule, BindModule],
+                    imports: [CommonModule, Ripple, Scroller, InputIcon, SearchIcon, Checkbox, CheckIcon, IconField, InputText, BlankIcon, FormsModule, SharedModule, DragDropModule, BindModule, Listbox$1, Option],
                     template: `
         <span
             #firstHiddenFocusableElement
@@ -1830,9 +1961,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                     </p-scroller>
                 }
                 @if (!virtualScroll()) {
-                    <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
+                    <ng-container *ngTemplateOutlet="buildInItemsAria; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                 }
 
+                <ng-template #optionGroupItem let-option let-scrollerOptions="options" let-i="i">
+                    <li
+                        [attr.id]="resolvedId + '_' + getOptionIndex(i, scrollerOptions)"
+                        [class]="cx('optionGroup')"
+                        [pBind]="getPTOptions(option.optionGroup, scrollerOptions, i, 'optionGroup')"
+                        [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                        role="option"
+                        cdkDrag
+                        [cdkDragData]="option"
+                        [cdkDragDisabled]="!dragdrop()"
+                        (cdkDragStarted)="isDragging.set(true)"
+                        (cdkDragEnded)="isDragging.set(false)"
+                    >
+                        @if (!groupTemplate() && !_groupTemplate) {
+                            <span>{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                        }
+                        <ng-container *ngTemplateOutlet="groupTemplate() || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
+                    </li>
+                </ng-template>
+
+                <ng-template #optionItemContent let-option>
+                    @if (checkbox() && multiple()) {
+                        <p-checkbox
+                            [class]="cx('optionCheckIcon')"
+                            [ngModel]="isSelected(option)"
+                            [readonly]="true"
+                            [disabled]="$disabled() || isOptionDisabled(option)"
+                            [tabindex]="-1"
+                            [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
+                            [binary]="true"
+                            [pt]="ptm('pcCheckbox')"
+                            hostName="listbox"
+                            [unstyled]="unstyled()"
+                        >
+                            @if (checkIconTemplate || _checkIconTemplate) {
+                                <ng-template #icon>
+                                    <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: isSelected(option) }"></ng-template>
+                                </ng-template>
+                            }
+                        </p-checkbox>
+                    }
+                    @if (checkmark()) {
+                        <ng-container>
+                            @if (!checkmarkTemplate() && !_checkmarkTemplate) {
+                                <ng-container>
+                                    @if (!isSelected(option)) {
+                                        <svg data-p-icon="blank" [class]="cx('optionBlankIcon')" [pBind]="ptm('optionBlankIcon')" />
+                                    }
+                                    @if (isSelected(option)) {
+                                        <svg data-p-icon="check" [class]="cx('optionCheckIcon')" [pBind]="ptm('optionCheckIcon')" />
+                                    }
+                                </ng-container>
+                            }
+                            <ng-container *ngTemplateOutlet="checkmarkTemplate() || _checkmarkTemplate; context: { implicit: isSelected(option) }"></ng-container>
+                        </ng-container>
+                    }
+                    @if (!itemTemplate() && !_itemTemplate) {
+                        <span>{{ getOptionLabel(option) }}</span>
+                    }
+                </ng-template>
+
                 <ng-template #buildInItems let-items let-scrollerOptions="options">
                     <ul
                         #list
@@ -1853,23 +2045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                     >
                         @for (option of items; track option; let i = $index) {
                             @if (isOptionGroup(option)) {
-                                <li
-                                    [attr.id]="resolvedId + '_' + getOptionIndex(i, scrollerOptions)"
-                                    [class]="cx('optionGroup')"
-                                    [pBind]="getPTOptions(option.optionGroup, scrollerOptions, i, 'optionGroup')"
-                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
-                                    role="option"
-                                    cdkDrag
-                                    [cdkDragData]="option"
-                                    [cdkDragDisabled]="!dragdrop()"
-                                    (cdkDragStarted)="isDragging.set(true)"
-                                    (cdkDragEnded)="isDragging.set(false)"
-                                >
-                                    @if (!groupTemplate() && !_groupTemplate) {
-                                        <span>{{ getOptionGroupLabel(option.optionGroup) }}</span>
-                                    }
-                                    <ng-container *ngTemplateOutlet="groupTemplate() || _groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
-                                </li>
+                                <ng-container *ngTemplateOutlet="optionGroupItem; context: { $implicit: option, options: scrollerOptions, i }"></ng-container>
                             }
                             @if (!isOptionGroup(option)) {
                                 <li
@@ -1898,44 +2074,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                                     (cdkDragStarted)="isDragging.set(true)"
                                     (cdkDragEnded)="isDragging.set(false)"
                                 >
-                                    @if (checkbox() && multiple()) {
-                                        <p-checkbox
-                                            [class]="cx('optionCheckIcon')"
-                                            [ngModel]="isSelected(option)"
-                                            [readonly]="true"
-                                            [disabled]="$disabled() || isOptionDisabled(option)"
-                                            [tabindex]="-1"
-                                            [variant]="config.inputStyle() === 'filled' || config.inputVariant() === 'filled' ? 'filled' : 'outlined'"
-                                            [binary]="true"
-                                            [pt]="ptm('pcCheckbox')"
-                                            hostName="listbox"
-                                            [unstyled]="unstyled()"
-                                        >
-                                            @if (checkIconTemplate || _checkIconTemplate) {
-                                                <ng-template #icon>
-                                                    <ng-template *ngTemplateOutlet="checkIconTemplate || _checkIconTemplate; context: { $implicit: isSelected(option) }"></ng-template>
-                                                </ng-template>
+                                    <ng-container
+                                        *ngTemplateOutlet="
+                                            optionItemContent;
+                                            context: {
+                                                $implicit: option,
+                                                index: getOptionIndex(i, scrollerOptions),
+                                                selected: isSelected(option),
+                                                disabled: isOptionDisabled(option)
                                             }
-                                        </p-checkbox>
-                                    }
-                                    @if (checkmark()) {
-                                        <ng-container>
-                                            @if (!checkmarkTemplate() && !_checkmarkTemplate) {
-                                                <ng-container>
-                                                    @if (!isSelected(option)) {
-                                                        <svg data-p-icon="blank" [class]="cx('optionBlankIcon')" [pBind]="ptm('optionBlankIcon')" />
-                                                    }
-                                                    @if (isSelected(option)) {
-                                                        <svg data-p-icon="check" [class]="cx('optionCheckIcon')" [pBind]="ptm('optionCheckIcon')" />
-                                                    }
-                                                </ng-container>
+                                        "
+                                    ></ng-container>
+                                    <ng-container
+                                        *ngTemplateOutlet="
+                                            itemTemplate() || _itemTemplate;
+                                            context: {
+                                                $implicit: option,
+                                                index: getOptionIndex(i, scrollerOptions),
+                                                selected: isSelected(option),
+                                                disabled: isOptionDisabled(option)
                                             }
-                                            <ng-container *ngTemplateOutlet="checkmarkTemplate() || _checkmarkTemplate; context: { implicit: isSelected(option) }"></ng-container>
-                                        </ng-container>
-                                    }
-                                    @if (!itemTemplate() && !_itemTemplate) {
-                                        <span>{{ getOptionLabel(option) }}</span>
-                                    }
+                                        "
+                                    ></ng-container>
+                                </li>
+                            }
+                        }
+                    </ul>
+                </ng-template>
+
+                <ng-template #buildInItemsAria let-items let-scrollerOptions="options">
+                    <ul
+                        #ariaList
+                        ngListbox
+                        [multi]="multiple()"
+                        [readonly]="readonly()"
+                        [disabled]="$disabled()"
+                        [id]="resolvedId + '_list'"
+                        [class]="cx('list')"
+                        [ngClass]="scrollerOptions.contentStyleClass"
+                        [style]="scrollerOptions.contentStyle"
+                        [attr.aria-label]="ariaLabel()"
+                        (focus)="onListFocus($event)"
+                        (blur)="onListBlur($event)"
+                        [pBind]="ptm('list')"
+                    >
+                        @for (option of items; track option; let i = $index) {
+                            @if (isOptionGroup(option)) {
+                                <ng-container *ngTemplateOutlet="optionGroupItem; context: { $implicit: option, options: scrollerOptions, i }"></ng-container>
+                            }
+                            @if (!isOptionGroup(option)) {
+                                <li
+                                    ngOption
+                                    pRipple
+                                    [value]="getOptionValue(option)"
+                                    [disabled]="isOptionDisabled(option)"
+                                    [label]="getOptionLabel(option)"
+                                    [class]="cx('option', { option, i, scrollerOptions })"
+                                    [attr.id]="resolvedId + '_' + getOptionIndex(i, scrollerOptions)"
+                                    [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
+                                    [attr.data-p-selected]="isSelected(option)"
+                                    [attr.data-p-disabled]="isOptionDisabled(option)"
+                                    [pBind]="getPTOptions(option, scrollerOptions, i, 'option')"
+                                    (click)="onOptionSelect($event, option, getOptionIndex(i, scrollerOptions))"
+                                    (dblclick)="onOptionDoubleClick($event, option)"
+                                    cdkDrag
+                                    [cdkDragData]="option"
+                                    [cdkDragDisabled]="!dragdrop()"
+                                    (cdkDragStarted)="isDragging.set(true)"
+                                    (cdkDragEnded)="isDragging.set(false)"
+                                >
+                                    <ng-container
+                                        *ngTemplateOutlet="
+                                            optionItemContent;
+                                            context: {
+                                                $implicit: option,
+                                                index: getOptionIndex(i, scrollerOptions),
+                                                selected: isSelected(option),
+                                                disabled: isOptionDisabled(option)
+                                            }
+                                        "
+                                    ></ng-container>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             itemTemplate() || _itemTemplate;
@@ -2017,13 +2235,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
             }], checkmarkTemplate: [{ type: i0.ContentChild, args: ['checkmark', { ...{ descendants: false }, isSignal: true }] }], loaderTemplate: [{
                 type: ContentChild,
                 args: ['loader', { descendants: false }]
-            }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }] } });
+            }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PrimeTemplate), { isSignal: true }] }], ariaListboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox$1), { isSignal: true }] }] } });
 class ListboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.2", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule], exports: [Listbox, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.5", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule], exports: [Listbox, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListboxModule, imports: [Listbox, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ListboxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ListboxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Listbox, SharedModule],