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

package/fesm2022/primeng-select.mjs

@@ -221,7 +221,7 @@ input.p-select-label {
 
 .p-dropdown.ng-invalid.ng-dirty,
 .p-select.ng-invalid.ng-dirty {
-    outline: 1px solid ${dt('selectbutton.invalid.border.color')};
+    outline: 1px solid ${dt('select.invalid.border.color')};
     outline-offset: 0;
 }
 
@@ -280,6 +280,90 @@ class SelectStyle extends BaseStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: SelectStyle, decorators: [{
             type: Injectable
         }] });
+/**
+ *
+ * Select also known as Select, is used to choose an item from a collection of options.
+ *
+ * [Live Demo](https://www.primeng.org/select/)
+ *
+ * @module selectstyle
+ *
+ */
+var SelectClasses;
+(function (SelectClasses) {
+    /**
+     * Class name of the root element
+     */
+    SelectClasses["root"] = "p-select";
+    /**
+     * Class name of the label element
+     */
+    SelectClasses["label"] = "p-select-label";
+    /**
+     * Class name of the clear icon element
+     */
+    SelectClasses["clearIcon"] = "p-select-clear-icon";
+    /**
+     * Class name of the dropdown element
+     */
+    SelectClasses["dropdown"] = "p-select-dropdown";
+    /**
+     * Class name of the loadingicon element
+     */
+    SelectClasses["loadingicon"] = "p-select-loading-icon";
+    /**
+     * Class name of the dropdown icon element
+     */
+    SelectClasses["dropdownIcon"] = "p-select-dropdown-icon";
+    /**
+     * Class name of the overlay element
+     */
+    SelectClasses["overlay"] = "p-select-overlay";
+    /**
+     * Class name of the header element
+     */
+    SelectClasses["header"] = "p-select-header";
+    /**
+     * Class name of the filter element
+     */
+    SelectClasses["pcFilter"] = "p-select-filter";
+    /**
+     * Class name of the list container element
+     */
+    SelectClasses["listContainer"] = "p-select-list-container";
+    /**
+     * Class name of the list element
+     */
+    SelectClasses["list"] = "p-select-list";
+    /**
+     * Class name of the option group element
+     */
+    SelectClasses["optionGroup"] = "p-select-option-group";
+    /**
+     * Class name of the option group label element
+     */
+    SelectClasses["optionGroupLabel"] = "p-select-option-group-label";
+    /**
+     * Class name of the option element
+     */
+    SelectClasses["option"] = "p-select-option";
+    /**
+     * Class name of the option label element
+     */
+    SelectClasses["optionLabel"] = "p-select-option-label";
+    /**
+     * Class name of the option check icon element
+     */
+    SelectClasses["optionCheckIcon"] = "p-select-option-check-icon";
+    /**
+     * Class name of the option blank icon element
+     */
+    SelectClasses["optionBlankIcon"] = "p-select-option-blank-icon";
+    /**
+     * Class name of the empty message element
+     */
+    SelectClasses["emptyMessage"] = "p-select-empty-message";
+})(SelectClasses || (SelectClasses = {}));
 
 const SELECT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -332,20 +416,20 @@ class SelectItem extends BaseComponent {
             }"
         >
             <ng-container *ngIf="checkmark">
-                <CheckIcon *ngIf="selected" [styleClass]="'p-select-option-check-icon'" />
-                <BlankIcon *ngIf="!selected" [styleClass]="'p-select-option-blank-icon'" />
+                <CheckIcon *ngIf="selected" styleClass="p-select-option-check-icon" />
+                <BlankIcon *ngIf="!selected" styleClass="p-select-option-blank-icon" />
             </ng-container>
             <span *ngIf="!template">{{ label ?? 'empty' }}</span>
             <ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
         </li>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Ripple, selector: "[pRipple]" }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SharedModule }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: CheckIcon, selector: "CheckIcon" }, { kind: "component", type: BlankIcon, selector: "BlankIcon" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: SelectItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-selectItem',
                     standalone: true,
-                    imports: [CommonModule, SharedModule, Ripple],
+                    imports: [CommonModule, SharedModule, Ripple, CheckIcon, BlankIcon],
                     template: `
         <li
             [id]="id"
@@ -369,8 +453,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             }"
         >
             <ng-container *ngIf="checkmark">
-                <CheckIcon *ngIf="selected" [styleClass]="'p-select-option-check-icon'" />
-                <BlankIcon *ngIf="!selected" [styleClass]="'p-select-option-blank-icon'" />
+                <CheckIcon *ngIf="selected" styleClass="p-select-option-check-icon" />
+                <BlankIcon *ngIf="!selected" styleClass="p-select-option-blank-icon" />
             </ng-container>
             <span *ngIf="!template">{{ label ?? 'empty' }}</span>
             <ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
@@ -684,7 +768,7 @@ class Select extends BaseComponent {
      * Fields used when filtering the options, defaults to optionLabel.
      * @group Props
      */
-    focusOnHover = false;
+    focusOnHover = true;
     /**
      * Determines if the option will be selected on focus.
      * @group Props
@@ -1333,14 +1417,6 @@ class Select extends BaseComponent {
      */
     show(isFocus) {
         this.overlayVisible = true;
-        const focusedOptionIndex = this.focusedOptionIndex() !== -1
-            ? this.focusedOptionIndex()
-            : this.autoOptionFocus
-                ? this.findFirstFocusedOptionIndex()
-                : this.editable
-                    ? -1
-                    : this.findSelectedOptionIndex();
-        this.focusedOptionIndex.set(focusedOptionIndex);
         if (isFocus) {
             DomHandler.focus(this.focusInputViewChild?.nativeElement);
         }
@@ -1964,7 +2040,7 @@ class Select extends BaseComponent {
                             <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
                         </ng-container>
                         <ng-template #builtInFilterElement>
-                            <p-iconField>
+                            <p-iconfield>
                                 <input
                                     #filter
                                     pInputText
@@ -1982,13 +2058,13 @@ class Select extends BaseComponent {
                                     (keydown)="onFilterKeyDown($event)"
                                     (blur)="onFilterBlur($event)"
                                 />
-                                <p-inputIcon>
+                                <p-inputicon>
                                     <SearchIcon *ngIf="!filterIconTemplate" />
                                     <span *ngIf="filterIconTemplate">
                                         <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
                                     </span>
-                                </p-inputIcon>
-                            </p-iconField>
+                                </p-inputicon>
+                            </p-iconfield>
                         </ng-template>
                     </div>
                     <div class="p-select-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
@@ -2099,7 +2175,7 @@ class Select extends BaseComponent {
                 </div>
             </ng-template>
         </p-overlay>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SelectItem, selector: "p-selectItem", inputs: ["id", "option", "selected", "focused", "label", "disabled", "visible", "itemSize", "ariaPosInset", "ariaSetSize", "template", "checkmark"], outputs: ["onClick", "onMouseEnter"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: i3.Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i8.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SelectItem, selector: "p-selectItem", inputs: ["id", "option", "selected", "focused", "label", "disabled", "visible", "itemSize", "ariaPosInset", "ariaSetSize", "template", "checkmark"], outputs: ["onClick", "onMouseEnter"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "component", type: i3.Overlay, selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "component", type: ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: SearchIcon, selector: "SearchIcon" }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "size"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i8.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Select, decorators: [{
             type: Component,
@@ -2254,7 +2330,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             <ng-container *ngTemplateOutlet="filterTemplate; context: { options: filterOptions }"></ng-container>
                         </ng-container>
                         <ng-template #builtInFilterElement>
-                            <p-iconField>
+                            <p-iconfield>
                                 <input
                                     #filter
                                     pInputText
@@ -2272,13 +2348,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" />
                                     <span *ngIf="filterIconTemplate">
                                         <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
                                     </span>
-                                </p-inputIcon>
-                            </p-iconField>
+                                </p-inputicon>
+                            </p-iconfield>
                         </ng-template>
                     </div>
                     <div class="p-select-list-container" [style.max-height]="virtualScroll ? 'auto' : scrollHeight || 'auto'">
@@ -2616,5 +2692,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SELECT_VALUE_ACCESSOR, Select, SelectItem, SelectModule };
+export { SELECT_VALUE_ACCESSOR, Select, SelectClasses, SelectItem, SelectModule, SelectStyle };
 //# sourceMappingURL=primeng-select.mjs.map