cax-design-system 2.8.4 → 3.0.0

package/fesm2022/cax-design-system-cascadeselect.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, computed, effect, ContentChildren, ViewChild, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, booleanAttribute, numberAttribute, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, computed, effect, ContentChildren, ViewChild, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from 'cax-design-system/api';
 import { TranslationKeys, CaxTemplate, SharedModule } from 'cax-design-system/api';
@@ -7,15 +7,14 @@ import { DomHandler } from 'cax-design-system/dom';
 import { ObjectUtils, UniqueComponentId } from 'cax-design-system/utils';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from 'cax-design-system/icons/angleright';
-import { AngleRightIcon } from 'cax-design-system/icons/angleright';
-import * as i4 from 'cax-design-system/overlay';
+import * as i3 from 'cax-design-system/overlay';
 import { OverlayModule } from 'cax-design-system/overlay';
-import * as i5 from 'cax-design-system/icons/chevrondown';
-import { ChevronDownIcon } from 'cax-design-system/icons/chevrondown';
-import * as i6 from 'cax-design-system/icons/times';
-import { TimesIcon } from 'cax-design-system/icons/times';
+import * as i4 from 'cax-design-system/autofocus';
 import { AutoFocusModule } from 'cax-design-system/autofocus';
+import * as i5 from 'cax-design-system/icons/times';
+import { TimesIcon } from 'cax-design-system/icons/times';
+import { AngleRightIcon } from 'cax-design-system/icons/angleright';
+import { ChevronDownIcon } from 'cax-design-system/icons/chevrondown';
 import { RippleModule } from 'cax-design-system/ripple';
 
 const CASCADESELECT_VALUE_ACCESSOR = {
@@ -42,6 +41,7 @@ class CascadeSelectSub {
     dirty;
     root;
     onChange = new EventEmitter();
+    size = 'md';
     get listLabel() {
         return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];
     }
@@ -116,12 +116,12 @@ class CascadeSelectSub {
             this.el.nativeElement.children[0].style.left = '-200%';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectSub, deps: [{ token: i0.ElementRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: CascadeSelectSub, isStandalone: false, selector: "cax-cascadeSelectSub", inputs: { role: "role", selectId: "selectId", activeOptionPath: "activeOptionPath", optionDisabled: "optionDisabled", focusedOptionId: "focusedOptionId", options: "options", optionGroupChildren: "optionGroupChildren", optionTemplate: "optionTemplate", groupIconTemplate: "groupIconTemplate", level: ["level", "level", numberAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", dirty: ["dirty", "dirty", booleanAttribute], root: ["root", "root", booleanAttribute] }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<ul class=\"cax-cascadeselect-panel cax-cascadeselect-items\" [ngClass]=\"{ 'cax-cascadeselect-panel-root': root }\" [attr.role]=\"role\" aria-orientation=\"horizontal\" [attr.data-pc-section]=\"level === 0 ? 'list' : 'sublist'\" [attr.aria-label]=\"listLabel\">\r\n    <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\r\n        <li\r\n            [ngClass]=\"getItemClass(processedOption)\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"level + 1\"\r\n            [attr.aria-setsize]=\"options.length\"\r\n            [attr.data-pc-section]=\"'item'\"\r\n            [id]=\"getOptionId(processedOption)\"\r\n            [attr.aria-label]=\"getOptionLabelToRender(processedOption)\"\r\n            [attr.aria-selected]=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n        >\r\n            <div class=\"cax-cascadeselect-item-content\" (click)=\"onOptionClick($event, processedOption)\" [attr.tabindex]=\"0\" pRipple [attr.data-pc-section]=\"'content'\">\r\n                <ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: processedOption.option }\"></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultOptionTemplate>\r\n                    <span class=\"cax-cascadeselect-item-text\" [attr.data-pc-section]=\"'text'\">{{ getOptionLabelToRender(processedOption) }}</span>\r\n                </ng-template>\r\n                <span class=\"cax-cascadeselect-group-icon\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\r\n                    <AngleRightIcon *ngIf=\"!groupIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"groupIconTemplate\"></ng-template>\r\n                </span>\r\n            </div>\r\n            <cax-cascadeSelectSub\r\n                *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\r\n                [role]=\"'group'\"\r\n                class=\"cax-cascadeselect-sublist\"\r\n                [selectId]=\"selectId\"\r\n                [focusedOptionId]=\"focusedOptionId\"\r\n                [activeOptionPath]=\"activeOptionPath\"\r\n                [options]=\"getOptionGroupChildren(processedOption)\"\r\n                [optionLabel]=\"optionLabel\"\r\n                [optionValue]=\"optionValue\"\r\n                [level]=\"level + 1\"\r\n                (onChange)=\"onOptionChange($event)\"\r\n                [optionGroupLabel]=\"optionGroupLabel\"\r\n                [optionGroupChildren]=\"optionGroupChildren\"\r\n                [dirty]=\"dirty\"\r\n                [optionTemplate]=\"optionTemplate\"\r\n            >\r\n            </cax-cascadeSelectSub>\r\n        </li>\r\n    </ng-template>\r\n</ul>\r\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.AngleRightIcon, selector: "AngleRightIcon" }, { kind: "component", type: CascadeSelectSub, selector: "cax-cascadeSelectSub", inputs: ["role", "selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupIconTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CascadeSelectSub, deps: [{ token: i0.ElementRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: CascadeSelectSub, isStandalone: false, selector: "cax-cascadeSelectSub", inputs: { role: "role", selectId: "selectId", activeOptionPath: "activeOptionPath", optionDisabled: "optionDisabled", focusedOptionId: "focusedOptionId", options: "options", optionGroupChildren: "optionGroupChildren", optionTemplate: "optionTemplate", groupIconTemplate: "groupIconTemplate", level: ["level", "level", numberAttribute], optionLabel: "optionLabel", optionValue: "optionValue", optionGroupLabel: "optionGroupLabel", dirty: ["dirty", "dirty", booleanAttribute], root: ["root", "root", booleanAttribute], size: "size" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<ul class=\"cax-cascadeselect-items\" [ngClass]=\"{ 'cax-cascadeselect-panel-root': root }\" [attr.role]=\"role\" aria-orientation=\"horizontal\" [attr.data-pc-section]=\"level === 0 ? 'list' : 'sublist'\" [attr.aria-label]=\"listLabel\">\n    <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\n        <li\n            [ngClass]=\"getItemClass(processedOption)\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"level + 1\"\n            [attr.aria-setsize]=\"options.length\"\n            [attr.data-pc-section]=\"'item'\"\n            [id]=\"getOptionId(processedOption)\"\n            [attr.aria-label]=\"getOptionLabelToRender(processedOption)\"\n            [attr.aria-selected]=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\n            [attr.aria-posinset]=\"i + 1\"\n        >\n            <div class=\"cax-cascadeselect-item-content\" (click)=\"onOptionClick($event, processedOption)\" [attr.tabindex]=\"0\" pRipple [attr.data-pc-section]=\"'content'\">\n                <ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\n                    <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: processedOption.option }\"></ng-container>\n                </ng-container>\n                <ng-template #defaultOptionTemplate>\n                    <span class=\"cax-cascadeselect-item-text\" [attr.data-pc-section]=\"'text'\" [ngClass]=\"{ 'cax-text-action-sm-medium': size == 'sm', 'cax-text-action-md-regular': size == 'md', 'cax-text-action-lg-regular': size == 'lg' }\"\n                        >{{ getOptionLabelToRender(processedOption) }}</span\n                    >\n                </ng-template>\n                <span class=\"cax-cascadeselect-group-icon\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\n                    <!-- <AngleRightIcon *ngIf=\"!groupIconTemplate\" /> -->\n                    <i *ngIf=\"!groupIconTemplate\" class=\"cax cax-alt-arrow-right\"></i>\n                    <ng-template *ngTemplateOutlet=\"groupIconTemplate\"></ng-template>\n                </span>\n            </div>\n            <cax-cascadeSelectSub\n                *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\n                [role]=\"'group'\"\n                class=\"cax-cascadeselect-sublist\"\n                [selectId]=\"selectId\"\n                [focusedOptionId]=\"focusedOptionId\"\n                [activeOptionPath]=\"activeOptionPath\"\n                [options]=\"getOptionGroupChildren(processedOption)\"\n                [optionLabel]=\"optionLabel\"\n                [optionValue]=\"optionValue\"\n                [level]=\"level + 1\"\n                (onChange)=\"onOptionChange($event)\"\n                [optionGroupLabel]=\"optionGroupLabel\"\n                [optionGroupChildren]=\"optionGroupChildren\"\n                [dirty]=\"dirty\"\n                [optionTemplate]=\"optionTemplate\"\n                [size]=\"size\"\n            >\n            </cax-cascadeSelectSub>\n        </li>\n    </ng-template>\n</ul>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CascadeSelectSub, selector: "cax-cascadeSelectSub", inputs: ["role", "selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupIconTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root", "size"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectSub, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CascadeSelectSub, decorators: [{
             type: Component,
-            args: [{ selector: 'cax-cascadeSelectSub', encapsulation: ViewEncapsulation.None, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"cax-cascadeselect-panel cax-cascadeselect-items\" [ngClass]=\"{ 'cax-cascadeselect-panel-root': root }\" [attr.role]=\"role\" aria-orientation=\"horizontal\" [attr.data-pc-section]=\"level === 0 ? 'list' : 'sublist'\" [attr.aria-label]=\"listLabel\">\r\n    <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\r\n        <li\r\n            [ngClass]=\"getItemClass(processedOption)\"\r\n            role=\"treeitem\"\r\n            [attr.aria-level]=\"level + 1\"\r\n            [attr.aria-setsize]=\"options.length\"\r\n            [attr.data-pc-section]=\"'item'\"\r\n            [id]=\"getOptionId(processedOption)\"\r\n            [attr.aria-label]=\"getOptionLabelToRender(processedOption)\"\r\n            [attr.aria-selected]=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\r\n            [attr.aria-posinset]=\"i + 1\"\r\n        >\r\n            <div class=\"cax-cascadeselect-item-content\" (click)=\"onOptionClick($event, processedOption)\" [attr.tabindex]=\"0\" pRipple [attr.data-pc-section]=\"'content'\">\r\n                <ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\r\n                    <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: processedOption.option }\"></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultOptionTemplate>\r\n                    <span class=\"cax-cascadeselect-item-text\" [attr.data-pc-section]=\"'text'\">{{ getOptionLabelToRender(processedOption) }}</span>\r\n                </ng-template>\r\n                <span class=\"cax-cascadeselect-group-icon\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\r\n                    <AngleRightIcon *ngIf=\"!groupIconTemplate\" />\r\n                    <ng-template *ngTemplateOutlet=\"groupIconTemplate\"></ng-template>\r\n                </span>\r\n            </div>\r\n            <cax-cascadeSelectSub\r\n                *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\r\n                [role]=\"'group'\"\r\n                class=\"cax-cascadeselect-sublist\"\r\n                [selectId]=\"selectId\"\r\n                [focusedOptionId]=\"focusedOptionId\"\r\n                [activeOptionPath]=\"activeOptionPath\"\r\n                [options]=\"getOptionGroupChildren(processedOption)\"\r\n                [optionLabel]=\"optionLabel\"\r\n                [optionValue]=\"optionValue\"\r\n                [level]=\"level + 1\"\r\n                (onChange)=\"onOptionChange($event)\"\r\n                [optionGroupLabel]=\"optionGroupLabel\"\r\n                [optionGroupChildren]=\"optionGroupChildren\"\r\n                [dirty]=\"dirty\"\r\n                [optionTemplate]=\"optionTemplate\"\r\n            >\r\n            </cax-cascadeSelectSub>\r\n        </li>\r\n    </ng-template>\r\n</ul>\r\n" }]
+            args: [{ selector: 'cax-cascadeSelectSub', encapsulation: ViewEncapsulation.None, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"cax-cascadeselect-items\" [ngClass]=\"{ 'cax-cascadeselect-panel-root': root }\" [attr.role]=\"role\" aria-orientation=\"horizontal\" [attr.data-pc-section]=\"level === 0 ? 'list' : 'sublist'\" [attr.aria-label]=\"listLabel\">\n    <ng-template ngFor let-processedOption [ngForOf]=\"options\" let-i=\"index\">\n        <li\n            [ngClass]=\"getItemClass(processedOption)\"\n            role=\"treeitem\"\n            [attr.aria-level]=\"level + 1\"\n            [attr.aria-setsize]=\"options.length\"\n            [attr.data-pc-section]=\"'item'\"\n            [id]=\"getOptionId(processedOption)\"\n            [attr.aria-label]=\"getOptionLabelToRender(processedOption)\"\n            [attr.aria-selected]=\"isOptionGroup(processedOption) ? undefined : isOptionSelected(processedOption)\"\n            [attr.aria-posinset]=\"i + 1\"\n        >\n            <div class=\"cax-cascadeselect-item-content\" (click)=\"onOptionClick($event, processedOption)\" [attr.tabindex]=\"0\" pRipple [attr.data-pc-section]=\"'content'\">\n                <ng-container *ngIf=\"optionTemplate; else defaultOptionTemplate\">\n                    <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: processedOption.option }\"></ng-container>\n                </ng-container>\n                <ng-template #defaultOptionTemplate>\n                    <span class=\"cax-cascadeselect-item-text\" [attr.data-pc-section]=\"'text'\" [ngClass]=\"{ 'cax-text-action-sm-medium': size == 'sm', 'cax-text-action-md-regular': size == 'md', 'cax-text-action-lg-regular': size == 'lg' }\"\n                        >{{ getOptionLabelToRender(processedOption) }}</span\n                    >\n                </ng-template>\n                <span class=\"cax-cascadeselect-group-icon\" *ngIf=\"isOptionGroup(processedOption)\" [attr.data-pc-section]=\"'groupIcon'\">\n                    <!-- <AngleRightIcon *ngIf=\"!groupIconTemplate\" /> -->\n                    <i *ngIf=\"!groupIconTemplate\" class=\"cax cax-alt-arrow-right\"></i>\n                    <ng-template *ngTemplateOutlet=\"groupIconTemplate\"></ng-template>\n                </span>\n            </div>\n            <cax-cascadeSelectSub\n                *ngIf=\"isOptionGroup(processedOption) && isOptionActive(processedOption)\"\n                [role]=\"'group'\"\n                class=\"cax-cascadeselect-sublist\"\n                [selectId]=\"selectId\"\n                [focusedOptionId]=\"focusedOptionId\"\n                [activeOptionPath]=\"activeOptionPath\"\n                [options]=\"getOptionGroupChildren(processedOption)\"\n                [optionLabel]=\"optionLabel\"\n                [optionValue]=\"optionValue\"\n                [level]=\"level + 1\"\n                (onChange)=\"onOptionChange($event)\"\n                [optionGroupLabel]=\"optionGroupLabel\"\n                [optionGroupChildren]=\"optionGroupChildren\"\n                [dirty]=\"dirty\"\n                [optionTemplate]=\"optionTemplate\"\n                [size]=\"size\"\n            >\n            </cax-cascadeSelectSub>\n        </li>\n    </ng-template>\n</ul>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.caxConfig }], propDecorators: { role: [{
                 type: Input
             }], selectId: [{
@@ -157,6 +157,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: [{ transform: booleanAttribute }]
             }], onChange: [{
                 type: Output
+            }], size: [{
+                type: Input
             }] } });
 /**
  * CascadeSelect is a form component to select a value from a nested structure of options.
@@ -348,6 +350,11 @@ class CascadeSelect {
      * @group Props
      */
     variant = 'outlined';
+    /**
+     * Size of the component.
+     * @group Props
+     */
+    size = 'md';
     /**
      * Whether the dropdown is in loading state.
      * @group Props
@@ -358,6 +365,26 @@ class CascadeSelect {
      * @group Props
      */
     loadingIcon;
+    /**
+     * Label text to display above the component.
+     * @group Props
+     */
+    labelText;
+    /**
+     * When present, it specifies that the component is invalid.
+     * @group Props
+     */
+    invalid = false;
+    /**
+     * Text to display when validation fails.
+     * @group Props
+     */
+    errorText;
+    /**
+     * Helper text to display below the input.
+     * @group Props
+     */
+    successText;
     /**
      * Transition options of the hide animation.
      * @group Props
@@ -463,7 +490,10 @@ class CascadeSelect {
         return {
             'cax-cascadeselect-label': true,
             'cax-placeholder': this.label() === this.placeholder,
-            'cax-cascadeselect-label-empty': !this.value && (this.label() === 'cax-emptylabel' || this.label().length === 0)
+            'cax-cascadeselect-label-empty': !this.value && (this.label() === 'cax-emptylabel' || this.label().length === 0),
+            'cax-text-action-sm-medium': this.size == 'sm',
+            'cax-text-action-md-medium': this.size == 'md',
+            'cax-text-action-lg-medium': this.size == 'lg'
         };
     }
     get focusedOptionId() {
@@ -732,8 +762,10 @@ class CascadeSelect {
     }
     autoUpdateModel() {
         if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption()) {
-            this.focusedOptionInfo().index = this.findFirstFocusedOptionIndex();
-            this.onOptionChange({ originalEvent: null, processedOption: this.visibleOptions()[this.focusedOptionInfo().index], isHide: false });
+            const index = this.findFirstFocusedOptionIndex();
+            const focusedOptionInfo = this.focusedOptionInfo();
+            this.focusedOptionInfo.set({ ...focusedOptionInfo, index });
+            this.onOptionChange({ originalEvent: null, value: this.visibleOptions()[index], isHide: false });
             !this.overlayVisible && this.focusedOptionInfo.set({ index: -1, level: 0, parentKey: '' });
         }
     }
@@ -751,7 +783,7 @@ class CascadeSelect {
             this.scrollInView();
         }
         if (this.selectOnFocus) {
-            this.onOptionChange({ originalEvent: event, processedOption: this.visibleOptions()[index], isHide: false });
+            this.onOptionChange({ originalEvent: event, value: this.visibleOptions()[index], isHide: false });
         }
     }
     onOptionChange(event) {
@@ -760,21 +792,36 @@ class CascadeSelect {
             return;
         const { index, level, parentKey, children } = value;
         const grouped = ObjectUtils.isNotEmpty(children);
-        const activeOptionPath = this.activeOptionPath().filter((p) => p.parentKey !== parentKey);
+        const isActive = this.activeOptionPath().some((p) => p.key === value.key);
+        if (isActive && grouped) {
+            this.activeOptionPath.set([...this.activeOptionPath().filter((p) => p.level < level)]);
+            this.focusedOptionInfo.set({ index, level, parentKey });
+            this.dirty = true;
+            if (isFocus) {
+                DomHandler.focus(this.focusInputViewChild.nativeElement);
+            }
+            this.cd.markForCheck();
+            return;
+        }
+        const activeOptionPath = this.activeOptionPath().filter((p) => p.level < level);
         activeOptionPath.push(value);
         this.focusedOptionInfo.set({ index, level, parentKey });
-        this.activeOptionPath.set(activeOptionPath);
+        this.activeOptionPath.set([...activeOptionPath]);
         grouped ? this.onOptionGroupSelect({ originalEvent, value, isFocus: false }) : this.onOptionSelect({ originalEvent, value, isFocus });
-        isFocus && DomHandler.focus(this.focusInputViewChild.nativeElement);
+        if (isFocus) {
+            DomHandler.focus(this.focusInputViewChild.nativeElement);
+        }
+        this.cd.markForCheck();
     }
     onOptionSelect(event) {
         const { originalEvent, value, isFocus } = event;
         const newValue = this.getOptionValue(value.option);
-        const activeOptionPath = this.activeOptionPath();
+        const activeOptionPath = [...this.activeOptionPath()];
         activeOptionPath.forEach((p) => (p.selected = true));
         this.activeOptionPath.set(activeOptionPath);
         this.updateModel(newValue, originalEvent);
-        isFocus && this.hide(true);
+        isFocus && this.hide(originalEvent, true);
+        this.cd.markForCheck();
     }
     onOptionGroupSelect(event) {
         this.dirty = true;
@@ -900,6 +947,7 @@ class CascadeSelect {
             this.focusedOptionInfo.set({ index: -1, level: 0, parentKey: '' });
             isFocus && DomHandler.focus(this.focusInputViewChild.nativeElement);
             this.onHide.emit(event);
+            this.cd.markForCheck();
         };
         setTimeout(() => {
             _hide();
@@ -909,7 +957,7 @@ class CascadeSelect {
         this.onShow.emit(event);
         this.overlayVisible = true;
         const activeOptionPath = this.hasSelectedOption() ? this.findOptionPathByValue(this.modelValue()) : this.activeOptionPath();
-        this.activeOptionPath.set(activeOptionPath);
+        this.activeOptionPath.set([...activeOptionPath]);
         let focusedOptionInfo;
         if (this.hasSelectedOption() && ObjectUtils.isNotEmpty(this.activeOptionPath())) {
             const processedOption = this.activeOptionPath()[this.activeOptionPath().length - 1];
@@ -920,6 +968,7 @@ class CascadeSelect {
         }
         this.focusedOptionInfo.set(focusedOptionInfo);
         isFocus && DomHandler.focus(this.focusInputViewChild.nativeElement);
+        this.cd.markForCheck();
     }
     clear(event) {
         if (ObjectUtils.isNotEmpty(this.modelValue()) && this.showClear) {
@@ -1014,17 +1063,17 @@ class CascadeSelect {
         this.disabled = val;
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: CascadeSelect, isStandalone: false, selector: "cax-cascadeSelect", inputs: { id: "id", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchMessage: "searchMessage", emptyMessage: "emptyMessage", selectionMessage: "selectionMessage", emptySearchMessage: "emptySearchMessage", emptySelectionMessage: "emptySelectionMessage", searchLocale: "searchLocale", optionDisabled: "optionDisabled", autoOptionFocus: ["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", tabindex: ["tabindex", "tabindex", numberAttribute], ariaLabelledBy: "ariaLabelledBy", inputLabel: "inputLabel", ariaLabel: "ariaLabel", appendTo: "appendTo", disabled: ["disabled", "disabled", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", overlayOptions: "overlayOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], showTransitionOptions: "showTransitionOptions", variant: "variant", loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused || overlayVisible", "class.cax-cascadeselect-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [CASCADESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "panelViewChild", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onContainerClick($event)\" [attr.data-pc-name]=\"'cascadeselect'\" [attr.data-pc-section]=\"'root'\">\r\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\">\r\n        <input\r\n            #focusInput\r\n            readonly\r\n            type=\"text\"\r\n            role=\"combobox\"\r\n            [disabled]=\"disabled\"\r\n            [placeholder]=\"placeholder\"\r\n            [tabindex]=\"!disabled ? tabindex : -1\"\r\n            [attr.id]=\"inputId\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            aria-haspopup=\"tree\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? id + '_tree' : null\"\r\n            [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            (keydown)=\"onInputKeyDown($event)\"\r\n            pAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n    </div>\r\n    <span [ngClass]=\"labelClass\" [attr.data-pc-section]=\"'label'\">\r\n        <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultValueTemplate> {{ label() }} </ng-template>\r\n    </span>\r\n\r\n    <ng-container *ngIf=\"filled && !disabled && showClear\">\r\n        <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-cascadeselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"clearIconTemplate\" class=\"cax-cascadeselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div class=\"cax-cascadeselect-trigger\" role=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'dropdownIcon'\" [attr.aria-hidden]=\"true\">\r\n        <ng-container *ngIf=\"loading; else elseBlock\">\r\n            <ng-container *ngIf=\"loadingIconTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!loadingIconTemplate\">\r\n                <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-cascadeselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\r\n                <span *ngIf=\"!loadingIcon\" [class]=\"'cax-cascadeselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseBlock>\r\n            <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'cax-cascadeselect-trigger-icon'\" />\r\n            <span *ngIf=\"triggerIconTemplate\" class=\"cax-cascadeselect-trigger-icon\">\r\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-template>\r\n    </div>\r\n    <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ searchResultMessageText }} </span>\r\n    <cax-overlay\r\n        #overlay\r\n        [(visible)]=\"overlayVisible\"\r\n        [options]=\"overlayOptions\"\r\n        [target]=\"'@parent'\"\r\n        [appendTo]=\"appendTo\"\r\n        [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        (onAnimationDone)=\"onOverlayAnimationDone($event)\"\r\n        (onBeforeShow)=\"onBeforeShow.emit($event)\"\r\n        (onShow)=\"show($event)\"\r\n        (onBeforeHide)=\"onBeforeHide.emit($event)\"\r\n        (onHide)=\"hide($event)\"\r\n    >\r\n        <ng-template caxTemplate=\"content\">\r\n            <div #panel class=\"cax-cascadeselect-panel cax-component cax-overlay-scroll\" [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [attr.data-pc-section]=\"'panel'\">\r\n                <div class=\"cax-cascadeselect-items-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\r\n                    <cax-cascadeSelectSub\r\n                        [options]=\"processedOptions\"\r\n                        [selectId]=\"id\"\r\n                        [focusedOptionId]=\"focused ? focusedOptionId : undefined\"\r\n                        [activeOptionPath]=\"activeOptionPath()\"\r\n                        [optionLabel]=\"optionLabel\"\r\n                        [optionValue]=\"optionValue\"\r\n                        [level]=\"0\"\r\n                        [optionTemplate]=\"optionTemplate\"\r\n                        [groupIconTemplate]=\"groupIconTemplate\"\r\n                        [optionGroupLabel]=\"optionGroupLabel\"\r\n                        [optionGroupChildren]=\"optionGroupChildren\"\r\n                        [optionDisabled]=\"optionDisabled\"\r\n                        [optionValue]=\"optionValue\"\r\n                        [optionLabel]=\"optionLabel\"\r\n                        [root]=\"true\"\r\n                        (onChange)=\"onOptionChange($event)\"\r\n                        [dirty]=\"dirty\"\r\n                        [role]=\"'tree'\"\r\n                    >\r\n                    </cax-cascadeSelectSub>\r\n                </div>\r\n                <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ selectedMessageText }} </span>\r\n            </div>\r\n        </ng-template>\r\n    </cax-overlay>\r\n</div>\r\n", styles: ["@layer cax{.cax-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.cax-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.cax-cascadeselect-item{cursor:pointer;font-weight:400;white-space:nowrap}.cax-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.cax-cascadeselect-group-icon{margin-left:auto;display:inline-flex}.cax-cascadeselect-items{margin:0;padding:0;list-style-type:none}.cax-fluid .cax-cascadeselect{display:flex}.cax-fluid .cax-cascadeselect .cax-cascadeselect-label{width:1%}.cax-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none;max-height:300px}.cax-cascadeselect-items-wrapper{overflow-x:hidden}.cax-cascadeselect-item-active{overflow:visible!important}.cax-cascadeselect-item-active>.cax-cascadeselect-sublist{display:block;left:100%;top:4px;margin-left:8px}.cax-cascadeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-cascadeselect-clearable,.cax-overlay-modal .cax-cascadeselect-sublist{position:relative}.cax-overlay-modal .cax-cascadeselect-item-active>.cax-cascadeselect-sublist{left:0}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i5.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i6.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: CascadeSelectSub, selector: "cax-cascadeSelectSub", inputs: ["role", "selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupIconTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CascadeSelect, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: CascadeSelect, isStandalone: false, selector: "cax-cascadeSelect", inputs: { id: "id", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], searchMessage: "searchMessage", emptyMessage: "emptyMessage", selectionMessage: "selectionMessage", emptySearchMessage: "emptySearchMessage", emptySelectionMessage: "emptySelectionMessage", searchLocale: "searchLocale", optionDisabled: "optionDisabled", autoOptionFocus: ["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", tabindex: ["tabindex", "tabindex", numberAttribute], ariaLabelledBy: "ariaLabelledBy", inputLabel: "inputLabel", ariaLabel: "ariaLabel", appendTo: "appendTo", disabled: ["disabled", "disabled", booleanAttribute], showClear: ["showClear", "showClear", booleanAttribute], panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", overlayOptions: "overlayOptions", autofocus: ["autofocus", "autofocus", booleanAttribute], showTransitionOptions: "showTransitionOptions", variant: "variant", size: "size", loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", labelText: "labelText", invalid: ["invalid", "invalid", booleanAttribute], errorText: "errorText", successText: "successText", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onChange: "onChange", onGroupChange: "onGroupChange", onShow: "onShow", onHide: "onHide", onClear: "onClear", onBeforeShow: "onBeforeShow", onBeforeHide: "onBeforeHide", onFocus: "onFocus", onBlur: "onBlur" }, host: { properties: { "class.cax-inputwrapper-filled": "filled", "class.cax-inputwrapper-focus": "focused || overlayVisible", "class.cax-cascadeselect-clearable": "showClear && !disabled" }, classAttribute: "cax-element cax-inputwrapper" }, providers: [CASCADESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "panelViewChild", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cax-input-container\" [class]=\"styleClass\" [ngClass]=\"['cax-cascadeselect-' + size]\" [ngStyle]=\"style\" [class.cax-disabled]=\"disabled\">\n    <div [ngClass]=\"{'cax-cascadeselect-main-label': labelText}\">\n        <label *ngIf=\"labelText\" [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-sm-semibold': size == 'sm', 'cax-text-action-md-semibold': size == 'md', 'cax-text-action-lg-semibold': size == 'lg' }\">{{ labelText }}</label>\n    </div>\n    <div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" (click)=\"onContainerClick($event)\" [attr.data-pc-name]=\"'cascadeselect'\" [attr.data-pc-section]=\"'root'\">\n        <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\">\n            <input\n                #focusInput\n                readonly\n                type=\"text\"\n                role=\"combobox\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [tabindex]=\"!disabled ? tabindex : -1\"\n                [attr.id]=\"inputId\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                aria-haspopup=\"tree\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? id + '_tree' : null\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (keydown)=\"onInputKeyDown($event)\"\n                caxAutoFocus\n                [autofocus]=\"autofocus\"\n                [ngClass]=\"{ 'cax-text-action-sm-medium': size == 'sm', 'cax-text-action-md-regular': size == 'md', 'cax-text-action-lg-regular': size == 'lg' }\"\n            />\n        </div>\n        <span [ngClass]=\"labelClass\" [attr.data-pc-section]=\"'label'\">\n            <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\n                <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultValueTemplate> {{ label() }} </ng-template>\n        </span>\n\n        <ng-container *ngIf=\"filled && !disabled && showClear\">\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-cascadeselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\n            <span *ngIf=\"clearIconTemplate\" class=\"cax-cascadeselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n\n        <div class=\"cax-cascadeselect-trigger\" role=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'dropdownIcon'\" [attr.aria-hidden]=\"true\">\n            <ng-container *ngIf=\"loading; else elseBlock\">\n                <ng-container *ngIf=\"loadingIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!loadingIconTemplate\">\n                    <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-cascadeselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                    <span *ngIf=\"!loadingIcon\" [class]=\"'cax-cascadeselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\n                </ng-container>\n            </ng-container>\n            <ng-template #elseBlock>\n                <!-- <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'cax-cascadeselect-trigger-icon'\" /> -->\n                <i *ngIf=\"!triggerIconTemplate && !overlayVisible\" class=\"cax cax-alt-arrow-down\"></i>\n                <i *ngIf=\"!triggerIconTemplate && overlayVisible\" class=\"cax cax-alt-arrow-up\"></i>\n                <span *ngIf=\"triggerIconTemplate\" class=\"cax-cascadeselect-trigger-icon\">\n                    <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n                </span>\n            </ng-template>\n        </div>\n        <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ searchResultMessageText }} </span>\n        <cax-overlay\n            #overlay\n            [(visible)]=\"overlayVisible\"\n            [options]=\"overlayOptions\"\n            [target]=\"'@parent'\"\n            [appendTo]=\"appendTo\"\n            [showTransitionOptions]=\"showTransitionOptions\"\n            [hideTransitionOptions]=\"hideTransitionOptions\"\n            (onAnimationDone)=\"onOverlayAnimationDone($event)\"\n            (onBeforeShow)=\"onBeforeShow.emit($event)\"\n            (onShow)=\"show($event)\"\n            (onBeforeHide)=\"onBeforeHide.emit($event)\"\n            (onHide)=\"hide($event)\"\n        >\n            <ng-template caxTemplate=\"content\">\n                <div #panel class=\"cax-cascadeselect-panel cax-component cax-overlay-scroll\" [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [attr.data-pc-section]=\"'panel'\">\n                    <div class=\"cax-cascadeselect-items-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\n                        <cax-cascadeSelectSub\n                            [options]=\"processedOptions\"\n                            [selectId]=\"id\"\n                            [focusedOptionId]=\"focused ? focusedOptionId : undefined\"\n                            [activeOptionPath]=\"activeOptionPath()\"\n                            [optionLabel]=\"optionLabel\"\n                            [optionValue]=\"optionValue\"\n                            [level]=\"0\"\n                            [optionTemplate]=\"optionTemplate\"\n                            [groupIconTemplate]=\"groupIconTemplate\"\n                            [optionGroupLabel]=\"optionGroupLabel\"\n                            [optionGroupChildren]=\"optionGroupChildren\"\n                            [optionDisabled]=\"optionDisabled\"\n                            [optionValue]=\"optionValue\"\n                            [optionLabel]=\"optionLabel\"\n                            [root]=\"true\"\n                            (onChange)=\"onOptionChange($event)\"\n                            [dirty]=\"dirty\"\n                            [role]=\"'tree'\"\n                            [size]=\"size\"\n                        >\n                        </cax-cascadeSelectSub>\n                    </div>\n                    <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ selectedMessageText }} </span>\n                </div>\n            </ng-template>\n        </cax-overlay>\n    </div>\n    <!-- Error Message with conditional opacity -->\n    <small *ngIf=\"invalid\" class=\"cax-error disabled-opacity\" [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-sm-medium': size == 'sm', 'cax-text-action-md-regular': size == 'md', 'cax-text-action-lg-regular': size == 'lg' }\">\n        {{ errorText }}\n    </small>\n\n    <!-- Helper Text with conditional opacity -->\n    <small *ngIf=\"successText && !invalid\" class=\"cax-helper-text\" [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-sm-medium': size == 'sm', 'cax-text-action-md-regular': size == 'md', 'cax-text-action-lg-regular': size == 'lg' }\">\n        {{ successText }}\n    </small>\n</div>\n", styles: ["@layer cax{.cax-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.cax-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.cax-cascadeselect-item{cursor:pointer;font-weight:400;white-space:nowrap}.cax-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.cax-cascadeselect-group-icon{margin-left:auto;display:inline-flex}.cax-cascadeselect-items{margin:0;padding:0;list-style-type:none}.cax-fluid .cax-cascadeselect{display:flex}.cax-fluid .cax-cascadeselect .cax-cascadeselect-label{width:1%}.cax-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none;max-height:300px}.cax-cascadeselect-items-wrapper{overflow-x:hidden}.cax-cascadeselect-item-active{overflow:visible!important}.cax-cascadeselect-item-active>.cax-cascadeselect-sublist{display:block;left:100%;top:4px;margin-left:8px}.cax-cascadeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-cascadeselect-clearable,.cax-overlay-modal .cax-cascadeselect-sublist{position:relative}.cax-overlay-modal .cax-cascadeselect-item-active>.cax-cascadeselect-sublist{left:0}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Overlay, selector: "cax-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "directive", type: i4.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i5.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: CascadeSelectSub, selector: "cax-cascadeSelectSub", inputs: ["role", "selectId", "activeOptionPath", "optionDisabled", "focusedOptionId", "options", "optionGroupChildren", "optionTemplate", "groupIconTemplate", "level", "optionLabel", "optionValue", "optionGroupLabel", "dirty", "root", "size"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CascadeSelect, decorators: [{
             type: Component,
             args: [{ selector: 'cax-cascadeSelect', host: {
                         class: 'cax-element cax-inputwrapper',
                         '[class.cax-inputwrapper-filled]': 'filled',
                         '[class.cax-inputwrapper-focus]': 'focused || overlayVisible',
                         '[class.cax-cascadeselect-clearable]': 'showClear && !disabled'
-                    }, providers: [CASCADESELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\" (click)=\"onContainerClick($event)\" [attr.data-pc-name]=\"'cascadeselect'\" [attr.data-pc-section]=\"'root'\">\r\n    <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\">\r\n        <input\r\n            #focusInput\r\n            readonly\r\n            type=\"text\"\r\n            role=\"combobox\"\r\n            [disabled]=\"disabled\"\r\n            [placeholder]=\"placeholder\"\r\n            [tabindex]=\"!disabled ? tabindex : -1\"\r\n            [attr.id]=\"inputId\"\r\n            [attr.aria-label]=\"ariaLabel\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n            aria-haspopup=\"tree\"\r\n            [attr.aria-expanded]=\"overlayVisible ?? false\"\r\n            [attr.aria-controls]=\"overlayVisible ? id + '_tree' : null\"\r\n            [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\r\n            (focus)=\"onInputFocus($event)\"\r\n            (blur)=\"onInputBlur($event)\"\r\n            (keydown)=\"onInputKeyDown($event)\"\r\n            pAutoFocus\r\n            [autofocus]=\"autofocus\"\r\n        />\r\n    </div>\r\n    <span [ngClass]=\"labelClass\" [attr.data-pc-section]=\"'label'\">\r\n        <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #defaultValueTemplate> {{ label() }} </ng-template>\r\n    </span>\r\n\r\n    <ng-container *ngIf=\"filled && !disabled && showClear\">\r\n        <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-cascadeselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\r\n        <span *ngIf=\"clearIconTemplate\" class=\"cax-cascadeselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\r\n            <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\r\n        </span>\r\n    </ng-container>\r\n\r\n    <div class=\"cax-cascadeselect-trigger\" role=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'dropdownIcon'\" [attr.aria-hidden]=\"true\">\r\n        <ng-container *ngIf=\"loading; else elseBlock\">\r\n            <ng-container *ngIf=\"loadingIconTemplate\">\r\n                <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!loadingIconTemplate\">\r\n                <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-cascadeselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\r\n                <span *ngIf=\"!loadingIcon\" [class]=\"'cax-cascadeselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #elseBlock>\r\n            <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'cax-cascadeselect-trigger-icon'\" />\r\n            <span *ngIf=\"triggerIconTemplate\" class=\"cax-cascadeselect-trigger-icon\">\r\n                <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\r\n            </span>\r\n        </ng-template>\r\n    </div>\r\n    <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ searchResultMessageText }} </span>\r\n    <cax-overlay\r\n        #overlay\r\n        [(visible)]=\"overlayVisible\"\r\n        [options]=\"overlayOptions\"\r\n        [target]=\"'@parent'\"\r\n        [appendTo]=\"appendTo\"\r\n        [showTransitionOptions]=\"showTransitionOptions\"\r\n        [hideTransitionOptions]=\"hideTransitionOptions\"\r\n        (onAnimationDone)=\"onOverlayAnimationDone($event)\"\r\n        (onBeforeShow)=\"onBeforeShow.emit($event)\"\r\n        (onShow)=\"show($event)\"\r\n        (onBeforeHide)=\"onBeforeHide.emit($event)\"\r\n        (onHide)=\"hide($event)\"\r\n    >\r\n        <ng-template caxTemplate=\"content\">\r\n            <div #panel class=\"cax-cascadeselect-panel cax-component cax-overlay-scroll\" [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [attr.data-pc-section]=\"'panel'\">\r\n                <div class=\"cax-cascadeselect-items-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\r\n                    <cax-cascadeSelectSub\r\n                        [options]=\"processedOptions\"\r\n                        [selectId]=\"id\"\r\n                        [focusedOptionId]=\"focused ? focusedOptionId : undefined\"\r\n                        [activeOptionPath]=\"activeOptionPath()\"\r\n                        [optionLabel]=\"optionLabel\"\r\n                        [optionValue]=\"optionValue\"\r\n                        [level]=\"0\"\r\n                        [optionTemplate]=\"optionTemplate\"\r\n                        [groupIconTemplate]=\"groupIconTemplate\"\r\n                        [optionGroupLabel]=\"optionGroupLabel\"\r\n                        [optionGroupChildren]=\"optionGroupChildren\"\r\n                        [optionDisabled]=\"optionDisabled\"\r\n                        [optionValue]=\"optionValue\"\r\n                        [optionLabel]=\"optionLabel\"\r\n                        [root]=\"true\"\r\n                        (onChange)=\"onOptionChange($event)\"\r\n                        [dirty]=\"dirty\"\r\n                        [role]=\"'tree'\"\r\n                    >\r\n                    </cax-cascadeSelectSub>\r\n                </div>\r\n                <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ selectedMessageText }} </span>\r\n            </div>\r\n        </ng-template>\r\n    </cax-overlay>\r\n</div>\r\n", styles: ["@layer cax{.cax-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.cax-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.cax-cascadeselect-item{cursor:pointer;font-weight:400;white-space:nowrap}.cax-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.cax-cascadeselect-group-icon{margin-left:auto;display:inline-flex}.cax-cascadeselect-items{margin:0;padding:0;list-style-type:none}.cax-fluid .cax-cascadeselect{display:flex}.cax-fluid .cax-cascadeselect .cax-cascadeselect-label{width:1%}.cax-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none;max-height:300px}.cax-cascadeselect-items-wrapper{overflow-x:hidden}.cax-cascadeselect-item-active{overflow:visible!important}.cax-cascadeselect-item-active>.cax-cascadeselect-sublist{display:block;left:100%;top:4px;margin-left:8px}.cax-cascadeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-cascadeselect-clearable,.cax-overlay-modal .cax-cascadeselect-sublist{position:relative}.cax-overlay-modal .cax-cascadeselect-item-active>.cax-cascadeselect-sublist{left:0}}\n"] }]
+                    }, providers: [CASCADESELECT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"cax-input-container\" [class]=\"styleClass\" [ngClass]=\"['cax-cascadeselect-' + size]\" [ngStyle]=\"style\" [class.cax-disabled]=\"disabled\">\n    <div [ngClass]=\"{'cax-cascadeselect-main-label': labelText}\">\n        <label *ngIf=\"labelText\" [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-sm-semibold': size == 'sm', 'cax-text-action-md-semibold': size == 'md', 'cax-text-action-lg-semibold': size == 'lg' }\">{{ labelText }}</label>\n    </div>\n    <div #container [attr.id]=\"id\" [ngClass]=\"containerClass\" (click)=\"onContainerClick($event)\" [attr.data-pc-name]=\"'cascadeselect'\" [attr.data-pc-section]=\"'root'\">\n        <div class=\"cax-hidden-accessible\" [attr.data-pc-section]=\"'hiddenInputWrapper'\">\n            <input\n                #focusInput\n                readonly\n                type=\"text\"\n                role=\"combobox\"\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [tabindex]=\"!disabled ? tabindex : -1\"\n                [attr.id]=\"inputId\"\n                [attr.aria-label]=\"ariaLabel\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                aria-haspopup=\"tree\"\n                [attr.aria-expanded]=\"overlayVisible ?? false\"\n                [attr.aria-controls]=\"overlayVisible ? id + '_tree' : null\"\n                [attr.aria-activedescendant]=\"focused ? focusedOptionId : undefined\"\n                (focus)=\"onInputFocus($event)\"\n                (blur)=\"onInputBlur($event)\"\n                (keydown)=\"onInputKeyDown($event)\"\n                caxAutoFocus\n                [autofocus]=\"autofocus\"\n                [ngClass]=\"{ 'cax-text-action-sm-medium': size == 'sm', 'cax-text-action-md-regular': size == 'md', 'cax-text-action-lg-regular': size == 'lg' }\"\n            />\n        </div>\n        <span [ngClass]=\"labelClass\" [attr.data-pc-section]=\"'label'\">\n            <ng-container *ngIf=\"valueTemplate; else defaultValueTemplate\">\n                <ng-container *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value, placeholder: placeholder }\"></ng-container>\n            </ng-container>\n            <ng-template #defaultValueTemplate> {{ label() }} </ng-template>\n        </span>\n\n        <ng-container *ngIf=\"filled && !disabled && showClear\">\n            <TimesIcon *ngIf=\"!clearIconTemplate\" [styleClass]=\"'cax-cascadeselect-clear-icon'\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\" />\n            <span *ngIf=\"clearIconTemplate\" class=\"cax-cascadeselect-clear-icon\" (click)=\"clear($event)\" [attr.data-pc-section]=\"'clearicon'\" [attr.aria-hidden]=\"true\">\n                <ng-template *ngTemplateOutlet=\"clearIconTemplate\"></ng-template>\n            </span>\n        </ng-container>\n\n        <div class=\"cax-cascadeselect-trigger\" role=\"button\" aria-haspopup=\"listbox\" [attr.aria-expanded]=\"overlayVisible ?? false\" [attr.data-pc-section]=\"'dropdownIcon'\" [attr.aria-hidden]=\"true\">\n            <ng-container *ngIf=\"loading; else elseBlock\">\n                <ng-container *ngIf=\"loadingIconTemplate\">\n                    <ng-container *ngTemplateOutlet=\"loadingIconTemplate\"></ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"!loadingIconTemplate\">\n                    <span *ngIf=\"loadingIcon\" [ngClass]=\"'cax-cascadeselect-trigger-icon pi-spin ' + loadingIcon\" aria-hidden=\"true\"></span>\n                    <span *ngIf=\"!loadingIcon\" [class]=\"'cax-cascadeselect-trigger-icon pi pi-spinner pi-spin'\" aria-hidden=\"true\"></span>\n                </ng-container>\n            </ng-container>\n            <ng-template #elseBlock>\n                <!-- <ChevronDownIcon *ngIf=\"!triggerIconTemplate\" [styleClass]=\"'cax-cascadeselect-trigger-icon'\" /> -->\n                <i *ngIf=\"!triggerIconTemplate && !overlayVisible\" class=\"cax cax-alt-arrow-down\"></i>\n                <i *ngIf=\"!triggerIconTemplate && overlayVisible\" class=\"cax cax-alt-arrow-up\"></i>\n                <span *ngIf=\"triggerIconTemplate\" class=\"cax-cascadeselect-trigger-icon\">\n                    <ng-template *ngTemplateOutlet=\"triggerIconTemplate\"></ng-template>\n                </span>\n            </ng-template>\n        </div>\n        <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ searchResultMessageText }} </span>\n        <cax-overlay\n            #overlay\n            [(visible)]=\"overlayVisible\"\n            [options]=\"overlayOptions\"\n            [target]=\"'@parent'\"\n            [appendTo]=\"appendTo\"\n            [showTransitionOptions]=\"showTransitionOptions\"\n            [hideTransitionOptions]=\"hideTransitionOptions\"\n            (onAnimationDone)=\"onOverlayAnimationDone($event)\"\n            (onBeforeShow)=\"onBeforeShow.emit($event)\"\n            (onShow)=\"show($event)\"\n            (onBeforeHide)=\"onBeforeHide.emit($event)\"\n            (onHide)=\"hide($event)\"\n        >\n            <ng-template caxTemplate=\"content\">\n                <div #panel class=\"cax-cascadeselect-panel cax-component cax-overlay-scroll\" [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [attr.data-pc-section]=\"'panel'\">\n                    <div class=\"cax-cascadeselect-items-wrapper\" [attr.data-pc-section]=\"'wrapper'\">\n                        <cax-cascadeSelectSub\n                            [options]=\"processedOptions\"\n                            [selectId]=\"id\"\n                            [focusedOptionId]=\"focused ? focusedOptionId : undefined\"\n                            [activeOptionPath]=\"activeOptionPath()\"\n                            [optionLabel]=\"optionLabel\"\n                            [optionValue]=\"optionValue\"\n                            [level]=\"0\"\n                            [optionTemplate]=\"optionTemplate\"\n                            [groupIconTemplate]=\"groupIconTemplate\"\n                            [optionGroupLabel]=\"optionGroupLabel\"\n                            [optionGroupChildren]=\"optionGroupChildren\"\n                            [optionDisabled]=\"optionDisabled\"\n                            [optionValue]=\"optionValue\"\n                            [optionLabel]=\"optionLabel\"\n                            [root]=\"true\"\n                            (onChange)=\"onOptionChange($event)\"\n                            [dirty]=\"dirty\"\n                            [role]=\"'tree'\"\n                            [size]=\"size\"\n                        >\n                        </cax-cascadeSelectSub>\n                    </div>\n                    <span role=\"status\" aria-live=\"polite\" class=\"cax-hidden-accessible\"> {{ selectedMessageText }} </span>\n                </div>\n            </ng-template>\n        </cax-overlay>\n    </div>\n    <!-- Error Message with conditional opacity -->\n    <small *ngIf=\"invalid\" class=\"cax-error disabled-opacity\" [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-sm-medium': size == 'sm', 'cax-text-action-md-regular': size == 'md', 'cax-text-action-lg-regular': size == 'lg' }\">\n        {{ errorText }}\n    </small>\n\n    <!-- Helper Text with conditional opacity -->\n    <small *ngIf=\"successText && !invalid\" class=\"cax-helper-text\" [ngClass]=\"{ 'disabled-opacity': disabled, 'cax-text-action-sm-medium': size == 'sm', 'cax-text-action-md-regular': size == 'md', 'cax-text-action-lg-regular': size == 'lg' }\">\n        {{ successText }}\n    </small>\n</div>\n", styles: ["@layer cax{.cax-cascadeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.cax-cascadeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.cax-cascadeselect-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.cax-cascadeselect-label-empty{overflow:hidden;visibility:hidden}.cax-cascadeselect-item{cursor:pointer;font-weight:400;white-space:nowrap}.cax-cascadeselect-item-content{display:flex;align-items:center;overflow:hidden;position:relative}.cax-cascadeselect-group-icon{margin-left:auto;display:inline-flex}.cax-cascadeselect-items{margin:0;padding:0;list-style-type:none}.cax-fluid .cax-cascadeselect{display:flex}.cax-fluid .cax-cascadeselect .cax-cascadeselect-label{width:1%}.cax-cascadeselect-sublist{position:absolute;min-width:100%;z-index:1;display:none;max-height:300px}.cax-cascadeselect-items-wrapper{overflow-x:hidden}.cax-cascadeselect-item-active{overflow:visible!important}.cax-cascadeselect-item-active>.cax-cascadeselect-sublist{display:block;left:100%;top:4px;margin-left:8px}.cax-cascadeselect-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.cax-cascadeselect-clearable,.cax-overlay-modal .cax-cascadeselect-sublist{position:relative}.cax-overlay-modal .cax-cascadeselect-item-active>.cax-cascadeselect-sublist{left:0}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.caxConfig }, { type: i1.OverlayService }], propDecorators: { id: [{
                 type: Input
             }], selectOnFocus: [{
@@ -1099,11 +1148,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Input
             }], variant: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], loading: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], loadingIcon: [{
                 type: Input
+            }], labelText: [{
+                type: Input
+            }], invalid: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], errorText: [{
+                type: Input
+            }], successText: [{
+                type: Input
             }], hideTransitionOptions: [{
                 type: Input
             }], onChange: [{
@@ -1142,11 +1202,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class CascadeSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectModule, declarations: [CascadeSelect, CascadeSelectSub], imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon], exports: [CascadeSelect, OverlayModule, CascadeSelectSub, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectModule, imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon, OverlayModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CascadeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: CascadeSelectModule, declarations: [CascadeSelect, CascadeSelectSub], imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon], exports: [CascadeSelect, OverlayModule, CascadeSelectSub, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CascadeSelectModule, imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon, OverlayModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: CascadeSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: CascadeSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, OverlayModule, SharedModule, RippleModule, AutoFocusModule, ChevronDownIcon, AngleRightIcon, TimesIcon],