cax-design-system 2.3.0 → 2.4.0

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

@@ -0,0 +1,75 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, NgModule } from '@angular/core';
+import * as i1 from 'cax-design-system/button';
+import { ButtonModule } from 'cax-design-system/button';
+
+class Tableconfiguration {
+    fontConfiguration = 'md';
+    rowConfiguration = 'sm';
+    fontSizeOptions = [12, 14, 16, 18];
+    fontValue = 14;
+    rowHeightChange = new EventEmitter();
+    fontSizeChange = new EventEmitter();
+    updateRowHeight(size) {
+        this.rowConfiguration = size;
+        this.rowHeightChange.emit(this.rowConfiguration);
+    }
+    resetTableConfiguration() {
+        this.fontValue = 14;
+        this.fontConfiguration = 'md';
+        this.rowConfiguration = 'sm';
+        this.fontSizeChange.emit(this.fontConfiguration);
+        this.rowHeightChange.emit(this.rowConfiguration);
+    }
+    onSliderChange(event) {
+        const newValue = Number(event.target.value);
+        this.fontValue = newValue;
+        switch (this.fontValue) {
+            case 12:
+                this.fontConfiguration = 'sm';
+            case 14:
+                this.fontConfiguration = 'md';
+            case 16:
+                this.fontConfiguration = 'lg';
+            case 18:
+                this.fontConfiguration = 'xl';
+            default:
+                this.fontConfiguration = 'md';
+        }
+        this.fontSizeChange.emit(this.fontConfiguration);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Tableconfiguration, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: Tableconfiguration, isStandalone: true, selector: "cax-tableconfiguration", outputs: { rowHeightChange: "rowHeightChange", fontSizeChange: "fontSizeChange" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: "<div class=\"table-configuration\">\r\n    <div class=\"table-font-size\">\r\n        <div class=\"header-details\">\r\n            <span>Font Size</span>\r\n            <cax-button (click)=\"resetTableConfiguration()\" [label]=\"'Reset to default'\" [severity]=\"'danger'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\r\n        </div>\r\n        <div class=\"font-configuration\">\r\n            <div class=\"font-labels\">\r\n                <span *ngFor=\"let option of fontSizeOptions\" [class.active]=\"fontValue === option\" [style.fontSize]=\"option + 'px'\"> {{ option }}px </span>\r\n            </div>\r\n            <div class=\"slider-wrapper\">\r\n                <input type=\"range\" min=\"12\" max=\"18\" step=\"2\" [value]=\"fontValue\" (input)=\"onSliderChange($event)\" class=\"custom-slider\" />\r\n                <div class=\"range-marker\">\r\n                    <div *ngFor=\"let option of fontSizeOptions\" class=\"range\" [class.active]=\"fontValue === option\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"table-row-size\">\r\n        <div class=\"header-details\">\r\n            <span>Row Height</span>\r\n        </div>\r\n        <div class=\"row-configuration\">\r\n            <li [class.active]=\"rowConfiguration === 'sm'\" (click)=\"updateRowHeight('sm')\">Compact</li>\r\n            <li [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\r\n            <li [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\r\n            <li [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".table-configuration{display:flex;flex-direction:column;gap:24px;padding:12px}.table-configuration .table-font-size .header-details{display:flex;align-items:center;justify-content:space-between;font-weight:500}.table-configuration .table-font-size .font-configuration{border:1px solid var(--neutral-100);padding:16px 24px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:8px}.table-configuration .table-font-size .font-configuration .font-labels{display:flex;justify-content:space-between;align-items:center;font-weight:600;width:100%}.table-configuration .table-font-size .font-configuration .font-labels.active{color:var(--primary-color)}.table-configuration .table-font-size .font-configuration .slider-wrapper{position:relative;width:100%}.table-configuration .table-font-size .font-configuration .custom-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--neutral-100);border-radius:3px;outline:none;transition:background .3s}.table-configuration .table-font-size .font-configuration .custom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--white-100);border:2px solid var(--primary-color);border-radius:50%;cursor:pointer}.table-configuration .table-font-size .font-configuration .range-marker{position:absolute;top:5px;left:2px;width:100%;display:flex;z-index:-10;justify-content:space-between}.table-configuration .table-font-size .font-configuration .range{width:4px;height:16px;background:var(--neutral-100);border-radius:4px}.table-configuration .table-font-size .font-configuration .range.active{visibility:hidden}.table-configuration .table-row-size{display:flex;flex-direction:column;gap:8px}.table-configuration .table-row-size .header-details{font-weight:500}.table-configuration .table-row-size .row-configuration{display:flex;justify-content:space-between;gap:16px}.table-configuration .table-row-size .row-configuration li{list-style-type:none;width:95.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--neutral-100);font-size:14px;font-weight:500;height:53px;border-radius:6px;cursor:pointer}.table-configuration .table-row-size .row-configuration li.active{border:1px solid var(--primary-color);color:var(--primary-color);background:var(--primary-25)}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.Button, selector: "cax-button", inputs: ["type", "iconPos", "icon", "badge", "rightIcon", "leftIcon", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: Tableconfiguration, decorators: [{
+            type: Component,
+            args: [{ selector: 'cax-tableconfiguration', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [ButtonModule, CommonModule], standalone: true, host: {
+                        class: 'cax-element'
+                    }, template: "<div class=\"table-configuration\">\r\n    <div class=\"table-font-size\">\r\n        <div class=\"header-details\">\r\n            <span>Font Size</span>\r\n            <cax-button (click)=\"resetTableConfiguration()\" [label]=\"'Reset to default'\" [severity]=\"'danger'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\r\n        </div>\r\n        <div class=\"font-configuration\">\r\n            <div class=\"font-labels\">\r\n                <span *ngFor=\"let option of fontSizeOptions\" [class.active]=\"fontValue === option\" [style.fontSize]=\"option + 'px'\"> {{ option }}px </span>\r\n            </div>\r\n            <div class=\"slider-wrapper\">\r\n                <input type=\"range\" min=\"12\" max=\"18\" step=\"2\" [value]=\"fontValue\" (input)=\"onSliderChange($event)\" class=\"custom-slider\" />\r\n                <div class=\"range-marker\">\r\n                    <div *ngFor=\"let option of fontSizeOptions\" class=\"range\" [class.active]=\"fontValue === option\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"table-row-size\">\r\n        <div class=\"header-details\">\r\n            <span>Row Height</span>\r\n        </div>\r\n        <div class=\"row-configuration\">\r\n            <li [class.active]=\"rowConfiguration === 'sm'\" (click)=\"updateRowHeight('sm')\">Compact</li>\r\n            <li [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\r\n            <li [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\r\n            <li [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [".table-configuration{display:flex;flex-direction:column;gap:24px;padding:12px}.table-configuration .table-font-size .header-details{display:flex;align-items:center;justify-content:space-between;font-weight:500}.table-configuration .table-font-size .font-configuration{border:1px solid var(--neutral-100);padding:16px 24px;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:8px}.table-configuration .table-font-size .font-configuration .font-labels{display:flex;justify-content:space-between;align-items:center;font-weight:600;width:100%}.table-configuration .table-font-size .font-configuration .font-labels.active{color:var(--primary-color)}.table-configuration .table-font-size .font-configuration .slider-wrapper{position:relative;width:100%}.table-configuration .table-font-size .font-configuration .custom-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--neutral-100);border-radius:3px;outline:none;transition:background .3s}.table-configuration .table-font-size .font-configuration .custom-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:var(--white-100);border:2px solid var(--primary-color);border-radius:50%;cursor:pointer}.table-configuration .table-font-size .font-configuration .range-marker{position:absolute;top:5px;left:2px;width:100%;display:flex;z-index:-10;justify-content:space-between}.table-configuration .table-font-size .font-configuration .range{width:4px;height:16px;background:var(--neutral-100);border-radius:4px}.table-configuration .table-font-size .font-configuration .range.active{visibility:hidden}.table-configuration .table-row-size{display:flex;flex-direction:column;gap:8px}.table-configuration .table-row-size .header-details{font-weight:500}.table-configuration .table-row-size .row-configuration{display:flex;justify-content:space-between;gap:16px}.table-configuration .table-row-size .row-configuration li{list-style-type:none;width:95.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--neutral-100);font-size:14px;font-weight:500;height:53px;border-radius:6px;cursor:pointer}.table-configuration .table-row-size .row-configuration li.active{border:1px solid var(--primary-color);color:var(--primary-color);background:var(--primary-25)}\n"] }]
+        }], propDecorators: { rowHeightChange: [{
+                type: Output
+            }], fontSizeChange: [{
+                type: Output
+            }] } });
+
+class TableconfigurationModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TableconfigurationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TableconfigurationModule, imports: [Tableconfiguration], exports: [Tableconfiguration] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TableconfigurationModule, imports: [Tableconfiguration] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TableconfigurationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Tableconfiguration],
+                    exports: [Tableconfiguration]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Tableconfiguration, TableconfigurationModule };
+//# sourceMappingURL=cax-design-system-tableconfiguration.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cax-design-system-tableconfiguration.mjs","sources":["../../src/app/components/tableconfiguration/tableconfiguration.ts","../../src/app/components/tableconfiguration/tableconfiguration.html","../../src/app/components/tableconfiguration/tableconfiguration.module.ts","../../src/app/components/tableconfiguration/cax-design-system-tableconfiguration.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';\nimport { ButtonModule } from 'cax-design-system/button';\n\n@Component({\n    selector: 'cax-tableconfiguration',\n    templateUrl: './tableconfiguration.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./tableconfiguration.scss'],\n    imports: [ButtonModule, CommonModule],\n    standalone: true,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Tableconfiguration {\n    fontConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n    rowConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n    fontSizeOptions = [12, 14, 16, 18];\n    fontValue = 14;\n\n    @Output() rowHeightChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n    @Output() fontSizeChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n\n    updateRowHeight(size: 'sm' | 'md' | 'lg' | 'xl') {\n        this.rowConfiguration = size;\n        this.rowHeightChange.emit(this.rowConfiguration);\n    }\n\n    resetTableConfiguration() {\n        this.fontValue = 14;\n        this.fontConfiguration = 'md';\n        this.rowConfiguration = 'sm';\n        this.fontSizeChange.emit(this.fontConfiguration);\n        this.rowHeightChange.emit(this.rowConfiguration);\n    }\n\n    onSliderChange(event: Event) {\n        const newValue = Number((event.target as HTMLInputElement).value);\n        this.fontValue = newValue;\n        switch (this.fontValue) {\n            case 12:\n                this.fontConfiguration = 'sm';\n            case 14:\n                this.fontConfiguration = 'md';\n            case 16:\n                this.fontConfiguration = 'lg';\n            case 18:\n                this.fontConfiguration = 'xl';\n            default:\n                this.fontConfiguration = 'md';\n        }\n        this.fontSizeChange.emit(this.fontConfiguration);\n    }\n}\n","<div class=\"table-configuration\">\r\n    <div class=\"table-font-size\">\r\n        <div class=\"header-details\">\r\n            <span>Font Size</span>\r\n            <cax-button (click)=\"resetTableConfiguration()\" [label]=\"'Reset to default'\" [severity]=\"'danger'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\r\n        </div>\r\n        <div class=\"font-configuration\">\r\n            <div class=\"font-labels\">\r\n                <span *ngFor=\"let option of fontSizeOptions\" [class.active]=\"fontValue === option\" [style.fontSize]=\"option + 'px'\"> {{ option }}px </span>\r\n            </div>\r\n            <div class=\"slider-wrapper\">\r\n                <input type=\"range\" min=\"12\" max=\"18\" step=\"2\" [value]=\"fontValue\" (input)=\"onSliderChange($event)\" class=\"custom-slider\" />\r\n                <div class=\"range-marker\">\r\n                    <div *ngFor=\"let option of fontSizeOptions\" class=\"range\" [class.active]=\"fontValue === option\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"table-row-size\">\r\n        <div class=\"header-details\">\r\n            <span>Row Height</span>\r\n        </div>\r\n        <div class=\"row-configuration\">\r\n            <li [class.active]=\"rowConfiguration === 'sm'\" (click)=\"updateRowHeight('sm')\">Compact</li>\r\n            <li [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\r\n            <li [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\r\n            <li [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\r\n        </div>\r\n    </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\nimport { Tableconfiguration } from './tableconfiguration';\n\n@NgModule({\n    imports: [Tableconfiguration],\n    exports: [Tableconfiguration]\n})\nexport class TableconfigurationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/image/image.d.ts

@@ -56,7 +56,7 @@ export declare class Image implements AfterContentInit {
      * The source path for the preview image.
      * @group Props
      */
-    size: 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+    size: 'sm' | 'md' | 'lg' | 'xl' | undefined;
     /**
      * The source path for the preview image.
      * @group Props
@@ -180,7 +180,7 @@ export declare class Image implements AfterContentInit {
     closeAriaLabel(): string;
     onKeydownHandler(event: KeyboardEvent): void;
     sizeClass(): {
-        [x: string]: "xsm" | "sm" | "md" | "lg" | "xl";
+        [x: string]: "sm" | "md" | "lg" | "xl";
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<Image, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<Image, "cax-image", never, { "imageClass": { "alias": "imageClass"; "required": false; }; "imageStyle": { "alias": "imageStyle"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "style": { "alias": "style"; "required": false; }; "src": { "alias": "src"; "required": false; }; "srcSet": { "alias": "srcSet"; "required": false; }; "sizes": { "alias": "sizes"; "required": false; }; "size": { "alias": "size"; "required": false; }; "previewImageSrc": { "alias": "previewImageSrc"; "required": false; }; "previewImageSrcSet": { "alias": "previewImageSrcSet"; "required": false; }; "previewImageSizes": { "alias": "previewImageSizes"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; }, { "onShow": "onShow"; "onHide": "onHide"; "onImageError": "onImageError"; }, ["templates"], never, true, never>;

package/logo/logo.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class Logo {
-    size: 'xsm' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+    size: 'sm' | 'md' | 'lg' | 'xl' | undefined;
     width: string | undefined;
     height: string | undefined;
     iconOnly: boolean;

package/navigation/navigation.d.ts

@@ -17,6 +17,11 @@ export declare class Navigation implements OnChanges, AfterViewInit {
     userImage: string | undefined;
     userRole: string | undefined;
     organisationDetails: OrganisationDetails[];
+    headerLogo: {
+        expanded: string;
+        collapsed: string;
+    } | undefined;
+    headerInitials: string | undefined;
     onNavListItemChange: EventEmitter<{
         activeTab: TabIndexType | 'notifications' | 'help-centre';
     }>;
@@ -25,8 +30,10 @@ export declare class Navigation implements OnChanges, AfterViewInit {
     onLogoutClick: EventEmitter<any>;
     onProfileClick: EventEmitter<any>;
     onSettingsClick: EventEmitter<any>;
+    onLogoClick: EventEmitter<any>;
     onPlanChange: EventEmitter<OrganisationDetails>;
     isHovered: boolean;
+    isNavExpanded: boolean;
     notificationActive: boolean;
     helpCentreActive: boolean;
     accountDetailsActive: boolean;
@@ -42,9 +49,12 @@ export declare class Navigation implements OnChanges, AfterViewInit {
     emitLogout(): void;
     emitProfile(): void;
     emitSettings(): void;
+    emitLogoClick(): void;
     onPlanClick(orgDetails: OrganisationDetails, index: number): void;
     onResize(): void;
     adjustUpDivHeight(): number;
+    onMouseLeave(): void;
+    hideAccountDetails(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Navigation, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Navigation, "cax-navigation", never, { "header": { "alias": "header"; "required": false; }; "topNavList": { "alias": "topNavList"; "required": false; }; "bottomNavList": { "alias": "bottomNavList"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "notifications": { "alias": "notifications"; "required": false; }; "helpCentre": { "alias": "helpCentre"; "required": false; }; "copyrightYear": { "alias": "copyrightYear"; "required": false; }; "version": { "alias": "version"; "required": false; }; "logout": { "alias": "logout"; "required": false; }; "profile": { "alias": "profile"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; "userImage": { "alias": "userImage"; "required": false; }; "userRole": { "alias": "userRole"; "required": false; }; "organisationDetails": { "alias": "organisationDetails"; "required": false; }; }, { "onNavListItemChange": "onNavListItemChange"; "onNotificationClick": "onNotificationClick"; "onHelpCentreClick": "onHelpCentreClick"; "onLogoutClick": "onLogoutClick"; "onProfileClick": "onProfileClick"; "onSettingsClick": "onSettingsClick"; "onPlanChange": "onPlanChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Navigation, "cax-navigation", never, { "header": { "alias": "header"; "required": false; }; "topNavList": { "alias": "topNavList"; "required": false; }; "bottomNavList": { "alias": "bottomNavList"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "notifications": { "alias": "notifications"; "required": false; }; "helpCentre": { "alias": "helpCentre"; "required": false; }; "copyrightYear": { "alias": "copyrightYear"; "required": false; }; "version": { "alias": "version"; "required": false; }; "logout": { "alias": "logout"; "required": false; }; "profile": { "alias": "profile"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; "userImage": { "alias": "userImage"; "required": false; }; "userRole": { "alias": "userRole"; "required": false; }; "organisationDetails": { "alias": "organisationDetails"; "required": false; }; "headerLogo": { "alias": "headerLogo"; "required": false; }; "headerInitials": { "alias": "headerInitials"; "required": false; }; }, { "onNavListItemChange": "onNavListItemChange"; "onNotificationClick": "onNotificationClick"; "onHelpCentreClick": "onHelpCentreClick"; "onLogoutClick": "onLogoutClick"; "onProfileClick": "onProfileClick"; "onSettingsClick": "onSettingsClick"; "onLogoClick": "onLogoClick"; "onPlanChange": "onPlanChange"; }, never, never, true, never>;
 }