cax-design-system 2.2.0 → 2.4.0

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

@@ -14,9 +14,7 @@ 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 {
@@ -35,14 +33,18 @@ class Navigation {
     userImage;
     userRole;
     organisationDetails;
+    headerLogo;
+    headerInitials;
     onNavListItemChange = new EventEmitter();
     onNotificationClick = new EventEmitter();
     onHelpCentreClick = new EventEmitter();
     onLogoutClick = new EventEmitter();
     onProfileClick = new EventEmitter();
     onSettingsClick = new EventEmitter();
+    onLogoClick = new EventEmitter();
     onPlanChange = new EventEmitter();
     isHovered = false;
+    isNavExpanded = false;
     notificationActive = false;
     helpCentreActive = false;
     accountDetailsActive = false;
@@ -130,7 +132,10 @@ class Navigation {
         if (!name)
             return '';
         const nameParts = name.trim().split(/\s+/);
-        return (nameParts[0]?.[0] || '').toUpperCase() + (nameParts[nameParts.length - 1]?.[0] || '').toUpperCase();
+        if (nameParts.length === 1) {
+            return nameParts[0][0].toUpperCase();
+        }
+        return (nameParts[0][0] + nameParts[nameParts.length - 1][0]).toUpperCase();
     }
     emitNotification() {
         this.topNavList?.map((list) => (list.active = false));
@@ -157,6 +162,9 @@ class Navigation {
     emitSettings() {
         this.onSettingsClick.emit();
     }
+    emitLogoClick() {
+        this.onLogoClick.emit();
+    }
     onPlanClick(orgDetails, index) {
         this.selectedOrganisastionPlan = index;
         this.onPlanChange.emit(orgDetails);
@@ -170,8 +178,21 @@ class Navigation {
         const containerHeight = window.innerHeight;
         return containerHeight - bottomHeight - headerHeight - 56;
     }
+    onMouseLeave() {
+        this.isHovered = false;
+        if (!this.accountDetailsActive) {
+            this.isNavExpanded = false;
+        }
+    }
+    hideAccountDetails() {
+        this.accountDetailsActive = false;
+        if (this.isHovered)
+            this.isNavExpanded = true;
+        else
+            this.isNavExpanded = false;
+    }
     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" }, outputs: { onNavListItemChange: "onNavListItemChange", onNotificationClick: "onNotificationClick", onHelpCentreClick: "onHelpCentreClick", onLogoutClick: "onLogoutClick", onProfileClick: "onProfileClick", onSettingsClick: "onSettingsClick", 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': isHovered }\" (mouseenter)=\"isHovered = true\" (mouseleave)=\"isHovered = false\">\r\n    <div class=\"cax-nav-header-container\" #headerContainer>\r\n        <div [@rightFade] *ngIf=\"!isHovered\" class=\"cax-nav-header\">\r\n            <cax-logo size=\"xsm\" [iconOnly]=\"true\" />\r\n        </div>\r\n        <div *ngIf=\"isHovered\" class=\"cax-nav-header\" [@leftFade]>\r\n            <cax-logo size=\"xsm\" />\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=\"isHovered\" 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=\"isHovered\" 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=\"isHovered\" 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-check\"></i>\r\n                    <span [@leftFade] *ngIf=\"isHovered\" 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=\"isHovered\" 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=\"isHovered\" 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]=\"isHovered ? 'cax-nav-overlay-expand' : 'cax-nav-overlay'\" (onHide)=\"accountDetailsActive = false\">\r\n                <div *ngIf=\"organisationDetails?.length\" class=\"cax-nav-organisation-list\">\r\n                    <div *ngFor=\"let org of organisationDetails; let i = index\" class=\"cax-nav-organisation-container\" (click)=\"onPlanClick(org, i)\" [ngClass]=\"{ active: selectedOrganisastionPlan == i }\">\r\n                        <cax-avatar *ngIf=\"org.image; else labelTemplate\" [image]=\"org.image\" avatarSize=\"lg\"></cax-avatar>\r\n                        <ng-template #labelTemplate>\r\n                            <cax-avatar *ngIf=\"org.label; else initialTemplate\" [label]=\"org.label\" avatarSize=\"lg\"></cax-avatar>\r\n                        </ng-template>\r\n                        <ng-template #initialTemplate>\r\n                            <cax-avatar [label]=\"getInitials(org.name)\" avatarSize=\"lg\"></cax-avatar>\r\n                        </ng-template>\r\n                        <div class=\"cax-nav-organisation\">\r\n                            <span class=\"cax-nav-organisation-name\">{{ org.name }}</span>\r\n                            <span *ngIf=\"org.plan == 'paid'\" class=\"cax-nav-organisation-plan\">\r\n                                <i class=\"cax cax-wallet\"></i>\r\n                                Paid Plan\r\n                            </span>\r\n                            <span *ngIf=\"org.plan == 'free'\" class=\"cax-nav-organisation-plan\">\r\n                                <i class=\"cax cax-ticket-sale\"></i>\r\n                                Free Plan\r\n                            </span>\r\n                            <span *ngIf=\"org.plan == 'trial'\" class=\"cax-nav-organisation-plan\">\r\n                                <i class=\"cax cax-history2\"></i>\r\n                                Trial Version\r\n                            </span>\r\n                        </div>\r\n                        <cax-radioButton class=\"cax-nav-organisation-radio\" [value]=\"i\" name=\"organisation-plan\" [(ngModel)]=\"selectedOrganisastionPlan\"></cax-radioButton>\r\n                    </div>\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=\"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=\"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-expand{width:264px}.cax-nav.cax-nav-expand .cax-nav-bottom-container{width:248px}.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-organisation-list{border-radius:12px;padding:8px;margin-bottom:8px}.cax-nav-organisation-container{display:flex;align-items:flex-start;cursor:pointer;padding:12px;border-radius:8px}.cax-nav-organisation-container .cax-nav-organisation-radio{margin-left:auto}.cax-nav-organisation-container:not(:last-child){margin-bottom:8px}.cax-nav-organisation{display:grid;margin:0 8px;white-space:nowrap}.cax-nav-organisation .cax-nav-organisation-name{font-weight:600;font-size:16px;line-height:24px}.cax-nav-organisation .cax-nav-organisation-plan{display:flex;font-size:14px;font-weight:500;line-height:21px}.cax-nav-organisation .cax-nav-organisation-plan i{font-size:20px;margin-right:3px}.cax-nav-overlay-expand{left:270px!important;top:auto!important;bottom:6px}.cax-nav-overlay{left:94px!important;top:auto!important;bottom:6px}}\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: [
+    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: [
             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 }))])
@@ -195,7 +216,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': isHovered }\" (mouseenter)=\"isHovered = true\" (mouseleave)=\"isHovered = false\">\r\n    <div class=\"cax-nav-header-container\" #headerContainer>\r\n        <div [@rightFade] *ngIf=\"!isHovered\" class=\"cax-nav-header\">\r\n            <cax-logo size=\"xsm\" [iconOnly]=\"true\" />\r\n        </div>\r\n        <div *ngIf=\"isHovered\" class=\"cax-nav-header\" [@leftFade]>\r\n            <cax-logo size=\"xsm\" />\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=\"isHovered\" 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=\"isHovered\" 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=\"isHovered\" 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-check\"></i>\r\n                    <span [@leftFade] *ngIf=\"isHovered\" 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=\"isHovered\" 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=\"isHovered\" 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]=\"isHovered ? 'cax-nav-overlay-expand' : 'cax-nav-overlay'\" (onHide)=\"accountDetailsActive = false\">\r\n                <div *ngIf=\"organisationDetails?.length\" class=\"cax-nav-organisation-list\">\r\n                    <div *ngFor=\"let org of organisationDetails; let i = index\" class=\"cax-nav-organisation-container\" (click)=\"onPlanClick(org, i)\" [ngClass]=\"{ active: selectedOrganisastionPlan == i }\">\r\n                        <cax-avatar *ngIf=\"org.image; else labelTemplate\" [image]=\"org.image\" avatarSize=\"lg\"></cax-avatar>\r\n                        <ng-template #labelTemplate>\r\n                            <cax-avatar *ngIf=\"org.label; else initialTemplate\" [label]=\"org.label\" avatarSize=\"lg\"></cax-avatar>\r\n                        </ng-template>\r\n                        <ng-template #initialTemplate>\r\n                            <cax-avatar [label]=\"getInitials(org.name)\" avatarSize=\"lg\"></cax-avatar>\r\n                        </ng-template>\r\n                        <div class=\"cax-nav-organisation\">\r\n                            <span class=\"cax-nav-organisation-name\">{{ org.name }}</span>\r\n                            <span *ngIf=\"org.plan == 'paid'\" class=\"cax-nav-organisation-plan\">\r\n                                <i class=\"cax cax-wallet\"></i>\r\n                                Paid Plan\r\n                            </span>\r\n                            <span *ngIf=\"org.plan == 'free'\" class=\"cax-nav-organisation-plan\">\r\n                                <i class=\"cax cax-ticket-sale\"></i>\r\n                                Free Plan\r\n                            </span>\r\n                            <span *ngIf=\"org.plan == 'trial'\" class=\"cax-nav-organisation-plan\">\r\n                                <i class=\"cax cax-history2\"></i>\r\n                                Trial Version\r\n                            </span>\r\n                        </div>\r\n                        <cax-radioButton class=\"cax-nav-organisation-radio\" [value]=\"i\" name=\"organisation-plan\" [(ngModel)]=\"selectedOrganisastionPlan\"></cax-radioButton>\r\n                    </div>\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=\"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=\"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-expand{width:264px}.cax-nav.cax-nav-expand .cax-nav-bottom-container{width:248px}.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-organisation-list{border-radius:12px;padding:8px;margin-bottom:8px}.cax-nav-organisation-container{display:flex;align-items:flex-start;cursor:pointer;padding:12px;border-radius:8px}.cax-nav-organisation-container .cax-nav-organisation-radio{margin-left:auto}.cax-nav-organisation-container:not(:last-child){margin-bottom:8px}.cax-nav-organisation{display:grid;margin:0 8px;white-space:nowrap}.cax-nav-organisation .cax-nav-organisation-name{font-weight:600;font-size:16px;line-height:24px}.cax-nav-organisation .cax-nav-organisation-plan{display:flex;font-size:14px;font-weight:500;line-height:21px}.cax-nav-organisation .cax-nav-organisation-plan i{font-size:20px;margin-right:3px}.cax-nav-overlay-expand{left:270px!important;top:auto!important;bottom:6px}.cax-nav-overlay{left:94px!important;top:auto!important;bottom:6px}}\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\">{{ 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"] }]
         }], propDecorators: { header: [{
                 type: Input
             }], topNavList: [{
@@ -226,6 +247,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], organisationDetails: [{
                 type: Input
+            }], headerLogo: [{
+                type: Input
+            }], headerInitials: [{
+                type: Input
             }], onNavListItemChange: [{
                 type: Output
             }], onNotificationClick: [{
@@ -238,6 +263,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Output
             }], onSettingsClick: [{
                 type: Output
+            }], onLogoClick: [{
+                type: Output
             }], onPlanChange: [{
                 type: Output
             }], bottomContainer: [{

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\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() onPlanChange: EventEmitter<OrganisationDetails> = new EventEmitter();\n\n    isHovered: 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        return (nameParts[0]?.[0] || '').toUpperCase() + (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    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","<div *ngIf=\"accountDetailsActive\" class=\"cax-nav-backdrop\"></div>\r\n<div class=\"cax-nav\" [ngClass]=\"{ 'cax-nav-expand': isHovered }\" (mouseenter)=\"isHovered = true\" (mouseleave)=\"isHovered = false\">\r\n    <div class=\"cax-nav-header-container\" #headerContainer>\r\n        <div [@rightFade] *ngIf=\"!isHovered\" class=\"cax-nav-header\">\r\n            <cax-logo size=\"xsm\" [iconOnly]=\"true\" />\r\n        </div>\r\n        <div *ngIf=\"isHovered\" class=\"cax-nav-header\" [@leftFade]>\r\n            <cax-logo size=\"xsm\" />\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=\"isHovered\" 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=\"isHovered\" 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=\"isHovered\" 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-check\"></i>\r\n                    <span [@leftFade] *ngIf=\"isHovered\" 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=\"isHovered\" 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=\"isHovered\" 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]=\"isHovered ? 'cax-nav-overlay-expand' : 'cax-nav-overlay'\" (onHide)=\"accountDetailsActive = false\">\r\n                <div *ngIf=\"organisationDetails?.length\" class=\"cax-nav-organisation-list\">\r\n                    <div *ngFor=\"let org of organisationDetails; let i = index\" class=\"cax-nav-organisation-container\" (click)=\"onPlanClick(org, i)\" [ngClass]=\"{ active: selectedOrganisastionPlan == i }\">\r\n                        <cax-avatar *ngIf=\"org.image; else labelTemplate\" [image]=\"org.image\" avatarSize=\"lg\"></cax-avatar>\r\n                        <ng-template #labelTemplate>\r\n                            <cax-avatar *ngIf=\"org.label; else initialTemplate\" [label]=\"org.label\" avatarSize=\"lg\"></cax-avatar>\r\n                        </ng-template>\r\n                        <ng-template #initialTemplate>\r\n                            <cax-avatar [label]=\"getInitials(org.name)\" avatarSize=\"lg\"></cax-avatar>\r\n                        </ng-template>\r\n                        <div class=\"cax-nav-organisation\">\r\n                            <span class=\"cax-nav-organisation-name\">{{ org.name }}</span>\r\n                            <span *ngIf=\"org.plan == 'paid'\" class=\"cax-nav-organisation-plan\">\r\n                                <i class=\"cax cax-wallet\"></i>\r\n                                Paid Plan\r\n                            </span>\r\n                            <span *ngIf=\"org.plan == 'free'\" class=\"cax-nav-organisation-plan\">\r\n                                <i class=\"cax cax-ticket-sale\"></i>\r\n                                Free Plan\r\n                            </span>\r\n                            <span *ngIf=\"org.plan == 'trial'\" class=\"cax-nav-organisation-plan\">\r\n                                <i class=\"cax cax-history2\"></i>\r\n                                Trial Version\r\n                            </span>\r\n                        </div>\r\n                        <cax-radioButton class=\"cax-nav-organisation-radio\" [value]=\"i\" name=\"organisation-plan\" [(ngModel)]=\"selectedOrganisastionPlan\"></cax-radioButton>\r\n                    </div>\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=\"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=\"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 { 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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"}

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

@@ -381,7 +381,7 @@ class OverlayPanel {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OverlayPanel, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.caxConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: OverlayPanel, isStandalone: true, selector: "cax-overlayPanel", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dismissable: ["dismissable", "dismissable", booleanAttribute], showCloseIcon: ["showCloseIcon", "showCloseIcon", booleanAttribute], style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], ariaCloseLabel: "ariaCloseLabel", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], focusOnShow: ["focusOnShow", "focusOnShow", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydown($event)" }, classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div\r\n    *ngIf=\"render\"\r\n    [ngClass]=\"'cax-overlaypanel cax-component'\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    (click)=\"onOverlayClick($event)\"\r\n    [@animation]=\"{ value: overlayVisible ? 'open' : 'close', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n    (@animation.start)=\"onAnimationStart($event)\"\r\n    (@animation.done)=\"onAnimationEnd($event)\"\r\n    role=\"dialog\"\r\n    [attr.aria-modal]=\"overlayVisible\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledBy]=\"ariaLabelledBy\"\r\n>\r\n    <div class=\"cax-overlaypanel-content\" (click)=\"onContentClick($event)\" (mousedown)=\"onContentClick($event)\">\r\n        <ng-content></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </div>\r\n    <button *ngIf=\"showCloseIcon\" type=\"button\" class=\"cax-overlaypanel-close cax-link\" (click)=\"onCloseClick($event)\" (keydown.enter)=\"hide()\">\r\n        <ng-container *ngIf=\"!closeIconTemplate\">\r\n            <i class=\"cax cax-close-circle overlaypanelclose\"></i>\r\n        </ng-container>\r\n        <span class=\"cax-overlaypanel-close-icon\" *ngIf=\"closeIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n</div>\r\n", styles: ["@layer cax{.cax-overlaypanel{position:absolute;margin-top:8px;top:0;left:0}.cax-overlaypanel-flipped{margin-top:0;margin-bottom:10px}.cax-overlaypanel-close{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.cax-overlaypanel:after,.cax-overlaypanel:before{bottom:100%;left:calc(var(--overlayArrowLeft, 0) + 1.25rem);content:none;height:0;width:0;position:absolute;pointer-events:none}.cax-overlaypanel:after{border-width:8px;margin-left:-8px}.cax-overlaypanel:before{border-width:10px;margin-left:-10px}.cax-overlaypanel-shifted:after,.cax-overlaypanel-shifted:before{left:auto;right:1.25em;margin-left:auto}.cax-overlaypanel-flipped:after,.cax-overlaypanel-flipped:before{bottom:auto;top:100%}.cax-overlaypanel.cax-overlaypanel-flipped:after{border-bottom-color:transparent}.cax-overlaypanel.cax-overlaypanel-flipped:before{border-bottom-color:transparent}.overlaypanelclose{font-size:20px}}\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: "ngmodule", type: SharedModule }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: OverlayPanel, isStandalone: true, selector: "cax-overlayPanel", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", dismissable: ["dismissable", "dismissable", booleanAttribute], showCloseIcon: ["showCloseIcon", "showCloseIcon", booleanAttribute], style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], ariaCloseLabel: "ariaCloseLabel", baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], focusOnShow: ["focusOnShow", "focusOnShow", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { listeners: { "document:keydown.escape": "onEscapeKeydown($event)" }, classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: "<div\r\n    *ngIf=\"render\"\r\n    [ngClass]=\"'cax-overlaypanel cax-component'\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    (click)=\"onOverlayClick($event)\"\r\n    [@animation]=\"{ value: overlayVisible ? 'open' : 'close', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n    (@animation.start)=\"onAnimationStart($event)\"\r\n    (@animation.done)=\"onAnimationEnd($event)\"\r\n    role=\"dialog\"\r\n    [attr.aria-modal]=\"overlayVisible\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledBy]=\"ariaLabelledBy\"\r\n>\r\n    <div class=\"cax-overlaypanel-content\" (click)=\"onContentClick($event)\" (mousedown)=\"onContentClick($event)\">\r\n        <ng-content></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </div>\r\n    <button *ngIf=\"showCloseIcon\" type=\"button\" class=\"cax-overlaypanel-close cax-link\" (click)=\"onCloseClick($event)\" (keydown.enter)=\"hide()\">\r\n        <ng-container *ngIf=\"!closeIconTemplate\">\r\n            <i class=\"cax cax-close-circle overlaypanelclose\"></i>\r\n        </ng-container>\r\n        <span class=\"cax-overlaypanel-close-icon\" *ngIf=\"closeIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n</div>\r\n", styles: ["@layer cax{.cax-overlaypanel{position:absolute;margin-top:4px;top:0;left:0}.cax-overlaypanel-flipped{margin-top:0;margin-bottom:10px}.cax-overlaypanel-close{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.cax-overlaypanel:after,.cax-overlaypanel:before{bottom:100%;left:calc(var(--overlayArrowLeft, 0) + 1.25rem);content:none;height:0;width:0;position:absolute;pointer-events:none}.cax-overlaypanel:after{border-width:8px;margin-left:-8px}.cax-overlaypanel:before{border-width:10px;margin-left:-10px}.cax-overlaypanel-shifted:after,.cax-overlaypanel-shifted:before{left:auto;right:1.25em;margin-left:auto}.cax-overlaypanel-flipped:after,.cax-overlaypanel-flipped:before{bottom:auto;top:100%}.cax-overlaypanel.cax-overlaypanel-flipped:after{border-bottom-color:transparent}.cax-overlaypanel.cax-overlaypanel-flipped:before{border-bottom-color:transparent}.overlaypanelclose{font-size:20px}}\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: "ngmodule", type: SharedModule }], animations: [
             trigger('animation', [
                 state('void', style({
                     transform: 'scaleY(0.8)',
@@ -419,7 +419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                         ])
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, RippleModule, SharedModule, TimesIcon], standalone: true, host: {
                         class: 'cax-element'
-                    }, template: "<div\r\n    *ngIf=\"render\"\r\n    [ngClass]=\"'cax-overlaypanel cax-component'\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    (click)=\"onOverlayClick($event)\"\r\n    [@animation]=\"{ value: overlayVisible ? 'open' : 'close', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n    (@animation.start)=\"onAnimationStart($event)\"\r\n    (@animation.done)=\"onAnimationEnd($event)\"\r\n    role=\"dialog\"\r\n    [attr.aria-modal]=\"overlayVisible\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledBy]=\"ariaLabelledBy\"\r\n>\r\n    <div class=\"cax-overlaypanel-content\" (click)=\"onContentClick($event)\" (mousedown)=\"onContentClick($event)\">\r\n        <ng-content></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </div>\r\n    <button *ngIf=\"showCloseIcon\" type=\"button\" class=\"cax-overlaypanel-close cax-link\" (click)=\"onCloseClick($event)\" (keydown.enter)=\"hide()\">\r\n        <ng-container *ngIf=\"!closeIconTemplate\">\r\n            <i class=\"cax cax-close-circle overlaypanelclose\"></i>\r\n        </ng-container>\r\n        <span class=\"cax-overlaypanel-close-icon\" *ngIf=\"closeIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n</div>\r\n", styles: ["@layer cax{.cax-overlaypanel{position:absolute;margin-top:8px;top:0;left:0}.cax-overlaypanel-flipped{margin-top:0;margin-bottom:10px}.cax-overlaypanel-close{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.cax-overlaypanel:after,.cax-overlaypanel:before{bottom:100%;left:calc(var(--overlayArrowLeft, 0) + 1.25rem);content:none;height:0;width:0;position:absolute;pointer-events:none}.cax-overlaypanel:after{border-width:8px;margin-left:-8px}.cax-overlaypanel:before{border-width:10px;margin-left:-10px}.cax-overlaypanel-shifted:after,.cax-overlaypanel-shifted:before{left:auto;right:1.25em;margin-left:auto}.cax-overlaypanel-flipped:after,.cax-overlaypanel-flipped:before{bottom:auto;top:100%}.cax-overlaypanel.cax-overlaypanel-flipped:after{border-bottom-color:transparent}.cax-overlaypanel.cax-overlaypanel-flipped:before{border-bottom-color:transparent}.overlaypanelclose{font-size:20px}}\n"] }]
+                    }, template: "<div\r\n    *ngIf=\"render\"\r\n    [ngClass]=\"'cax-overlaypanel cax-component'\"\r\n    [ngStyle]=\"style\"\r\n    [class]=\"styleClass\"\r\n    (click)=\"onOverlayClick($event)\"\r\n    [@animation]=\"{ value: overlayVisible ? 'open' : 'close', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n    (@animation.start)=\"onAnimationStart($event)\"\r\n    (@animation.done)=\"onAnimationEnd($event)\"\r\n    role=\"dialog\"\r\n    [attr.aria-modal]=\"overlayVisible\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledBy]=\"ariaLabelledBy\"\r\n>\r\n    <div class=\"cax-overlaypanel-content\" (click)=\"onContentClick($event)\" (mousedown)=\"onContentClick($event)\">\r\n        <ng-content></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n    </div>\r\n    <button *ngIf=\"showCloseIcon\" type=\"button\" class=\"cax-overlaypanel-close cax-link\" (click)=\"onCloseClick($event)\" (keydown.enter)=\"hide()\">\r\n        <ng-container *ngIf=\"!closeIconTemplate\">\r\n            <i class=\"cax cax-close-circle overlaypanelclose\"></i>\r\n        </ng-container>\r\n        <span class=\"cax-overlaypanel-close-icon\" *ngIf=\"closeIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"closeIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n</div>\r\n", styles: ["@layer cax{.cax-overlaypanel{position:absolute;margin-top:4px;top:0;left:0}.cax-overlaypanel-flipped{margin-top:0;margin-bottom:10px}.cax-overlaypanel-close{display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.cax-overlaypanel:after,.cax-overlaypanel:before{bottom:100%;left:calc(var(--overlayArrowLeft, 0) + 1.25rem);content:none;height:0;width:0;position:absolute;pointer-events:none}.cax-overlaypanel:after{border-width:8px;margin-left:-8px}.cax-overlaypanel:before{border-width:10px;margin-left:-10px}.cax-overlaypanel-shifted:after,.cax-overlaypanel-shifted:before{left:auto;right:1.25em;margin-left:auto}.cax-overlaypanel-flipped:after,.cax-overlaypanel-flipped:before{bottom:auto;top:100%}.cax-overlaypanel.cax-overlaypanel-flipped:after{border-bottom-color:transparent}.cax-overlaypanel.cax-overlaypanel-flipped:before{border-bottom-color:transparent}.overlaypanelclose{font-size:20px}}\n"] }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]

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

@@ -375,7 +375,7 @@ class Paginator {
         return positions.join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Paginator, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.caxConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Paginator, selector: "cax-paginator", inputs: { pageLinkSize: ["pageLinkSize", "pageLinkSize", numberAttribute], style: "style", styleClass: "styleClass", alwaysShow: ["alwaysShow", "alwaysShow", booleanAttribute], dropdownAppendTo: "dropdownAppendTo", templateLeft: "templateLeft", templateRight: "templateRight", appendTo: "appendTo", dropdownScrollHeight: "dropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], totalRecords: ["totalRecords", "totalRecords", numberAttribute], rows: ["rows", "rows", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: ["showJumpToPageInput", "showJumpToPageInput", booleanAttribute], jumpToPageItemTemplate: "jumpToPageItemTemplate", showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], locale: "locale", dropdownItemTemplate: "dropdownItemTemplate", first: "first", rightAligned: ["rightAligned", "rightAligned", booleanAttribute] }, outputs: { onPageChange: "onPageChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"['cax-paginator cax-component', getPositionClass()]\" *ngIf=\"alwaysShow ? true : pageLinks && pageLinks.length > 1\" [attr.data-pc-section]=\"'paginator'\" [attr.data-pc-section]=\"'root'\">\r\n    <div class=\"cax-paginator-left-content\" *ngIf=\"templateLeft\" [attr.data-pc-section]=\"'start'\">\r\n        <ng-container *ngTemplateOutlet=\"templateLeft; context: { $implicit: paginatorState }\"></ng-container>\r\n    </div>\r\n    <span class=\"cax-paginator-current\" *ngIf=\"showCurrentPageReport\">{{ currentPageReport }}</span>\r\n    <button\r\n        *ngIf=\"showFirstLastIcon\"\r\n        type=\"button\"\r\n        [disabled]=\"isFirstPage() || empty()\"\r\n        (click)=\"changePageToFirst($event)\"\r\n        caxRipple\r\n        class=\"cax-paginator-first cax-paginator-element cax-link\"\r\n        [ngClass]=\"{ 'cax-disabled': isFirstPage() || empty() }\"\r\n        [attr.aria-label]=\"getAriaLabel('firstPageLabel')\"\r\n    >\r\n        <AngleDoubleLeftIcon *ngIf=\"!firstPageLinkIconTemplate\" [styleClass]=\"'cax-paginator-icon'\" />\r\n        <span class=\"cax-paginator-icon\" *ngIf=\"firstPageLinkIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"firstPageLinkIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <button\r\n        type=\"button\"\r\n        [disabled]=\"isFirstPage() || empty()\"\r\n        (click)=\"changePageToPrev($event)\"\r\n        caxRipple\r\n        class=\"cax-paginator-prev cax-paginator-element cax-link\"\r\n        [ngClass]=\"{ 'cax-disabled': isFirstPage() || empty() }\"\r\n        [attr.aria-label]=\"getAriaLabel('prevPageLabel')\"\r\n    >\r\n        <AngleLeftIcon *ngIf=\"!previousPageLinkIconTemplate\" [styleClass]=\"'cax-paginator-icon'\" />\r\n        <span class=\"cax-paginator-icon\" *ngIf=\"previousPageLinkIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"previousPageLinkIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <span class=\"cax-paginator-pages\" *ngIf=\"showPageLinks\">\r\n        <button\r\n            type=\"button\"\r\n            *ngFor=\"let pageLink of pageLinks\"\r\n            class=\"cax-paginator-page cax-paginator-element cax-link\"\r\n            [ngClass]=\"{ 'cax-highlight': pageLink - 1 == getPage() }\"\r\n            [attr.aria-label]=\"getPageAriaLabel(pageLink)\"\r\n            [attr.aria-current]=\"pageLink - 1 == getPage() ? 'page' : undefined\"\r\n            (click)=\"onPageLinkClick($event, pageLink - 1)\"\r\n            caxRipple\r\n        >\r\n            {{ getLocalization(pageLink) }}\r\n        </button>\r\n    </span>\r\n    <cax-dropdown\r\n        [options]=\"pageItems\"\r\n        [ngModel]=\"getPage()\"\r\n        *ngIf=\"showJumpToPageDropdown\"\r\n        [disabled]=\"empty()\"\r\n        [attr.aria-label]=\"getAriaLabel('jumpToPageDropdownLabel')\"\r\n        styleClass=\"cax-paginator-page-options\"\r\n        (onChange)=\"onPageDropdownChange($event)\"\r\n        [appendTo]=\"dropdownAppendTo\"\r\n        [scrollHeight]=\"dropdownScrollHeight\"\r\n    >\r\n        <ng-template caxTemplate=\"selectedItem\">{{ currentPageReport }}</ng-template>\r\n        <ng-container *ngIf=\"jumpToPageItemTemplate\">\r\n            <ng-template let-item caxTemplate=\"item\">\r\n                <ng-container *ngTemplateOutlet=\"jumpToPageItemTemplate; context: { $implicit: item }\"> </ng-container>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template caxTemplate=\"dropdownicon\" *ngIf=\"dropdownIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-container>\r\n        </ng-template>\r\n    </cax-dropdown>\r\n    <button\r\n        type=\"button\"\r\n        [disabled]=\"isLastPage() || empty()\"\r\n        (click)=\"changePageToNext($event)\"\r\n        caxRipple\r\n        class=\"cax-paginator-next cax-paginator-element cax-link\"\r\n        [ngClass]=\"{ 'cax-disabled': isLastPage() || empty() }\"\r\n        [attr.aria-label]=\"getAriaLabel('nextPageLabel')\"\r\n    >\r\n        <AngleRightIcon *ngIf=\"!nextPageLinkIconTemplate\" [styleClass]=\"'cax-paginator-icon'\" />\r\n        <span class=\"cax-paginator-icon\" *ngIf=\"nextPageLinkIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"nextPageLinkIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <button\r\n        *ngIf=\"showFirstLastIcon\"\r\n        type=\"button\"\r\n        [disabled]=\"isLastPage() || empty()\"\r\n        (click)=\"changePageToLast($event)\"\r\n        caxRipple\r\n        class=\"cax-paginator-last cax-paginator-element cax-link\"\r\n        [ngClass]=\"{ 'cax-disabled': isLastPage() || empty() }\"\r\n        [attr.aria-label]=\"getAriaLabel('lastPageLabel')\"\r\n    >\r\n        <AngleDoubleRightIcon *ngIf=\"!lastPageLinkIconTemplate\" [styleClass]=\"'cax-paginator-icon'\" />\r\n        <span class=\"cax-paginator-icon\" *ngIf=\"lastPageLinkIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"lastPageLinkIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <span class=\"cax-paginator-page-label\" *ngIf=\"showJumpToPageInput\">Go to page</span>\r\n    <cax-inputNumber *ngIf=\"showJumpToPageInput\" [ngModel]=\"currentPage()\" class=\"cax-paginator-page-input\" [disabled]=\"empty()\" (ngModelChange)=\"changePage($event - 1)\"></cax-inputNumber>\r\n    <cax-dropdown\r\n        [options]=\"rowsPerPageItems\"\r\n        [(ngModel)]=\"rows\"\r\n        *ngIf=\"rowsPerPageOptions\"\r\n        styleClass=\"cax-paginator-rpp-options\"\r\n        [disabled]=\"empty()\"\r\n        (onChange)=\"onRppChange($event)\"\r\n        [appendTo]=\"dropdownAppendTo\"\r\n        [scrollHeight]=\"dropdownScrollHeight\"\r\n        [ariaLabel]=\"getAriaLabel('rowsPerPageLabel')\"\r\n    >\r\n        <ng-container *ngIf=\"dropdownItemTemplate\"> \r\n            <ng-template let-item caxTemplate=\"item\">\r\n                <ng-container *ngTemplateOutlet=\"dropdownItemTemplate; context: { $implicit: item }\"> </ng-container>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template caxTemplate=\"dropdownicon\" *ngIf=\"dropdownIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-container>\r\n        </ng-template>\r\n    </cax-dropdown>\r\n    <div class=\"cax-paginator-right-content\" *ngIf=\"templateRight\" [attr.data-pc-section]=\"'end'\">\r\n        <ng-container *ngTemplateOutlet=\"templateRight; context: { $implicit: paginatorState }\"></ng-container>\r\n    </div>\r\n</div>", styles: ["@layer cax{.cax-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.cax-paginator.right-aligned{justify-content:flex-end}.cax-paginator-left-content{margin-right:auto}.cax-paginator-right-content{margin-left:auto}.cax-paginator-page,.cax-paginator-next,.cax-paginator-last,.cax-paginator-first,.cax-paginator-prev,.cax-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}.cax-paginator-element:focus{z-index:1;position:relative}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Dropdown, selector: "cax-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "labelText", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i4.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i7.AngleDoubleLeftIcon, selector: "AngleDoubleLeftIcon" }, { kind: "component", type: i8.AngleDoubleRightIcon, selector: "AngleDoubleRightIcon" }, { kind: "component", type: i9.AngleLeftIcon, selector: "AngleLeftIcon" }, { kind: "component", type: i10.AngleRightIcon, selector: "AngleRightIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: Paginator, selector: "cax-paginator", inputs: { pageLinkSize: ["pageLinkSize", "pageLinkSize", numberAttribute], style: "style", styleClass: "styleClass", alwaysShow: ["alwaysShow", "alwaysShow", booleanAttribute], dropdownAppendTo: "dropdownAppendTo", templateLeft: "templateLeft", templateRight: "templateRight", appendTo: "appendTo", dropdownScrollHeight: "dropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], totalRecords: ["totalRecords", "totalRecords", numberAttribute], rows: ["rows", "rows", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: ["showJumpToPageInput", "showJumpToPageInput", booleanAttribute], jumpToPageItemTemplate: "jumpToPageItemTemplate", showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], locale: "locale", dropdownItemTemplate: "dropdownItemTemplate", first: "first", rightAligned: ["rightAligned", "rightAligned", booleanAttribute] }, outputs: { onPageChange: "onPageChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"styleClass\" [ngStyle]=\"style\" [ngClass]=\"['cax-paginator cax-component', getPositionClass()]\" *ngIf=\"alwaysShow ? true : pageLinks && pageLinks.length > 1\" [attr.data-pc-section]=\"'paginator'\" [attr.data-pc-section]=\"'root'\">\r\n    <div class=\"cax-paginator-left-content\" *ngIf=\"templateLeft\" [attr.data-pc-section]=\"'start'\">\r\n        <ng-container *ngTemplateOutlet=\"templateLeft; context: { $implicit: paginatorState }\"></ng-container>\r\n    </div>\r\n    <span class=\"cax-paginator-current\" *ngIf=\"showCurrentPageReport\">{{ currentPageReport }}</span>\r\n    <button\r\n        *ngIf=\"showFirstLastIcon\"\r\n        type=\"button\"\r\n        [disabled]=\"isFirstPage() || empty()\"\r\n        (click)=\"changePageToFirst($event)\"\r\n        caxRipple\r\n        class=\"cax-paginator-first cax-paginator-element cax-link\"\r\n        [ngClass]=\"{ 'cax-disabled': isFirstPage() || empty() }\"\r\n        [attr.aria-label]=\"getAriaLabel('firstPageLabel')\"\r\n    >\r\n        <AngleDoubleLeftIcon *ngIf=\"!firstPageLinkIconTemplate\" [styleClass]=\"'cax-paginator-icon'\" />\r\n        <span class=\"cax-paginator-icon\" *ngIf=\"firstPageLinkIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"firstPageLinkIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <button\r\n        type=\"button\"\r\n        [disabled]=\"isFirstPage() || empty()\"\r\n        (click)=\"changePageToPrev($event)\"\r\n        caxRipple\r\n        class=\"cax-paginator-prev cax-paginator-element cax-link\"\r\n        [ngClass]=\"{ 'cax-disabled': isFirstPage() || empty() }\"\r\n        [attr.aria-label]=\"getAriaLabel('prevPageLabel')\"\r\n    >\r\n        <AngleLeftIcon *ngIf=\"!previousPageLinkIconTemplate\" [styleClass]=\"'cax-paginator-icon'\" />\r\n        <span class=\"cax-paginator-icon\" *ngIf=\"previousPageLinkIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"previousPageLinkIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <span class=\"cax-paginator-pages\" *ngIf=\"showPageLinks\">\r\n        <button\r\n            type=\"button\"\r\n            *ngFor=\"let pageLink of pageLinks\"\r\n            class=\"cax-paginator-page cax-paginator-element cax-link\"\r\n            [ngClass]=\"{ 'cax-highlight': pageLink - 1 == getPage() }\"\r\n            [attr.aria-label]=\"getPageAriaLabel(pageLink)\"\r\n            [attr.aria-current]=\"pageLink - 1 == getPage() ? 'page' : undefined\"\r\n            (click)=\"onPageLinkClick($event, pageLink - 1)\"\r\n            caxRipple\r\n        >\r\n            {{ getLocalization(pageLink) }}\r\n        </button>\r\n    </span>\r\n    <cax-dropdown\r\n        [options]=\"pageItems\"\r\n        [ngModel]=\"getPage()\"\r\n        *ngIf=\"showJumpToPageDropdown\"\r\n        [disabled]=\"empty()\"\r\n        [attr.aria-label]=\"getAriaLabel('jumpToPageDropdownLabel')\"\r\n        styleClass=\"cax-paginator-page-options\"\r\n        (onChange)=\"onPageDropdownChange($event)\"\r\n        [appendTo]=\"dropdownAppendTo\"\r\n        [scrollHeight]=\"dropdownScrollHeight\"\r\n    >\r\n        <ng-template caxTemplate=\"selectedItem\">{{ currentPageReport }}</ng-template>\r\n        <ng-container *ngIf=\"jumpToPageItemTemplate\">\r\n            <ng-template let-item caxTemplate=\"item\">\r\n                <ng-container *ngTemplateOutlet=\"jumpToPageItemTemplate; context: { $implicit: item }\"> </ng-container>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template caxTemplate=\"dropdownicon\" *ngIf=\"dropdownIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-container>\r\n        </ng-template>\r\n    </cax-dropdown>\r\n    <button\r\n        type=\"button\"\r\n        [disabled]=\"isLastPage() || empty()\"\r\n        (click)=\"changePageToNext($event)\"\r\n        caxRipple\r\n        class=\"cax-paginator-next cax-paginator-element cax-link\"\r\n        [ngClass]=\"{ 'cax-disabled': isLastPage() || empty() }\"\r\n        [attr.aria-label]=\"getAriaLabel('nextPageLabel')\"\r\n    >\r\n        <AngleRightIcon *ngIf=\"!nextPageLinkIconTemplate\" [styleClass]=\"'cax-paginator-icon'\" />\r\n        <span class=\"cax-paginator-icon\" *ngIf=\"nextPageLinkIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"nextPageLinkIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <button\r\n        *ngIf=\"showFirstLastIcon\"\r\n        type=\"button\"\r\n        [disabled]=\"isLastPage() || empty()\"\r\n        (click)=\"changePageToLast($event)\"\r\n        caxRipple\r\n        class=\"cax-paginator-last cax-paginator-element cax-link\"\r\n        [ngClass]=\"{ 'cax-disabled': isLastPage() || empty() }\"\r\n        [attr.aria-label]=\"getAriaLabel('lastPageLabel')\"\r\n    >\r\n        <AngleDoubleRightIcon *ngIf=\"!lastPageLinkIconTemplate\" [styleClass]=\"'cax-paginator-icon'\" />\r\n        <span class=\"cax-paginator-icon\" *ngIf=\"lastPageLinkIconTemplate\">\r\n            <ng-template *ngTemplateOutlet=\"lastPageLinkIconTemplate\"></ng-template>\r\n        </span>\r\n    </button>\r\n    <span class=\"cax-paginator-page-label\" *ngIf=\"showJumpToPageInput\">Go to page</span>\r\n    <cax-inputNumber *ngIf=\"showJumpToPageInput\" [ngModel]=\"currentPage()\" class=\"cax-paginator-page-input\" [disabled]=\"empty()\" (ngModelChange)=\"changePage($event - 1)\"></cax-inputNumber>\r\n    <cax-dropdown\r\n        [options]=\"rowsPerPageItems\"\r\n        [(ngModel)]=\"rows\"\r\n        *ngIf=\"rowsPerPageOptions\"\r\n        styleClass=\"cax-paginator-rpp-options\"\r\n        [disabled]=\"empty()\"\r\n        (onChange)=\"onRppChange($event)\"\r\n        [appendTo]=\"dropdownAppendTo\"\r\n        [scrollHeight]=\"dropdownScrollHeight\"\r\n        [ariaLabel]=\"getAriaLabel('rowsPerPageLabel')\"\r\n    >\r\n        <ng-container *ngIf=\"dropdownItemTemplate\"> \r\n            <ng-template let-item caxTemplate=\"item\">\r\n                <ng-container *ngTemplateOutlet=\"dropdownItemTemplate; context: { $implicit: item }\"> </ng-container>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-template caxTemplate=\"dropdownicon\" *ngIf=\"dropdownIconTemplate\">\r\n            <ng-container *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-container>\r\n        </ng-template>\r\n    </cax-dropdown>\r\n    <div class=\"cax-paginator-right-content\" *ngIf=\"templateRight\" [attr.data-pc-section]=\"'end'\">\r\n        <ng-container *ngTemplateOutlet=\"templateRight; context: { $implicit: paginatorState }\"></ng-container>\r\n    </div>\r\n</div>", styles: ["@layer cax{.cax-paginator{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.cax-paginator.right-aligned{justify-content:flex-end}.cax-paginator-left-content{margin-right:auto}.cax-paginator-right-content{margin-left:auto}.cax-paginator-page,.cax-paginator-next,.cax-paginator-last,.cax-paginator-first,.cax-paginator-prev,.cax-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}.cax-paginator-element:focus{z-index:1;position:relative}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.Dropdown, selector: "cax-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "labelText", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1.CaxTemplate, selector: "[caxTemplate]", inputs: ["type", "caxTemplate"] }, { kind: "component", type: i4.InputNumber, selector: "cax-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefixIcon", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i7.AngleDoubleLeftIcon, selector: "AngleDoubleLeftIcon" }, { kind: "component", type: i8.AngleDoubleRightIcon, selector: "AngleDoubleRightIcon" }, { kind: "component", type: i9.AngleLeftIcon, selector: "AngleLeftIcon" }, { kind: "component", type: i10.AngleRightIcon, selector: "AngleRightIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Paginator, decorators: [{
             type: Component,