primeng 18.0.0-beta.5 → 18.0.0-rc.2

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 {
@@ -124,7 +132,7 @@ input.p-select-label {
 .p-select-overlay {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     background: ${dt('select.overlay.background')};
     color: ${dt('select.overlay.color')};
     border: 1px solid ${dt('select.overlay.border.color')};
@@ -233,20 +241,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 }) => [
@@ -463,7 +457,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 +487,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 +523,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 +532,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 +546,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 +577,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 +614,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 +653,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();
@@ -675,9 +669,9 @@ function Select_ng_template_9_div_4_ng_template_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵproperty("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();
@@ -816,7 +810,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 +821,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 +937,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 +970,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 +1307,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 +1530,7 @@ class Select extends BaseComponent {
      * Custom selected item template.
      * @group Templates
      */
-    selectedItemTemplate;
+    selecteditemTemplate;
     /**
      * Custom header template.
      * @group Templates
@@ -1556,7 +1550,7 @@ class Select extends BaseComponent {
      * Custom empty filter template.
      * @group Templates
      */
-    emptyFilterTemplate;
+    emptyfilterTemplate;
     /**
      * Custom empty template.
      * @group Templates
@@ -1566,37 +1560,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 +1637,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 +1753,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 +1930,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 +2419,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);
@@ -2570,8 +2517,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 +2542,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>
@@ -2673,9 +2620,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 +2680,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 +2926,7 @@ class Select extends BaseComponent {
         }], loaderTemplate: [{
             type: ContentChild,
             args: ['loader']
-        }], selectedItemTemplate: [{
+        }], selecteditemTemplate: [{
             type: ContentChild,
             args: ['selectedItem']
         }], headerTemplate: [{
@@ -2991,31 +2938,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']
         }] }); })();