primeng 18.0.0-beta.2 → 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 {
@@ -285,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
@@ -487,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
@@ -651,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;
@@ -1278,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
@@ -1440,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),
                                     }"
@@ -1472,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" />
@@ -1485,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>
@@ -1529,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,
@@ -1697,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),
                                     }"
@@ -1729,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" />
@@ -1742,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>
@@ -1900,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 }]
@@ -1955,6 +1977,7 @@ class ListboxModule {
             CheckboxModule,
             CheckIcon,
             IconFieldModule,
+            InputIconModule,
             InputTextModule,
             BlankIcon,
             FormsModule], exports: [Listbox, SharedModule, ScrollerModule] });
@@ -1966,6 +1989,7 @@ class ListboxModule {
             CheckboxModule,
             CheckIcon,
             IconFieldModule,
+            InputIconModule,
             InputTextModule,
             BlankIcon,
             FormsModule, SharedModule, ScrollerModule] });
@@ -1982,6 +2006,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         CheckboxModule,
                         CheckIcon,
                         IconFieldModule,
+                        InputIconModule,
                         InputTextModule,
                         BlankIcon,
                         FormsModule,
@@ -1995,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