sgh-navbar 0.0.57 → 0.1.1

package/fesm2022/sgh-navbar.mjs

@@ -253,7 +253,7 @@ class SidenavComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidenavComponent, deps: [{ token: i1.Router }, { token: SghNavbarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SidenavComponent, isStandalone: false, selector: "sgh-sidenav", inputs: { expanded: "expanded", sidenavData: "sidenavData" }, outputs: { onToggleSideNav: "onToggleSideNav" }, ngImport: i0, template: "<div class=\"close sidenav-overlay\" *ngIf=\"expanded\"></div>\r\n<aside class=\"sgh-sidebar\" *ngIf=\"expanded\" [@slideInOut]>\r\n  <div class=\"menu-wrapper\">\r\n    <div class=\"sidebar_div \" *ngFor=\"let data of sidenavData.navData\">\r\n      <a (click)=\"onItemSelected(data)\" class=\"{{data.customLinkCSS}}\"\r\n         [routerLink]=\"[data.routeLink]\" routerLinkActive=\"item-active\" *ngIf=\"data.visible\">\r\n        <div class=\"text-wrap\">\r\n          <div class=\"icon-wrapper\">\r\n            <i class=\"fa-size fa fa-{{data.icon}}\"></i>\r\n          </div>\r\n          <div>\r\n            {{data.label}}\r\n          </div>\r\n        </div>\r\n        <i class=\"fa-size fa fa-angle-down\" *ngIf=\"!(data.items == undefined)\"\r\n           [@indicatorRotate]=\"data.expanded ? 'expanded': 'collapsed'\"></i>\r\n      </a>\r\n      <div class=\"sub-link-wrapper\" *ngIf=\"data.expanded\" [@inOutAnimation]>\r\n        <sgh-menu-list-item [items]=\"data.items || []\">\r\n        </sgh-menu-list-item>\r\n      </div>\r\n    </div>\r\n    <div class=\"auth-info-wrp\" *ngIf=\"hasClients\">\r\n      <div *ngIf=\"client && subclient\" class=\"client-info-wrp\">\r\n        <div>{{client.text}}</div>\r\n        <i class=\"fa fa-angle-right\"></i>\r\n        <div>{{subclient.text}}</div>\r\n      </div>\r\n      <div *ngIf=\"sidenavData.activeRole\" class=\"role-info-wrp\">\r\n        <span class=\"role-info-text\">Logged in as </span>\r\n        <span class=\"role-info-text role\">{{sidenavData.activeRole}}</span></div>\r\n    </div>\r\n  </div>\r\n</aside>\r\n", styles: [".sidebar_div a>div>i{padding-right:10px}.menu-wrapper{height:100%;display:flex;flex-direction:column;position:relative}.menu-wrapper .auth-info-wrp{margin-top:auto;padding:1.5rem 1rem 1rem;border-top:1px solid var(--sgh-border-color, #e2e8f0);color:var(--sgh-text-secondary, #64748b);background:var(--sgh-surface-color, rgba(248, 250, 252, .5));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.menu-wrapper .auth-info-wrp .client-info-wrp{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;padding:.5rem;background:var(--sgh-primary-color, #3b82f6);color:#fff;border-radius:8px;margin-bottom:.75rem}.menu-wrapper .auth-info-wrp .client-info-wrp i{font-size:.75rem;opacity:.8}.menu-wrapper .auth-info-wrp .role-info-wrp{font-size:.75rem;padding:.25rem .5rem}.menu-wrapper .auth-info-wrp .role-info-wrp .role-info-text{font-weight:400}.menu-wrapper .auth-info-wrp .role-info-wrp .role-info-text.role{font-weight:600;color:var(--sgh-primary-color, #3b82f6)}.fa-size{font-size:1.6em;line-height:.75em;vertical-align:-15%}.sgh-sidebar{height:100%;background:var(--sgh-sidebar-bg, rgba(255, 255, 255, .95));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid var(--sgh-border-color, #e2e8f0);overflow-y:auto;padding:65px 0 1.5rem;font-size:.875rem;width:280px;display:flex;flex-direction:column;z-index:999;transition:all .3s cubic-bezier(.4,0,.2,1);position:fixed;top:64px;left:0;bottom:0}.sgh-sidebar::-webkit-scrollbar{width:6px}.sgh-sidebar::-webkit-scrollbar-track{background:transparent}.sgh-sidebar::-webkit-scrollbar-thumb{background:var(--sgh-border-color, #e2e8f0);border-radius:3px}.sgh-sidebar::-webkit-scrollbar-thumb:hover{background:var(--sgh-text-muted, #94a3b8)}.sidebar_div{margin:0;padding:0 1rem;overflow:hidden}.sidebar_div a{color:var(--sgh-text-secondary, #64748b);padding:.75rem 1rem;text-decoration:none;margin:.25rem 0;display:flex;align-items:center;justify-content:space-between;border-radius:12px;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative}.sidebar_div a:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sgh-primary-color, #3b82f6);border-radius:0 2px 2px 0;transform:scaleY(0);transition:transform .2s ease}.sidebar_div a:hover:not(.active):not(.item-active){background:var(--sgh-hover-bg, rgba(59, 130, 246, .05));color:var(--sgh-text-primary, #1e293b);transform:translate(4px)}.sidebar_div a.active,.sidebar_div a.item-active{background:var(--sgh-primary-color, #3b82f6);color:#fff;transform:translate(4px);box-shadow:var(--sgh-shadow, 0 4px 12px rgba(59, 130, 246, .25))}.sidebar_div a.active:before,.sidebar_div a.item-active:before{transform:scaleY(1);background:#aaa;padding:3px}.sidebar_div a.active .text-wrap,.sidebar_div a.active .text-wrapper,.sidebar_div a.item-active .text-wrap,.sidebar_div a.item-active .text-wrapper,.sidebar_div a.active i,.sidebar_div a.item-active i{color:#fff}.text-wrap{display:flex;align-items:center;width:100%;gap:.75rem}.text-wrap .icon-wrapper{display:flex;align-items:center;justify-content:center;width:20px}.text-wrap .icon-wrapper i{font-size:1.125rem;transition:color .2s ease}div.content{margin-left:200px;padding:1px 16px;height:1000px}@media screen and (max-width: 700px){.sidebar_div{height:auto;position:relative}div.content{margin-left:0}}@media screen and (max-width: 400px){.sidebar_div a{text-align:center;float:none}}.nav-list li a{text-decoration:none;display:block;padding:10px;cursor:pointer;border-bottom:1px solid #515151;color:#9d9d9d}.nav-list>li>a{color:#c4c4c4;font-size:14px;padding-left:15px;border-bottom:1px solid #585858}.nav-list>li>a:hover{background-color:#444}.sidenav-overlay{position:fixed;width:100%;height:100%;top:0;z-index:998;cursor:pointer;transition:opacity .3s ease}@media screen and (max-width: 1024px){.sgh-sidebar{transform:translate(-100%);box-shadow:var(--sgh-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15))}.sgh-sidebar.expanded{transform:translate(0)}}@media screen and (max-width: 768px){.sgh-sidebar{width:280px}.sgh-sidebar .sidebar_div{padding:0 .75rem}.sgh-sidebar .auth-info-wrp{padding:1rem .75rem}}@media screen and (max-width: 480px){.sgh-sidebar{width:100%;max-width:320px}}:host-context(.sgh-dark-theme) .sgh-sidebar{--sgh-sidebar-bg: rgba(30, 41, 59, .95);--sgh-border-color: #334155}:host-context(.sgh-dark-theme) .auth-info-wrp{--sgh-surface-color: rgba(15, 23, 42, .5)}\n"], dependencies: [{ 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: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MenuListItemComponent, selector: "sgh-menu-list-item", inputs: ["items"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SidenavComponent, isStandalone: false, selector: "sgh-sidenav", inputs: { expanded: "expanded", sidenavData: "sidenavData" }, outputs: { onToggleSideNav: "onToggleSideNav" }, ngImport: i0, template: "<div class=\"close sidenav-overlay\" *ngIf=\"expanded\"></div>\r\n<aside class=\"sgh-sidebar\" *ngIf=\"expanded\" [@slideInOut]>\r\n  <div class=\"menu-wrapper\">\r\n    <div class=\"sidebar_div \" *ngFor=\"let data of sidenavData.navData\">\r\n      <a (click)=\"onItemSelected(data)\" class=\"{{data.customLinkCSS}}\"\r\n         [routerLink]=\"[data.routeLink]\" routerLinkActive=\"item-active\" *ngIf=\"data.visible\">\r\n        <div class=\"text-wrap\">\r\n          <div class=\"icon-wrapper\">\r\n            <i class=\"fa-size fa fa-{{data.icon}}\"></i>\r\n          </div>\r\n          <div>\r\n            {{data.label}}\r\n          </div>\r\n        </div>\r\n        <i class=\"fa-size fa fa-angle-down\" *ngIf=\"!(data.items == undefined)\"\r\n           [@indicatorRotate]=\"data.expanded ? 'expanded': 'collapsed'\"></i>\r\n      </a>\r\n      <div class=\"sub-link-wrapper\" *ngIf=\"data.expanded\" [@inOutAnimation]>\r\n        <sgh-menu-list-item [items]=\"data.items || []\">\r\n        </sgh-menu-list-item>\r\n      </div>\r\n    </div>\r\n    <div class=\"auth-info-wrp\" *ngIf=\"hasClients\">\r\n      <div *ngIf=\"client && subclient\" class=\"client-info-wrp\">\r\n        <div>{{client.text}}</div>\r\n        <i class=\"fa fa-angle-right\"></i>\r\n        <div>{{subclient.text}}</div>\r\n      </div>\r\n      <div *ngIf=\"sidenavData.activeRole\" class=\"role-info-wrp\">\r\n        <span class=\"role-info-text\">Logged in as </span>\r\n        <span class=\"role-info-text role\">{{sidenavData.activeRole}}</span></div>\r\n    </div>\r\n  </div>\r\n</aside>\r\n", styles: [".sidebar_div a>div>i{padding-right:10px}.menu-wrapper{height:100%;display:flex;flex-direction:column;position:relative}.menu-wrapper .auth-info-wrp{margin-top:auto;padding:1.5rem 1rem 1rem;border-top:1px solid var(--sgh-border-color, #e2e8f0);color:var(--sgh-text-secondary, #64748b);background:var(--sgh-surface-color, rgba(248, 250, 252, .5));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.menu-wrapper .auth-info-wrp .client-info-wrp{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;padding:.5rem;background:var(--sgh-primary-color, #3b82f6);color:#fff;border-radius:8px;margin-bottom:.75rem}.menu-wrapper .auth-info-wrp .client-info-wrp i{font-size:.75rem;opacity:.8}.menu-wrapper .auth-info-wrp .role-info-wrp{font-size:.75rem;padding:.25rem .5rem}.menu-wrapper .auth-info-wrp .role-info-wrp .role-info-text{font-weight:400}.menu-wrapper .auth-info-wrp .role-info-wrp .role-info-text.role{font-weight:600;color:var(--sgh-primary-color, #3b82f6)}.fa-size{font-size:1.6em;line-height:.75em;vertical-align:-15%}.sgh-sidebar{height:100%;background:var(--sgh-sidebar-bg, rgba(255, 255, 255, .95));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid var(--sgh-border-color, #e2e8f0);overflow-y:auto;padding:65px 0 1.5rem;font-size:.875rem;width:280px;display:flex;flex-direction:column;z-index:999;transition:all .3s cubic-bezier(.4,0,.2,1);position:fixed;top:64px;left:0;bottom:0}.sgh-sidebar::-webkit-scrollbar{width:6px}.sgh-sidebar::-webkit-scrollbar-track{background:transparent}.sgh-sidebar::-webkit-scrollbar-thumb{background:var(--sgh-border-color, #e2e8f0);border-radius:3px}.sgh-sidebar::-webkit-scrollbar-thumb:hover{background:var(--sgh-text-muted, #94a3b8)}.sidebar_div{margin:0;padding:0 1rem;overflow:hidden}.sidebar_div a{color:var(--sgh-text-secondary, #64748b);padding:.75rem 1rem;text-decoration:none;margin:.25rem 0;display:flex;align-items:center;justify-content:space-between;border-radius:12px;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative}.sidebar_div a:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sgh-primary-color, #3b82f6);border-radius:0 2px 2px 0;transform:scaleY(0);transition:transform .2s ease}.sidebar_div a:hover:not(.active):not(.item-active){background:var(--sgh-hover-bg, rgba(59, 130, 246, .05));color:var(--sgh-text-primary, #1e293b);transform:translate(4px)}.sidebar_div a.active,.sidebar_div a.item-active{background:var(--sgh-primary-color, #3b82f6);color:#fff;transform:translate(4px);box-shadow:var(--sgh-shadow, 0 4px 12px rgba(59, 130, 246, .25))}.sidebar_div a.active:before,.sidebar_div a.item-active:before{transform:scaleY(1);background:#aaa;padding:3px}.sidebar_div a.active .text-wrap,.sidebar_div a.active .text-wrapper,.sidebar_div a.item-active .text-wrap,.sidebar_div a.item-active .text-wrapper,.sidebar_div a.active i,.sidebar_div a.item-active i{color:#fff}.text-wrap{display:flex;align-items:center;width:100%;gap:.75rem}.text-wrap .icon-wrapper{display:flex;align-items:center;justify-content:center;width:20px}.text-wrap .icon-wrapper i{font-size:1.125rem;transition:color .2s ease}div.content{margin-left:200px;padding:1px 16px;height:1000px}@media screen and (max-width: 700px){.sidebar_div{height:auto;position:relative}div.content{margin-left:0}}@media screen and (max-width: 400px){.sidebar_div a{text-align:center;float:none}}.nav-list li a{text-decoration:none;display:block;padding:10px;cursor:pointer;border-bottom:1px solid #515151;color:#9d9d9d}.nav-list>li>a{color:#c4c4c4;font-size:14px;padding-left:15px;border-bottom:1px solid #585858}.nav-list>li>a:hover{background-color:#444}@media screen and (max-width: 1024px){.sgh-sidebar{transform:translate(-100%);box-shadow:var(--sgh-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15))}.sgh-sidebar.expanded{transform:translate(0)}}@media screen and (max-width: 768px){.sgh-sidebar{width:280px}.sgh-sidebar .sidebar_div{padding:0 .75rem}.sgh-sidebar .auth-info-wrp{padding:1rem .75rem}}@media screen and (max-width: 480px){.sgh-sidebar{width:100%;max-width:320px}}:host-context(.sgh-dark-theme) .sgh-sidebar{--sgh-sidebar-bg: rgba(30, 41, 59, .95);--sgh-border-color: #334155}:host-context(.sgh-dark-theme) .auth-info-wrp{--sgh-surface-color: rgba(15, 23, 42, .5)}\n"], dependencies: [{ 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: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MenuListItemComponent, selector: "sgh-menu-list-item", inputs: ["items"] }], animations: [
             trigger('inOutAnimation', [
                 transition(':enter', [
                     style({ height: 0, opacity: 0 }),
@@ -319,7 +319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                                 animate('.5s ease-out', style({ transform: 'translateX(-100%)' }))
                             ])
                         ])
-                    ], standalone: false, template: "<div class=\"close sidenav-overlay\" *ngIf=\"expanded\"></div>\r\n<aside class=\"sgh-sidebar\" *ngIf=\"expanded\" [@slideInOut]>\r\n  <div class=\"menu-wrapper\">\r\n    <div class=\"sidebar_div \" *ngFor=\"let data of sidenavData.navData\">\r\n      <a (click)=\"onItemSelected(data)\" class=\"{{data.customLinkCSS}}\"\r\n         [routerLink]=\"[data.routeLink]\" routerLinkActive=\"item-active\" *ngIf=\"data.visible\">\r\n        <div class=\"text-wrap\">\r\n          <div class=\"icon-wrapper\">\r\n            <i class=\"fa-size fa fa-{{data.icon}}\"></i>\r\n          </div>\r\n          <div>\r\n            {{data.label}}\r\n          </div>\r\n        </div>\r\n        <i class=\"fa-size fa fa-angle-down\" *ngIf=\"!(data.items == undefined)\"\r\n           [@indicatorRotate]=\"data.expanded ? 'expanded': 'collapsed'\"></i>\r\n      </a>\r\n      <div class=\"sub-link-wrapper\" *ngIf=\"data.expanded\" [@inOutAnimation]>\r\n        <sgh-menu-list-item [items]=\"data.items || []\">\r\n        </sgh-menu-list-item>\r\n      </div>\r\n    </div>\r\n    <div class=\"auth-info-wrp\" *ngIf=\"hasClients\">\r\n      <div *ngIf=\"client && subclient\" class=\"client-info-wrp\">\r\n        <div>{{client.text}}</div>\r\n        <i class=\"fa fa-angle-right\"></i>\r\n        <div>{{subclient.text}}</div>\r\n      </div>\r\n      <div *ngIf=\"sidenavData.activeRole\" class=\"role-info-wrp\">\r\n        <span class=\"role-info-text\">Logged in as </span>\r\n        <span class=\"role-info-text role\">{{sidenavData.activeRole}}</span></div>\r\n    </div>\r\n  </div>\r\n</aside>\r\n", styles: [".sidebar_div a>div>i{padding-right:10px}.menu-wrapper{height:100%;display:flex;flex-direction:column;position:relative}.menu-wrapper .auth-info-wrp{margin-top:auto;padding:1.5rem 1rem 1rem;border-top:1px solid var(--sgh-border-color, #e2e8f0);color:var(--sgh-text-secondary, #64748b);background:var(--sgh-surface-color, rgba(248, 250, 252, .5));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.menu-wrapper .auth-info-wrp .client-info-wrp{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;padding:.5rem;background:var(--sgh-primary-color, #3b82f6);color:#fff;border-radius:8px;margin-bottom:.75rem}.menu-wrapper .auth-info-wrp .client-info-wrp i{font-size:.75rem;opacity:.8}.menu-wrapper .auth-info-wrp .role-info-wrp{font-size:.75rem;padding:.25rem .5rem}.menu-wrapper .auth-info-wrp .role-info-wrp .role-info-text{font-weight:400}.menu-wrapper .auth-info-wrp .role-info-wrp .role-info-text.role{font-weight:600;color:var(--sgh-primary-color, #3b82f6)}.fa-size{font-size:1.6em;line-height:.75em;vertical-align:-15%}.sgh-sidebar{height:100%;background:var(--sgh-sidebar-bg, rgba(255, 255, 255, .95));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid var(--sgh-border-color, #e2e8f0);overflow-y:auto;padding:65px 0 1.5rem;font-size:.875rem;width:280px;display:flex;flex-direction:column;z-index:999;transition:all .3s cubic-bezier(.4,0,.2,1);position:fixed;top:64px;left:0;bottom:0}.sgh-sidebar::-webkit-scrollbar{width:6px}.sgh-sidebar::-webkit-scrollbar-track{background:transparent}.sgh-sidebar::-webkit-scrollbar-thumb{background:var(--sgh-border-color, #e2e8f0);border-radius:3px}.sgh-sidebar::-webkit-scrollbar-thumb:hover{background:var(--sgh-text-muted, #94a3b8)}.sidebar_div{margin:0;padding:0 1rem;overflow:hidden}.sidebar_div a{color:var(--sgh-text-secondary, #64748b);padding:.75rem 1rem;text-decoration:none;margin:.25rem 0;display:flex;align-items:center;justify-content:space-between;border-radius:12px;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative}.sidebar_div a:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sgh-primary-color, #3b82f6);border-radius:0 2px 2px 0;transform:scaleY(0);transition:transform .2s ease}.sidebar_div a:hover:not(.active):not(.item-active){background:var(--sgh-hover-bg, rgba(59, 130, 246, .05));color:var(--sgh-text-primary, #1e293b);transform:translate(4px)}.sidebar_div a.active,.sidebar_div a.item-active{background:var(--sgh-primary-color, #3b82f6);color:#fff;transform:translate(4px);box-shadow:var(--sgh-shadow, 0 4px 12px rgba(59, 130, 246, .25))}.sidebar_div a.active:before,.sidebar_div a.item-active:before{transform:scaleY(1);background:#aaa;padding:3px}.sidebar_div a.active .text-wrap,.sidebar_div a.active .text-wrapper,.sidebar_div a.item-active .text-wrap,.sidebar_div a.item-active .text-wrapper,.sidebar_div a.active i,.sidebar_div a.item-active i{color:#fff}.text-wrap{display:flex;align-items:center;width:100%;gap:.75rem}.text-wrap .icon-wrapper{display:flex;align-items:center;justify-content:center;width:20px}.text-wrap .icon-wrapper i{font-size:1.125rem;transition:color .2s ease}div.content{margin-left:200px;padding:1px 16px;height:1000px}@media screen and (max-width: 700px){.sidebar_div{height:auto;position:relative}div.content{margin-left:0}}@media screen and (max-width: 400px){.sidebar_div a{text-align:center;float:none}}.nav-list li a{text-decoration:none;display:block;padding:10px;cursor:pointer;border-bottom:1px solid #515151;color:#9d9d9d}.nav-list>li>a{color:#c4c4c4;font-size:14px;padding-left:15px;border-bottom:1px solid #585858}.nav-list>li>a:hover{background-color:#444}.sidenav-overlay{position:fixed;width:100%;height:100%;top:0;z-index:998;cursor:pointer;transition:opacity .3s ease}@media screen and (max-width: 1024px){.sgh-sidebar{transform:translate(-100%);box-shadow:var(--sgh-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15))}.sgh-sidebar.expanded{transform:translate(0)}}@media screen and (max-width: 768px){.sgh-sidebar{width:280px}.sgh-sidebar .sidebar_div{padding:0 .75rem}.sgh-sidebar .auth-info-wrp{padding:1rem .75rem}}@media screen and (max-width: 480px){.sgh-sidebar{width:100%;max-width:320px}}:host-context(.sgh-dark-theme) .sgh-sidebar{--sgh-sidebar-bg: rgba(30, 41, 59, .95);--sgh-border-color: #334155}:host-context(.sgh-dark-theme) .auth-info-wrp{--sgh-surface-color: rgba(15, 23, 42, .5)}\n"] }]
+                    ], standalone: false, template: "<div class=\"close sidenav-overlay\" *ngIf=\"expanded\"></div>\r\n<aside class=\"sgh-sidebar\" *ngIf=\"expanded\" [@slideInOut]>\r\n  <div class=\"menu-wrapper\">\r\n    <div class=\"sidebar_div \" *ngFor=\"let data of sidenavData.navData\">\r\n      <a (click)=\"onItemSelected(data)\" class=\"{{data.customLinkCSS}}\"\r\n         [routerLink]=\"[data.routeLink]\" routerLinkActive=\"item-active\" *ngIf=\"data.visible\">\r\n        <div class=\"text-wrap\">\r\n          <div class=\"icon-wrapper\">\r\n            <i class=\"fa-size fa fa-{{data.icon}}\"></i>\r\n          </div>\r\n          <div>\r\n            {{data.label}}\r\n          </div>\r\n        </div>\r\n        <i class=\"fa-size fa fa-angle-down\" *ngIf=\"!(data.items == undefined)\"\r\n           [@indicatorRotate]=\"data.expanded ? 'expanded': 'collapsed'\"></i>\r\n      </a>\r\n      <div class=\"sub-link-wrapper\" *ngIf=\"data.expanded\" [@inOutAnimation]>\r\n        <sgh-menu-list-item [items]=\"data.items || []\">\r\n        </sgh-menu-list-item>\r\n      </div>\r\n    </div>\r\n    <div class=\"auth-info-wrp\" *ngIf=\"hasClients\">\r\n      <div *ngIf=\"client && subclient\" class=\"client-info-wrp\">\r\n        <div>{{client.text}}</div>\r\n        <i class=\"fa fa-angle-right\"></i>\r\n        <div>{{subclient.text}}</div>\r\n      </div>\r\n      <div *ngIf=\"sidenavData.activeRole\" class=\"role-info-wrp\">\r\n        <span class=\"role-info-text\">Logged in as </span>\r\n        <span class=\"role-info-text role\">{{sidenavData.activeRole}}</span></div>\r\n    </div>\r\n  </div>\r\n</aside>\r\n", styles: [".sidebar_div a>div>i{padding-right:10px}.menu-wrapper{height:100%;display:flex;flex-direction:column;position:relative}.menu-wrapper .auth-info-wrp{margin-top:auto;padding:1.5rem 1rem 1rem;border-top:1px solid var(--sgh-border-color, #e2e8f0);color:var(--sgh-text-secondary, #64748b);background:var(--sgh-surface-color, rgba(248, 250, 252, .5));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.menu-wrapper .auth-info-wrp .client-info-wrp{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;padding:.5rem;background:var(--sgh-primary-color, #3b82f6);color:#fff;border-radius:8px;margin-bottom:.75rem}.menu-wrapper .auth-info-wrp .client-info-wrp i{font-size:.75rem;opacity:.8}.menu-wrapper .auth-info-wrp .role-info-wrp{font-size:.75rem;padding:.25rem .5rem}.menu-wrapper .auth-info-wrp .role-info-wrp .role-info-text{font-weight:400}.menu-wrapper .auth-info-wrp .role-info-wrp .role-info-text.role{font-weight:600;color:var(--sgh-primary-color, #3b82f6)}.fa-size{font-size:1.6em;line-height:.75em;vertical-align:-15%}.sgh-sidebar{height:100%;background:var(--sgh-sidebar-bg, rgba(255, 255, 255, .95));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-right:1px solid var(--sgh-border-color, #e2e8f0);overflow-y:auto;padding:65px 0 1.5rem;font-size:.875rem;width:280px;display:flex;flex-direction:column;z-index:999;transition:all .3s cubic-bezier(.4,0,.2,1);position:fixed;top:64px;left:0;bottom:0}.sgh-sidebar::-webkit-scrollbar{width:6px}.sgh-sidebar::-webkit-scrollbar-track{background:transparent}.sgh-sidebar::-webkit-scrollbar-thumb{background:var(--sgh-border-color, #e2e8f0);border-radius:3px}.sgh-sidebar::-webkit-scrollbar-thumb:hover{background:var(--sgh-text-muted, #94a3b8)}.sidebar_div{margin:0;padding:0 1rem;overflow:hidden}.sidebar_div a{color:var(--sgh-text-secondary, #64748b);padding:.75rem 1rem;text-decoration:none;margin:.25rem 0;display:flex;align-items:center;justify-content:space-between;border-radius:12px;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative}.sidebar_div a:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sgh-primary-color, #3b82f6);border-radius:0 2px 2px 0;transform:scaleY(0);transition:transform .2s ease}.sidebar_div a:hover:not(.active):not(.item-active){background:var(--sgh-hover-bg, rgba(59, 130, 246, .05));color:var(--sgh-text-primary, #1e293b);transform:translate(4px)}.sidebar_div a.active,.sidebar_div a.item-active{background:var(--sgh-primary-color, #3b82f6);color:#fff;transform:translate(4px);box-shadow:var(--sgh-shadow, 0 4px 12px rgba(59, 130, 246, .25))}.sidebar_div a.active:before,.sidebar_div a.item-active:before{transform:scaleY(1);background:#aaa;padding:3px}.sidebar_div a.active .text-wrap,.sidebar_div a.active .text-wrapper,.sidebar_div a.item-active .text-wrap,.sidebar_div a.item-active .text-wrapper,.sidebar_div a.active i,.sidebar_div a.item-active i{color:#fff}.text-wrap{display:flex;align-items:center;width:100%;gap:.75rem}.text-wrap .icon-wrapper{display:flex;align-items:center;justify-content:center;width:20px}.text-wrap .icon-wrapper i{font-size:1.125rem;transition:color .2s ease}div.content{margin-left:200px;padding:1px 16px;height:1000px}@media screen and (max-width: 700px){.sidebar_div{height:auto;position:relative}div.content{margin-left:0}}@media screen and (max-width: 400px){.sidebar_div a{text-align:center;float:none}}.nav-list li a{text-decoration:none;display:block;padding:10px;cursor:pointer;border-bottom:1px solid #515151;color:#9d9d9d}.nav-list>li>a{color:#c4c4c4;font-size:14px;padding-left:15px;border-bottom:1px solid #585858}.nav-list>li>a:hover{background-color:#444}@media screen and (max-width: 1024px){.sgh-sidebar{transform:translate(-100%);box-shadow:var(--sgh-shadow-lg, 0 10px 25px rgba(0, 0, 0, .15))}.sgh-sidebar.expanded{transform:translate(0)}}@media screen and (max-width: 768px){.sgh-sidebar{width:280px}.sgh-sidebar .sidebar_div{padding:0 .75rem}.sgh-sidebar .auth-info-wrp{padding:1rem .75rem}}@media screen and (max-width: 480px){.sgh-sidebar{width:100%;max-width:320px}}:host-context(.sgh-dark-theme) .sgh-sidebar{--sgh-sidebar-bg: rgba(30, 41, 59, .95);--sgh-border-color: #334155}:host-context(.sgh-dark-theme) .auth-info-wrp{--sgh-surface-color: rgba(15, 23, 42, .5)}\n"] }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: SghNavbarService }], propDecorators: { onToggleSideNav: [{
                 type: Output
             }], expanded: [{
@@ -441,16 +441,16 @@ class NotificationListComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NotificationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NotificationListComponent, isStandalone: false, selector: "sgh-notification-list", ngImport: i0, template: "<div class=\"notifications-list-wrapper\">\r\n  <div class=\"notifications-list\">\r\n    <div class=\"notifications-title\">\r\n      <span class=\"title mat-h3\">Notifications</span>\r\n    </div>\r\n    <div class=\"notifications-list-item\">\r\n      <span class=\"item-title mat-h4\">David James</span>\r\n      <span class=\"item-description mat-h5\">A notification box show message</span>\r\n    </div>\r\n    <div class=\"notifications-list-item\">\r\n      <span class=\"item-title mat-h4\">David James</span>\r\n      <span class=\"item-description mat-h5\">A notification box show message</span>\r\n    </div>\r\n    <div class=\"notifications-title\">\r\n      <span class=\"see-all mat-h4\">See all</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".notifications-list-wrapper{padding:10px;position:absolute;right:10px;top:45px;z-index:2;color:#000000de;width:400px}.notifications-list-wrapper .notifications-list{box-shadow:0 2px 10px #00000026;position:relative}.notifications-list-wrapper .notifications-list .notifications-title{background-color:#fff;text-align:center;padding:20px 10px;border-bottom:1px solid #f1f1f3}.notifications-list-wrapper .notifications-list .notifications-list-item{padding:10px 10px 10px 30px;background-color:#e0eced;border-bottom:1px solid #f1f1f3}.notifications-list-wrapper .notifications-list .notifications-list-item .item-title{margin:0 5px 0 0;white-space:normal}.notifications-list-wrapper .notifications-list .notifications-list-item .item-description{margin:0;color:#000000de;opacity:.5;white-space:normal}.notifications-list-wrapper .notifications-list .see-all{background-color:#fff;color:#006068;font-weight:500}@media screen and (max-width: 599px){.notifications-list-wrapper{width:auto}}.notifications-list-wrapper{-webkit-animation:cardAnim 1s cubic-bezier(.33,1,.68,1) 0s 1 normal none;animation:cardAnim 1s cubic-bezier(.33,1,.68,1) 0s 1 normal none}@keyframes cardAnim{0%{opacity:0;transform:rotateX(-100deg);transform-origin:top}to{opacity:1;transform:rotateX(0);transform-origin:top}}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NotificationListComponent, isStandalone: false, selector: "sgh-notification-list", ngImport: i0, template: "<div class=\"notifications-list-wrapper\">\r\n  <div class=\"notifications-list\">\r\n    <div class=\"notifications-title\">\r\n      <span class=\"title mat-h3\">Notifications</span>\r\n    </div>\r\n    <div class=\"notifications-list-item\">\r\n      <span class=\"item-title mat-h4\">David James</span>\r\n      <span class=\"item-description mat-h5\">A notification box show message</span>\r\n    </div>\r\n    <div class=\"notifications-list-item\">\r\n      <span class=\"item-title mat-h4\">David James</span>\r\n      <span class=\"item-description mat-h5\">A notification box show message</span>\r\n    </div>\r\n    <div class=\"notifications-title\">\r\n      <span class=\"see-all mat-h4\">See all</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".notifications-list-wrapper{position:absolute;top:72px;right:1.5rem;z-index:1001;width:420px;max-width:calc(100vw - 2rem);animation:dropdownSlideIn .25s cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.notifications-list-wrapper{top:64px;right:1rem;left:1rem;width:auto}}.notifications-list{background:var(--sgh-surface-color, #ffffff);border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid var(--sgh-border-color, #e2e8f0);overflow:hidden}@supports (backdrop-filter: blur(10px)){.notifications-list{background:var(--sgh-surface-color, rgba(255, 255, 255, .95));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.notifications-title{display:flex;align-items:center;justify-content:center;padding:1rem 1.25rem;background:var(--sgh-surface-color, #f8fafc);border-bottom:1px solid var(--sgh-border-color, #e2e8f0)}.notifications-title .title{color:var(--sgh-text-primary, #1e293b);font-size:1rem;font-weight:600;margin:0}.notifications-title .see-all{color:var(--sgh-primary-color, #3b82f6);font-size:.9375rem;font-weight:500;margin:0;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}.notifications-title .see-all:hover{opacity:.8;text-decoration:underline}.notifications-list-item{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.25rem;background:var(--sgh-surface-color, #ffffff);border-bottom:1px solid var(--sgh-border-color, #e2e8f0);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative}.notifications-list-item:last-of-type{border-bottom:none}.notifications-list-item:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:all .15s cubic-bezier(.4,0,.2,1)}.notifications-list-item:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08))}.notifications-list-item:hover:before{background:var(--sgh-primary-color, #3b82f6)}.notifications-list-item .item-title{color:var(--sgh-text-primary, #1e293b);font-size:.9375rem;font-weight:600;margin:0;line-height:1.4}.notifications-list-item .item-description{color:var(--sgh-text-secondary, #64748b);font-size:.875rem;font-weight:400;margin:0;line-height:1.5;opacity:.8}.notifications-list-item.unread{background:#3b82f60d}.notifications-list-item.unread:before{background:var(--sgh-primary-color, #3b82f6)}.notifications-list-item.unread .item-title{color:var(--sgh-primary-color, #3b82f6)}.empty-notifications{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center}.empty-notifications i{font-size:3rem;color:var(--sgh-text-muted, #94a3b8);opacity:.5;margin-bottom:1rem}.empty-notifications .empty-title{color:var(--sgh-text-primary, #1e293b);font-size:1rem;font-weight:600;margin-bottom:.5rem}.empty-notifications .empty-message{color:var(--sgh-text-secondary, #64748b);font-size:.875rem}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.notifications-list-item-container{max-height:400px;overflow-y:auto}.notifications-list-item-container::-webkit-scrollbar{width:6px}.notifications-list-item-container::-webkit-scrollbar-track{background:transparent}.notifications-list-item-container::-webkit-scrollbar-thumb{background:#0000001a;border-radius:3px}.notifications-list-item-container::-webkit-scrollbar-thumb:hover{background:#0003}@media (prefers-color-scheme: dark){.notifications-list-wrapper .notifications-list{--sgh-surface-color: #1e293b;--sgh-text-primary: #f1f5f9;--sgh-text-secondary: #94a3b8;--sgh-border-color: #334155;--sgh-hover-bg: rgba(59, 130, 246, .15)}}@media (max-width: 599px){.notifications-list-wrapper{width:auto}.notifications-list-item{padding:.875rem 1rem}.notifications-list-item .item-title{font-size:.875rem}.notifications-list-item .item-description{font-size:.8125rem}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NotificationListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sgh-notification-list', standalone: false, template: "<div class=\"notifications-list-wrapper\">\r\n  <div class=\"notifications-list\">\r\n    <div class=\"notifications-title\">\r\n      <span class=\"title mat-h3\">Notifications</span>\r\n    </div>\r\n    <div class=\"notifications-list-item\">\r\n      <span class=\"item-title mat-h4\">David James</span>\r\n      <span class=\"item-description mat-h5\">A notification box show message</span>\r\n    </div>\r\n    <div class=\"notifications-list-item\">\r\n      <span class=\"item-title mat-h4\">David James</span>\r\n      <span class=\"item-description mat-h5\">A notification box show message</span>\r\n    </div>\r\n    <div class=\"notifications-title\">\r\n      <span class=\"see-all mat-h4\">See all</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".notifications-list-wrapper{padding:10px;position:absolute;right:10px;top:45px;z-index:2;color:#000000de;width:400px}.notifications-list-wrapper .notifications-list{box-shadow:0 2px 10px #00000026;position:relative}.notifications-list-wrapper .notifications-list .notifications-title{background-color:#fff;text-align:center;padding:20px 10px;border-bottom:1px solid #f1f1f3}.notifications-list-wrapper .notifications-list .notifications-list-item{padding:10px 10px 10px 30px;background-color:#e0eced;border-bottom:1px solid #f1f1f3}.notifications-list-wrapper .notifications-list .notifications-list-item .item-title{margin:0 5px 0 0;white-space:normal}.notifications-list-wrapper .notifications-list .notifications-list-item .item-description{margin:0;color:#000000de;opacity:.5;white-space:normal}.notifications-list-wrapper .notifications-list .see-all{background-color:#fff;color:#006068;font-weight:500}@media screen and (max-width: 599px){.notifications-list-wrapper{width:auto}}.notifications-list-wrapper{-webkit-animation:cardAnim 1s cubic-bezier(.33,1,.68,1) 0s 1 normal none;animation:cardAnim 1s cubic-bezier(.33,1,.68,1) 0s 1 normal none}@keyframes cardAnim{0%{opacity:0;transform:rotateX(-100deg);transform-origin:top}to{opacity:1;transform:rotateX(0);transform-origin:top}}\n"] }]
+            args: [{ selector: 'sgh-notification-list', standalone: false, template: "<div class=\"notifications-list-wrapper\">\r\n  <div class=\"notifications-list\">\r\n    <div class=\"notifications-title\">\r\n      <span class=\"title mat-h3\">Notifications</span>\r\n    </div>\r\n    <div class=\"notifications-list-item\">\r\n      <span class=\"item-title mat-h4\">David James</span>\r\n      <span class=\"item-description mat-h5\">A notification box show message</span>\r\n    </div>\r\n    <div class=\"notifications-list-item\">\r\n      <span class=\"item-title mat-h4\">David James</span>\r\n      <span class=\"item-description mat-h5\">A notification box show message</span>\r\n    </div>\r\n    <div class=\"notifications-title\">\r\n      <span class=\"see-all mat-h4\">See all</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".notifications-list-wrapper{position:absolute;top:72px;right:1.5rem;z-index:1001;width:420px;max-width:calc(100vw - 2rem);animation:dropdownSlideIn .25s cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.notifications-list-wrapper{top:64px;right:1rem;left:1rem;width:auto}}.notifications-list{background:var(--sgh-surface-color, #ffffff);border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid var(--sgh-border-color, #e2e8f0);overflow:hidden}@supports (backdrop-filter: blur(10px)){.notifications-list{background:var(--sgh-surface-color, rgba(255, 255, 255, .95));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.notifications-title{display:flex;align-items:center;justify-content:center;padding:1rem 1.25rem;background:var(--sgh-surface-color, #f8fafc);border-bottom:1px solid var(--sgh-border-color, #e2e8f0)}.notifications-title .title{color:var(--sgh-text-primary, #1e293b);font-size:1rem;font-weight:600;margin:0}.notifications-title .see-all{color:var(--sgh-primary-color, #3b82f6);font-size:.9375rem;font-weight:500;margin:0;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}.notifications-title .see-all:hover{opacity:.8;text-decoration:underline}.notifications-list-item{display:flex;flex-direction:column;gap:.5rem;padding:1rem 1.25rem;background:var(--sgh-surface-color, #ffffff);border-bottom:1px solid var(--sgh-border-color, #e2e8f0);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative}.notifications-list-item:last-of-type{border-bottom:none}.notifications-list-item:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:all .15s cubic-bezier(.4,0,.2,1)}.notifications-list-item:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08))}.notifications-list-item:hover:before{background:var(--sgh-primary-color, #3b82f6)}.notifications-list-item .item-title{color:var(--sgh-text-primary, #1e293b);font-size:.9375rem;font-weight:600;margin:0;line-height:1.4}.notifications-list-item .item-description{color:var(--sgh-text-secondary, #64748b);font-size:.875rem;font-weight:400;margin:0;line-height:1.5;opacity:.8}.notifications-list-item.unread{background:#3b82f60d}.notifications-list-item.unread:before{background:var(--sgh-primary-color, #3b82f6)}.notifications-list-item.unread .item-title{color:var(--sgh-primary-color, #3b82f6)}.empty-notifications{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center}.empty-notifications i{font-size:3rem;color:var(--sgh-text-muted, #94a3b8);opacity:.5;margin-bottom:1rem}.empty-notifications .empty-title{color:var(--sgh-text-primary, #1e293b);font-size:1rem;font-weight:600;margin-bottom:.5rem}.empty-notifications .empty-message{color:var(--sgh-text-secondary, #64748b);font-size:.875rem}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.notifications-list-item-container{max-height:400px;overflow-y:auto}.notifications-list-item-container::-webkit-scrollbar{width:6px}.notifications-list-item-container::-webkit-scrollbar-track{background:transparent}.notifications-list-item-container::-webkit-scrollbar-thumb{background:#0000001a;border-radius:3px}.notifications-list-item-container::-webkit-scrollbar-thumb:hover{background:#0003}@media (prefers-color-scheme: dark){.notifications-list-wrapper .notifications-list{--sgh-surface-color: #1e293b;--sgh-text-primary: #f1f5f9;--sgh-text-secondary: #94a3b8;--sgh-border-color: #334155;--sgh-hover-bg: rgba(59, 130, 246, .15)}}@media (max-width: 599px){.notifications-list-wrapper{width:auto}.notifications-list-item{padding:.875rem 1rem}.notifications-list-item .item-title{font-size:.875rem}.notifications-list-item .item-description{font-size:.8125rem}}\n"] }]
         }], ctorParameters: () => [] });
 
 class SearchPipe {
     transform(values, args) {
-        if (args === undefined) {
+        if (!values || args === undefined) {
             return values;
         }
         return values.filter(value => {
@@ -610,7 +610,7 @@ class ToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$1.MatDialog }, { token: SghNavbarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ToolbarComponent, isStandalone: false, selector: "sgh-toolbar", inputs: { expanded: "expanded", toolbarData: "toolbarData" }, outputs: { toggleSidebarEvent: "toggleSidebarEvent", searchInputEvent: "searchInputEvent", client: "client", subClient: "subClient" }, host: { listeners: { "click": "clickInside()", "document:click": "clickOut()" } }, viewQueries: [{ propertyName: "clientMenuTrigger", first: true, predicate: ["clientMenuTrigger"], descendants: true }], ngImport: i0, template: "<nav class=\"toolbar-main-wrapper\" [style.background-color]=\"toolbarData.bgColor\" id=\"toolBarWrapper\">\r\n  <div class=\"logo-wrapper\">\r\n    <img class=\"logo\" [src]=\"toolbarData.img\"/>\r\n  </div>\r\n  <div>\r\n    <button class=\"toggle-button\" (click)=\"toggleSidebar()\">\r\n      <i class=\"fa fa-bars fa-fade\"></i>\r\n    </button>\r\n  </div>\r\n  <div class=\"search\">\r\n    <div class=\"form\" *ngIf=\"toolbarData.searchEnable\">\r\n      <input type=\"text\" name=\"text\" autocomplete=\"off\" required/>\r\n      <label class=\"label-name\">\r\n    <span class=\"content-name\">\r\n      Search\r\n    </span>\r\n      </label>\r\n      <button class=\"search-wrapper\">\r\n        <i class=\"fa fa-search\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"toolbarData.notificationEnable\" class=\"icon\" id=\"bell\" (click)=\"toggleNotificationList()\">\r\n    <i class=\"fa fa-bell\"></i>\r\n  </div>\r\n  <div *ngIf=\"toolbarData.profileEnable\" class=\"icon\" id=\"bell3\" (click)=\"clickProfile()\">\r\n    <i class=\"fa fa-user\"></i>\r\n  </div>\r\n  <div *ngIf=\"toolbarData.settingsEnable\" class=\"icon\" id=\"bell2\" [matMenuTriggerFor]=\"settingsMenu\">\r\n    <i class=\"fa fa-gear\"></i>\r\n  </div>\r\n</nav>\r\n\r\n<div *ngIf=\"toolbarData.profileView\" class=\"notifications\">\r\n  <div class=\"notifications-list-wrapper profile-list-wrapper\">\r\n    <div class=\"notifications-list\">\r\n      <div class=\"notifications-list-item\">\r\n        <div [innerHTML]=\"toolbarData.profileContent\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!--Settings related menus start-->\r\n<mat-menu #settingsMenu=\"matMenu\" xPosition=\"before\">\r\n  <button mat-menu-item [matMenuTriggerFor]=\"appConfig\" *ngIf=\"toolbarData.applicationConfigurationEnable\">Application Settings</button>\r\n  <button mat-menu-item [matMenuTriggerFor]=\"clientConfig\" *ngIf=\"toolbarData.clientConfigurationEnable\" #clientMenuTrigger>Client Settings</button>\r\n</mat-menu>\r\n<mat-menu #appConfig=\"matMenu\" xPosition=\"after\">\r\n  <div *ngFor=\"let themeoption of toolbarData.themeOptions\">\r\n    <button mat-menu-item class=\"radio\" (click)=\"onRadioClick(themeoption.value)\">\r\n      <input value=\"{{themeoption.value}}\" name=\"radio\" type=\"radio\" checked [ngModel]=\"selected\"\r\n             (ngModelChange)=\"setClass($event)\">\r\n      <span>{{themeoption.name}}</span>\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n<mat-menu #clientConfig=\"matMenu\" xPosition=\"after\">\r\n  <div style=\"width: 250px\" class=\"client-menu-wrapper\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n        <div class=\"col-sm-12\" (click)=\"$event.stopPropagation();\">\r\n          <input type=\"text\" class=\"search-input\" placeholder=\"Search Client\" [(ngModel)]=\"searchText\"/>\r\n        </div>\r\n        <div class=\"col-sm-12\">\r\n          <div class=\"mt-2 list-item-container\">\r\n            <div class=\"list-item text-truncate\" *ngFor=\"let item of toolbarData.clientList | search : searchText;let i = index\"\r\n                 [ngClass]=\"{'client-selected': item.selected}\"\r\n                 (click)=\"toggleSelect($event, item);\" mat-ripple>{{item.text}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n\r\n<!--Settings related menus end-->\r\n\r\n<sgh-notification-list *ngIf=\"toolbarData.isNotifNavCollapsed\"></sgh-notification-list>\r\n", styles: [".toolbar-main-wrapper{position:relative;box-shadow:var(--sgh-shadow, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06));z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--sgh-border-color, rgba(255, 255, 255, .1))}nav{display:flex;align-items:center;background:var(--sgh-toolbar-bg, rgba(255, 255, 255, .95));height:64px;position:relative;padding:0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}@supports (backdrop-filter: blur(10px)){nav{background:var(--sgh-toolbar-bg, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.logo-wrapper{display:flex;align-items:center;flex-shrink:0;margin-right:2rem}.logo{height:32px;width:auto;object-fit:contain;transition:transform .2s ease}.logo:hover{transform:scale(1.05)}.icon{cursor:pointer;margin-left:.75rem;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;background:transparent;border:none}.icon i{color:var(--sgh-text-secondary, #64748b);font-size:1.125rem;transition:color .2s ease}.icon:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .1));transform:translateY(-1px);box-shadow:var(--sgh-shadow, 0 4px 12px rgba(0, 0, 0, .15))}.icon:hover i{color:var(--sgh-primary-color, #3b82f6)}.icon:active{transform:translateY(0);box-shadow:var(--sgh-shadow, 0 2px 4px rgba(0, 0, 0, .1))}.icon span{background:var(--sgh-error-color, #ef4444);padding:2px 6px;border-radius:10px;color:#fff;font-size:.75rem;font-weight:500;position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:2px solid var(--sgh-surface-color, white)}.icon img{width:20px;height:20px;border-radius:50%}.search{flex:1;max-width:400px;margin:0 2rem}.notifications h2{font-size:14px;padding:10px;border-bottom:1px solid #eee;color:#999}.notifications h2 span{color:red}.notifications-item{display:flex;border-bottom:1px solid #eee;padding:6px 9px;margin-bottom:0;cursor:pointer}.notifications-item:hover{background-color:#eee}.notifications-item img{display:block;width:50px;height:50px;margin-right:9px;border-radius:50%;margin-top:2px}.notifications-item .text h4{color:#777;font-size:16px;margin-top:3px}.notifications-item .text p{color:#aaa;font-size:12px}.box{width:280px;height:auto;background-color:#fff;border-radius:0;display:flex;align-items:center;padding:0;border-bottom:2px solid #005860}.box>i{font-size:20px;color:#777}.box>input{flex:1;height:35px;border:none;outline:none;font-size:14px;padding-left:10px}.box>button{background:transparent;border:none;cursor:pointer}.toggle-button{background:transparent;border:none;cursor:pointer;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);margin-right:1rem}.toggle-button i{color:var(--sgh-text-secondary, #64748b);font-size:1.125rem;transition:color .2s ease}.toggle-button:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .1));transform:translateY(-1px)}.toggle-button:hover i{color:var(--sgh-primary-color, #3b82f6)}.toggle-button:active{transform:translateY(0)}.search-wrapper{border-radius:20px;padding:13px;border:none;background:transparent;cursor:pointer}.search-wrapper i{color:#005860!important}.search-wrapper:hover{background:#0000000a!important}.logo{width:49%!important;padding:0 19px}.theme-list-wrapper,.profile-list-wrapper{width:300px!important}.notifications-list-wrapper{padding:10px;position:absolute;right:10px;top:45px;z-index:2;color:#000000de;width:450px}.notifications-list-wrapper .notifications-list{box-shadow:0 2px 10px #00000026;position:relative}.notifications-list-wrapper .notifications-list .notifications-title{background-color:#fff;text-align:center;padding:20px 10px;border-bottom:1px solid #f1f1f3}.notifications-list-wrapper .notifications-list .notifications-list-item{padding:10px;background-color:#fff;border-bottom:1px solid #f1f1f3;font-size:14px}.notifications-list-wrapper .notifications-list .notifications-list-item .item-title{margin:0;white-space:normal}.notifications-list-wrapper .notifications-list .notifications-list-item .item-description{margin:0;color:#000000de;opacity:.5;white-space:normal}.notifications-list-wrapper .notifications-list .see-all{background-color:#fff;color:#006068;font-weight:500}@media screen and (max-width: 599px){.notifications-list-wrapper{width:auto}}.notifications-list-wrapper{-webkit-animation:cardAnim 1s cubic-bezier(.33,1,.68,1) 0s 1 normal none;animation:cardAnim 1s cubic-bezier(.33,1,.68,1) 0s 1 normal none}@keyframes cardAnim{0%{opacity:0;transform:rotateX(-100deg);transform-origin:top}to{opacity:1;transform:rotateX(0);transform-origin:top}}select{padding:10px 20px;border-radius:5px;width:100%;margin:3% 10%;border:1px solid #005860}select:focus{outline:none}.form{width:100%;position:relative;height:40px;display:flex;align-items:center;background:var(--sgh-search-bg, rgba(248, 250, 252, .8));border:1px solid var(--sgh-border-color, #e2e8f0);border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.form:hover{border-color:var(--sgh-primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.form:focus-within{border-color:var(--sgh-primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a;background:var(--sgh-surface-color, white)}.form input{width:100%;height:100%;color:var(--sgh-text-primary, #1e293b);padding:0 12px;border:none;background:transparent;font-size:.875rem;outline:none}.form input::placeholder{color:var(--sgh-text-muted, #94a3b8);transition:opacity .3s ease}.form input:focus::placeholder{opacity:.7}.form label{position:absolute;top:50%;left:12px;transform:translateY(-50%);pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);color:var(--sgh-text-muted, #94a3b8);font-size:.875rem;background:transparent;padding:0 4px}.content-name{transition:all .3s cubic-bezier(.4,0,.2,1)}.form input:focus+.label-name .content-name,.form input:valid+.label-name .content-name{transform:translateY(-120%);font-size:.75rem;color:var(--sgh-primary-color, #3b82f6);background:var(--sgh-surface-color, white);padding:0 4px}.search-wrapper{background:transparent;border:none;cursor:pointer;padding:8px 12px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;border-radius:8px;margin-right:4px}.search-wrapper i{color:var(--sgh-text-muted, #94a3b8);font-size:1rem;transition:color .2s ease}.search-wrapper:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .1))}.search-wrapper:hover i{color:var(--sgh-primary-color, #3b82f6)}.radio{display:block;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left}.radio+.radio{margin-top:12px}.radio input{display:none}.radio input+span{display:inline-block;position:relative;padding-left:30px}.radio input+span:before{content:\"\";display:block;position:absolute;top:0;left:0;border-radius:50%;margin-right:5px;width:16px;height:16px;border:1px solid #ccc;background:#fff}.radio input+span:after{content:\"\";display:block;width:11px;height:11px;background:#005860;position:absolute;border-radius:50%;top:3px;left:3px;opacity:0;transform:scale(0);transition:all .2s cubic-bezier(.64,.57,.67,1.53)}.radio input:checked+span:after{opacity:1;transform:scale(1)}.client-menu-wrapper .container-fluid{padding-right:15px;padding-left:15px;margin:10px}.client-menu-wrapper .container-fluid .row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;flex-direction:column}.client-menu-wrapper .container-fluid .row .search-input{width:100%;box-sizing:border-box;display:block;padding:.375rem .75rem;font-size:12px;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.client-menu-wrapper .container-fluid .row .search-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.client-menu-wrapper .container-fluid .row .list-item-container{border:.5px rgba(0,0,0,.12) solid;margin-top:5px;border-radius:5px;overflow:hidden}.client-menu-wrapper .container-fluid .row .list-item-container .mat-ripple{padding:8px;font-size:12px}.client-menu-wrapper .container-fluid .row .list-item-container .mat-ripple:hover{background:#76767642;cursor:pointer;transition:all .3s ease 0s}.client-menu-wrapper .container-fluid .row .list-item-container .client-selected{color:#fff;background-color:#005860}@media screen and (max-width: 600px){.search{display:none}.logo-wrapper{width:30%}.logo-wrapper .logo{width:78%!important;padding:9px}.sgh-sidebar{z-index:1!important;position:absolute!important;background:#fff!important}.icon{cursor:pointer;margin-right:0;margin-left:34px}.toggle-button{order:-1}.logo-wrapper,.icon{order:1}#toolBarWrapper{padding:0 15px;justify-content:space-between}}@media screen and (min-width: 1900px){.logo{width:29%!important;padding:0 35px}}\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: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NotificationListComponent, selector: "sgh-notification-list" }, { kind: "pipe", type: SearchPipe, name: "search" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ToolbarComponent, isStandalone: false, selector: "sgh-toolbar", inputs: { expanded: "expanded", toolbarData: "toolbarData" }, outputs: { toggleSidebarEvent: "toggleSidebarEvent", searchInputEvent: "searchInputEvent", client: "client", subClient: "subClient" }, host: { listeners: { "click": "clickInside()", "document:click": "clickOut()" } }, viewQueries: [{ propertyName: "clientMenuTrigger", first: true, predicate: ["clientMenuTrigger"], descendants: true }], ngImport: i0, template: "<header class=\"sgh-toolbar\" [style.background-color]=\"toolbarData.bgColor\" id=\"toolBarWrapper\" role=\"banner\">\r\n  <nav class=\"toolbar-main-wrapper\">\r\n    <!-- Left Section -->\r\n    <div class=\"toolbar-left-section\">\r\n      <!-- Logo -->\r\n      <div class=\"toolbar-logo\">\r\n        <img class=\"logo-image\" [src]=\"toolbarData.img\" alt=\"Application Logo\"/>\r\n      </div>\r\n\r\n      <!-- Menu Toggle -->\r\n      <button class=\"toolbar-menu-toggle\"\r\n              (click)=\"toggleSidebar()\"\r\n              aria-label=\"Toggle navigation menu\"\r\n              title=\"Toggle Menu\">\r\n        <i class=\"fa fa-bars\"></i>\r\n      </button>\r\n\r\n      <!-- Search Bar -->\r\n      <div class=\"toolbar-search\" *ngIf=\"toolbarData.searchEnable\">\r\n        <form class=\"search-form\" (submit)=\"$event.preventDefault()\">\r\n          <div class=\"search-input-wrapper\">\r\n            <i class=\"fa fa-search search-icon\"></i>\r\n            <input type=\"search\"\r\n                   class=\"search-input\"\r\n                   placeholder=\"Search...\"\r\n                   autocomplete=\"off\"\r\n                   aria-label=\"Search\"/>\r\n            <button type=\"submit\" class=\"search-submit\" aria-label=\"Submit search\">\r\n              <i class=\"fa fa-arrow-right\"></i>\r\n            </button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Right Section -->\r\n    <div class=\"toolbar-right-section\">\r\n      <!-- Notification Button -->\r\n      <button *ngIf=\"toolbarData.notificationEnable\"\r\n              class=\"toolbar-action-btn notification-btn\"\r\n              (click)=\"toggleNotificationList()\"\r\n              aria-label=\"View notifications\"\r\n              title=\"Notifications\">\r\n        <i class=\"fa fa-bell\"></i>\r\n        <span class=\"notification-badge\" *ngIf=\"true\">3</span>\r\n      </button>\r\n\r\n      <!-- Settings Button -->\r\n      <button *ngIf=\"toolbarData.settingsEnable\"\r\n              class=\"toolbar-action-btn settings-btn\"\r\n              [matMenuTriggerFor]=\"settingsMenu\"\r\n              aria-label=\"Open settings\"\r\n              title=\"Settings\">\r\n        <i class=\"fa fa-cog\"></i>\r\n      </button>\r\n\r\n      <!-- User Profile Button -->\r\n      <button *ngIf=\"toolbarData.profileEnable\"\r\n              class=\"toolbar-action-btn profile-btn\"\r\n              (click)=\"clickProfile()\"\r\n              aria-label=\"View profile\"\r\n              title=\"Profile\">\r\n        <i class=\"fa fa-user-circle\"></i>\r\n      </button>\r\n    </div>\r\n  </nav>\r\n</header>\r\n\r\n<!-- Profile Dropdown -->\r\n<div *ngIf=\"toolbarData.profileView\" class=\"toolbar-dropdown profile-dropdown\" @fadeInOut>\r\n  <div class=\"dropdown-card\">\r\n    <div class=\"dropdown-content\">\r\n      <div [innerHTML]=\"toolbarData.profileContent\"></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Settings Menu -->\r\n<mat-menu #settingsMenu=\"matMenu\" xPosition=\"before\" class=\"sgh-settings-menu\">\r\n  <button mat-menu-item\r\n          [matMenuTriggerFor]=\"appConfig\"\r\n          *ngIf=\"toolbarData.applicationConfigurationEnable\"\r\n          class=\"menu-item-with-icon\">\r\n    <i class=\"fa fa-paint-brush menu-icon\"></i>\r\n    <span>Application Settings</span>\r\n  </button>\r\n  <button mat-menu-item\r\n          [matMenuTriggerFor]=\"clientConfig\"\r\n          *ngIf=\"toolbarData.clientConfigurationEnable\"\r\n          #clientMenuTrigger\r\n          class=\"menu-item-with-icon\">\r\n    <i class=\"fa fa-building menu-icon\"></i>\r\n    <span>Client Settings</span>\r\n  </button>\r\n</mat-menu>\r\n\r\n<!-- Application Configuration Menu -->\r\n<mat-menu #appConfig=\"matMenu\" xPosition=\"after\" class=\"sgh-app-config-menu\">\r\n  <div class=\"theme-menu-header\">\r\n    <i class=\"fa fa-palette\"></i>\r\n    <span>Choose Theme</span>\r\n  </div>\r\n  <div *ngFor=\"let themeoption of toolbarData.themeOptions\" class=\"theme-option-wrapper\">\r\n    <button mat-menu-item class=\"theme-radio-option\" (click)=\"onRadioClick(themeoption.value)\">\r\n      <div class=\"radio-button\">\r\n        <input value=\"{{themeoption.value}}\"\r\n               name=\"radio\"\r\n               type=\"radio\"\r\n               [checked]=\"selected === themeoption.value\"\r\n               [ngModel]=\"selected\"\r\n               (ngModelChange)=\"setClass($event)\">\r\n        <span class=\"radio-label\">{{themeoption.name}}</span>\r\n      </div>\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n\r\n<!-- Client Configuration Menu -->\r\n<mat-menu #clientConfig=\"matMenu\" xPosition=\"after\" class=\"sgh-client-config-menu\">\r\n  <div class=\"client-menu-container\">\r\n    <div class=\"client-menu-header\">\r\n      <i class=\"fa fa-building\"></i>\r\n      <span>Select Client</span>\r\n    </div>\r\n    <div class=\"client-search-wrapper\" (click)=\"$event.stopPropagation();\">\r\n      <i class=\"fa fa-search search-icon\"></i>\r\n      <input type=\"text\"\r\n             class=\"client-search-input\"\r\n             placeholder=\"Search clients...\"\r\n             [(ngModel)]=\"searchText\"\r\n             autocomplete=\"off\"/>\r\n    </div>\r\n    <div class=\"client-list-container\">\r\n      <div class=\"client-list-item\"\r\n           *ngFor=\"let item of toolbarData.clientList | search : searchText; let i = index\"\r\n           [class.selected]=\"item.selected\"\r\n           (click)=\"toggleSelect($event, item);\"\r\n           mat-ripple>\r\n        <i class=\"fa fa-check-circle check-icon\" *ngIf=\"item.selected\"></i>\r\n        <span class=\"client-name\">{{item.text}}</span>\r\n      </div>\r\n      <div class=\"no-results\" *ngIf=\"(toolbarData.clientList | search : searchText)?.length === 0\">\r\n        <i class=\"fa fa-search\"></i>\r\n        <span>No clients found</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n\r\n<sgh-notification-list *ngIf=\"toolbarData.isNotifNavCollapsed\"></sgh-notification-list>\r\n", styles: [".sgh-toolbar{position:sticky;top:0;z-index:1000;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;background:var(--sgh-toolbar-bg, rgba(255, 255, 255, .95));border-bottom:1px solid var(--sgh-border-color, #e2e8f0)}@supports (backdrop-filter: blur(10px)){.sgh-toolbar{background:var(--sgh-toolbar-bg, rgba(255, 255, 255, .85));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.toolbar-main-wrapper{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 1.5rem;max-width:100%;margin:0 auto;transition:all .3s cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.toolbar-main-wrapper{height:56px;padding:0 1rem}}.toolbar-left-section{display:flex;align-items:center;gap:5rem;min-width:0}.toolbar-logo{display:flex;align-items:center;flex-shrink:0}.toolbar-logo .logo-image{height:42px;width:auto;max-width:200px;object-fit:contain;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.05))}.toolbar-logo .logo-image:hover{transform:scale(1.02);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.toolbar-logo .logo-image:active{transform:scale(.98)}.toolbar-menu-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:none;border-radius:12px;background:transparent;color:var(--sgh-text-secondary, #64748b);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);flex-shrink:0}.toolbar-menu-toggle i{font-size:1.25rem;transition:all .15s cubic-bezier(.4,0,.2,1)}.toolbar-menu-toggle:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08));color:var(--sgh-primary-color, #3b82f6);transform:translateY(-1px)}.toolbar-menu-toggle:hover i{transform:scale(1.1)}.toolbar-menu-toggle:active{transform:translateY(0) scale(.95)}.toolbar-menu-toggle:focus-visible{outline:2px solid var(--sgh-primary-color, #3b82f6);outline-offset:2px}.toolbar-search{flex:1;max-width:600px;margin:0 1rem}@media (max-width: 1024px){.toolbar-search{max-width:400px}}.search-form{width:100%}.search-input-wrapper{position:relative;display:flex;align-items:center;height:42px;background:var(--sgh-search-bg, #f8fafc);border:1.5px solid transparent;border-radius:12px;transition:all .15s cubic-bezier(.4,0,.2,1);overflow:hidden}.search-input-wrapper:hover{background:var(--sgh-surface-color, #ffffff);border-color:#3b82f633;box-shadow:0 0 0 3px #3b82f60d}.search-input-wrapper:focus-within{background:var(--sgh-surface-color, #ffffff);border-color:var(--sgh-primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.search-input-wrapper .search-icon{position:absolute;left:14px;color:var(--sgh-text-muted, #94a3b8);font-size:1rem;transition:all .15s cubic-bezier(.4,0,.2,1);pointer-events:none}.search-input-wrapper .search-input{flex:1;height:100%;padding:0 12px 0 42px;border:none;background:transparent;color:var(--sgh-text-primary, #1e293b);font-size:.9375rem;font-weight:400;outline:none}.search-input-wrapper .search-input::placeholder{color:var(--sgh-text-muted, #94a3b8);font-weight:400}.search-input-wrapper .search-input:focus::placeholder{opacity:.6}.search-input-wrapper .search-input:focus~.search-icon{color:var(--sgh-primary-color, #3b82f6)}.search-input-wrapper .search-submit{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:3px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--sgh-text-muted, #94a3b8);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}.search-input-wrapper .search-submit i{font-size:.875rem;transition:all .15s cubic-bezier(.4,0,.2,1)}.search-input-wrapper .search-submit:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08));color:var(--sgh-primary-color, #3b82f6)}.search-input-wrapper .search-submit:hover i{transform:translate(2px)}.search-input-wrapper .search-submit:active{transform:scale(.95)}.toolbar-right-section{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.toolbar-action-btn{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:none;border-radius:12px;background:transparent;color:var(--sgh-text-secondary, #64748b);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);flex-shrink:0}.toolbar-action-btn i{font-size:1.125rem;transition:all .15s cubic-bezier(.4,0,.2,1)}.toolbar-action-btn:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08));color:var(--sgh-primary-color, #3b82f6);transform:translateY(-1px);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.toolbar-action-btn:hover i{transform:scale(1.1)}.toolbar-action-btn:active{transform:translateY(0) scale(.95);box-shadow:none}.toolbar-action-btn:focus-visible{outline:2px solid var(--sgh-primary-color, #3b82f6);outline-offset:2px}.toolbar-action-btn .notification-badge{position:absolute;top:6px;right:6px;display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:linear-gradient(135deg,#ef4444,#dc2626);border:2px solid var(--sgh-surface-color, #ffffff);border-radius:10px;color:#fff;font-size:.625rem;font-weight:700;line-height:1;box-shadow:0 2px 4px #00000026;animation:pulse 2s infinite}.toolbar-action-btn.notification-btn:hover .notification-badge{animation:none;transform:scale(1.1)}.toolbar-action-btn.profile-btn i{font-size:1.3rem}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}.toolbar-dropdown{position:absolute;top:72px;right:1.5rem;z-index:1001;min-width:320px;max-width:400px;animation:dropdownSlideIn .25s cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.toolbar-dropdown{top:64px;right:1rem;left:1rem;max-width:none}}.dropdown-card{background:var(--sgh-surface-color, #ffffff);border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid var(--sgh-border-color, #e2e8f0);overflow:hidden}@supports (backdrop-filter: blur(10px)){.dropdown-card{background:var(--sgh-surface-color, rgba(255, 255, 255, .95));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.dropdown-content{padding:1rem}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}::ng-deep .sgh-settings-menu .mat-mdc-menu-panel,::ng-deep .sgh-app-config-menu .mat-mdc-menu-panel,::ng-deep .sgh-client-config-menu .mat-mdc-menu-panel{min-width:240px;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid var(--sgh-border-color, #e2e8f0);overflow:hidden}::ng-deep .sgh-settings-menu .mat-mdc-menu-content,::ng-deep .sgh-app-config-menu .mat-mdc-menu-content,::ng-deep .sgh-client-config-menu .mat-mdc-menu-content{padding:.5rem;background-color:#fff}::ng-deep .sgh-settings-menu .mat-mdc-menu-item,::ng-deep .sgh-app-config-menu .mat-mdc-menu-item,::ng-deep .sgh-client-config-menu .mat-mdc-menu-item{border-radius:8px;margin-bottom:2px;min-height:42px;padding:0 12px;transition:all .15s cubic-bezier(.4,0,.2,1)}::ng-deep .sgh-settings-menu .mat-mdc-menu-item:hover,::ng-deep .sgh-app-config-menu .mat-mdc-menu-item:hover,::ng-deep .sgh-client-config-menu .mat-mdc-menu-item:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08))}::ng-deep .sgh-settings-menu .mat-mdc-menu-item.menu-item-with-icon,::ng-deep .sgh-app-config-menu .mat-mdc-menu-item.menu-item-with-icon,::ng-deep .sgh-client-config-menu .mat-mdc-menu-item.menu-item-with-icon{display:flex;align-items:center;gap:12px}::ng-deep .sgh-settings-menu .mat-mdc-menu-item.menu-item-with-icon .menu-icon,::ng-deep .sgh-app-config-menu .mat-mdc-menu-item.menu-item-with-icon .menu-icon,::ng-deep .sgh-client-config-menu .mat-mdc-menu-item.menu-item-with-icon .menu-icon{color:var(--sgh-text-secondary, #64748b);font-size:1rem;width:20px;text-align:center}.theme-menu-header{display:flex;align-items:center;gap:8px;padding:12px 16px 8px;color:var(--sgh-text-primary, #1e293b);font-weight:600;font-size:.9375rem;border-bottom:1px solid var(--sgh-border-color, #e2e8f0);margin-bottom:8px}.theme-menu-header i{color:var(--sgh-primary-color, #3b82f6);font-size:1rem}.theme-option-wrapper{padding:0 8px}.theme-radio-option{width:100%;border-radius:8px;padding:8px 12px!important}.theme-radio-option .radio-button{display:flex;align-items:center;gap:12px;width:100%}.theme-radio-option .radio-button input[type=radio]{appearance:none;width:18px;height:18px;border:2px solid var(--sgh-border-color, #e2e8f0);border-radius:50%;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;flex-shrink:0}.theme-radio-option .radio-button input[type=radio]:checked{border-color:var(--sgh-primary-color, #3b82f6)}.theme-radio-option .radio-button input[type=radio]:checked:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:var(--sgh-primary-color, #3b82f6);border-radius:50%}.theme-radio-option .radio-button input[type=radio]:hover{border-color:var(--sgh-primary-color, #3b82f6)}.theme-radio-option .radio-button .radio-label{flex:1;color:var(--sgh-text-primary, #1e293b);font-size:.9375rem;-webkit-user-select:none;user-select:none}.client-menu-container{max-width:calc(100vw - 2rem)}.client-menu-header{display:flex;align-items:center;gap:8px;padding:12px 16px;color:var(--sgh-text-primary, #1e293b);font-weight:600;font-size:.9375rem;border-bottom:1px solid var(--sgh-border-color, #e2e8f0);background:var(--sgh-surface-color, #f8fafc)}.client-menu-header i{color:var(--sgh-primary-color, #3b82f6);font-size:1rem}.client-search-wrapper{position:relative;padding:12px 16px;border-bottom:1px solid var(--sgh-border-color, #e2e8f0)}.client-search-wrapper .search-icon{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--sgh-text-muted, #94a3b8);font-size:.875rem;pointer-events:none}.client-search-wrapper .client-search-input{height:36px;padding:0 12px 0 32px;border:1.5px solid var(--sgh-border-color, #e2e8f0);border-radius:8px;background:var(--sgh-surface-color, #ffffff);color:var(--sgh-text-primary, #1e293b);font-size:.875rem;outline:none;transition:all .15s cubic-bezier(.4,0,.2,1)}.client-search-wrapper .client-search-input::placeholder{color:var(--sgh-text-muted, #94a3b8)}.client-search-wrapper .client-search-input:focus{border-color:var(--sgh-primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.client-list-container{max-height:320px;overflow-y:auto;padding:8px}.client-list-container::-webkit-scrollbar{width:6px}.client-list-container::-webkit-scrollbar-track{background:transparent}.client-list-container::-webkit-scrollbar-thumb{background:#0000001a;border-radius:3px}.client-list-container::-webkit-scrollbar-thumb:hover{background:#0003}.client-list-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative}.client-list-item .check-icon{color:var(--sgh-primary-color, #3b82f6);font-size:1rem;flex-shrink:0}.client-list-item .client-name{flex:1;color:var(--sgh-text-primary, #1e293b);font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.client-list-item:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08))}.client-list-item.selected{background:#3b82f61a}.client-list-item.selected .client-name{color:var(--sgh-primary-color, #3b82f6);font-weight:500}.no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;color:var(--sgh-text-muted, #94a3b8);text-align:center}.no-results i{font-size:2rem;margin-bottom:.5rem;opacity:.5}.no-results span{font-size:.875rem}@media (max-width: 1024px){.toolbar-search{max-width:300px}}@media (max-width: 768px){.toolbar-search{display:none}.toolbar-left-section{gap:.5rem}.toolbar-logo .logo-image{height:36px;max-width:140px}.toolbar-menu-toggle,.toolbar-action-btn{width:40px;height:40px}.toolbar-menu-toggle i,.toolbar-action-btn i{font-size:1.125rem}.toolbar-action-btn .notification-badge{top:4px;right:4px}.toolbar-right-section{gap:.25rem}}@media (min-width: 1440px){.toolbar-main-wrapper{max-width:1400px}}@media (min-width: 1920px){.toolbar-main-wrapper{max-width:100%}.toolbar-logo .logo-image{height:48px;max-width:240px}.toolbar-search{max-width:700px}}@media (prefers-color-scheme: dark){.sgh-toolbar{--sgh-toolbar-bg: rgba(15, 23, 42, .95);--sgh-surface-color: #1e293b;--sgh-text-primary: #f1f5f9;--sgh-text-secondary: #94a3b8;--sgh-text-muted: #64748b;--sgh-border-color: #334155;--sgh-search-bg: #0f172a;--sgh-hover-bg: rgba(59, 130, 246, .15)}}@media print{.sgh-toolbar{display:none}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){.toolbar-action-btn,.toolbar-menu-toggle{border:1px solid currentColor}}:focus-visible{outline:2px solid var(--sgh-primary-color, #3b82f6);outline-offset:2px}\n"], dependencies: [{ 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: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NotificationListComponent, selector: "sgh-notification-list" }, { kind: "pipe", type: SearchPipe, name: "search" }], animations: [
             fadeInOut
         ] }); }
 }
@@ -618,7 +618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Component,
             args: [{ selector: 'sgh-toolbar', animations: [
                         fadeInOut
-                    ], standalone: false, template: "<nav class=\"toolbar-main-wrapper\" [style.background-color]=\"toolbarData.bgColor\" id=\"toolBarWrapper\">\r\n  <div class=\"logo-wrapper\">\r\n    <img class=\"logo\" [src]=\"toolbarData.img\"/>\r\n  </div>\r\n  <div>\r\n    <button class=\"toggle-button\" (click)=\"toggleSidebar()\">\r\n      <i class=\"fa fa-bars fa-fade\"></i>\r\n    </button>\r\n  </div>\r\n  <div class=\"search\">\r\n    <div class=\"form\" *ngIf=\"toolbarData.searchEnable\">\r\n      <input type=\"text\" name=\"text\" autocomplete=\"off\" required/>\r\n      <label class=\"label-name\">\r\n    <span class=\"content-name\">\r\n      Search\r\n    </span>\r\n      </label>\r\n      <button class=\"search-wrapper\">\r\n        <i class=\"fa fa-search\"></i>\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"toolbarData.notificationEnable\" class=\"icon\" id=\"bell\" (click)=\"toggleNotificationList()\">\r\n    <i class=\"fa fa-bell\"></i>\r\n  </div>\r\n  <div *ngIf=\"toolbarData.profileEnable\" class=\"icon\" id=\"bell3\" (click)=\"clickProfile()\">\r\n    <i class=\"fa fa-user\"></i>\r\n  </div>\r\n  <div *ngIf=\"toolbarData.settingsEnable\" class=\"icon\" id=\"bell2\" [matMenuTriggerFor]=\"settingsMenu\">\r\n    <i class=\"fa fa-gear\"></i>\r\n  </div>\r\n</nav>\r\n\r\n<div *ngIf=\"toolbarData.profileView\" class=\"notifications\">\r\n  <div class=\"notifications-list-wrapper profile-list-wrapper\">\r\n    <div class=\"notifications-list\">\r\n      <div class=\"notifications-list-item\">\r\n        <div [innerHTML]=\"toolbarData.profileContent\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!--Settings related menus start-->\r\n<mat-menu #settingsMenu=\"matMenu\" xPosition=\"before\">\r\n  <button mat-menu-item [matMenuTriggerFor]=\"appConfig\" *ngIf=\"toolbarData.applicationConfigurationEnable\">Application Settings</button>\r\n  <button mat-menu-item [matMenuTriggerFor]=\"clientConfig\" *ngIf=\"toolbarData.clientConfigurationEnable\" #clientMenuTrigger>Client Settings</button>\r\n</mat-menu>\r\n<mat-menu #appConfig=\"matMenu\" xPosition=\"after\">\r\n  <div *ngFor=\"let themeoption of toolbarData.themeOptions\">\r\n    <button mat-menu-item class=\"radio\" (click)=\"onRadioClick(themeoption.value)\">\r\n      <input value=\"{{themeoption.value}}\" name=\"radio\" type=\"radio\" checked [ngModel]=\"selected\"\r\n             (ngModelChange)=\"setClass($event)\">\r\n      <span>{{themeoption.name}}</span>\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n<mat-menu #clientConfig=\"matMenu\" xPosition=\"after\">\r\n  <div style=\"width: 250px\" class=\"client-menu-wrapper\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"row\">\r\n        <div class=\"col-sm-12\" (click)=\"$event.stopPropagation();\">\r\n          <input type=\"text\" class=\"search-input\" placeholder=\"Search Client\" [(ngModel)]=\"searchText\"/>\r\n        </div>\r\n        <div class=\"col-sm-12\">\r\n          <div class=\"mt-2 list-item-container\">\r\n            <div class=\"list-item text-truncate\" *ngFor=\"let item of toolbarData.clientList | search : searchText;let i = index\"\r\n                 [ngClass]=\"{'client-selected': item.selected}\"\r\n                 (click)=\"toggleSelect($event, item);\" mat-ripple>{{item.text}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n\r\n<!--Settings related menus end-->\r\n\r\n<sgh-notification-list *ngIf=\"toolbarData.isNotifNavCollapsed\"></sgh-notification-list>\r\n", styles: [".toolbar-main-wrapper{position:relative;box-shadow:var(--sgh-shadow, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06));z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--sgh-border-color, rgba(255, 255, 255, .1))}nav{display:flex;align-items:center;background:var(--sgh-toolbar-bg, rgba(255, 255, 255, .95));height:64px;position:relative;padding:0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}@supports (backdrop-filter: blur(10px)){nav{background:var(--sgh-toolbar-bg, rgba(255, 255, 255, .8));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.logo-wrapper{display:flex;align-items:center;flex-shrink:0;margin-right:2rem}.logo{height:32px;width:auto;object-fit:contain;transition:transform .2s ease}.logo:hover{transform:scale(1.05)}.icon{cursor:pointer;margin-left:.75rem;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;background:transparent;border:none}.icon i{color:var(--sgh-text-secondary, #64748b);font-size:1.125rem;transition:color .2s ease}.icon:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .1));transform:translateY(-1px);box-shadow:var(--sgh-shadow, 0 4px 12px rgba(0, 0, 0, .15))}.icon:hover i{color:var(--sgh-primary-color, #3b82f6)}.icon:active{transform:translateY(0);box-shadow:var(--sgh-shadow, 0 2px 4px rgba(0, 0, 0, .1))}.icon span{background:var(--sgh-error-color, #ef4444);padding:2px 6px;border-radius:10px;color:#fff;font-size:.75rem;font-weight:500;position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:2px solid var(--sgh-surface-color, white)}.icon img{width:20px;height:20px;border-radius:50%}.search{flex:1;max-width:400px;margin:0 2rem}.notifications h2{font-size:14px;padding:10px;border-bottom:1px solid #eee;color:#999}.notifications h2 span{color:red}.notifications-item{display:flex;border-bottom:1px solid #eee;padding:6px 9px;margin-bottom:0;cursor:pointer}.notifications-item:hover{background-color:#eee}.notifications-item img{display:block;width:50px;height:50px;margin-right:9px;border-radius:50%;margin-top:2px}.notifications-item .text h4{color:#777;font-size:16px;margin-top:3px}.notifications-item .text p{color:#aaa;font-size:12px}.box{width:280px;height:auto;background-color:#fff;border-radius:0;display:flex;align-items:center;padding:0;border-bottom:2px solid #005860}.box>i{font-size:20px;color:#777}.box>input{flex:1;height:35px;border:none;outline:none;font-size:14px;padding-left:10px}.box>button{background:transparent;border:none;cursor:pointer}.toggle-button{background:transparent;border:none;cursor:pointer;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);margin-right:1rem}.toggle-button i{color:var(--sgh-text-secondary, #64748b);font-size:1.125rem;transition:color .2s ease}.toggle-button:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .1));transform:translateY(-1px)}.toggle-button:hover i{color:var(--sgh-primary-color, #3b82f6)}.toggle-button:active{transform:translateY(0)}.search-wrapper{border-radius:20px;padding:13px;border:none;background:transparent;cursor:pointer}.search-wrapper i{color:#005860!important}.search-wrapper:hover{background:#0000000a!important}.logo{width:49%!important;padding:0 19px}.theme-list-wrapper,.profile-list-wrapper{width:300px!important}.notifications-list-wrapper{padding:10px;position:absolute;right:10px;top:45px;z-index:2;color:#000000de;width:450px}.notifications-list-wrapper .notifications-list{box-shadow:0 2px 10px #00000026;position:relative}.notifications-list-wrapper .notifications-list .notifications-title{background-color:#fff;text-align:center;padding:20px 10px;border-bottom:1px solid #f1f1f3}.notifications-list-wrapper .notifications-list .notifications-list-item{padding:10px;background-color:#fff;border-bottom:1px solid #f1f1f3;font-size:14px}.notifications-list-wrapper .notifications-list .notifications-list-item .item-title{margin:0;white-space:normal}.notifications-list-wrapper .notifications-list .notifications-list-item .item-description{margin:0;color:#000000de;opacity:.5;white-space:normal}.notifications-list-wrapper .notifications-list .see-all{background-color:#fff;color:#006068;font-weight:500}@media screen and (max-width: 599px){.notifications-list-wrapper{width:auto}}.notifications-list-wrapper{-webkit-animation:cardAnim 1s cubic-bezier(.33,1,.68,1) 0s 1 normal none;animation:cardAnim 1s cubic-bezier(.33,1,.68,1) 0s 1 normal none}@keyframes cardAnim{0%{opacity:0;transform:rotateX(-100deg);transform-origin:top}to{opacity:1;transform:rotateX(0);transform-origin:top}}select{padding:10px 20px;border-radius:5px;width:100%;margin:3% 10%;border:1px solid #005860}select:focus{outline:none}.form{width:100%;position:relative;height:40px;display:flex;align-items:center;background:var(--sgh-search-bg, rgba(248, 250, 252, .8));border:1px solid var(--sgh-border-color, #e2e8f0);border-radius:12px;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.form:hover{border-color:var(--sgh-primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.form:focus-within{border-color:var(--sgh-primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a;background:var(--sgh-surface-color, white)}.form input{width:100%;height:100%;color:var(--sgh-text-primary, #1e293b);padding:0 12px;border:none;background:transparent;font-size:.875rem;outline:none}.form input::placeholder{color:var(--sgh-text-muted, #94a3b8);transition:opacity .3s ease}.form input:focus::placeholder{opacity:.7}.form label{position:absolute;top:50%;left:12px;transform:translateY(-50%);pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);color:var(--sgh-text-muted, #94a3b8);font-size:.875rem;background:transparent;padding:0 4px}.content-name{transition:all .3s cubic-bezier(.4,0,.2,1)}.form input:focus+.label-name .content-name,.form input:valid+.label-name .content-name{transform:translateY(-120%);font-size:.75rem;color:var(--sgh-primary-color, #3b82f6);background:var(--sgh-surface-color, white);padding:0 4px}.search-wrapper{background:transparent;border:none;cursor:pointer;padding:8px 12px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;border-radius:8px;margin-right:4px}.search-wrapper i{color:var(--sgh-text-muted, #94a3b8);font-size:1rem;transition:color .2s ease}.search-wrapper:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .1))}.search-wrapper:hover i{color:var(--sgh-primary-color, #3b82f6)}.radio{display:block;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left}.radio+.radio{margin-top:12px}.radio input{display:none}.radio input+span{display:inline-block;position:relative;padding-left:30px}.radio input+span:before{content:\"\";display:block;position:absolute;top:0;left:0;border-radius:50%;margin-right:5px;width:16px;height:16px;border:1px solid #ccc;background:#fff}.radio input+span:after{content:\"\";display:block;width:11px;height:11px;background:#005860;position:absolute;border-radius:50%;top:3px;left:3px;opacity:0;transform:scale(0);transition:all .2s cubic-bezier(.64,.57,.67,1.53)}.radio input:checked+span:after{opacity:1;transform:scale(1)}.client-menu-wrapper .container-fluid{padding-right:15px;padding-left:15px;margin:10px}.client-menu-wrapper .container-fluid .row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px;flex-direction:column}.client-menu-wrapper .container-fluid .row .search-input{width:100%;box-sizing:border-box;display:block;padding:.375rem .75rem;font-size:12px;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.client-menu-wrapper .container-fluid .row .search-input:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.client-menu-wrapper .container-fluid .row .list-item-container{border:.5px rgba(0,0,0,.12) solid;margin-top:5px;border-radius:5px;overflow:hidden}.client-menu-wrapper .container-fluid .row .list-item-container .mat-ripple{padding:8px;font-size:12px}.client-menu-wrapper .container-fluid .row .list-item-container .mat-ripple:hover{background:#76767642;cursor:pointer;transition:all .3s ease 0s}.client-menu-wrapper .container-fluid .row .list-item-container .client-selected{color:#fff;background-color:#005860}@media screen and (max-width: 600px){.search{display:none}.logo-wrapper{width:30%}.logo-wrapper .logo{width:78%!important;padding:9px}.sgh-sidebar{z-index:1!important;position:absolute!important;background:#fff!important}.icon{cursor:pointer;margin-right:0;margin-left:34px}.toggle-button{order:-1}.logo-wrapper,.icon{order:1}#toolBarWrapper{padding:0 15px;justify-content:space-between}}@media screen and (min-width: 1900px){.logo{width:29%!important;padding:0 35px}}\n"] }]
+                    ], standalone: false, template: "<header class=\"sgh-toolbar\" [style.background-color]=\"toolbarData.bgColor\" id=\"toolBarWrapper\" role=\"banner\">\r\n  <nav class=\"toolbar-main-wrapper\">\r\n    <!-- Left Section -->\r\n    <div class=\"toolbar-left-section\">\r\n      <!-- Logo -->\r\n      <div class=\"toolbar-logo\">\r\n        <img class=\"logo-image\" [src]=\"toolbarData.img\" alt=\"Application Logo\"/>\r\n      </div>\r\n\r\n      <!-- Menu Toggle -->\r\n      <button class=\"toolbar-menu-toggle\"\r\n              (click)=\"toggleSidebar()\"\r\n              aria-label=\"Toggle navigation menu\"\r\n              title=\"Toggle Menu\">\r\n        <i class=\"fa fa-bars\"></i>\r\n      </button>\r\n\r\n      <!-- Search Bar -->\r\n      <div class=\"toolbar-search\" *ngIf=\"toolbarData.searchEnable\">\r\n        <form class=\"search-form\" (submit)=\"$event.preventDefault()\">\r\n          <div class=\"search-input-wrapper\">\r\n            <i class=\"fa fa-search search-icon\"></i>\r\n            <input type=\"search\"\r\n                   class=\"search-input\"\r\n                   placeholder=\"Search...\"\r\n                   autocomplete=\"off\"\r\n                   aria-label=\"Search\"/>\r\n            <button type=\"submit\" class=\"search-submit\" aria-label=\"Submit search\">\r\n              <i class=\"fa fa-arrow-right\"></i>\r\n            </button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Right Section -->\r\n    <div class=\"toolbar-right-section\">\r\n      <!-- Notification Button -->\r\n      <button *ngIf=\"toolbarData.notificationEnable\"\r\n              class=\"toolbar-action-btn notification-btn\"\r\n              (click)=\"toggleNotificationList()\"\r\n              aria-label=\"View notifications\"\r\n              title=\"Notifications\">\r\n        <i class=\"fa fa-bell\"></i>\r\n        <span class=\"notification-badge\" *ngIf=\"true\">3</span>\r\n      </button>\r\n\r\n      <!-- Settings Button -->\r\n      <button *ngIf=\"toolbarData.settingsEnable\"\r\n              class=\"toolbar-action-btn settings-btn\"\r\n              [matMenuTriggerFor]=\"settingsMenu\"\r\n              aria-label=\"Open settings\"\r\n              title=\"Settings\">\r\n        <i class=\"fa fa-cog\"></i>\r\n      </button>\r\n\r\n      <!-- User Profile Button -->\r\n      <button *ngIf=\"toolbarData.profileEnable\"\r\n              class=\"toolbar-action-btn profile-btn\"\r\n              (click)=\"clickProfile()\"\r\n              aria-label=\"View profile\"\r\n              title=\"Profile\">\r\n        <i class=\"fa fa-user-circle\"></i>\r\n      </button>\r\n    </div>\r\n  </nav>\r\n</header>\r\n\r\n<!-- Profile Dropdown -->\r\n<div *ngIf=\"toolbarData.profileView\" class=\"toolbar-dropdown profile-dropdown\" @fadeInOut>\r\n  <div class=\"dropdown-card\">\r\n    <div class=\"dropdown-content\">\r\n      <div [innerHTML]=\"toolbarData.profileContent\"></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Settings Menu -->\r\n<mat-menu #settingsMenu=\"matMenu\" xPosition=\"before\" class=\"sgh-settings-menu\">\r\n  <button mat-menu-item\r\n          [matMenuTriggerFor]=\"appConfig\"\r\n          *ngIf=\"toolbarData.applicationConfigurationEnable\"\r\n          class=\"menu-item-with-icon\">\r\n    <i class=\"fa fa-paint-brush menu-icon\"></i>\r\n    <span>Application Settings</span>\r\n  </button>\r\n  <button mat-menu-item\r\n          [matMenuTriggerFor]=\"clientConfig\"\r\n          *ngIf=\"toolbarData.clientConfigurationEnable\"\r\n          #clientMenuTrigger\r\n          class=\"menu-item-with-icon\">\r\n    <i class=\"fa fa-building menu-icon\"></i>\r\n    <span>Client Settings</span>\r\n  </button>\r\n</mat-menu>\r\n\r\n<!-- Application Configuration Menu -->\r\n<mat-menu #appConfig=\"matMenu\" xPosition=\"after\" class=\"sgh-app-config-menu\">\r\n  <div class=\"theme-menu-header\">\r\n    <i class=\"fa fa-palette\"></i>\r\n    <span>Choose Theme</span>\r\n  </div>\r\n  <div *ngFor=\"let themeoption of toolbarData.themeOptions\" class=\"theme-option-wrapper\">\r\n    <button mat-menu-item class=\"theme-radio-option\" (click)=\"onRadioClick(themeoption.value)\">\r\n      <div class=\"radio-button\">\r\n        <input value=\"{{themeoption.value}}\"\r\n               name=\"radio\"\r\n               type=\"radio\"\r\n               [checked]=\"selected === themeoption.value\"\r\n               [ngModel]=\"selected\"\r\n               (ngModelChange)=\"setClass($event)\">\r\n        <span class=\"radio-label\">{{themeoption.name}}</span>\r\n      </div>\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n\r\n<!-- Client Configuration Menu -->\r\n<mat-menu #clientConfig=\"matMenu\" xPosition=\"after\" class=\"sgh-client-config-menu\">\r\n  <div class=\"client-menu-container\">\r\n    <div class=\"client-menu-header\">\r\n      <i class=\"fa fa-building\"></i>\r\n      <span>Select Client</span>\r\n    </div>\r\n    <div class=\"client-search-wrapper\" (click)=\"$event.stopPropagation();\">\r\n      <i class=\"fa fa-search search-icon\"></i>\r\n      <input type=\"text\"\r\n             class=\"client-search-input\"\r\n             placeholder=\"Search clients...\"\r\n             [(ngModel)]=\"searchText\"\r\n             autocomplete=\"off\"/>\r\n    </div>\r\n    <div class=\"client-list-container\">\r\n      <div class=\"client-list-item\"\r\n           *ngFor=\"let item of toolbarData.clientList | search : searchText; let i = index\"\r\n           [class.selected]=\"item.selected\"\r\n           (click)=\"toggleSelect($event, item);\"\r\n           mat-ripple>\r\n        <i class=\"fa fa-check-circle check-icon\" *ngIf=\"item.selected\"></i>\r\n        <span class=\"client-name\">{{item.text}}</span>\r\n      </div>\r\n      <div class=\"no-results\" *ngIf=\"(toolbarData.clientList | search : searchText)?.length === 0\">\r\n        <i class=\"fa fa-search\"></i>\r\n        <span>No clients found</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</mat-menu>\r\n\r\n<sgh-notification-list *ngIf=\"toolbarData.isNotifNavCollapsed\"></sgh-notification-list>\r\n", styles: [".sgh-toolbar{position:sticky;top:0;z-index:1000;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;background:var(--sgh-toolbar-bg, rgba(255, 255, 255, .95));border-bottom:1px solid var(--sgh-border-color, #e2e8f0)}@supports (backdrop-filter: blur(10px)){.sgh-toolbar{background:var(--sgh-toolbar-bg, rgba(255, 255, 255, .85));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.toolbar-main-wrapper{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 1.5rem;max-width:100%;margin:0 auto;transition:all .3s cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.toolbar-main-wrapper{height:56px;padding:0 1rem}}.toolbar-left-section{display:flex;align-items:center;gap:5rem;min-width:0}.toolbar-logo{display:flex;align-items:center;flex-shrink:0}.toolbar-logo .logo-image{height:42px;width:auto;max-width:200px;object-fit:contain;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.05))}.toolbar-logo .logo-image:hover{transform:scale(1.02);filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.toolbar-logo .logo-image:active{transform:scale(.98)}.toolbar-menu-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:none;border-radius:12px;background:transparent;color:var(--sgh-text-secondary, #64748b);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);flex-shrink:0}.toolbar-menu-toggle i{font-size:1.25rem;transition:all .15s cubic-bezier(.4,0,.2,1)}.toolbar-menu-toggle:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08));color:var(--sgh-primary-color, #3b82f6);transform:translateY(-1px)}.toolbar-menu-toggle:hover i{transform:scale(1.1)}.toolbar-menu-toggle:active{transform:translateY(0) scale(.95)}.toolbar-menu-toggle:focus-visible{outline:2px solid var(--sgh-primary-color, #3b82f6);outline-offset:2px}.toolbar-search{flex:1;max-width:600px;margin:0 1rem}@media (max-width: 1024px){.toolbar-search{max-width:400px}}.search-form{width:100%}.search-input-wrapper{position:relative;display:flex;align-items:center;height:42px;background:var(--sgh-search-bg, #f8fafc);border:1.5px solid transparent;border-radius:12px;transition:all .15s cubic-bezier(.4,0,.2,1);overflow:hidden}.search-input-wrapper:hover{background:var(--sgh-surface-color, #ffffff);border-color:#3b82f633;box-shadow:0 0 0 3px #3b82f60d}.search-input-wrapper:focus-within{background:var(--sgh-surface-color, #ffffff);border-color:var(--sgh-primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.search-input-wrapper .search-icon{position:absolute;left:14px;color:var(--sgh-text-muted, #94a3b8);font-size:1rem;transition:all .15s cubic-bezier(.4,0,.2,1);pointer-events:none}.search-input-wrapper .search-input{flex:1;height:100%;padding:0 12px 0 42px;border:none;background:transparent;color:var(--sgh-text-primary, #1e293b);font-size:.9375rem;font-weight:400;outline:none}.search-input-wrapper .search-input::placeholder{color:var(--sgh-text-muted, #94a3b8);font-weight:400}.search-input-wrapper .search-input:focus::placeholder{opacity:.6}.search-input-wrapper .search-input:focus~.search-icon{color:var(--sgh-primary-color, #3b82f6)}.search-input-wrapper .search-submit{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-right:3px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--sgh-text-muted, #94a3b8);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}.search-input-wrapper .search-submit i{font-size:.875rem;transition:all .15s cubic-bezier(.4,0,.2,1)}.search-input-wrapper .search-submit:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08));color:var(--sgh-primary-color, #3b82f6)}.search-input-wrapper .search-submit:hover i{transform:translate(2px)}.search-input-wrapper .search-submit:active{transform:scale(.95)}.toolbar-right-section{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.toolbar-action-btn{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border:none;border-radius:12px;background:transparent;color:var(--sgh-text-secondary, #64748b);cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);flex-shrink:0}.toolbar-action-btn i{font-size:1.125rem;transition:all .15s cubic-bezier(.4,0,.2,1)}.toolbar-action-btn:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08));color:var(--sgh-primary-color, #3b82f6);transform:translateY(-1px);box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.toolbar-action-btn:hover i{transform:scale(1.1)}.toolbar-action-btn:active{transform:translateY(0) scale(.95);box-shadow:none}.toolbar-action-btn:focus-visible{outline:2px solid var(--sgh-primary-color, #3b82f6);outline-offset:2px}.toolbar-action-btn .notification-badge{position:absolute;top:6px;right:6px;display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:linear-gradient(135deg,#ef4444,#dc2626);border:2px solid var(--sgh-surface-color, #ffffff);border-radius:10px;color:#fff;font-size:.625rem;font-weight:700;line-height:1;box-shadow:0 2px 4px #00000026;animation:pulse 2s infinite}.toolbar-action-btn.notification-btn:hover .notification-badge{animation:none;transform:scale(1.1)}.toolbar-action-btn.profile-btn i{font-size:1.3rem}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}.toolbar-dropdown{position:absolute;top:72px;right:1.5rem;z-index:1001;min-width:320px;max-width:400px;animation:dropdownSlideIn .25s cubic-bezier(.4,0,.2,1)}@media (max-width: 768px){.toolbar-dropdown{top:64px;right:1rem;left:1rem;max-width:none}}.dropdown-card{background:var(--sgh-surface-color, #ffffff);border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid var(--sgh-border-color, #e2e8f0);overflow:hidden}@supports (backdrop-filter: blur(10px)){.dropdown-card{background:var(--sgh-surface-color, rgba(255, 255, 255, .95));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.dropdown-content{padding:1rem}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}::ng-deep .sgh-settings-menu .mat-mdc-menu-panel,::ng-deep .sgh-app-config-menu .mat-mdc-menu-panel,::ng-deep .sgh-client-config-menu .mat-mdc-menu-panel{min-width:240px;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border:1px solid var(--sgh-border-color, #e2e8f0);overflow:hidden}::ng-deep .sgh-settings-menu .mat-mdc-menu-content,::ng-deep .sgh-app-config-menu .mat-mdc-menu-content,::ng-deep .sgh-client-config-menu .mat-mdc-menu-content{padding:.5rem;background-color:#fff}::ng-deep .sgh-settings-menu .mat-mdc-menu-item,::ng-deep .sgh-app-config-menu .mat-mdc-menu-item,::ng-deep .sgh-client-config-menu .mat-mdc-menu-item{border-radius:8px;margin-bottom:2px;min-height:42px;padding:0 12px;transition:all .15s cubic-bezier(.4,0,.2,1)}::ng-deep .sgh-settings-menu .mat-mdc-menu-item:hover,::ng-deep .sgh-app-config-menu .mat-mdc-menu-item:hover,::ng-deep .sgh-client-config-menu .mat-mdc-menu-item:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08))}::ng-deep .sgh-settings-menu .mat-mdc-menu-item.menu-item-with-icon,::ng-deep .sgh-app-config-menu .mat-mdc-menu-item.menu-item-with-icon,::ng-deep .sgh-client-config-menu .mat-mdc-menu-item.menu-item-with-icon{display:flex;align-items:center;gap:12px}::ng-deep .sgh-settings-menu .mat-mdc-menu-item.menu-item-with-icon .menu-icon,::ng-deep .sgh-app-config-menu .mat-mdc-menu-item.menu-item-with-icon .menu-icon,::ng-deep .sgh-client-config-menu .mat-mdc-menu-item.menu-item-with-icon .menu-icon{color:var(--sgh-text-secondary, #64748b);font-size:1rem;width:20px;text-align:center}.theme-menu-header{display:flex;align-items:center;gap:8px;padding:12px 16px 8px;color:var(--sgh-text-primary, #1e293b);font-weight:600;font-size:.9375rem;border-bottom:1px solid var(--sgh-border-color, #e2e8f0);margin-bottom:8px}.theme-menu-header i{color:var(--sgh-primary-color, #3b82f6);font-size:1rem}.theme-option-wrapper{padding:0 8px}.theme-radio-option{width:100%;border-radius:8px;padding:8px 12px!important}.theme-radio-option .radio-button{display:flex;align-items:center;gap:12px;width:100%}.theme-radio-option .radio-button input[type=radio]{appearance:none;width:18px;height:18px;border:2px solid var(--sgh-border-color, #e2e8f0);border-radius:50%;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;flex-shrink:0}.theme-radio-option .radio-button input[type=radio]:checked{border-color:var(--sgh-primary-color, #3b82f6)}.theme-radio-option .radio-button input[type=radio]:checked:before{content:\"\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:var(--sgh-primary-color, #3b82f6);border-radius:50%}.theme-radio-option .radio-button input[type=radio]:hover{border-color:var(--sgh-primary-color, #3b82f6)}.theme-radio-option .radio-button .radio-label{flex:1;color:var(--sgh-text-primary, #1e293b);font-size:.9375rem;-webkit-user-select:none;user-select:none}.client-menu-container{max-width:calc(100vw - 2rem)}.client-menu-header{display:flex;align-items:center;gap:8px;padding:12px 16px;color:var(--sgh-text-primary, #1e293b);font-weight:600;font-size:.9375rem;border-bottom:1px solid var(--sgh-border-color, #e2e8f0);background:var(--sgh-surface-color, #f8fafc)}.client-menu-header i{color:var(--sgh-primary-color, #3b82f6);font-size:1rem}.client-search-wrapper{position:relative;padding:12px 16px;border-bottom:1px solid var(--sgh-border-color, #e2e8f0)}.client-search-wrapper .search-icon{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--sgh-text-muted, #94a3b8);font-size:.875rem;pointer-events:none}.client-search-wrapper .client-search-input{height:36px;padding:0 12px 0 32px;border:1.5px solid var(--sgh-border-color, #e2e8f0);border-radius:8px;background:var(--sgh-surface-color, #ffffff);color:var(--sgh-text-primary, #1e293b);font-size:.875rem;outline:none;transition:all .15s cubic-bezier(.4,0,.2,1)}.client-search-wrapper .client-search-input::placeholder{color:var(--sgh-text-muted, #94a3b8)}.client-search-wrapper .client-search-input:focus{border-color:var(--sgh-primary-color, #3b82f6);box-shadow:0 0 0 3px #3b82f61a}.client-list-container{max-height:320px;overflow-y:auto;padding:8px}.client-list-container::-webkit-scrollbar{width:6px}.client-list-container::-webkit-scrollbar-track{background:transparent}.client-list-container::-webkit-scrollbar-thumb{background:#0000001a;border-radius:3px}.client-list-container::-webkit-scrollbar-thumb:hover{background:#0003}.client-list-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative}.client-list-item .check-icon{color:var(--sgh-primary-color, #3b82f6);font-size:1rem;flex-shrink:0}.client-list-item .client-name{flex:1;color:var(--sgh-text-primary, #1e293b);font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.client-list-item:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .08))}.client-list-item.selected{background:#3b82f61a}.client-list-item.selected .client-name{color:var(--sgh-primary-color, #3b82f6);font-weight:500}.no-results{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;color:var(--sgh-text-muted, #94a3b8);text-align:center}.no-results i{font-size:2rem;margin-bottom:.5rem;opacity:.5}.no-results span{font-size:.875rem}@media (max-width: 1024px){.toolbar-search{max-width:300px}}@media (max-width: 768px){.toolbar-search{display:none}.toolbar-left-section{gap:.5rem}.toolbar-logo .logo-image{height:36px;max-width:140px}.toolbar-menu-toggle,.toolbar-action-btn{width:40px;height:40px}.toolbar-menu-toggle i,.toolbar-action-btn i{font-size:1.125rem}.toolbar-action-btn .notification-badge{top:4px;right:4px}.toolbar-right-section{gap:.25rem}}@media (min-width: 1440px){.toolbar-main-wrapper{max-width:1400px}}@media (min-width: 1920px){.toolbar-main-wrapper{max-width:100%}.toolbar-logo .logo-image{height:48px;max-width:240px}.toolbar-search{max-width:700px}}@media (prefers-color-scheme: dark){.sgh-toolbar{--sgh-toolbar-bg: rgba(15, 23, 42, .95);--sgh-surface-color: #1e293b;--sgh-text-primary: #f1f5f9;--sgh-text-secondary: #94a3b8;--sgh-text-muted: #64748b;--sgh-border-color: #334155;--sgh-search-bg: #0f172a;--sgh-hover-bg: rgba(59, 130, 246, .15)}}@media print{.sgh-toolbar{display:none}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){.toolbar-action-btn,.toolbar-menu-toggle{border:1px solid currentColor}}:focus-visible{outline:2px solid var(--sgh-primary-color, #3b82f6);outline-offset:2px}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: SghNavbarService }], propDecorators: { expanded: [{
                 type: Input
             }], toggleSidebarEvent: [{
@@ -996,58 +996,58 @@ class BreadcrumbComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BreadcrumbComponent, isStandalone: false, selector: "sgh-breadcrumb", inputs: { customBreadcrumbs: "customBreadcrumbs" }, ngImport: i0, template: `
-    <nav class="sgh-breadcrumb" aria-label="breadcrumb" *ngIf="breadcrumbs$ | async as breadcrumbs">
-      <ol class="breadcrumb-list">
-        <li class="breadcrumb-item home-item">
-          <a [routerLink]="'/'" class="breadcrumb-link">
-            <i class="fa fa-home" aria-hidden="true"></i>
-            <span class="sr-only">Home</span>
-          </a>
-        </li>
-        <li class="breadcrumb-item" 
-            *ngFor="let item of breadcrumbs; let last = last"
-            [class.active]="last">
-          <i class="fa fa-angle-right breadcrumb-separator" aria-hidden="true"></i>
-          <a *ngIf="!last" [routerLink]="item.routeLink" class="breadcrumb-link">
-            <i *ngIf="item.icon" class="fa fa-{{item.icon}}" aria-hidden="true"></i>
-            {{ item.label }}
-          </a>
-          <span *ngIf="last" class="breadcrumb-current">
-            <i *ngIf="item.icon" class="fa fa-{{item.icon}}" aria-hidden="true"></i>
-            {{ item.label }}
-          </span>
-        </li>
-      </ol>
-    </nav>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BreadcrumbComponent, isStandalone: false, selector: "sgh-breadcrumb", inputs: { customBreadcrumbs: "customBreadcrumbs" }, ngImport: i0, template: `
+    <nav class="sgh-breadcrumb" aria-label="breadcrumb" *ngIf="breadcrumbs$ | async as breadcrumbs">
+      <ol class="breadcrumb-list">
+        <li class="breadcrumb-item home-item">
+          <a [routerLink]="'/'" class="breadcrumb-link">
+            <i class="fa fa-home" aria-hidden="true"></i>
+            <span class="sr-only">Home</span>
+          </a>
+        </li>
+        <li class="breadcrumb-item" 
+            *ngFor="let item of breadcrumbs; let last = last"
+            [class.active]="last">
+          <i class="fa fa-angle-right breadcrumb-separator" aria-hidden="true"></i>
+          <a *ngIf="!last" [routerLink]="item.routeLink" class="breadcrumb-link">
+            <i *ngIf="item.icon" class="fa fa-{{item.icon}}" aria-hidden="true"></i>
+            {{ item.label }}
+          </a>
+          <span *ngIf="last" class="breadcrumb-current">
+            <i *ngIf="item.icon" class="fa fa-{{item.icon}}" aria-hidden="true"></i>
+            {{ item.label }}
+          </span>
+        </li>
+      </ol>
+    </nav>
   `, isInline: true, styles: [".sgh-breadcrumb{padding:.75rem 0}.sgh-breadcrumb .breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;font-size:.875rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item{display:flex;align-items:center}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.home-item .breadcrumb-link{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--sgh-primary-color, #3b82f6);color:#fff;text-decoration:none;transition:all .2s ease}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.home-item .breadcrumb-link:hover{background:var(--sgh-primary-hover, #2563eb);transform:translateY(-1px);box-shadow:var(--sgh-shadow, 0 4px 12px rgba(59, 130, 246, .25))}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.home-item .breadcrumb-link i{font-size:.875rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-separator{margin:0 .75rem;color:var(--sgh-text-muted, #94a3b8);font-size:.75rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-link{color:var(--sgh-primary-color, #3b82f6);text-decoration:none;font-weight:500;padding:.375rem .75rem;border-radius:6px;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-link:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .1));color:var(--sgh-primary-hover, #2563eb);transform:translateY(-1px)}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-link i{font-size:.875rem;opacity:.8}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-current{color:var(--sgh-text-primary, #1e293b);font-weight:600;padding:.375rem .75rem;background:var(--sgh-surface-color, #f8fafc);border-radius:6px;display:flex;align-items:center;gap:.5rem;border:1px solid var(--sgh-border-color, #e2e8f0)}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-current i{font-size:.875rem;color:var(--sgh-primary-color, #3b82f6)}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.active .breadcrumb-current{background:var(--sgh-primary-color, #3b82f6);color:#fff;border-color:var(--sgh-primary-color, #3b82f6)}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.active .breadcrumb-current i{color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.sgh-breadcrumb .breadcrumb-list{font-size:.8125rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-separator{margin:0 .5rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-link,.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-current{padding:.25rem .5rem;font-size:.8125rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.home-item .breadcrumb-link{width:28px;height:28px}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.home-item .breadcrumb-link i{font-size:.8125rem}}:host-context(.sgh-dark-theme) .sgh-breadcrumb .breadcrumb-item .breadcrumb-current{background:var(--sgh-surface-color, #1e293b);color:var(--sgh-text-primary, #f1f5f9);border-color:var(--sgh-border-color, #334155)}\n"], dependencies: [{ 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: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sgh-breadcrumb', template: `
-    <nav class="sgh-breadcrumb" aria-label="breadcrumb" *ngIf="breadcrumbs$ | async as breadcrumbs">
-      <ol class="breadcrumb-list">
-        <li class="breadcrumb-item home-item">
-          <a [routerLink]="'/'" class="breadcrumb-link">
-            <i class="fa fa-home" aria-hidden="true"></i>
-            <span class="sr-only">Home</span>
-          </a>
-        </li>
-        <li class="breadcrumb-item" 
-            *ngFor="let item of breadcrumbs; let last = last"
-            [class.active]="last">
-          <i class="fa fa-angle-right breadcrumb-separator" aria-hidden="true"></i>
-          <a *ngIf="!last" [routerLink]="item.routeLink" class="breadcrumb-link">
-            <i *ngIf="item.icon" class="fa fa-{{item.icon}}" aria-hidden="true"></i>
-            {{ item.label }}
-          </a>
-          <span *ngIf="last" class="breadcrumb-current">
-            <i *ngIf="item.icon" class="fa fa-{{item.icon}}" aria-hidden="true"></i>
-            {{ item.label }}
-          </span>
-        </li>
-      </ol>
-    </nav>
+            args: [{ selector: 'sgh-breadcrumb', template: `
+    <nav class="sgh-breadcrumb" aria-label="breadcrumb" *ngIf="breadcrumbs$ | async as breadcrumbs">
+      <ol class="breadcrumb-list">
+        <li class="breadcrumb-item home-item">
+          <a [routerLink]="'/'" class="breadcrumb-link">
+            <i class="fa fa-home" aria-hidden="true"></i>
+            <span class="sr-only">Home</span>
+          </a>
+        </li>
+        <li class="breadcrumb-item" 
+            *ngFor="let item of breadcrumbs; let last = last"
+            [class.active]="last">
+          <i class="fa fa-angle-right breadcrumb-separator" aria-hidden="true"></i>
+          <a *ngIf="!last" [routerLink]="item.routeLink" class="breadcrumb-link">
+            <i *ngIf="item.icon" class="fa fa-{{item.icon}}" aria-hidden="true"></i>
+            {{ item.label }}
+          </a>
+          <span *ngIf="last" class="breadcrumb-current">
+            <i *ngIf="item.icon" class="fa fa-{{item.icon}}" aria-hidden="true"></i>
+            {{ item.label }}
+          </span>
+        </li>
+      </ol>
+    </nav>
   `, standalone: false, styles: [".sgh-breadcrumb{padding:.75rem 0}.sgh-breadcrumb .breadcrumb-list{display:flex;align-items:center;list-style:none;margin:0;padding:0;font-size:.875rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item{display:flex;align-items:center}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.home-item .breadcrumb-link{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--sgh-primary-color, #3b82f6);color:#fff;text-decoration:none;transition:all .2s ease}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.home-item .breadcrumb-link:hover{background:var(--sgh-primary-hover, #2563eb);transform:translateY(-1px);box-shadow:var(--sgh-shadow, 0 4px 12px rgba(59, 130, 246, .25))}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.home-item .breadcrumb-link i{font-size:.875rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-separator{margin:0 .75rem;color:var(--sgh-text-muted, #94a3b8);font-size:.75rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-link{color:var(--sgh-primary-color, #3b82f6);text-decoration:none;font-weight:500;padding:.375rem .75rem;border-radius:6px;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-link:hover{background:var(--sgh-hover-bg, rgba(59, 130, 246, .1));color:var(--sgh-primary-hover, #2563eb);transform:translateY(-1px)}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-link i{font-size:.875rem;opacity:.8}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-current{color:var(--sgh-text-primary, #1e293b);font-weight:600;padding:.375rem .75rem;background:var(--sgh-surface-color, #f8fafc);border-radius:6px;display:flex;align-items:center;gap:.5rem;border:1px solid var(--sgh-border-color, #e2e8f0)}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-current i{font-size:.875rem;color:var(--sgh-primary-color, #3b82f6)}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.active .breadcrumb-current{background:var(--sgh-primary-color, #3b82f6);color:#fff;border-color:var(--sgh-primary-color, #3b82f6)}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.active .breadcrumb-current i{color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width: 768px){.sgh-breadcrumb .breadcrumb-list{font-size:.8125rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-separator{margin:0 .5rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-link,.sgh-breadcrumb .breadcrumb-list .breadcrumb-item .breadcrumb-current{padding:.25rem .5rem;font-size:.8125rem}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.home-item .breadcrumb-link{width:28px;height:28px}.sgh-breadcrumb .breadcrumb-list .breadcrumb-item.home-item .breadcrumb-link i{font-size:.8125rem}}:host-context(.sgh-dark-theme) .sgh-breadcrumb .breadcrumb-item .breadcrumb-current{background:var(--sgh-surface-color, #1e293b);color:var(--sgh-text-primary, #f1f5f9);border-color:var(--sgh-border-color, #334155)}\n"] }]
         }], ctorParameters: () => [{ type: BreadcrumbService }], propDecorators: { customBreadcrumbs: [{
                 type: Input