cax-design-system 2.5.0 → 2.6.0

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

@@ -14,7 +14,9 @@ import { AvatarModule } from 'cax-design-system/avatar';
 import * as i6 from 'cax-design-system/overlaypanel';
 import { OverlayPanelModule } from 'cax-design-system/overlaypanel';
 import { OverlayModule } from 'cax-design-system/overlay';
+import * as i7 from 'cax-design-system/radiobutton';
 import { RadioButtonModule } from 'cax-design-system/radiobutton';
+import * as i8 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 class Navigation {
@@ -31,10 +33,13 @@ class Navigation {
     settings = true;
     userName;
     userImage;
-    userRole;
-    organisationDetails;
     headerLogo;
     headerInitials;
+    subscriptionMode = 'default';
+    subscriptionList;
+    selectedSubscription;
+    advanceSubscriptionList;
+    displaySubscriptionName;
     onNavListItemChange = new EventEmitter();
     onNotificationClick = new EventEmitter();
     onHelpCentreClick = new EventEmitter();
@@ -42,13 +47,13 @@ class Navigation {
     onProfileClick = new EventEmitter();
     onSettingsClick = new EventEmitter();
     onLogoClick = new EventEmitter();
-    onPlanChange = new EventEmitter();
+    onSubscriptionChange = new EventEmitter();
     isHovered = false;
     isNavExpanded = false;
     notificationActive = false;
     helpCentreActive = false;
     accountDetailsActive = false;
-    selectedOrganisastionPlan;
+    checkRadio = 1;
     bottomContainer;
     headerContainer;
     ngOnChanges() {
@@ -109,9 +114,44 @@ class Navigation {
                 this.topNavList[0].active = true;
             }
         }
-        this.selectedOrganisastionPlan = 0;
     }
     ngAfterViewInit() {
+        if (this.advanceSubscriptionList)
+            this.advanceSubscriptionList = this.advanceSubscriptionList.map((item) => {
+                return { ...item, check: false };
+            });
+        if (this.subscriptionMode === 'advance') {
+            if (this.advanceSubscriptionList.length) {
+                if (!(typeof this.selectedSubscription === 'object' &&
+                    this.selectedSubscription?.name &&
+                    this.selectedSubscription?.selected &&
+                    this.advanceSubscriptionList.find((item) => typeof this.selectedSubscription === 'object' && item.name === this.selectedSubscription.name)?.subscription.includes(this.selectedSubscription.selected))) {
+                    this.advanceSubscriptionList.some((list) => {
+                        if (list.subscription.length) {
+                            this.selectedSubscription = {
+                                name: list.name,
+                                selected: list.subscription[0]
+                            };
+                            return true;
+                        }
+                    });
+                }
+            }
+        }
+        else {
+            if (this.subscriptionList?.length) {
+                if (!this.subscriptionList.some((a) => a == this.selectedSubscription))
+                    this.selectedSubscription = this.subscriptionList[0];
+            }
+        }
+        if (!this.displaySubscriptionName?.length) {
+            if (this.selectedSubscription && typeof this.selectedSubscription === 'object') {
+                this.displaySubscriptionName = this.selectedSubscription.name + ' - ' + this.selectedSubscription.selected;
+            }
+            else if (this.selectedSubscription && typeof this.selectedSubscription === 'string') {
+                this.displaySubscriptionName = this.selectedSubscription;
+            }
+        }
         this.adjustUpDivHeight();
     }
     onItemClick(e, item, index, position) {
@@ -165,10 +205,6 @@ class Navigation {
     emitLogoClick() {
         this.onLogoClick.emit();
     }
-    onPlanClick(orgDetails, index) {
-        this.selectedOrganisastionPlan = index;
-        this.onPlanChange.emit(orgDetails);
-    }
     onResize() {
         this.adjustUpDivHeight();
     }
@@ -191,8 +227,27 @@ class Navigation {
         else
             this.isNavExpanded = false;
     }
+    changeActiveSusbcription(item) {
+        this.selectedSubscription = item;
+        this.onSubscriptionChange.emit({ selected: item });
+    }
+    updateSubscription(item, child) {
+        this.selectedSubscription = { name: item.name, selected: child };
+        this.onSubscriptionChange.emit(this.selectedSubscription);
+    }
+    toggleSubscriptionList(index) {
+        if (this.advanceSubscriptionList[index].check) {
+            this.advanceSubscriptionList[index].check = false;
+        }
+        else {
+            this.advanceSubscriptionList = this.advanceSubscriptionList.map((item) => {
+                return { ...item, check: false };
+            });
+            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", userRole: "userRole", organisationDetails: "organisationDetails", headerLogo: "headerLogo", headerInitials: "headerInitials" }, outputs: { onNavListItemChange: "onNavListItemChange", onNotificationClick: "onNotificationClick", onHelpCentreClick: "onHelpCentreClick", onLogoutClick: "onLogoutClick", onProfileClick: "onProfileClick", onSettingsClick: "onSettingsClick", onLogoClick: "onLogoClick", onPlanChange: "onPlanChange" }, 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)=\"isHovered = true; isNavExpanded = true\" (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 class=\"cax cax-bell\"></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\">{{ userRole }}</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 *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: "ngmodule", type: FormsModule }], animations: [
+    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" }, outputs: { onNavListItemChange: "onNavListItemChange", onNotificationClick: "onNotificationClick", onHelpCentreClick: "onHelpCentreClick", onLogoutClick: "onLogoutClick", onProfileClick: "onProfileClick", onSettingsClick: "onSettingsClick", onLogoClick: "onLogoClick", onSubscriptionChange: "onSubscriptionChange" }, 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)=\"isHovered = true; isNavExpanded = true\" (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 class=\"cax cax-bell\"></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"] }], 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 }))])
@@ -216,7 +271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         ])
                     ], 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)=\"isHovered = true; isNavExpanded = true\" (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 class=\"cax cax-bell\"></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\">{{ userRole }}</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 *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"] }]
+                    }, template: "<div *ngIf=\"accountDetailsActive\" class=\"cax-nav-backdrop\"></div>\r\n<div class=\"cax-nav\" [ngClass]=\"{ 'cax-nav-expand': isNavExpanded }\" (mouseenter)=\"isHovered = true; isNavExpanded = true\" (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 class=\"cax cax-bell\"></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: [{
                 type: Input
             }], topNavList: [{
@@ -243,14 +298,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], userImage: [{
                 type: Input
-            }], userRole: [{
-                type: Input
-            }], organisationDetails: [{
-                type: Input
             }], headerLogo: [{
                 type: Input
             }], headerInitials: [{
                 type: Input
+            }], subscriptionMode: [{
+                type: Input
+            }], subscriptionList: [{
+                type: Input
+            }], selectedSubscription: [{
+                type: Input
+            }], advanceSubscriptionList: [{
+                type: Input
+            }], displaySubscriptionName: [{
+                type: Input
             }], onNavListItemChange: [{
                 type: Output
             }], onNotificationClick: [{
@@ -265,7 +326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Output
             }], onLogoClick: [{
                 type: Output
-            }], onPlanChange: [{
+            }], onSubscriptionChange: [{
                 type: Output
             }], bottomContainer: [{
                 type: ViewChild,

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

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-navigation.mjs","sources":["../../src/app/components/navigation/navigation.ts","../../src/app/components/navigation/navigation.html","../../src/app/components/navigation/navigation.module.ts","../../src/app/components/navigation/cax-design-system-navigation.ts"],"sourcesContent":["import { trigger, transition, style, animate } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, Output, ViewChild, ElementRef, HostListener, AfterViewInit, OnChanges } from '@angular/core';\nimport { DividerModule } from 'cax-design-system/divider';\nimport { LogoModule } from 'cax-design-system/logo';\nimport { NavListItem, OrganisationDetails, TabIndexType } from './navigation.interface';\nimport { ImageModule } from 'cax-design-system/image';\nimport { AvatarModule } from 'cax-design-system/avatar';\nimport { OverlayPanelModule } from 'cax-design-system/overlaypanel';\nimport { OverlayModule } from 'cax-design-system/overlay';\nimport { RadioButtonModule } from 'cax-design-system/radiobutton';\nimport { FormsModule } from '@angular/forms';\n\n@Component({\n    selector: 'cax-navigation',\n    templateUrl: './navigation.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./navigation.scss'],\n    standalone: true,\n    imports: [LogoModule, CommonModule, DividerModule, ImageModule, AvatarModule, OverlayPanelModule, OverlayModule, RadioButtonModule, FormsModule],\n    animations: [\n        trigger('leftFade', [\n            transition(':enter', [style({ transform: 'translateX(-100%)', opacity: 0 }), animate('300ms', style({ transform: 'translateX(0)', opacity: 1 }))]),\n            transition(':leave', [style({ transform: 'translateX(0)', opacity: 0.5 }), animate('300ms', style({ transform: 'translateX(-100%)', opacity: 0 }))])\n        ]),\n        trigger('rightFade', [\n            transition(':enter', [style({ transform: 'translateX(200%)', opacity: 0 }), animate('300ms', style({ transform: 'translateX(0)', opacity: 1 }))]),\n            transition(':leave', [style({ transform: 'translateX(0)', opacity: 1 }), animate('300ms', style({ transform: 'translateX(100%)', opacity: 0 }))])\n        ])\n    ],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Navigation implements OnChanges, AfterViewInit {\n    @Input() header: string | undefined;\n    @Input() topNavList: NavListItem[];\n    @Input() bottomNavList: NavListItem[];\n    @Input() activeTab: TabIndexType | 'notifications' | 'help-centre';\n    @Input() notifications: boolean = true;\n    @Input() helpCentre: boolean = true;\n    @Input() copyrightYear: number | undefined = new Date().getFullYear();\n    @Input() version: string | undefined;\n    @Input() logout: boolean = true;\n    @Input() profile: boolean = true;\n    @Input() settings: boolean = true;\n    @Input() userName: string | undefined;\n    @Input() userImage: string | undefined;\n    @Input() userRole: string | undefined;\n    @Input() organisationDetails: OrganisationDetails[];\n    @Input() headerLogo: { expanded: string; collapsed: string } | undefined;\n    @Input() headerInitials: string | undefined;\n\n    @Output() onNavListItemChange: EventEmitter<{ activeTab: TabIndexType | 'notifications' | 'help-centre' }> = new EventEmitter();\n    @Output() onNotificationClick: EventEmitter<any> = new EventEmitter();\n    @Output() onHelpCentreClick: EventEmitter<any> = new EventEmitter();\n    @Output() onLogoutClick: EventEmitter<any> = new EventEmitter();\n    @Output() onProfileClick: EventEmitter<any> = new EventEmitter();\n    @Output() onSettingsClick: EventEmitter<any> = new EventEmitter();\n    @Output() onLogoClick: EventEmitter<any> = new EventEmitter();\n    @Output() onPlanChange: EventEmitter<OrganisationDetails> = new EventEmitter();\n\n    isHovered: boolean = false;\n    isNavExpanded: boolean = false;\n    notificationActive: boolean = false;\n    helpCentreActive: boolean = false;\n    accountDetailsActive: boolean = false;\n    selectedOrganisastionPlan: number;\n    @ViewChild('bottomContainer') bottomContainer!: ElementRef<HTMLDivElement>;\n    @ViewChild('headerContainer') headerContainer!: ElementRef<HTMLDivElement>;\n\n    ngOnChanges() {\n        if (this.activeTab == 'notifications') {\n            if (this.notifications) this.notificationActive = true;\n            else this.topNavList[0].active = true;\n        } else if (this.activeTab == 'help-centre') {\n            if (this.helpCentre) this.helpCentreActive = true;\n            else this.topNavList[0].active = true;\n        } else {\n            if (this.activeTab?.position == 'top') {\n                if (this.activeTab.index > -1 && this.activeTab.index < this.topNavList?.length) {\n                    this.topNavList?.map((list: NavListItem) => (list.active = false));\n                    this.topNavList[this.activeTab.index].active = true;\n                } else {\n                    if (this.topNavList?.filter((list: NavListItem) => list.active).length > 0) {\n                        let count = 0;\n                        this.topNavList?.forEach((list: NavListItem) => {\n                            if (list.active && count == 0) count = count + 1;\n                            else list.active = false;\n                        });\n                    } else if (!this.topNavList?.filter((list: NavListItem) => list.active).length) {\n                        this.topNavList[0].active = true;\n                    }\n                }\n            } else if (this.activeTab?.position == 'bottom') {\n                if (this.activeTab.index > -1 && this.activeTab.index < this.bottomNavList?.length) {\n                    this.bottomNavList?.map((list: NavListItem) => (list.active = false));\n                    this.bottomNavList[this.activeTab.index].active = true;\n                } else {\n                    if (this.bottomNavList?.filter((list: NavListItem) => list.active).length > 0) {\n                        let count = 0;\n                        this.bottomNavList?.forEach((list: NavListItem) => {\n                            if (list.active && count == 0) count = count + 1;\n                            else list.active = false;\n                        });\n                    } else if (!this.bottomNavList?.filter((list: NavListItem) => list.active).length) {\n                        this.bottomNavList[0].active = true;\n                    }\n                }\n            } else {\n                this.topNavList[0].active = true;\n            }\n        }\n        this.selectedOrganisastionPlan = 0;\n    }\n\n    ngAfterViewInit(): void {\n        this.adjustUpDivHeight();\n    }\n\n    onItemClick(e: MouseEvent, item: NavListItem, index: number, position: 'top' | 'bottom') {\n        this.topNavList?.map((list: NavListItem) => (list.active = false));\n        this.bottomNavList?.map((list: NavListItem) => (list.active = false));\n        this.notificationActive = false;\n        this.helpCentreActive = false;\n        if (position == 'top') this.topNavList[index].active = true;\n        else if (position == 'bottom') this.bottomNavList[index].active = true;\n        this.onNavListItemChange.emit({ activeTab: { position: position, index: index } });\n        if (item.command) {\n            item.command({ originalEvent: e, item });\n        }\n    }\n\n    getInitials(name: string): string {\n        if (!name) return '';\n        const nameParts = name.trim().split(/\\s+/);\n        if (nameParts.length === 1) {\n            return nameParts[0][0].toUpperCase();\n        }\n        return (nameParts[0][0] + nameParts[nameParts.length - 1][0]).toUpperCase();\n    }\n\n    emitNotification() {\n        this.topNavList?.map((list: NavListItem) => (list.active = false));\n        this.bottomNavList?.map((list: NavListItem) => (list.active = false));\n        this.helpCentreActive = false;\n        this.notificationActive = true;\n        this.onNavListItemChange.emit({ activeTab: 'notifications' });\n        this.onNotificationClick.emit();\n    }\n\n    emitHelpCentre() {\n        this.topNavList?.map((list: NavListItem) => (list.active = false));\n        this.bottomNavList?.map((list: NavListItem) => (list.active = false));\n        this.helpCentreActive = true;\n        this.notificationActive = false;\n        this.onNavListItemChange.emit({ activeTab: 'help-centre' });\n        this.onHelpCentreClick.emit();\n    }\n\n    emitLogout() {\n        this.onLogoutClick.emit();\n    }\n\n    emitProfile() {\n        this.onProfileClick.emit();\n    }\n\n    emitSettings() {\n        this.onSettingsClick.emit();\n    }\n\n    emitLogoClick() {\n        this.onLogoClick.emit();\n    }\n\n    onPlanClick(orgDetails: OrganisationDetails, index: number) {\n        this.selectedOrganisastionPlan = index;\n        this.onPlanChange.emit(orgDetails);\n    }\n\n    @HostListener('window:resize')\n    onResize(): void {\n        this.adjustUpDivHeight();\n    }\n\n    adjustUpDivHeight() {\n        const bottomHeight = this.bottomContainer?.nativeElement.offsetHeight;\n        const headerHeight = this.headerContainer?.nativeElement.offsetHeight;\n        const containerHeight = window.innerHeight;\n        return containerHeight - bottomHeight - headerHeight - 56;\n    }\n\n    onMouseLeave() {\n        this.isHovered = false;\n        if (!this.accountDetailsActive) {\n            this.isNavExpanded = false;\n        }\n    }\n\n    hideAccountDetails() {\n        this.accountDetailsActive = false;\n        if (this.isHovered) this.isNavExpanded = true;\n        else this.isNavExpanded = false;\n    }\n}\n","<div *ngIf=\"accountDetailsActive\" class=\"cax-nav-backdrop\"></div>\r\n<div class=\"cax-nav\" [ngClass]=\"{ 'cax-nav-expand': isNavExpanded }\" (mouseenter)=\"isHovered = true; isNavExpanded = true\" (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 class=\"cax cax-bell\"></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\">{{ userRole }}</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 *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","import { NgModule } from '@angular/core';\nimport { Navigation } from './navigation';\n\n@NgModule({\n    imports: [Navigation],\n    exports: [Navigation]\n})\nexport class NavigationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-navigation.mjs","sources":["../../src/app/components/navigation/navigation.ts","../../src/app/components/navigation/navigation.html","../../src/app/components/navigation/navigation.module.ts","../../src/app/components/navigation/cax-design-system-navigation.ts"],"sourcesContent":["import { trigger, transition, style, animate } from '@angular/animations';\nimport { CommonModule } from '@angular/common';\nimport { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, Output, ViewChild, ElementRef, HostListener, AfterViewInit, OnChanges } from '@angular/core';\nimport { DividerModule } from 'cax-design-system/divider';\nimport { LogoModule } from 'cax-design-system/logo';\nimport { ActiveSubscription, NavListItem, SubscriptionList, TabIndexType } from './navigation.interface';\nimport { ImageModule } from 'cax-design-system/image';\nimport { AvatarModule } from 'cax-design-system/avatar';\nimport { OverlayPanelModule } from 'cax-design-system/overlaypanel';\nimport { OverlayModule } from 'cax-design-system/overlay';\nimport { RadioButtonModule } from 'cax-design-system/radiobutton';\nimport { FormsModule } from '@angular/forms';\n\n@Component({\n    selector: 'cax-navigation',\n    templateUrl: './navigation.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./navigation.scss'],\n    standalone: true,\n    imports: [LogoModule, CommonModule, DividerModule, ImageModule, AvatarModule, OverlayPanelModule, OverlayModule, RadioButtonModule, FormsModule],\n    animations: [\n        trigger('leftFade', [\n            transition(':enter', [style({ transform: 'translateX(-100%)', opacity: 0 }), animate('300ms', style({ transform: 'translateX(0)', opacity: 1 }))]),\n            transition(':leave', [style({ transform: 'translateX(0)', opacity: 0.5 }), animate('300ms', style({ transform: 'translateX(-100%)', opacity: 0 }))])\n        ]),\n        trigger('rightFade', [\n            transition(':enter', [style({ transform: 'translateX(200%)', opacity: 0 }), animate('300ms', style({ transform: 'translateX(0)', opacity: 1 }))]),\n            transition(':leave', [style({ transform: 'translateX(0)', opacity: 1 }), animate('300ms', style({ transform: 'translateX(100%)', opacity: 0 }))])\n        ])\n    ],\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Navigation implements OnChanges, AfterViewInit {\n    @Input() header: string | undefined;\n    @Input() topNavList: NavListItem[];\n    @Input() bottomNavList: NavListItem[];\n    @Input() activeTab: TabIndexType | 'notifications' | 'help-centre';\n    @Input() notifications: boolean = true;\n    @Input() helpCentre: boolean = true;\n    @Input() copyrightYear: number | undefined = new Date().getFullYear();\n    @Input() version: string | undefined;\n    @Input() logout: boolean = true;\n    @Input() profile: boolean = true;\n    @Input() settings: boolean = true;\n    @Input() userName: string | undefined;\n    @Input() userImage: string | undefined;\n    @Input() headerLogo: { expanded: string; collapsed: string } | undefined;\n    @Input() headerInitials: string | undefined;\n    @Input() subscriptionMode: 'advance' | 'default' = 'default';\n    @Input() subscriptionList: string[];\n    @Input() selectedSubscription: string | ActiveSubscription | undefined;\n    @Input() advanceSubscriptionList: SubscriptionList[];\n    @Input() displaySubscriptionName: string | undefined;\n\n    @Output() onNavListItemChange: EventEmitter<{ activeTab: TabIndexType | 'notifications' | 'help-centre' }> = new EventEmitter();\n    @Output() onNotificationClick: EventEmitter<any> = new EventEmitter();\n    @Output() onHelpCentreClick: EventEmitter<any> = new EventEmitter();\n    @Output() onLogoutClick: EventEmitter<any> = new EventEmitter();\n    @Output() onProfileClick: EventEmitter<any> = new EventEmitter();\n    @Output() onSettingsClick: EventEmitter<any> = new EventEmitter();\n    @Output() onLogoClick: EventEmitter<any> = new EventEmitter();\n    @Output() onSubscriptionChange: EventEmitter<any> = new EventEmitter();\n\n    isHovered: boolean = false;\n    isNavExpanded: boolean = false;\n    notificationActive: boolean = false;\n    helpCentreActive: boolean = false;\n    accountDetailsActive: boolean = false;\n    checkRadio = 1;\n    @ViewChild('bottomContainer') bottomContainer!: ElementRef<HTMLDivElement>;\n    @ViewChild('headerContainer') headerContainer!: ElementRef<HTMLDivElement>;\n\n    ngOnChanges() {\n        if (this.activeTab == 'notifications') {\n            if (this.notifications) this.notificationActive = true;\n            else this.topNavList[0].active = true;\n        } else if (this.activeTab == 'help-centre') {\n            if (this.helpCentre) this.helpCentreActive = true;\n            else this.topNavList[0].active = true;\n        } else {\n            if (this.activeTab?.position == 'top') {\n                if (this.activeTab.index > -1 && this.activeTab.index < this.topNavList?.length) {\n                    this.topNavList?.map((list: NavListItem) => (list.active = false));\n                    this.topNavList[this.activeTab.index].active = true;\n                } else {\n                    if (this.topNavList?.filter((list: NavListItem) => list.active).length > 0) {\n                        let count = 0;\n                        this.topNavList?.forEach((list: NavListItem) => {\n                            if (list.active && count == 0) count = count + 1;\n                            else list.active = false;\n                        });\n                    } else if (!this.topNavList?.filter((list: NavListItem) => list.active).length) {\n                        this.topNavList[0].active = true;\n                    }\n                }\n            } else if (this.activeTab?.position == 'bottom') {\n                if (this.activeTab.index > -1 && this.activeTab.index < this.bottomNavList?.length) {\n                    this.bottomNavList?.map((list: NavListItem) => (list.active = false));\n                    this.bottomNavList[this.activeTab.index].active = true;\n                } else {\n                    if (this.bottomNavList?.filter((list: NavListItem) => list.active).length > 0) {\n                        let count = 0;\n                        this.bottomNavList?.forEach((list: NavListItem) => {\n                            if (list.active && count == 0) count = count + 1;\n                            else list.active = false;\n                        });\n                    } else if (!this.bottomNavList?.filter((list: NavListItem) => list.active).length) {\n                        this.bottomNavList[0].active = true;\n                    }\n                }\n            } else {\n                this.topNavList[0].active = true;\n            }\n        }\n    }\n\n    ngAfterViewInit(): void {\n        if (this.advanceSubscriptionList)\n            this.advanceSubscriptionList = this.advanceSubscriptionList.map((item) => {\n                return { ...item, check: false };\n            });\n        if (this.subscriptionMode === 'advance') {\n            if (this.advanceSubscriptionList.length) {\n                if (\n                    !(\n                        typeof this.selectedSubscription === 'object' &&\n                        this.selectedSubscription?.name &&\n                        this.selectedSubscription?.selected &&\n                        this.advanceSubscriptionList.find((item) => typeof this.selectedSubscription === 'object' && item.name === this.selectedSubscription.name)?.subscription.includes(this.selectedSubscription.selected)\n                    )\n                ) {\n                    this.advanceSubscriptionList.some((list: any) => {\n                        if (list.subscription.length) {\n                            this.selectedSubscription = {\n                                name: list.name,\n                                selected: list.subscription[0]\n                            };\n                            return true;\n                        }\n                    });\n                }\n            }\n        } else {\n            if (this.subscriptionList?.length) {\n                if (!this.subscriptionList.some((a) => a == this.selectedSubscription)) this.selectedSubscription = this.subscriptionList[0];\n            }\n        }\n        if (!this.displaySubscriptionName?.length) {\n            if (this.selectedSubscription && typeof this.selectedSubscription === 'object') {\n                this.displaySubscriptionName = this.selectedSubscription.name + ' - ' + this.selectedSubscription.selected;\n            } else if (this.selectedSubscription && typeof this.selectedSubscription === 'string') {\n                this.displaySubscriptionName = this.selectedSubscription;\n            }\n        }\n        this.adjustUpDivHeight();\n    }\n\n    onItemClick(e: MouseEvent, item: NavListItem, index: number, position: 'top' | 'bottom') {\n        this.topNavList?.map((list: NavListItem) => (list.active = false));\n        this.bottomNavList?.map((list: NavListItem) => (list.active = false));\n        this.notificationActive = false;\n        this.helpCentreActive = false;\n        if (position == 'top') this.topNavList[index].active = true;\n        else if (position == 'bottom') this.bottomNavList[index].active = true;\n        this.onNavListItemChange.emit({ activeTab: { position: position, index: index } });\n        if (item.command) {\n            item.command({ originalEvent: e, item });\n        }\n    }\n\n    getInitials(name: string): string {\n        if (!name) return '';\n        const nameParts = name.trim().split(/\\s+/);\n        if (nameParts.length === 1) {\n            return nameParts[0][0].toUpperCase();\n        }\n        return (nameParts[0][0] + nameParts[nameParts.length - 1][0]).toUpperCase();\n    }\n\n    emitNotification() {\n        this.topNavList?.map((list: NavListItem) => (list.active = false));\n        this.bottomNavList?.map((list: NavListItem) => (list.active = false));\n        this.helpCentreActive = false;\n        this.notificationActive = true;\n        this.onNavListItemChange.emit({ activeTab: 'notifications' });\n        this.onNotificationClick.emit();\n    }\n\n    emitHelpCentre() {\n        this.topNavList?.map((list: NavListItem) => (list.active = false));\n        this.bottomNavList?.map((list: NavListItem) => (list.active = false));\n        this.helpCentreActive = true;\n        this.notificationActive = false;\n        this.onNavListItemChange.emit({ activeTab: 'help-centre' });\n        this.onHelpCentreClick.emit();\n    }\n\n    emitLogout() {\n        this.onLogoutClick.emit();\n    }\n\n    emitProfile() {\n        this.onProfileClick.emit();\n    }\n\n    emitSettings() {\n        this.onSettingsClick.emit();\n    }\n\n    emitLogoClick() {\n        this.onLogoClick.emit();\n    }\n\n    @HostListener('window:resize')\n    onResize(): void {\n        this.adjustUpDivHeight();\n    }\n\n    adjustUpDivHeight() {\n        const bottomHeight = this.bottomContainer?.nativeElement.offsetHeight;\n        const headerHeight = this.headerContainer?.nativeElement.offsetHeight;\n        const containerHeight = window.innerHeight;\n        return containerHeight - bottomHeight - headerHeight - 56;\n    }\n\n    onMouseLeave() {\n        this.isHovered = false;\n        if (!this.accountDetailsActive) {\n            this.isNavExpanded = false;\n        }\n    }\n\n    hideAccountDetails() {\n        this.accountDetailsActive = false;\n        if (this.isHovered) this.isNavExpanded = true;\n        else this.isNavExpanded = false;\n    }\n\n    changeActiveSusbcription(item: string) {\n        this.selectedSubscription = item;\n        this.onSubscriptionChange.emit({ selected: item });\n    }\n\n    updateSubscription(item: SubscriptionList, child: string) {\n        this.selectedSubscription = { name: item.name, selected: child };\n        this.onSubscriptionChange.emit(this.selectedSubscription);\n    }\n\n    toggleSubscriptionList(index: number) {\n        if (this.advanceSubscriptionList[index].check) {\n            this.advanceSubscriptionList[index].check = false;\n        } else {\n            this.advanceSubscriptionList = this.advanceSubscriptionList.map((item) => {\n                return { ...item, check: false };\n            });\n            this.advanceSubscriptionList[index].check = true;\n        }\n    }\n}\n","<div *ngIf=\"accountDetailsActive\" class=\"cax-nav-backdrop\"></div>\r\n<div class=\"cax-nav\" [ngClass]=\"{ 'cax-nav-expand': isNavExpanded }\" (mouseenter)=\"isHovered = true; isNavExpanded = true\" (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 class=\"cax cax-bell\"></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","import { NgModule } from '@angular/core';\nimport { Navigation } from './navigation';\n\n@NgModule({\n    imports: [Navigation],\n    exports: [Navigation]\n})\nexport class NavigationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -169,6 +169,11 @@ class Sidebar {
     headlessTemplate = null;
     footerTemplate;
     closeIconTemplate = null;
+    /**
+     * Inline style of the header section.
+     * @group Props
+     */
+    headerStyle = {}; // Changed to initialize with empty object
     // headlessTemplate: Nullable<TemplateRef<any>>;
     constructor(document, el, renderer, cd, config) {
         this.document = document;
@@ -348,13 +353,13 @@ class Sidebar {
         this.unbindAnimationEndListener();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Sidebar, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Sidebar, isStandalone: true, selector: "cax-sidebar", inputs: { headerText: "headerText", appendTo: "appendTo", blockScroll: ["blockScroll", "blockScroll", booleanAttribute], style: "style", styleClass: "styleClass", ariaCloseLabel: "ariaCloseLabel", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], modal: ["modal", "modal", booleanAttribute], dismissible: ["dismissible", "dismissible", booleanAttribute], showCloseIcon: ["showCloseIcon", "showCloseIcon", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], transitionOptions: "transitionOptions", visible: "visible", position: "position", fullScreen: "fullScreen", contentTemplate: "contentTemplate", headerTemplate: "headerTemplate", headlessTemplate: "headlessTemplate", footerTemplate: "footerTemplate", closeIconTemplate: "closeIconTemplate" }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div>\r\n    <div\r\n        #container\r\n        [ngClass]=\"{\r\n          'cax-sidebar': true,\r\n          'cax-sidebar-active': visible,\r\n          'cax-sidebar-left': position === 'left' && !fullScreen,\r\n          'cax-sidebar-right': position === 'right' && !fullScreen,\r\n          'cax-sidebar-top': position === 'top' && !fullScreen,\r\n          'cax-sidebar-bottom': position === 'bottom' && !fullScreen,\r\n          'cax-sidebar-full': fullScreen\r\n      }\"\r\n        *ngIf=\"visible\"\r\n        [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\r\n        (@panelState.start)=\"onAnimationStart($event)\"\r\n        (@panelState.done)=\"onAnimationEnd($event)\"\r\n        [ngStyle]=\"style\"\r\n        [class]=\"styleClass\"\r\n        role=\"complementary\"\r\n        [attr.data-pc-name]=\"'sidebar'\"\r\n        [attr.data-pc-section]=\"'root'\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n    >\r\n\r\n        <ng-container *ngIf=\"headlessTemplate; else notHeadless\">\r\n            <ng-container *ngTemplateOutlet=\"headlessTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #notHeadless>\r\n            <div class=\"cax-sidebar-header\" [attr.data-pc-section]=\"'header'\">\r\n\r\n                <ng-container *ngIf=\"headerTemplate; else defaultHeader\">\r\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultHeader>\r\n                    <div>{{ headerText || 'Sidebar' }}</div>\r\n                </ng-template>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"cax-sidebar-close cax-sidebar-icon-css cax-link\"\r\n                    (click)=\"close($event)\"\r\n                    (keydown.enter)=\"close($event)\"\r\n                    [attr.aria-label]=\"ariaCloseLabel\"\r\n                    *ngIf=\"showCloseIcon\"\r\n                    caxRipple\r\n                    [attr.data-pc-section]=\"'closebutton'\"\r\n                    [attr.data-pc-groucax-section]=\"'iconcontainer'\"\r\n                >\r\n                    <TimesIcon *ngIf=\"!closeIconTemplate\" [styleClass]=\"'cax-sidebar-close-icon'\" [attr.data-pc-section]=\"'closeicon'\" />\r\n                    <span *ngIf=\"closeIconTemplate\" class=\"cax-sidebar-close-icon\" [attr.data-pc-section]=\"'closeicon'\">\r\n                        <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n                    </span>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"cax-sidebar-content\" [attr.data-pc-section]=\"'content'\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </div>\r\n            <ng-container *ngIf=\"footerTemplate\">\r\n                <div class=\"cax-sidebar-footer\" [attr.data-pc-section]=\"'footer'\">\r\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n\r\n", styles: ["@layer cax{.cax-sidebar{position:fixed;transition:transform .3s;display:flex;flex-direction:column}.cax-sidebar-content{position:relative;overflow-y:auto;flex-grow:1}.cax-sidebar-header{display:flex;align-items:center}.cax-sidebar-footer{margin-top:auto}.cax-sidebar-icon-css{display:flex;align-items:center;justify-content:center;margin-left:auto}.cax-sidebar-left{top:0;left:0;width:478px;height:-webkit-fill-available;margin:15px;border-radius:12px}.cax-sidebar-right{top:0;right:0;width:480px;height:-webkit-fill-available;margin:15px;border-radius:12px}.cax-sidebar-top{top:0;left:0;width:-webkit-fill-available;height:10rem;margin:15px;border-radius:12px}.cax-sidebar-bottom{bottom:0;left:0;width:-webkit-fill-available;height:10rem;margin:15px;border-radius:12px}.cax-sidebar-full{width:100%;height:100%;top:0;left:0;-webkit-transition:none;transition:none}.cax-sidebar-left.cax-sidebar-sm,.cax-sidebar-right.cax-sidebar-sm{width:478px}.cax-sidebar-left.cax-sidebar-md,.cax-sidebar-right.cax-sidebar-md{width:40rem}.cax-sidebar-left.cax-sidebar-lg,.cax-sidebar-right.cax-sidebar-lg{width:60rem}.cax-sidebar-top.cax-sidebar-sm,.cax-sidebar-bottom.cax-sidebar-sm{height:10rem}.cax-sidebar-top.cax-sidebar-md,.cax-sidebar-bottom.cax-sidebar-md{height:478px}.cax-sidebar-top.cax-sidebar-lg,.cax-sidebar-bottom.cax-sidebar-lg{height:30rem}@media screen and (max-width: 64em){.cax-sidebar-left.cax-sidebar-lg,.cax-sidebar-left.cax-sidebar-md,.cax-sidebar-right.cax-sidebar-lg,.cax-sidebar-right.cax-sidebar-md{width:478px}}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3.Ripple, selector: "[caxRipple]" }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: ButtonModule }], animations: [trigger('panelState', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Sidebar, isStandalone: true, selector: "cax-sidebar", inputs: { headerText: "headerText", appendTo: "appendTo", blockScroll: ["blockScroll", "blockScroll", booleanAttribute], style: "style", styleClass: "styleClass", ariaCloseLabel: "ariaCloseLabel", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], modal: ["modal", "modal", booleanAttribute], dismissible: ["dismissible", "dismissible", booleanAttribute], showCloseIcon: ["showCloseIcon", "showCloseIcon", booleanAttribute], closeOnEscape: ["closeOnEscape", "closeOnEscape", booleanAttribute], transitionOptions: "transitionOptions", visible: "visible", position: "position", fullScreen: "fullScreen", contentTemplate: "contentTemplate", headerTemplate: "headerTemplate", headlessTemplate: "headlessTemplate", footerTemplate: "footerTemplate", closeIconTemplate: "closeIconTemplate", headerStyle: "headerStyle" }, outputs: { onShow: "onShow", onHide: "onHide", visibleChange: "visibleChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div>\r\n    <div\r\n        #container\r\n        [ngClass]=\"{\r\n          'cax-sidebar': true,\r\n          'cax-sidebar-active': visible,\r\n          'cax-sidebar-left': position === 'left' && !fullScreen,\r\n          'cax-sidebar-right': position === 'right' && !fullScreen,\r\n          'cax-sidebar-top': position === 'top' && !fullScreen,\r\n          'cax-sidebar-bottom': position === 'bottom' && !fullScreen,\r\n          'cax-sidebar-full': fullScreen\r\n      }\"\r\n        *ngIf=\"visible\"\r\n        [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\r\n        (@panelState.start)=\"onAnimationStart($event)\"\r\n        (@panelState.done)=\"onAnimationEnd($event)\"\r\n        [ngStyle]=\"style\"\r\n        [class]=\"styleClass\"\r\n        role=\"complementary\"\r\n        [attr.data-pc-name]=\"'sidebar'\"\r\n        [attr.data-pc-section]=\"'root'\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n    >\r\n        <ng-container *ngIf=\"headlessTemplate; else notHeadless\">\r\n            <ng-container *ngTemplateOutlet=\"headlessTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #notHeadless>\r\n            <div class=\"cax-sidebar-header\" [attr.data-pc-section]=\"'header'\" [ngStyle]=\"headerStyle\">\r\n                <ng-container *ngIf=\"headerTemplate; else defaultHeader\">\r\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultHeader>\r\n                    <div>{{ headerText || 'Sidebar' }}</div>\r\n                </ng-template>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"cax-sidebar-close cax-sidebar-icon-css cax-link\"\r\n                    (click)=\"close($event)\"\r\n                    (keydown.enter)=\"close($event)\"\r\n                    [attr.aria-label]=\"ariaCloseLabel\"\r\n                    *ngIf=\"showCloseIcon\"\r\n                    caxRipple\r\n                    [attr.data-pc-section]=\"'closebutton'\"\r\n                    [attr.data-pc-groucax-section]=\"'iconcontainer'\"\r\n                >\r\n                    <TimesIcon *ngIf=\"!closeIconTemplate\" [styleClass]=\"'cax-sidebar-close-icon'\" [attr.data-pc-section]=\"'closeicon'\" />\r\n                    <span *ngIf=\"closeIconTemplate\" class=\"cax-sidebar-close-icon\" [attr.data-pc-section]=\"'closeicon'\">\r\n                        <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n                    </span>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"cax-sidebar-content\" [attr.data-pc-section]=\"'content'\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </div>\r\n            <ng-container *ngIf=\"footerTemplate\">\r\n                <div class=\"cax-sidebar-footer\" [attr.data-pc-section]=\"'footer'\">\r\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-sidebar{position:fixed;transition:transform .3s;display:flex;flex-direction:column}.cax-sidebar-content{position:relative;overflow-y:auto;flex-grow:1}.cax-sidebar-header{display:flex;align-items:center}.cax-sidebar-footer{margin-top:auto}.cax-sidebar-icon-css{display:flex;align-items:center;justify-content:center;margin-left:auto}.cax-sidebar-left{top:0;left:0;width:478px;height:-webkit-fill-available;margin:15px;border-radius:12px}.cax-sidebar-right{top:0;right:0;width:480px;height:-webkit-fill-available;margin:15px;border-radius:12px}.cax-sidebar-top{top:0;left:0;width:-webkit-fill-available;height:10rem;margin:15px;border-radius:12px}.cax-sidebar-bottom{bottom:0;left:0;width:-webkit-fill-available;height:10rem;margin:15px;border-radius:12px}.cax-sidebar-full{width:100%;height:100%;top:0;left:0;-webkit-transition:none;transition:none}.cax-sidebar-left.cax-sidebar-sm,.cax-sidebar-right.cax-sidebar-sm{width:478px}.cax-sidebar-left.cax-sidebar-md,.cax-sidebar-right.cax-sidebar-md{width:40rem}.cax-sidebar-left.cax-sidebar-lg,.cax-sidebar-right.cax-sidebar-lg{width:60rem}.cax-sidebar-top.cax-sidebar-sm,.cax-sidebar-bottom.cax-sidebar-sm{height:10rem}.cax-sidebar-top.cax-sidebar-md,.cax-sidebar-bottom.cax-sidebar-md{height:478px}.cax-sidebar-top.cax-sidebar-lg,.cax-sidebar-bottom.cax-sidebar-lg{height:30rem}@media screen and (max-width: 64em){.cax-sidebar-left.cax-sidebar-lg,.cax-sidebar-left.cax-sidebar-md,.cax-sidebar-right.cax-sidebar-lg,.cax-sidebar-right.cax-sidebar-md{width:478px}}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3.Ripple, selector: "[caxRipple]" }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: TimesIcon, selector: "TimesIcon" }, { kind: "ngmodule", type: ButtonModule }], animations: [trigger('panelState', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Sidebar, decorators: [{
             type: Component,
             args: [{ selector: 'cax-sidebar', animations: [trigger('panelState', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, RippleModule, SharedModule, TimesIcon, ButtonModule], host: {
                         class: 'cax-element'
-                    }, template: "<div>\r\n    <div\r\n        #container\r\n        [ngClass]=\"{\r\n          'cax-sidebar': true,\r\n          'cax-sidebar-active': visible,\r\n          'cax-sidebar-left': position === 'left' && !fullScreen,\r\n          'cax-sidebar-right': position === 'right' && !fullScreen,\r\n          'cax-sidebar-top': position === 'top' && !fullScreen,\r\n          'cax-sidebar-bottom': position === 'bottom' && !fullScreen,\r\n          'cax-sidebar-full': fullScreen\r\n      }\"\r\n        *ngIf=\"visible\"\r\n        [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\r\n        (@panelState.start)=\"onAnimationStart($event)\"\r\n        (@panelState.done)=\"onAnimationEnd($event)\"\r\n        [ngStyle]=\"style\"\r\n        [class]=\"styleClass\"\r\n        role=\"complementary\"\r\n        [attr.data-pc-name]=\"'sidebar'\"\r\n        [attr.data-pc-section]=\"'root'\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n    >\r\n\r\n        <ng-container *ngIf=\"headlessTemplate; else notHeadless\">\r\n            <ng-container *ngTemplateOutlet=\"headlessTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #notHeadless>\r\n            <div class=\"cax-sidebar-header\" [attr.data-pc-section]=\"'header'\">\r\n\r\n                <ng-container *ngIf=\"headerTemplate; else defaultHeader\">\r\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultHeader>\r\n                    <div>{{ headerText || 'Sidebar' }}</div>\r\n                </ng-template>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"cax-sidebar-close cax-sidebar-icon-css cax-link\"\r\n                    (click)=\"close($event)\"\r\n                    (keydown.enter)=\"close($event)\"\r\n                    [attr.aria-label]=\"ariaCloseLabel\"\r\n                    *ngIf=\"showCloseIcon\"\r\n                    caxRipple\r\n                    [attr.data-pc-section]=\"'closebutton'\"\r\n                    [attr.data-pc-groucax-section]=\"'iconcontainer'\"\r\n                >\r\n                    <TimesIcon *ngIf=\"!closeIconTemplate\" [styleClass]=\"'cax-sidebar-close-icon'\" [attr.data-pc-section]=\"'closeicon'\" />\r\n                    <span *ngIf=\"closeIconTemplate\" class=\"cax-sidebar-close-icon\" [attr.data-pc-section]=\"'closeicon'\">\r\n                        <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n                    </span>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"cax-sidebar-content\" [attr.data-pc-section]=\"'content'\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </div>\r\n            <ng-container *ngIf=\"footerTemplate\">\r\n                <div class=\"cax-sidebar-footer\" [attr.data-pc-section]=\"'footer'\">\r\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n\r\n", styles: ["@layer cax{.cax-sidebar{position:fixed;transition:transform .3s;display:flex;flex-direction:column}.cax-sidebar-content{position:relative;overflow-y:auto;flex-grow:1}.cax-sidebar-header{display:flex;align-items:center}.cax-sidebar-footer{margin-top:auto}.cax-sidebar-icon-css{display:flex;align-items:center;justify-content:center;margin-left:auto}.cax-sidebar-left{top:0;left:0;width:478px;height:-webkit-fill-available;margin:15px;border-radius:12px}.cax-sidebar-right{top:0;right:0;width:480px;height:-webkit-fill-available;margin:15px;border-radius:12px}.cax-sidebar-top{top:0;left:0;width:-webkit-fill-available;height:10rem;margin:15px;border-radius:12px}.cax-sidebar-bottom{bottom:0;left:0;width:-webkit-fill-available;height:10rem;margin:15px;border-radius:12px}.cax-sidebar-full{width:100%;height:100%;top:0;left:0;-webkit-transition:none;transition:none}.cax-sidebar-left.cax-sidebar-sm,.cax-sidebar-right.cax-sidebar-sm{width:478px}.cax-sidebar-left.cax-sidebar-md,.cax-sidebar-right.cax-sidebar-md{width:40rem}.cax-sidebar-left.cax-sidebar-lg,.cax-sidebar-right.cax-sidebar-lg{width:60rem}.cax-sidebar-top.cax-sidebar-sm,.cax-sidebar-bottom.cax-sidebar-sm{height:10rem}.cax-sidebar-top.cax-sidebar-md,.cax-sidebar-bottom.cax-sidebar-md{height:478px}.cax-sidebar-top.cax-sidebar-lg,.cax-sidebar-bottom.cax-sidebar-lg{height:30rem}@media screen and (max-width: 64em){.cax-sidebar-left.cax-sidebar-lg,.cax-sidebar-left.cax-sidebar-md,.cax-sidebar-right.cax-sidebar-lg,.cax-sidebar-right.cax-sidebar-md{width:478px}}}\n"] }]
+                    }, template: "<div>\r\n    <div\r\n        #container\r\n        [ngClass]=\"{\r\n          'cax-sidebar': true,\r\n          'cax-sidebar-active': visible,\r\n          'cax-sidebar-left': position === 'left' && !fullScreen,\r\n          'cax-sidebar-right': position === 'right' && !fullScreen,\r\n          'cax-sidebar-top': position === 'top' && !fullScreen,\r\n          'cax-sidebar-bottom': position === 'bottom' && !fullScreen,\r\n          'cax-sidebar-full': fullScreen\r\n      }\"\r\n        *ngIf=\"visible\"\r\n        [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\r\n        (@panelState.start)=\"onAnimationStart($event)\"\r\n        (@panelState.done)=\"onAnimationEnd($event)\"\r\n        [ngStyle]=\"style\"\r\n        [class]=\"styleClass\"\r\n        role=\"complementary\"\r\n        [attr.data-pc-name]=\"'sidebar'\"\r\n        [attr.data-pc-section]=\"'root'\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n    >\r\n        <ng-container *ngIf=\"headlessTemplate; else notHeadless\">\r\n            <ng-container *ngTemplateOutlet=\"headlessTemplate\"></ng-container>\r\n        </ng-container>\r\n        <ng-template #notHeadless>\r\n            <div class=\"cax-sidebar-header\" [attr.data-pc-section]=\"'header'\" [ngStyle]=\"headerStyle\">\r\n                <ng-container *ngIf=\"headerTemplate; else defaultHeader\">\r\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultHeader>\r\n                    <div>{{ headerText || 'Sidebar' }}</div>\r\n                </ng-template>\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"cax-sidebar-close cax-sidebar-icon-css cax-link\"\r\n                    (click)=\"close($event)\"\r\n                    (keydown.enter)=\"close($event)\"\r\n                    [attr.aria-label]=\"ariaCloseLabel\"\r\n                    *ngIf=\"showCloseIcon\"\r\n                    caxRipple\r\n                    [attr.data-pc-section]=\"'closebutton'\"\r\n                    [attr.data-pc-groucax-section]=\"'iconcontainer'\"\r\n                >\r\n                    <TimesIcon *ngIf=\"!closeIconTemplate\" [styleClass]=\"'cax-sidebar-close-icon'\" [attr.data-pc-section]=\"'closeicon'\" />\r\n                    <span *ngIf=\"closeIconTemplate\" class=\"cax-sidebar-close-icon\" [attr.data-pc-section]=\"'closeicon'\">\r\n                        <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n                    </span>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"cax-sidebar-content\" [attr.data-pc-section]=\"'content'\">\r\n                <ng-content></ng-content>\r\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n            </div>\r\n            <ng-container *ngIf=\"footerTemplate\">\r\n                <div class=\"cax-sidebar-footer\" [attr.data-pc-section]=\"'footer'\">\r\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n                </div>\r\n            </ng-container>\r\n        </ng-template>\r\n    </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-sidebar{position:fixed;transition:transform .3s;display:flex;flex-direction:column}.cax-sidebar-content{position:relative;overflow-y:auto;flex-grow:1}.cax-sidebar-header{display:flex;align-items:center}.cax-sidebar-footer{margin-top:auto}.cax-sidebar-icon-css{display:flex;align-items:center;justify-content:center;margin-left:auto}.cax-sidebar-left{top:0;left:0;width:478px;height:-webkit-fill-available;margin:15px;border-radius:12px}.cax-sidebar-right{top:0;right:0;width:480px;height:-webkit-fill-available;margin:15px;border-radius:12px}.cax-sidebar-top{top:0;left:0;width:-webkit-fill-available;height:10rem;margin:15px;border-radius:12px}.cax-sidebar-bottom{bottom:0;left:0;width:-webkit-fill-available;height:10rem;margin:15px;border-radius:12px}.cax-sidebar-full{width:100%;height:100%;top:0;left:0;-webkit-transition:none;transition:none}.cax-sidebar-left.cax-sidebar-sm,.cax-sidebar-right.cax-sidebar-sm{width:478px}.cax-sidebar-left.cax-sidebar-md,.cax-sidebar-right.cax-sidebar-md{width:40rem}.cax-sidebar-left.cax-sidebar-lg,.cax-sidebar-right.cax-sidebar-lg{width:60rem}.cax-sidebar-top.cax-sidebar-sm,.cax-sidebar-bottom.cax-sidebar-sm{height:10rem}.cax-sidebar-top.cax-sidebar-md,.cax-sidebar-bottom.cax-sidebar-md{height:478px}.cax-sidebar-top.cax-sidebar-lg,.cax-sidebar-bottom.cax-sidebar-lg{height:30rem}@media screen and (max-width: 64em){.cax-sidebar-left.cax-sidebar-lg,.cax-sidebar-left.cax-sidebar-md,.cax-sidebar-right.cax-sidebar-lg,.cax-sidebar-right.cax-sidebar-md{width:478px}}}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -416,6 +421,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], closeIconTemplate: [{
                 type: Input
+            }], headerStyle: [{
+                type: Input
             }] } });
 
 class SidebarModule {