primeng 18.0.0-rc.1 → 18.0.0-rc.2

package/fesm2022/primeng-cascadeselect.mjs

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, forwardRef, EventEmitter, numberAttribute, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, signal, inject, computed, effect, ViewChild, ContentChild, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { resolveFieldData, isNotEmpty, getOffset, getViewport, getHiddenElementOuterWidth, getOuterWidth, calculateScrollbarWidth, isPrintableCharacter, isEmpty, findSingle, equals, findLastIndex, focus, uuid } from '@primeuix/utils';
+import { resolveFieldData, isNotEmpty, equals, getOffset, getViewport, getHiddenElementOuterWidth, getOuterWidth, calculateScrollbarWidth, isPrintableCharacter, isEmpty, findSingle, findLastIndex, focus, uuid } from '@primeuix/utils';
 import * as i2 from 'primeng/api';
 import { TranslationKeys, SharedModule } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
@@ -27,6 +27,14 @@ const theme = ({ dt }) => `
     box-shadow: ${dt('cascadeselect.shadow')};
 }
 
+p-cascadeselect.ng-invalid.ng-dirty .p-cascadeselect {
+    border-color: ${dt('cascadeselect.invalid.border.color')};
+}
+
+p-cascadeselect.ng-invalid.ng-dirty .p-cascadeselect.p-focus {
+    border-color: ${dt('cascadeselect.focus.border.color')};
+}
+
 .p-cascadeselect:not(.p-disabled):hover {
     border-color: ${dt('cascadeselect.hover.border.color')};
 }
@@ -63,8 +71,8 @@ const theme = ({ dt }) => `
     background: transparent;
     color: ${dt('cascadeselect.dropdown.color')};
     width: ${dt('cascadeselect.dropdown.width')};
-    border-top-right-radius: ${dt('border.radius.md')};
-    border-bottom-right-radius: ${dt('border.radius.md')};
+    border-start-end-radius: ${dt('border.radius.md')};
+    border-end-end-radius: ${dt('border.radius.md')};
 }
 
 .p-cascadeselect-label {
@@ -85,6 +93,10 @@ const theme = ({ dt }) => `
     color: ${dt('cascadeselect.placeholder.color')};
 }
 
+p-cascadeselect.ng-invalid.ng-dirty .p-cascadeselect-label.p-placeholder {
+    color: ${dt('cascadeselect.invalid.placeholder.color')};
+}
+
 .p-cascadeselect.p-disabled .p-cascadeselect-label {
     color: ${dt('cascadeselect.disabled.color')};
 }
@@ -145,52 +157,55 @@ const theme = ({ dt }) => `
 
 .p-cascadeselect-option-active {
     overflow: visible;
+}
+
+.p-cascadeselect-option-active > .p-cascadeselect-option-content {
     background: ${dt('cascadeselect.option.focus.background')};
     color: ${dt('cascadeselect.option.focus.color')};
 }
 
-.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus {
+.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content {
     background: ${dt('cascadeselect.option.focus.background')};
     color: ${dt('cascadeselect.option.focus.color')};
 }
 
-.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
+.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content > .p-cascadeselect-group-icon-container > .p-cascadeselect-group-icon {
     color: ${dt('cascadeselect.option.icon.focus.color')};
 }
 
-.p-cascadeselect-option-selected {
+.p-cascadeselect-option-selected > .p-cascadeselect-option-content {
     background: ${dt('cascadeselect.option.selected.background')};
     color: ${dt('cascadeselect.option.selected.color')};
 }
 
-.p-cascadeselect-option-selected.p-focus {
+.p-cascadeselect-option-selected.p-focus > .p-cascadeselect-option-content {
     background: ${dt('cascadeselect.option.selected.focus.background')};
     color: ${dt('cascadeselect.option.selected.focus.color')};
 }
 
 .p-cascadeselect-option-active > .p-cascadeselect-option-list {
-    display: block;
-    left: 100%;
+    inset-inline-start: 100%;
     top: 0;
 }
 
 .p-cascadeselect-option-content {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     overflow: hidden;
     position: relative;
     padding: ${dt('cascadeselect.option.padding')};
+    border-radius: ${dt('cascadeselect.option.border.radius')};
+    transition: background ${dt('cascadeselect.transition.duration')}, color ${dt('cascadeselect.transition.duration')}, border-color ${dt('cascadeselect.transition.duration')}, box-shadow ${dt('cascadeselect.transition.duration')}, outline-color ${dt('cascadeselect.transition.duration')};
 }
 
 .p-cascadeselect-group-icon {
-    margin-left: auto;
     font-size: ${dt('cascadeselect.option.icon.size')};
     width: ${dt('cascadeselect.option.icon.size')};
     height: ${dt('cascadeselect.option.icon.size')};
     color: ${dt('cascadeselect.option.icon.color')};
 }
 
-
 .p-cascadeselect-group-icon:dir(rtl) {
     transform: rotate(180deg);
 }
@@ -199,7 +214,7 @@ const theme = ({ dt }) => `
     position: static;
     box-shadow: none;
     border: 0 none;
-    padding-inline-start: ${dt('tieredmenu.submenu.mobile.indent')};
+    padding-inline-start: 1rem;
     padding-inline-end: 0;
 }
 
@@ -245,14 +260,6 @@ const theme = ({ dt }) => `
     flex-shrink: 0;
     background: transparent;
     color: ${dt('cascadeselect.clear.icon.color')};
-}
-
-p-cascadeselect.ng-invalid.ng-dirty > .p-inputwrapper {
-    border-color: ${dt('cascadeselect.invalid.border.color')};
-}
-
-p-cascadeselect.ng-invalid.ng-dirty > .p-inputwrapper > .p-cascadeselect-label.p-placeholder {
-    color: ${dt('cascadeselect.invalid.placeholder.color')};
 }`;
 const inlineStyles = {
     root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
@@ -261,6 +268,7 @@ const classes = {
     root: ({ instance, props }) => [
         'p-cascadeselect p-component p-inputwrapper',
         {
+            'p-cascadeselect-mobile': instance.queryMatches(),
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.config.inputStyle === 'filled' || instance.config.inputVariant === 'filled',
@@ -268,7 +276,9 @@ const classes = {
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
             'p-cascadeselect-open': instance.overlayVisible,
-            'p-cascadeselect-fluid': props.fluid
+            'p-cascadeselect-fluid': props.fluid,
+            'p-cascadeselect-sm p-inputfield-sm': props.size === 'small',
+            'p-cascadeselect-lg p-inputfield-lg': props.size === 'large'
         }
     ],
     label: ({ instance, props }) => [
@@ -281,7 +291,12 @@ const classes = {
     dropdown: 'p-cascadeselect-dropdown',
     loadingIcon: 'p-cascadeselect-loading-icon',
     dropdownIcon: 'p-cascadeselect-dropdown-icon',
-    overlay: 'p-cascadeselect-overlay p-component',
+    overlay: ({ instance }) => [
+        'p-cascadeselect-overlay p-component',
+        {
+            'p-cascadeselect-mobile-active': instance.queryMatches()
+        }
+    ],
     listContainer: 'p-cascadeselect-list-container',
     list: 'p-cascadeselect-list',
     option: ({ instance, processedOption }) => [
@@ -414,14 +429,14 @@ function CascadeSelectSub_ng_template_1_span_5_Template(rf, ctx) { if (rf & 1) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵattribute("data-pc-section", "groupIcon");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.groupIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r2.groupicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.groupIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r2.groupicon);
 } }
 function CascadeSelectSub_ng_template_1_p_cascadeselect_sub_6_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "p-cascadeselect-sub", 13);
-    i0.ɵɵlistener("onChange", function CascadeSelectSub_ng_template_1_p_cascadeselect_sub_6_Template_p_cascadeselect_sub_onChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onOptionChange($event)); });
+    i0.ɵɵlistener("onChange", function CascadeSelectSub_ng_template_1_p_cascadeselect_sub_6_Template_p_cascadeselect_sub_onChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onChange.emit($event)); })("onFocusChange", function CascadeSelectSub_ng_template_1_p_cascadeselect_sub_6_Template_p_cascadeselect_sub_onFocusChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onFocusChange.emit($event)); })("onFocusEnterChange", function CascadeSelectSub_ng_template_1_p_cascadeselect_sub_6_Template_p_cascadeselect_sub_onFocusEnterChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onFocusEnterChange.emit($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const processedOption_r2 = i0.ɵɵnextContext().$implicit;
@@ -431,7 +446,7 @@ function CascadeSelectSub_ng_template_1_p_cascadeselect_sub_6_Template(rf, ctx)
 function CascadeSelectSub_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 3)(1, "div", 4);
-    i0.ɵɵlistener("click", function CascadeSelectSub_ng_template_1_Template_div_click_1_listener($event) { const processedOption_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOptionClick($event, processedOption_r2)); });
+    i0.ɵɵlistener("click", function CascadeSelectSub_ng_template_1_Template_div_click_1_listener($event) { const processedOption_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOptionClick($event, processedOption_r2)); })("mouseenter", function CascadeSelectSub_ng_template_1_Template_div_mouseenter_1_listener($event) { const processedOption_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOptionMouseEnter($event, processedOption_r2)); })("mousemove", function CascadeSelectSub_ng_template_1_Template_div_mousemove_1_listener($event) { const processedOption_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onOptionMouseMove($event, processedOption_r2)); });
     i0.ɵɵtemplate(2, CascadeSelectSub_ng_template_1_ng_container_2_Template, 2, 4, "ng-container", 5)(3, CascadeSelectSub_ng_template_1_ng_template_3_Template, 2, 2, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(5, CascadeSelectSub_ng_template_1_span_5_Template, 3, 3, "span", 6);
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(6, CascadeSelectSub_ng_template_1_p_cascadeselect_sub_6_Template, 1, 12, "p-cascadeselect-sub", 7);
@@ -444,7 +459,7 @@ function CascadeSelectSub_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngClass", ctx_r2.getItemClass(processedOption_r2))("id", ctx_r2.getOptionId(processedOption_r2));
     i0.ɵɵattribute("aria-level", ctx_r2.level + 1)("aria-setsize", ctx_r2.options.length)("data-pc-section", "item")("aria-label", ctx_r2.getOptionLabelToRender(processedOption_r2))("aria-selected", ctx_r2.isOptionGroup(processedOption_r2) ? undefined : ctx_r2.isOptionSelected(processedOption_r2))("aria-posinset", i_r5 + 1);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("tabindex", 0)("data-pc-section", "content");
+    i0.ɵɵattribute("data-pc-section", "content");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r2.optionTemplate)("ngIfElse", defaultOptionTemplate_r6);
     i0.ɵɵadvance(3);
@@ -506,7 +521,7 @@ function CascadeSelect_ng_container_9_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.clearicon);
 } }
 function CascadeSelect_ng_container_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -515,9 +530,9 @@ function CascadeSelect_ng_container_9_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.clearicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.clearIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.clearicon);
 } }
 function CascadeSelect_ng_container_11_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
@@ -529,7 +544,7 @@ function CascadeSelect_ng_container_11_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.loadingicon);
 } }
 function CascadeSelect_ng_container_11_ng_container_2_span_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 22);
@@ -560,9 +575,9 @@ function CascadeSelect_ng_container_11_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.loadingicon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.loadingIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.loadingicon);
 } }
 function CascadeSelect_ng_template_12_ChevronDownIcon_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "ChevronDownIcon", 26);
@@ -580,15 +595,15 @@ function CascadeSelect_ng_template_12_span_1_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.triggerIconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.triggericon);
 } }
 function CascadeSelect_ng_template_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, CascadeSelect_ng_template_12_ChevronDownIcon_0_Template, 1, 1, "ChevronDownIcon", 24)(1, CascadeSelect_ng_template_12_span_1_Template, 2, 1, "span", 25);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngIf", !ctx_r1.triggerIconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.triggericon);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.triggerIconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.triggericon);
 } }
 function CascadeSelect_ng_template_18_2_ng_template_0_Template(rf, ctx) { }
 function CascadeSelect_ng_template_18_2_Template(rf, ctx) { if (rf & 1) {
@@ -603,7 +618,7 @@ function CascadeSelect_ng_template_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 28, 6);
     i0.ɵɵtemplate(2, CascadeSelect_ng_template_18_2_Template, 1, 0, null, 19);
     i0.ɵɵelementStart(3, "div", 29)(4, "p-cascadeselect-sub", 30);
-    i0.ɵɵlistener("onChange", function CascadeSelect_ng_template_18_Template_p_cascadeselect_sub_onChange_4_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionChange($event)); });
+    i0.ɵɵlistener("onChange", function CascadeSelect_ng_template_18_Template_p_cascadeselect_sub_onChange_4_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionClick($event)); })("onFocusChange", function CascadeSelect_ng_template_18_Template_p_cascadeselect_sub_onFocusChange_4_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionMouseMove($event)); })("onFocusEnterChange", function CascadeSelect_ng_template_18_Template_p_cascadeselect_sub_onFocusEnterChange_4_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOptionMouseEnter($event)); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(5, "span", 14);
     i0.ɵɵtext(6);
@@ -620,7 +635,7 @@ function CascadeSelect_ng_template_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵattribute("data-pc-section", "wrapper");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("options", ctx_r1.processedOptions)("selectId", ctx_r1.id)("focusedOptionId", ctx_r1.focused ? ctx_r1.focusedOptionId : undefined)("activeOptionPath", ctx_r1.activeOptionPath())("optionLabel", ctx_r1.optionLabel)("optionValue", ctx_r1.optionValue)("level", 0)("optionTemplate", ctx_r1.optionTemplate)("groupIconTemplate", ctx_r1.groupIconTemplate)("optionGroupLabel", ctx_r1.optionGroupLabel)("optionGroupChildren", ctx_r1.optionGroupChildren)("optionDisabled", ctx_r1.optionDisabled)("root", true)("dirty", ctx_r1.dirty)("role", "tree");
+    i0.ɵɵproperty("options", ctx_r1.processedOptions)("selectId", ctx_r1.id)("focusedOptionId", ctx_r1.focused ? ctx_r1.focusedOptionId : undefined)("activeOptionPath", ctx_r1.activeOptionPath())("optionLabel", ctx_r1.optionLabel)("optionValue", ctx_r1.optionValue)("level", 0)("optionTemplate", ctx_r1.optionTemplate)("groupicon", ctx_r1.groupicon)("optionGroupLabel", ctx_r1.optionGroupLabel)("optionGroupChildren", ctx_r1.optionGroupChildren)("optionDisabled", ctx_r1.optionDisabled)("root", true)("dirty", ctx_r1.dirty)("role", "tree");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedMessageText, " ");
     i0.ɵɵadvance();
@@ -632,6 +647,7 @@ const CASCADESELECT_VALUE_ACCESSOR = {
     multi: true
 };
 class CascadeSelectSub extends BaseComponent {
+    cascadeselect;
     role;
     selectId;
     activeOptionPath;
@@ -640,7 +656,7 @@ class CascadeSelectSub extends BaseComponent {
     options;
     optionGroupChildren;
     optionTemplate;
-    groupIconTemplate;
+    groupicon;
     level = 0;
     optionLabel;
     optionValue;
@@ -648,24 +664,33 @@ class CascadeSelectSub extends BaseComponent {
     dirty;
     root;
     onChange = new EventEmitter();
+    onFocusChange = new EventEmitter();
+    onFocusEnterChange = new EventEmitter();
     get listLabel() {
         return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];
     }
+    constructor(cascadeselect) {
+        super();
+        this.cascadeselect = cascadeselect;
+    }
     ngOnInit() {
         super.ngOnInit();
         if (!this.root) {
             this.position();
         }
     }
-    onOptionClick(event, option) {
+    onOptionClick(event, processedOption) {
         this.onChange.emit({
             originalEvent: event,
-            value: option,
+            processedOption,
             isFocus: true
         });
     }
-    onOptionChange(event) {
-        this.onChange.emit(event);
+    onOptionMouseEnter(event, processedOption) {
+        this.onFocusEnterChange.emit({ originalEvent: event, processedOption });
+    }
+    onOptionMouseMove(event, processedOption) {
+        this.onFocusChange.emit({ originalEvent: event, processedOption });
     }
     getOptionId(processedOption) {
         return `${this.selectId}_${processedOption.key}`;
@@ -692,7 +717,7 @@ class CascadeSelectSub extends BaseComponent {
         return isNotEmpty(processedOption.children);
     }
     isOptionSelected(processedOption) {
-        return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption);
+        return equals(this.cascadeselect?.modelValue(), processedOption?.option);
     }
     isOptionActive(processedOption) {
         return this.activeOptionPath.some((path) => path.key === processedOption.key);
@@ -720,10 +745,10 @@ class CascadeSelectSub extends BaseComponent {
             this.el.nativeElement.children[0].style.left = '-200%';
         }
     }
-    static ɵfac = /*@__PURE__*/ (() => { let ɵCascadeSelectSub_BaseFactory; return function CascadeSelectSub_Factory(__ngFactoryType__) { return (ɵCascadeSelectSub_BaseFactory || (ɵCascadeSelectSub_BaseFactory = i0.ɵɵgetInheritedFactory(CascadeSelectSub)))(__ngFactoryType__ || CascadeSelectSub); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CascadeSelectSub, selectors: [["p-cascadeSelectSub"], ["p-cascadeselect-sub"]], inputs: { role: "role", selectId: "selectId", activeOptionPath: "activeOptionPath", optionDisabled: "optionDisabled", focusedOptionId: "focusedOptionId", options: "options", optionGroupChildren: "optionGroupChildren", optionTemplate: "optionTemplate", groupIconTemplate: "groupIconTemplate", level: [2, "level", "level", numberAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", dirty: [2, "dirty", "dirty", booleanAttribute], root: [2, "root", "root", booleanAttribute] }, outputs: { onChange: "onChange" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 2, vars: 4, consts: [["defaultOptionTemplate", ""], ["aria-orientation", "horizontal", 1, "p-cascadeselect-list"], ["ngFor", "", 3, "ngForOf"], ["role", "treeitem", 3, "ngClass", "id"], ["pRipple", "", 1, "p-cascadeselect-option-content", 3, "click"], [4, "ngIf", "ngIfElse"], ["class", "p-cascadeselect-group-icon", 4, "ngIf"], ["class", "p-cascadeselect-overlay p-cascadeselect-option-list", 3, "role", "selectId", "focusedOptionId", "activeOptionPath", "options", "optionLabel", "optionValue", "level", "optionGroupLabel", "optionGroupChildren", "dirty", "optionTemplate", "onChange", 4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-cascadeselect-option-text"], [1, "p-cascadeselect-group-icon"], [4, "ngIf"], [4, "ngTemplateOutlet"], [1, "p-cascadeselect-overlay", "p-cascadeselect-option-list", 3, "onChange", "role", "selectId", "focusedOptionId", "activeOptionPath", "options", "optionLabel", "optionValue", "level", "optionGroupLabel", "optionGroupChildren", "dirty", "optionTemplate"]], template: function CascadeSelectSub_Template(rf, ctx) { if (rf & 1) {
+    static ɵfac = function CascadeSelectSub_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CascadeSelectSub)(i0.ɵɵdirectiveInject(CascadeSelect)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CascadeSelectSub, selectors: [["p-cascadeSelectSub"], ["p-cascadeselect-sub"]], inputs: { role: "role", selectId: "selectId", activeOptionPath: "activeOptionPath", optionDisabled: "optionDisabled", focusedOptionId: "focusedOptionId", options: "options", optionGroupChildren: "optionGroupChildren", optionTemplate: "optionTemplate", groupicon: "groupicon", level: [2, "level", "level", numberAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", dirty: [2, "dirty", "dirty", booleanAttribute], root: [2, "root", "root", booleanAttribute] }, outputs: { onChange: "onChange", onFocusChange: "onFocusChange", onFocusEnterChange: "onFocusEnterChange" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 2, vars: 4, consts: [["defaultOptionTemplate", ""], ["aria-orientation", "horizontal", 1, "p-cascadeselect-list"], ["ngFor", "", 3, "ngForOf"], ["role", "treeitem", 3, "ngClass", "id"], ["pRipple", "", 1, "p-cascadeselect-option-content", 3, "click", "mouseenter", "mousemove"], [4, "ngIf", "ngIfElse"], ["class", "p-cascadeselect-group-icon", 4, "ngIf"], ["class", "p-cascadeselect-list p-cascadeselect-overlay p-cascadeselect-option-list", 3, "role", "selectId", "focusedOptionId", "activeOptionPath", "options", "optionLabel", "optionValue", "level", "optionGroupLabel", "optionGroupChildren", "dirty", "optionTemplate", "onChange", "onFocusChange", "onFocusEnterChange", 4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "p-cascadeselect-option-text"], [1, "p-cascadeselect-group-icon"], [4, "ngIf"], [4, "ngTemplateOutlet"], [1, "p-cascadeselect-list", "p-cascadeselect-overlay", "p-cascadeselect-option-list", 3, "onChange", "onFocusChange", "onFocusEnterChange", "role", "selectId", "focusedOptionId", "activeOptionPath", "options", "optionLabel", "optionValue", "level", "optionGroupLabel", "optionGroupChildren", "dirty", "optionTemplate"]], template: function CascadeSelectSub_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "ul", 1);
-            i0.ɵɵtemplate(1, CascadeSelectSub_ng_template_1_Template, 7, 14, "ng-template", 2);
+            i0.ɵɵtemplate(1, CascadeSelectSub_ng_template_1_Template, 7, 13, "ng-template", 2);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵattribute("role", ctx.role)("data-pc-section", ctx.level === 0 ? "list" : "sublist")("aria-label", ctx.listLabel);
@@ -751,7 +776,14 @@ class CascadeSelectSub extends BaseComponent {
                     [attr.aria-selected]="isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)"
                     [attr.aria-posinset]="i + 1"
                 >
-                    <div class="p-cascadeselect-option-content" (click)="onOptionClick($event, processedOption)" [attr.tabindex]="0" pRipple [attr.data-pc-section]="'content'">
+                    <div
+                        class="p-cascadeselect-option-content"
+                        (click)="onOptionClick($event, processedOption)"
+                        (mouseenter)="onOptionMouseEnter($event, processedOption)"
+                        (mousemove)="onOptionMouseMove($event, processedOption)"
+                        pRipple
+                        [attr.data-pc-section]="'content'"
+                    >
                         <ng-container *ngIf="optionTemplate; else defaultOptionTemplate">
                             <ng-container *ngTemplateOutlet="optionTemplate; context: { $implicit: processedOption?.option }"></ng-container>
                         </ng-container>
@@ -759,14 +791,14 @@ class CascadeSelectSub extends BaseComponent {
                             <span class="p-cascadeselect-option-text" [attr.data-pc-section]="'text'">{{ getOptionLabelToRender(processedOption) }}</span>
                         </ng-template>
                         <span class="p-cascadeselect-group-icon" *ngIf="isOptionGroup(processedOption)" [attr.data-pc-section]="'groupIcon'">
-                            <AngleRightIcon *ngIf="!groupIconTemplate" />
-                            <ng-template *ngTemplateOutlet="groupIconTemplate"></ng-template>
+                            <AngleRightIcon *ngIf="!groupicon" />
+                            <ng-template *ngTemplateOutlet="groupicon"></ng-template>
                         </span>
                     </div>
                     <p-cascadeselect-sub
                         *ngIf="isOptionGroup(processedOption) && isOptionActive(processedOption)"
                         [role]="'group'"
-                        class="p-cascadeselect-overlay p-cascadeselect-option-list"
+                        class="p-cascadeselect-list p-cascadeselect-overlay p-cascadeselect-option-list"
                         [selectId]="selectId"
                         [focusedOptionId]="focusedOptionId"
                         [activeOptionPath]="activeOptionPath"
@@ -774,7 +806,9 @@ class CascadeSelectSub extends BaseComponent {
                         [optionLabel]="optionLabel"
                         [optionValue]="optionValue"
                         [level]="level + 1"
-                        (onChange)="onOptionChange($event)"
+                        (onChange)="onChange.emit($event)"
+                        (onFocusChange)="onFocusChange.emit($event)"
+                        (onFocusEnterChange)="onFocusEnterChange.emit($event)"
                         [optionGroupLabel]="optionGroupLabel"
                         [optionGroupChildren]="optionGroupChildren"
                         [dirty]="dirty"
@@ -788,7 +822,7 @@ class CascadeSelectSub extends BaseComponent {
                 encapsulation: ViewEncapsulation.None,
                 changeDetection: ChangeDetectionStrategy.OnPush
             }]
-    }], null, { role: [{
+    }], () => [{ type: CascadeSelect }], { role: [{
             type: Input
         }], selectId: [{
             type: Input
@@ -804,7 +838,7 @@ class CascadeSelectSub extends BaseComponent {
             type: Input
         }], optionTemplate: [{
             type: Input
-        }], groupIconTemplate: [{
+        }], groupicon: [{
             type: Input
         }], level: [{
             type: Input,
@@ -823,6 +857,10 @@ class CascadeSelectSub extends BaseComponent {
             args: [{ transform: booleanAttribute }]
         }], onChange: [{
             type: Output
+        }], onFocusChange: [{
+            type: Output
+        }], onFocusEnterChange: [{
+            type: Output
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CascadeSelectSub, { className: "CascadeSelectSub" }); })();
 /**
@@ -836,11 +874,6 @@ class CascadeSelect extends BaseComponent {
      * @group Props
      */
     id;
-    /**
-     * Determines if the option will be selected on focus.
-     * @group Props
-     */
-    selectOnFocus = false;
     /**
      * Text to display when the search is active. Defaults to global value in i18n translation configuration.
      * @group Props
@@ -880,11 +913,21 @@ class CascadeSelect extends BaseComponent {
      * @group Props
      */
     optionDisabled;
+    /**
+     * Fields used when filtering the options, defaults to optionLabel.
+     * @group Props
+     */
+    focusOnHover = true;
+    /**
+     * Determines if the option will be selected on focus.
+     * @group Props
+     */
+    selectOnFocus = false;
     /**
      * Whether to focus on the first visible or selected element when the overlay panel is shown.
      * @group Props
      */
-    autoOptionFocus = true;
+    autoOptionFocus = false;
     /**
      * Style class of the component.
      * @group Props
@@ -1130,28 +1173,29 @@ class CascadeSelect extends BaseComponent {
      * Content template for customizing the trigger icon.
      * @group Templates
      */
-    triggerIconTemplate;
+    triggericon;
     /**
      * Content template for customizing the loading icon.
      * @group Templates
      */
-    loadingIconTemplate;
+    loadingicon;
     /**
      * Content template for customizing the group icon.
      * @group Templates
      */
-    groupIconTemplate;
+    groupicon;
     /**
      * Content template for customizing the clear icon.
      * @group Templates
      */
-    clearIconTemplate;
+    clearicon;
     _showTransitionOptions = '';
     _hideTransitionOptions = '';
     selectionPath = null;
     focused = false;
     overlayVisible = false;
-    dirty = true;
+    clicked = false;
+    dirty = false;
     searchValue;
     searchTimeout;
     onModelChange = () => { };
@@ -1165,6 +1209,7 @@ class CascadeSelect extends BaseComponent {
         return {
             'p-cascadeselect p-component p-inputwrapper': true,
             'p-cascadeselect-clearable': this.showClear && !this.disabled,
+            'p-cascadeselect-mobile': this.queryMatches(),
             'p-disabled': this.disabled,
             'p-focus': this.focused,
             'p-inputwrapper-filled': this.modelValue(),
@@ -1336,11 +1381,16 @@ class CascadeSelect extends BaseComponent {
                 }
                 break;
         }
+        this.clicked = false;
     }
     onArrowDownKey(event) {
-        const optionIndex = this.focusedOptionInfo().index !== -1 ? this.findNextOptionIndex(this.focusedOptionInfo().index) : this.findFirstFocusedOptionIndex();
-        this.changeFocusedOptionIndex(event, optionIndex);
-        !this.overlayVisible && this.show();
+        if (!this.overlayVisible) {
+            this.show();
+        }
+        else {
+            const optionIndex = this.focusedOptionInfo().index !== -1 ? this.findNextOptionIndex(this.focusedOptionInfo().index) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
+            this.changeFocusedOptionIndex(event, optionIndex, true);
+        }
         event.preventDefault();
     }
     onArrowUpKey(event) {
@@ -1348,14 +1398,14 @@ class CascadeSelect extends BaseComponent {
             if (this.focusedOptionInfo().index !== -1) {
                 const processedOption = this.visibleOptions[this.focusedOptionInfo().index];
                 const grouped = this.isProccessedOptionGroup(processedOption);
-                !grouped && this.onOptionChange({ originalEvent: event, value: processedOption });
+                !grouped && this.onOptionChange({ originalEvent: event, processedOption });
             }
             this.overlayVisible && this.hide();
             event.preventDefault();
         }
         else {
-            const optionIndex = this.focusedOptionInfo().index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo().index) : this.findLastFocusedOptionIndex();
-            this.changeFocusedOptionIndex(event, optionIndex);
+            const optionIndex = this.focusedOptionInfo().index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo().index) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
+            this.changeFocusedOptionIndex(event, optionIndex, true);
             !this.overlayVisible && this.show();
             event.preventDefault();
         }
@@ -1390,7 +1440,7 @@ class CascadeSelect extends BaseComponent {
                     this.onArrowDownKey(event);
                 }
                 else {
-                    this.onOptionChange({ originalEvent: event, value: processedOption });
+                    this.onOptionChange({ originalEvent: event, processedOption });
                 }
             }
             event.preventDefault();
@@ -1408,13 +1458,14 @@ class CascadeSelect extends BaseComponent {
     }
     onEnterKey(event) {
         if (!this.overlayVisible) {
+            this.focusedOptionInfo.set({ ...this.focusedOptionInfo(), index: -1 }); // reset
             this.onArrowDownKey(event);
         }
         else {
             if (this.focusedOptionInfo().index !== -1) {
                 const processedOption = this.visibleOptions()[this.focusedOptionInfo().index];
                 const grouped = this.isProccessedOptionGroup(processedOption);
-                this.onOptionChange({ originalEvent: event, value: processedOption });
+                this.onOptionClick({ originalEvent: event, processedOption });
                 !grouped && this.hide();
             }
         }
@@ -1424,14 +1475,14 @@ class CascadeSelect extends BaseComponent {
         this.onEnterKey(event);
     }
     onEscapeKey(event) {
-        this.overlayVisible && this.hide(true);
+        this.overlayVisible && this.hide(event, true);
         event.preventDefault();
     }
     onTabKey(event) {
         if (this.focusedOptionInfo().index !== -1) {
             const processedOption = this.visibleOptions()[this.focusedOptionInfo().index];
             const grouped = this.isProccessedOptionGroup(processedOption);
-            !grouped && this.onOptionChange({ originalEvent: event, value: processedOption });
+            !grouped && this.onOptionChange({ originalEvent: event, processedOption });
         }
         this.overlayVisible && this.hide();
     }
@@ -1471,25 +1522,28 @@ class CascadeSelect extends BaseComponent {
             element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
         }
     }
-    changeFocusedOptionIndex(event, index) {
-        if (this.focusedOptionInfo().index !== index) {
-            const focusedOptionInfo = this.focusedOptionInfo();
+    changeFocusedOptionIndex(event, index, preventSelection) {
+        const focusedOptionInfo = this.focusedOptionInfo();
+        if (focusedOptionInfo.index !== index) {
             this.focusedOptionInfo.set({ ...focusedOptionInfo, index });
             this.scrollInView();
-        }
-        if (this.selectOnFocus) {
-            this.onOptionChange({ originalEvent: event, processedOption: this.visibleOptions()[index], isHide: false });
+            if (this.focusOnHover) {
+                this.onOptionClick({ originalEvent: event, processedOption: this.visibleOptions()[index], isHide: false, preventSelection });
+            }
+            if (this.selectOnFocus) {
+                this.onOptionChange({ originalEvent: event, processedOption: this.visibleOptions()[index], isHide: false });
+            }
         }
     }
     matchMediaListener;
     onOptionSelect(event) {
-        const { originalEvent, value, isFocus } = event;
-        const newValue = this.getOptionValue(value.option);
+        const { originalEvent, value, isHide } = event;
+        const newValue = this.getOptionValue(value);
         const activeOptionPath = this.activeOptionPath();
         activeOptionPath.forEach((p) => (p.selected = true));
         this.activeOptionPath.set(activeOptionPath);
         this.updateModel(newValue, originalEvent);
-        isFocus && this.hide(true);
+        isHide && this.hide(event, true);
     }
     onOptionGroupSelect(event) {
         this.dirty = true;
@@ -1508,6 +1562,7 @@ class CascadeSelect extends BaseComponent {
             }
             this.focusInputViewChild?.nativeElement.focus();
         }
+        this.clicked = true;
     }
     isOptionMatched(processedOption) {
         return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption).toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
@@ -1611,10 +1666,12 @@ class CascadeSelect extends BaseComponent {
     hide(event, isFocus = false) {
         const _hide = () => {
             this.overlayVisible = false;
+            this.clicked = false;
             this.activeOptionPath.set([]);
             this.focusedOptionInfo.set({ index: -1, level: 0, parentKey: '' });
             isFocus && focus(this.focusInputViewChild.nativeElement);
             this.onHide.emit(event);
+            this.cd.markForCheck();
         };
         setTimeout(() => {
             _hide();
@@ -1629,13 +1686,13 @@ class CascadeSelect extends BaseComponent {
         if (this.hasSelectedOption() && isNotEmpty(this.activeOptionPath())) {
             const processedOption = this.activeOptionPath()[this.activeOptionPath().length - 1];
             focusedOptionInfo = {
-                index: this.autoOptionFocus ? processedOption.index : -1,
+                index: processedOption.index,
                 level: processedOption.level,
                 parentKey: processedOption.parentKey
             };
         }
         else {
-            focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1, level: 0, parentKey: '' };
+            focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex(), level: 0, parentKey: '' };
         }
         this.focusedOptionInfo.set(focusedOptionInfo);
         isFocus && focus(this.focusInputViewChild.nativeElement);
@@ -1665,7 +1722,7 @@ class CascadeSelect extends BaseComponent {
         return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]);
     }
     isProccessedOptionGroup(processedOption) {
-        return isNotEmpty(processedOption.children);
+        return isNotEmpty(processedOption?.children);
     }
     getProccessedOptionLabel(processedOption) {
         const grouped = this.isProccessedOptionGroup(processedOption);
@@ -1685,35 +1742,63 @@ class CascadeSelect extends BaseComponent {
     queryMatches = signal(false);
     mobileActive = signal(false);
     onOptionChange(event) {
-        const { originalEvent, value, isFocus, isHide } = event;
-        if (isEmpty(value))
+        const { processedOption, type } = event;
+        if (isEmpty(processedOption))
             return;
-        const { index, level, parentKey, children, key } = value;
+        const { index, key, level, parentKey, children } = processedOption;
         const grouped = isNotEmpty(children);
-        const selected = this.isSelected(value);
+        const activeOptionPath = this.activeOptionPath().filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
+        this.focusedOptionInfo.set({ index, level, parentKey });
+        if (type == 'hover' && this.queryMatches()) {
+            return;
+        }
+        if (grouped) {
+            activeOptionPath.push(processedOption);
+        }
+        this.activeOptionPath.set([...activeOptionPath]);
+    }
+    onOptionClick(event) {
+        const { originalEvent, processedOption, isFocus, isHide, preventSelection } = event;
+        const { index, key, level, parentKey } = processedOption;
+        const grouped = this.isProccessedOptionGroup(processedOption);
+        const selected = this.isSelected(processedOption);
         if (selected) {
             const activeOptionPath = this.activeOptionPath().filter((p) => key !== p.key && key.startsWith(p.key));
             this.activeOptionPath.set([...activeOptionPath]);
             this.focusedOptionInfo.set({ index, level, parentKey });
         }
         else {
-            const activeOptionPath = this.activeOptionPath().filter((p) => p.parentKey !== parentKey);
-            activeOptionPath.push(value);
-            this.focusedOptionInfo.set({ index, level, parentKey });
-            this.activeOptionPath.set(activeOptionPath);
-            grouped ? this.onOptionGroupSelect({ originalEvent, value, isFocus: false }) : this.onOptionSelect({ originalEvent, value, isFocus });
+            if (grouped) {
+                this.onOptionChange(event);
+                this.onOptionGroupSelect({ originalEvent, value: processedOption.option, isFocus: false });
+            }
+            else {
+                const activeOptionPath = this.activeOptionPath().filter((p) => p.parentKey !== parentKey);
+                activeOptionPath.push(processedOption);
+                this.focusedOptionInfo.set({ index, level, parentKey });
+                if (!preventSelection || processedOption?.children.length !== 0) {
+                    this.activeOptionPath.set([...activeOptionPath]);
+                    this.onOptionSelect({ originalEvent, value: processedOption.option, isHide: isFocus });
+                }
+            }
         }
-        // const activeOptionPath = this.activeOptionPath().filter((p) => p.parentKey !== parentKey);
-        //
-        // activeOptionPath.push(value);
-        //
-        // this.focusedOptionInfo.set({ index, level, parentKey });
-        // this.activeOptionPath.set(activeOptionPath);
-        // grouped
-        //     ? this.onOptionGroupSelect({ originalEvent, value, isFocus: false })
-        //     : this.onOptionSelect({ originalEvent, value, isFocus });
         isFocus && focus(this.focusInputViewChild.nativeElement);
     }
+    onOptionMouseEnter(event) {
+        if (this.focusOnHover) {
+            if (this.dirty || (!this.dirty && isNotEmpty(this.modelValue()))) {
+                this.onOptionChange({ ...event, type: 'hover' });
+            }
+            else if (!this.dirty && event.processedOption.level === 0) {
+                this.onOptionClick({ ...event, type: 'hover' });
+            }
+        }
+    }
+    onOptionMouseMove(event) {
+        if (this.focused && this.focusOnHover) {
+            this.changeFocusedOptionIndex(event, event.processedOption.index);
+        }
+    }
     ngOnInit() {
         super.ngOnInit();
         this.id = this.id || uuid('pn_id_');
@@ -1784,10 +1869,10 @@ class CascadeSelect extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.footerTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggerIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.groupIconTemplate = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearIconTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.triggericon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.loadingicon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.groupicon = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.clearicon = _t.first);
         } }, viewQuery: function CascadeSelect_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c9, 5);
             i0.ɵɵviewQuery(_c10, 5);
@@ -1799,7 +1884,7 @@ class CascadeSelect extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.containerViewChild = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panelViewChild = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.overlayViewChild = _t.first);
-        } }, inputs: { id: "id", selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], searchMessage: "searchMessage", emptyMessage: "emptyMessage", selectionMessage: "selectionMessage", emptySearchMessage: "emptySearchMessage", emptySelectionMessage: "emptySelectionMessage", searchLocale: "searchLocale", optionDisabled: "optionDisabled", autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], styleClass: "styleClass", style: "style", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", placeholder: "placeholder", value: "value", dataKey: "dataKey", inputId: "inputId", size: "size", tabindex: [2, "tabindex", "tabindex", numberAttribute], ariaLabelledBy: "ariaLabelledBy", inputLabel: "inputLabel", ariaLabel: "ariaLabel", appendTo: "appendTo", disabled: [2, "disabled", "disabled", booleanAttribute], showClear: [2, "showClear", "showClear", booleanAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", overlayOptions: "overlayOptions", autofocus: [2, "autofocus", "autofocus", booleanAttribute], showTransitionOptions: "showTransitionOptions", variant: "variant", loading: [2, "loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", hideTransitionOptions: "hideTransitionOptions", fluid: [2, "fluid", "fluid", booleanAttribute], breakpoint: "breakpoint" }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide", onFocus: "onFocus", onBlur: "onBlur" }, standalone: true, features: [i0.ɵɵProvidersFeature([CASCADESELECT_VALUE_ACCESSOR, CascadeSelectStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 20, vars: 34, consts: [["container", ""], ["focusInput", ""], ["defaultValueTemplate", ""], ["elseBlock", ""], ["overlay", ""], ["content", ""], ["panel", ""], [3, "click", "ngClass", "ngStyle"], [1, "p-hidden-accessible"], ["readonly", "", "type", "text", "role", "combobox", "aria-haspopup", "tree", 3, "focus", "blur", "keydown", "disabled", "placeholder", "tabindex", "pAutoFocus"], [3, "ngClass"], [4, "ngIf", "ngIfElse"], [4, "ngIf"], ["role", "button", "aria-haspopup", "listbox", 1, "p-cascadeselect-dropdown"], ["role", "status", "aria-live", "polite", 1, "p-hidden-accessible"], [3, "visibleChange", "onAnimationDone", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "visible", "options", "target", "appendTo", "showTransitionOptions", "hideTransitionOptions"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "p-cascadeselect-clear-icon", 3, "click", 4, "ngIf"], [1, "p-cascadeselect-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"], [3, "styleClass", 4, "ngIf"], ["class", "p-cascadeselect-dropdown-icon", 4, "ngIf"], [3, "styleClass"], [1, "p-cascadeselect-dropdown-icon"], [3, "ngClass", "ngStyle"], [1, "p-cascadeselect-list-container"], [3, "onChange", "options", "selectId", "focusedOptionId", "activeOptionPath", "optionLabel", "optionValue", "level", "optionTemplate", "groupIconTemplate", "optionGroupLabel", "optionGroupChildren", "optionDisabled", "root", "dirty", "role"]], template: function CascadeSelect_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { id: "id", searchMessage: "searchMessage", emptyMessage: "emptyMessage", selectionMessage: "selectionMessage", emptySearchMessage: "emptySearchMessage", emptySelectionMessage: "emptySelectionMessage", searchLocale: "searchLocale", optionDisabled: "optionDisabled", focusOnHover: [2, "focusOnHover", "focusOnHover", booleanAttribute], selectOnFocus: [2, "selectOnFocus", "selectOnFocus", booleanAttribute], autoOptionFocus: [2, "autoOptionFocus", "autoOptionFocus", booleanAttribute], styleClass: "styleClass", style: "style", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", placeholder: "placeholder", value: "value", dataKey: "dataKey", inputId: "inputId", size: "size", tabindex: [2, "tabindex", "tabindex", numberAttribute], ariaLabelledBy: "ariaLabelledBy", inputLabel: "inputLabel", ariaLabel: "ariaLabel", appendTo: "appendTo", disabled: [2, "disabled", "disabled", booleanAttribute], showClear: [2, "showClear", "showClear", booleanAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", overlayOptions: "overlayOptions", autofocus: [2, "autofocus", "autofocus", booleanAttribute], showTransitionOptions: "showTransitionOptions", variant: "variant", loading: [2, "loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", hideTransitionOptions: "hideTransitionOptions", fluid: [2, "fluid", "fluid", booleanAttribute], breakpoint: "breakpoint" }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide", onFocus: "onFocus", onBlur: "onBlur" }, standalone: true, features: [i0.ɵɵProvidersFeature([CASCADESELECT_VALUE_ACCESSOR, CascadeSelectStyle]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 20, vars: 34, consts: [["container", ""], ["focusInput", ""], ["defaultValueTemplate", ""], ["elseBlock", ""], ["overlay", ""], ["content", ""], ["panel", ""], [3, "click", "ngClass", "ngStyle"], [1, "p-hidden-accessible"], ["readonly", "", "type", "text", "role", "combobox", "aria-haspopup", "tree", 3, "focus", "blur", "keydown", "disabled", "placeholder", "tabindex", "pAutoFocus"], [3, "ngClass"], [4, "ngIf", "ngIfElse"], [4, "ngIf"], ["role", "button", "aria-haspopup", "listbox", 1, "p-cascadeselect-dropdown"], ["role", "status", "aria-live", "polite", 1, "p-hidden-accessible"], [3, "visibleChange", "onAnimationDone", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "visible", "options", "target", "appendTo", "showTransitionOptions", "hideTransitionOptions"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "p-cascadeselect-clear-icon", 3, "click", 4, "ngIf"], [1, "p-cascadeselect-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"], [3, "styleClass", 4, "ngIf"], ["class", "p-cascadeselect-dropdown-icon", 4, "ngIf"], [3, "styleClass"], [1, "p-cascadeselect-dropdown-icon"], [3, "ngClass", "ngStyle"], [1, "p-cascadeselect-list-container"], [3, "onChange", "onFocusChange", "onFocusEnterChange", "options", "selectId", "focusedOptionId", "activeOptionPath", "optionLabel", "optionValue", "level", "optionTemplate", "groupicon", "optionGroupLabel", "optionGroupChildren", "optionDisabled", "root", "dirty", "role"]], template: function CascadeSelect_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 7, 0);
             i0.ɵɵlistener("click", function CascadeSelect_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onContainerClick($event)); });
@@ -1891,26 +1976,26 @@ class CascadeSelect extends BaseComponent {
         </span>
 
         <ng-container *ngIf="filled && !disabled && showClear">
-            <TimesIcon *ngIf="!clearIconTemplate" class="p-cascadeselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
-            <span *ngIf="clearIconTemplate" class="p-cascadeselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
-                <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
+            <TimesIcon *ngIf="!clearicon" class="p-cascadeselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
+            <span *ngIf="clearicon" class="p-cascadeselect-clear-icon" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true">
+                <ng-template *ngTemplateOutlet="clearicon"></ng-template>
             </span>
         </ng-container>
 
         <div class="p-cascadeselect-dropdown" role="button" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible ?? false" [attr.data-pc-section]="'dropdownIcon'" [attr.aria-hidden]="true">
             <ng-container *ngIf="loading; else elseBlock">
-                <ng-container *ngIf="loadingIconTemplate">
-                    <ng-container *ngTemplateOutlet="loadingIconTemplate"></ng-container>
+                <ng-container *ngIf="loadingicon">
+                    <ng-container *ngTemplateOutlet="loadingicon"></ng-container>
                 </ng-container>
-                <ng-container *ngIf="!loadingIconTemplate">
+                <ng-container *ngIf="!loadingicon">
                     <span *ngIf="loadingIcon" [ngClass]="'p-cascadeselect-loading-icon pi-spin ' + loadingIcon" aria-hidden="true"></span>
                     <span *ngIf="!loadingIcon" [class]="'p-cascadeselect-loading-icon pi pi-spinner pi-spin'" aria-hidden="true"></span>
                 </ng-container>
             </ng-container>
             <ng-template #elseBlock>
-                <ChevronDownIcon *ngIf="!triggerIconTemplate" [styleClass]="'p-cascadeselect-dropdown-icon'" />
-                <span *ngIf="triggerIconTemplate" class="p-cascadeselect-dropdown-icon">
-                    <ng-template *ngTemplateOutlet="triggerIconTemplate"></ng-template>
+                <ChevronDownIcon *ngIf="!triggericon" [styleClass]="'p-cascadeselect-dropdown-icon'" />
+                <span *ngIf="triggericon" class="p-cascadeselect-dropdown-icon">
+                    <ng-template *ngTemplateOutlet="triggericon"></ng-template>
                 </span>
             </ng-template>
         </div>
@@ -1944,12 +2029,14 @@ class CascadeSelect extends BaseComponent {
                             [optionValue]="optionValue"
                             [level]="0"
                             [optionTemplate]="optionTemplate"
-                            [groupIconTemplate]="groupIconTemplate"
+                            [groupicon]="groupicon"
                             [optionGroupLabel]="optionGroupLabel"
                             [optionGroupChildren]="optionGroupChildren"
                             [optionDisabled]="optionDisabled"
                             [root]="true"
-                            (onChange)="onOptionChange($event)"
+                            (onChange)="onOptionClick($event)"
+                            (onFocusChange)="onOptionMouseMove($event)"
+                            (onFocusEnterChange)="onOptionMouseEnter($event)"
                             [dirty]="dirty"
                             [role]="'tree'"
                         >
@@ -1969,9 +2056,6 @@ class CascadeSelect extends BaseComponent {
             }]
     }], () => [{ type: i2.OverlayService }], { id: [{
             type: Input
-        }], selectOnFocus: [{
-            type: Input,
-            args: [{ transform: booleanAttribute }]
         }], searchMessage: [{
             type: Input
         }], emptyMessage: [{
@@ -1986,6 +2070,12 @@ class CascadeSelect extends BaseComponent {
             type: Input
         }], optionDisabled: [{
             type: Input
+        }], focusOnHover: [{
+            type: Input,
+            args: [{ transform: booleanAttribute }]
+        }], selectOnFocus: [{
+            type: Input,
+            args: [{ transform: booleanAttribute }]
         }], autoOptionFocus: [{
             type: Input,
             args: [{ transform: booleanAttribute }]
@@ -2097,16 +2187,16 @@ class CascadeSelect extends BaseComponent {
         }], footerTemplate: [{
             type: ContentChild,
             args: ['footer']
-        }], triggerIconTemplate: [{
+        }], triggericon: [{
             type: ContentChild,
             args: ['triggericon']
-        }], loadingIconTemplate: [{
+        }], loadingicon: [{
             type: ContentChild,
             args: ['loadingicon']
-        }], groupIconTemplate: [{
+        }], groupicon: [{
             type: ContentChild,
             args: ['optiongroupicon']
-        }], clearIconTemplate: [{
+        }], clearicon: [{
             type: ContentChild,
             args: ['clearicon']
         }] }); })();