primeng 18.0.0-rc.1 → 18.0.0

package/fesm2022/primeng-select.mjs

@@ -33,6 +33,10 @@ const theme = ({ dt }) => `
     box-shadow: ${dt('select.shadow')};
 }
 
+.p-select.ng-invalid.ng-dirty {
+    border-color: ${dt('select.invalid.border.color')};
+}
+
 .p-select:not(.p-disabled):hover {
     border-color: ${dt('select.hover.border.color')};
 }
@@ -66,7 +70,7 @@ const theme = ({ dt }) => `
     top: 50%;
     margin-top: -0.5rem;
     color: ${dt('select.clear.icon.color')};
-    right: ${dt('select.dropdown.width')};
+    inset-inline-end: ${dt('select.dropdown.width')};
 }
 
 .p-select-dropdown {
@@ -77,8 +81,8 @@ const theme = ({ dt }) => `
     background: transparent;
     color: ${dt('select.dropdown.color')};
     width: ${dt('select.dropdown.width')};
-    border-top-right-radius: ${dt('select.border.radius')};
-    border-bottom-right-radius: ${dt('select.border.radius')};
+    border-start-end-radius: ${dt('select.border.radius')};
+    border-end-end-radius: ${dt('select.border.radius')};
 }
 
 .p-select-label {
@@ -100,8 +104,12 @@ const theme = ({ dt }) => `
     color: ${dt('select.placeholder.color')};
 }
 
+.p-select.ng-invalid.ng-dirty .p-select-label.p-placeholder {
+    color: ${dt('select.invalid.placeholder.color')};
+}
+
 .p-select:has(.p-select-clear-icon) .p-select-label {
-    padding-right: calc(1rem + ${dt('select.padding.x')});
+    padding-inline-end: calc(1rem + ${dt('select.padding.x')});
 }
 
 .p-select.p-disabled .p-select-label {
@@ -122,9 +130,6 @@ input.p-select-label {
 }
 
 .p-select-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
     background: ${dt('select.overlay.background')};
     color: ${dt('select.overlay.color')};
     border: 1px solid ${dt('select.overlay.border.color')};
@@ -233,20 +238,6 @@ input.p-select-label {
     width: ${dt('select.lg.font.size')};
     height: ${dt('select.lg.font.size')};
 }
-
-/*For PrimeNG*/
-
-.p-dropdown.ng-invalid.ng-dirty,
-.p-select.ng-invalid.ng-dirty {
-    outline: 1px solid ${dt('select.invalid.border.color')};
-    outline-offset: 0;
-}
-
-.p-dropdown.ng-invalid.ng-dirty .p-dropdown-label.p-placeholder,
-.p-select.ng-invalid.ng-dirty .p-select-label.p-placeholder {
-    color: ${dt('select.invalid.placeholder.color')};
-}
-
 `;
 const classes = {
     root: ({ instance }) => [
@@ -255,7 +246,7 @@ const classes = {
             'p-disabled': instance.disabled,
             'p-variant-filled': instance.variant ? instance.variant === 'filled' : instance.config.inputStyle() === 'filled',
             'p-focus': instance.focused,
-            'p-inputwrapper-filled': instance.modelValue() !== undefined && instance.modelValue() !== null && !instance.modelValue().length,
+            'p-inputwrapper-filled': instance.modelValue() !== undefined && instance.modelValue() !== null,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-select-open': instance.overlayVisible,
             'p-select-fluid': instance.fluid,
@@ -463,7 +454,7 @@ function Select_span_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 24);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.selectedItemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, ctx_r2.selectedOption));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.selecteditemTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, ctx_r2.selectedOption));
 } }
 function Select_span_0_ng_template_4_span_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -493,9 +484,9 @@ function Select_span_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngClass", ctx_r2.inputClass)("pTooltip", ctx_r2.tooltip)("tooltipPosition", ctx_r2.tooltipPosition)("positionStyle", ctx_r2.tooltipPositionStyle)("tooltipStyleClass", ctx_r2.tooltipStyleClass)("pAutoFocus", ctx_r2.autofocus);
     i0.ɵɵattribute("aria-disabled", ctx_r2.disabled)("id", ctx_r2.inputId)("aria-label", ctx_r2.ariaLabel || (ctx_r2.label() === "p-emptylabel" ? undefined : ctx_r2.label()))("aria-labelledby", ctx_r2.ariaLabelledBy)("aria-haspopup", "listbox")("aria-expanded", (tmp_17_0 = ctx_r2.overlayVisible) !== null && tmp_17_0 !== undefined ? tmp_17_0 : false)("aria-controls", ctx_r2.overlayVisible ? ctx_r2.id + "_list" : null)("tabindex", !ctx_r2.disabled ? ctx_r2.tabindex : -1)("aria-activedescendant", ctx_r2.focused ? ctx_r2.focusedOptionId : undefined)("aria-required", ctx_r2.required)("required", ctx_r2.required);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", !ctx_r2.selectedItemTemplate)("ngIfElse", defaultPlaceholder_r4);
+    i0.ɵɵproperty("ngIf", !ctx_r2.selecteditemTemplate)("ngIfElse", defaultPlaceholder_r4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.selectedItemTemplate && ctx_r2.selectedOption);
+    i0.ɵɵproperty("ngIf", ctx_r2.selecteditemTemplate && ctx_r2.selectedOption);
 } }
 function Select_input_1_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -529,7 +520,7 @@ function Select_ng_container_2_span_2_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("data-pc-section", "clearicon");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.clearIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(3, _c26));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.cleariconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(3, _c26));
 } }
 function Select_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -538,9 +529,9 @@ function Select_ng_container_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.cleariconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.cleariconTemplate);
 } }
 function Select_ng_container_4_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -552,7 +543,7 @@ function Select_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.loadingIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.loadingiconTemplate);
 } }
 function Select_ng_container_4_ng_container_2_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 32);
@@ -583,9 +574,9 @@ function Select_ng_container_4_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.loadingiconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.loadingiconTemplate);
 } }
 function Select_ng_template_5_ng_container_0_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 37);
@@ -620,15 +611,15 @@ function Select_ng_template_5_span_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.dropdownIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(2, _c27));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.dropdowniconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(2, _c27));
 } }
 function Select_ng_template_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, Select_ng_template_5_ng_container_0_Template, 3, 2, "ng-container", 18)(1, Select_ng_template_5_span_1_Template, 2, 3, "span", 34);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngIf", !ctx_r2.dropdownIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.dropdowniconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.dropdownIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.dropdowniconTemplate);
 } }
 function Select_ng_template_9_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -659,7 +650,7 @@ function Select_ng_template_9_div_4_ng_template_2_span_5_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.filterIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.filtericonTemplate);
 } }
 function Select_ng_template_9_div_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
@@ -672,18 +663,18 @@ function Select_ng_template_9_div_4_ng_template_2_Template(rf, ctx) { if (rf & 1
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r2._filterValue() || "")("variant", ctx_r2.variant);
+    i0.ɵɵproperty("pSize", ctx_r2.size)("value", ctx_r2._filterValue() || "")("variant", ctx_r2.variant);
     i0.ɵɵattribute("placeholder", ctx_r2.filterPlaceholder)("aria-owns", ctx_r2.id + "_list")("aria-label", ctx_r2.ariaFilterLabel)("aria-activedescendant", ctx_r2.focusedOptionId);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", !ctx_r2.filterIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.filtericonTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.filterIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r2.filtericonTemplate);
 } }
 function Select_ng_template_9_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 45);
     i0.ɵɵlistener("click", function Select_ng_template_9_div_4_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r9); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵtemplate(1, Select_ng_template_9_div_4_ng_container_1_Template, 2, 4, "ng-container", 20)(2, Select_ng_template_9_div_4_ng_template_2_Template, 6, 8, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(1, Select_ng_template_9_div_4_ng_container_1_Template, 2, 4, "ng-container", 20)(2, Select_ng_template_9_div_4_ng_template_2_Template, 6, 9, "ng-template", null, 9, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const builtInFilterElement_r11 = i0.ɵɵreference(3);
@@ -816,7 +807,7 @@ function Select_ng_template_9_ng_template_8_li_3_Conditional_2_Template(rf, ctx)
     i0.ɵɵtemplate(0, Select_ng_template_9_ng_template_8_li_3_Conditional_2_ng_container_0_Template, 2, 0, "ng-container", 29);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.emptyFilterTemplate || ctx_r2.emptyTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.emptyfilterTemplate || ctx_r2.emptyTemplate);
 } }
 function Select_ng_template_9_ng_template_8_li_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li", 53);
@@ -827,7 +818,7 @@ function Select_ng_template_9_ng_template_8_li_3_Template(rf, ctx) { if (rf & 1)
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c0, scrollerOptions_r20.itemSize + "px"));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.emptyFilterTemplate && !ctx_r2.emptyTemplate ? 1 : 2);
+    i0.ɵɵconditional(!ctx_r2.emptyfilterTemplate && !ctx_r2.emptyTemplate ? 1 : 2);
 } }
 function Select_ng_template_9_ng_template_8_li_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
@@ -943,7 +934,7 @@ class SelectItem extends BaseComponent {
             i0.ɵɵtemplate(1, SelectItem_ng_container_1_Template, 3, 2, "ng-container", 1)(2, SelectItem_span_2_Template, 2, 1, "span", 1)(3, SelectItem_ng_container_3_Template, 1, 0, "ng-container", 2);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("id", ctx.id)("ngStyle", i0.ɵɵpureFunction1(14, _c0, ctx.itemSize + "px"))("ngClass", i0.ɵɵpureFunction3(16, _c1, ctx.selected, ctx.disabled, ctx.focused));
+            i0.ɵɵproperty("id", ctx.id)("ngStyle", i0.ɵɵpureFunction1(14, _c0, ctx.itemSize + "px"))("ngClass", i0.ɵɵpureFunction3(16, _c1, ctx.selected && !ctx.checkmark, ctx.disabled, ctx.focused));
             i0.ɵɵattribute("aria-label", ctx.label)("aria-setsize", ctx.ariaSetSize)("aria-posinset", ctx.ariaPosInset)("aria-selected", ctx.selected)("data-p-focused", ctx.focused)("data-p-highlight", ctx.selected)("data-p-disabled", ctx.disabled);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.checkmark);
@@ -976,7 +967,7 @@ class SelectItem extends BaseComponent {
             [ngStyle]="{ height: itemSize + 'px' }"
             [ngClass]="{
                 'p-select-option': true,
-                'p-select-option-selected': selected,
+                'p-select-option-selected': selected && !checkmark,
                 'p-disabled': disabled,
                 'p-focus': focused
             }"
@@ -1313,7 +1304,7 @@ class Select extends BaseComponent {
      * Whether to focus on the first visible or selected element when the overlay panel is shown.
      * @group Props
      */
-    autoOptionFocus = true;
+    autoOptionFocus = false;
     /**
      * Applies focus to the filter element when the overlay is shown.
      * @group Props
@@ -1536,7 +1527,7 @@ class Select extends BaseComponent {
      * Custom selected item template.
      * @group Templates
      */
-    selectedItemTemplate;
+    selecteditemTemplate;
     /**
      * Custom header template.
      * @group Templates
@@ -1556,7 +1547,7 @@ class Select extends BaseComponent {
      * Custom empty filter template.
      * @group Templates
      */
-    emptyFilterTemplate;
+    emptyfilterTemplate;
     /**
      * Custom empty template.
      * @group Templates
@@ -1566,37 +1557,37 @@ class Select extends BaseComponent {
      * Custom dropdown icon template.
      * @group Templates
      */
-    dropdownIconTemplate;
+    dropdowniconTemplate;
     /**
      * Custom loading icon template.
      * @group Templates
      */
-    loadingIconTemplate;
+    loadingiconTemplate;
     /**
      * Custom clear icon template.
      * @group Templates
      */
-    clearIconTemplate;
+    cleariconTemplate;
     /**
      * Custom filter icon template.
      * @group Templates
      */
-    filterIconTemplate;
+    filtericonTemplate;
     /**
      * Custom on icon template.
      * @group Templates
      */
-    onIconTemplate;
+    oniconTemplate;
     /**
      * Custom off icon template.
      * @group Templates
      */
-    offIconTemplate;
+    officonTemplate;
     /**
      * Custom cancel icon template.
      * @group Templates
      */
-    cancelIconTemplate;
+    canceliconTemplate;
     filterOptions;
     _options = signal(null);
     _placeholder = signal(undefined);
@@ -1643,7 +1634,7 @@ class Select extends BaseComponent {
         return {
             'p-select-label': true,
             'p-placeholder': this.placeholder() && label === this.placeholder(),
-            'p-select-label-empty': !this.editable && !this.selectedItemTemplate && (label === undefined || label === null || label === 'p-emptylabel' || label.length === 0)
+            'p-select-label-empty': !this.editable && !this.selecteditemTemplate && (label === undefined || label === null || label === 'p-emptylabel' || label.length === 0)
         };
     }
     get panelClass() {
@@ -1759,54 +1750,6 @@ class Select extends BaseComponent {
             this.selectedOptionUpdated = false;
         }
     }
-    ngAfterContentInit() {
-        this.templates.forEach((item) => {
-            switch (item.getType()) {
-                case 'item':
-                    this.itemTemplate = item.template;
-                    break;
-                case 'selectedItem':
-                    this.selectedItemTemplate = item.template;
-                    break;
-                case 'header':
-                    this.headerTemplate = item.template;
-                    break;
-                case 'filter':
-                    this.filterTemplate = item.template;
-                    break;
-                case 'footer':
-                    this.footerTemplate = item.template;
-                    break;
-                case 'emptyfilter':
-                    this.emptyFilterTemplate = item.template;
-                    break;
-                case 'empty':
-                    this.emptyTemplate = item.template;
-                    break;
-                case 'group':
-                    this.groupTemplate = item.template;
-                    break;
-                case 'loader':
-                    this.loaderTemplate = item.template;
-                    break;
-                case 'dropdownicon':
-                    this.dropdownIconTemplate = item.template;
-                    break;
-                case 'loadingicon':
-                    this.loadingIconTemplate = item.template;
-                    break;
-                case 'clearicon':
-                    this.clearIconTemplate = item.template;
-                    break;
-                case 'filtericon':
-                    this.filterIconTemplate = item.template;
-                    break;
-                default:
-                    this.itemTemplate = item.template;
-                    break;
-            }
-        });
-    }
     flatOptions(options) {
         return (options || []).reduce((result, option, index) => {
             result.push({ optionGroup: option, group: true, index });
@@ -1984,6 +1927,7 @@ class Select extends BaseComponent {
      */
     show(isFocus) {
         this.overlayVisible = true;
+        this.focusedOptionIndex.set(this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.editable ? -1 : this.findSelectedOptionIndex());
         if (isFocus) {
             focus(this.focusInputViewChild?.nativeElement);
         }
@@ -2472,19 +2416,19 @@ class Select extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.groupTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loaderTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectedItemTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selecteditemTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyFilterTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyfilterTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.emptyTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.onIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.offIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cancelIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdowniconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cleariconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filtericonTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.oniconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.officonTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canceliconTemplate = _t.first);
         } }, viewQuery: function Select_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c8, 5);
             i0.ɵɵviewQuery(_c19, 5);
@@ -2510,7 +2454,7 @@ class Select extends BaseComponent {
             i0.ɵɵattribute("id", ctx.id);
             i0.ɵɵstyleMap(ctx.hostStyle);
             i0.ɵɵclassMap(ctx.hostClass);
-        } }, inputs: { id: "id", scrollHeight: "scrollHeight", filter: [2, "filter", "filter", booleanAttribute], name: "name", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: [2, "readonly", "readonly", booleanAttribute], required: [2, "required", "required", booleanAttribute], editable: [2, "editable", "editable", booleanAttribute], appendTo: "appendTo", tabindex: [2, "tabindex", "tabindex", numberAttribute], placeholder: "placeholder", loadingIcon: "loadingIcon", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", variant: "variant", inputId: "inputId", dataKey: "dataKey", filterBy: "filterBy", filterFields: "filterFields", autofocus: [2, "autofocus", "autofocus", booleanAttribute], resetFilterOnHide: [2, "resetFilterOnHide", "resetFilterOnHide", booleanAttribute], checkmark: [2, "checkmark", "checkmark", booleanAttribute], dropdownIcon: "dropdownIcon", loading: [2, "loading", "loading", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: [2, "autoDisplayFirst", "autoDisplayFirst", booleanAttribute], group: [2, "group", "group", booleanAttribute], showClear: [2, "showClear", "showClear", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", lazy: [2, "lazy", "lazy", booleanAttribute], virtualScroll: [2, "virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: [2, "virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", size: "size", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: [2, "maxlength", "maxlength", numberAttribute], tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], autofocusFilter: [2, "autofocusFilter", "autofocusFilter", booleanAttribute], fluid: [2, "fluid", "fluid", booleanAttribute], disabled: "disabled", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", filterValue: "filterValue", options: "options" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, standalone: true, features: [i0.ɵɵProvidersFeature([SELECT_VALUE_ACCESSOR, SelectStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 11, vars: 15, consts: [["elseBlock", ""], ["overlay", ""], ["content", ""], ["focusInput", ""], ["defaultPlaceholder", ""], ["editableInput", ""], ["firstHiddenFocusableEl", ""], ["buildInItems", ""], ["lastHiddenFocusableEl", ""], ["builtInFilterElement", ""], ["filter", ""], ["scroller", ""], ["loader", ""], ["items", ""], ["emptyFilter", ""], ["empty", ""], ["role", "combobox", 3, "ngClass", "pTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "pAutoFocus", "focus", "blur", "keydown", 4, "ngIf"], ["type", "text", "aria-haspopup", "listbox", 3, "ngClass", "disabled", "pAutoFocus", "input", "keydown", "focus", "blur", 4, "ngIf"], [4, "ngIf"], ["role", "button", "aria-label", "dropdown trigger", "aria-haspopup", "listbox", 1, "p-select-dropdown"], [4, "ngIf", "ngIfElse"], [3, "visibleChange", "onAnimationStart", "onHide", "visible", "options", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], ["role", "combobox", 3, "focus", "blur", "keydown", "ngClass", "pTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "pAutoFocus"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "text", "aria-haspopup", "listbox", 3, "input", "keydown", "focus", "blur", "ngClass", "disabled", "pAutoFocus"], ["class", "p-select-clear-icon", 3, "click", 4, "ngIf"], [1, "p-select-clear-icon", 3, "click"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [4, "ngTemplateOutlet"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], ["aria-hidden", "true", 3, "class", 4, "ngIf"], ["aria-hidden", "true", 3, "ngClass"], ["aria-hidden", "true"], ["class", "p-select-dropdown-icon", 4, "ngIf"], ["class", "p-select-dropdown-icon", 3, "ngClass", 4, "ngIf"], [3, "styleClass", 4, "ngIf"], [1, "p-select-dropdown-icon", 3, "ngClass"], [3, "styleClass"], [1, "p-select-dropdown-icon"], [3, "ngClass", "ngStyle"], ["role", "presentation", 1, "p-hidden-accessible", "p-hidden-focusable", 3, "focus"], ["class", "p-select-header", 3, "click", 4, "ngIf"], [1, "p-select-list-container"], [3, "items", "style", "itemSize", "autoSize", "lazy", "options", "onLazyLoad", 4, "ngIf"], [1, "p-select-header", 3, "click"], ["pInputText", "", "type", "text", "role", "searchbox", "autocomplete", "off", 1, "p-select-filter", 3, "input", "keydown", "blur", "value", "variant"], [3, "onLazyLoad", "items", "itemSize", "autoSize", "lazy", "options"], ["role", "listbox", 1, "p-select-list", 3, "ngClass"], ["ngFor", "", 3, "ngForOf"], ["class", "p-select-empty-message", "role", "option", 3, "ngStyle", 4, "ngIf"], ["role", "option", 1, "p-select-option-group", 3, "ngStyle"], [3, "onClick", "onMouseEnter", "id", "option", "checkmark", "selected", "label", "disabled", "template", "focused", "ariaPosInset", "ariaSetSize"], ["role", "option", 1, "p-select-empty-message", 3, "ngStyle"]], template: function Select_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { id: "id", scrollHeight: "scrollHeight", filter: [2, "filter", "filter", booleanAttribute], name: "name", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: [2, "readonly", "readonly", booleanAttribute], required: [2, "required", "required", booleanAttribute], editable: [2, "editable", "editable", booleanAttribute], appendTo: "appendTo", tabindex: [2, "tabindex", "tabindex", numberAttribute], placeholder: "placeholder", loadingIcon: "loadingIcon", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", variant: "variant", inputId: "inputId", dataKey: "dataKey", filterBy: "filterBy", filterFields: "filterFields", autofocus: [2, "autofocus", "autofocus", booleanAttribute], resetFilterOnHide: [2, "resetFilterOnHide", "resetFilterOnHide", booleanAttribute], checkmark: [2, "checkmark", "checkmark", booleanAttribute], dropdownIcon: "dropdownIcon", loading: [2, "loading", "loading", booleanAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: [2, "autoDisplayFirst", "autoDisplayFirst", booleanAttribute], group: [2, "group", "group", booleanAttribute], showClear: [2, "showClear", "showClear", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", lazy: [2, "lazy", "lazy", booleanAttribute], virtualScroll: [2, "virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: [2, "virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", size: "size", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: [2, "maxlength", "maxlength", numberAttribute], tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], autofocusFilter: [2, "autofocusFilter", "autofocusFilter", booleanAttribute], fluid: [2, "fluid", "fluid", booleanAttribute], disabled: "disabled", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", filterValue: "filterValue", options: "options" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, standalone: true, features: [i0.ɵɵProvidersFeature([SELECT_VALUE_ACCESSOR, SelectStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 11, vars: 15, consts: [["elseBlock", ""], ["overlay", ""], ["content", ""], ["focusInput", ""], ["defaultPlaceholder", ""], ["editableInput", ""], ["firstHiddenFocusableEl", ""], ["buildInItems", ""], ["lastHiddenFocusableEl", ""], ["builtInFilterElement", ""], ["filter", ""], ["scroller", ""], ["loader", ""], ["items", ""], ["emptyFilter", ""], ["empty", ""], ["role", "combobox", 3, "ngClass", "pTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "pAutoFocus", "focus", "blur", "keydown", 4, "ngIf"], ["type", "text", "aria-haspopup", "listbox", 3, "ngClass", "disabled", "pAutoFocus", "input", "keydown", "focus", "blur", 4, "ngIf"], [4, "ngIf"], ["role", "button", "aria-label", "dropdown trigger", "aria-haspopup", "listbox", 1, "p-select-dropdown"], [4, "ngIf", "ngIfElse"], [3, "visibleChange", "onAnimationStart", "onHide", "visible", "options", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], ["role", "combobox", 3, "focus", "blur", "keydown", "ngClass", "pTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "pAutoFocus"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["type", "text", "aria-haspopup", "listbox", 3, "input", "keydown", "focus", "blur", "ngClass", "disabled", "pAutoFocus"], ["class", "p-select-clear-icon", 3, "click", 4, "ngIf"], [1, "p-select-clear-icon", 3, "click"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [4, "ngTemplateOutlet"], ["aria-hidden", "true", 3, "ngClass", 4, "ngIf"], ["aria-hidden", "true", 3, "class", 4, "ngIf"], ["aria-hidden", "true", 3, "ngClass"], ["aria-hidden", "true"], ["class", "p-select-dropdown-icon", 4, "ngIf"], ["class", "p-select-dropdown-icon", 3, "ngClass", 4, "ngIf"], [3, "styleClass", 4, "ngIf"], [1, "p-select-dropdown-icon", 3, "ngClass"], [3, "styleClass"], [1, "p-select-dropdown-icon"], [3, "ngClass", "ngStyle"], ["role", "presentation", 1, "p-hidden-accessible", "p-hidden-focusable", 3, "focus"], ["class", "p-select-header", 3, "click", 4, "ngIf"], [1, "p-select-list-container"], [3, "items", "style", "itemSize", "autoSize", "lazy", "options", "onLazyLoad", 4, "ngIf"], [1, "p-select-header", 3, "click"], ["pInputText", "", "type", "text", "role", "searchbox", "autocomplete", "off", 1, "p-select-filter", 3, "input", "keydown", "blur", "pSize", "value", "variant"], [3, "onLazyLoad", "items", "itemSize", "autoSize", "lazy", "options"], ["role", "listbox", 1, "p-select-list", 3, "ngClass"], ["ngFor", "", 3, "ngForOf"], ["class", "p-select-empty-message", "role", "option", 3, "ngStyle", 4, "ngIf"], ["role", "option", 1, "p-select-option-group", 3, "ngStyle"], [3, "onClick", "onMouseEnter", "id", "option", "checkmark", "selected", "label", "disabled", "template", "focused", "ariaPosInset", "ariaSetSize"], ["role", "option", 1, "p-select-empty-message", 3, "ngStyle"]], template: function Select_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵtemplate(0, Select_span_0_Template, 6, 20, "span", 16)(1, Select_input_1_Template, 2, 8, "input", 17)(2, Select_ng_container_2_Template, 3, 2, "ng-container", 18);
             i0.ɵɵelementStart(3, "div", 19);
@@ -2570,8 +2514,8 @@ class Select extends BaseComponent {
             [attr.aria-required]="required"
             [attr.required]="required"
         >
-            <ng-container *ngIf="!selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</ng-container>
-            <ng-container *ngIf="selectedItemTemplate && selectedOption" [ngTemplateOutlet]="selectedItemTemplate" [ngTemplateOutletContext]="{ $implicit: selectedOption }"></ng-container>
+            <ng-container *ngIf="!selecteditemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</ng-container>
+            <ng-container *ngIf="selecteditemTemplate && selectedOption" [ngTemplateOutlet]="selecteditemTemplate" [ngTemplateOutletContext]="{ $implicit: selectedOption }"></ng-container>
             <ng-template #defaultPlaceholder>
                 <span *ngIf="!selectedOption">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</span>
             </ng-template>
@@ -2595,30 +2539,30 @@ class Select extends BaseComponent {
             (blur)="onInputBlur($event)"
         />
         <ng-container *ngIf="isVisibleClearIcon">
-            <TimesIcon class="p-select-clear-icon" (click)="clear($event)" *ngIf="!clearIconTemplate" [attr.data-pc-section]="'clearicon'" />
-            <span class="p-select-clear-icon" (click)="clear($event)" *ngIf="clearIconTemplate" [attr.data-pc-section]="'clearicon'">
-                <ng-template *ngTemplateOutlet="clearIconTemplate; context: { class: 'p-select-clear-icon' }"></ng-template>
+            <TimesIcon class="p-select-clear-icon" (click)="clear($event)" *ngIf="!cleariconTemplate" [attr.data-pc-section]="'clearicon'" />
+            <span class="p-select-clear-icon" (click)="clear($event)" *ngIf="cleariconTemplate" [attr.data-pc-section]="'clearicon'">
+                <ng-template *ngTemplateOutlet="cleariconTemplate; context: { class: 'p-select-clear-icon' }"></ng-template>
             </span>
         </ng-container>
 
         <div class="p-select-dropdown" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'trigger'">
             <ng-container *ngIf="loading; else elseBlock">
-                <ng-container *ngIf="loadingIconTemplate">
-                    <ng-container *ngTemplateOutlet="loadingIconTemplate"></ng-container>
+                <ng-container *ngIf="loadingiconTemplate">
+                    <ng-container *ngTemplateOutlet="loadingiconTemplate"></ng-container>
                 </ng-container>
-                <ng-container *ngIf="!loadingIconTemplate">
+                <ng-container *ngIf="!loadingiconTemplate">
                     <span *ngIf="loadingIcon" [ngClass]="'p-select-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
                     <span *ngIf="!loadingIcon" [class]="'p-select-loading-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
                 </ng-container>
             </ng-container>
 
             <ng-template #elseBlock>
-                <ng-container *ngIf="!dropdownIconTemplate">
+                <ng-container *ngIf="!dropdowniconTemplate">
                     <span class="p-select-dropdown-icon" *ngIf="dropdownIcon" [ngClass]="dropdownIcon"></span>
                     <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="'p-select-dropdown-icon'" />
                 </ng-container>
-                <span *ngIf="dropdownIconTemplate" class="p-select-dropdown-icon">
-                    <ng-template *ngTemplateOutlet="dropdownIconTemplate; context: { class: 'p-select-dropdown-icon' }"></ng-template>
+                <span *ngIf="dropdowniconTemplate" class="p-select-dropdown-icon">
+                    <ng-template *ngTemplateOutlet="dropdowniconTemplate; context: { class: 'p-select-dropdown-icon' }"></ng-template>
                 </span>
             </ng-template>
         </div>
@@ -2658,6 +2602,7 @@ class Select extends BaseComponent {
                                 <input
                                     #filter
                                     pInputText
+                                    [pSize]="size"
                                     type="text"
                                     role="searchbox"
                                     autocomplete="off"
@@ -2673,9 +2618,9 @@ class Select extends BaseComponent {
                                     (blur)="onFilterBlur($event)"
                                 />
                                 <p-inputicon>
-                                    <SearchIcon *ngIf="!filterIconTemplate" />
-                                    <span *ngIf="filterIconTemplate">
-                                        <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
+                                    <SearchIcon *ngIf="!filtericonTemplate" />
+                                    <span *ngIf="filtericonTemplate">
+                                        <ng-template *ngTemplateOutlet="filtericonTemplate"></ng-template>
                                     </span>
                                 </p-inputicon>
                             </p-iconfield>
@@ -2733,10 +2678,10 @@ class Select extends BaseComponent {
                                     </ng-container>
                                 </ng-template>
                                 <li *ngIf="filterValue && isEmpty()" class="p-select-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
-                                    @if (!emptyFilterTemplate && !emptyTemplate) {
+                                    @if (!emptyfilterTemplate && !emptyTemplate) {
                                         {{ emptyFilterMessageLabel }}
                                     } @else {
-                                        <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
+                                        <ng-container #emptyFilter *ngTemplateOutlet="emptyfilterTemplate || emptyTemplate"></ng-container>
                                     }
                                 </li>
                                 <li *ngIf="!filterValue && isEmpty()" class="p-select-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
@@ -2979,7 +2924,7 @@ class Select extends BaseComponent {
         }], loaderTemplate: [{
             type: ContentChild,
             args: ['loader']
-        }], selectedItemTemplate: [{
+        }], selecteditemTemplate: [{
             type: ContentChild,
             args: ['selectedItem']
         }], headerTemplate: [{
@@ -2991,31 +2936,31 @@ class Select extends BaseComponent {
         }], footerTemplate: [{
             type: ContentChild,
             args: ['footer']
-        }], emptyFilterTemplate: [{
+        }], emptyfilterTemplate: [{
             type: ContentChild,
             args: ['emptyfilter']
         }], emptyTemplate: [{
             type: ContentChild,
             args: ['empty']
-        }], dropdownIconTemplate: [{
+        }], dropdowniconTemplate: [{
             type: ContentChild,
             args: ['dropdownicon']
-        }], loadingIconTemplate: [{
+        }], loadingiconTemplate: [{
             type: ContentChild,
             args: ['loadingicon']
-        }], clearIconTemplate: [{
+        }], cleariconTemplate: [{
             type: ContentChild,
             args: ['clearicon']
-        }], filterIconTemplate: [{
+        }], filtericonTemplate: [{
             type: ContentChild,
             args: ['filtericon']
-        }], onIconTemplate: [{
+        }], oniconTemplate: [{
             type: ContentChild,
             args: ['onicon']
-        }], offIconTemplate: [{
+        }], officonTemplate: [{
             type: ContentChild,
             args: ['officon']
-        }], cancelIconTemplate: [{
+        }], canceliconTemplate: [{
             type: ContentChild,
             args: ['cancelicon']
         }] }); })();