primeng 18.0.0-beta.1 → 18.0.0-beta.3

package/fesm2022/primeng-listbox.mjs

@@ -6,7 +6,7 @@ import * as i1 from 'primeng/api';
 import { Header, Footer, PrimeTemplate, SharedModule } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
 import { ObjectUtils, UniqueComponentId } from 'primeng/utils';
-import * as i8 from '@angular/forms';
+import * as i9 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i3 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
@@ -16,13 +16,15 @@ import * as i4 from 'primeng/scroller';
 import { ScrollerModule } from 'primeng/scroller';
 import * as i6 from 'primeng/iconfield';
 import { IconFieldModule } from 'primeng/iconfield';
-import * as i7 from 'primeng/inputtext';
+import * as i8 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import { BaseComponent } from 'primeng/basecomponent';
 import { BaseStyle } from 'primeng/base';
 import { BlankIcon } from 'primeng/icons/blank';
 import * as i5 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
+import * as i7 from 'primeng/inputicon';
+import { InputIconModule } from 'primeng/inputicon';
 
 const theme = ({ dt }) => `
 .p-listbox {
@@ -174,6 +176,58 @@ class ListBoxStyle extends BaseStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", 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_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -233,7 +287,7 @@ class Listbox extends BaseComponent {
      * When enabled, the hovered option will be focused.
      * @group Props
      */
-    focusOnHover;
+    focusOnHover = true;
     /**
      * Text to display when filtering.
      * @group Props
@@ -435,6 +489,12 @@ class Listbox extends BaseComponent {
      * @defaultValue false
      */
     striped = false;
+    /**
+     * Whether the selected option will be add highlight class.
+     * @group Props
+     * @defaultValue true
+     */
+    highlightOnSelect = true;
     /**
      * Whether the selected option will be shown with a check mark.
      * @group Props
@@ -599,6 +659,9 @@ class Listbox extends BaseComponent {
                 case 'item':
                     this.itemTemplate = item.template;
                     break;
+                case 'option':
+                    this.itemTemplate = item.template;
+                    break;
                 case 'group':
                     this.groupTemplate = item.template;
                     break;
@@ -1226,7 +1289,7 @@ class Listbox extends BaseComponent {
         super.ngOnDestroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Listbox, deps: [{ token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: Listbox, selector: "p-listbox", inputs: { id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], ariaLabel: "ariaLabel", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterMessage: "filterMessage", filterFields: "filterFields", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", scrollHeight: "scrollHeight", tabindex: ["tabindex", "tabindex", numberAttribute], multiple: ["multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", listStyle: "listStyle", listStyleClass: "listStyleClass", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], checkbox: ["checkbox", "checkbox", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterBy: "filterBy", filterMatchMode: "filterMatchMode", filterLocale: "filterLocale", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dataKey: "dataKey", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", optionDisabled: "optionDisabled", ariaFilterLabel: "ariaFilterLabel", filterPlaceHolder: "filterPlaceHolder", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", group: ["group", "group", booleanAttribute], options: "options", filterValue: "filterValue", selectAll: "selectAll", striped: ["striped", "striped", booleanAttribute], checkmark: ["checkmark", "checkmark", booleanAttribute] }, outputs: { onChange: "onChange", onClick: "onClick", onDblClick: "onDblClick", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onSelectAllChange: "onSelectAllChange" }, providers: [LISTBOX_VALUE_ACCESSOR, ListBoxStyle], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerchkbox"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "lastHiddenFocusableElement", first: true, predicate: ["lastHiddenFocusableElement"], descendants: true }, { propertyName: "firstHiddenFocusableElement", first: true, predicate: ["firstHiddenFocusableElement"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: Listbox, selector: "p-listbox", inputs: { id: "id", searchMessage: "searchMessage", emptySelectionMessage: "emptySelectionMessage", selectionMessage: "selectionMessage", autoOptionFocus: ["autoOptionFocus", "autoOptionFocus", booleanAttribute], ariaLabel: "ariaLabel", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchLocale: ["searchLocale", "searchLocale", booleanAttribute], focusOnHover: ["focusOnHover", "focusOnHover", booleanAttribute], filterMessage: "filterMessage", filterFields: "filterFields", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", scrollHeight: "scrollHeight", tabindex: ["tabindex", "tabindex", numberAttribute], multiple: ["multiple", "multiple", booleanAttribute], style: "style", styleClass: "styleClass", listStyle: "listStyle", listStyleClass: "listStyleClass", readonly: ["readonly", "readonly", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], checkbox: ["checkbox", "checkbox", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterBy: "filterBy", filterMatchMode: "filterMatchMode", filterLocale: "filterLocale", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], dataKey: "dataKey", showToggleAll: ["showToggleAll", "showToggleAll", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupChildren: "optionGroupChildren", optionGroupLabel: "optionGroupLabel", optionDisabled: "optionDisabled", ariaFilterLabel: "ariaFilterLabel", filterPlaceHolder: "filterPlaceHolder", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", group: ["group", "group", booleanAttribute], options: "options", filterValue: "filterValue", selectAll: "selectAll", striped: ["striped", "striped", booleanAttribute], highlightOnSelect: ["highlightOnSelect", "highlightOnSelect", booleanAttribute], checkmark: ["checkmark", "checkmark", booleanAttribute] }, outputs: { onChange: "onChange", onClick: "onClick", onDblClick: "onDblClick", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onSelectAllChange: "onSelectAllChange" }, providers: [LISTBOX_VALUE_ACCESSOR, ListBoxStyle], queries: [{ propertyName: "headerFacet", first: true, predicate: Header, descendants: true }, { propertyName: "footerFacet", first: true, predicate: Footer, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "headerCheckboxViewChild", first: true, predicate: ["headerchkbox"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "lastHiddenFocusableElement", first: true, predicate: ["lastHiddenFocusableElement"], descendants: true }, { propertyName: "firstHiddenFocusableElement", first: true, predicate: ["firstHiddenFocusableElement"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "listViewChild", first: true, predicate: ["list"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <div [attr.id]="id" [ngClass]="containerClass" [ngStyle]="style" [class]="styleClass" (focusout)="onFocusout($event)">
             <span
                 #firstHiddenFocusableElement
@@ -1285,7 +1348,7 @@ class Listbox extends BaseComponent {
                 </ng-container>
                 <ng-template #builtInFilterElement>
                     <div class="p-listbox-filter-container" *ngIf="filter">
-                        <p-iconField>
+                        <p-iconfield>
                             <input
                                 #filterInput
                                 pInputText
@@ -1303,13 +1366,13 @@ class Listbox extends BaseComponent {
                                 (keydown)="onFilterKeyDown($event)"
                                 (blur)="onFilterBlur($event)"
                             />
-                            <p-inputIcon>
+                            <p-inputicon>
                                 <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
                                 <span *ngIf="filterIconTemplate" class="p-listbox-filter-icon" [attr.aria-hidden]="true">
                                     <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
                                 </span>
-                            </p-inputIcon>
-                        </p-iconField>
+                            </p-inputicon>
+                        </p-iconfield>
                     </div>
                     <span role="status" attr.aria-live="polite" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
                         {{ filterResultMessageText }}
@@ -1388,7 +1451,7 @@ class Listbox extends BaseComponent {
                                     [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
                                     [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
                                     [ngClass]="{
-                                        'p-listbox-option-selected': isSelected(option),
+                                        'p-listbox-option-selected': isSelected(option) && highlightOnSelect,
                                         'p-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions),
                                         'p-disabled': isOptionDisabled(option),
                                     }"
@@ -1420,7 +1483,7 @@ class Listbox extends BaseComponent {
                                             </ng-template>
                                         </ng-container>
                                     </p-checkbox>
-                                    <ng-container *ngIf="multiple && checkmark">
+                                    <ng-container *ngIf="checkmark">
                                         <ng-container *ngIf="!checkmarkTemplate">
                                             <BlankIcon *ngIf="!isSelected(option)" styleClass="p-listbox-option-check-icon" />
                                             <CheckIcon *ngIf="isSelected(option)" styleClass="p-listbox-option-check-icon" />
@@ -1433,7 +1496,11 @@ class Listbox extends BaseComponent {
                                     <ng-container
                                         *ngTemplateOutlet="
                                             itemTemplate;
-                                            context: { $implicit: option, index: getOptionIndex(i, scrollerOptions) }
+                                            context: {
+                                                $implicit: option,
+                                                index: getOptionIndex(i, scrollerOptions),
+                                                selected: isSelected(option),
+                                            }
                                         "
                                     ></ng-container>
                                 </li>
@@ -1477,7 +1544,7 @@ class Listbox extends BaseComponent {
             >
             </span>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i1.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => i4.Scroller), selector: "p-scroller", inputs: ["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: i0.forwardRef(() => SearchIcon), selector: "SearchIcon" }, { kind: "component", type: i0.forwardRef(() => i5.Checkbox), selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i0.forwardRef(() => CheckIcon), selector: "CheckIcon" }, { kind: "component", type: i0.forwardRef(() => i6.IconField), selector: "p-iconfield, p-iconField", inputs: ["iconPosition", "styleClass"] }, { kind: "directive", type: i0.forwardRef(() => i7.InputText), selector: "[pInputText]", inputs: ["variant", "fluid"] }, { kind: "component", type: i0.forwardRef(() => BlankIcon), selector: "BlankIcon" }, { kind: "directive", type: i0.forwardRef(() => i8.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i8.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(() => i1.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => i4.Scroller), selector: "p-scroller", inputs: ["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: i0.forwardRef(() => SearchIcon), selector: "SearchIcon" }, { kind: "component", type: i0.forwardRef(() => i5.Checkbox), selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i0.forwardRef(() => CheckIcon), selector: "CheckIcon" }, { kind: "component", type: i0.forwardRef(() => i6.IconField), selector: "p-iconfield, p-iconField", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i0.forwardRef(() => i7.InputIcon), selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "directive", type: i0.forwardRef(() => i8.InputText), selector: "[pInputText]", inputs: ["variant", "fluid", "size"] }, { kind: "component", type: i0.forwardRef(() => BlankIcon), selector: "BlankIcon" }, { kind: "directive", type: i0.forwardRef(() => i9.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i9.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Listbox, decorators: [{
             type: Component,
@@ -1542,7 +1609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 </ng-container>
                 <ng-template #builtInFilterElement>
                     <div class="p-listbox-filter-container" *ngIf="filter">
-                        <p-iconField>
+                        <p-iconfield>
                             <input
                                 #filterInput
                                 pInputText
@@ -1560,13 +1627,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                                 (keydown)="onFilterKeyDown($event)"
                                 (blur)="onFilterBlur($event)"
                             />
-                            <p-inputIcon>
+                            <p-inputicon>
                                 <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-listbox-filter-icon'" [attr.aria-hidden]="true" />
                                 <span *ngIf="filterIconTemplate" class="p-listbox-filter-icon" [attr.aria-hidden]="true">
                                     <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
                                 </span>
-                            </p-inputIcon>
-                        </p-iconField>
+                            </p-inputicon>
+                        </p-iconfield>
                     </div>
                     <span role="status" attr.aria-live="polite" class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
                         {{ filterResultMessageText }}
@@ -1645,7 +1712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                                     [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)"
                                     [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }"
                                     [ngClass]="{
-                                        'p-listbox-option-selected': isSelected(option),
+                                        'p-listbox-option-selected': isSelected(option) && highlightOnSelect,
                                         'p-focus': focusedOptionIndex() === getOptionIndex(i, scrollerOptions),
                                         'p-disabled': isOptionDisabled(option),
                                     }"
@@ -1677,7 +1744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                                             </ng-template>
                                         </ng-container>
                                     </p-checkbox>
-                                    <ng-container *ngIf="multiple && checkmark">
+                                    <ng-container *ngIf="checkmark">
                                         <ng-container *ngIf="!checkmarkTemplate">
                                             <BlankIcon *ngIf="!isSelected(option)" styleClass="p-listbox-option-check-icon" />
                                             <CheckIcon *ngIf="isSelected(option)" styleClass="p-listbox-option-check-icon" />
@@ -1690,7 +1757,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                                     <ng-container
                                         *ngTemplateOutlet="
                                             itemTemplate;
-                                            context: { $implicit: option, index: getOptionIndex(i, scrollerOptions) }
+                                            context: {
+                                                $implicit: option,
+                                                index: getOptionIndex(i, scrollerOptions),
+                                                selected: isSelected(option),
+                                            }
                                         "
                                     ></ng-container>
                                 </li>
@@ -1848,6 +1919,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }], striped: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], highlightOnSelect: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], checkmark: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -1903,6 +1977,7 @@ class ListboxModule {
             CheckboxModule,
             CheckIcon,
             IconFieldModule,
+            InputIconModule,
             InputTextModule,
             BlankIcon,
             FormsModule], exports: [Listbox, SharedModule, ScrollerModule] });
@@ -1914,6 +1989,7 @@ class ListboxModule {
             CheckboxModule,
             CheckIcon,
             IconFieldModule,
+            InputIconModule,
             InputTextModule,
             BlankIcon,
             FormsModule, SharedModule, ScrollerModule] });
@@ -1930,6 +2006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         CheckboxModule,
                         CheckIcon,
                         IconFieldModule,
+                        InputIconModule,
                         InputTextModule,
                         BlankIcon,
                         FormsModule,
@@ -1943,5 +2020,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { LISTBOX_VALUE_ACCESSOR, Listbox, ListboxModule };
+export { LISTBOX_VALUE_ACCESSOR, ListBoxStyle, Listbox, ListboxClasses, ListboxModule };
 //# sourceMappingURL=primeng-listbox.mjs.map