cax-design-system 2.7.2 → 2.7.4

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

@@ -150,6 +150,12 @@ class InputTextareaComponent {
     charCounter = false;
     /** Value of the textarea */
     value = '';
+    /** Text to display when the input is valid */
+    successText;
+    /** Text to display when the input is invalid */
+    errorText;
+    /** Whether the input is in an invalid state */
+    invalid = false;
     /** Event emitted when the textarea is resized */
     onResize = new EventEmitter();
     /** Reference to the textarea element */
@@ -206,13 +212,13 @@ class InputTextareaComponent {
         this.onResize.emit(event || {});
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: InputTextareaComponent, selector: "cax-inputtextarea", inputs: { label: "label", textareaId: "textareaId", rows: "rows", cols: "cols", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", disabled: "disabled", readonly: "readonly", autoResize: "autoResize", variant: "variant", charCounter: "charCounter", value: "value", style: "style" }, outputs: { onResize: "onResize", valueChange: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: InputTextareaComponent, selector: "cax-inputtextarea", inputs: { label: "label", textareaId: "textareaId", rows: "rows", cols: "cols", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", disabled: "disabled", readonly: "readonly", autoResize: "autoResize", variant: "variant", charCounter: "charCounter", value: "value", successText: "successText", errorText: "errorText", invalid: "invalid", style: "style" }, outputs: { onResize: "onResize", valueChange: "valueChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputTextareaComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "el", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<div class=\"cax-input-container\">\r\n    <label [attr.for]=\"textareaId\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ label }} </label>\r\n    <textarea\r\n        #textarea\r\n        [rows]=\"rows\"\r\n        [cols]=\"cols\"\r\n        [placeholder]=\"placeholder\"\r\n        [maxlength]=\"maxlength\"\r\n        [minlength]=\"minlength\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly ? true : null\"\r\n        [ngClass]=\"{\r\n      'filled-style': variant === 'filled',\r\n      'outlined-style': variant === 'outlined',\r\n      'cax-inputtextarea-disabled': disabled,\r\n      'disabled-opacity': disabled\r\n    }\"\r\n        caxInputTextarea\r\n        [autoResize]=\"autoResize\"\r\n        (input)=\"onInput($event)\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"value = $event; valueChange.emit($event); onChange($event); onTouched()\"\r\n        (blur)=\"onTouched()\"\r\n        [ngStyle]=\"style\"\r\n    ></textarea>\r\n</div>\r\n", styles: ["@layer cax{.cax-inputtextarea-resizable{overflow:hidden;resize:none}.cax-fluid .cax-inputtextarea{width:100%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputTextareadirective, selector: "[caxInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }] });
+        ], viewQueries: [{ propertyName: "el", first: true, predicate: ["textarea"], descendants: true }], ngImport: i0, template: "<div class=\"cax-input-container\">\r\n    <label [attr.for]=\"textareaId\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ label }} </label>\r\n    <textarea\r\n        #textarea\r\n        [rows]=\"rows\"\r\n        [cols]=\"cols\"\r\n        [placeholder]=\"placeholder\"\r\n        [maxlength]=\"maxlength\"\r\n        [minlength]=\"minlength\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly ? true : null\"\r\n        [ngClass]=\"{\r\n      'filled-style': variant === 'filled',\r\n      'outlined-style': variant === 'outlined',\r\n      'cax-inputtextarea-disabled': disabled,\r\n      'disabled-opacity': disabled,\r\n      'cax-input-invalid': invalid\r\n    }\"\r\n        caxInputTextarea\r\n        [autoResize]=\"autoResize\"\r\n        (input)=\"onInput($event)\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"value = $event; valueChange.emit($event); onChange($event); onTouched()\"\r\n        (blur)=\"onTouched()\"\r\n        [ngStyle]=\"style\"\r\n    ></textarea>\r\n\r\n    <!-- Error Message with conditional opacity -->\r\n    <small *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ errorText }} </small>\r\n\r\n    <!-- Helper Text with conditional opacity -->\r\n    <small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ successText }} </small>\r\n</div>\r\n", styles: ["@layer cax{.cax-inputtextarea-resizable{overflow:hidden;resize:none}.cax-fluid .cax-inputtextarea{width:100%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputTextareadirective, selector: "[caxInputTextarea]", inputs: ["autoResize", "variant"], outputs: ["onResize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
@@ -222,7 +228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: forwardRef(() => InputTextareaComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"cax-input-container\">\r\n    <label [attr.for]=\"textareaId\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ label }} </label>\r\n    <textarea\r\n        #textarea\r\n        [rows]=\"rows\"\r\n        [cols]=\"cols\"\r\n        [placeholder]=\"placeholder\"\r\n        [maxlength]=\"maxlength\"\r\n        [minlength]=\"minlength\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly ? true : null\"\r\n        [ngClass]=\"{\r\n      'filled-style': variant === 'filled',\r\n      'outlined-style': variant === 'outlined',\r\n      'cax-inputtextarea-disabled': disabled,\r\n      'disabled-opacity': disabled\r\n    }\"\r\n        caxInputTextarea\r\n        [autoResize]=\"autoResize\"\r\n        (input)=\"onInput($event)\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"value = $event; valueChange.emit($event); onChange($event); onTouched()\"\r\n        (blur)=\"onTouched()\"\r\n        [ngStyle]=\"style\"\r\n    ></textarea>\r\n</div>\r\n", styles: ["@layer cax{.cax-inputtextarea-resizable{overflow:hidden;resize:none}.cax-fluid .cax-inputtextarea{width:100%}}\n"] }]
+                    ], template: "<div class=\"cax-input-container\">\r\n    <label [attr.for]=\"textareaId\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ label }} </label>\r\n    <textarea\r\n        #textarea\r\n        [rows]=\"rows\"\r\n        [cols]=\"cols\"\r\n        [placeholder]=\"placeholder\"\r\n        [maxlength]=\"maxlength\"\r\n        [minlength]=\"minlength\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly ? true : null\"\r\n        [ngClass]=\"{\r\n      'filled-style': variant === 'filled',\r\n      'outlined-style': variant === 'outlined',\r\n      'cax-inputtextarea-disabled': disabled,\r\n      'disabled-opacity': disabled,\r\n      'cax-input-invalid': invalid\r\n    }\"\r\n        caxInputTextarea\r\n        [autoResize]=\"autoResize\"\r\n        (input)=\"onInput($event)\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"value = $event; valueChange.emit($event); onChange($event); onTouched()\"\r\n        (blur)=\"onTouched()\"\r\n        [ngStyle]=\"style\"\r\n    ></textarea>\r\n\r\n    <!-- Error Message with conditional opacity -->\r\n    <small *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ errorText }} </small>\r\n\r\n    <!-- Helper Text with conditional opacity -->\r\n    <small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ successText }} </small>\r\n</div>\r\n", styles: ["@layer cax{.cax-inputtextarea-resizable{overflow:hidden;resize:none}.cax-fluid .cax-inputtextarea{width:100%}}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], textareaId: [{
@@ -249,6 +255,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], value: [{
                 type: Input
+            }], successText: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], invalid: [{
+                type: Input
             }], onResize: [{
                 type: Output
             }], el: [{

package/fesm2022/cax-design-system-inputtextarea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-inputtextarea.mjs","sources":["../../src/app/components/inputtextarea/inputtextarea.directive.ts","../../src/app/components/inputtextarea/inputtextarea.component.ts","../../src/app/components/inputtextarea/inputtextarea.html","../../src/app/components/inputtextarea/inputtextarea.module.ts","../../src/app/components/inputtextarea/cax-design-system-inputtextarea.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, Input, Output, EventEmitter, Optional, AfterViewInit, OnInit, OnDestroy, ChangeDetectorRef, AfterViewChecked, booleanAttribute } from '@angular/core';\nimport { NgModel, NgControl, FormControl } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { caxConfig } from 'cax-design-system/api';\n/**\n * InputTextarea adds styling and autoResize functionality to standard textarea element.\n * @group Components\n */\n@Directive({\n    selector: '[caxInputTextarea]',\n    host: {\n        class: 'cax-inputtextarea cax-inputtext cax-component cax-element',\n        '[class.cax-filled]': 'filled',\n        '[class.cax-inputtextarea-resizable]': 'autoResize',\n        '[class.cax-variant-filled]': 'variant === \"filled\" || config.inputStyle() === \"filled\"'\n    }\n})\nexport class InputTextareadirective implements OnInit, AfterViewInit, OnDestroy {\n    /**\n     * When present, textarea size changes as being typed.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autoResize: boolean | undefined;\n    /**\n     * Specifies the input variant of the component.\n     * @group Props\n     */\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n    /**\n     * Callback to invoke on textarea resize.\n     * @param {(Event | {})} event - Custom resize event.\n     * @group Emits\n     */\n    @Output() onResize: EventEmitter<Event | {}> = new EventEmitter<Event | {}>();\n\n    filled: boolean | undefined;\n\n    cachedScrollHeight: number | undefined;\n\n    ngModelSubscription: Subscription | undefined;\n\n    ngControlSubscription: Subscription | undefined;\n\n    constructor(\n        public el: ElementRef,\n        @Optional() public ngModel: NgModel,\n        @Optional() public control: NgControl,\n        private cd: ChangeDetectorRef,\n        public config: caxConfig\n    ) {}\n\n    ngOnInit() {\n        if (this.ngModel) {\n            this.ngModelSubscription = (this.ngModel as any).valueChanges.subscribe(() => {\n                this.updateState();\n            });\n        }\n\n        if (this.control) {\n            this.ngControlSubscription = (this.control as any).valueChanges.subscribe(() => {\n                this.updateState();\n            });\n        }\n    }\n\n    ngAfterViewInit() {\n        if (this.autoResize) this.resize();\n\n        this.updateFilledState();\n        this.cd.detectChanges();\n    }\n\n    @HostListener('input', ['$event'])\n    onInput(e: Event) {\n        this.updateState();\n    }\n\n    updateFilledState() {\n        this.filled = this.el.nativeElement.value && this.el.nativeElement.value.length;\n    }\n\n    resize(event?: Event) {\n        this.el.nativeElement.style.height = 'auto';\n        this.el.nativeElement.style.height = this.el.nativeElement.scrollHeight + 'px';\n\n        if (parseFloat(this.el.nativeElement.style.height) >= parseFloat(this.el.nativeElement.style.maxHeight)) {\n            this.el.nativeElement.style.overflowY = 'scroll';\n            this.el.nativeElement.style.height = this.el.nativeElement.style.maxHeight;\n        } else {\n            this.el.nativeElement.style.overflow = 'hidden';\n        }\n\n        this.onResize.emit(event || {});\n    }\n\n    updateState() {\n        this.updateFilledState();\n\n        if (this.autoResize) {\n            this.resize();\n        }\n    }\n\n    ngOnDestroy() {\n        if (this.ngModelSubscription) {\n            this.ngModelSubscription.unsubscribe();\n        }\n\n        if (this.ngControlSubscription) {\n            this.ngControlSubscription.unsubscribe();\n        }\n    }\n}\n","import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n    selector: 'cax-inputtextarea',\n    templateUrl: './inputtextarea.html',\n    styleUrls: ['./inputtextarea.scss'],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => InputTextareaComponent),\n            multi: true\n        }\n    ]\n})\nexport class InputTextareaComponent implements AfterViewInit {\n    /** Label for the textarea */\n    @Input() label: string = '';\n\n    /** Unique ID for the textarea */\n    @Input() textareaId: string = `textarea-${Math.random().toString(36).substr(2, 9)}`;\n\n    /** Number of rows for the textarea */\n    @Input() rows: number = 5;\n\n    /** Number of columns for the textarea */\n    @Input() cols: number = 50;\n\n    /** Placeholder text for the textarea */\n    @Input() placeholder: string = '';\n\n    /** Maximum number of characters allowed */\n    @Input() maxlength: number | null = null;\n\n    /** Minimum number of characters required */\n    @Input() minlength: number | null = null;\n\n    /** Whether the textarea is disabled */\n    @Input() disabled: boolean = false;\n\n    /** Whether the textarea is read-only */\n    @Input() readonly: boolean = false;\n\n    /** Whether to enable the auto-resize feature */\n    @Input() autoResize: boolean = false;\n\n    /** Variant of the textarea: 'filled' or 'outlined' */\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n\n    /** Whether to show the character counter */\n    @Input() charCounter: boolean = false;\n\n    /** Value of the textarea */\n    @Input() value: string = '';\n\n    /** Event emitted when the textarea is resized */\n    @Output() onResize: EventEmitter<Event | {}> = new EventEmitter<Event | {}>();\n\n    /** Reference to the textarea element */\n    @ViewChild('textarea') el!: ElementRef;\n\n    @Input() style?: { [key: string]: string };\n\n    /** Event handler for resize events */\n    onResizeHandler(event: Event) {\n        this.onResize.emit(event);\n        if (this.autoResize) {\n            this.resize();\n        }\n    }\n\n    ngAfterViewInit() {\n        if (this.autoResize) {\n            this.resize();\n        }\n    }\n\n    @Output() valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n    // Changed from private to public to allow access from template\n    onChange: (value: string) => void = () => {};\n    onTouched: () => void = () => {};\n\n    writeValue(value: string): void {\n        this.value = value || '';\n    }\n\n    registerOnChange(fn: (value: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    onInput(event: Event): void {\n        const input = event.target as HTMLInputElement;\n        this.value = input.value;\n        this.valueChange.emit(this.value);\n        this.onChange(this.value);\n\n        // Also handle resize if autoResize is enabled\n        if (this.autoResize) {\n            this.resize(event);\n        }\n    }\n\n    resize(event?: Event) {\n        this.el.nativeElement.style.height = 'auto';\n        this.el.nativeElement.style.height = this.el.nativeElement.scrollHeight + 'px';\n\n        if (parseFloat(this.el.nativeElement.style.height) >= parseFloat(this.el.nativeElement.style.maxHeight)) {\n            this.el.nativeElement.style.overflowY = 'scroll';\n            this.el.nativeElement.style.height = this.el.nativeElement.style.maxHeight;\n        } else {\n            this.el.nativeElement.style.overflow = 'hidden';\n        }\n\n        this.onResize.emit(event || {});\n    }\n}\n","<div class=\"cax-input-container\">\r\n    <label [attr.for]=\"textareaId\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ label }} </label>\r\n    <textarea\r\n        #textarea\r\n        [rows]=\"rows\"\r\n        [cols]=\"cols\"\r\n        [placeholder]=\"placeholder\"\r\n        [maxlength]=\"maxlength\"\r\n        [minlength]=\"minlength\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly ? true : null\"\r\n        [ngClass]=\"{\r\n      'filled-style': variant === 'filled',\r\n      'outlined-style': variant === 'outlined',\r\n      'cax-inputtextarea-disabled': disabled,\r\n      'disabled-opacity': disabled\r\n    }\"\r\n        caxInputTextarea\r\n        [autoResize]=\"autoResize\"\r\n        (input)=\"onInput($event)\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"value = $event; valueChange.emit($event); onChange($event); onTouched()\"\r\n        (blur)=\"onTouched()\"\r\n        [ngStyle]=\"style\"\r\n    ></textarea>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { InputTextareadirective } from './inputtextarea.directive';\nimport { InputTextareaComponent } from './inputtextarea.component';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n    imports: [CommonModule, FormsModule],\n    exports: [InputTextareadirective, InputTextareaComponent],\n    declarations: [InputTextareadirective, InputTextareaComponent]\n})\nexport class InputTextareaModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1","i2","i3.InputTextareadirective"],"mappings":"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"}
+{"version":3,"file":"cax-design-system-inputtextarea.mjs","sources":["../../src/app/components/inputtextarea/inputtextarea.directive.ts","../../src/app/components/inputtextarea/inputtextarea.component.ts","../../src/app/components/inputtextarea/inputtextarea.html","../../src/app/components/inputtextarea/inputtextarea.module.ts","../../src/app/components/inputtextarea/cax-design-system-inputtextarea.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, Input, Output, EventEmitter, Optional, AfterViewInit, OnInit, OnDestroy, ChangeDetectorRef, AfterViewChecked, booleanAttribute } from '@angular/core';\nimport { NgModel, NgControl, FormControl } from '@angular/forms';\nimport { Subscription } from 'rxjs';\nimport { caxConfig } from 'cax-design-system/api';\n/**\n * InputTextarea adds styling and autoResize functionality to standard textarea element.\n * @group Components\n */\n@Directive({\n    selector: '[caxInputTextarea]',\n    host: {\n        class: 'cax-inputtextarea cax-inputtext cax-component cax-element',\n        '[class.cax-filled]': 'filled',\n        '[class.cax-inputtextarea-resizable]': 'autoResize',\n        '[class.cax-variant-filled]': 'variant === \"filled\" || config.inputStyle() === \"filled\"'\n    }\n})\nexport class InputTextareadirective implements OnInit, AfterViewInit, OnDestroy {\n    /**\n     * When present, textarea size changes as being typed.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autoResize: boolean | undefined;\n    /**\n     * Specifies the input variant of the component.\n     * @group Props\n     */\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n    /**\n     * Callback to invoke on textarea resize.\n     * @param {(Event | {})} event - Custom resize event.\n     * @group Emits\n     */\n    @Output() onResize: EventEmitter<Event | {}> = new EventEmitter<Event | {}>();\n\n    filled: boolean | undefined;\n\n    cachedScrollHeight: number | undefined;\n\n    ngModelSubscription: Subscription | undefined;\n\n    ngControlSubscription: Subscription | undefined;\n\n    constructor(\n        public el: ElementRef,\n        @Optional() public ngModel: NgModel,\n        @Optional() public control: NgControl,\n        private cd: ChangeDetectorRef,\n        public config: caxConfig\n    ) {}\n\n    ngOnInit() {\n        if (this.ngModel) {\n            this.ngModelSubscription = (this.ngModel as any).valueChanges.subscribe(() => {\n                this.updateState();\n            });\n        }\n\n        if (this.control) {\n            this.ngControlSubscription = (this.control as any).valueChanges.subscribe(() => {\n                this.updateState();\n            });\n        }\n    }\n\n    ngAfterViewInit() {\n        if (this.autoResize) this.resize();\n\n        this.updateFilledState();\n        this.cd.detectChanges();\n    }\n\n    @HostListener('input', ['$event'])\n    onInput(e: Event) {\n        this.updateState();\n    }\n\n    updateFilledState() {\n        this.filled = this.el.nativeElement.value && this.el.nativeElement.value.length;\n    }\n\n    resize(event?: Event) {\n        this.el.nativeElement.style.height = 'auto';\n        this.el.nativeElement.style.height = this.el.nativeElement.scrollHeight + 'px';\n\n        if (parseFloat(this.el.nativeElement.style.height) >= parseFloat(this.el.nativeElement.style.maxHeight)) {\n            this.el.nativeElement.style.overflowY = 'scroll';\n            this.el.nativeElement.style.height = this.el.nativeElement.style.maxHeight;\n        } else {\n            this.el.nativeElement.style.overflow = 'hidden';\n        }\n\n        this.onResize.emit(event || {});\n    }\n\n    updateState() {\n        this.updateFilledState();\n\n        if (this.autoResize) {\n            this.resize();\n        }\n    }\n\n    ngOnDestroy() {\n        if (this.ngModelSubscription) {\n            this.ngModelSubscription.unsubscribe();\n        }\n\n        if (this.ngControlSubscription) {\n            this.ngControlSubscription.unsubscribe();\n        }\n    }\n}\n","import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit, forwardRef } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n    selector: 'cax-inputtextarea',\n    templateUrl: './inputtextarea.html',\n    styleUrls: ['./inputtextarea.scss'],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => InputTextareaComponent),\n            multi: true\n        }\n    ]\n})\nexport class InputTextareaComponent implements AfterViewInit {\n    /** Label for the textarea */\n    @Input() label: string = '';\n\n    /** Unique ID for the textarea */\n    @Input() textareaId: string = `textarea-${Math.random().toString(36).substr(2, 9)}`;\n\n    /** Number of rows for the textarea */\n    @Input() rows: number = 5;\n\n    /** Number of columns for the textarea */\n    @Input() cols: number = 50;\n\n    /** Placeholder text for the textarea */\n    @Input() placeholder: string = '';\n\n    /** Maximum number of characters allowed */\n    @Input() maxlength: number | null = null;\n\n    /** Minimum number of characters required */\n    @Input() minlength: number | null = null;\n\n    /** Whether the textarea is disabled */\n    @Input() disabled: boolean = false;\n\n    /** Whether the textarea is read-only */\n    @Input() readonly: boolean = false;\n\n    /** Whether to enable the auto-resize feature */\n    @Input() autoResize: boolean = false;\n\n    /** Variant of the textarea: 'filled' or 'outlined' */\n    @Input() variant: 'filled' | 'outlined' = 'outlined';\n\n    /** Whether to show the character counter */\n    @Input() charCounter: boolean = false;\n\n    /** Value of the textarea */\n    @Input() value: string = '';\n\n    /** Text to display when the input is valid */\n    @Input() successText?: string;\n\n    /** Text to display when the input is invalid */\n    @Input() errorText?: string;\n\n    /** Whether the input is in an invalid state */\n    @Input() invalid: boolean = false;\n\n    /** Event emitted when the textarea is resized */\n    @Output() onResize: EventEmitter<Event | {}> = new EventEmitter<Event | {}>();\n\n    /** Reference to the textarea element */\n    @ViewChild('textarea') el!: ElementRef;\n\n    @Input() style?: { [key: string]: string };\n\n    /** Event handler for resize events */\n    onResizeHandler(event: Event) {\n        this.onResize.emit(event);\n        if (this.autoResize) {\n            this.resize();\n        }\n    }\n\n    ngAfterViewInit() {\n        if (this.autoResize) {\n            this.resize();\n        }\n    }\n\n    @Output() valueChange: EventEmitter<string> = new EventEmitter<string>();\n\n    // Changed from private to public to allow access from template\n    onChange: (value: string) => void = () => {};\n    onTouched: () => void = () => {};\n\n    writeValue(value: string): void {\n        this.value = value || '';\n    }\n\n    registerOnChange(fn: (value: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    onInput(event: Event): void {\n        const input = event.target as HTMLInputElement;\n        this.value = input.value;\n        this.valueChange.emit(this.value);\n        this.onChange(this.value);\n\n        // Also handle resize if autoResize is enabled\n        if (this.autoResize) {\n            this.resize(event);\n        }\n    }\n\n    resize(event?: Event) {\n        this.el.nativeElement.style.height = 'auto';\n        this.el.nativeElement.style.height = this.el.nativeElement.scrollHeight + 'px';\n\n        if (parseFloat(this.el.nativeElement.style.height) >= parseFloat(this.el.nativeElement.style.maxHeight)) {\n            this.el.nativeElement.style.overflowY = 'scroll';\n            this.el.nativeElement.style.height = this.el.nativeElement.style.maxHeight;\n        } else {\n            this.el.nativeElement.style.overflow = 'hidden';\n        }\n\n        this.onResize.emit(event || {});\n    }\n}\n","<div class=\"cax-input-container\">\r\n    <label [attr.for]=\"textareaId\" class=\"cax-label\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ label }} </label>\r\n    <textarea\r\n        #textarea\r\n        [rows]=\"rows\"\r\n        [cols]=\"cols\"\r\n        [placeholder]=\"placeholder\"\r\n        [maxlength]=\"maxlength\"\r\n        [minlength]=\"minlength\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly ? true : null\"\r\n        [ngClass]=\"{\r\n      'filled-style': variant === 'filled',\r\n      'outlined-style': variant === 'outlined',\r\n      'cax-inputtextarea-disabled': disabled,\r\n      'disabled-opacity': disabled,\r\n      'cax-input-invalid': invalid\r\n    }\"\r\n        caxInputTextarea\r\n        [autoResize]=\"autoResize\"\r\n        (input)=\"onInput($event)\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"value = $event; valueChange.emit($event); onChange($event); onTouched()\"\r\n        (blur)=\"onTouched()\"\r\n        [ngStyle]=\"style\"\r\n    ></textarea>\r\n\r\n    <!-- Error Message with conditional opacity -->\r\n    <small *ngIf=\"invalid\" id=\"helper-text\" class=\"cax-error\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ errorText }} </small>\r\n\r\n    <!-- Helper Text with conditional opacity -->\r\n    <small *ngIf=\"successText && !invalid\" id=\"helper-text\" class=\"cax-helper-text\" [ngClass]=\"{'disabled-opacity': disabled}\"> {{ successText }} </small>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { InputTextareadirective } from './inputtextarea.directive';\nimport { InputTextareaComponent } from './inputtextarea.component';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n    imports: [CommonModule, FormsModule],\n    exports: [InputTextareadirective, InputTextareaComponent],\n    declarations: [InputTextareadirective, InputTextareaComponent]\n})\nexport class InputTextareaModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1","i2","i3.InputTextareadirective"],"mappings":"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"}

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

@@ -22,6 +22,7 @@ import * as i9 from 'cax-design-system/badge';
 import { BadgeModule } from 'cax-design-system/badge';
 
 class Navigation {
+    cd;
     header;
     topNavList;
     bottomNavList;
@@ -43,6 +44,9 @@ class Navigation {
     advanceSubscriptionList;
     displaySubscriptionName;
     notificationCount = 0;
+    constructor(cd) {
+        this.cd = cd;
+    }
     onNavListItemChange = new EventEmitter();
     onNotificationClick = new EventEmitter();
     onHelpCentreClick = new EventEmitter();
@@ -62,14 +66,20 @@ class Navigation {
     headerContainer;
     ngOnChanges() {
         if (this.activeTab == 'notifications') {
-            if (this.notifications)
+            if (this.notifications) {
+                this.topNavList?.map((list) => (list.active = false));
+                this.bottomNavList?.map((list) => (list.active = false));
                 this.notificationActive = true;
+            }
             else
                 this.topNavList[0].active = true;
         }
         else if (this.activeTab == 'help-centre') {
-            if (this.helpCentre)
+            if (this.helpCentre) {
+                this.topNavList?.map((list) => (list.active = false));
+                this.bottomNavList?.map((list) => (list.active = false));
                 this.helpCentreActive = true;
+            }
             else
                 this.topNavList[0].active = true;
         }
@@ -220,26 +230,45 @@ class Navigation {
     }
     onMouseEnter() {
         this.isHovered = true;
-        this.isNavExpanded = true;
-        this.onNavExpanded.emit(true);
+        // Use double requestAnimationFrame for smoother animation
+        // First frame to prepare, second frame to execute
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this.isNavExpanded = true;
+                this.onNavExpanded.emit(true);
+                this.cd.markForCheck();
+            });
+        });
     }
     onMouseLeave() {
         this.isHovered = false;
         if (!this.accountDetailsActive) {
-            this.isNavExpanded = false;
-            this.onNavExpanded.emit(false);
+            // Use double requestAnimationFrame for smoother animation
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.isNavExpanded = false;
+                    this.onNavExpanded.emit(false);
+                    this.cd.markForCheck();
+                });
+            });
         }
     }
     hideAccountDetails() {
         this.accountDetailsActive = false;
-        if (this.isHovered) {
-            this.isNavExpanded = true;
-            this.onNavExpanded.emit(true);
-        }
-        else {
-            this.isNavExpanded = false;
-            this.onNavExpanded.emit(false);
-        }
+        // Use double requestAnimationFrame for smoother animation
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                if (this.isHovered) {
+                    this.isNavExpanded = true;
+                    this.onNavExpanded.emit(true);
+                }
+                else {
+                    this.isNavExpanded = false;
+                    this.onNavExpanded.emit(false);
+                }
+                this.cd.markForCheck();
+            });
+        });
     }
     changeActiveSusbcription(item) {
         this.selectedSubscription = item;
@@ -260,33 +289,45 @@ class Navigation {
             this.advanceSubscriptionList[index].check = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Navigation, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Navigation, isStandalone: true, selector: "cax-navigation", inputs: { header: "header", topNavList: "topNavList", bottomNavList: "bottomNavList", activeTab: "activeTab", notifications: "notifications", helpCentre: "helpCentre", copyrightYear: "copyrightYear", version: "version", logout: "logout", profile: "profile", settings: "settings", userName: "userName", userImage: "userImage", headerLogo: "headerLogo", headerInitials: "headerInitials", subscriptionMode: "subscriptionMode", subscriptionList: "subscriptionList", selectedSubscription: "selectedSubscription", advanceSubscriptionList: "advanceSubscriptionList", displaySubscriptionName: "displaySubscriptionName", notificationCount: "notificationCount" }, outputs: { onNavListItemChange: "onNavListItemChange", onNotificationClick: "onNotificationClick", onHelpCentreClick: "onHelpCentreClick", onLogoutClick: "onLogoutClick", onProfileClick: "onProfileClick", onSettingsClick: "onSettingsClick", onLogoClick: "onLogoClick", onSubscriptionChange: "onSubscriptionChange", onNavExpanded: "onNavExpanded" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "cax-element" }, viewQueries: [{ propertyName: "bottomContainer", first: true, predicate: ["bottomContainer"], descendants: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"accountDetailsActive\" class=\"cax-nav-backdrop\"></div>\r\n<div class=\"cax-nav\" [ngClass]=\"{ 'cax-nav-expand': isNavExpanded }\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n    <div class=\"cax-nav-header-container\" #headerContainer>\r\n        <div [@rightFade] *ngIf=\"!isNavExpanded\" class=\"cax-nav-header\">\r\n            <cax-logo *ngIf=\"!headerLogo?.collapsed\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [iconOnly]=\"true\" />\r\n            <cax-image *ngIf=\"headerLogo?.collapsed\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [src]=\"headerLogo.collapsed\" />\r\n            <cax-divider layout=\"vertical\"></cax-divider>\r\n            <span *ngIf=\"headerInitials\">{{ headerInitials }}</span>\r\n            <span *ngIf=\"!headerInitials\">{{ getInitials(header) }}</span>\r\n        </div>\r\n        <div *ngIf=\"isNavExpanded\" class=\"cax-nav-header\" [@leftFade]>\r\n            <cax-logo *ngIf=\"!headerLogo?.expanded\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" />\r\n            <cax-image *ngIf=\"headerLogo?.expanded\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [src]=\"headerLogo.expanded\" />\r\n            <cax-divider layout=\"vertical\"></cax-divider>\r\n            <span>{{ header }}</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"cax-nav-list-container\" [style.maxHeight.px]=\"adjustUpDivHeight()\">\r\n        <ul>\r\n            <li *ngFor=\"let nav of topNavList, let i = index\" [ngClass]=\"{ active: nav.active }\" (click)=\"onItemClick($event, nav, i, 'top')\">\r\n                <i *ngIf=\"nav.icon; else imageTemplate\" [class]=\"'cax pi ' + nav.icon\"></i>\r\n                <ng-template #imageTemplate>\r\n                    <cax-image [src]=\"nav.image\" width=\"24px\" height=\"24px\"></cax-image>\r\n                </ng-template>\r\n                <span [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">{{ nav.label }}</span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n    <div class=\"cax-nav-bottom-container\" #bottomContainer>\r\n        <div class=\"cax-nav-bottom-list\">\r\n            <ul>\r\n                <li *ngFor=\"let nav of bottomNavList, let i = index\" [ngClass]=\"{ active: nav.active }\" (click)=\"onItemClick($event, nav, i, 'bottom')\">\r\n                    <i *ngIf=\"nav.icon; else imageTemplate\" [class]=\"'cax pi ' + nav.icon\"></i>\r\n                    <ng-template #imageTemplate>\r\n                        <cax-image [src]=\"nav.image\" width=\"24px\" height=\"24px\"></cax-image>\r\n                    </ng-template>\r\n                    <span [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">{{ nav.label }}</span>\r\n                </li>\r\n                <li *ngIf=\"notifications\" (click)=\"emitNotification()\" [ngClass]=\"{ active: notificationActive }\">\r\n                    <i *ngIf=\"!notificationCount\" class=\"cax cax-bell\"></i>\r\n                    <i *ngIf=\"notificationCount\" class=\"cax cax-bell\" caxBadge [value]=\"notificationCount\" badgeSize=\"xs\" badgeSeverity=\"danger\"></i>\r\n                    <span [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">Notifications</span>\r\n                </li>\r\n                <li *ngIf=\"helpCentre\" (click)=\"emitHelpCentre()\" [ngClass]=\"{ active: helpCentreActive }\">\r\n                    <i class=\"cax cax-shield-warning\"></i>\r\n                    <span [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">Help Centre</span>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div *ngIf=\"userName\" (click)=\"op.toggle($event);\" [ngClass]=\"{ active: accountDetailsActive }\" class=\"cax-nav-account-details\">\r\n            <cax-avatar *ngIf=\"userImage\" [image]=\"userImage\" avatarSize=\"lg\"></cax-avatar>\r\n            <cax-avatar *ngIf=\"!userImage\" [label]=\"getInitials(userName)\" avatarSize=\"lg\"></cax-avatar>\r\n            <div [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-user\">\r\n                <span class=\"cax-nav-user-name\">{{ userName }}</span>\r\n                <span class=\"cax-nav-user-role\">{{ displaySubscriptionName }}</span>\r\n            </div>\r\n            <div [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-account-icon\">\r\n                <i class=\"cax cax-alt-arrow-up\"></i>\r\n                <i class=\"cax cax-alt-arrow-down\"></i>\r\n            </div>\r\n            <cax-overlayPanel #op (onShow)=\"accountDetailsActive = true\" [styleClass]=\"isNavExpanded ? 'cax-nav-overlay-expand' : 'cax-nav-overlay'\" (onHide)=\"hideAccountDetails()\">\r\n                <div class=\"cax-nav-subscription-list\" *ngIf=\"subscriptionMode === 'default' && subscriptionList?.length\">\r\n                    <li class=\"cax-nav-subscription-list-item\" [class.active]=\"selectedSubscription === item\" *ngFor=\"let item of subscriptionList\" (click)=\"changeActiveSusbcription(item)\">\r\n                        <span>{{ item }}</span>\r\n                        <cax-radioButton *ngIf=\"selectedSubscription === item\" value=\"1\" [(ngModel)]=\"checkRadio\"></cax-radioButton>\r\n                    </li>\r\n                </div>\r\n                <div class=\"cax-nav-subscription-list\" *ngIf=\"subscriptionMode === 'advance' && advanceSubscriptionList?.length\">\r\n                    <div *ngFor=\"let item of advanceSubscriptionList, let i = index\">\r\n                        <li [class.active]=\"selectedSubscription?.name === item.name\" class=\"cax-nav-advance-subscription-list-item\" (click)=\"toggleSubscriptionList(i)\">\r\n                            <span>{{ item.name }}</span>\r\n                            <i *ngIf=\"!item.check\" class=\"cax cax-alt-arrow-down\"></i>\r\n                            <i *ngIf=\"item.check\" class=\"cax cax-alt-arrow-up\"></i>\r\n                        </li>\r\n                        <div *ngIf=\"item.check\" class=\"cax-nav-advance-subscription-child-list\">\r\n                            <li [class.active]=\"selectedSubscription?.selected === child\" class=\"cax-nav-advance-subscription-child-list-item\" *ngFor=\"let child of item.subscription\" (click)=\"updateSubscription(item, child)\">\r\n                                <span>{{ child }}</span>\r\n                                <cax-radioButton [size]=\"'sm'\" *ngIf=\"selectedSubscription?.selected === child\" value=\"1\" [(ngModel)]=\"checkRadio\"></cax-radioButton>\r\n                            </li>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"profile\" class=\"cax-nav-profile-options\" (click)=\"emitProfile()\">\r\n                    <i class=\"cax cax-user-rounded\"></i>\r\n                    <span>View Profile</span>\r\n                </div>\r\n                <div *ngIf=\"settings\" class=\"cax-nav-profile-options\" (click)=\"emitSettings()\">\r\n                    <i class=\"cax cax-settings\"></i>\r\n                    <span>Account Settings</span>\r\n                </div>\r\n                <div *ngIf=\"logout\" class=\"cax-nav-profile-options cax-nav-logout\" (click)=\"emitLogout()\">\r\n                    <i class=\"cax cax-logout\"></i>\r\n                    <span>Logout</span>\r\n                </div>\r\n                <div class=\"cax-nav-copyright-container\">\r\n                    <cax-logo width=\"55px\" height=\"17px\"></cax-logo>\r\n                    <div class=\"cax-nav-copyright\">\r\n                        <span *ngIf=\"copyrightYear\">&copy; {{ copyrightYear }}</span>\r\n                        <span *ngIf=\"version\">{{ version }}</span>\r\n                    </div>\r\n                </div>\r\n            </cax-overlayPanel>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-nav{width:88px;height:100vh;transition:width .3s ease-in-out;overflow:hidden;padding:16px 8px;position:absolute;left:0;top:0;z-index:1200}.cax-nav .cax-nav-header .cax-image img{max-width:26px;object-fit:cover}.cax-nav.cax-nav-expand{width:264px}.cax-nav.cax-nav-expand .cax-nav-bottom-container{width:248px}.cax-nav.cax-nav-expand .cax-nav-header .cax-image img{max-width:100px;object-fit:cover}.cax-nav-header-container{display:flex;align-items:center;justify-content:center;height:64px}.cax-nav-header{display:flex;align-items:center;justify-content:center}.cax-nav-header span{font-weight:700;font-size:12px}.cax-nav .cax-divider.cax-divider-vertical{margin:0 8px;height:36px}.cax-nav-list-container,.cax-nav-bottom-list{margin:24px 0}.cax-nav-list-container ul,.cax-nav-bottom-list ul{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;gap:16px}.cax-nav-list-container ul li,.cax-nav-bottom-list ul li{padding:12px 24px;border-radius:12px;display:flex;align-items:center;cursor:pointer;height:56px;line-height:24px}.cax-nav-list-container{overflow-y:auto}.cax-nav-list-container::-webkit-scrollbar{display:none}.cax-nav-bottom-container{position:absolute;bottom:16px}.cax-nav-account-details{border-radius:12px;padding:12px;cursor:pointer;transition:width .3s ease-in-out;display:flex;align-items:flex-start}.cax-nav-account-details .cax-nav-account-icon{display:grid;margin-left:auto}.cax-nav.cax-nav-expand .cax-nav-account-details{width:248px}.cax-nav-user{display:grid;margin:0 8px;white-space:nowrap}.cax-nav-user .cax-nav-user-name{font-size:16px;font-weight:500;line-height:24px}.cax-nav-user .cax-nav-user-role{font-size:14px;font-weight:400;line-height:21px}.cax-overlaypanel{width:320px}.cax-overlaypanel .cax-overlaypanel-content{padding:8px}.cax-nav-copyright-container{display:flex;align-items:center;justify-content:space-between}.cax-nav-copyright-container .cax-nav-copyright{font-size:12px;font-weight:500}.cax-nav-copyright-container .cax-nav-copyright span{margin:0 0 0 16px}.cax-nav-profile-options{padding:12px 24px;font-weight:600;line-height:24px;display:flex;align-items:center;cursor:pointer;border-radius:12px;margin-bottom:8px;font-size:16px}.cax-nav-profile-options span{margin-left:8px}.cax-nav-overlay-expand{left:270px!important;top:auto!important;bottom:6px}.cax-nav-overlay{left:94px!important;top:auto!important;bottom:6px}}.c-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: LogoModule }, { kind: "component", type: i1.Logo, selector: "cax-logo", inputs: ["size", "width", "height", "iconOnly", "darkMode"] }, { kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: DividerModule }, { kind: "component", type: i3.Divider, selector: "cax-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i4.Image, selector: "cax-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "size", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i5.Avatar, selector: "cax-avatar", inputs: ["label", "icon", "image", "avatarSize", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i6.OverlayPanel, selector: "cax-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i7.RadioButton, selector: "cax-radioButton", inputs: ["value", "size", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "directive", type: i9.BadgeDirective, selector: "[caxBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "caxBadge", "value", "badgeSeverity", "severity", "badgeStyle", "badgeStyleClass"] }], animations: [
-            trigger('leftFade', [
-                transition(':enter', [style({ transform: 'translateX(-100%)', opacity: 0 }), animate('300ms', style({ transform: 'translateX(0)', opacity: 1 }))]),
-                transition(':leave', [style({ transform: 'translateX(0)', opacity: 0.5 }), animate('300ms', style({ transform: 'translateX(-100%)', opacity: 0 }))])
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Navigation, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Navigation, isStandalone: true, selector: "cax-navigation", inputs: { header: "header", topNavList: "topNavList", bottomNavList: "bottomNavList", activeTab: "activeTab", notifications: "notifications", helpCentre: "helpCentre", copyrightYear: "copyrightYear", version: "version", logout: "logout", profile: "profile", settings: "settings", userName: "userName", userImage: "userImage", headerLogo: "headerLogo", headerInitials: "headerInitials", subscriptionMode: "subscriptionMode", subscriptionList: "subscriptionList", selectedSubscription: "selectedSubscription", advanceSubscriptionList: "advanceSubscriptionList", displaySubscriptionName: "displaySubscriptionName", notificationCount: "notificationCount" }, outputs: { onNavListItemChange: "onNavListItemChange", onNotificationClick: "onNotificationClick", onHelpCentreClick: "onHelpCentreClick", onLogoutClick: "onLogoutClick", onProfileClick: "onProfileClick", onSettingsClick: "onSettingsClick", onLogoClick: "onLogoClick", onSubscriptionChange: "onSubscriptionChange", onNavExpanded: "onNavExpanded" }, host: { listeners: { "window:resize": "onResize()" }, classAttribute: "cax-element" }, viewQueries: [{ propertyName: "bottomContainer", first: true, predicate: ["bottomContainer"], descendants: true }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"accountDetailsActive\" class=\"cax-nav-backdrop\"></div>\r\n<div class=\"cax-nav\" [ngClass]=\"{ 'cax-nav-expand': isNavExpanded }\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n    <div class=\"cax-nav-header-container\" #headerContainer>\r\n        <div [@headerAnimation] *ngIf=\"!isNavExpanded\" class=\"cax-nav-header\">\r\n            <cax-logo *ngIf=\"!headerLogo?.collapsed\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [iconOnly]=\"true\" />\r\n            <cax-image *ngIf=\"headerLogo?.collapsed\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [src]=\"headerLogo.collapsed\" [style.opacity]=\"1\" />\r\n            <cax-divider layout=\"vertical\"></cax-divider>\r\n            <span *ngIf=\"headerInitials\">{{ headerInitials }}</span>\r\n            <span *ngIf=\"!headerInitials\">{{ getInitials(header) }}</span>\r\n        </div>\r\n        <div *ngIf=\"isNavExpanded\" class=\"cax-nav-header\" [@headerAnimation]>\r\n            <cax-logo *ngIf=\"!headerLogo?.expanded\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" />\r\n            <cax-image *ngIf=\"headerLogo?.expanded\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [src]=\"headerLogo.expanded\" [style.opacity]=\"1\" />\r\n            <cax-divider layout=\"vertical\"></cax-divider>\r\n            <span>{{ header }}</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"cax-nav-list-container\" [style.maxHeight.px]=\"adjustUpDivHeight()\">\r\n        <ul>\r\n            <li *ngFor=\"let nav of topNavList, let i = index\" [ngClass]=\"{ active: nav.active }\" (click)=\"onItemClick($event, nav, i, 'top')\">\r\n                <i *ngIf=\"nav.icon; else imageTemplate\" [class]=\"'cax pi ' + nav.icon\"></i>\r\n                <ng-template #imageTemplate>\r\n                    <cax-image [src]=\"nav.image\" width=\"24px\" height=\"24px\" [style.opacity]=\"1\"></cax-image>\r\n                </ng-template>\r\n                <span [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">{{ nav.label }}</span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n    <div class=\"cax-nav-bottom-container\" #bottomContainer>\r\n        <div class=\"cax-nav-bottom-list\">\r\n            <ul>\r\n                <li *ngFor=\"let nav of bottomNavList, let i = index\" [ngClass]=\"{ active: nav.active }\" (click)=\"onItemClick($event, nav, i, 'bottom')\">\r\n                    <i *ngIf=\"nav.icon; else imageTemplate\" [class]=\"'cax pi ' + nav.icon\"></i>\r\n                    <ng-template #imageTemplate>\r\n                        <cax-image [src]=\"nav.image\" width=\"24px\" height=\"24px\" [style.opacity]=\"1\"></cax-image>\r\n                    </ng-template>\r\n                    <span [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">{{ nav.label }}</span>\r\n                </li>\r\n                <li *ngIf=\"notifications\" (click)=\"emitNotification()\" [ngClass]=\"{ active: notificationActive }\">\r\n                    <i *ngIf=\"!notificationCount\" class=\"cax cax-bell\"></i>\r\n                    <i *ngIf=\"notificationCount\" class=\"cax cax-bell\" caxBadge [value]=\"notificationCount\" badgeSize=\"xs\" badgeSeverity=\"danger\"></i>\r\n                    <span [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">Notifications</span>\r\n                </li>\r\n                <li *ngIf=\"helpCentre\" (click)=\"emitHelpCentre()\" [ngClass]=\"{ active: helpCentreActive }\">\r\n                    <i class=\"cax cax-shield-warning\"></i>\r\n                    <span [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">Help Centre</span>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div *ngIf=\"userName\" (click)=\"op.toggle($event);\" [ngClass]=\"{ active: accountDetailsActive }\" class=\"cax-nav-account-details\">\r\n            <cax-avatar *ngIf=\"userImage\" [image]=\"userImage\" avatarSize=\"lg\"></cax-avatar>\r\n            <cax-avatar *ngIf=\"!userImage\" [label]=\"getInitials(userName)\" avatarSize=\"lg\"></cax-avatar>\r\n            <div [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-user\">\r\n                <span class=\"cax-nav-user-name\">{{ userName }}</span>\r\n                <span class=\"cax-nav-user-role\">{{ displaySubscriptionName }}</span>\r\n            </div>\r\n            <div [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-account-icon\">\r\n                <i class=\"cax cax-alt-arrow-up\"></i>\r\n                <i class=\"cax cax-alt-arrow-down\"></i>\r\n            </div>\r\n            <cax-overlayPanel #op (onShow)=\"accountDetailsActive = true\" [styleClass]=\"isNavExpanded ? 'cax-nav-overlay-expand' : 'cax-nav-overlay'\" (onHide)=\"hideAccountDetails()\">\r\n                <div class=\"cax-nav-subscription-list\" *ngIf=\"subscriptionMode === 'default' && subscriptionList?.length\">\r\n                    <li class=\"cax-nav-subscription-list-item\" [class.active]=\"selectedSubscription === item\" *ngFor=\"let item of subscriptionList\" (click)=\"changeActiveSusbcription(item)\">\r\n                        <span>{{ item }}</span>\r\n                        <cax-radioButton *ngIf=\"selectedSubscription === item\" value=\"1\" [(ngModel)]=\"checkRadio\"></cax-radioButton>\r\n                    </li>\r\n                </div>\r\n                <div class=\"cax-nav-subscription-list\" *ngIf=\"subscriptionMode === 'advance' && advanceSubscriptionList?.length\">\r\n                    <div *ngFor=\"let item of advanceSubscriptionList, let i = index\">\r\n                        <li [class.active]=\"selectedSubscription?.name === item.name\" class=\"cax-nav-advance-subscription-list-item\" (click)=\"toggleSubscriptionList(i)\">\r\n                            <span>{{ item.name }}</span>\r\n                            <i *ngIf=\"!item.check\" class=\"cax cax-alt-arrow-down\"></i>\r\n                            <i *ngIf=\"item.check\" class=\"cax cax-alt-arrow-up\"></i>\r\n                        </li>\r\n                        <div *ngIf=\"item.check\" class=\"cax-nav-advance-subscription-child-list\">\r\n                            <li [class.active]=\"selectedSubscription?.selected === child\" class=\"cax-nav-advance-subscription-child-list-item\" *ngFor=\"let child of item.subscription\" (click)=\"updateSubscription(item, child)\">\r\n                                <span>{{ child }}</span>\r\n                                <cax-radioButton [size]=\"'sm'\" *ngIf=\"selectedSubscription?.selected === child\" value=\"1\" [(ngModel)]=\"checkRadio\"></cax-radioButton>\r\n                            </li>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"profile\" class=\"cax-nav-profile-options\" (click)=\"emitProfile()\">\r\n                    <i class=\"cax cax-user-rounded\"></i>\r\n                    <span>View Profile</span>\r\n                </div>\r\n                <div *ngIf=\"settings\" class=\"cax-nav-profile-options\" (click)=\"emitSettings()\">\r\n                    <i class=\"cax cax-settings\"></i>\r\n                    <span>Account Settings</span>\r\n                </div>\r\n                <div *ngIf=\"logout\" class=\"cax-nav-profile-options cax-nav-logout\" (click)=\"emitLogout()\">\r\n                    <i class=\"cax cax-logout\"></i>\r\n                    <span>Logout</span>\r\n                </div>\r\n                <div class=\"cax-nav-copyright-container\">\r\n                    <cax-logo width=\"55px\" height=\"17px\"></cax-logo>\r\n                    <div class=\"cax-nav-copyright\">\r\n                        <span *ngIf=\"copyrightYear\">&copy; {{ copyrightYear }}</span>\r\n                        <span *ngIf=\"version\">{{ version }}</span>\r\n                    </div>\r\n                </div>\r\n            </cax-overlayPanel>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-nav{width:88px;height:100vh;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;padding:16px 8px;position:absolute;left:0;top:0;z-index:1200;will-change:width}.cax-nav .cax-nav-header .cax-image img{max-width:26px;object-fit:cover;transition:max-width .3s cubic-bezier(.4,0,.2,1);will-change:max-width}.cax-nav.cax-nav-expand{width:264px}.cax-nav.cax-nav-expand .cax-nav-bottom-container{width:248px;transition:width .3s cubic-bezier(.4,0,.2,1)}.cax-nav.cax-nav-expand .cax-nav-header .cax-image img{max-width:100px;object-fit:cover;transition:max-width .3s cubic-bezier(.4,0,.2,1)}.cax-nav-header-container{display:flex;align-items:center;justify-content:center;height:64px}.cax-nav-header{display:flex;align-items:center;justify-content:center}.cax-nav-header span{font-weight:700;font-size:12px}.cax-nav .cax-divider.cax-divider-vertical{margin:0 8px;height:36px}.cax-nav-list-container,.cax-nav-bottom-list{margin:24px 0}.cax-nav-list-container ul,.cax-nav-bottom-list ul{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;gap:16px}.cax-nav-list-container ul li,.cax-nav-bottom-list ul li{padding:12px 24px;border-radius:12px;display:flex;align-items:center;cursor:pointer;height:56px;line-height:24px}.cax-nav-list-container ul li .cax-image,.cax-nav-bottom-list ul li .cax-image{transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform}.cax-nav-list-container ul li .cax-image img,.cax-nav-bottom-list ul li .cax-image img{transition:opacity .3s cubic-bezier(.4,0,.2,1);will-change:opacity;backface-visibility:hidden}.cax-nav-list-container{overflow-y:auto}.cax-nav-list-container::-webkit-scrollbar{display:none}.cax-nav-bottom-container{position:absolute;bottom:16px}.cax-nav-account-details{border-radius:12px;padding:12px;cursor:pointer;transition:width .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:flex-start;will-change:width}.cax-nav-account-details .cax-nav-account-icon{display:grid;margin-left:auto}.cax-nav-account-details .cax-avatar{transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform}.cax-nav-account-details .cax-avatar img{transition:opacity .3s cubic-bezier(.4,0,.2,1);will-change:opacity;backface-visibility:hidden}.cax-nav.cax-nav-expand .cax-nav-account-details{width:248px}.cax-nav-user{display:grid;margin:0 8px;white-space:nowrap}.cax-nav-user .cax-nav-user-name{font-size:16px;font-weight:500;line-height:24px}.cax-nav-user .cax-nav-user-role{font-size:14px;font-weight:400;line-height:21px}.cax-overlaypanel{width:320px}.cax-overlaypanel .cax-overlaypanel-content{padding:8px}.cax-nav-copyright-container{display:flex;align-items:center;justify-content:space-between}.cax-nav-copyright-container .cax-nav-copyright{font-size:12px;font-weight:500}.cax-nav-copyright-container .cax-nav-copyright span{margin:0 0 0 16px}.cax-nav-profile-options{padding:12px 24px;font-weight:600;line-height:24px;display:flex;align-items:center;cursor:pointer;border-radius:12px;margin-bottom:8px;font-size:16px}.cax-nav-profile-options span{margin-left:8px}.cax-nav-overlay-expand{left:270px!important;top:auto!important;bottom:6px}.cax-nav-overlay{left:94px!important;top:auto!important;bottom:6px}}.c-pointer{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: LogoModule }, { kind: "component", type: i1.Logo, selector: "cax-logo", inputs: ["size", "width", "height", "iconOnly", "darkMode"] }, { kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: DividerModule }, { kind: "component", type: i3.Divider, selector: "cax-divider", inputs: ["style", "styleClass", "layout", "type", "align"] }, { kind: "ngmodule", type: ImageModule }, { kind: "component", type: i4.Image, selector: "cax-image", inputs: ["imageClass", "imageStyle", "styleClass", "style", "src", "srcSet", "sizes", "size", "previewImageSrc", "previewImageSrcSet", "previewImageSizes", "alt", "width", "height", "loading", "appendTo", "preview", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide", "onImageError"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i5.Avatar, selector: "cax-avatar", inputs: ["label", "icon", "image", "avatarSize", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i6.OverlayPanel, selector: "cax-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i7.RadioButton, selector: "cax-radioButton", inputs: ["value", "size", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "directive", type: i9.BadgeDirective, selector: "[caxBadge]", inputs: ["badgeDisabled", "badgeSize", "size", "caxBadge", "value", "badgeSeverity", "severity", "badgeStyle", "badgeStyleClass"] }], animations: [
+            trigger('textAnimation', [
+                transition(':enter', [
+                    style({ opacity: 0, width: '0px', marginLeft: '0px', visibility: 'hidden', transform: 'translateX(-24px)' }),
+                    animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 1, width: '*', marginLeft: '8px', visibility: 'visible', transform: 'translateX(0)' }))
+                ]),
+                transition(':leave', [
+                    style({ opacity: 1, width: '*', marginLeft: '8px', visibility: 'visible', transform: 'translateX(0)' }),
+                    animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0, width: '0px', marginLeft: '0px', visibility: 'hidden', transform: 'translateX(-24px)' }))
+                ])
             ]),
-            trigger('rightFade', [
-                transition(':enter', [style({ transform: 'translateX(200%)', opacity: 0 }), animate('300ms', style({ transform: 'translateX(0)', opacity: 1 }))]),
-                transition(':leave', [style({ transform: 'translateX(0)', opacity: 1 }), animate('300ms', style({ transform: 'translateX(100%)', opacity: 0 }))])
+            trigger('headerAnimation', [
+                transition(':enter', [style({ opacity: 0, visibility: 'hidden' }), animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 1, visibility: 'visible' }))]),
+                transition(':leave', [style({ opacity: 1, visibility: 'visible' }), animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0, visibility: 'hidden' }))])
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Navigation, decorators: [{
             type: Component,
             args: [{ selector: 'cax-navigation', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [LogoModule, CommonModule, DividerModule, ImageModule, AvatarModule, OverlayPanelModule, OverlayModule, RadioButtonModule, FormsModule, BadgeModule], animations: [
-                        trigger('leftFade', [
-                            transition(':enter', [style({ transform: 'translateX(-100%)', opacity: 0 }), animate('300ms', style({ transform: 'translateX(0)', opacity: 1 }))]),
-                            transition(':leave', [style({ transform: 'translateX(0)', opacity: 0.5 }), animate('300ms', style({ transform: 'translateX(-100%)', opacity: 0 }))])
+                        trigger('textAnimation', [
+                            transition(':enter', [
+                                style({ opacity: 0, width: '0px', marginLeft: '0px', visibility: 'hidden', transform: 'translateX(-24px)' }),
+                                animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 1, width: '*', marginLeft: '8px', visibility: 'visible', transform: 'translateX(0)' }))
+                            ]),
+                            transition(':leave', [
+                                style({ opacity: 1, width: '*', marginLeft: '8px', visibility: 'visible', transform: 'translateX(0)' }),
+                                animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0, width: '0px', marginLeft: '0px', visibility: 'hidden', transform: 'translateX(-24px)' }))
+                            ])
                         ]),
-                        trigger('rightFade', [
-                            transition(':enter', [style({ transform: 'translateX(200%)', opacity: 0 }), animate('300ms', style({ transform: 'translateX(0)', opacity: 1 }))]),
-                            transition(':leave', [style({ transform: 'translateX(0)', opacity: 1 }), animate('300ms', style({ transform: 'translateX(100%)', opacity: 0 }))])
+                        trigger('headerAnimation', [
+                            transition(':enter', [style({ opacity: 0, visibility: 'hidden' }), animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 1, visibility: 'visible' }))]),
+                            transition(':leave', [style({ opacity: 1, visibility: 'visible' }), animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ opacity: 0, visibility: 'hidden' }))])
                         ])
                     ], host: {
                         class: 'cax-element'
-                    }, template: "<div *ngIf=\"accountDetailsActive\" class=\"cax-nav-backdrop\"></div>\r\n<div class=\"cax-nav\" [ngClass]=\"{ 'cax-nav-expand': isNavExpanded }\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n    <div class=\"cax-nav-header-container\" #headerContainer>\r\n        <div [@rightFade] *ngIf=\"!isNavExpanded\" class=\"cax-nav-header\">\r\n            <cax-logo *ngIf=\"!headerLogo?.collapsed\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [iconOnly]=\"true\" />\r\n            <cax-image *ngIf=\"headerLogo?.collapsed\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [src]=\"headerLogo.collapsed\" />\r\n            <cax-divider layout=\"vertical\"></cax-divider>\r\n            <span *ngIf=\"headerInitials\">{{ headerInitials }}</span>\r\n            <span *ngIf=\"!headerInitials\">{{ getInitials(header) }}</span>\r\n        </div>\r\n        <div *ngIf=\"isNavExpanded\" class=\"cax-nav-header\" [@leftFade]>\r\n            <cax-logo *ngIf=\"!headerLogo?.expanded\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" />\r\n            <cax-image *ngIf=\"headerLogo?.expanded\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [src]=\"headerLogo.expanded\" />\r\n            <cax-divider layout=\"vertical\"></cax-divider>\r\n            <span>{{ header }}</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"cax-nav-list-container\" [style.maxHeight.px]=\"adjustUpDivHeight()\">\r\n        <ul>\r\n            <li *ngFor=\"let nav of topNavList, let i = index\" [ngClass]=\"{ active: nav.active }\" (click)=\"onItemClick($event, nav, i, 'top')\">\r\n                <i *ngIf=\"nav.icon; else imageTemplate\" [class]=\"'cax pi ' + nav.icon\"></i>\r\n                <ng-template #imageTemplate>\r\n                    <cax-image [src]=\"nav.image\" width=\"24px\" height=\"24px\"></cax-image>\r\n                </ng-template>\r\n                <span [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">{{ nav.label }}</span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n    <div class=\"cax-nav-bottom-container\" #bottomContainer>\r\n        <div class=\"cax-nav-bottom-list\">\r\n            <ul>\r\n                <li *ngFor=\"let nav of bottomNavList, let i = index\" [ngClass]=\"{ active: nav.active }\" (click)=\"onItemClick($event, nav, i, 'bottom')\">\r\n                    <i *ngIf=\"nav.icon; else imageTemplate\" [class]=\"'cax pi ' + nav.icon\"></i>\r\n                    <ng-template #imageTemplate>\r\n                        <cax-image [src]=\"nav.image\" width=\"24px\" height=\"24px\"></cax-image>\r\n                    </ng-template>\r\n                    <span [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">{{ nav.label }}</span>\r\n                </li>\r\n                <li *ngIf=\"notifications\" (click)=\"emitNotification()\" [ngClass]=\"{ active: notificationActive }\">\r\n                    <i *ngIf=\"!notificationCount\" class=\"cax cax-bell\"></i>\r\n                    <i *ngIf=\"notificationCount\" class=\"cax cax-bell\" caxBadge [value]=\"notificationCount\" badgeSize=\"xs\" badgeSeverity=\"danger\"></i>\r\n                    <span [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">Notifications</span>\r\n                </li>\r\n                <li *ngIf=\"helpCentre\" (click)=\"emitHelpCentre()\" [ngClass]=\"{ active: helpCentreActive }\">\r\n                    <i class=\"cax cax-shield-warning\"></i>\r\n                    <span [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">Help Centre</span>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div *ngIf=\"userName\" (click)=\"op.toggle($event);\" [ngClass]=\"{ active: accountDetailsActive }\" class=\"cax-nav-account-details\">\r\n            <cax-avatar *ngIf=\"userImage\" [image]=\"userImage\" avatarSize=\"lg\"></cax-avatar>\r\n            <cax-avatar *ngIf=\"!userImage\" [label]=\"getInitials(userName)\" avatarSize=\"lg\"></cax-avatar>\r\n            <div [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-user\">\r\n                <span class=\"cax-nav-user-name\">{{ userName }}</span>\r\n                <span class=\"cax-nav-user-role\">{{ displaySubscriptionName }}</span>\r\n            </div>\r\n            <div [@leftFade] *ngIf=\"isNavExpanded\" class=\"cax-nav-account-icon\">\r\n                <i class=\"cax cax-alt-arrow-up\"></i>\r\n                <i class=\"cax cax-alt-arrow-down\"></i>\r\n            </div>\r\n            <cax-overlayPanel #op (onShow)=\"accountDetailsActive = true\" [styleClass]=\"isNavExpanded ? 'cax-nav-overlay-expand' : 'cax-nav-overlay'\" (onHide)=\"hideAccountDetails()\">\r\n                <div class=\"cax-nav-subscription-list\" *ngIf=\"subscriptionMode === 'default' && subscriptionList?.length\">\r\n                    <li class=\"cax-nav-subscription-list-item\" [class.active]=\"selectedSubscription === item\" *ngFor=\"let item of subscriptionList\" (click)=\"changeActiveSusbcription(item)\">\r\n                        <span>{{ item }}</span>\r\n                        <cax-radioButton *ngIf=\"selectedSubscription === item\" value=\"1\" [(ngModel)]=\"checkRadio\"></cax-radioButton>\r\n                    </li>\r\n                </div>\r\n                <div class=\"cax-nav-subscription-list\" *ngIf=\"subscriptionMode === 'advance' && advanceSubscriptionList?.length\">\r\n                    <div *ngFor=\"let item of advanceSubscriptionList, let i = index\">\r\n                        <li [class.active]=\"selectedSubscription?.name === item.name\" class=\"cax-nav-advance-subscription-list-item\" (click)=\"toggleSubscriptionList(i)\">\r\n                            <span>{{ item.name }}</span>\r\n                            <i *ngIf=\"!item.check\" class=\"cax cax-alt-arrow-down\"></i>\r\n                            <i *ngIf=\"item.check\" class=\"cax cax-alt-arrow-up\"></i>\r\n                        </li>\r\n                        <div *ngIf=\"item.check\" class=\"cax-nav-advance-subscription-child-list\">\r\n                            <li [class.active]=\"selectedSubscription?.selected === child\" class=\"cax-nav-advance-subscription-child-list-item\" *ngFor=\"let child of item.subscription\" (click)=\"updateSubscription(item, child)\">\r\n                                <span>{{ child }}</span>\r\n                                <cax-radioButton [size]=\"'sm'\" *ngIf=\"selectedSubscription?.selected === child\" value=\"1\" [(ngModel)]=\"checkRadio\"></cax-radioButton>\r\n                            </li>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"profile\" class=\"cax-nav-profile-options\" (click)=\"emitProfile()\">\r\n                    <i class=\"cax cax-user-rounded\"></i>\r\n                    <span>View Profile</span>\r\n                </div>\r\n                <div *ngIf=\"settings\" class=\"cax-nav-profile-options\" (click)=\"emitSettings()\">\r\n                    <i class=\"cax cax-settings\"></i>\r\n                    <span>Account Settings</span>\r\n                </div>\r\n                <div *ngIf=\"logout\" class=\"cax-nav-profile-options cax-nav-logout\" (click)=\"emitLogout()\">\r\n                    <i class=\"cax cax-logout\"></i>\r\n                    <span>Logout</span>\r\n                </div>\r\n                <div class=\"cax-nav-copyright-container\">\r\n                    <cax-logo width=\"55px\" height=\"17px\"></cax-logo>\r\n                    <div class=\"cax-nav-copyright\">\r\n                        <span *ngIf=\"copyrightYear\">&copy; {{ copyrightYear }}</span>\r\n                        <span *ngIf=\"version\">{{ version }}</span>\r\n                    </div>\r\n                </div>\r\n            </cax-overlayPanel>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-nav{width:88px;height:100vh;transition:width .3s ease-in-out;overflow:hidden;padding:16px 8px;position:absolute;left:0;top:0;z-index:1200}.cax-nav .cax-nav-header .cax-image img{max-width:26px;object-fit:cover}.cax-nav.cax-nav-expand{width:264px}.cax-nav.cax-nav-expand .cax-nav-bottom-container{width:248px}.cax-nav.cax-nav-expand .cax-nav-header .cax-image img{max-width:100px;object-fit:cover}.cax-nav-header-container{display:flex;align-items:center;justify-content:center;height:64px}.cax-nav-header{display:flex;align-items:center;justify-content:center}.cax-nav-header span{font-weight:700;font-size:12px}.cax-nav .cax-divider.cax-divider-vertical{margin:0 8px;height:36px}.cax-nav-list-container,.cax-nav-bottom-list{margin:24px 0}.cax-nav-list-container ul,.cax-nav-bottom-list ul{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;gap:16px}.cax-nav-list-container ul li,.cax-nav-bottom-list ul li{padding:12px 24px;border-radius:12px;display:flex;align-items:center;cursor:pointer;height:56px;line-height:24px}.cax-nav-list-container{overflow-y:auto}.cax-nav-list-container::-webkit-scrollbar{display:none}.cax-nav-bottom-container{position:absolute;bottom:16px}.cax-nav-account-details{border-radius:12px;padding:12px;cursor:pointer;transition:width .3s ease-in-out;display:flex;align-items:flex-start}.cax-nav-account-details .cax-nav-account-icon{display:grid;margin-left:auto}.cax-nav.cax-nav-expand .cax-nav-account-details{width:248px}.cax-nav-user{display:grid;margin:0 8px;white-space:nowrap}.cax-nav-user .cax-nav-user-name{font-size:16px;font-weight:500;line-height:24px}.cax-nav-user .cax-nav-user-role{font-size:14px;font-weight:400;line-height:21px}.cax-overlaypanel{width:320px}.cax-overlaypanel .cax-overlaypanel-content{padding:8px}.cax-nav-copyright-container{display:flex;align-items:center;justify-content:space-between}.cax-nav-copyright-container .cax-nav-copyright{font-size:12px;font-weight:500}.cax-nav-copyright-container .cax-nav-copyright span{margin:0 0 0 16px}.cax-nav-profile-options{padding:12px 24px;font-weight:600;line-height:24px;display:flex;align-items:center;cursor:pointer;border-radius:12px;margin-bottom:8px;font-size:16px}.cax-nav-profile-options span{margin-left:8px}.cax-nav-overlay-expand{left:270px!important;top:auto!important;bottom:6px}.cax-nav-overlay{left:94px!important;top:auto!important;bottom:6px}}.c-pointer{cursor:pointer}\n"] }]
-        }], propDecorators: { header: [{
+                    }, template: "<div *ngIf=\"accountDetailsActive\" class=\"cax-nav-backdrop\"></div>\r\n<div class=\"cax-nav\" [ngClass]=\"{ 'cax-nav-expand': isNavExpanded }\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n    <div class=\"cax-nav-header-container\" #headerContainer>\r\n        <div [@headerAnimation] *ngIf=\"!isNavExpanded\" class=\"cax-nav-header\">\r\n            <cax-logo *ngIf=\"!headerLogo?.collapsed\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [iconOnly]=\"true\" />\r\n            <cax-image *ngIf=\"headerLogo?.collapsed\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [src]=\"headerLogo.collapsed\" [style.opacity]=\"1\" />\r\n            <cax-divider layout=\"vertical\"></cax-divider>\r\n            <span *ngIf=\"headerInitials\">{{ headerInitials }}</span>\r\n            <span *ngIf=\"!headerInitials\">{{ getInitials(header) }}</span>\r\n        </div>\r\n        <div *ngIf=\"isNavExpanded\" class=\"cax-nav-header\" [@headerAnimation]>\r\n            <cax-logo *ngIf=\"!headerLogo?.expanded\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" />\r\n            <cax-image *ngIf=\"headerLogo?.expanded\" class=\"c-pointer\" (click)=\"emitLogoClick()\" size=\"sm\" [src]=\"headerLogo.expanded\" [style.opacity]=\"1\" />\r\n            <cax-divider layout=\"vertical\"></cax-divider>\r\n            <span>{{ header }}</span>\r\n        </div>\r\n    </div>\r\n    <div class=\"cax-nav-list-container\" [style.maxHeight.px]=\"adjustUpDivHeight()\">\r\n        <ul>\r\n            <li *ngFor=\"let nav of topNavList, let i = index\" [ngClass]=\"{ active: nav.active }\" (click)=\"onItemClick($event, nav, i, 'top')\">\r\n                <i *ngIf=\"nav.icon; else imageTemplate\" [class]=\"'cax pi ' + nav.icon\"></i>\r\n                <ng-template #imageTemplate>\r\n                    <cax-image [src]=\"nav.image\" width=\"24px\" height=\"24px\" [style.opacity]=\"1\"></cax-image>\r\n                </ng-template>\r\n                <span [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">{{ nav.label }}</span>\r\n            </li>\r\n        </ul>\r\n    </div>\r\n    <div class=\"cax-nav-bottom-container\" #bottomContainer>\r\n        <div class=\"cax-nav-bottom-list\">\r\n            <ul>\r\n                <li *ngFor=\"let nav of bottomNavList, let i = index\" [ngClass]=\"{ active: nav.active }\" (click)=\"onItemClick($event, nav, i, 'bottom')\">\r\n                    <i *ngIf=\"nav.icon; else imageTemplate\" [class]=\"'cax pi ' + nav.icon\"></i>\r\n                    <ng-template #imageTemplate>\r\n                        <cax-image [src]=\"nav.image\" width=\"24px\" height=\"24px\" [style.opacity]=\"1\"></cax-image>\r\n                    </ng-template>\r\n                    <span [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">{{ nav.label }}</span>\r\n                </li>\r\n                <li *ngIf=\"notifications\" (click)=\"emitNotification()\" [ngClass]=\"{ active: notificationActive }\">\r\n                    <i *ngIf=\"!notificationCount\" class=\"cax cax-bell\"></i>\r\n                    <i *ngIf=\"notificationCount\" class=\"cax cax-bell\" caxBadge [value]=\"notificationCount\" badgeSize=\"xs\" badgeSeverity=\"danger\"></i>\r\n                    <span [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">Notifications</span>\r\n                </li>\r\n                <li *ngIf=\"helpCentre\" (click)=\"emitHelpCentre()\" [ngClass]=\"{ active: helpCentreActive }\">\r\n                    <i class=\"cax cax-shield-warning\"></i>\r\n                    <span [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-list-label\">Help Centre</span>\r\n                </li>\r\n            </ul>\r\n        </div>\r\n        <div *ngIf=\"userName\" (click)=\"op.toggle($event);\" [ngClass]=\"{ active: accountDetailsActive }\" class=\"cax-nav-account-details\">\r\n            <cax-avatar *ngIf=\"userImage\" [image]=\"userImage\" avatarSize=\"lg\"></cax-avatar>\r\n            <cax-avatar *ngIf=\"!userImage\" [label]=\"getInitials(userName)\" avatarSize=\"lg\"></cax-avatar>\r\n            <div [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-user\">\r\n                <span class=\"cax-nav-user-name\">{{ userName }}</span>\r\n                <span class=\"cax-nav-user-role\">{{ displaySubscriptionName }}</span>\r\n            </div>\r\n            <div [@textAnimation] *ngIf=\"isNavExpanded\" class=\"cax-nav-account-icon\">\r\n                <i class=\"cax cax-alt-arrow-up\"></i>\r\n                <i class=\"cax cax-alt-arrow-down\"></i>\r\n            </div>\r\n            <cax-overlayPanel #op (onShow)=\"accountDetailsActive = true\" [styleClass]=\"isNavExpanded ? 'cax-nav-overlay-expand' : 'cax-nav-overlay'\" (onHide)=\"hideAccountDetails()\">\r\n                <div class=\"cax-nav-subscription-list\" *ngIf=\"subscriptionMode === 'default' && subscriptionList?.length\">\r\n                    <li class=\"cax-nav-subscription-list-item\" [class.active]=\"selectedSubscription === item\" *ngFor=\"let item of subscriptionList\" (click)=\"changeActiveSusbcription(item)\">\r\n                        <span>{{ item }}</span>\r\n                        <cax-radioButton *ngIf=\"selectedSubscription === item\" value=\"1\" [(ngModel)]=\"checkRadio\"></cax-radioButton>\r\n                    </li>\r\n                </div>\r\n                <div class=\"cax-nav-subscription-list\" *ngIf=\"subscriptionMode === 'advance' && advanceSubscriptionList?.length\">\r\n                    <div *ngFor=\"let item of advanceSubscriptionList, let i = index\">\r\n                        <li [class.active]=\"selectedSubscription?.name === item.name\" class=\"cax-nav-advance-subscription-list-item\" (click)=\"toggleSubscriptionList(i)\">\r\n                            <span>{{ item.name }}</span>\r\n                            <i *ngIf=\"!item.check\" class=\"cax cax-alt-arrow-down\"></i>\r\n                            <i *ngIf=\"item.check\" class=\"cax cax-alt-arrow-up\"></i>\r\n                        </li>\r\n                        <div *ngIf=\"item.check\" class=\"cax-nav-advance-subscription-child-list\">\r\n                            <li [class.active]=\"selectedSubscription?.selected === child\" class=\"cax-nav-advance-subscription-child-list-item\" *ngFor=\"let child of item.subscription\" (click)=\"updateSubscription(item, child)\">\r\n                                <span>{{ child }}</span>\r\n                                <cax-radioButton [size]=\"'sm'\" *ngIf=\"selectedSubscription?.selected === child\" value=\"1\" [(ngModel)]=\"checkRadio\"></cax-radioButton>\r\n                            </li>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"profile\" class=\"cax-nav-profile-options\" (click)=\"emitProfile()\">\r\n                    <i class=\"cax cax-user-rounded\"></i>\r\n                    <span>View Profile</span>\r\n                </div>\r\n                <div *ngIf=\"settings\" class=\"cax-nav-profile-options\" (click)=\"emitSettings()\">\r\n                    <i class=\"cax cax-settings\"></i>\r\n                    <span>Account Settings</span>\r\n                </div>\r\n                <div *ngIf=\"logout\" class=\"cax-nav-profile-options cax-nav-logout\" (click)=\"emitLogout()\">\r\n                    <i class=\"cax cax-logout\"></i>\r\n                    <span>Logout</span>\r\n                </div>\r\n                <div class=\"cax-nav-copyright-container\">\r\n                    <cax-logo width=\"55px\" height=\"17px\"></cax-logo>\r\n                    <div class=\"cax-nav-copyright\">\r\n                        <span *ngIf=\"copyrightYear\">&copy; {{ copyrightYear }}</span>\r\n                        <span *ngIf=\"version\">{{ version }}</span>\r\n                    </div>\r\n                </div>\r\n            </cax-overlayPanel>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-nav{width:88px;height:100vh;transition:width .3s cubic-bezier(.4,0,.2,1);overflow:hidden;padding:16px 8px;position:absolute;left:0;top:0;z-index:1200;will-change:width}.cax-nav .cax-nav-header .cax-image img{max-width:26px;object-fit:cover;transition:max-width .3s cubic-bezier(.4,0,.2,1);will-change:max-width}.cax-nav.cax-nav-expand{width:264px}.cax-nav.cax-nav-expand .cax-nav-bottom-container{width:248px;transition:width .3s cubic-bezier(.4,0,.2,1)}.cax-nav.cax-nav-expand .cax-nav-header .cax-image img{max-width:100px;object-fit:cover;transition:max-width .3s cubic-bezier(.4,0,.2,1)}.cax-nav-header-container{display:flex;align-items:center;justify-content:center;height:64px}.cax-nav-header{display:flex;align-items:center;justify-content:center}.cax-nav-header span{font-weight:700;font-size:12px}.cax-nav .cax-divider.cax-divider-vertical{margin:0 8px;height:36px}.cax-nav-list-container,.cax-nav-bottom-list{margin:24px 0}.cax-nav-list-container ul,.cax-nav-bottom-list ul{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;gap:16px}.cax-nav-list-container ul li,.cax-nav-bottom-list ul li{padding:12px 24px;border-radius:12px;display:flex;align-items:center;cursor:pointer;height:56px;line-height:24px}.cax-nav-list-container ul li .cax-image,.cax-nav-bottom-list ul li .cax-image{transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform}.cax-nav-list-container ul li .cax-image img,.cax-nav-bottom-list ul li .cax-image img{transition:opacity .3s cubic-bezier(.4,0,.2,1);will-change:opacity;backface-visibility:hidden}.cax-nav-list-container{overflow-y:auto}.cax-nav-list-container::-webkit-scrollbar{display:none}.cax-nav-bottom-container{position:absolute;bottom:16px}.cax-nav-account-details{border-radius:12px;padding:12px;cursor:pointer;transition:width .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:flex-start;will-change:width}.cax-nav-account-details .cax-nav-account-icon{display:grid;margin-left:auto}.cax-nav-account-details .cax-avatar{transition:transform .3s cubic-bezier(.4,0,.2,1);will-change:transform}.cax-nav-account-details .cax-avatar img{transition:opacity .3s cubic-bezier(.4,0,.2,1);will-change:opacity;backface-visibility:hidden}.cax-nav.cax-nav-expand .cax-nav-account-details{width:248px}.cax-nav-user{display:grid;margin:0 8px;white-space:nowrap}.cax-nav-user .cax-nav-user-name{font-size:16px;font-weight:500;line-height:24px}.cax-nav-user .cax-nav-user-role{font-size:14px;font-weight:400;line-height:21px}.cax-overlaypanel{width:320px}.cax-overlaypanel .cax-overlaypanel-content{padding:8px}.cax-nav-copyright-container{display:flex;align-items:center;justify-content:space-between}.cax-nav-copyright-container .cax-nav-copyright{font-size:12px;font-weight:500}.cax-nav-copyright-container .cax-nav-copyright span{margin:0 0 0 16px}.cax-nav-profile-options{padding:12px 24px;font-weight:600;line-height:24px;display:flex;align-items:center;cursor:pointer;border-radius:12px;margin-bottom:8px;font-size:16px}.cax-nav-profile-options span{margin-left:8px}.cax-nav-overlay-expand{left:270px!important;top:auto!important;bottom:6px}.cax-nav-overlay{left:94px!important;top:auto!important;bottom:6px}}.c-pointer{cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { header: [{
                 type: Input
             }], topNavList: [{
                 type: Input