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

package/fesm2022/primeng-multiselect.mjs

@@ -36,6 +36,10 @@ const theme = ({ dt }) => `
     box-shadow: ${dt('multiselect.shadow')};
 }
 
+.p-multiselect.ng-invalid.ng-dirty {
+    border-color: ${dt('multiselect.invalid.border.color')};
+}
+
 .p-multiselect:not(.p-disabled):hover {
     border-color: ${dt('multiselect.hover.border.color')};
 }
@@ -72,8 +76,8 @@ const theme = ({ dt }) => `
     background: transparent;
     color: ${dt('multiselect.dropdown.color')};
     width: ${dt('multiselect.dropdown.width')};
-    border-top-right-radius: ${dt('multiselect.border.radius')};
-    border-bottom-right-radius: ${dt('multiselect.border.radius')};
+    border-start-end-radius: ${dt('multiselect.border.radius')};
+    border-end-end-radius: ${dt('multiselect.border.radius')};
 }
 
 .p-multiselect-label-container {
@@ -98,6 +102,10 @@ const theme = ({ dt }) => `
     color: ${dt('multiselect.placeholder.color')};
 }
 
+p-multiselect.ng-invalid.ng-dirty .p-multiselect-label.p-placeholder {
+    color: ${dt('multiselect.invalid.placeholder.color')};
+}
+
 .p-multiselect.p-disabled .p-multiselect-label {
     color: ${dt('multiselect.disabled.color')};
 }
@@ -129,7 +137,7 @@ const theme = ({ dt }) => `
 }
 
 .p-multiselect-header .p-checkbox {
-    margin-right: ${dt('multiselect.option.gap')};
+    margin-inline-end: ${dt('multiselect.option.gap')};
 }
 
 .p-multiselect-filter-container {
@@ -237,12 +245,6 @@ const theme = ({ dt }) => `
     height: ${dt('multiselect.lg.font.size')};
 }
 
-/* For PrimeNG */
-
-p-multiselect.ng-invalid.ng-dirty {
-    border-color: ${dt('multiselect.invalid.border.color')};
-}
-
 .p-multiselect-clear-icon {
     cursor: pointer;
     display: flex;
@@ -251,10 +253,6 @@ p-multiselect.ng-invalid.ng-dirty {
     flex-shrink: 0;
     background: transparent;
     color: ${dt('multiselect.clear.icon.color')};
-}
-
-p-multiselect.ng-invalid.ng-dirty .p-multiselect-label {
-    color: ${dt('multiselect.invalid.placeholder.color')};
 }`;
 const inlineStyles = {
     root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
@@ -277,7 +275,7 @@ const classes = {
     labelContainer: 'p-multiselect-label-container',
     label: ({ instance }) => ({
         'p-multiselect-label': true,
-        'p-placeholder': instance.label === instance.placeholder(),
+        'p-placeholder': instance.label() === instance.placeholder(),
         'p-multiselect-label-empty': !instance.placeholder() && !instance.defaultLabel && (!instance.modelValue() || instance.modelValue().length === 0)
     }),
     chipItem: 'p-multiselect-chip-item',
@@ -410,7 +408,7 @@ function MultiSelectItem_ng_container_2_ng_template_1_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const class_r1 = ctx.class;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemCheckboxIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c3, ctx_r1.selected, class_r1));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.itemcheckboxiconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c3, ctx_r1.selected, class_r1));
 } }
 function MultiSelectItem_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -430,22 +428,40 @@ function MultiSelectItem_span_3_Template(rf, ctx) { if (rf & 1) {
 function MultiSelectItem_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-const _c4 = ["overlay"];
-const _c5 = ["filterInput"];
-const _c6 = ["focusInput"];
-const _c7 = ["items"];
-const _c8 = ["scroller"];
-const _c9 = ["lastHiddenFocusableEl"];
-const _c10 = ["firstHiddenFocusableEl"];
-const _c11 = ["headerCheckbox"];
-const _c12 = [[["p-header"]], [["p-footer"]]];
-const _c13 = ["p-header", "p-footer"];
-const _c14 = (a0, a1) => ({ $implicit: a0, removeChip: a1 });
-const _c15 = () => ({ class: "p-multiselect-chip-icon" });
-const _c16 = a0 => ({ options: a0 });
-const _c17 = (a0, a1, a2) => ({ checked: a0, partialSelected: a1, class: a2 });
-const _c18 = (a0, a1) => ({ $implicit: a0, options: a1 });
-const _c19 = () => ({});
+const _c4 = ["item"];
+const _c5 = ["group"];
+const _c6 = ["loader"];
+const _c7 = ["header"];
+const _c8 = ["filter"];
+const _c9 = ["footer"];
+const _c10 = ["emptyfilter"];
+const _c11 = ["empty"];
+const _c12 = ["selecteditems"];
+const _c13 = ["checkicon"];
+const _c14 = ["loadingicon"];
+const _c15 = ["filtericon"];
+const _c16 = ["removetokenicon"];
+const _c17 = ["chipicon"];
+const _c18 = ["clearicon"];
+const _c19 = ["dropdownicon"];
+const _c20 = ["itemcheckboxicon"];
+const _c21 = ["headercheckboxicon"];
+const _c22 = ["overlay"];
+const _c23 = ["filterInput"];
+const _c24 = ["focusInput"];
+const _c25 = ["items"];
+const _c26 = ["scroller"];
+const _c27 = ["lastHiddenFocusableEl"];
+const _c28 = ["firstHiddenFocusableEl"];
+const _c29 = ["headerCheckbox"];
+const _c30 = [[["p-header"]], [["p-footer"]]];
+const _c31 = ["p-header", "p-footer"];
+const _c32 = (a0, a1) => ({ $implicit: a0, removeChip: a1 });
+const _c33 = () => ({ class: "p-multiselect-chip-icon" });
+const _c34 = a0 => ({ options: a0 });
+const _c35 = (a0, a1, a2) => ({ checked: a0, partialSelected: a1, class: a2 });
+const _c36 = (a0, a1) => ({ $implicit: a0, options: a1 });
+const _c37 = () => ({});
 function MultiSelect_ng_container_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
     i0.ɵɵtext(1);
@@ -468,7 +484,7 @@ function MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_ng_templ
     const ctx_r1 = i0.ɵɵnextContext(7);
     i0.ɵɵattribute("data-pc-section", "clearicon")("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.chipIconTemplate || ctx_r1.removeTokenIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(4, _c15));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.chipiconTemplate || ctx_r1.removetokeniconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction0(4, _c33));
 } }
 function MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -477,7 +493,7 @@ function MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_ng_templ
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.chipIconTemplate || ctx_r1.removeTokenIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.chipiconTemplate || ctx_r1.removetokeniconTemplate);
 } }
 function MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, MultiSelect_ng_container_5_ng_container_2_div_1_ng_container_3_ng_template_1_ng_container_0_Template, 2, 1, "ng-container", 20);
@@ -502,7 +518,7 @@ function MultiSelect_ng_container_5_ng_container_2_div_1_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("label", ctx_r1.getLabelByValue(item_r4))("removable", true)("removeIcon", ctx_r1.chipIcon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.chipIconTemplate || ctx_r1.removeTokenIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.chipiconTemplate || ctx_r1.removetokeniconTemplate);
 } }
 function MultiSelect_ng_container_5_ng_container_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -560,7 +576,7 @@ function MultiSelect_ng_container_7_span_2_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("data-pc-section", "clearicon")("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.cleariconTemplate);
 } }
 function MultiSelect_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -569,9 +585,9 @@ function MultiSelect_ng_container_7_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.cleariconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.cleariconTemplate);
 } }
 function MultiSelect_ng_container_9_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -583,7 +599,7 @@ function MultiSelect_ng_container_9_ng_container_1_Template(rf, ctx) { if (rf &
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.loadingIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.loadingiconTemplate);
 } }
 function MultiSelect_ng_container_9_ng_container_2_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 35);
@@ -614,9 +630,9 @@ function MultiSelect_ng_container_9_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.loadingiconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.loadingiconTemplate);
 } }
 function MultiSelect_ng_template_10_ng_container_0_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 40);
@@ -654,15 +670,15 @@ function MultiSelect_ng_template_10_span_1_Template(rf, ctx) { if (rf & 1) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("data-pc-section", "triggericon")("aria-hidden", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.dropdownIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.dropdowniconTemplate);
 } }
 function MultiSelect_ng_template_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, MultiSelect_ng_template_10_ng_container_0_Template, 3, 2, "ng-container", 20)(1, MultiSelect_ng_template_10_span_1_Template, 2, 3, "span", 37);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngIf", !ctx_r1.dropdownIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.dropdowniconTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.dropdownIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.dropdowniconTemplate);
 } }
 function MultiSelect_ng_template_14_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -677,7 +693,7 @@ function MultiSelect_ng_template_14_div_4_ng_container_2_Template(rf, ctx) { if
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.filterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c16, ctx_r1.filterOptions));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.filterTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c34, ctx_r1.filterOptions));
 } }
 function MultiSelect_ng_template_14_div_4_ng_template_3_p_checkbox_0_ng_template_2_CheckIcon_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "CheckIcon", 41);
@@ -695,9 +711,9 @@ function MultiSelect_ng_template_14_div_4_ng_template_3_p_checkbox_0_ng_template
 } if (rf & 2) {
     const class_r10 = ctx.class;
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("ngIf", !ctx_r1.headerCheckboxIconTemplate && ctx_r1.allSelected());
+    i0.ɵɵproperty("ngIf", !ctx_r1.headercheckboxiconTemplate && ctx_r1.allSelected());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headerCheckboxIconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c17, ctx_r1.allSelected(), ctx_r1.partialSelected(), class_r10));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.headercheckboxiconTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction3(3, _c35, ctx_r1.allSelected(), ctx_r1.partialSelected(), class_r10));
 } }
 function MultiSelect_ng_template_14_div_4_ng_template_3_p_checkbox_0_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
@@ -725,7 +741,7 @@ function MultiSelect_ng_template_14_div_4_ng_template_3_div_1_span_6_Template(rf
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.filterIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.filtericonTemplate);
 } }
 function MultiSelect_ng_template_14_div_4_ng_template_3_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
@@ -741,9 +757,9 @@ function MultiSelect_ng_template_14_div_4_ng_template_3_div_1_Template(rf, ctx)
     i0.ɵɵproperty("variant", ctx_r1.variant)("value", ctx_r1._filterValue() || "")("disabled", ctx_r1.disabled);
     i0.ɵɵattribute("autocomplete", ctx_r1.autocomplete)("aria-owns", ctx_r1.id + "_list")("aria-activedescendant", ctx_r1.focusedOptionId)("placeholder", ctx_r1.filterPlaceHolder)("aria-label", ctx_r1.ariaFilterLabel);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", !ctx_r1.filterIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.filtericonTemplate);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.filterIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.filtericonTemplate);
 } }
 function MultiSelect_ng_template_14_div_4_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, MultiSelect_ng_template_14_div_4_ng_template_3_p_checkbox_0_Template, 4, 4, "p-checkbox", 49)(1, MultiSelect_ng_template_14_div_4_ng_template_3_div_1_Template, 7, 10, "div", 50);
@@ -774,7 +790,7 @@ function MultiSelect_ng_template_14_p_scroller_6_ng_template_2_Template(rf, ctx)
     const scrollerOptions_r15 = ctx.options;
     i0.ɵɵnextContext(2);
     const buildInItems_r16 = i0.ɵɵreference(9);
-    i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r16)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c18, items_r14, scrollerOptions_r15));
+    i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r16)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c36, items_r14, scrollerOptions_r15));
 } }
 function MultiSelect_ng_template_14_p_scroller_6_ng_container_4_ng_template_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -784,7 +800,7 @@ function MultiSelect_ng_template_14_p_scroller_6_ng_container_4_ng_template_1_Te
 } if (rf & 2) {
     const scrollerOptions_r17 = ctx.options;
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c16, scrollerOptions_r17));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.loaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c34, scrollerOptions_r17));
 } }
 function MultiSelect_ng_template_14_p_scroller_6_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -816,7 +832,7 @@ function MultiSelect_ng_template_14_ng_container_7_Template(rf, ctx) { if (rf &
     const buildInItems_r16 = i0.ɵɵreference(9);
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r16)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c18, ctx_r1.visibleOptions(), i0.ɵɵpureFunction0(2, _c19)));
+    i0.ɵɵproperty("ngTemplateOutlet", buildInItems_r16)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c36, ctx_r1.visibleOptions(), i0.ɵɵpureFunction0(2, _c37)));
 } }
 function MultiSelect_ng_template_14_ng_template_8_ng_template_2_ng_container_0_span_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -865,7 +881,7 @@ function MultiSelect_ng_template_14_ng_template_8_ng_template_2_ng_container_1_T
     const scrollerOptions_r21 = i0.ɵɵnextContext().options;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("id", ctx_r1.id + "_" + ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21))("option", option_r18)("selected", ctx_r1.isSelected(option_r18))("label", ctx_r1.getOptionLabel(option_r18))("disabled", ctx_r1.isOptionDisabled(option_r18))("template", ctx_r1.itemTemplate)("checkIconTemplate", ctx_r1.checkIconTemplate)("itemCheckboxIconTemplate", ctx_r1.itemCheckboxIconTemplate)("itemSize", scrollerOptions_r21.itemSize)("focused", ctx_r1.focusedOptionIndex() === ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21))("ariaPosInset", ctx_r1.getAriaPosInset(ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21)))("ariaSetSize", ctx_r1.ariaSetSize)("variant", ctx_r1.variant);
+    i0.ɵɵproperty("id", ctx_r1.id + "_" + ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21))("option", option_r18)("selected", ctx_r1.isSelected(option_r18))("label", ctx_r1.getOptionLabel(option_r18))("disabled", ctx_r1.isOptionDisabled(option_r18))("template", ctx_r1.itemTemplate)("checkiconTemplate", ctx_r1.checkiconTemplate)("itemcheckboxiconTemplate", ctx_r1.itemcheckboxiconTemplate)("itemSize", scrollerOptions_r21.itemSize)("focused", ctx_r1.focusedOptionIndex() === ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21))("ariaPosInset", ctx_r1.getAriaPosInset(ctx_r1.getOptionIndex(i_r20, scrollerOptions_r21)))("ariaSetSize", ctx_r1.ariaSetSize)("variant", ctx_r1.variant);
 } }
 function MultiSelect_ng_template_14_ng_template_8_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, MultiSelect_ng_template_14_ng_template_8_ng_template_2_ng_container_0_Template, 4, 9, "ng-container", 20)(1, MultiSelect_ng_template_14_ng_template_8_ng_template_2_ng_container_1_Template, 2, 13, "ng-container", 20);
@@ -889,7 +905,7 @@ function MultiSelect_ng_template_14_ng_template_8_li_3_Conditional_2_Template(rf
     i0.ɵɵtemplate(0, MultiSelect_ng_template_14_ng_template_8_li_3_Conditional_2_ng_container_0_Template, 1, 0, "ng-container", 32);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyFilterTemplate || ctx_r1.emptyTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.emptyfilterTemplate || ctx_r1.emptyTemplate);
 } }
 function MultiSelect_ng_template_14_ng_template_8_li_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li", 62);
@@ -900,7 +916,7 @@ function MultiSelect_ng_template_14_ng_template_8_li_3_Template(rf, ctx) { if (r
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c0, scrollerOptions_r21.itemSize + "px"));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.emptyFilterTemplate && !ctx_r1.emptyTemplate ? 1 : 2);
+    i0.ɵɵconditional(!ctx_r1.emptyfilterTemplate && !ctx_r1.emptyTemplate ? 1 : 2);
 } }
 function MultiSelect_ng_template_14_ng_template_8_li_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
@@ -1011,8 +1027,8 @@ class MultiSelectItem extends BaseComponent {
     ariaSetSize;
     variant;
     template;
-    checkIconTemplate;
-    itemCheckboxIconTemplate;
+    checkiconTemplate;
+    itemcheckboxiconTemplate;
     onClick = new EventEmitter();
     onMouseEnter = new EventEmitter();
     onOptionClick(event) {
@@ -1032,7 +1048,7 @@ class MultiSelectItem extends BaseComponent {
         });
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵMultiSelectItem_BaseFactory; return function MultiSelectItem_Factory(__ngFactoryType__) { return (ɵMultiSelectItem_BaseFactory || (ɵMultiSelectItem_BaseFactory = i0.ɵɵgetInheritedFactory(MultiSelectItem)))(__ngFactoryType__ || MultiSelectItem); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MultiSelectItem, selectors: [["p-multiSelectItem"], ["p-multiselect-item"]], inputs: { id: "id", option: "option", selected: [2, "selected", "selected", booleanAttribute], label: "label", disabled: [2, "disabled", "disabled", booleanAttribute], itemSize: [2, "itemSize", "itemSize", numberAttribute], focused: [2, "focused", "focused", booleanAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", variant: "variant", template: "template", checkIconTemplate: "checkIconTemplate", itemCheckboxIconTemplate: "itemCheckboxIconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 5, vars: 26, consts: [["icon", ""], ["pRipple", "", "role", "option", 3, "click", "mouseenter", "ngStyle", "ngClass", "id"], [3, "ngModel", "binary", "tabindex", "variant"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function MultiSelectItem_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MultiSelectItem, selectors: [["p-multiSelectItem"], ["p-multiselect-item"]], inputs: { id: "id", option: "option", selected: [2, "selected", "selected", booleanAttribute], label: "label", disabled: [2, "disabled", "disabled", booleanAttribute], itemSize: [2, "itemSize", "itemSize", numberAttribute], focused: [2, "focused", "focused", booleanAttribute], ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", variant: "variant", template: "template", checkiconTemplate: "checkiconTemplate", itemcheckboxiconTemplate: "itemcheckboxiconTemplate" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 5, vars: 26, consts: [["icon", ""], ["pRipple", "", "role", "option", 3, "click", "mouseenter", "ngStyle", "ngClass", "id"], [3, "ngModel", "binary", "tabindex", "variant"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function MultiSelectItem_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "li", 1);
             i0.ɵɵlistener("click", function MultiSelectItem_Template_li_click_0_listener($event) { return ctx.onOptionClick($event); })("mouseenter", function MultiSelectItem_Template_li_mouseenter_0_listener($event) { return ctx.onOptionMouseEnter($event); });
             i0.ɵɵelementStart(1, "p-checkbox", 2);
@@ -1046,7 +1062,7 @@ class MultiSelectItem extends BaseComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngModel", ctx.selected)("binary", true)("tabindex", -1)("variant", ctx.variant);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.itemCheckboxIconTemplate);
+            i0.ɵɵproperty("ngIf", ctx.itemcheckboxiconTemplate);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.template);
             i0.ɵɵadvance();
@@ -1082,9 +1098,9 @@ class MultiSelectItem extends BaseComponent {
             (mouseenter)="onOptionMouseEnter($event)"
         >
             <p-checkbox [ngModel]="selected" [binary]="true" [tabindex]="-1" [variant]="variant">
-                <ng-container *ngIf="itemCheckboxIconTemplate">
+                <ng-container *ngIf="itemcheckboxiconTemplate">
                     <ng-template #icon let-class="class">
-                        <ng-template *ngTemplateOutlet="itemCheckboxIconTemplate; context: { checked: selected, class: class }"></ng-template>
+                        <ng-template *ngTemplateOutlet="itemcheckboxiconTemplate; context: { checked: selected, class: class }"></ng-template>
                     </ng-template>
                 </ng-container>
             </p-checkbox>
@@ -1120,9 +1136,9 @@ class MultiSelectItem extends BaseComponent {
             type: Input
         }], template: [{
             type: Input
-        }], checkIconTemplate: [{
+        }], checkiconTemplate: [{
             type: Input
-        }], itemCheckboxIconTemplate: [{
+        }], itemcheckboxiconTemplate: [{
             type: Input
         }], onClick: [{
             type: Output
@@ -1575,7 +1591,7 @@ class MultiSelect extends BaseComponent {
      * Whether to focus on the first visible or selected element when the overlay panel is shown.
      * @group Props
      */
-    autoOptionFocus = true;
+    autoOptionFocus = false;
     /**
      * Callback to invoke when value changes.
      * @param {MultiSelectChangeEvent} event - Custom change event.
@@ -1675,18 +1691,21 @@ class MultiSelect extends BaseComponent {
     headerTemplate;
     filterTemplate;
     footerTemplate;
-    emptyFilterTemplate;
+    emptyfilterTemplate;
     emptyTemplate;
-    selectedItemsTemplate;
-    checkIconTemplate;
-    loadingIconTemplate;
-    filterIconTemplate;
-    removeTokenIconTemplate;
-    chipIconTemplate;
-    clearIconTemplate;
-    dropdownIconTemplate;
-    itemCheckboxIconTemplate;
-    headerCheckboxIconTemplate;
+    selecteditemsTemplate;
+    checkiconTemplate;
+    loadingiconTemplate;
+    filtericonTemplate;
+    removetokeniconTemplate;
+    chipiconTemplate;
+    cleariconTemplate;
+    dropdowniconTemplate;
+    itemcheckboxiconTemplate;
+    headercheckboxiconTemplate;
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+    }
     headerCheckboxFocus;
     filterOptions;
     preventModelTouched;
@@ -1844,70 +1863,6 @@ class MultiSelect extends BaseComponent {
     maxSelectionLimitReached() {
         return this.selectionLimit && this.modelValue() && this.modelValue().length === this.selectionLimit;
     }
-    ngAfterContentInit() {
-        this.templates.forEach((item) => {
-            switch (item.getType()) {
-                case 'item':
-                    this.itemTemplate = item.template;
-                    break;
-                case 'group':
-                    this.groupTemplate = item.template;
-                    break;
-                case 'selectedItems':
-                    this.selectedItemsTemplate = item.template;
-                    break;
-                case 'header':
-                    this.headerTemplate = item.template;
-                    break;
-                case 'filter':
-                    this.filterTemplate = item.template;
-                    break;
-                case 'emptyfilter':
-                    this.emptyFilterTemplate = item.template;
-                    break;
-                case 'empty':
-                    this.emptyTemplate = item.template;
-                    break;
-                case 'footer':
-                    this.footerTemplate = item.template;
-                    break;
-                case 'loader':
-                    this.loaderTemplate = item.template;
-                    break;
-                case 'checkicon':
-                    this.checkIconTemplate = item.template;
-                    console.log('checkicon is deprecated and will removed in v18. Use itemcheckboxicon or headercheckboxicon templates instead.');
-                    break;
-                case 'headercheckboxicon':
-                    this.headerCheckboxIconTemplate = item.template;
-                    break;
-                case 'loadingicon':
-                    this.loadingIconTemplate = item.template;
-                    break;
-                case 'filtericon':
-                    this.filterIconTemplate = item.template;
-                    break;
-                case 'removetokenicon':
-                    this.removeTokenIconTemplate = item.template;
-                    break;
-                case 'chipicon':
-                    this.chipIconTemplate = item.template;
-                    break;
-                case 'clearicon':
-                    this.clearIconTemplate = item.template;
-                    break;
-                case 'dropdownicon':
-                    this.dropdownIconTemplate = item.template;
-                    break;
-                case 'itemcheckboxicon':
-                    this.itemCheckboxIconTemplate = item.template;
-                    break;
-                default:
-                    this.itemTemplate = item.template;
-                    break;
-            }
-        });
-    }
     ngAfterViewInit() {
         super.ngOnInit();
         if (this.overlayVisible) {
@@ -2478,7 +2433,7 @@ class MultiSelect extends BaseComponent {
      */
     show(isFocus) {
         this.overlayVisible = true;
-        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex();
         this.focusedOptionIndex.set(focusedOptionIndex);
         if (isFocus) {
             focus(this.focusInputViewChild?.nativeElement);
@@ -2674,19 +2629,55 @@ class MultiSelect extends BaseComponent {
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MultiSelect, selectors: [["p-multiSelect"], ["p-multiselect"], ["p-multi-select"]], contentQueries: function MultiSelect_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, Footer, 5);
             i0.ɵɵcontentQuery(dirIndex, Header, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c4, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c5, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c6, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c7, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c8, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c9, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c10, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c11, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c12, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c13, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c14, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c15, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c16, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c17, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c18, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c19, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c20, 5);
+            i0.ɵɵcontentQuery(dirIndex, _c21, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerFacet = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerFacet = _t.first);
+            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.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.emptyTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selecteditemsTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.checkiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filtericonTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.removetokeniconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.chipiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.cleariconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdowniconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.itemcheckboxiconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headercheckboxiconTemplate = _t.first);
         } }, viewQuery: function MultiSelect_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c4, 5);
-            i0.ɵɵviewQuery(_c5, 5);
-            i0.ɵɵviewQuery(_c6, 5);
-            i0.ɵɵviewQuery(_c7, 5);
-            i0.ɵɵviewQuery(_c8, 5);
-            i0.ɵɵviewQuery(_c9, 5);
-            i0.ɵɵviewQuery(_c10, 5);
-            i0.ɵɵviewQuery(_c11, 5);
+            i0.ɵɵviewQuery(_c22, 5);
+            i0.ɵɵviewQuery(_c23, 5);
+            i0.ɵɵviewQuery(_c24, 5);
+            i0.ɵɵviewQuery(_c25, 5);
+            i0.ɵɵviewQuery(_c26, 5);
+            i0.ɵɵviewQuery(_c27, 5);
+            i0.ɵɵviewQuery(_c28, 5);
+            i0.ɵɵviewQuery(_c29, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayViewChild = _t.first);
@@ -2703,9 +2694,9 @@ class MultiSelect extends BaseComponent {
             i0.ɵɵattribute("id", ctx.id);
             i0.ɵɵstyleMap(ctx.style);
             i0.ɵɵclassMap(ctx.hostClasses);
-        } }, inputs: { id: "id", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: [2, "disabled", "disabled", booleanAttribute], fluid: [2, "fluid", "fluid", booleanAttribute], readonly: [2, "readonly", "readonly", booleanAttribute], group: [2, "group", "group", booleanAttribute], filter: [2, "filter", "filter", booleanAttribute], filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: [2, "overlayVisible", "overlayVisible", booleanAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], variant: "variant", appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: [2, "selectionLimit", "selectionLimit", numberAttribute], selectedItemsLabel: "selectedItemsLabel", showToggleAll: [2, "showToggleAll", "showToggleAll", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: [2, "resetFilterOnHide", "resetFilterOnHide", booleanAttribute], dropdownIcon: "dropdownIcon", chipIcon: "chipIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: [2, "showHeader", "showHeader", booleanAttribute], filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: [2, "lazy", "lazy", booleanAttribute], virtualScroll: [2, "virtualScroll", "virtualScroll", booleanAttribute], loading: [2, "loading", "loading", booleanAttribute], virtualScrollItemSize: [2, "virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], loadingIcon: "loadingIcon", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: [2, "autofocusFilter", "autofocusFilter", booleanAttribute], display: "display", autocomplete: "autocomplete", size: "size", showClear: [2, "showClear", "showClear", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], filterFields: "filterFields", selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute] }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onClear: "onClear", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide", onLazyLoad: "onLazyLoad", onRemove: "onRemove", onSelectAllChange: "onSelectAllChange" }, standalone: true, features: [i0.ɵɵProvidersFeature([MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], ngContentSelectors: _c13, decls: 16, vars: 38, consts: [["focusInput", ""], ["elseBlock", ""], ["overlay", ""], ["content", ""], ["token", ""], ["removeicon", ""], ["firstHiddenFocusableEl", ""], ["buildInItems", ""], ["lastHiddenFocusableEl", ""], ["builtInFilterElement", ""], ["headerCheckbox", ""], ["icon", ""], ["filterInput", ""], ["scroller", ""], ["loader", ""], ["items", ""], [1, "p-hidden-accessible"], ["role", "combobox", 3, "focus", "blur", "keydown", "pTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "pAutoFocus"], [1, "p-multiselect-label-container", 3, "mouseleave", "pTooltip", "tooltipDisabled", "tooltipPosition", "positionStyle", "tooltipStyleClass"], [3, "ngClass"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-multiselect-dropdown"], [4, "ngIf", "ngIfElse"], [3, "visibleChange", "onAnimationStart", "onHide", "visible", "options", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], ["class", "p-multiselect-chip-item", 4, "ngFor", "ngForOf"], [1, "p-multiselect-chip-item"], ["styleClass", "p-multiselect-chip", 3, "onRemove", "label", "removable", "removeIcon"], ["class", "p-multiselect-chip-icon", 3, "click", 4, "ngIf"], [1, "p-multiselect-chip-icon", 3, "click"], ["class", "p-multiselect-clear-icon", 3, "click", 4, "ngIf"], [1, "p-multiselect-clear-icon", 3, "click"], [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-multiselect-dropdown-icon", 4, "ngIf"], ["class", "p-multiselect-dropdown-icon", 3, "ngClass", 4, "ngIf"], [3, "styleClass", 4, "ngIf"], [1, "p-multiselect-dropdown-icon", 3, "ngClass"], [3, "styleClass"], [1, "p-multiselect-dropdown-icon"], [3, "ngClass", "ngStyle"], ["role", "presentation", 1, "p-hidden-accessible", "p-hidden-focusable", 3, "focus"], ["class", "p-multiselect-header", 4, "ngIf"], [1, "p-multiselect-list-container"], [3, "items", "style", "itemSize", "autoSize", "tabindex", "lazy", "options", "onLazyLoad", 4, "ngIf"], [1, "p-multiselect-header"], [3, "ngModel", "binary", "variant", "disabled", "onChange", 4, "ngIf"], ["class", "p-multiselect-filter-container", 4, "ngIf"], [3, "onChange", "ngModel", "binary", "variant", "disabled"], [1, "p-multiselect-filter-container"], ["pInputText", "", "type", "text", "role", "searchbox", 1, "p-multiselect-filter", 3, "input", "keydown", "click", "blur", "variant", "value", "disabled"], ["class", "p-multiselect-filter-icon", 4, "ngIf"], [1, "p-multiselect-filter-icon"], [3, "onLazyLoad", "items", "itemSize", "autoSize", "tabindex", "lazy", "options"], ["role", "listbox", "aria-multiselectable", "true", 1, "p-multiselect-list", 3, "ngClass"], ["ngFor", "", 3, "ngForOf"], ["class", "p-multiselect-empty-message", "role", "option", 3, "ngStyle", 4, "ngIf"], ["role", "option", 1, "p-multiselect-option-group", 3, "ngStyle"], [3, "onClick", "onMouseEnter", "id", "option", "selected", "label", "disabled", "template", "checkIconTemplate", "itemCheckboxIconTemplate", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "variant"], ["role", "option", 1, "p-multiselect-empty-message", 3, "ngStyle"]], template: function MultiSelect_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { id: "id", ariaLabel: "ariaLabel", style: "style", styleClass: "styleClass", panelStyle: "panelStyle", panelStyleClass: "panelStyleClass", inputId: "inputId", disabled: [2, "disabled", "disabled", booleanAttribute], fluid: [2, "fluid", "fluid", booleanAttribute], readonly: [2, "readonly", "readonly", booleanAttribute], group: [2, "group", "group", booleanAttribute], filter: [2, "filter", "filter", booleanAttribute], filterPlaceHolder: "filterPlaceHolder", filterLocale: "filterLocale", overlayVisible: [2, "overlayVisible", "overlayVisible", booleanAttribute], tabindex: [2, "tabindex", "tabindex", numberAttribute], variant: "variant", appendTo: "appendTo", dataKey: "dataKey", name: "name", ariaLabelledBy: "ariaLabelledBy", displaySelectedLabel: "displaySelectedLabel", maxSelectedLabels: "maxSelectedLabels", selectionLimit: [2, "selectionLimit", "selectionLimit", numberAttribute], selectedItemsLabel: "selectedItemsLabel", showToggleAll: [2, "showToggleAll", "showToggleAll", booleanAttribute], emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", resetFilterOnHide: [2, "resetFilterOnHide", "resetFilterOnHide", booleanAttribute], dropdownIcon: "dropdownIcon", chipIcon: "chipIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", showHeader: [2, "showHeader", "showHeader", booleanAttribute], filterBy: "filterBy", scrollHeight: "scrollHeight", lazy: [2, "lazy", "lazy", booleanAttribute], virtualScroll: [2, "virtualScroll", "virtualScroll", booleanAttribute], loading: [2, "loading", "loading", booleanAttribute], virtualScrollItemSize: [2, "virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], loadingIcon: "loadingIcon", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", filterMatchMode: "filterMatchMode", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: [2, "autofocusFilter", "autofocusFilter", booleanAttribute], display: "display", autocomplete: "autocomplete", size: "size", showClear: [2, "showClear", "showClear", booleanAttribute], autofocus: [2, "autofocus", "autofocus", booleanAttribute], autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", defaultLabel: "defaultLabel", placeholder: "placeholder", options: "options", filterValue: "filterValue", itemSize: "itemSize", selectAll: "selectAll", focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], filterFields: "filterFields", selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute] }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onClear: "onClear", onPanelShow: "onPanelShow", onPanelHide: "onPanelHide", onLazyLoad: "onLazyLoad", onRemove: "onRemove", onSelectAllChange: "onSelectAllChange" }, standalone: true, features: [i0.ɵɵProvidersFeature([MULTISELECT_VALUE_ACCESSOR, MultiSelectStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], ngContentSelectors: _c31, decls: 16, vars: 39, consts: [["focusInput", ""], ["elseBlock", ""], ["overlay", ""], ["content", ""], ["token", ""], ["removeicon", ""], ["firstHiddenFocusableEl", ""], ["buildInItems", ""], ["lastHiddenFocusableEl", ""], ["builtInFilterElement", ""], ["headerCheckbox", ""], ["checkboxicon", ""], ["filterInput", ""], ["scroller", ""], ["loader", ""], ["items", ""], [1, "p-hidden-accessible"], ["role", "combobox", 3, "focus", "blur", "keydown", "pTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "pAutoFocus"], [1, "p-multiselect-label-container", 3, "mouseleave", "pTooltip", "tooltipDisabled", "tooltipPosition", "positionStyle", "tooltipStyleClass"], [3, "ngClass"], [4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-multiselect-dropdown"], [4, "ngIf", "ngIfElse"], [3, "visibleChange", "onAnimationStart", "onHide", "visible", "options", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions"], ["class", "p-multiselect-chip-item", 4, "ngFor", "ngForOf"], [1, "p-multiselect-chip-item"], ["styleClass", "p-multiselect-chip", 3, "onRemove", "label", "removable", "removeIcon"], ["class", "p-multiselect-chip-icon", 3, "click", 4, "ngIf"], [1, "p-multiselect-chip-icon", 3, "click"], ["class", "p-multiselect-clear-icon", 3, "click", 4, "ngIf"], [1, "p-multiselect-clear-icon", 3, "click"], [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-multiselect-dropdown-icon", 4, "ngIf"], ["class", "p-multiselect-dropdown-icon", 3, "ngClass", 4, "ngIf"], [3, "styleClass", 4, "ngIf"], [1, "p-multiselect-dropdown-icon", 3, "ngClass"], [3, "styleClass"], [1, "p-multiselect-dropdown-icon"], [3, "ngClass", "ngStyle"], ["role", "presentation", 1, "p-hidden-accessible", "p-hidden-focusable", 3, "focus"], ["class", "p-multiselect-header", 4, "ngIf"], [1, "p-multiselect-list-container"], [3, "items", "style", "itemSize", "autoSize", "tabindex", "lazy", "options", "onLazyLoad", 4, "ngIf"], [1, "p-multiselect-header"], [3, "ngModel", "binary", "variant", "disabled", "onChange", 4, "ngIf"], ["class", "p-multiselect-filter-container", 4, "ngIf"], [3, "onChange", "ngModel", "binary", "variant", "disabled"], [1, "p-multiselect-filter-container"], ["pInputText", "", "type", "text", "role", "searchbox", 1, "p-multiselect-filter", 3, "input", "keydown", "click", "blur", "variant", "value", "disabled"], ["class", "p-multiselect-filter-icon", 4, "ngIf"], [1, "p-multiselect-filter-icon"], [3, "onLazyLoad", "items", "itemSize", "autoSize", "tabindex", "lazy", "options"], ["role", "listbox", "aria-multiselectable", "true", 1, "p-multiselect-list", 3, "ngClass"], ["ngFor", "", 3, "ngForOf"], ["class", "p-multiselect-empty-message", "role", "option", 3, "ngStyle", 4, "ngIf"], ["role", "option", 1, "p-multiselect-option-group", 3, "ngStyle"], [3, "onClick", "onMouseEnter", "id", "option", "selected", "label", "disabled", "template", "checkiconTemplate", "itemcheckboxiconTemplate", "itemSize", "focused", "ariaPosInset", "ariaSetSize", "variant"], ["role", "option", 1, "p-multiselect-empty-message", 3, "ngStyle"]], template: function MultiSelect_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵprojectionDef(_c12);
+            i0.ɵɵprojectionDef(_c30);
             i0.ɵɵelementStart(0, "div", 16)(1, "input", 17, 0);
             i0.ɵɵlistener("focus", function MultiSelect_Template_input_focus_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputFocus($event)); })("blur", function MultiSelect_Template_input_blur_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onInputBlur($event)); })("keydown", function MultiSelect_Template_input_keydown_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeyDown($event)); });
             i0.ɵɵelementEnd()();
@@ -2729,15 +2720,15 @@ class MultiSelect extends BaseComponent {
             i0.ɵɵattribute("data-p-hidden-accessible", true);
             i0.ɵɵadvance();
             i0.ɵɵproperty("pTooltip", ctx.tooltip)("tooltipPosition", ctx.tooltipPosition)("positionStyle", ctx.tooltipPositionStyle)("tooltipStyleClass", ctx.tooltipStyleClass)("pAutoFocus", ctx.autofocus);
-            i0.ɵɵattribute("aria-disabled", ctx.disabled)("id", ctx.inputId)("aria-label", ctx.ariaLabel)("aria-labelledby", ctx.ariaLabelledBy)("aria-haspopup", "listbox")("aria-expanded", (tmp_15_0 = ctx.overlayVisible) !== null && tmp_15_0 !== undefined ? tmp_15_0 : false)("aria-controls", ctx.overlayVisible ? ctx.id + "_list" : null)("tabindex", !ctx.disabled ? ctx.tabindex : -1)("aria-activedescendant", ctx.focused ? ctx.focusedOptionId : undefined);
+            i0.ɵɵattribute("aria-disabled", ctx.disabled)("id", ctx.inputId)("aria-label", ctx.ariaLabel)("aria-labelledby", ctx.ariaLabelledBy)("aria-haspopup", "listbox")("aria-expanded", (tmp_15_0 = ctx.overlayVisible) !== null && tmp_15_0 !== undefined ? tmp_15_0 : false)("aria-controls", ctx.overlayVisible ? ctx.id + "_list" : null)("tabindex", !ctx.disabled ? ctx.tabindex : -1)("aria-activedescendant", ctx.focused ? ctx.focusedOptionId : undefined)("value", ctx.label() || "empty");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("pTooltip", ctx.tooltip)("tooltipDisabled", ctx._disableTooltip)("tooltipPosition", ctx.tooltipPosition)("positionStyle", ctx.tooltipPositionStyle)("tooltipStyleClass", ctx.tooltipStyleClass);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", ctx.labelClass);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.selectedItemsTemplate);
+            i0.ɵɵproperty("ngIf", !ctx.selecteditemsTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngTemplateOutlet", ctx.selectedItemsTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(35, _c14, ctx.selectedOptions, ctx.removeOption.bind(ctx)));
+            i0.ɵɵproperty("ngTemplateOutlet", ctx.selecteditemsTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(36, _c32, ctx.selectedOptions, ctx.removeOption.bind(ctx)));
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.isVisibleClearIcon);
             i0.ɵɵadvance(2);
@@ -2745,50 +2736,14 @@ class MultiSelect extends BaseComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵtwoWayProperty("visible", ctx.overlayVisible);
             i0.ɵɵproperty("options", ctx.overlayOptions)("target", "@parent")("appendTo", ctx.appendTo)("autoZIndex", ctx.autoZIndex)("baseZIndex", ctx.baseZIndex)("showTransitionOptions", ctx.showTransitionOptions)("hideTransitionOptions", ctx.hideTransitionOptions);
-        } }, dependencies: [CommonModule, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, MultiSelectItem, Overlay,
-            SharedModule,
-            Tooltip,
-            Scroller,
-            AutoFocus,
-            CheckIcon,
-            SearchIcon,
-            TimesIcon,
-            ChevronDownIcon,
-            IconField,
-            InputIcon,
-            InputText,
-            Chip,
-            Checkbox,
-            FormsModule, i2.NgControlStatus, i2.NgModel], encapsulation: 2, changeDetection: 0 });
+        } }, dependencies: [CommonModule, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, MultiSelectItem, Overlay, SharedModule, Tooltip, Scroller, AutoFocus, CheckIcon, SearchIcon, TimesIcon, ChevronDownIcon, IconField, InputIcon, InputText, Chip, Checkbox, FormsModule, i2.NgControlStatus, i2.NgModel], encapsulation: 2, changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MultiSelect, [{
         type: Component,
         args: [{
                 selector: 'p-multiSelect, p-multiselect, p-multi-select',
                 standalone: true,
-                imports: [
-                    CommonModule,
-                    MultiSelectItem,
-                    Overlay,
-                    SharedModule,
-                    Tooltip,
-                    Ripple,
-                    Scroller,
-                    AutoFocus,
-                    CheckIcon,
-                    SearchIcon,
-                    TimesCircleIcon,
-                    TimesIcon,
-                    ChevronDownIcon,
-                    CheckIcon,
-                    MinusIcon,
-                    IconField,
-                    InputIcon,
-                    InputText,
-                    Chip,
-                    Checkbox,
-                    FormsModule
-                ],
+                imports: [CommonModule, MultiSelectItem, Overlay, SharedModule, Tooltip, Ripple, Scroller, AutoFocus, CheckIcon, SearchIcon, TimesCircleIcon, TimesIcon, ChevronDownIcon, MinusIcon, IconField, InputIcon, InputText, Chip, Checkbox, FormsModule],
                 template: `
         <div class="p-hidden-accessible" [attr.data-p-hidden-accessible]="true">
             <input
@@ -2811,6 +2766,7 @@ class MultiSelect extends BaseComponent {
                 (blur)="onInputBlur($event)"
                 (keydown)="onKeyDown($event)"
                 [pAutoFocus]="autofocus"
+                [attr.value]="label() || 'empty'"
             />
         </div>
         <div
@@ -2823,16 +2779,16 @@ class MultiSelect extends BaseComponent {
             [tooltipStyleClass]="tooltipStyleClass"
         >
             <div [ngClass]="labelClass">
-                <ng-container *ngIf="!selectedItemsTemplate">
+                <ng-container *ngIf="!selecteditemsTemplate">
                     <ng-container *ngIf="display === 'comma'">{{ label() || 'empty' }}</ng-container>
                     <ng-container *ngIf="display === 'chip'">
                         <div #token *ngFor="let item of chipSelectedItems(); let i = index" class="p-multiselect-chip-item">
                             <p-chip styleClass="p-multiselect-chip" [label]="getLabelByValue(item)" [removable]="true" (onRemove)="removeOption(item, $event)" [removeIcon]="chipIcon">
-                                <ng-container *ngIf="chipIconTemplate || removeTokenIconTemplate">
+                                <ng-container *ngIf="chipiconTemplate || removetokeniconTemplate">
                                     <ng-template #removeicon>
                                         <ng-container *ngIf="!disabled">
-                                            <span class="p-multiselect-chip-icon" *ngIf="chipIconTemplate || removeTokenIconTemplate" (click)="removeOption(item, $event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
-                                                <ng-container *ngTemplateOutlet="chipIconTemplate || removeTokenIconTemplate; context: { class: 'p-multiselect-chip-icon' }"></ng-container>
+                                            <span class="p-multiselect-chip-icon" *ngIf="chipiconTemplate || removetokeniconTemplate" (click)="removeOption(item, $event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
+                                                <ng-container *ngTemplateOutlet="chipiconTemplate || removetokeniconTemplate; context: { class: 'p-multiselect-chip-icon' }"></ng-container>
                                             </span>
                                         </ng-container>
                                     </ng-template>
@@ -2842,32 +2798,32 @@ class MultiSelect extends BaseComponent {
                         <ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder() || defaultLabel || 'empty' }}</ng-container>
                     </ng-container>
                 </ng-container>
-                <ng-container *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }"></ng-container>
+                <ng-container *ngTemplateOutlet="selecteditemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }"></ng-container>
             </div>
         </div>
         <ng-container *ngIf="isVisibleClearIcon">
-            <TimesIcon *ngIf="!clearIconTemplate" class="p-multiselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
-            <span *ngIf="clearIconTemplate" class="p-multiselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
-                <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
+            <TimesIcon *ngIf="!cleariconTemplate" class="p-multiselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
+            <span *ngIf="cleariconTemplate" class="p-multiselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
+                <ng-template *ngTemplateOutlet="cleariconTemplate"></ng-template>
             </span>
         </ng-container>
         <div class="p-multiselect-dropdown">
             <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-multiselect-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
                     <span *ngIf="!loadingIcon" [class]="'p-multiselect-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 *ngIf="dropdownIcon" class="p-multiselect-dropdown-icon" [ngClass]="dropdownIcon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true"></span>
                     <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="'p-multiselect-dropdown-icon'" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true" />
                 </ng-container>
-                <span *ngIf="dropdownIconTemplate" class="p-multiselect-dropdown-icon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
-                    <ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
+                <span *ngIf="dropdowniconTemplate" class="p-multiselect-dropdown-icon" [attr.data-pc-section]="'triggericon'" [attr.aria-hidden]="true">
+                    <ng-template *ngTemplateOutlet="dropdowniconTemplate"></ng-template>
                 </span>
             </ng-template>
         </div>
@@ -2904,11 +2860,11 @@ class MultiSelect extends BaseComponent {
                         </ng-container>
                         <ng-template #builtInFilterElement>
                             <p-checkbox [ngModel]="allSelected()" [binary]="true" (onChange)="onToggleAll($event)" *ngIf="showToggleAll && !selectionLimit" [variant]="variant" [disabled]="disabled" #headerCheckbox>
-                                <ng-template #icon let-class="class">
-                                    <CheckIcon *ngIf="!headerCheckboxIconTemplate && allSelected()" [styleClass]="class" [attr.data-pc-section]="'icon'" />
+                                <ng-template #checkboxicon let-class="class">
+                                    <CheckIcon *ngIf="!headercheckboxiconTemplate && allSelected()" [styleClass]="class" [attr.data-pc-section]="'icon'" />
                                     <ng-template
                                         *ngTemplateOutlet="
-                                            headerCheckboxIconTemplate;
+                                            headercheckboxiconTemplate;
                                             context: {
                                                 checked: allSelected(),
                                                 partialSelected: partialSelected(),
@@ -2941,9 +2897,9 @@ class MultiSelect extends BaseComponent {
                                         [attr.aria-label]="ariaFilterLabel"
                                     />
                                     <p-inputicon>
-                                        <SearchIcon [styleClass]="'p-multiselect-filter-icon'" *ngIf="!filterIconTemplate" />
-                                        <span *ngIf="filterIconTemplate" class="p-multiselect-filter-icon">
-                                            <ng-template *ngTemplateOutlet="filterIconTemplate"></ng-template>
+                                        <SearchIcon [styleClass]="'p-multiselect-filter-icon'" *ngIf="!filtericonTemplate" />
+                                        <span *ngIf="filtericonTemplate" class="p-multiselect-filter-icon">
+                                            <ng-template *ngTemplateOutlet="filtericonTemplate"></ng-template>
                                         </span>
                                     </p-inputicon>
                                 </p-iconfield>
@@ -2993,8 +2949,8 @@ class MultiSelect extends BaseComponent {
                                             [label]="getOptionLabel(option)"
                                             [disabled]="isOptionDisabled(option)"
                                             [template]="itemTemplate"
-                                            [checkIconTemplate]="checkIconTemplate"
-                                            [itemCheckboxIconTemplate]="itemCheckboxIconTemplate"
+                                            [checkiconTemplate]="checkiconTemplate"
+                                            [itemcheckboxiconTemplate]="itemcheckboxiconTemplate"
                                             [itemSize]="scrollerOptions.itemSize"
                                             [focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
                                             [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
@@ -3007,10 +2963,10 @@ class MultiSelect extends BaseComponent {
                                 </ng-template>
 
                                 <li *ngIf="hasFilter() && isEmpty()" class="p-multiselect-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
-                                    @if (!emptyFilterTemplate && !emptyTemplate) {
+                                    @if (!emptyfilterTemplate && !emptyTemplate) {
                                         {{ emptyFilterMessageLabel }}
                                     } @else {
-                                        <ng-container *ngTemplateOutlet="emptyFilterTemplate || emptyTemplate"></ng-container>
+                                        <ng-container *ngTemplateOutlet="emptyfilterTemplate || emptyTemplate"></ng-container>
                                     }
                                 </li>
                                 <li *ngIf="!hasFilter() && isEmpty()" class="p-multiselect-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
@@ -3267,6 +3223,60 @@ class MultiSelect extends BaseComponent {
         }], headerFacet: [{
             type: ContentChild,
             args: [Header]
+        }], itemTemplate: [{
+            type: ContentChild,
+            args: ['item']
+        }], groupTemplate: [{
+            type: ContentChild,
+            args: ['group']
+        }], loaderTemplate: [{
+            type: ContentChild,
+            args: ['loader']
+        }], headerTemplate: [{
+            type: ContentChild,
+            args: ['header']
+        }], filterTemplate: [{
+            type: ContentChild,
+            args: ['filter']
+        }], footerTemplate: [{
+            type: ContentChild,
+            args: ['footer']
+        }], emptyfilterTemplate: [{
+            type: ContentChild,
+            args: ['emptyfilter']
+        }], emptyTemplate: [{
+            type: ContentChild,
+            args: ['empty']
+        }], selecteditemsTemplate: [{
+            type: ContentChild,
+            args: ['selecteditems']
+        }], checkiconTemplate: [{
+            type: ContentChild,
+            args: ['checkicon']
+        }], loadingiconTemplate: [{
+            type: ContentChild,
+            args: ['loadingicon']
+        }], filtericonTemplate: [{
+            type: ContentChild,
+            args: ['filtericon']
+        }], removetokeniconTemplate: [{
+            type: ContentChild,
+            args: ['removetokenicon']
+        }], chipiconTemplate: [{
+            type: ContentChild,
+            args: ['chipicon']
+        }], cleariconTemplate: [{
+            type: ContentChild,
+            args: ['clearicon']
+        }], dropdowniconTemplate: [{
+            type: ContentChild,
+            args: ['dropdownicon']
+        }], itemcheckboxiconTemplate: [{
+            type: ContentChild,
+            args: ['itemcheckboxicon']
+        }], headercheckboxiconTemplate: [{
+            type: ContentChild,
+            args: ['headercheckboxicon']
         }], hostClasses: [{
             type: HostBinding,
             args: ['class']