tango-app-ui-shared 3.3.1-beta.50 → 3.3.1-beta.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/esm2022/lib/modules/layout/layout.module.mjs +6 -3
  2. package/esm2022/lib/modules/layout/toolbar/toolbar.component.mjs +31 -22
  3. package/esm2022/lib/modules/layout/toolbar/traffic-header/traffic-header/traffic-header.component.mjs +22 -60
  4. package/esm2022/lib/modules/layout/toolbar/trax-header/trax-header.component.mjs +785 -0
  5. package/fesm2022/{tango-app-ui-shared-intro.module-0F5I6zgS.mjs → tango-app-ui-shared-intro.module-D2ZCIIvP.mjs} +4 -4
  6. package/fesm2022/{tango-app-ui-shared-intro.module-0F5I6zgS.mjs.map → tango-app-ui-shared-intro.module-D2ZCIIvP.mjs.map} +1 -1
  7. package/fesm2022/{tango-app-ui-shared-notification.module-DrHpMc3M.mjs → tango-app-ui-shared-notification.module-DweHaB7D.mjs} +5 -5
  8. package/fesm2022/{tango-app-ui-shared-notification.module-DrHpMc3M.mjs.map → tango-app-ui-shared-notification.module-DweHaB7D.mjs.map} +1 -1
  9. package/fesm2022/tango-app-ui-shared.mjs +910 -164
  10. package/fesm2022/tango-app-ui-shared.mjs.map +1 -1
  11. package/lib/modules/layout/layout.module.d.ts +11 -10
  12. package/lib/modules/layout/toolbar/toolbar.component.d.ts +2 -1
  13. package/lib/modules/layout/toolbar/trax-header/trax-header.component.d.ts +80 -0
  14. package/package.json +1 -1
package/fesm2022/tango-app-ui-shared.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Injectable, Component, Input, Pipe, HostListener, HostBinding, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, NgModule, inject } from '@angular/core';
3
- import * as i1 from '@angular/router';
3
+ import * as i2 from '@angular/router';
4
4
  import { NavigationEnd, NavigationCancel, ResolveEnd, NavigationStart, Router, RouterModule } from '@angular/router';
5
- import * as i1$1 from 'tango-app-ui-global';
5
+ import * as i1 from 'tango-app-ui-global';
6
6
  import { MenuComponent, ToggleComponent, ScrollTopComponent, DrawerComponent, StickyComponent, ScrollComponent, GlobalStateService } from 'tango-app-ui-global';
7
7
  import { BehaviorSubject, throwError, map, catchError, Subject, filter, takeUntil, debounceTime, take, tap, switchMap } from 'rxjs';
8
8
  import * as i3 from '@angular/common/http';
@@ -11,7 +11,7 @@ import Swal from 'sweetalert2';
11
11
  import * as i4 from '@angular/common';
12
12
  import { DatePipe, CommonModule } from '@angular/common';
13
13
  import { transition, style, animate, trigger } from '@angular/animations';
14
- import * as i2 from '@ng-bootstrap/ng-bootstrap';
14
+ import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
15
15
  import { NgbDropdownModule, NgbProgressbarModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
16
16
  import { filter as filter$1 } from 'rxjs/operators';
17
17
  import * as i3$1 from '@angular/platform-browser';
@@ -26,7 +26,7 @@ import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
26
26
  import crypto$1 from 'crypto-js';
27
27
  import * as i3$3 from 'ngx-pagination';
28
28
  import { NgxPaginationModule } from 'ngx-pagination';
29
- import * as i1$2 from '@ngx-translate/core';
29
+ import * as i1$1 from '@ngx-translate/core';
30
30
  import { TranslateModule } from '@ngx-translate/core';
31
31
  import { InlineSVGModule } from 'ng-inline-svg-2';
32
32
 
@@ -134,7 +134,7 @@ class AuthService {
134
134
  getBrandDetails(id) {
135
135
  return this.http.get(`${this.clientApiUrl}/client-details/${id}`);
136
136
  }
137
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuthService, deps: [{ token: i1.Router }, { token: i1$1.GlobalStateService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
137
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuthService, deps: [{ token: i2.Router }, { token: i1.GlobalStateService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
138
138
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuthService, providedIn: 'root' });
139
139
  }
140
140
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuthService, decorators: [{
@@ -142,7 +142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
142
142
  args: [{
143
143
  providedIn: 'root'
144
144
  }]
145
- }], ctorParameters: () => [{ type: i1.Router }, { type: i1$1.GlobalStateService }, { type: i3.HttpClient }] });
145
+ }], ctorParameters: () => [{ type: i2.Router }, { type: i1.GlobalStateService }, { type: i3.HttpClient }] });
146
146
 
147
147
  class ToastService {
148
148
  constructor() { }
@@ -232,13 +232,13 @@ class HeaderMenuComponent {
232
232
  ngOnDestroy() {
233
233
  this.unsubscribe.forEach((sb) => sb.unsubscribe());
234
234
  }
235
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: i1$1.PageInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
235
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: i1.PageInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
236
236
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderMenuComponent, selector: "lib-header-menu", inputs: { appPageTitleDirection: "appPageTitleDirection", appPageTitleDescription: "appPageTitleDescription" }, ngImport: i0, template: "<ng-container *ngIf=\"title$ | async as title\">\r\n <!-- begin::Title -->\r\n <h1 class=\"page-heading d-flex text-gray-900 fw-bold fs-3 my-0 flex-column justify-content-center\">\r\n {{ title }}\r\n <ng-container *ngIf=\"appPageTitleDescription\">\r\n <ng-container *ngIf=\"description$ | async as description\">\r\n\r\n\r\n <!--begin::Description-->\r\n <span class=\"page-desc text-muted fs-7 fw-semibold mt-2\" [ngClass]=\"{'pt-2': appPageTitleDirection === 'column'}\">\r\n <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n <!--begin::Separator-->\r\n <span class=\"h-20px border-1 border-gray-300 border-start ms-3 mx-2\"></span>\r\n <!--end::Separator-->\r\n </ng-container>\r\n\r\n {{description}}\r\n </span>\r\n <!--end::Description-->\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </h1>\r\n <!-- end::Title -->\r\n\r\n</ng-container>\r\n", styles: [":host{height:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
237
237
  }
238
238
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderMenuComponent, decorators: [{
239
239
  type: Component,
240
240
  args: [{ selector: 'lib-header-menu', template: "<ng-container *ngIf=\"title$ | async as title\">\r\n <!-- begin::Title -->\r\n <h1 class=\"page-heading d-flex text-gray-900 fw-bold fs-3 my-0 flex-column justify-content-center\">\r\n {{ title }}\r\n <ng-container *ngIf=\"appPageTitleDescription\">\r\n <ng-container *ngIf=\"description$ | async as description\">\r\n\r\n\r\n <!--begin::Description-->\r\n <span class=\"page-desc text-muted fs-7 fw-semibold mt-2\" [ngClass]=\"{'pt-2': appPageTitleDirection === 'column'}\">\r\n <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n <!--begin::Separator-->\r\n <span class=\"h-20px border-1 border-gray-300 border-start ms-3 mx-2\"></span>\r\n <!--end::Separator-->\r\n </ng-container>\r\n\r\n {{description}}\r\n </span>\r\n <!--end::Description-->\r\n </ng-container>\r\n\r\n </ng-container>\r\n\r\n </h1>\r\n <!-- end::Title -->\r\n\r\n</ng-container>\r\n", styles: [":host{height:inherit;width:inherit}\n"] }]
241
- }], ctorParameters: () => [{ type: i1$1.PageInfoService }, { type: i0.ChangeDetectorRef }], propDecorators: { appPageTitleDirection: [{
241
+ }], ctorParameters: () => [{ type: i1.PageInfoService }, { type: i0.ChangeDetectorRef }], propDecorators: { appPageTitleDirection: [{
242
242
  type: Input
243
243
  }], appPageTitleDescription: [{
244
244
  type: Input
@@ -300,7 +300,7 @@ class NotificationService {
300
300
  getdownloadlist(data) {
301
301
  return this.http.post(`${this.traxUrl}/downloads/downloadList`, data);
302
302
  }
303
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationService, deps: [{ token: i3.HttpClient }, { token: i1$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
303
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationService, deps: [{ token: i3.HttpClient }, { token: i1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
304
304
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationService, providedIn: 'root' });
305
305
  }
306
306
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationService, decorators: [{
@@ -308,7 +308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
308
308
  args: [{
309
309
  providedIn: 'root'
310
310
  }]
311
- }], ctorParameters: () => [{ type: i3.HttpClient }, { type: i1$1.GlobalStateService }] });
311
+ }], ctorParameters: () => [{ type: i3.HttpClient }, { type: i1.GlobalStateService }] });
312
312
 
313
313
  class CustomDateFormatPipe {
314
314
  transform(value, ...args) {
@@ -550,7 +550,7 @@ class NavbarComponent {
550
550
  this.showDropdown = false;
551
551
  }
552
552
  }
553
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavbarComponent, deps: [{ token: NotificationService }, { token: i1.Router }, { token: ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
553
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NavbarComponent, deps: [{ token: NotificationService }, { token: i2.Router }, { token: ToastService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
554
554
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NavbarComponent, selector: "lib-navbar", inputs: { appHeaderDefaulMenuDisplay: "appHeaderDefaulMenuDisplay", isRtl: "isRtl" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<!--begin::Notifications-->\r\n<div class=\"app-navbar-item\" [ngClass]=\"itemClass\" *ngIf=\"showNotification\">\r\n <!--begin::Menu- wrapper-->\r\n <div [ngClass]=\"btnClass\" (click)=\"showDropdown = !showDropdown\">\r\n <span *ngIf=\"!notification.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"24\" viewBox=\"0 0 20 24\" fill=\"none\">\r\n <path\r\n d=\"M10.6779 2.4V3.00688L11.2715 3.1335C14.1674 3.75125 16.3919 6.45842 16.3919 9.75V10.6313C16.3919 13.0131 17.2249 15.3087 18.7338 17.0963L18.7352 17.0979L19.0636 17.4846C19.0639 17.485 19.0642 17.4853 19.0645 17.4857C19.2557 17.7136 19.3048 18.0393 19.185 18.3174C19.0641 18.5983 18.8153 18.75 18.5704 18.75H1.42848C1.1825 18.75 0.933931 18.5974 0.815017 18.3193C0.695108 18.0388 0.744592 17.7123 0.933996 17.4853C0.934445 17.4848 0.934894 17.4843 0.935344 17.4837L1.26312 17.0985L1.26473 17.0966C2.77599 15.3086 3.60697 13.0127 3.60697 10.6313V9.75C3.60697 6.45434 5.79488 3.75145 8.72559 3.13388L9.32094 3.00843V2.4V1.5C9.32094 1.05052 9.65806 0.75 9.99944 0.75C10.3408 0.75 10.6779 1.05052 10.6779 1.5V2.4ZM9.99944 23.25C9.44983 23.25 8.91726 23.023 8.52034 22.6062C8.29649 22.3712 8.12457 22.0708 8.01769 21.75H11.9812C11.8743 22.0708 11.7024 22.3712 11.4785 22.6062C11.0856 23.0188 10.5146 23.25 9.99944 23.25Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"notification.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"24\" viewBox=\"0 0 20 24\" fill=\"none\">\r\n <path\r\n d=\"M11.4279 2.4V1.5C11.4279 0.671719 10.7896 0 9.99944 0C9.2093 0 8.57094 0.671719 8.57094 1.5V2.4C5.27202 3.09516 2.85697 6.12188 2.85697 9.75V10.6313C2.85697 12.8391 2.08648 14.9625 0.691915 16.6125L0.360862 17.0016C-0.0128805 17.4469 -0.10505 18.075 0.125384 18.6141C0.355818 19.1531 0.866013 19.5 1.42848 19.5H18.5704C19.1329 19.5 19.6418 19.1531 19.8739 18.6141C20.106 18.075 20.0123 17.4469 19.6373 17.0016L19.307 16.6125C17.9142 14.9625 17.1419 12.8391 17.1419 10.6313V9.75C17.1419 9.39947 17.119 9.05455 17.0746 8.71681C16.5845 8.8999 16.054 9 15.5 9C13.0147 9 11 6.98528 11 4.5C11 3.74877 11.1841 3.04054 11.5096 2.41795C11.4824 2.4118 11.4552 2.40582 11.4279 2.4Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M7.97723 23.1234C8.51291 23.6859 9.24055 24 9.99944 24C10.7181 24 11.486 23.6859 12.0216 23.1234C12.5573 22.5609 12.8564 21.7547 12.8564 21H7.14245C7.14245 21.7547 7.44154 22.5609 7.97723 23.1234Z\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"16\" cy=\"4\" r=\"4\" fill=\"#F04438\" />\r\n </svg>\r\n </span>\r\n <div class=\"menu menu-sub menu-sub-dropdown menu-column w-450px w-lg-425px notificationMenu\" *ngIf=\"showDropdown\">\r\n <div class=\"card topbar\">\r\n <div class=\"card-header\">\r\n <h3 class=\"title-notify mt-10 mb-6\">\r\n Notifications\r\n </h3>\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData && !loading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\" src=\"./assets/tango/Icons/noNotification.svg\" alt=\"\">\r\n <span class=\"notificationAlign mt-10\">No New Notification</span>\r\n <span class=\"noNotification mt-2\">Any new notification will be shown here.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"alertscroll\" *ngIf=\"notification.length\">\r\n <div *ngFor=\"let item of notification\" class=\"mh-200px ng-star-inserted\" style=\"overflow: auto;\">\r\n <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n version=\"1.1\" class=\"ng-star-inserted\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n <path\r\n d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n <path\r\n d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n </g>\r\n </svg></span></span></div>\r\n <div class=\"mb-0 me-2\" style=\"text-align: left;\">\r\n <div class=\"alert-title\">{{ item._source.title }}</div>\r\n <div class=\"alt-desc\">{{ item._source.description }}</div>\r\n </div>\r\n </div><span class=\"badge badge-light fs-9\">{{ item._source.date|customDateFormat }}</span>\r\n </div>\r\n </div>\r\n <div class=\"text-center border-top\">\r\n <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary my-2\">\r\n View All\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"w-450px position-fixed end-0 bottom-0 transition\">\r\n <div class=\"mb-4\" *ngFor=\"let item of pushNotificationList;let i = index\">\r\n <div class=\"alertbg card\" *ngIf=\"item._score\" @fadeIn @fadeOut>\r\n <div class=\"row m-2\">\r\n <div class=\"col-1 align-items-start mt-1\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12254_112653)\">\r\n <path\r\n d=\"M9.99935 13.3334V10M9.99935 6.66669H10.0077M18.3327 10C18.3327 14.6024 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6024 1.66602 10C1.66602 5.39765 5.39698 1.66669 9.99935 1.66669C14.6017 1.66669 18.3327 5.39765 18.3327 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12254_112653\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"col-10 align-items-start\">\r\n <span class=\"alert-title\">\r\n Notification\r\n </span>\r\n <div>\r\n {{item._source.description}}\r\n </div>\r\n </div>\r\n <div class=\"col-1 align-items-start cursor-pointer\" (click)=\"notificationPushUpdate(item,'')\">\r\n <span><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <!-- -->\r\n <div class=\"d-flex my-2 justify-content-around\" >\r\n <div [ngClass]=\"!['remind','cancel'].includes(button.redirectionUrl) ? '' : 'mt-2'\" *ngFor=\"let button of item._source?.alertCta\">\r\n <button *ngIf=\"!['remind','cancel'].includes(button.redirectionUrl)\" (click)=\"notificationPushUpdate(item,button)\"\r\n type=\"button\" tabindex=\"0\" class=\" ms-10 btn btn-sm btn-primary ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"submit\">{{ button.buttonName }} </span></button>\r\n <span *ngIf=\"['remind','cancel'].includes(button.redirectionUrl)\" (click)=\"notificationPushUpdate(item,button)\"\r\n class=\"text-primary mx-6 remindlatertext cursor-pointer\">{{ button.buttonName }} </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".nav-line-tabs .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;border-bottom:none!important;width:100%!important}.nav-line-tabs.nav-line-tabs-2x{background:var(--Gray-50, #F9FAFB)!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.title-name{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.title-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.title-notify{color:var(--Gray-900, #101828)!important;font-size:20px!important;font-weight:500!important;line-height:30px}.alert-title{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:28px;text-align:left}.alt-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alertscroll{max-height:300px;overflow-y:scroll}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.notificationAlign{color:var(--Gray-900, #101828);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.noNotification{color:var(--Gray-500, #667085);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.border-value{padding:16px!important;border-radius:12px!important;border:1.095px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.buttonsec{border-radius:8px;margin:0;background:var(--gray-50, white);width:100%;height:fit-content;padding:5px}.submenu{background:var(--gray-50, white)!important;color:var(--gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;outline:none!important}.text-primary{color:var(--primary-700, #009BF3)!important;font-size:16px;font-weight:500}.alertdot{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}.remindlatertext{color:var(--Primary-700, #009BF3);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline;text-transform:capitalize}.submit{font-size:16px;font-weight:600;line-height:24px;text-align:left;color:#fff}.alerticon{margin-bottom:35%!important}.alertbg{gap:0px;opacity:0px;border-left:7px solid var(--Primary-500, #33B5FF);border-top-left-radius:15px;border-bottom-left-radius:15px}.notificationMenu{display:block!important;z-index:105;position:fixed;inset:0 0 auto auto;margin:0;transform:translate3d(-30.2222px,72.8889px,0)}.transition{transition:5s ease-in!important;right:-450px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: CustomDateFormatPipe, name: "customDateFormat" }], animations: [
555
555
  fadeIn,
556
556
  fadeOut
@@ -562,7 +562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
562
562
  fadeIn,
563
563
  fadeOut
564
564
  ], template: "<!--begin::Notifications-->\r\n<div class=\"app-navbar-item\" [ngClass]=\"itemClass\" *ngIf=\"showNotification\">\r\n <!--begin::Menu- wrapper-->\r\n <div [ngClass]=\"btnClass\" (click)=\"showDropdown = !showDropdown\">\r\n <span *ngIf=\"!notification.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"24\" viewBox=\"0 0 20 24\" fill=\"none\">\r\n <path\r\n d=\"M10.6779 2.4V3.00688L11.2715 3.1335C14.1674 3.75125 16.3919 6.45842 16.3919 9.75V10.6313C16.3919 13.0131 17.2249 15.3087 18.7338 17.0963L18.7352 17.0979L19.0636 17.4846C19.0639 17.485 19.0642 17.4853 19.0645 17.4857C19.2557 17.7136 19.3048 18.0393 19.185 18.3174C19.0641 18.5983 18.8153 18.75 18.5704 18.75H1.42848C1.1825 18.75 0.933931 18.5974 0.815017 18.3193C0.695108 18.0388 0.744592 17.7123 0.933996 17.4853C0.934445 17.4848 0.934894 17.4843 0.935344 17.4837L1.26312 17.0985L1.26473 17.0966C2.77599 15.3086 3.60697 13.0127 3.60697 10.6313V9.75C3.60697 6.45434 5.79488 3.75145 8.72559 3.13388L9.32094 3.00843V2.4V1.5C9.32094 1.05052 9.65806 0.75 9.99944 0.75C10.3408 0.75 10.6779 1.05052 10.6779 1.5V2.4ZM9.99944 23.25C9.44983 23.25 8.91726 23.023 8.52034 22.6062C8.29649 22.3712 8.12457 22.0708 8.01769 21.75H11.9812C11.8743 22.0708 11.7024 22.3712 11.4785 22.6062C11.0856 23.0188 10.5146 23.25 9.99944 23.25Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.5\" />\r\n </svg>\r\n </span>\r\n <span *ngIf=\"notification.length\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"24\" viewBox=\"0 0 20 24\" fill=\"none\">\r\n <path\r\n d=\"M11.4279 2.4V1.5C11.4279 0.671719 10.7896 0 9.99944 0C9.2093 0 8.57094 0.671719 8.57094 1.5V2.4C5.27202 3.09516 2.85697 6.12188 2.85697 9.75V10.6313C2.85697 12.8391 2.08648 14.9625 0.691915 16.6125L0.360862 17.0016C-0.0128805 17.4469 -0.10505 18.075 0.125384 18.6141C0.355818 19.1531 0.866013 19.5 1.42848 19.5H18.5704C19.1329 19.5 19.6418 19.1531 19.8739 18.6141C20.106 18.075 20.0123 17.4469 19.6373 17.0016L19.307 16.6125C17.9142 14.9625 17.1419 12.8391 17.1419 10.6313V9.75C17.1419 9.39947 17.119 9.05455 17.0746 8.71681C16.5845 8.8999 16.054 9 15.5 9C13.0147 9 11 6.98528 11 4.5C11 3.74877 11.1841 3.04054 11.5096 2.41795C11.4824 2.4118 11.4552 2.40582 11.4279 2.4Z\"\r\n fill=\"#00A3FF\" />\r\n <path\r\n d=\"M7.97723 23.1234C8.51291 23.6859 9.24055 24 9.99944 24C10.7181 24 11.486 23.6859 12.0216 23.1234C12.5573 22.5609 12.8564 21.7547 12.8564 21H7.14245C7.14245 21.7547 7.44154 22.5609 7.97723 23.1234Z\"\r\n fill=\"#00A3FF\" />\r\n <circle cx=\"16\" cy=\"4\" r=\"4\" fill=\"#F04438\" />\r\n </svg>\r\n </span>\r\n <div class=\"menu menu-sub menu-sub-dropdown menu-column w-450px w-lg-425px notificationMenu\" *ngIf=\"showDropdown\">\r\n <div class=\"card topbar\">\r\n <div class=\"card-header\">\r\n <h3 class=\"title-notify mt-10 mb-6\">\r\n Notifications\r\n </h3>\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData && !loading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\" src=\"./assets/tango/Icons/noNotification.svg\" alt=\"\">\r\n <span class=\"notificationAlign mt-10\">No New Notification</span>\r\n <span class=\"noNotification mt-2\">Any new notification will be shown here.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"alertscroll\" *ngIf=\"notification.length\">\r\n <div *ngFor=\"let item of notification\" class=\"mh-200px ng-star-inserted\" style=\"overflow: auto;\">\r\n <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n version=\"1.1\" class=\"ng-star-inserted\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n <path\r\n d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n <path\r\n d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n </g>\r\n </svg></span></span></div>\r\n <div class=\"mb-0 me-2\" style=\"text-align: left;\">\r\n <div class=\"alert-title\">{{ item._source.title }}</div>\r\n <div class=\"alt-desc\">{{ item._source.description }}</div>\r\n </div>\r\n </div><span class=\"badge badge-light fs-9\">{{ item._source.date|customDateFormat }}</span>\r\n </div>\r\n </div>\r\n <div class=\"text-center border-top\">\r\n <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary my-2\">\r\n View All\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"w-450px position-fixed end-0 bottom-0 transition\">\r\n <div class=\"mb-4\" *ngFor=\"let item of pushNotificationList;let i = index\">\r\n <div class=\"alertbg card\" *ngIf=\"item._score\" @fadeIn @fadeOut>\r\n <div class=\"row m-2\">\r\n <div class=\"col-1 align-items-start mt-1\">\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_12254_112653)\">\r\n <path\r\n d=\"M9.99935 13.3334V10M9.99935 6.66669H10.0077M18.3327 10C18.3327 14.6024 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6024 1.66602 10C1.66602 5.39765 5.39698 1.66669 9.99935 1.66669C14.6017 1.66669 18.3327 5.39765 18.3327 10Z\"\r\n stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_12254_112653\">\r\n <rect width=\"20\" height=\"20\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"col-10 align-items-start\">\r\n <span class=\"alert-title\">\r\n Notification\r\n </span>\r\n <div>\r\n {{item._source.description}}\r\n </div>\r\n </div>\r\n <div class=\"col-1 align-items-start cursor-pointer\" (click)=\"notificationPushUpdate(item,'')\">\r\n <span><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <!-- -->\r\n <div class=\"d-flex my-2 justify-content-around\" >\r\n <div [ngClass]=\"!['remind','cancel'].includes(button.redirectionUrl) ? '' : 'mt-2'\" *ngFor=\"let button of item._source?.alertCta\">\r\n <button *ngIf=\"!['remind','cancel'].includes(button.redirectionUrl)\" (click)=\"notificationPushUpdate(item,button)\"\r\n type=\"button\" tabindex=\"0\" class=\" ms-10 btn btn-sm btn-primary ng-star-inserted\"\r\n style=\"white-space: nowrap;\"><span class=\"submit\">{{ button.buttonName }} </span></button>\r\n <span *ngIf=\"['remind','cancel'].includes(button.redirectionUrl)\" (click)=\"notificationPushUpdate(item,button)\"\r\n class=\"text-primary mx-6 remindlatertext cursor-pointer\">{{ button.buttonName }} </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".nav-line-tabs .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;border-bottom:none!important;width:100%!important}.nav-line-tabs.nav-line-tabs-2x{background:var(--Gray-50, #F9FAFB)!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.title-name{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.title-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.title-notify{color:var(--Gray-900, #101828)!important;font-size:20px!important;font-weight:500!important;line-height:30px}.alert-title{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:28px;text-align:left}.alt-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alertscroll{max-height:300px;overflow-y:scroll}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.notificationAlign{color:var(--Gray-900, #101828);text-align:center;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.noNotification{color:var(--Gray-500, #667085);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}.border-value{padding:16px!important;border-radius:12px!important;border:1.095px solid var(--Gray-200, #EAECF0)!important;background:var(--White, #FFF)!important}.buttonsec{border-radius:8px;margin:0;background:var(--gray-50, white);width:100%;height:fit-content;padding:5px}.submenu{background:var(--gray-50, white)!important;color:var(--gray-500, #667085)!important;font-size:16px!important;font-weight:500!important;outline:none!important}.text-primary{color:var(--primary-700, #009BF3)!important;font-size:16px;font-weight:500}.alertdot{color:var(--Gray-500, #667085);font-size:12px;font-weight:400;line-height:18px}.remindlatertext{color:var(--Primary-700, #009BF3);font-size:16px;font-weight:600;line-height:24px;text-decoration-line:underline;text-transform:capitalize}.submit{font-size:16px;font-weight:600;line-height:24px;text-align:left;color:#fff}.alerticon{margin-bottom:35%!important}.alertbg{gap:0px;opacity:0px;border-left:7px solid var(--Primary-500, #33B5FF);border-top-left-radius:15px;border-bottom-left-radius:15px}.notificationMenu{display:block!important;z-index:105;position:fixed;inset:0 0 auto auto;margin:0;transform:translate3d(-30.2222px,72.8889px,0)}.transition{transition:5s ease-in!important;right:-450px}\n"] }]
565
- }], ctorParameters: () => [{ type: NotificationService }, { type: i1.Router }, { type: ToastService }, { type: i0.ChangeDetectorRef }], propDecorators: { appHeaderDefaulMenuDisplay: [{
565
+ }], ctorParameters: () => [{ type: NotificationService }, { type: i2.Router }, { type: ToastService }, { type: i0.ChangeDetectorRef }], propDecorators: { appHeaderDefaulMenuDisplay: [{
566
566
  type: Input
567
567
  }], isRtl: [{
568
568
  type: Input
@@ -1914,13 +1914,13 @@ class HeaderComponent {
1914
1914
  ngOnDestroy() {
1915
1915
  this.unsubscribe.forEach((sb) => sb.unsubscribe());
1916
1916
  }
1917
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1$1.LayoutService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
1917
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.LayoutService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
1918
1918
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderComponent, selector: "lib-header", ngImport: i0, template: "<!--begin::Header container-->\r\n<div class=\"app-container header-style\" id=\"kt_app_header_container\" [ngClass]=\"headerContainerCssClass\">\r\n <ng-container *ngIf=\"appSidebarDefaultCollapseDesktopEnabled\">\r\n <div class=\"app-sidebar-collapse-d-flex align-items-center me-3\">\r\n <!--begin::sidebar toggle-->\r\n <div class=\"btn btn-icon w-auto px-0 btn-color-muted btn-active-icon-primary\" data-kt-toggle=\"true\"\r\n data-kt-toggle-target=\"body\" data-kt-toggle-mode=\"on\" data-kt-toggle-name=\"app-sidebar-collapse\">\r\n <lib-keenicon name=\"double-right\" class=\"fs-1\"></lib-keenicon>\r\n </div>\r\n <!--end::sidebar toggle-->\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"appSidebarDisplay\">\r\n <!--begin::sidebar mobile toggle-->\r\n <div class=\"d-flex align-items-center d-lg-none ms-n2 me-2\" title=\"Show sidebar menu\">\r\n <div class=\"btn btn-icon btn-active-color-primary w-35px h-35px\" id=\"kt_app_sidebar_mobile_toggle\">\r\n <lib-keenicon name=\"abstract-14\" class=\"fs-1\"></lib-keenicon>\r\n </div>\r\n </div>\r\n <!--end::sidebar mobile toggle-->\r\n <!--begin::Mobile logo-->\r\n <div class=\"d-flex align-items-center flex-grow-1 flex-lg-grow-0\">\r\n <a class=\"d-lg-none\">\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\" class=\"h-30px\" />\r\n </a>\r\n </div>\r\n <!--end::Mobile logo-->\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!appSidebarDisplay\">\r\n <!--begin::Logo-->\r\n <div class=\"d-flex align-items-center flex-grow-1 flex-lg-grow-0 me-lg-15\">\r\n <a >\r\n <ng-container *ngIf=\"currentLayoutType === 'dark-header'\">\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\"\r\n class=\"h-20px h-lg-30px app-sidebar-logo-default\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"currentLayoutType !== 'dark-header'\">\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\"\r\n class=\"h-20px h-lg-30px app-sidebar-logo-default theme-light-show\" />\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\"\r\n class=\"h-20px h-lg-30px app-sidebar-logo-default theme-dark-show\" />\r\n </ng-container>\r\n </a>\r\n </div>\r\n <!--end::Logo-->\r\n </ng-container>\r\n\r\n <!--begin::Header wrapper-->\r\n <div class=\"d-flex align-items-stretch justify-content-between flex-lg-grow-1 header-border\" id=\"kt_app_header_wrapper\">\r\n <ng-container *ngIf=\"appHeaderDefaultContent === 'menu' && appHeaderDefaulMenuDisplay\">\r\n <!--begin::Menu wrapper-->\r\n <div class=\"\r\n app-header-menu\r\n app-header-mobile-drawer\r\n align-items-stretch\r\n\" data-kt-drawer=\"true\" data-kt-drawer-name=\"app-header-menu\" data-kt-drawer-activate=\"{default: true, lg: false}\"\r\n data-kt-drawer-overlay=\"true\" data-kt-drawer-width=\"225px\" data-kt-drawer-direction=\"end\"\r\n data-kt-drawer-toggle=\"#kt_app_header_menu_toggle\" data-kt-swapper=\"true\"\r\n data-kt-swapper-mode=\"{default: 'append', lg: 'prepend'}\"\r\n data-kt-swapper-parent=\"{default: '#kt_app_body', lg: '#kt_app_header_wrapper'}\">\r\n <!--begin::Menu-->\r\n <lib-header-menu\r\n appPageTitleDirection = ''\r\n [appPageTitleDescription] = true\r\n class=\"\r\n menu\r\n menu-rounded\r\n menu-column\r\n menu-lg-row\r\n my-5\r\n my-lg-0\r\n align-items-stretch\r\n fw-semibold\r\n px-2 px-lg-0\r\n \" id=\"kt_app_header_menu\" data-kt-menu=\"true\"></lib-header-menu>\r\n <!--end::Menu-->\r\n </div>\r\n <!--end::Menu wrapper-->\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"appHeaderDefaultContent === 'page-title' && appPageTitleDisplay\">\r\n <app-page-title #ktPageTitle class=\"page-title d-flex\"></app-page-title>\r\n </ng-container> -->\r\n <lib-navbar class=\"app-navbar flex-shrink-0\" [appHeaderDefaulMenuDisplay]=\"appHeaderDefaulMenuDisplay\"\r\n [isRtl]=\"false\"></lib-navbar>\r\n </div>\r\n <!--end::Header wrapper-->\r\n</div>\r\n<!--end::Header container-->\r\n", styles: [".header-style{background-color:#fff}.header-border{border-bottom:1px solid #EAECF0}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderMenuComponent, selector: "lib-header-menu", inputs: ["appPageTitleDirection", "appPageTitleDescription"] }, { kind: "component", type: NavbarComponent, selector: "lib-navbar", inputs: ["appHeaderDefaulMenuDisplay", "isRtl"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
1919
1919
  }
1920
1920
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
1921
1921
  type: Component,
1922
1922
  args: [{ selector: 'lib-header', template: "<!--begin::Header container-->\r\n<div class=\"app-container header-style\" id=\"kt_app_header_container\" [ngClass]=\"headerContainerCssClass\">\r\n <ng-container *ngIf=\"appSidebarDefaultCollapseDesktopEnabled\">\r\n <div class=\"app-sidebar-collapse-d-flex align-items-center me-3\">\r\n <!--begin::sidebar toggle-->\r\n <div class=\"btn btn-icon w-auto px-0 btn-color-muted btn-active-icon-primary\" data-kt-toggle=\"true\"\r\n data-kt-toggle-target=\"body\" data-kt-toggle-mode=\"on\" data-kt-toggle-name=\"app-sidebar-collapse\">\r\n <lib-keenicon name=\"double-right\" class=\"fs-1\"></lib-keenicon>\r\n </div>\r\n <!--end::sidebar toggle-->\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"appSidebarDisplay\">\r\n <!--begin::sidebar mobile toggle-->\r\n <div class=\"d-flex align-items-center d-lg-none ms-n2 me-2\" title=\"Show sidebar menu\">\r\n <div class=\"btn btn-icon btn-active-color-primary w-35px h-35px\" id=\"kt_app_sidebar_mobile_toggle\">\r\n <lib-keenicon name=\"abstract-14\" class=\"fs-1\"></lib-keenicon>\r\n </div>\r\n </div>\r\n <!--end::sidebar mobile toggle-->\r\n <!--begin::Mobile logo-->\r\n <div class=\"d-flex align-items-center flex-grow-1 flex-lg-grow-0\">\r\n <a class=\"d-lg-none\">\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\" class=\"h-30px\" />\r\n </a>\r\n </div>\r\n <!--end::Mobile logo-->\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!appSidebarDisplay\">\r\n <!--begin::Logo-->\r\n <div class=\"d-flex align-items-center flex-grow-1 flex-lg-grow-0 me-lg-15\">\r\n <a >\r\n <ng-container *ngIf=\"currentLayoutType === 'dark-header'\">\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\"\r\n class=\"h-20px h-lg-30px app-sidebar-logo-default\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"currentLayoutType !== 'dark-header'\">\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\"\r\n class=\"h-20px h-lg-30px app-sidebar-logo-default theme-light-show\" />\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\"\r\n class=\"h-20px h-lg-30px app-sidebar-logo-default theme-dark-show\" />\r\n </ng-container>\r\n </a>\r\n </div>\r\n <!--end::Logo-->\r\n </ng-container>\r\n\r\n <!--begin::Header wrapper-->\r\n <div class=\"d-flex align-items-stretch justify-content-between flex-lg-grow-1 header-border\" id=\"kt_app_header_wrapper\">\r\n <ng-container *ngIf=\"appHeaderDefaultContent === 'menu' && appHeaderDefaulMenuDisplay\">\r\n <!--begin::Menu wrapper-->\r\n <div class=\"\r\n app-header-menu\r\n app-header-mobile-drawer\r\n align-items-stretch\r\n\" data-kt-drawer=\"true\" data-kt-drawer-name=\"app-header-menu\" data-kt-drawer-activate=\"{default: true, lg: false}\"\r\n data-kt-drawer-overlay=\"true\" data-kt-drawer-width=\"225px\" data-kt-drawer-direction=\"end\"\r\n data-kt-drawer-toggle=\"#kt_app_header_menu_toggle\" data-kt-swapper=\"true\"\r\n data-kt-swapper-mode=\"{default: 'append', lg: 'prepend'}\"\r\n data-kt-swapper-parent=\"{default: '#kt_app_body', lg: '#kt_app_header_wrapper'}\">\r\n <!--begin::Menu-->\r\n <lib-header-menu\r\n appPageTitleDirection = ''\r\n [appPageTitleDescription] = true\r\n class=\"\r\n menu\r\n menu-rounded\r\n menu-column\r\n menu-lg-row\r\n my-5\r\n my-lg-0\r\n align-items-stretch\r\n fw-semibold\r\n px-2 px-lg-0\r\n \" id=\"kt_app_header_menu\" data-kt-menu=\"true\"></lib-header-menu>\r\n <!--end::Menu-->\r\n </div>\r\n <!--end::Menu wrapper-->\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"appHeaderDefaultContent === 'page-title' && appPageTitleDisplay\">\r\n <app-page-title #ktPageTitle class=\"page-title d-flex\"></app-page-title>\r\n </ng-container> -->\r\n <lib-navbar class=\"app-navbar flex-shrink-0\" [appHeaderDefaulMenuDisplay]=\"appHeaderDefaulMenuDisplay\"\r\n [isRtl]=\"false\"></lib-navbar>\r\n </div>\r\n <!--end::Header wrapper-->\r\n</div>\r\n<!--end::Header container-->\r\n", styles: [".header-style{background-color:#fff}.header-border{border-bottom:1px solid #EAECF0}\n"] }]
1923
- }], ctorParameters: () => [{ type: i1$1.LayoutService }, { type: i1.Router }] });
1923
+ }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i2.Router }] });
1924
1924
 
1925
1925
  class CsmAssignConfirmationComponent {
1926
1926
  activeModal;
@@ -1934,13 +1934,13 @@ class CsmAssignConfirmationComponent {
1934
1934
  onSubmit(value) {
1935
1935
  this.activeModal.close({ clientId: this.clientId, action: value });
1936
1936
  }
1937
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CsmAssignConfirmationComponent, deps: [{ token: i2.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
1937
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CsmAssignConfirmationComponent, deps: [{ token: i2$1.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
1938
1938
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CsmAssignConfirmationComponent, selector: "lib-csm-assign-confirmation", inputs: { clientId: "clientId", email: "email", mobile: "mobile", name: "name" }, ngImport: i0, template: "<span class=\"mb-5\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\" />\r\n <path\r\n d=\"M27.9998 24V28M27.9998 32H28.0098M26.2898 18.86L17.8198 33C17.6451 33.3024 17.5527 33.6453 17.5518 33.9945C17.5508 34.3437 17.6413 34.6871 17.8142 34.9905C17.9871 35.2939 18.2365 35.5467 18.5375 35.7238C18.8385 35.9009 19.1806 35.9961 19.5298 36H36.4698C36.819 35.9961 37.1611 35.9009 37.4621 35.7238C37.7631 35.5467 38.0124 35.2939 38.1854 34.9905C38.3583 34.6871 38.4488 34.3437 38.4478 33.9945C38.4468 33.6453 38.3544 33.3024 38.1798 33L29.7098 18.86C29.5315 18.5661 29.2805 18.3231 28.981 18.1544C28.6814 17.9858 28.3435 17.8972 27.9998 17.8972C27.656 17.8972 27.3181 17.9858 27.0186 18.1544C26.7191 18.3231 26.468 18.5661 26.2898 18.86Z\"\r\n stroke=\"#DC6803\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n</span>\r\n\r\n<span class=\"mb-3 title\">\r\n {{name}} Assigned as Your CSM\r\n</span>\r\n\r\n<span class=\"mb-5 description\">\r\n {{name}} has been assigned as your Customer Success Manager (CSM). For inquiries about data management, store\r\n operations, or user management, please contact {{name}}.\r\n</span>\r\n\r\n<span class=\"mb-5 sub-title\">\r\n Contact Information:\r\n</span>\r\n\r\n<span class=\"mb-5 description\">\r\n <ul>\r\n <li>\r\n Phone: {{mobile}}\r\n </li>\r\n <li>\r\n Email: {{email}}\r\n </li>\r\n </ul>\r\n</span>\r\n\r\n<span class=\"mb-10 description\">\r\n Please approve {{name}}'s access to your data dashboard.\r\n</span>\r\n\r\n<div class=\"d-flex align-items-center justify-content-center\" >\r\n <button (click)=\"onSubmit('decline')\" class=\"btn btn-outline btn-cust me-5\">Decline</button>\r\n\r\n <button (click)=\"onSubmit('approve')\" class=\"btn btn-primary btn-cust\">Approve</button>\r\n\r\n</div>", styles: [":host{padding:24px}.title{color:#101828;font-size:18px;font-weight:600;line-height:28px}.sub-title{color:#667085;font-size:14px;font-weight:600;line-height:20px}.description{color:#667085;font-size:14px;font-weight:400;line-height:20px}.btn-cust{width:25%}\n"] });
1939
1939
  }
1940
1940
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CsmAssignConfirmationComponent, decorators: [{
1941
1941
  type: Component,
1942
1942
  args: [{ selector: 'lib-csm-assign-confirmation', template: "<span class=\"mb-5\">\r\n <svg width=\"56\" height=\"56\" viewBox=\"0 0 56 56\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" fill=\"#FEF0C7\" />\r\n <rect x=\"4\" y=\"4\" width=\"48\" height=\"48\" rx=\"24\" stroke=\"#FFFAEB\" stroke-width=\"8\" />\r\n <path\r\n d=\"M27.9998 24V28M27.9998 32H28.0098M26.2898 18.86L17.8198 33C17.6451 33.3024 17.5527 33.6453 17.5518 33.9945C17.5508 34.3437 17.6413 34.6871 17.8142 34.9905C17.9871 35.2939 18.2365 35.5467 18.5375 35.7238C18.8385 35.9009 19.1806 35.9961 19.5298 36H36.4698C36.819 35.9961 37.1611 35.9009 37.4621 35.7238C37.7631 35.5467 38.0124 35.2939 38.1854 34.9905C38.3583 34.6871 38.4488 34.3437 38.4478 33.9945C38.4468 33.6453 38.3544 33.3024 38.1798 33L29.7098 18.86C29.5315 18.5661 29.2805 18.3231 28.981 18.1544C28.6814 17.9858 28.3435 17.8972 27.9998 17.8972C27.656 17.8972 27.3181 17.9858 27.0186 18.1544C26.7191 18.3231 26.468 18.5661 26.2898 18.86Z\"\r\n stroke=\"#DC6803\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n</span>\r\n\r\n<span class=\"mb-3 title\">\r\n {{name}} Assigned as Your CSM\r\n</span>\r\n\r\n<span class=\"mb-5 description\">\r\n {{name}} has been assigned as your Customer Success Manager (CSM). For inquiries about data management, store\r\n operations, or user management, please contact {{name}}.\r\n</span>\r\n\r\n<span class=\"mb-5 sub-title\">\r\n Contact Information:\r\n</span>\r\n\r\n<span class=\"mb-5 description\">\r\n <ul>\r\n <li>\r\n Phone: {{mobile}}\r\n </li>\r\n <li>\r\n Email: {{email}}\r\n </li>\r\n </ul>\r\n</span>\r\n\r\n<span class=\"mb-10 description\">\r\n Please approve {{name}}'s access to your data dashboard.\r\n</span>\r\n\r\n<div class=\"d-flex align-items-center justify-content-center\" >\r\n <button (click)=\"onSubmit('decline')\" class=\"btn btn-outline btn-cust me-5\">Decline</button>\r\n\r\n <button (click)=\"onSubmit('approve')\" class=\"btn btn-primary btn-cust\">Approve</button>\r\n\r\n</div>", styles: [":host{padding:24px}.title{color:#101828;font-size:18px;font-weight:600;line-height:28px}.sub-title{color:#667085;font-size:14px;font-weight:600;line-height:20px}.description{color:#667085;font-size:14px;font-weight:400;line-height:20px}.btn-cust{width:25%}\n"] }]
1943
- }], ctorParameters: () => [{ type: i2.NgbActiveModal }], propDecorators: { clientId: [{
1943
+ }], ctorParameters: () => [{ type: i2$1.NgbActiveModal }], propDecorators: { clientId: [{
1944
1944
  type: Input
1945
1945
  }], email: [{
1946
1946
  type: Input
@@ -2034,13 +2034,13 @@ class ContentComponent {
2034
2034
  }
2035
2035
  });
2036
2036
  }
2037
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentComponent, deps: [{ token: i1.Router }, { token: i2.NgbModal }, { token: AuthService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
2038
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ContentComponent, selector: "lib-content", inputs: { contentContainerCSSClass: "contentContainerCSSClass", appContentContiner: "appContentContiner", appContentContainerClass: "appContentContainerClass" }, ngImport: i0, template: "<ng-container *ngIf=\"appContentContiner\">\r\n <!--begin::Content container-->\r\n <div id=\"kt_app_content_container\" class=\"app-container\"\r\n [ngClass]=\"appContentContainerClass + ' ' + contentContainerCSSClass\"\r\n [ngClass]=\"{'container-xxl': appContentContiner === 'fixed', 'container-fluid': appContentContiner === 'fluid'}\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <!--end::Content container-->\r\n</ng-container>\r\n<ng-container *ngIf=\"!appContentContiner\">\r\n <router-outlet></router-outlet>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
2037
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentComponent, deps: [{ token: i2.Router }, { token: i2$1.NgbModal }, { token: AuthService }, { token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
2038
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ContentComponent, selector: "lib-content", inputs: { contentContainerCSSClass: "contentContainerCSSClass", appContentContiner: "appContentContiner", appContentContainerClass: "appContentContainerClass" }, ngImport: i0, template: "<ng-container *ngIf=\"appContentContiner\">\r\n <!--begin::Content container-->\r\n <div id=\"kt_app_content_container\" class=\"app-container\"\r\n [ngClass]=\"appContentContainerClass + ' ' + contentContainerCSSClass\"\r\n [ngClass]=\"{'container-xxl': appContentContiner === 'fixed', 'container-fluid': appContentContiner === 'fluid'}\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <!--end::Content container-->\r\n</ng-container>\r\n<ng-container *ngIf=\"!appContentContiner\">\r\n <router-outlet></router-outlet>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
2039
2039
  }
2040
2040
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ContentComponent, decorators: [{
2041
2041
  type: Component,
2042
2042
  args: [{ selector: 'lib-content', template: "<ng-container *ngIf=\"appContentContiner\">\r\n <!--begin::Content container-->\r\n <div id=\"kt_app_content_container\" class=\"app-container\"\r\n [ngClass]=\"appContentContainerClass + ' ' + contentContainerCSSClass\"\r\n [ngClass]=\"{'container-xxl': appContentContiner === 'fixed', 'container-fluid': appContentContiner === 'fluid'}\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n <!--end::Content container-->\r\n</ng-container>\r\n<ng-container *ngIf=\"!appContentContiner\">\r\n <router-outlet></router-outlet>\r\n</ng-container>\r\n" }]
2043
- }], ctorParameters: () => [{ type: i1.Router }, { type: i2.NgbModal }, { type: AuthService }, { type: ToastService }], propDecorators: { contentContainerCSSClass: [{
2043
+ }], ctorParameters: () => [{ type: i2.Router }, { type: i2$1.NgbModal }, { type: AuthService }, { type: ToastService }], propDecorators: { contentContainerCSSClass: [{
2044
2044
  type: Input
2045
2045
  }], appContentContiner: [{
2046
2046
  type: Input
@@ -2120,13 +2120,13 @@ class ScriptsInitComponent {
2120
2120
  ngOnDestroy() {
2121
2121
  this.unsubscribe.forEach((sb) => sb.unsubscribe());
2122
2122
  }
2123
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScriptsInitComponent, deps: [{ token: i1$1.LayoutService }, { token: i1$1.PageInfoService }, { token: i1.Router }, { token: i3$1.Title }], target: i0.ɵɵFactoryTarget.Component });
2123
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScriptsInitComponent, deps: [{ token: i1.LayoutService }, { token: i1.PageInfoService }, { token: i2.Router }, { token: i3$1.Title }], target: i0.ɵɵFactoryTarget.Component });
2124
2124
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ScriptsInitComponent, selector: "lib-scripts-init", ngImport: i0, template: "" });
2125
2125
  }
2126
2126
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScriptsInitComponent, decorators: [{
2127
2127
  type: Component,
2128
2128
  args: [{ selector: 'lib-scripts-init', template: "" }]
2129
- }], ctorParameters: () => [{ type: i1$1.LayoutService }, { type: i1$1.PageInfoService }, { type: i1.Router }, { type: i3$1.Title }] });
2129
+ }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i1.PageInfoService }, { type: i2.Router }, { type: i3$1.Title }] });
2130
2130
 
2131
2131
  class PageTitleComponent {
2132
2132
  pageInfo;
@@ -2170,13 +2170,13 @@ class PageTitleComponent {
2170
2170
  this.router.navigateByUrl('/manage/summary');
2171
2171
  }
2172
2172
  }
2173
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1$1.PageInfoService }, { token: i0.ChangeDetectorRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
2173
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTitleComponent, deps: [{ token: i1.PageInfoService }, { token: i0.ChangeDetectorRef }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
2174
2174
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageTitleComponent, selector: "lib-page-title", inputs: { appPageTitleDirection: "appPageTitleDirection", appPageTitleBreadcrumb: "appPageTitleBreadcrumb", appPageTitleDescription: "appPageTitleDescription" }, ngImport: i0, template: "<ng-container *ngIf=\"title$ | async as title\">\r\n\r\n <ng-container *ngIf=\"appPageTitleBreadcrumb\">\r\n <ng-container *ngIf=\"bc$ | async as _bc\">\r\n <ng-container *ngIf=\"_bc.length > 0\">\r\n <!-- <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n <span class=\"h-20px border-gray-300 border-start mx-4\"></span>\r\n </ng-container> -->\r\n <!--begin::Breadcrumb-->\r\n\r\n <ul class=\"breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0\"\r\n [ngClass]=\"{'pt-1': appPageTitleDirection === 'column'}\">\r\n <li *ngFor=\"let bc of _bc\" class=\"breadcrumb-item\"\r\n [ngClass]=\"!bc.isSeparator && bc.isActive ? 'text-gray-900' : ''\"\r\n [ngClass]=\"!bc.isSeparator && !bc.isActive ? 'text-muted' : ''\">\r\n <ng-container *ngIf=\"!bc.isSeparator\">\r\n <a class=\"inactive-bc text-hover-primary cursor-pointer\" (click)=\"redirectFunction(bc?.path)\" >\r\n {{ bc.title }}\r\n </a>\r\n </ng-container>\r\n <ng-container *ngIf=\"bc.isSeparator\">\r\n <img src=\"/assets/tango/layout/bc-seperator.svg\" alt=\"\">\r\n </ng-container>\r\n </li>\r\n <li class=\"breadcrumb-item active-bc\">{{ title }}</li>\r\n </ul>\r\n <!--end::Breadcrumb-->\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>\r\n", styles: [".active-bc{color:var(--Primary-600, #00A3FF);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.inactive-bc{color:#98a2b3}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
2175
2175
  }
2176
2176
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTitleComponent, decorators: [{
2177
2177
  type: Component,
2178
2178
  args: [{ selector: 'lib-page-title', template: "<ng-container *ngIf=\"title$ | async as title\">\r\n\r\n <ng-container *ngIf=\"appPageTitleBreadcrumb\">\r\n <ng-container *ngIf=\"bc$ | async as _bc\">\r\n <ng-container *ngIf=\"_bc.length > 0\">\r\n <!-- <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n <span class=\"h-20px border-gray-300 border-start mx-4\"></span>\r\n </ng-container> -->\r\n <!--begin::Breadcrumb-->\r\n\r\n <ul class=\"breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0\"\r\n [ngClass]=\"{'pt-1': appPageTitleDirection === 'column'}\">\r\n <li *ngFor=\"let bc of _bc\" class=\"breadcrumb-item\"\r\n [ngClass]=\"!bc.isSeparator && bc.isActive ? 'text-gray-900' : ''\"\r\n [ngClass]=\"!bc.isSeparator && !bc.isActive ? 'text-muted' : ''\">\r\n <ng-container *ngIf=\"!bc.isSeparator\">\r\n <a class=\"inactive-bc text-hover-primary cursor-pointer\" (click)=\"redirectFunction(bc?.path)\" >\r\n {{ bc.title }}\r\n </a>\r\n </ng-container>\r\n <ng-container *ngIf=\"bc.isSeparator\">\r\n <img src=\"/assets/tango/layout/bc-seperator.svg\" alt=\"\">\r\n </ng-container>\r\n </li>\r\n <li class=\"breadcrumb-item active-bc\">{{ title }}</li>\r\n </ul>\r\n <!--end::Breadcrumb-->\r\n\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</ng-container>\r\n", styles: [".active-bc{color:var(--Primary-600, #00A3FF);font-family:Inter;font-size:16px;font-weight:500;line-height:24px}.inactive-bc{color:#98a2b3}\n"] }]
2179
- }], ctorParameters: () => [{ type: i1$1.PageInfoService }, { type: i0.ChangeDetectorRef }, { type: i1.Router }], propDecorators: { appPageTitleDirection: [{
2179
+ }], ctorParameters: () => [{ type: i1.PageInfoService }, { type: i0.ChangeDetectorRef }, { type: i2.Router }], propDecorators: { appPageTitleDirection: [{
2180
2180
  type: Input
2181
2181
  }], appPageTitleBreadcrumb: [{
2182
2182
  type: Input
@@ -2493,13 +2493,13 @@ class ClassicComponent {
2493
2493
  // }
2494
2494
  // this.selectedFilters.date = this.selectedDateRange;
2495
2495
  }
2496
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ClassicComponent, deps: [{ token: i1$1.LayoutService }, { token: i1$1.GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2496
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ClassicComponent, deps: [{ token: i1.LayoutService }, { token: i1.GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2497
2497
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ClassicComponent, selector: "lib-classic", host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"py-3 dropdown1 cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div class=\"dropdown form-select\" (click)=\"Dropdown('Clients',i,$event)\">\r\n <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ?\r\n selectedValuesArray[i]?.length + ' ' + 'Clients'.split(' ').pop() : 'Clients' }}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute\">\r\n <div class=\"form-check d-flex align-items-center pt-3 px-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox('Select All', i)\">\r\n <label class=\"form-check-label px-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path\r\n d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\"\r\n stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n class=\"form-control searchinput ps-14 py-2 mt-2\" placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.clientName\" id=\"option{{issue.clientId}}\"\r\n [checked]=\"selectedValuesArray[i]?.includes(issue.clientId)\" (change)=\"toggleCheckbox(issue.clientId,i)\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.clientId}}\">\r\n {{ issue.clientName }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label mb-3\" *ngIf=\"noFilter\"> No filters available</span>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n\r\n<!-- <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd \r\n [singleDatePicker]=\"true\"\r\n [drops]=\"'down'\"\r\n [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\"\r\n autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (selected)=\"onDateSelect($event)\"\r\n name=\"daterange\" /> -->\r\n\r\n<div class=\"btn btn-primary\" (click)=\"Apply()\">Apply</div>", styles: [".dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;min-height:auto;max-height:250px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
2498
2498
  }
2499
2499
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ClassicComponent, decorators: [{
2500
2500
  type: Component,
2501
2501
  args: [{ selector: "lib-classic", template: "<div class=\"py-3 dropdown1 cursor-pointer\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div class=\"dropdown form-select\" (click)=\"Dropdown('Clients',i,$event)\">\r\n <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ?\r\n selectedValuesArray[i]?.length + ' ' + 'Clients'.split(' ').pop() : 'Clients' }}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute\">\r\n <div class=\"form-check d-flex align-items-center pt-3 px-5\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\"\r\n [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox('Select All', i)\">\r\n <label class=\"form-check-label px-3\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n\r\n <div class=\"border border-gray mt-3\"></div>\r\n <div class=\"mt-3 d-flex align-items-center mx-2\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path\r\n d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\"\r\n stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"searchValue\" (input)=\"searchData($event,i)\"\r\n class=\"form-control searchinput ps-14 py-2 mt-2\" placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n <div *ngFor=\"let issue of item.Issues\" class=\"form-check d-flex align-items-center py-3 px-5\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.clientName\" id=\"option{{issue.clientId}}\"\r\n [checked]=\"selectedValuesArray[i]?.includes(issue.clientId)\" (change)=\"toggleCheckbox(issue.clientId,i)\">\r\n <label class=\"form-check-label px-3 cursor-pointer\" for=\"option{{issue.clientId}}\">\r\n {{ issue.clientName }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label mb-3\" *ngIf=\"noFilter\"> No filters available</span>\r\n </div>\r\n </div>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n\r\n<!-- <input class=\"fx-date-range form-control ps-14\" type=\"text\" matInput ngxDaterangepickerMd \r\n [singleDatePicker]=\"true\"\r\n [drops]=\"'down'\"\r\n [opens]=\"'right'\"\r\n [alwaysShowCalendars]=\"false\"\r\n [keepCalendarOpeningWithRange]=\"true\"\r\n [showCancel]=\"true\"\r\n autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (selected)=\"onDateSelect($event)\"\r\n name=\"daterange\" /> -->\r\n\r\n<div class=\"btn btn-primary\" (click)=\"Apply()\">Apply</div>", styles: [".dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:16px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{z-index:1;padding:0;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;min-height:auto;max-height:250px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:400px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.btn-primary{line-height:18px!important}\n"] }]
2502
- }], ctorParameters: () => [{ type: i1$1.LayoutService }, { type: i1$1.GlobalStateService }, { type: AuthService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
2502
+ }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i1.GlobalStateService }, { type: AuthService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
2503
2503
  type: HostListener,
2504
2504
  args: ["document:click", ["$event"]]
2505
2505
  }] } });
@@ -2724,13 +2724,13 @@ class ClientSettingsComponent {
2724
2724
  window.location.reload();
2725
2725
  this.cd.detectChanges();
2726
2726
  }
2727
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ClientSettingsComponent, deps: [{ token: AuthService }, { token: i1$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2727
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ClientSettingsComponent, deps: [{ token: AuthService }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2728
2728
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ClientSettingsComponent, selector: "lib-client-settings", ngImport: i0, template: " <div class=\"wrapper\" >\r\n <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n </div>\r\n", styles: [".wrapper{min-width:200px}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
2729
2729
  }
2730
2730
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ClientSettingsComponent, decorators: [{
2731
2731
  type: Component,
2732
2732
  args: [{ selector: 'lib-client-settings', template: " <div class=\"wrapper\" >\r\n <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n </div>\r\n", styles: [".wrapper{min-width:200px}\n"] }]
2733
- }], ctorParameters: () => [{ type: AuthService }, { type: i1$1.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
2733
+ }], ctorParameters: () => [{ type: AuthService }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
2734
2734
 
2735
2735
  class DatepickerComponent {
2736
2736
  layout;
@@ -2854,13 +2854,13 @@ class DatepickerComponent {
2854
2854
  this.gs.dataRangeValue.next(this.selectedFilters);
2855
2855
  localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
2856
2856
  }
2857
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1$1.LayoutService }, { token: i1$1.GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2857
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1.LayoutService }, { token: i1.GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2858
2858
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DatepickerComponent, selector: "lib-datepicker", ngImport: i0, template: "<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}\n"], dependencies: [{ kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
2859
2859
  }
2860
2860
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatepickerComponent, decorators: [{
2861
2861
  type: Component,
2862
2862
  args: [{ selector: "lib-datepicker", template: "<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}\n"] }]
2863
- }], ctorParameters: () => [{ type: i1$1.LayoutService }, { type: i1$1.GlobalStateService }, { type: AuthService }, { type: i0.ChangeDetectorRef }] });
2863
+ }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i1.GlobalStateService }, { type: AuthService }, { type: i0.ChangeDetectorRef }] });
2864
2864
 
2865
2865
  class DateSingleSelectComponent {
2866
2866
  auth;
@@ -3028,13 +3028,13 @@ class DateSingleSelectComponent {
3028
3028
  window.location.reload();
3029
3029
  this.gs.manageRefreshTrigger.next(true);
3030
3030
  }
3031
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateSingleSelectComponent, deps: [{ token: AuthService }, { token: i1$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
3031
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateSingleSelectComponent, deps: [{ token: AuthService }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
3032
3032
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateSingleSelectComponent, selector: "lib-date-single-select", ngImport: i0, template: "<div class=\"wrapper mx-2\" >\r\n <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n \r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
3033
3033
  }
3034
3034
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateSingleSelectComponent, decorators: [{
3035
3035
  type: Component,
3036
3036
  args: [{ selector: "lib-date-single-select", template: "<div class=\"wrapper mx-2\" >\r\n <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n \r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"] }]
3037
- }], ctorParameters: () => [{ type: AuthService }, { type: i1$1.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
3037
+ }], ctorParameters: () => [{ type: AuthService }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
3038
3038
 
3039
3039
  class SingleStoreComponent {
3040
3040
  auth;
@@ -3169,13 +3169,13 @@ class SingleStoreComponent {
3169
3169
  this.gs.dataRangeValue.next(this.selectedFilters);
3170
3170
  localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
3171
3171
  }
3172
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleStoreComponent, deps: [{ token: AuthService }, { token: i1$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
3172
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleStoreComponent, deps: [{ token: AuthService }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
3173
3173
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SingleStoreComponent, selector: "lib-single-store", ngImport: i0, template: "<div class=\"wrapper mx-2\" >\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n \r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
3174
3174
  }
3175
3175
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SingleStoreComponent, decorators: [{
3176
3176
  type: Component,
3177
3177
  args: [{ selector: 'lib-single-store', template: "<div class=\"wrapper mx-2\" >\r\n <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n \r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput ngxDaterangepickerMd [drops]=\"'down'\"\r\n [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [alwaysShowCalendars]=\"false\" [autoApply]=\"true\"\r\n [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\" [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}\n"] }]
3178
- }], ctorParameters: () => [{ type: AuthService }, { type: i1$1.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
3178
+ }], ctorParameters: () => [{ type: AuthService }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
3179
3179
 
3180
3180
  class TrafficHeaderComponent {
3181
3181
  auth;
@@ -3232,6 +3232,773 @@ class TrafficHeaderComponent {
3232
3232
  this.Opendropdown = false;
3233
3233
  }
3234
3234
  ngOnInit() {
3235
+ // this.setRangesBasedOnRoute();
3236
+ // Listen for route changes to update ranges
3237
+ // this.router?.events?.subscribe((event) => {
3238
+ // if (event instanceof NavigationEnd) {
3239
+ // this.setRangesBasedOnRoute();
3240
+ // }
3241
+ // });
3242
+ this.url = this.router.url.split("?")[0].split('/');
3243
+ const user = JSON.parse(localStorage.getItem('user-info'));
3244
+ this.users = user;
3245
+ this.gs?.manageRefreshTrigger?.subscribe((e) => {
3246
+ if (e) {
3247
+ if (user.userType === 'tango') {
3248
+ this.getClient();
3249
+ }
3250
+ else {
3251
+ const storedFilters = localStorage.getItem("header-filters");
3252
+ if (storedFilters) {
3253
+ const headerFilters = JSON.parse(storedFilters);
3254
+ this.filteredStores = headerFilters?.stores.map((store) => ({
3255
+ ...store,
3256
+ checked: store.checked
3257
+ }));
3258
+ }
3259
+ }
3260
+ }
3261
+ });
3262
+ // Fetch client data if the user is of type 'tango'
3263
+ if (user.userType === 'tango') {
3264
+ this.getClient();
3265
+ }
3266
+ else {
3267
+ this.getLocations();
3268
+ this.getGroups();
3269
+ this.getStore();
3270
+ // this.emitAndStoreFilters();
3271
+ // console.log("1")
3272
+ }
3273
+ // Load filters from localStorage if they exist
3274
+ const storedFilters = localStorage.getItem("header-filters");
3275
+ if (storedFilters) {
3276
+ const headerFilters = JSON.parse(storedFilters);
3277
+ // Initialize selectedFilters with defaults or existing values
3278
+ this.selectedFilters = {
3279
+ client: headerFilters.client || this.users.client,
3280
+ clientName: headerFilters.clientName || '',
3281
+ clients: headerFilters.clients || [],
3282
+ store: headerFilters.store || null,
3283
+ date: headerFilters.date || {},
3284
+ stores: headerFilters.stores || [],
3285
+ group: headerFilters.group || [],
3286
+ location: headerFilters.location || []
3287
+ };
3288
+ // Sync filtered data with stored selections
3289
+ this.filteredLocations = this.syncWithLocalStorage(headerFilters.location);
3290
+ this.filteredGroups = this.syncWithLocalStorage(headerFilters.group);
3291
+ this.filteredStores = this.syncWithLocalStorage(headerFilters.stores);
3292
+ // Format date range if it exists
3293
+ if (headerFilters.date) {
3294
+ this.selectedDateRange = {
3295
+ startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
3296
+ endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
3297
+ };
3298
+ }
3299
+ else {
3300
+ this.selectedDateRange = {
3301
+ startDate: this.dayjs(this.selectedDateRange.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
3302
+ endDate: this.dayjs(this.selectedDateRange.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
3303
+ };
3304
+ }
3305
+ // console.log("3")
3306
+ // Emit data via service and update localStorage
3307
+ this.emitAndStoreFilters();
3308
+ }
3309
+ else {
3310
+ // Initialize empty states if no header filters are present in localStorage
3311
+ this.resetFilters();
3312
+ // console.log("2")
3313
+ }
3314
+ }
3315
+ syncWithLocalStorage(items) {
3316
+ return items
3317
+ ? items.map((item) => ({
3318
+ ...item,
3319
+ checked: item.checked === true
3320
+ }))
3321
+ : [];
3322
+ }
3323
+ emitAndStoreFilters() {
3324
+ this.gs.dataRangeValue.next(this.selectedFilters);
3325
+ localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
3326
+ // console.log("1")
3327
+ }
3328
+ /**
3329
+ * Reset selectedFilters and all related arrays to empty states
3330
+ */
3331
+ resetFilters() {
3332
+ this.selectedFilters = {
3333
+ client: null,
3334
+ clientName: '',
3335
+ clients: [],
3336
+ store: null,
3337
+ date: {},
3338
+ stores: [],
3339
+ group: [],
3340
+ location: []
3341
+ };
3342
+ this.filteredLocations = [];
3343
+ this.filteredGroups = [];
3344
+ this.filteredStores = [];
3345
+ }
3346
+ getClient() {
3347
+ this.auth.getClients().subscribe({
3348
+ next: (e) => {
3349
+ if (e) {
3350
+ this.clientList = e.data.result;
3351
+ const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
3352
+ if (headerFilters.client) {
3353
+ this.clientList.find((obj) => {
3354
+ if (obj.clientId === headerFilters.client) {
3355
+ this.selectedClient = obj;
3356
+ }
3357
+ });
3358
+ this.selectedFilters.client = headerFilters.client;
3359
+ this.selectedFilters.clientName = headerFilters.clientName;
3360
+ this.selectedFilters.clients = headerFilters.clients;
3361
+ this.selectedFilters.store = headerFilters.store;
3362
+ this.selectedFilters.date = headerFilters.date;
3363
+ this.selectedFilters.stores = headerFilters.stores;
3364
+ this.selectedFilters.group = headerFilters.group;
3365
+ this.selectedFilters.location = headerFilters.location;
3366
+ this.gs.dataRangeValue.next(this.selectedFilters);
3367
+ // console.log("2")
3368
+ // Ensure locations and groups are loaded before fetching stores
3369
+ this.getLocations();
3370
+ this.getGroups();
3371
+ // Fetch stores only after locations and groups are set
3372
+ this.getStore();
3373
+ }
3374
+ else {
3375
+ this.selectedClient = this.clientList[0];
3376
+ this.selectedFilters.client = this.selectedClient.clientId;
3377
+ this.selectedFilters.clientName = this.selectedClient.clientName;
3378
+ this.selectedFilters.clients = headerFilters.clients;
3379
+ this.selectedFilters.store = headerFilters.store;
3380
+ this.selectedFilters.date = headerFilters.date;
3381
+ this.selectedFilters.stores = headerFilters.stores;
3382
+ this.selectedFilters.group = headerFilters.group;
3383
+ this.selectedFilters.location = headerFilters.location;
3384
+ localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
3385
+ this.gs.dataRangeValue.next(this.selectedFilters);
3386
+ // console.log("3")
3387
+ this.cd.detectChanges();
3388
+ // Ensure locations and groups are loaded before fetching stores
3389
+ this.getLocations();
3390
+ this.getGroups();
3391
+ // Fetch stores only after locations and groups are set
3392
+ this.getStore();
3393
+ }
3394
+ }
3395
+ else {
3396
+ this.selectedClient = this.clientList[0];
3397
+ this.selectedFilters.client = this.selectedClient.clientId;
3398
+ this.selectedFilters.clientName = this.selectedClient.clientName;
3399
+ // Ensure locations and groups are loaded before fetching stores
3400
+ this.getLocations();
3401
+ this.getGroups();
3402
+ // Fetch stores only after locations and groups are set
3403
+ this.getStore();
3404
+ localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
3405
+ this.gs.dataRangeValue.next(this.selectedFilters);
3406
+ // console.log("4")
3407
+ this.cd.detectChanges();
3408
+ }
3409
+ },
3410
+ });
3411
+ }
3412
+ onClientSelect(event) {
3413
+ // Update the selected client
3414
+ this.selectedClient = event;
3415
+ // Clear previous filtered data and selections
3416
+ this.filteredGroups = [];
3417
+ this.filteredStores = [];
3418
+ this.filteredLocations = [];
3419
+ this.selectedFilters.stores = [];
3420
+ this.selectedFilters.group = [];
3421
+ this.selectedFilters.location = [];
3422
+ // Fetch header filters from localStorage
3423
+ const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
3424
+ // Update the selected filters with the new client
3425
+ this.selectedFilters.client = this.selectedClient.clientId;
3426
+ this.selectedFilters.clientName = this.selectedClient.clientName;
3427
+ // Remove old store, group, and location data from the header filters
3428
+ delete headerFilters.stores;
3429
+ delete headerFilters.groups;
3430
+ delete headerFilters.location;
3431
+ // Fetch new data based on the new client
3432
+ this.getLocations();
3433
+ this.getStore();
3434
+ this.getGroups();
3435
+ // Update localStorage with the new client selection and empty filter data
3436
+ localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
3437
+ window.location.reload();
3438
+ // Emit data to the global service
3439
+ // this.gs.dataRangeValue.next(this.selectedFilters);
3440
+ // Trigger change detection to reflect UI changes
3441
+ this.cd.detectChanges();
3442
+ }
3443
+ ranges = {
3444
+ Today: [dayjs(), dayjs()],
3445
+ Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
3446
+ 'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
3447
+ 'Last Week': [
3448
+ dayjs().subtract(14, 'days').startOf('day'),
3449
+ dayjs().subtract(8, 'days').endOf('day'),
3450
+ ],
3451
+ 'This Month': [dayjs().subtract(30, 'days'), dayjs().subtract(1, 'days')],
3452
+ 'Last Month': [
3453
+ dayjs().subtract(1, 'month').startOf('month'),
3454
+ dayjs().subtract(1, 'month').endOf('month'),
3455
+ ],
3456
+ };
3457
+ onStartDateChange(event) {
3458
+ if (this.dayjs(event.startDate).isValid()) {
3459
+ this.isCustomDate = (m) => {
3460
+ const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
3461
+ return isValidDate ? "invalid-date" : false;
3462
+ };
3463
+ }
3464
+ }
3465
+ datechange(event) {
3466
+ if (event && event.startDate && event.endDate) {
3467
+ if (this.dayjs(event.startDate).isValid() &&
3468
+ this.dayjs(event.endDate).isValid()) {
3469
+ this.selectedDateRange.startDate = event.startDate;
3470
+ this.selectedDateRange.endDate = event.endDate;
3471
+ var datetime = {
3472
+ startDate: this.dayjs(event.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
3473
+ endDate: this.dayjs(event.endDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
3474
+ };
3475
+ this.selectedFilters.date = datetime;
3476
+ localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
3477
+ window.location.reload();
3478
+ // this.gs.dataRangeValue.next(this.selectedFilters);
3479
+ }
3480
+ }
3481
+ }
3482
+ opendropdown(e) {
3483
+ e.stopPropagation();
3484
+ this.Opendropdown = !this.Opendropdown;
3485
+ }
3486
+ getLocations() {
3487
+ // const headerFilters: any = JSON.parse(localStorage.getItem("header-filters") || "{}");
3488
+ let obj = {
3489
+ clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
3490
+ city: [],
3491
+ group: [],
3492
+ };
3493
+ this.auth.getLocation(obj).subscribe({
3494
+ next: (res) => {
3495
+ let cityList = this.selectedFilters?.location?.filter((location) => location.checked).map((loc) => loc.city);
3496
+ // Map the fetched locations with default unchecked state
3497
+ this.locations = res?.data?.locationData.map((city) => ({
3498
+ city: city.city,
3499
+ checked: cityList?.includes(city.city) ? true : false,
3500
+ }));
3501
+ // Sync the fetched locations with any stored checked values in localStorage
3502
+ if (this.selectedFilters.location && Array.isArray(this.selectedFilters.location)) {
3503
+ this.filteredLocations = this.locations.map(location => {
3504
+ const matchedLocation = this.selectedFilters.location.find((loc) => loc.city === location.city);
3505
+ return matchedLocation ? { ...location, checked: matchedLocation.checked } : location;
3506
+ });
3507
+ }
3508
+ else {
3509
+ this.filteredLocations = this.locations;
3510
+ }
3511
+ if (this.searchLocationText) {
3512
+ this.filteredLocations = this.locations.filter((location) => location.city.toLowerCase().includes(this.searchLocationText.toLowerCase()));
3513
+ }
3514
+ },
3515
+ error: (err) => {
3516
+ console.error("Failed to fetch locations", err);
3517
+ },
3518
+ });
3519
+ }
3520
+ isAllLocationsSelected() {
3521
+ return this.filteredLocations.every(location => location.checked);
3522
+ }
3523
+ selectedLocationsLabel() {
3524
+ const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
3525
+ .filter(location => location.checked).map(location => location.city) : this.filteredLocations
3526
+ .filter(location => location.checked).map(location => location.city);
3527
+ return selectedLocations.length === 0
3528
+ ? ''
3529
+ : selectedLocations.length === 1
3530
+ ? selectedLocations[0]
3531
+ : `${selectedLocations.length} locations`;
3532
+ }
3533
+ removeLocation() {
3534
+ this.Reset();
3535
+ }
3536
+ getGroups() {
3537
+ const city = this.locations
3538
+ .filter(location => location.checked)
3539
+ .map(location => location.city);
3540
+ const obj = { city, clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId, group: [] };
3541
+ this.auth.getGroups(obj).subscribe({
3542
+ next: (res) => {
3543
+ let checkedGroup = this.selectedFilters?.group?.filter((group) => group.checked).map((group) => group.groupName);
3544
+ const combinedGroups = res?.data?.groupData?.map((groupName) => ({
3545
+ groupName: groupName.groupName,
3546
+ checked: checkedGroup?.includes(groupName.groupName) ? true : false,
3547
+ }));
3548
+ this.groupsData = combinedGroups;
3549
+ if (this.searchGroupText.length) {
3550
+ this.filteredGroups = combinedGroups.filter((item) => item.groupName.toLowerCase().includes(this.searchGroupText));
3551
+ }
3552
+ else {
3553
+ this.filteredGroups = combinedGroups;
3554
+ }
3555
+ // Auto-fetch stores when groups are selected
3556
+ const selectedGroups = this.groupsData.filter((group) => group.checked).map((group) => group.groupName);
3557
+ if (selectedGroups.length > 0) {
3558
+ this.getStore(); // Fetch stores based on selected groups
3559
+ }
3560
+ },
3561
+ error: (err) => {
3562
+ console.error("Failed to fetch groups", err);
3563
+ },
3564
+ });
3565
+ }
3566
+ toggleDropdown(type) {
3567
+ if (this.dropdownOpen === type) {
3568
+ // If the dropdown is open, close it and avoid resetting the selected values unnecessarily
3569
+ this.dropdownOpen = null;
3570
+ }
3571
+ else {
3572
+ // Open the specific dropdown and handle data fetching only if necessary
3573
+ this.dropdownOpen = type;
3574
+ if (type === 'group') {
3575
+ // Fetch groups only if there are selected cities and no active search text
3576
+ const selectedCities = this.locations
3577
+ .filter((location) => location.checked)
3578
+ .map((location) => location.city);
3579
+ // Fetch groups only if locations are selected, no search text exists, and dropdown is opened
3580
+ if (this.filteredLocations.length > 0 || (selectedCities.length > 0 && !this.searchGroupText.trim())) {
3581
+ this.getGroups();
3582
+ }
3583
+ else {
3584
+ this.filteredGroups = []; // Clear groups if no locations are selected
3585
+ }
3586
+ }
3587
+ if (type === 'store') {
3588
+ // Fetch stores only if not already fetched and no search text is active
3589
+ if ((!this.filteredStores || this.filteredStores.length === 0) && !this.searchStoreText.trim()) {
3590
+ this.getStore();
3591
+ }
3592
+ }
3593
+ }
3594
+ }
3595
+ handleGroupDropdownClick() {
3596
+ if (this.dropdownOpen === 'group') {
3597
+ this.resetSelectedGroups();
3598
+ }
3599
+ this.toggleDropdown('group');
3600
+ }
3601
+ resetSelectedGroups() {
3602
+ this.filteredGroups.forEach((group) => (group.checked = false));
3603
+ this.searchGroupText = "";
3604
+ }
3605
+ selectedGroupsLabel() {
3606
+ const selectedGroups = this.groupLabel = this.searchGroupText.length ? this.groupsData.filter((group) => group.checked) : this.filteredGroups.filter((group) => group.checked);
3607
+ return selectedGroups.length === 0
3608
+ ? ""
3609
+ : selectedGroups.length === 1
3610
+ ? selectedGroups[0].groupName
3611
+ : `${selectedGroups.length} groups`;
3612
+ }
3613
+ removeGroup() {
3614
+ this.Reset();
3615
+ }
3616
+ isAllGroupsSelected() {
3617
+ return this.filteredGroups.length ? this.filteredGroups.every((group) => group.checked) : false;
3618
+ }
3619
+ getStore() {
3620
+ const city = this.locations
3621
+ .filter(location => location.checked)
3622
+ .map(location => location.city);
3623
+ const group = this.groupsData
3624
+ .filter(group => group.checked)
3625
+ .map(group => group.groupName);
3626
+ const data = { city, clusters: group, clientId: this.users.clientId ? this.users.clientId : this.selectedFilters.client };
3627
+ this.auth.getHeaderStores(data).subscribe({
3628
+ next: (res) => {
3629
+ this.stores = res.data.storesData;
3630
+ // Retrieve checked store IDs from selectedFilters
3631
+ const checkedStoreIds = this.selectedFilters?.stores
3632
+ ? this.selectedFilters.stores.filter((store) => store.checked).map((store) => store.storeId)
3633
+ : [];
3634
+ this.stores.forEach(store => {
3635
+ if (checkedStoreIds.includes(store.storeId)) {
3636
+ store.checked = true; // Sync the checked state with full store list
3637
+ }
3638
+ });
3639
+ // Map the stores and retain the 'checked' status
3640
+ if (this.searchStoreText.length) {
3641
+ this.filteredStores = this.stores?.filter(store => store.storeName.toLowerCase().includes(this.searchStoreText));
3642
+ }
3643
+ else {
3644
+ this.filteredStores = this.stores;
3645
+ }
3646
+ // Ensure selectedFilters is in sync with filteredStores
3647
+ if (!this.selectedFilters.stores || !this.selectedFilters.stores.length) {
3648
+ this.stores.forEach(store => {
3649
+ store.checked = true; // Sync the checked state with full store list
3650
+ });
3651
+ // No previously selected stores, mark all as checked
3652
+ this.filteredStores = this.selectedFilters.stores = this.filteredStores.map(store => ({
3653
+ ...store,
3654
+ checked: true
3655
+ }));
3656
+ }
3657
+ else {
3658
+ // Update selectedFilters to reflect current state of stores
3659
+ this.selectedFilters.stores = this.filteredStores.map(store => ({
3660
+ ...store,
3661
+ checked: store.checked
3662
+ }));
3663
+ }
3664
+ // Update localStorage with the latest selectedFilters
3665
+ localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
3666
+ // Emit data via service
3667
+ // this.gs.dataRangeValue.next(this.selectedFilters);
3668
+ // Trigger change detection to reflect changes in the UI
3669
+ this.cd.detectChanges();
3670
+ },
3671
+ error: (err) => {
3672
+ console.error("Failed to fetch stores", err);
3673
+ },
3674
+ });
3675
+ }
3676
+ resetSelectedStores() {
3677
+ this.filteredStores.forEach((store) => (store.checked = false));
3678
+ this.searchStoreText = "";
3679
+ }
3680
+ selectedStoresLabel() {
3681
+ const selectedStores = this.searchStoreText.length ? this.stores.filter((store) => store.checked) : this.filteredStores.filter((store) => store.checked);
3682
+ return selectedStores.length === 0
3683
+ ? "0 Stores"
3684
+ : selectedStores.length === 1
3685
+ ? selectedStores[0].storeName
3686
+ : `${selectedStores.length} Stores`;
3687
+ }
3688
+ isAllStoresSelected() {
3689
+ return this.filteredStores.length > 0 && this.filteredStores.every(store => store.checked);
3690
+ }
3691
+ // Method to handle dropdown item selection
3692
+ updateSelectedStores() {
3693
+ this.filteredStores.forEach(store => {
3694
+ const filteredStore = this.stores.findIndex(fStore => fStore.storeId === store.storeId);
3695
+ if (filteredStore != -1) {
3696
+ this.stores[filteredStore].checked = store.checked; // Sync the checked state with full store list
3697
+ }
3698
+ });
3699
+ // Update selectedFilters based on the current store selection
3700
+ this.selectedFilters.stores = this.stores.filter(store => store.checked);
3701
+ // Update localStorage with the latest selection
3702
+ localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
3703
+ // Emit updated filters via service
3704
+ // this.gs.dataRangeValue.next(this.selectedFilters);
3705
+ // Trigger change detection if necessary
3706
+ this.cd.detectChanges();
3707
+ }
3708
+ toggleSelectAllLocations(event) {
3709
+ const isChecked = event.target.checked;
3710
+ this.filteredLocations.forEach((location) => (location.checked = isChecked));
3711
+ this.updateSelectedLocations();
3712
+ }
3713
+ toggleSelectAllStores(event) {
3714
+ const checked = event.target.checked;
3715
+ // Apply the selection to both filtered and full list of stores
3716
+ this.filteredStores.forEach(store => store.checked = checked);
3717
+ this.stores.forEach(store => {
3718
+ const filteredStore = this.filteredStores.find(fStore => fStore.storeId === store.storeId);
3719
+ if (filteredStore) {
3720
+ store.checked = checked; // Sync the checked state with full store list
3721
+ }
3722
+ });
3723
+ // Update the selected stores and persist the selection
3724
+ this.updateSelectedStores();
3725
+ }
3726
+ updateSelectedLocations() {
3727
+ // When locations are selected, fetch the related groups
3728
+ const selectedCities = this.filteredLocations
3729
+ .filter((location) => location.checked)
3730
+ .map((location) => location.city);
3731
+ this.filteredLocations.forEach((location) => {
3732
+ let findLocationIndex = this.locations.findIndex((loc) => loc.city == location.city);
3733
+ if (findLocationIndex != -1) {
3734
+ this.locations[findLocationIndex].checked = location.checked;
3735
+ }
3736
+ });
3737
+ if (selectedCities.length > 0 || !selectedCities.length) {
3738
+ this.selectedFilters.stores = [];
3739
+ this.selectedFilters.location = this.locations;
3740
+ this.getGroups(); // Fetch groups based on selected cities
3741
+ // If there are selected groups, fetch the stores based on selected groups
3742
+ this.getStore();
3743
+ }
3744
+ else {
3745
+ this.filteredGroups = []; // Clear groups if no locations are selected
3746
+ this.selectedFilters.location = [];
3747
+ }
3748
+ this.selectedFilters.group = [];
3749
+ this.filteredStores = []; // Reset stores as well
3750
+ this.searchGroupText = '';
3751
+ this.searchStoreText = '';
3752
+ // this.Opendropdown = false;
3753
+ }
3754
+ toggleSelectAllGroups(event) {
3755
+ const isChecked = event.target.checked;
3756
+ this.filteredGroups.forEach((group) => (group.checked = isChecked));
3757
+ this.updateSelectedGroups();
3758
+ // if (!isChecked) {
3759
+ // this.selectedFilters.stores =[];
3760
+ // // If there are selected groups, fetch the stores based on selected groups
3761
+ // this.getStore();
3762
+ // }
3763
+ }
3764
+ updateSelectedGroups() {
3765
+ // Fetch the relevant stores after groups are selected
3766
+ const selectedGroups = this.filteredGroups
3767
+ .filter((group) => group.checked)
3768
+ .map((group) => group.groupName);
3769
+ this.filteredGroups.forEach((group) => {
3770
+ let findGroupIndex = this.groupsData.findIndex((item) => item.groupName == group.groupName);
3771
+ if (findGroupIndex != -1) {
3772
+ this.groupsData[findGroupIndex].checked = group.checked;
3773
+ }
3774
+ });
3775
+ if (selectedGroups.length > 0 || !selectedGroups.length) {
3776
+ this.selectedFilters.stores = [];
3777
+ // If there are selected groups, fetch the stores based on selected groups
3778
+ this.getStore();
3779
+ this.selectedFilters.group = this.groupsData;
3780
+ }
3781
+ else {
3782
+ // If no groups are selected, clear the stores list
3783
+ this.filteredStores = [];
3784
+ // Also, update localStorage to reflect the cleared store selection
3785
+ this.selectedFilters.stores = [];
3786
+ localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
3787
+ // Emit data via service
3788
+ // this.gs.dataRangeValue.next(this.selectedFilters);
3789
+ }
3790
+ // Clear the search store text when groups are updated
3791
+ this.searchStoreText = '';
3792
+ }
3793
+ Reset() {
3794
+ // Clear selected groups, stores, and locations
3795
+ this.filteredGroups = [];
3796
+ this.filteredStores = [];
3797
+ this.filteredLocations = []; // Reset locations as well
3798
+ // Clear search input fields
3799
+ this.searchLocationText = "";
3800
+ this.searchGroupText = "";
3801
+ this.searchStoreText = "";
3802
+ // Fetch locations, groups, and stores again
3803
+ this.getLocations();
3804
+ this.getStore();
3805
+ this.getGroups();
3806
+ // Reset the filters in selectedFilters
3807
+ this.selectedFilters = {
3808
+ ...this.selectedFilters,
3809
+ stores: [],
3810
+ group: [],
3811
+ location: [] // Clear locations selection
3812
+ };
3813
+ // // Once stores are fetched, mark all as checked
3814
+ // setTimeout(() => {
3815
+ // this.filteredStores = this.stores.map(store => ({
3816
+ // ...store,
3817
+ // checked: true // Mark all stores as checked
3818
+ // }));
3819
+ // // Sync selectedFilters with the updated store state
3820
+ // this.selectedFilters.stores = this.filteredStores.map(store => ({
3821
+ // ...store,
3822
+ // checked: true
3823
+ // }));
3824
+ // Update localStorage with the latest selectedFilters
3825
+ localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
3826
+ window.location.reload();
3827
+ // Emit the reset filters to update other components if needed
3828
+ // this.gs.dataRangeValue.next(this.selectedFilters);
3829
+ // Trigger change detection
3830
+ this.cd.detectChanges();
3831
+ // Adding a slight delay to ensure stores are fetched first
3832
+ // Close dropdown after reset if necessary
3833
+ this.Opendropdown = false;
3834
+ }
3835
+ Apply() {
3836
+ // Close the dropdown
3837
+ this.Opendropdown = false;
3838
+ // Fetch existing filters from localStorage
3839
+ const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
3840
+ // Ensure current selections are reflected
3841
+ this.selectedFilters.location = this.locations;
3842
+ this.selectedFilters.group = this.groupsData;
3843
+ this.selectedFilters.stores = headerFilters.stores ? headerFilters.stores : this.stores;
3844
+ // Store updated filters back in localStorage
3845
+ localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
3846
+ window.location.reload();
3847
+ // Emit the updated filters via the service
3848
+ // this.gs.dataRangeValue.next(this.selectedFilters);
3849
+ // Trigger refresh if necessary
3850
+ // this.gs.manageRefreshTrigger.next(true);
3851
+ this.cd.detectChanges();
3852
+ }
3853
+ filterLocations() {
3854
+ const searchText = this.searchLocationText.toLowerCase();
3855
+ if (searchText) {
3856
+ // Preserve the checked state during filtering
3857
+ this.filteredLocations = this.locations
3858
+ .map(location => ({
3859
+ ...location,
3860
+ checked: this.filteredLocations.find(l => l.city === location.city)?.checked || false
3861
+ }))
3862
+ .filter(location => location?.city?.toLowerCase().includes(searchText));
3863
+ }
3864
+ else {
3865
+ // Restore the original checked state when search text is cleared
3866
+ this.filteredLocations = this.locations.map(location => ({
3867
+ ...location,
3868
+ checked: this.selectedFilters.location.find((l) => l.city === location.city)?.checked || false
3869
+ }));
3870
+ }
3871
+ }
3872
+ filterGroups() {
3873
+ const searchText = this.searchGroupText.toLowerCase();
3874
+ if (searchText) {
3875
+ // Preserve the checked state during filtering
3876
+ this.filteredGroups = this.groupsData
3877
+ .map(group => ({
3878
+ ...group,
3879
+ checked: this.filteredGroups.find(g => g.groupName === group.groupName)?.checked || false
3880
+ }))
3881
+ .filter(group => group?.groupName?.toLowerCase().includes(searchText));
3882
+ }
3883
+ else {
3884
+ // Restore the original checked state when search text is cleared
3885
+ this.filteredGroups = this.groupsData.map(group => ({
3886
+ ...group,
3887
+ checked: this.selectedFilters.group.find((g) => g.groupName === group.groupName)?.checked || false
3888
+ }));
3889
+ }
3890
+ }
3891
+ filterStores() {
3892
+ const searchText = this.searchStoreText.toLowerCase();
3893
+ // Preserve checked states during filtering
3894
+ if (searchText) {
3895
+ // Filter based on search text while preserving checked state
3896
+ this.filteredStores = this.stores
3897
+ .map(store => ({
3898
+ ...store,
3899
+ // Check if the store is already checked in filteredStores, fallback to original stores' checked state
3900
+ checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked || store.checked || false
3901
+ }))
3902
+ .filter(store => store.storeName.toLowerCase().includes(searchText));
3903
+ }
3904
+ else {
3905
+ // When the search text is cleared, restore the original list with preserved checked states
3906
+ this.filteredStores = this.stores.map(store => ({
3907
+ ...store,
3908
+ // Preserve the checked state based on the selected filters
3909
+ checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked || store.checked || false
3910
+ }));
3911
+ }
3912
+ }
3913
+ closeDropdown() {
3914
+ this.dropdownOpen = null;
3915
+ }
3916
+ clickOutside(event) {
3917
+ const clickedInside = event.target.closest(".dropdown-container");
3918
+ const clickedoutSide = event.target.closest(".dropdown1");
3919
+ if (!clickedInside) {
3920
+ this.closeDropdown();
3921
+ }
3922
+ if (!clickedoutSide) {
3923
+ this.closeDropdown1();
3924
+ }
3925
+ }
3926
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
3927
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i3$2.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: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
3928
+ }
3929
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, decorators: [{
3930
+ type: Component,
3931
+ args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
3932
+ }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
3933
+ type: HostListener,
3934
+ args: ['document:click', ['$event']]
3935
+ }], clickOutside: [{
3936
+ type: HostListener,
3937
+ args: ["document:click", ["$event"]]
3938
+ }] } });
3939
+
3940
+ class TraxHeaderComponent {
3941
+ auth;
3942
+ router;
3943
+ gs;
3944
+ cd;
3945
+ dayjs = dayjs;
3946
+ isCustomDate = (m) => {
3947
+ const isValidDate = m > this.dayjs();
3948
+ return isValidDate ? "invalid-date" : false;
3949
+ };
3950
+ selectedDateRange = { startDate: dayjs().subtract(30, 'days'),
3951
+ endDate: dayjs().subtract(1, "days"), };
3952
+ selectedFilters = {
3953
+ client: null,
3954
+ clientName: null,
3955
+ clients: [],
3956
+ store: null,
3957
+ stores: [],
3958
+ date: null,
3959
+ group: [],
3960
+ location: [],
3961
+ };
3962
+ Opendropdown = false;
3963
+ dropdownOpen = null; // 'location' or 'group'
3964
+ searchLocationText = "";
3965
+ searchGroupText = "";
3966
+ locations = [];
3967
+ filteredLocations = [];
3968
+ groupsData = [];
3969
+ filteredGroups = [];
3970
+ filteredStores = [];
3971
+ stores = [];
3972
+ searchStoreText = '';
3973
+ clientList = [];
3974
+ selectedClient;
3975
+ locationLabel = [];
3976
+ groupLabel = [];
3977
+ users;
3978
+ url;
3979
+ constructor(auth, router, gs, cd) {
3980
+ this.auth = auth;
3981
+ this.router = router;
3982
+ this.gs = gs;
3983
+ this.cd = cd;
3984
+ }
3985
+ onClick(event) {
3986
+ const target = event.target;
3987
+ if (!target.closest('.dropdown1')) {
3988
+ this.Opendropdown = false;
3989
+ }
3990
+ }
3991
+ closeDropdown1() {
3992
+ this.Opendropdown = false;
3993
+ }
3994
+ ngOnInit() {
3995
+ // this.setRangesBasedOnRoute();
3996
+ // Listen for route changes to update ranges
3997
+ // this.router?.events?.subscribe((event) => {
3998
+ // if (event instanceof NavigationEnd) {
3999
+ // this.setRangesBasedOnRoute();
4000
+ // }
4001
+ // });
3235
4002
  this.url = this.router.url.split("?")[0].split('/');
3236
4003
  const user = JSON.parse(localStorage.getItem('user-info'));
3237
4004
  this.users = user;
@@ -3284,10 +4051,21 @@ class TrafficHeaderComponent {
3284
4051
  this.filteredStores = this.syncWithLocalStorage(headerFilters.stores);
3285
4052
  // Format date range if it exists
3286
4053
  if (headerFilters.date) {
3287
- this.selectedDateRange = {
3288
- startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
3289
- endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
3290
- };
4054
+ const startDate = this.dayjs(headerFilters.date.startDate);
4055
+ const endDate = this.dayjs(headerFilters.date.endDate);
4056
+ const differenceInDays = endDate.diff(startDate, 'days');
4057
+ if (differenceInDays >= 7) {
4058
+ this.selectedDateRange = {
4059
+ startDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").subtract(6, "days").format("DD-MM-YYYY"),
4060
+ endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
4061
+ };
4062
+ }
4063
+ else {
4064
+ this.selectedDateRange = {
4065
+ startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
4066
+ endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
4067
+ };
4068
+ }
3291
4069
  }
3292
4070
  else {
3293
4071
  this.selectedDateRange = {
@@ -3434,39 +4212,28 @@ class TrafficHeaderComponent {
3434
4212
  this.cd.detectChanges();
3435
4213
  }
3436
4214
  ranges = {
3437
- Today: [this.dayjs(), this.dayjs()],
3438
- Yesterday: [
3439
- this.dayjs().subtract(1, "days"),
3440
- this.dayjs().subtract(1, "days"),
3441
- ],
3442
- "This Week": [this.dayjs().subtract(7, "days"), this.dayjs().subtract(1, "days")],
3443
- "Last Week": [
3444
- this.dayjs().subtract(14, "days").startOf("days"),
3445
- this.dayjs().subtract(8, "days").endOf("days"),
3446
- ],
3447
- "This Month": [
3448
- this.dayjs().subtract(30, "days"),
3449
- this.dayjs().subtract(1, "days") // End date is Yesterday
3450
- ],
3451
- "Last Month": [
3452
- this.dayjs().subtract(1, "month").startOf("month"),
3453
- this.dayjs().subtract(1, "month").endOf("month"),
4215
+ Today: [dayjs(), dayjs()],
4216
+ Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
4217
+ 'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
4218
+ 'Last Week': [
4219
+ dayjs().subtract(14, 'days').startOf('day'),
4220
+ dayjs().subtract(8, 'days').endOf('day'),
3454
4221
  ],
3455
4222
  };
3456
4223
  onStartDateChange(event) {
3457
4224
  if (this.dayjs(event.startDate).isValid()) {
3458
- if (this.url[2] === 'trax') {
3459
- this.isCustomDate = (m) => {
3460
- const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(6, "days"));
3461
- return isValidDate ? "invalid-date" : false;
3462
- };
3463
- }
3464
- else {
3465
- this.isCustomDate = (m) => {
3466
- const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
3467
- return isValidDate ? "invalid-date" : false;
3468
- };
3469
- }
4225
+ // if(this.url[2] ==='trax'){
4226
+ this.isCustomDate = (m) => {
4227
+ const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(6, "days"));
4228
+ return isValidDate ? "invalid-date" : false;
4229
+ };
4230
+ // } else {
4231
+ // this.isCustomDate = (m: dayjs.Dayjs) => {
4232
+ // const isValidDate =
4233
+ // m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
4234
+ // return isValidDate ? "invalid-date" : false;
4235
+ // };
4236
+ // }
3470
4237
  }
3471
4238
  }
3472
4239
  datechange(event) {
@@ -3623,37 +4390,6 @@ class TrafficHeaderComponent {
3623
4390
  isAllGroupsSelected() {
3624
4391
  return this.filteredGroups.length ? this.filteredGroups.every((group) => group.checked) : false;
3625
4392
  }
3626
- // getStore1(): void {
3627
- // const city = this.filteredLocations
3628
- // .filter(location => location.checked)
3629
- // .map(location => location.city);
3630
- // const group = this.filteredGroups
3631
- // .filter(group => group.checked)
3632
- // .map(group => group.groupName);
3633
- // this.auth.getHeaderStores(data).subscribe({
3634
- // next: (res: any) => {
3635
- // this.stores = res.data.storesData;
3636
- // // Get stores from response
3637
- // // Retrieve checked store IDs from selectedFilters
3638
- // const checkedStoreIds = this.selectedFilters?.stores
3639
- // ? this.selectedFilters.stores.filter((store: any) => store.checked).map((store: any) => store.storeId)
3640
- // : [];
3641
- // this.stores.forEach(store => {
3642
- // if (checkedStoreIds.includes(store.storeId)) {
3643
- // store.checked = true; // Sync the checked state with full store list
3644
- // }
3645
- // });
3646
- // localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
3647
- // // Emit data via service
3648
- // // this.gs.dataRangeValue.next(this.selectedFilters);
3649
- // // Trigger change detection to reflect changes in the UI
3650
- // this.cd.detectChanges();
3651
- // },
3652
- // error: (err) => {
3653
- // console.error("Failed to fetch stores", err);
3654
- // },
3655
- // });
3656
- // }
3657
4393
  getStore() {
3658
4394
  const city = this.locations
3659
4395
  .filter(location => location.checked)
@@ -3961,13 +4697,13 @@ class TrafficHeaderComponent {
3961
4697
  this.closeDropdown1();
3962
4698
  }
3963
4699
  }
3964
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, deps: [{ token: AuthService }, { token: i1.Router }, { token: i1$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
3965
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i3$2.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: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
4700
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxHeaderComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
4701
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxHeaderComponent, selector: "lib-trax-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i3$2.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: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
3966
4702
  }
3967
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, decorators: [{
4703
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxHeaderComponent, decorators: [{
3968
4704
  type: Component,
3969
- args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
3970
- }], ctorParameters: () => [{ type: AuthService }, { type: i1.Router }, { type: i1$1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
4705
+ args: [{ selector: 'lib-trax-header', template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n\r\n <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n (focus)=\"toggleDropdown('location')\" \r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All Locations\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
4706
+ }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
3971
4707
  type: HostListener,
3972
4708
  args: ['document:click', ['$event']]
3973
4709
  }], clickOutside: [{
@@ -4013,6 +4749,7 @@ class ToolbarComponent {
4013
4749
  date: null,
4014
4750
  };
4015
4751
  trafficdatepicker;
4752
+ traxdatepicker;
4016
4753
  constructor(layout, router, route, gs) {
4017
4754
  this.layout = layout;
4018
4755
  this.router = router;
@@ -4087,10 +4824,10 @@ class ToolbarComponent {
4087
4824
  URL == "/manage/stores" || URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" ||
4088
4825
  URL == "/manage/stores/addition-method" ||
4089
4826
  URL == "/manage/stores/add-single-store" || URL === "/manage/trax/gallery") {
4090
- this.setUIProperties(true, false, false, false, false, false);
4827
+ this.setUIProperties(true, false, false, false, false, false, false);
4091
4828
  }
4092
4829
  else if (url[3] == "edge-app") {
4093
- this.setUIProperties(false, false, false, false, true, false);
4830
+ this.setUIProperties(false, false, false, false, true, false, false);
4094
4831
  }
4095
4832
  else if (URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
4096
4833
  URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
@@ -4098,30 +4835,33 @@ class ToolbarComponent {
4098
4835
  URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
4099
4836
  // URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
4100
4837
  URL == `/manage/stores/mat?storeId=${this.storeId}`) {
4101
- this.setUIProperties(false, false, false, true, false, false);
4838
+ this.setUIProperties(false, false, false, true, false, false, false);
4102
4839
  }
4103
4840
  else if (URL == "/profile" || url[2] === "data-mismatch" || url[2] === "employeetraining"
4104
4841
  || URL == "/manage/brands" || URL == "/manage/users/tango" || (url[1] === "tickets" && url[2] === "audit")) {
4105
- this.setUIProperties(false, false, false, false, false, false);
4842
+ this.setUIProperties(false, false, false, false, false, false, false);
4106
4843
  }
4107
- else if (url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports" || url[2] == 'trax') {
4844
+ else if (url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports") {
4845
+ this.setUIProperties(false, false, false, false, false, true, false);
4846
+ }
4847
+ else if (url[2] == 'trax') {
4108
4848
  if (url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure'))) {
4109
- this.setUIProperties(false, false, false, false, false, false);
4849
+ this.setUIProperties(false, false, false, false, false, false, false);
4110
4850
  }
4111
4851
  else if (url[2] == 'trax' && url.includes('checklist')) {
4112
- this.setUIProperties(true, false, false, false, false, false);
4852
+ this.setUIProperties(true, false, false, false, false, false, false);
4113
4853
  }
4114
4854
  else {
4115
- this.setUIProperties(false, false, false, false, false, true);
4855
+ this.setUIProperties(false, false, false, false, false, false, true);
4116
4856
  }
4117
4857
  }
4118
4858
  else {
4119
- this.setUIProperties(false, false, false, false, true, false);
4859
+ this.setUIProperties(false, false, false, false, true, false, false);
4120
4860
  }
4121
4861
  }
4122
4862
  else {
4123
4863
  if (url[3] == "edge-app" || URL == "/notifications/alerts") {
4124
- this.setUIProperties(false, false, true, false, false, false);
4864
+ this.setUIProperties(false, false, true, false, false, false, false);
4125
4865
  }
4126
4866
  else if (URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
4127
4867
  URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
@@ -4129,49 +4869,53 @@ class ToolbarComponent {
4129
4869
  URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
4130
4870
  // URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
4131
4871
  URL == `/manage/stores/mat?storeId=${this.storeId}`) {
4132
- this.setUIProperties(false, false, false, true, false, false);
4872
+ this.setUIProperties(false, false, false, true, false, false, false);
4133
4873
  }
4134
4874
  else if (URL == "/profile" || URL == "/manage/users/client" || URL == "/manage/users/tango" ||
4135
4875
  URL == "/manage/stores" || URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=groups" || url[2] == "settings" ||
4136
4876
  URL == "/manage/stores/addition-method" ||
4137
4877
  URL == "/manage/stores/add-single-store" || url[2] === "data-mismatch" || url[2] === "employeetraining"
4138
- || URL == "/manage/users/tango") {
4139
- this.setUIProperties(false, false, false, false, false, false);
4878
+ || URL == "/manage/users/tango" || url[2] === 'controlcenter') {
4879
+ this.setUIProperties(false, false, false, false, false, false, false);
4880
+ }
4881
+ else if (url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports") {
4882
+ this.setUIProperties(false, false, false, false, false, true, false);
4140
4883
  }
4141
- else if (url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports" || url[2] == 'trax') {
4884
+ else if (url[2] == 'trax') {
4142
4885
  if (url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure'))) {
4143
- this.setUIProperties(false, false, false, false, false, false);
4886
+ this.setUIProperties(false, false, false, false, false, false, false);
4144
4887
  }
4145
4888
  else if (url[2] == 'trax' && url.includes('checklist')) {
4146
- this.setUIProperties(true, false, false, false, false, false);
4889
+ this.setUIProperties(true, false, false, false, false, false, false);
4147
4890
  }
4148
4891
  else {
4149
- this.setUIProperties(false, false, false, false, false, true);
4892
+ this.setUIProperties(false, false, false, false, false, false, true);
4150
4893
  }
4151
4894
  }
4152
4895
  else {
4153
- this.setUIProperties(false, false, true, false, false, false);
4896
+ this.setUIProperties(false, false, true, false, false, false, false);
4154
4897
  }
4155
4898
  }
4156
4899
  const viewsWithPageTitles = ["classic", "reports", "saas"];
4157
4900
  return (this.appPageTitleDisplay &&
4158
4901
  viewsWithPageTitles.some((t) => t === this.appToolbarLayout));
4159
4902
  }
4160
- setUIProperties(singleSelect, multiSelect, datepicker, singleStore, singleSelectdatepicker, trafficdatepicker) {
4903
+ setUIProperties(singleSelect, multiSelect, datepicker, singleStore, singleSelectdatepicker, trafficdatepicker, traxdatepicker) {
4161
4904
  this.singleSelect = singleSelect;
4162
4905
  this.multiSelect = multiSelect;
4163
4906
  this.datepicker = datepicker;
4164
4907
  this.singleStore = singleStore;
4165
4908
  this.singleSelectdatepicker = singleSelectdatepicker;
4166
4909
  this.trafficdatepicker = trafficdatepicker;
4910
+ this.traxdatepicker = traxdatepicker;
4167
4911
  }
4168
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$1.LayoutService }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
4169
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, selector: "lib-toolbar", inputs: { currentLayoutType: "currentLayoutType", appToolbarLayout: "appToolbarLayout" }, ngImport: i0, template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\" >\r\n <ng-container *ngIf=\"showPageTitle()\">\r\n <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n </lib-page-title>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleStore\">\r\n <lib-single-store class=\"d-flex align-items-center me-5\"></lib-single-store>\r\n </ng-container>\r\n <ng-container *ngIf=\"trafficdatepicker\">\r\n <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n </lib-reports>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageTitleComponent, selector: "lib-page-title", inputs: ["appPageTitleDirection", "appPageTitleBreadcrumb", "appPageTitleDescription"] }, { kind: "component", type: ClassicComponent, selector: "lib-classic" }, { kind: "component", type: ClientSettingsComponent, selector: "lib-client-settings" }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker" }, { kind: "component", type: DateSingleSelectComponent, selector: "lib-date-single-select" }, { kind: "component", type: SingleStoreComponent, selector: "lib-single-store" }, { kind: "component", type: TrafficHeaderComponent, selector: "lib-traffic-header" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
4912
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.LayoutService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
4913
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, selector: "lib-toolbar", inputs: { currentLayoutType: "currentLayoutType", appToolbarLayout: "appToolbarLayout" }, ngImport: i0, template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\" >\r\n <ng-container *ngIf=\"showPageTitle()\">\r\n <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n </lib-page-title>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleStore\">\r\n <lib-single-store class=\"d-flex align-items-center me-5\"></lib-single-store>\r\n </ng-container>\r\n <ng-container *ngIf=\"trafficdatepicker\">\r\n <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n </ng-container>\r\n <ng-container *ngIf=\"traxdatepicker\">\r\n <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n </lib-reports>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageTitleComponent, selector: "lib-page-title", inputs: ["appPageTitleDirection", "appPageTitleBreadcrumb", "appPageTitleDescription"] }, { kind: "component", type: ClassicComponent, selector: "lib-classic" }, { kind: "component", type: ClientSettingsComponent, selector: "lib-client-settings" }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker" }, { kind: "component", type: DateSingleSelectComponent, selector: "lib-date-single-select" }, { kind: "component", type: SingleStoreComponent, selector: "lib-single-store" }, { kind: "component", type: TrafficHeaderComponent, selector: "lib-traffic-header" }, { kind: "component", type: TraxHeaderComponent, selector: "lib-trax-header" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
4170
4914
  }
4171
4915
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
4172
4916
  type: Component,
4173
- args: [{ selector: "lib-toolbar", template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\" >\r\n <ng-container *ngIf=\"showPageTitle()\">\r\n <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n </lib-page-title>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleStore\">\r\n <lib-single-store class=\"d-flex align-items-center me-5\"></lib-single-store>\r\n </ng-container>\r\n <ng-container *ngIf=\"trafficdatepicker\">\r\n <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n </lib-reports>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n" }]
4174
- }], ctorParameters: () => [{ type: i1$1.LayoutService }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.GlobalStateService }], propDecorators: { currentLayoutType: [{
4917
+ args: [{ selector: "lib-toolbar", template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\" >\r\n <ng-container *ngIf=\"showPageTitle()\">\r\n <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n </lib-page-title>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n </ng-container>\r\n <ng-container *ngIf=\"singleStore\">\r\n <lib-single-store class=\"d-flex align-items-center me-5\"></lib-single-store>\r\n </ng-container>\r\n <ng-container *ngIf=\"trafficdatepicker\">\r\n <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n </ng-container>\r\n <ng-container *ngIf=\"traxdatepicker\">\r\n <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n </ng-container>\r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n </lib-reports>\r\n </ng-container>\r\n <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n" }]
4918
+ }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i1.GlobalStateService }], propDecorators: { currentLayoutType: [{
4175
4919
  type: Input
4176
4920
  }], appToolbarLayout: [{
4177
4921
  type: Input
@@ -4201,13 +4945,13 @@ class SidebarLogoComponent {
4201
4945
  ngOnDestroy() {
4202
4946
  this.unsubscribe.forEach((sb) => sb.unsubscribe());
4203
4947
  }
4204
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarLogoComponent, deps: [{ token: i1$1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
4948
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarLogoComponent, deps: [{ token: i1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
4205
4949
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarLogoComponent, selector: "lib-sidebar-logo", inputs: { toggleButtonClass: "toggleButtonClass", toggleEnabled: "toggleEnabled", toggleType: "toggleType", toggleState: "toggleState" }, ngImport: i0, template: "<!--begin::Logo image-->\r\n<a>\r\n <ng-container *ngIf=\"currentLayoutType === 'dark-sidebar'\">\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"currentLayoutType !== 'dark-sidebar'\">\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default theme-light-show\" />\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\"\r\n class=\"h-40px app-sidebar-logo-default theme-dark-show\" />\r\n </ng-container>\r\n\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\" class=\"h-38px app-sidebar-logo-minimize\" />\r\n</a>\r\n<!--end::Logo image-->\r\n\r\n\r\n<ng-container *ngIf=\"toggleEnabled\">\r\n <!--begin::Sidebar toggle-->\r\n <div id=\"kt_app_sidebar_toggle\"\r\n class=\"app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary body-bg h-30px w-30px position-absolute top-50 start-100 translate-middle rotate d-none\"\r\n [ngClass]=\"toggleButtonClass\" data-kt-toggle=\"true\" [attr.data-kt-toggle-state]=\"toggleState\"\r\n data-kt-toggle-target=\"body\" [attr.data-kt-toggle-name]=\"toggleAttr\">\r\n <lib-keenicon name=\"double-left\" class=\"fs-2 rotate-180\"></lib-keenicon>\r\n </div>\r\n <!--end::Sidebar toggle-->\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
4206
4950
  }
4207
4951
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarLogoComponent, decorators: [{
4208
4952
  type: Component,
4209
4953
  args: [{ selector: 'lib-sidebar-logo', template: "<!--begin::Logo image-->\r\n<a>\r\n <ng-container *ngIf=\"currentLayoutType === 'dark-sidebar'\">\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default\" />\r\n </ng-container>\r\n <ng-container *ngIf=\"currentLayoutType !== 'dark-sidebar'\">\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default theme-light-show\" />\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\"\r\n class=\"h-40px app-sidebar-logo-default theme-dark-show\" />\r\n </ng-container>\r\n\r\n <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\" class=\"h-38px app-sidebar-logo-minimize\" />\r\n</a>\r\n<!--end::Logo image-->\r\n\r\n\r\n<ng-container *ngIf=\"toggleEnabled\">\r\n <!--begin::Sidebar toggle-->\r\n <div id=\"kt_app_sidebar_toggle\"\r\n class=\"app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary body-bg h-30px w-30px position-absolute top-50 start-100 translate-middle rotate d-none\"\r\n [ngClass]=\"toggleButtonClass\" data-kt-toggle=\"true\" [attr.data-kt-toggle-state]=\"toggleState\"\r\n data-kt-toggle-target=\"body\" [attr.data-kt-toggle-name]=\"toggleAttr\">\r\n <lib-keenicon name=\"double-left\" class=\"fs-2 rotate-180\"></lib-keenicon>\r\n </div>\r\n <!--end::Sidebar toggle-->\r\n</ng-container>\r\n" }]
4210
- }], ctorParameters: () => [{ type: i1$1.LayoutService }], propDecorators: { toggleButtonClass: [{
4954
+ }], ctorParameters: () => [{ type: i1.LayoutService }], propDecorators: { toggleButtonClass: [{
4211
4955
  type: Input
4212
4956
  }], toggleEnabled: [{
4213
4957
  type: Input
@@ -4292,13 +5036,13 @@ class SidebarMenuComponent {
4292
5036
  }
4293
5037
  });
4294
5038
  }
4295
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarMenuComponent, deps: [{ token: AuthService }, { token: i1$1.GlobalStateService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
4296
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarMenuComponent, selector: "lib-sidebar-menu", ngImport: i0, template: "<!--begin::Menu wrapper-->\r\n<div id=\"kt_app_sidebar_menu_scroll\" class=\"scroll-y my-5 mx-3\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\"\r\n data-kt-scroll-height=\"auto\" data-kt-scroll-dependencies=\"#kt_app_sidebar_logo, #kt_app_sidebar_footer\"\r\n data-kt-scroll-wrappers=\"#kt_app_sidebar_menu\" data-kt-scroll-offset=\"5px\" data-kt-scroll-save-state=\"true\">\r\n <!--begin::Menu-->\r\n <div class=\"menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6\" id=\"#kt_app_sidebar_menu\"\r\n data-kt-menu=\"true\" data-kt-menu-expand=\"false\">\r\n <!-- Birds Eye -->\r\n <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard && (gs.userAccess | async)?.userType !== 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/birds_eye.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Analytics</span>\r\n </a>\r\n </div>\r\n\r\n <!-- Analyse -->\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n <img class=\"fs-2 ms-15\" src=\"./assets/tango/sidemenu-icons/tango_eye.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-15\">Tango Eye\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewTraffic && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic\">\r\n <span class=\"menu-title ms-8\">Traffic\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\" *ngIf=\"clientData?.featureConfigs?.isNewZone && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v1\">\r\n <span class=\"menu-title ms-8\">Zones\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\" *ngIf=\"clientData?.featureConfigs?.isNewZoneV2 && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v2\">\r\n <span class=\"menu-title ms-8\">Zone V2\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/trax/dashboard\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_trax.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Tango Trax\r\n </span>\r\n </a>\r\n </div> \r\n <!-- <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon \">\r\n <img class=\"fs-2 ms-15\" src=\"./assets/tango/sidemenu-icons/tango_trax.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-15\">Tango Trax\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/trax/checklist\">\r\n <span class=\"menu-title ms-8\">Checklist\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"this.usersList?.clientId ? this.usersList?.clientId === '11': this.headerFilters?.client === '11'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/controlcenter\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/ControlCenter.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\" >Control Center\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic/explore\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/Explore.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Explore\r\n </span>\r\n </a>\r\n </div> \r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard && clientData?.featureConfigs?.isNewReports && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/analyse/reports\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Reports\r\n </span>\r\n </a>\r\n </div> \r\n \r\n <!-- Manage -->\r\n <div class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon \">\r\n <img class=\"fs-2 ms-15\" src=\"./assets/tango/sidemenu-icons/manage.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-15\">Manage\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/brands\">\r\n \r\n <span class=\"menu-title ms-8\">Brands\r\n </span>\r\n </a>\r\n </div>\r\n \r\n \r\n \r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/summary\">\r\n \r\n <span class=\"menu-title ms-8\">Summary\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/stores\">\r\n \r\n <span class=\"menu-title ms-8\">Stores\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/client\">\r\n \r\n <span class=\"menu-title ms-8\">Users\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/tango\">\r\n \r\n <span class=\"menu-title ms-8\">Tango Users\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/tickets\" >\r\n \r\n <span class=\"menu-title ms-8\">Tickets\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/reports\" >\r\n \r\n <span class=\"menu-title ms-8\">Reports\r\n </span>\r\n </a>\r\n </div>\r\n \r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/audit\" >\r\n \r\n <span class=\"menu-title ms-8\">Audit\r\n </span>\r\n </a>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/billing\">\r\n \r\n <span class=\"menu-title ms-8\">Billing\r\n </span>\r\n </a>\r\n </div> \r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/settings\" >\r\n \r\n <span class=\"menu-title ms-8\">Settings\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/user-analysis\" >\r\n \r\n <span class=\"menu-title ms-8\">User Analysis\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n \r\n </div>\r\n\r\n <!-- Workspace -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/Workspace.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Workspace\r\n </span>\r\n </a>\r\n </div>\r\n <!--end::Menu-->\r\n</div>\r\n</div>\r\n<!--end::Menu wrapper-->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n <!-- <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title \" data-link=\"/manage/traffic\">ANALYZE\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n \r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\"\r\n class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M0.677249 15.8223H5.41799C6.09524 15.8223 6.09524 15.5214 6.09524 14.318V6.83461C6.09524 6.39794 5.79228 6.04449 5.41799 6.04449H0.677249C0.2709 6.04449 0 6.34534 0 6.79663V15.0701C0 15.5214 0.2709 15.8223 0.677249 15.8223Z\" fill=\"#475467\"/>\r\n <path d=\"M0.673874 4.44444H5.39099C5.79531 4.44444 6.06486 4.08889 6.06486 3.55555V0.888888C6.06486 0.355555 5.79531 0 5.39099 0H0.673874C0.269549 0 0 0.355555 0 0.888888V3.55555C0 4 0.269549 4.44444 0.673874 4.44444Z\" fill=\"#475467\"/>\r\n <path d=\"M2.27003 1.9131C2.27003 2.20178 2.09173 2.4358 1.87179 2.4358C1.65185 2.4358 1.47354 2.20178 1.47354 1.9131C1.47354 1.62443 1.65185 1.39041 1.87179 1.39041C2.09173 1.39041 2.27003 1.62443 2.27003 1.9131Z\" fill=\"#667085\"/>\r\n <path d=\"M3.46448 1.9131C3.46448 2.20178 3.28618 2.4358 3.06623 2.4358C2.84629 2.4358 2.66799 2.20178 2.66799 1.9131C2.66799 1.62443 2.84629 1.39041 3.06623 1.39041C3.28618 1.39041 3.46448 1.62443 3.46448 1.9131Z\" fill=\"#667085\"/>\r\n <path d=\"M4.66025 1.9131C4.66025 2.20178 4.48195 2.4358 4.262 2.4358C4.04206 2.4358 3.86376 2.20178 3.86376 1.9131C3.86376 1.62443 4.04206 1.39041 4.262 1.39041C4.48195 1.39041 4.66025 1.62443 4.66025 1.9131Z\" fill=\"#667085\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.61905 16V0H8.38095V16H7.61905Z\" fill=\"#667085\"/>\r\n <path d=\"M15.3227 0H10.582C10.1757 0 9.90476 0.300855 9.90476 0.752137V9.02564C9.90476 9.47692 10.1757 9.77778 10.582 9.77778H15.3227C15.7291 9.77778 16 9.47692 16 9.02564V0.752137C16 0.300855 15.7291 0 15.3227 0Z\" fill=\"#475467\"/>\r\n <path d=\"M9.93519 15.1111V12.4444C9.93519 11.9111 10.2047 11.5556 10.6091 11.5556H15.3261C15.7305 11.5556 16 11.9111 16 12.4444V15.1111C16 15.6444 15.7305 16 15.3261 16H10.6091C10.2047 16 9.93519 15.6444 9.93519 15.1111Z\" fill=\"#475467\"/>\r\n <path d=\"M12.0531 13.4336C12.0531 13.7223 11.8748 13.9563 11.6549 13.9563C11.4349 13.9563 11.2566 13.7223 11.2566 13.4336C11.2566 13.1449 11.4349 12.9109 11.6549 12.9109C11.8748 12.9109 12.0531 13.1449 12.0531 13.4336Z\" fill=\"#667085\"/>\r\n <path d=\"M13.2475 13.4336C13.2475 13.7223 13.0692 13.9563 12.8493 13.9563C12.6294 13.9563 12.4511 13.7223 12.4511 13.4336C12.4511 13.1449 12.6294 12.9109 12.8493 12.9109C13.0692 12.9109 13.2475 13.1449 13.2475 13.4336Z\" fill=\"#667085\"/>\r\n <path d=\"M14.4433 13.4336C14.4433 13.7223 14.265 13.9563 14.0451 13.9563C13.8251 13.9563 13.6468 13.7223 13.6468 13.4336C13.6468 13.1449 13.8251 12.9109 14.0451 12.9109C14.265 12.9109 14.4433 13.1449 14.4433 13.4336Z\" fill=\"#667085\"/>\r\n </svg>\r\n </span>\r\n <span class=\"menu-title\" data-link=\"\">Tango Eye\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Traffic\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\" *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView && clientData?.featureConfigs?.isNewZone && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v1\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Zones\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v2\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Zone V2\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"this.usersList?.clientId ? this.usersList?.clientId === '11': this.headerFilters?.client === '11'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\" routerLinkActive=\"active\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M9.84985 0.264419C9.5033 -0.0881395 8.97086 -0.0881395 8.62713 0.264419L2.76722 6.25478C2.5024 6.5231 2.40943 6.94117 2.52776 7.31557C4.9816 8.10493 6.91142 10.2546 7.60729 12.9815H12.8445C13.5912 12.9815 14.1968 12.3107 14.1968 11.4839V7.98637H15.0984C15.4702 7.98637 15.8027 7.73365 15.938 7.35301C16.0732 6.97238 15.983 6.53557 15.7098 6.25478L9.84985 0.264419ZM7.88619 6.48878C7.88619 6.21422 8.08904 5.98958 8.33696 5.98958H10.14C10.388 5.98958 10.5908 6.21422 10.5908 6.48878V8.48556C10.5908 8.76013 10.388 8.98476 10.14 8.98476H8.33696C8.08904 8.98476 7.88619 8.76013 7.88619 8.48556V6.48878Z\" fill=\"#667085\"/>\r\n <path d=\"M0 8.76165C0 8.34669 0.301447 8.01285 0.676143 8.01285C4.28506 8.01285 7.2122 11.2545 7.2122 15.2512C7.2122 15.6662 6.91075 16 6.53606 16C6.16136 16 5.85991 15.6662 5.85991 15.2512C5.85991 12.0813 3.53848 9.51044 0.676143 9.51044C0.301447 9.51044 0 9.1766 0 8.76165Z\" fill=\"#D0D5DD\"/>\r\n <path d=\"M1.539 15.7076C1.36993 15.8948 1.14062 16 0.901525 16C0.662426 16 0.43312 15.8948 0.264051 15.7076C0.0949818 15.5203 0 15.2664 0 15.0017C0 14.7368 0.0949818 14.4829 0.264051 14.2956C0.43312 14.1084 0.662426 14.0032 0.901525 14.0032C1.14062 14.0032 1.36993 14.1084 1.539 14.2956C1.70807 14.4829 1.80305 14.7368 1.80305 15.0017C1.80305 15.2664 1.70807 15.5203 1.539 15.7076Z\" fill=\"#D0D5DD\"/>\r\n <path d=\"M0.676143 12.5056C0.301447 12.5056 0 12.1717 0 11.7568C0 11.3418 0.301447 11.0081 0.676143 11.0081C2.79191 11.0081 4.50762 12.9081 4.50762 15.2512C4.50762 15.6662 4.20618 16 3.83148 16C3.45678 16 3.15534 15.6662 3.15534 15.2512C3.15534 13.7349 2.04533 12.5056 0.676143 12.5056Z\" fill=\"#D0D5DD\"/>\r\n </svg>\r\n </span>\r\n <span class=\"menu-title\" routerLink=\"/manage/controlcenter\">Control Center \r\n </span>\r\n \r\n </span>\r\n </div>\r\n \r\n <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\"\r\n class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14.3843 6.77809L13.3937 6.58122C13.1468 6.53122 12.8937 6.60935 12.7156 6.78747L12.2343 7.26872C11.8718 7.63122 11.2625 7.53122 11.0343 7.07498L10.7437 6.49685C10.5937 6.19685 10.2875 6.00622 9.94997 6.00622C9.47497 6.00622 9.13435 6.46248 9.27185 6.91873L9.45935 7.5406C9.6031 8.02185 9.24372 8.50623 8.7406 8.50623H8.66872C8.24998 8.50623 7.85935 8.71561 7.6281 9.06249L7.29373 9.56561C7.11873 9.83123 7.1281 10.1781 7.31873 10.4312L7.82185 11.1031C8.14373 11.5312 7.92498 12.15 7.4031 12.2812L6.87185 12.4156C6.63748 12.475 6.44686 12.6406 6.35623 12.8656L5.84373 14.1437C6.51873 14.3719 7.24373 14.5 7.99998 14.5C11.5906 14.5 14.5 11.5906 14.5 7.99998C14.5 7.58123 14.4593 7.17184 14.3843 6.77809ZM1.64375 6.63435C1.83124 6.63435 1.81249 6.68122 1.92499 6.60935L2.41874 6.47185C2.62812 6.41247 2.84999 6.49997 2.96562 6.68122L3.02812 6.77809C3.21562 7.07184 3.54061 7.24997 3.89061 7.24997C4.24061 7.24997 4.56561 7.07184 4.75311 6.77809L4.94374 6.48122C4.98749 6.41247 5.04998 6.3531 5.12186 6.3156L6.24998 5.68435C6.81561 5.36872 7.04685 4.67185 6.78123 4.08123L6.60935 3.69374C6.34061 3.09374 5.64998 2.80311 5.03124 3.03436L4.94999 3.06561C4.63749 3.18123 4.66874 3.08437 4.39999 2.88749L3.96874 2.90311C2.39999 3.68749 1.92187 4.98436 1.6 6.48748L1.64375 6.63435ZM16 7.99998C16 10.1217 15.1571 12.1566 13.6568 13.6568C12.1565 15.1571 10.1217 16 7.99998 16C5.87825 16 3.84343 15.1571 2.34314 13.6568C0.842852 12.1566 0 10.1217 0 7.99998C0 5.87825 0.842852 3.84342 2.34314 2.34314C3.84343 0.842851 5.87825 0 7.99998 0C10.1217 0 12.1565 0.842851 13.6568 2.34314C15.1571 3.84342 16 5.87825 16 7.99998ZM11.4843 5.12185C11.55 4.8531 11.3875 4.58123 11.1218 4.5156L10.1218 4.2656C9.8531 4.19998 9.58122 4.36248 9.5156 4.6281C9.44997 4.89373 9.61247 5.16872 9.8781 5.23435L10.8781 5.48435C11.1468 5.54997 11.4187 5.38747 11.4843 5.12185ZM8.60935 5.74685C8.67497 5.4781 8.51248 5.20622 8.24685 5.1406C7.98123 5.07498 7.70623 5.23747 7.6406 5.5031L7.3906 6.5031C7.32498 6.77184 7.48748 7.04373 7.7531 7.10935C8.01873 7.17497 8.29373 7.01247 8.35935 6.74685L8.60935 5.74685Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M2.45522 6.05254C2.59366 6.24051 2.35423 6.2781 2.22966 6.2781C2.10509 6.2781 2.0041 6.17711 2.0041 6.05254C2.0041 5.92797 2.10509 5.67661 2.22966 5.67661C2.35423 5.67661 2.45522 5.92797 2.45522 6.05254Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M4.20498 11.8559C4.62113 11.3337 5.57024 10.0682 5.57024 9.35736C5.57024 8.49526 4.87261 7.79579 4.01273 7.79579C3.15285 7.79579 2.45522 8.49526 2.45522 9.35736C2.45522 10.0682 3.40433 11.3337 3.82047 11.8559C3.92025 11.9803 4.10521 11.9803 4.20498 11.8559ZM4.01273 8.83684C4.15042 8.83684 4.28247 8.89168 4.37984 8.98929C4.4772 9.08691 4.5319 9.21931 4.5319 9.35736C4.5319 9.49541 4.4772 9.62781 4.37984 9.72542C4.28247 9.82304 4.15042 9.87788 4.01273 9.87788C3.87504 9.87788 3.74298 9.82304 3.64562 9.72542C3.54826 9.62781 3.49356 9.49541 3.49356 9.35736C3.49356 9.21931 3.54826 9.08691 3.64562 8.98929C3.74298 8.89168 3.87504 8.83684 4.01273 8.83684Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M13.0419 10.2943C13.9436 9.11946 16 6.27207 16 4.6727C16 2.73295 14.4884 1.1592 12.6253 1.1592C10.7623 1.1592 9.25074 2.73295 9.25074 4.6727C9.25074 6.27207 11.3071 9.11946 12.2088 10.2943C12.425 10.5743 12.8257 10.5743 13.0419 10.2943ZM12.6253 3.50153C12.9237 3.50153 13.2098 3.62492 13.4207 3.84456C13.6317 4.06419 13.7502 4.36208 13.7502 4.6727C13.7502 4.98331 13.6317 5.2812 13.4207 5.50083C13.2098 5.72047 12.9237 5.84386 12.6253 5.84386C12.327 5.84386 12.0409 5.72047 11.8299 5.50083C11.619 5.2812 11.5005 4.98331 11.5005 4.6727C11.5005 4.36208 11.619 4.06419 11.8299 3.84456C12.0409 3.62492 12.327 3.50153 12.6253 3.50153Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title\" data-link=\"\">Tango Trax\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/trax/checklist\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Checklist\r\n </span>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n</div>\r\n\r\n<div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\" routerLinkActive=\"active\" routerLink=\"/manage/analyse/reports\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/manage/traffic\">REPORTS\r\n </span>\r\n \r\n </span>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/manage\">MANAGE\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_brands_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/brands\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/brands.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Brands\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_overview_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/summary\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/overview.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Summary\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_stores_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/stores\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Stores\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/tickets\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tickets\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_reports_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/reports\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Reports\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/client\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Users\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_audit_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/audit\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/audit.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Audit\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView || (gs.userAccess | async)?.settings_activityLog_isView || (gs.userAccess | async)?.settings_brandDetails_isView || (gs.userAccess | async)?.settings_configuration_isView || (gs.userAccess | async)?.settings_contactDirectory_isView || (gs.userAccess | async)?.settings_documents_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/settings\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/settings.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Settings\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/tango\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tango Users\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/billing\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/billing.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Billing\r\n </span>\r\n </a>\r\n </div> \r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/tickets\">MY WORKSPACE\r\n </span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/tickets/stores\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Stores\r\n </span>\r\n </a>\r\n </div>\r\n \r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tickets\r\n </span>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n\r\n\r\n\r\n\r\n\r\n <!-- Tango Traffic -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView && clientData?.featureConfigs?.isNewTraffic && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_traffic.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tango Traffic</span>\r\n </a>\r\n </div> -->\r\n\r\n <!-- Tango Zone -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_zone.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tango Zone</span>\r\n </a>\r\n </div> -->\r\n\r\n <!-- Tango Revop -->\r\n <!-- <div class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n <span class=\"menu-link\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_revop.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/crafted/account\">Tango Revop\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Home\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Tagging\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Pending Action\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Customer Profile\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Control Center -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_controlCenter_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n <span class=\"menu-link\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/control_center.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/crafted/account\">Control Center\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Live & Playback\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Screen Manager\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Store Explore\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Tango SOP -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoSop_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n <span class=\"menu-link\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_sop.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/crafted/account\">Tango SOP\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Dashboard\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Create & Manage\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Flag\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Reports\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Incidents\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n", styles: [".menu-bullet-dot span{display:inline-block;width:6px;height:6px;background-color:#000;border-radius:50%;margin-right:10px;vertical-align:middle}:host::ng-deep .menu-sub .menu-sub-accordion{border-left:2px solid #98A2B3!important}::ng-deep .app-sidebar .menu .menu-item .menu-link.active .menu-title{color:#f5f5f5!important;border-radius:8px!important;border:1px solid var(--text-primary, #FFF)!important;padding:8px!important;color:var(--Primary-500, #33B5FF)!important;font-size:12px!important;font-style:normal;font-weight:600;line-height:18px}::ng-deep .app-sidebar .menu .menu-item .menu-link .menu-title{font-size:12px!important;font-style:normal;font-weight:600;line-height:18px}::ng-deep .app-sidebar .menu .menu-item .menu-link.active{transition:color .2s ease;background-color:#0d0e12!important}\n"], dependencies: [{ kind: "directive", type: i4.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: "pipe", type: i4.AsyncPipe, name: "async" }] });
5039
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarMenuComponent, deps: [{ token: AuthService }, { token: i1.GlobalStateService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
5040
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarMenuComponent, selector: "lib-sidebar-menu", ngImport: i0, template: "<!--begin::Menu wrapper-->\r\n<div id=\"kt_app_sidebar_menu_scroll\" class=\"scroll-y my-5 mx-3\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\"\r\n data-kt-scroll-height=\"auto\" data-kt-scroll-dependencies=\"#kt_app_sidebar_logo, #kt_app_sidebar_footer\"\r\n data-kt-scroll-wrappers=\"#kt_app_sidebar_menu\" data-kt-scroll-offset=\"5px\" data-kt-scroll-save-state=\"true\">\r\n <!--begin::Menu-->\r\n <div class=\"menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6\" id=\"#kt_app_sidebar_menu\"\r\n data-kt-menu=\"true\" data-kt-menu-expand=\"false\">\r\n <!-- Birds Eye -->\r\n <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard && (gs.userAccess | async)?.userType !== 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/birds_eye.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Analytics</span>\r\n </a>\r\n </div>\r\n\r\n <!-- Analyse -->\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n <img class=\"fs-2 ms-15\" src=\"./assets/tango/sidemenu-icons/tango_eye.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-15\">Tango Eye\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewTraffic && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic\">\r\n <span class=\"menu-title ms-8\">Traffic\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\" *ngIf=\"clientData?.featureConfigs?.isNewZone && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v1\">\r\n <span class=\"menu-title ms-8\">Zones\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\" *ngIf=\"clientData?.featureConfigs?.isNewZoneV2 && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v2\">\r\n <span class=\"menu-title ms-8\">Zone V2\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/trax/dashboard\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_trax.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Tango Trax\r\n </span>\r\n </a>\r\n </div> \r\n <!-- <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon \">\r\n <img class=\"fs-2 ms-15\" src=\"./assets/tango/sidemenu-icons/tango_trax.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-15\">Tango Trax\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/trax/checklist\">\r\n <span class=\"menu-title ms-8\">Checklist\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"this.usersList?.clientId ? this.usersList?.clientId === '11': this.headerFilters?.client === '11'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/controlcenter\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/ControlCenter.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\" >Control Center\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic/explore\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/Explore.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Explore\r\n </span>\r\n </a>\r\n </div> \r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard && clientData?.featureConfigs?.isNewReports && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/analyse/reports\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Reports\r\n </span>\r\n </a>\r\n </div> \r\n \r\n <!-- Manage -->\r\n <div class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon \">\r\n <img class=\"fs-2 ms-15\" src=\"./assets/tango/sidemenu-icons/manage.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-15\">Manage\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/brands\">\r\n \r\n <span class=\"menu-title ms-8\">Brands\r\n </span>\r\n </a>\r\n </div>\r\n \r\n \r\n \r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/summary\">\r\n \r\n <span class=\"menu-title ms-8\">Summary\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/stores\">\r\n \r\n <span class=\"menu-title ms-8\">Stores\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/client\">\r\n \r\n <span class=\"menu-title ms-8\">Users\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/tango\">\r\n \r\n <span class=\"menu-title ms-8\">Tango Users\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/tickets\" >\r\n \r\n <span class=\"menu-title ms-8\">Tickets\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/reports\" >\r\n \r\n <span class=\"menu-title ms-8\">Reports\r\n </span>\r\n </a>\r\n </div>\r\n \r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/audit\" >\r\n \r\n <span class=\"menu-title ms-8\">Audit\r\n </span>\r\n </a>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/billing\">\r\n \r\n <span class=\"menu-title ms-8\">Billing\r\n </span>\r\n </a>\r\n </div> \r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/settings\" >\r\n \r\n <span class=\"menu-title ms-8\">Settings\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/user-analysis\" >\r\n \r\n <span class=\"menu-title ms-8\">User Analysis\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n \r\n </div>\r\n\r\n <!-- Workspace -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/Workspace.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Workspace\r\n </span>\r\n </a>\r\n </div>\r\n <!--end::Menu-->\r\n</div>\r\n</div>\r\n<!--end::Menu wrapper-->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n <!-- <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title \" data-link=\"/manage/traffic\">ANALYZE\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n \r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\"\r\n class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M0.677249 15.8223H5.41799C6.09524 15.8223 6.09524 15.5214 6.09524 14.318V6.83461C6.09524 6.39794 5.79228 6.04449 5.41799 6.04449H0.677249C0.2709 6.04449 0 6.34534 0 6.79663V15.0701C0 15.5214 0.2709 15.8223 0.677249 15.8223Z\" fill=\"#475467\"/>\r\n <path d=\"M0.673874 4.44444H5.39099C5.79531 4.44444 6.06486 4.08889 6.06486 3.55555V0.888888C6.06486 0.355555 5.79531 0 5.39099 0H0.673874C0.269549 0 0 0.355555 0 0.888888V3.55555C0 4 0.269549 4.44444 0.673874 4.44444Z\" fill=\"#475467\"/>\r\n <path d=\"M2.27003 1.9131C2.27003 2.20178 2.09173 2.4358 1.87179 2.4358C1.65185 2.4358 1.47354 2.20178 1.47354 1.9131C1.47354 1.62443 1.65185 1.39041 1.87179 1.39041C2.09173 1.39041 2.27003 1.62443 2.27003 1.9131Z\" fill=\"#667085\"/>\r\n <path d=\"M3.46448 1.9131C3.46448 2.20178 3.28618 2.4358 3.06623 2.4358C2.84629 2.4358 2.66799 2.20178 2.66799 1.9131C2.66799 1.62443 2.84629 1.39041 3.06623 1.39041C3.28618 1.39041 3.46448 1.62443 3.46448 1.9131Z\" fill=\"#667085\"/>\r\n <path d=\"M4.66025 1.9131C4.66025 2.20178 4.48195 2.4358 4.262 2.4358C4.04206 2.4358 3.86376 2.20178 3.86376 1.9131C3.86376 1.62443 4.04206 1.39041 4.262 1.39041C4.48195 1.39041 4.66025 1.62443 4.66025 1.9131Z\" fill=\"#667085\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.61905 16V0H8.38095V16H7.61905Z\" fill=\"#667085\"/>\r\n <path d=\"M15.3227 0H10.582C10.1757 0 9.90476 0.300855 9.90476 0.752137V9.02564C9.90476 9.47692 10.1757 9.77778 10.582 9.77778H15.3227C15.7291 9.77778 16 9.47692 16 9.02564V0.752137C16 0.300855 15.7291 0 15.3227 0Z\" fill=\"#475467\"/>\r\n <path d=\"M9.93519 15.1111V12.4444C9.93519 11.9111 10.2047 11.5556 10.6091 11.5556H15.3261C15.7305 11.5556 16 11.9111 16 12.4444V15.1111C16 15.6444 15.7305 16 15.3261 16H10.6091C10.2047 16 9.93519 15.6444 9.93519 15.1111Z\" fill=\"#475467\"/>\r\n <path d=\"M12.0531 13.4336C12.0531 13.7223 11.8748 13.9563 11.6549 13.9563C11.4349 13.9563 11.2566 13.7223 11.2566 13.4336C11.2566 13.1449 11.4349 12.9109 11.6549 12.9109C11.8748 12.9109 12.0531 13.1449 12.0531 13.4336Z\" fill=\"#667085\"/>\r\n <path d=\"M13.2475 13.4336C13.2475 13.7223 13.0692 13.9563 12.8493 13.9563C12.6294 13.9563 12.4511 13.7223 12.4511 13.4336C12.4511 13.1449 12.6294 12.9109 12.8493 12.9109C13.0692 12.9109 13.2475 13.1449 13.2475 13.4336Z\" fill=\"#667085\"/>\r\n <path d=\"M14.4433 13.4336C14.4433 13.7223 14.265 13.9563 14.0451 13.9563C13.8251 13.9563 13.6468 13.7223 13.6468 13.4336C13.6468 13.1449 13.8251 12.9109 14.0451 12.9109C14.265 12.9109 14.4433 13.1449 14.4433 13.4336Z\" fill=\"#667085\"/>\r\n </svg>\r\n </span>\r\n <span class=\"menu-title\" data-link=\"\">Tango Eye\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Traffic\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\" *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView && clientData?.featureConfigs?.isNewZone && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v1\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Zones\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v2\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Zone V2\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"this.usersList?.clientId ? this.usersList?.clientId === '11': this.headerFilters?.client === '11'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\" routerLinkActive=\"active\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M9.84985 0.264419C9.5033 -0.0881395 8.97086 -0.0881395 8.62713 0.264419L2.76722 6.25478C2.5024 6.5231 2.40943 6.94117 2.52776 7.31557C4.9816 8.10493 6.91142 10.2546 7.60729 12.9815H12.8445C13.5912 12.9815 14.1968 12.3107 14.1968 11.4839V7.98637H15.0984C15.4702 7.98637 15.8027 7.73365 15.938 7.35301C16.0732 6.97238 15.983 6.53557 15.7098 6.25478L9.84985 0.264419ZM7.88619 6.48878C7.88619 6.21422 8.08904 5.98958 8.33696 5.98958H10.14C10.388 5.98958 10.5908 6.21422 10.5908 6.48878V8.48556C10.5908 8.76013 10.388 8.98476 10.14 8.98476H8.33696C8.08904 8.98476 7.88619 8.76013 7.88619 8.48556V6.48878Z\" fill=\"#667085\"/>\r\n <path d=\"M0 8.76165C0 8.34669 0.301447 8.01285 0.676143 8.01285C4.28506 8.01285 7.2122 11.2545 7.2122 15.2512C7.2122 15.6662 6.91075 16 6.53606 16C6.16136 16 5.85991 15.6662 5.85991 15.2512C5.85991 12.0813 3.53848 9.51044 0.676143 9.51044C0.301447 9.51044 0 9.1766 0 8.76165Z\" fill=\"#D0D5DD\"/>\r\n <path d=\"M1.539 15.7076C1.36993 15.8948 1.14062 16 0.901525 16C0.662426 16 0.43312 15.8948 0.264051 15.7076C0.0949818 15.5203 0 15.2664 0 15.0017C0 14.7368 0.0949818 14.4829 0.264051 14.2956C0.43312 14.1084 0.662426 14.0032 0.901525 14.0032C1.14062 14.0032 1.36993 14.1084 1.539 14.2956C1.70807 14.4829 1.80305 14.7368 1.80305 15.0017C1.80305 15.2664 1.70807 15.5203 1.539 15.7076Z\" fill=\"#D0D5DD\"/>\r\n <path d=\"M0.676143 12.5056C0.301447 12.5056 0 12.1717 0 11.7568C0 11.3418 0.301447 11.0081 0.676143 11.0081C2.79191 11.0081 4.50762 12.9081 4.50762 15.2512C4.50762 15.6662 4.20618 16 3.83148 16C3.45678 16 3.15534 15.6662 3.15534 15.2512C3.15534 13.7349 2.04533 12.5056 0.676143 12.5056Z\" fill=\"#D0D5DD\"/>\r\n </svg>\r\n </span>\r\n <span class=\"menu-title\" routerLink=\"/manage/controlcenter\">Control Center \r\n </span>\r\n \r\n </span>\r\n </div>\r\n \r\n <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\"\r\n class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14.3843 6.77809L13.3937 6.58122C13.1468 6.53122 12.8937 6.60935 12.7156 6.78747L12.2343 7.26872C11.8718 7.63122 11.2625 7.53122 11.0343 7.07498L10.7437 6.49685C10.5937 6.19685 10.2875 6.00622 9.94997 6.00622C9.47497 6.00622 9.13435 6.46248 9.27185 6.91873L9.45935 7.5406C9.6031 8.02185 9.24372 8.50623 8.7406 8.50623H8.66872C8.24998 8.50623 7.85935 8.71561 7.6281 9.06249L7.29373 9.56561C7.11873 9.83123 7.1281 10.1781 7.31873 10.4312L7.82185 11.1031C8.14373 11.5312 7.92498 12.15 7.4031 12.2812L6.87185 12.4156C6.63748 12.475 6.44686 12.6406 6.35623 12.8656L5.84373 14.1437C6.51873 14.3719 7.24373 14.5 7.99998 14.5C11.5906 14.5 14.5 11.5906 14.5 7.99998C14.5 7.58123 14.4593 7.17184 14.3843 6.77809ZM1.64375 6.63435C1.83124 6.63435 1.81249 6.68122 1.92499 6.60935L2.41874 6.47185C2.62812 6.41247 2.84999 6.49997 2.96562 6.68122L3.02812 6.77809C3.21562 7.07184 3.54061 7.24997 3.89061 7.24997C4.24061 7.24997 4.56561 7.07184 4.75311 6.77809L4.94374 6.48122C4.98749 6.41247 5.04998 6.3531 5.12186 6.3156L6.24998 5.68435C6.81561 5.36872 7.04685 4.67185 6.78123 4.08123L6.60935 3.69374C6.34061 3.09374 5.64998 2.80311 5.03124 3.03436L4.94999 3.06561C4.63749 3.18123 4.66874 3.08437 4.39999 2.88749L3.96874 2.90311C2.39999 3.68749 1.92187 4.98436 1.6 6.48748L1.64375 6.63435ZM16 7.99998C16 10.1217 15.1571 12.1566 13.6568 13.6568C12.1565 15.1571 10.1217 16 7.99998 16C5.87825 16 3.84343 15.1571 2.34314 13.6568C0.842852 12.1566 0 10.1217 0 7.99998C0 5.87825 0.842852 3.84342 2.34314 2.34314C3.84343 0.842851 5.87825 0 7.99998 0C10.1217 0 12.1565 0.842851 13.6568 2.34314C15.1571 3.84342 16 5.87825 16 7.99998ZM11.4843 5.12185C11.55 4.8531 11.3875 4.58123 11.1218 4.5156L10.1218 4.2656C9.8531 4.19998 9.58122 4.36248 9.5156 4.6281C9.44997 4.89373 9.61247 5.16872 9.8781 5.23435L10.8781 5.48435C11.1468 5.54997 11.4187 5.38747 11.4843 5.12185ZM8.60935 5.74685C8.67497 5.4781 8.51248 5.20622 8.24685 5.1406C7.98123 5.07498 7.70623 5.23747 7.6406 5.5031L7.3906 6.5031C7.32498 6.77184 7.48748 7.04373 7.7531 7.10935C8.01873 7.17497 8.29373 7.01247 8.35935 6.74685L8.60935 5.74685Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M2.45522 6.05254C2.59366 6.24051 2.35423 6.2781 2.22966 6.2781C2.10509 6.2781 2.0041 6.17711 2.0041 6.05254C2.0041 5.92797 2.10509 5.67661 2.22966 5.67661C2.35423 5.67661 2.45522 5.92797 2.45522 6.05254Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M4.20498 11.8559C4.62113 11.3337 5.57024 10.0682 5.57024 9.35736C5.57024 8.49526 4.87261 7.79579 4.01273 7.79579C3.15285 7.79579 2.45522 8.49526 2.45522 9.35736C2.45522 10.0682 3.40433 11.3337 3.82047 11.8559C3.92025 11.9803 4.10521 11.9803 4.20498 11.8559ZM4.01273 8.83684C4.15042 8.83684 4.28247 8.89168 4.37984 8.98929C4.4772 9.08691 4.5319 9.21931 4.5319 9.35736C4.5319 9.49541 4.4772 9.62781 4.37984 9.72542C4.28247 9.82304 4.15042 9.87788 4.01273 9.87788C3.87504 9.87788 3.74298 9.82304 3.64562 9.72542C3.54826 9.62781 3.49356 9.49541 3.49356 9.35736C3.49356 9.21931 3.54826 9.08691 3.64562 8.98929C3.74298 8.89168 3.87504 8.83684 4.01273 8.83684Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M13.0419 10.2943C13.9436 9.11946 16 6.27207 16 4.6727C16 2.73295 14.4884 1.1592 12.6253 1.1592C10.7623 1.1592 9.25074 2.73295 9.25074 4.6727C9.25074 6.27207 11.3071 9.11946 12.2088 10.2943C12.425 10.5743 12.8257 10.5743 13.0419 10.2943ZM12.6253 3.50153C12.9237 3.50153 13.2098 3.62492 13.4207 3.84456C13.6317 4.06419 13.7502 4.36208 13.7502 4.6727C13.7502 4.98331 13.6317 5.2812 13.4207 5.50083C13.2098 5.72047 12.9237 5.84386 12.6253 5.84386C12.327 5.84386 12.0409 5.72047 11.8299 5.50083C11.619 5.2812 11.5005 4.98331 11.5005 4.6727C11.5005 4.36208 11.619 4.06419 11.8299 3.84456C12.0409 3.62492 12.327 3.50153 12.6253 3.50153Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title\" data-link=\"\">Tango Trax\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/trax/checklist\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Checklist\r\n </span>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n</div>\r\n\r\n<div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\" routerLinkActive=\"active\" routerLink=\"/manage/analyse/reports\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/manage/traffic\">REPORTS\r\n </span>\r\n \r\n </span>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/manage\">MANAGE\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_brands_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/brands\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/brands.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Brands\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_overview_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/summary\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/overview.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Summary\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_stores_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/stores\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Stores\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/tickets\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tickets\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_reports_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/reports\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Reports\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/client\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Users\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_audit_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/audit\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/audit.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Audit\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView || (gs.userAccess | async)?.settings_activityLog_isView || (gs.userAccess | async)?.settings_brandDetails_isView || (gs.userAccess | async)?.settings_configuration_isView || (gs.userAccess | async)?.settings_contactDirectory_isView || (gs.userAccess | async)?.settings_documents_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/settings\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/settings.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Settings\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/tango\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tango Users\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/billing\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/billing.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Billing\r\n </span>\r\n </a>\r\n </div> \r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/tickets\">MY WORKSPACE\r\n </span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/tickets/stores\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Stores\r\n </span>\r\n </a>\r\n </div>\r\n \r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tickets\r\n </span>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n\r\n\r\n\r\n\r\n\r\n <!-- Tango Traffic -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView && clientData?.featureConfigs?.isNewTraffic && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_traffic.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tango Traffic</span>\r\n </a>\r\n </div> -->\r\n\r\n <!-- Tango Zone -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_zone.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tango Zone</span>\r\n </a>\r\n </div> -->\r\n\r\n <!-- Tango Revop -->\r\n <!-- <div class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n <span class=\"menu-link\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_revop.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/crafted/account\">Tango Revop\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Home\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Tagging\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Pending Action\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Customer Profile\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Control Center -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_controlCenter_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n <span class=\"menu-link\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/control_center.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/crafted/account\">Control Center\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Live & Playback\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Screen Manager\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Store Explore\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Tango SOP -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoSop_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n <span class=\"menu-link\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_sop.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/crafted/account\">Tango SOP\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Dashboard\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Create & Manage\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Flag\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Reports\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Incidents\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n", styles: [".menu-bullet-dot span{display:inline-block;width:6px;height:6px;background-color:#000;border-radius:50%;margin-right:10px;vertical-align:middle}:host::ng-deep .menu-sub .menu-sub-accordion{border-left:2px solid #98A2B3!important}::ng-deep .app-sidebar .menu .menu-item .menu-link.active .menu-title{color:#f5f5f5!important;border-radius:8px!important;border:1px solid var(--text-primary, #FFF)!important;padding:8px!important;color:var(--Primary-500, #33B5FF)!important;font-size:12px!important;font-style:normal;font-weight:600;line-height:18px}::ng-deep .app-sidebar .menu .menu-item .menu-link .menu-title{font-size:12px!important;font-style:normal;font-weight:600;line-height:18px}::ng-deep .app-sidebar .menu .menu-item .menu-link.active{transition:color .2s ease;background-color:#0d0e12!important}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
4297
5041
  }
4298
5042
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarMenuComponent, decorators: [{
4299
5043
  type: Component,
4300
5044
  args: [{ selector: "lib-sidebar-menu", template: "<!--begin::Menu wrapper-->\r\n<div id=\"kt_app_sidebar_menu_scroll\" class=\"scroll-y my-5 mx-3\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\"\r\n data-kt-scroll-height=\"auto\" data-kt-scroll-dependencies=\"#kt_app_sidebar_logo, #kt_app_sidebar_footer\"\r\n data-kt-scroll-wrappers=\"#kt_app_sidebar_menu\" data-kt-scroll-offset=\"5px\" data-kt-scroll-save-state=\"true\">\r\n <!--begin::Menu-->\r\n <div class=\"menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6\" id=\"#kt_app_sidebar_menu\"\r\n data-kt-menu=\"true\" data-kt-menu-expand=\"false\">\r\n <!-- Birds Eye -->\r\n <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard && (gs.userAccess | async)?.userType !== 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/birds_eye.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Analytics</span>\r\n </a>\r\n </div>\r\n\r\n <!-- Analyse -->\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n <img class=\"fs-2 ms-15\" src=\"./assets/tango/sidemenu-icons/tango_eye.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-15\">Tango Eye\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewTraffic && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic\">\r\n <span class=\"menu-title ms-8\">Traffic\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\" *ngIf=\"clientData?.featureConfigs?.isNewZone && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v1\">\r\n <span class=\"menu-title ms-8\">Zones\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\" *ngIf=\"clientData?.featureConfigs?.isNewZoneV2 && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v2\">\r\n <span class=\"menu-title ms-8\">Zone V2\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/trax/dashboard\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_trax.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Tango Trax\r\n </span>\r\n </a>\r\n </div> \r\n <!-- <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon \">\r\n <img class=\"fs-2 ms-15\" src=\"./assets/tango/sidemenu-icons/tango_trax.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-15\">Tango Trax\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/trax/checklist\">\r\n <span class=\"menu-title ms-8\">Checklist\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <div *ngIf=\"this.usersList?.clientId ? this.usersList?.clientId === '11': this.headerFilters?.client === '11'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/controlcenter\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/ControlCenter.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\" >Control Center\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic/explore\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/Explore.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Explore\r\n </span>\r\n </a>\r\n </div> \r\n <div *ngIf=\"clientData?.featureConfigs?.isNewDashboard && clientData?.featureConfigs?.isNewReports && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/analyse/reports\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Reports\r\n </span>\r\n </a>\r\n </div> \r\n \r\n <!-- Manage -->\r\n <div class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon \">\r\n <img class=\"fs-2 ms-15\" src=\"./assets/tango/sidemenu-icons/manage.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-15\">Manage\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/brands\">\r\n \r\n <span class=\"menu-title ms-8\">Brands\r\n </span>\r\n </a>\r\n </div>\r\n \r\n \r\n \r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/summary\">\r\n \r\n <span class=\"menu-title ms-8\">Summary\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/stores\">\r\n \r\n <span class=\"menu-title ms-8\">Stores\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/client\">\r\n \r\n <span class=\"menu-title ms-8\">Users\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/tango\">\r\n \r\n <span class=\"menu-title ms-8\">Tango Users\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/tickets\" >\r\n \r\n <span class=\"menu-title ms-8\">Tickets\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/reports\" >\r\n \r\n <span class=\"menu-title ms-8\">Reports\r\n </span>\r\n </a>\r\n </div>\r\n \r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/audit\" >\r\n \r\n <span class=\"menu-title ms-8\">Audit\r\n </span>\r\n </a>\r\n </div>\r\n \r\n \r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/billing\">\r\n \r\n <span class=\"menu-title ms-8\">Billing\r\n </span>\r\n </a>\r\n </div> \r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/settings\" >\r\n \r\n <span class=\"menu-title ms-8\">Settings\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/user-analysis\" >\r\n \r\n <span class=\"menu-title ms-8\">User Analysis\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n \r\n \r\n </div>\r\n\r\n <!-- Workspace -->\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/Workspace.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title ms-3\">Workspace\r\n </span>\r\n </a>\r\n </div>\r\n <!--end::Menu-->\r\n</div>\r\n</div>\r\n<!--end::Menu wrapper-->\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n <!-- <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title \" data-link=\"/manage/traffic\">ANALYZE\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n \r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\"\r\n class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M0.677249 15.8223H5.41799C6.09524 15.8223 6.09524 15.5214 6.09524 14.318V6.83461C6.09524 6.39794 5.79228 6.04449 5.41799 6.04449H0.677249C0.2709 6.04449 0 6.34534 0 6.79663V15.0701C0 15.5214 0.2709 15.8223 0.677249 15.8223Z\" fill=\"#475467\"/>\r\n <path d=\"M0.673874 4.44444H5.39099C5.79531 4.44444 6.06486 4.08889 6.06486 3.55555V0.888888C6.06486 0.355555 5.79531 0 5.39099 0H0.673874C0.269549 0 0 0.355555 0 0.888888V3.55555C0 4 0.269549 4.44444 0.673874 4.44444Z\" fill=\"#475467\"/>\r\n <path d=\"M2.27003 1.9131C2.27003 2.20178 2.09173 2.4358 1.87179 2.4358C1.65185 2.4358 1.47354 2.20178 1.47354 1.9131C1.47354 1.62443 1.65185 1.39041 1.87179 1.39041C2.09173 1.39041 2.27003 1.62443 2.27003 1.9131Z\" fill=\"#667085\"/>\r\n <path d=\"M3.46448 1.9131C3.46448 2.20178 3.28618 2.4358 3.06623 2.4358C2.84629 2.4358 2.66799 2.20178 2.66799 1.9131C2.66799 1.62443 2.84629 1.39041 3.06623 1.39041C3.28618 1.39041 3.46448 1.62443 3.46448 1.9131Z\" fill=\"#667085\"/>\r\n <path d=\"M4.66025 1.9131C4.66025 2.20178 4.48195 2.4358 4.262 2.4358C4.04206 2.4358 3.86376 2.20178 3.86376 1.9131C3.86376 1.62443 4.04206 1.39041 4.262 1.39041C4.48195 1.39041 4.66025 1.62443 4.66025 1.9131Z\" fill=\"#667085\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.61905 16V0H8.38095V16H7.61905Z\" fill=\"#667085\"/>\r\n <path d=\"M15.3227 0H10.582C10.1757 0 9.90476 0.300855 9.90476 0.752137V9.02564C9.90476 9.47692 10.1757 9.77778 10.582 9.77778H15.3227C15.7291 9.77778 16 9.47692 16 9.02564V0.752137C16 0.300855 15.7291 0 15.3227 0Z\" fill=\"#475467\"/>\r\n <path d=\"M9.93519 15.1111V12.4444C9.93519 11.9111 10.2047 11.5556 10.6091 11.5556H15.3261C15.7305 11.5556 16 11.9111 16 12.4444V15.1111C16 15.6444 15.7305 16 15.3261 16H10.6091C10.2047 16 9.93519 15.6444 9.93519 15.1111Z\" fill=\"#475467\"/>\r\n <path d=\"M12.0531 13.4336C12.0531 13.7223 11.8748 13.9563 11.6549 13.9563C11.4349 13.9563 11.2566 13.7223 11.2566 13.4336C11.2566 13.1449 11.4349 12.9109 11.6549 12.9109C11.8748 12.9109 12.0531 13.1449 12.0531 13.4336Z\" fill=\"#667085\"/>\r\n <path d=\"M13.2475 13.4336C13.2475 13.7223 13.0692 13.9563 12.8493 13.9563C12.6294 13.9563 12.4511 13.7223 12.4511 13.4336C12.4511 13.1449 12.6294 12.9109 12.8493 12.9109C13.0692 12.9109 13.2475 13.1449 13.2475 13.4336Z\" fill=\"#667085\"/>\r\n <path d=\"M14.4433 13.4336C14.4433 13.7223 14.265 13.9563 14.0451 13.9563C13.8251 13.9563 13.6468 13.7223 13.6468 13.4336C13.6468 13.1449 13.8251 12.9109 14.0451 12.9109C14.265 12.9109 14.4433 13.1449 14.4433 13.4336Z\" fill=\"#667085\"/>\r\n </svg>\r\n </span>\r\n <span class=\"menu-title\" data-link=\"\">Tango Eye\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion mx-2\" routerLinkActive=\"menu-active-bg\">\r\n <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/traffic\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Traffic\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\" *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView && clientData?.featureConfigs?.isNewZone && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v1\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Zones\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/zones/v2\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Zone V2\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"this.usersList?.clientId ? this.usersList?.clientId === '11': this.headerFilters?.client === '11'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\" routerLinkActive=\"active\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M9.84985 0.264419C9.5033 -0.0881395 8.97086 -0.0881395 8.62713 0.264419L2.76722 6.25478C2.5024 6.5231 2.40943 6.94117 2.52776 7.31557C4.9816 8.10493 6.91142 10.2546 7.60729 12.9815H12.8445C13.5912 12.9815 14.1968 12.3107 14.1968 11.4839V7.98637H15.0984C15.4702 7.98637 15.8027 7.73365 15.938 7.35301C16.0732 6.97238 15.983 6.53557 15.7098 6.25478L9.84985 0.264419ZM7.88619 6.48878C7.88619 6.21422 8.08904 5.98958 8.33696 5.98958H10.14C10.388 5.98958 10.5908 6.21422 10.5908 6.48878V8.48556C10.5908 8.76013 10.388 8.98476 10.14 8.98476H8.33696C8.08904 8.98476 7.88619 8.76013 7.88619 8.48556V6.48878Z\" fill=\"#667085\"/>\r\n <path d=\"M0 8.76165C0 8.34669 0.301447 8.01285 0.676143 8.01285C4.28506 8.01285 7.2122 11.2545 7.2122 15.2512C7.2122 15.6662 6.91075 16 6.53606 16C6.16136 16 5.85991 15.6662 5.85991 15.2512C5.85991 12.0813 3.53848 9.51044 0.676143 9.51044C0.301447 9.51044 0 9.1766 0 8.76165Z\" fill=\"#D0D5DD\"/>\r\n <path d=\"M1.539 15.7076C1.36993 15.8948 1.14062 16 0.901525 16C0.662426 16 0.43312 15.8948 0.264051 15.7076C0.0949818 15.5203 0 15.2664 0 15.0017C0 14.7368 0.0949818 14.4829 0.264051 14.2956C0.43312 14.1084 0.662426 14.0032 0.901525 14.0032C1.14062 14.0032 1.36993 14.1084 1.539 14.2956C1.70807 14.4829 1.80305 14.7368 1.80305 15.0017C1.80305 15.2664 1.70807 15.5203 1.539 15.7076Z\" fill=\"#D0D5DD\"/>\r\n <path d=\"M0.676143 12.5056C0.301447 12.5056 0 12.1717 0 11.7568C0 11.3418 0.301447 11.0081 0.676143 11.0081C2.79191 11.0081 4.50762 12.9081 4.50762 15.2512C4.50762 15.6662 4.20618 16 3.83148 16C3.45678 16 3.15534 15.6662 3.15534 15.2512C3.15534 13.7349 2.04533 12.5056 0.676143 12.5056Z\" fill=\"#D0D5DD\"/>\r\n </svg>\r\n </span>\r\n <span class=\"menu-title\" routerLink=\"/manage/controlcenter\">Control Center \r\n </span>\r\n \r\n </span>\r\n </div>\r\n \r\n <div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\"\r\n class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span class=\"menu-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M14.3843 6.77809L13.3937 6.58122C13.1468 6.53122 12.8937 6.60935 12.7156 6.78747L12.2343 7.26872C11.8718 7.63122 11.2625 7.53122 11.0343 7.07498L10.7437 6.49685C10.5937 6.19685 10.2875 6.00622 9.94997 6.00622C9.47497 6.00622 9.13435 6.46248 9.27185 6.91873L9.45935 7.5406C9.6031 8.02185 9.24372 8.50623 8.7406 8.50623H8.66872C8.24998 8.50623 7.85935 8.71561 7.6281 9.06249L7.29373 9.56561C7.11873 9.83123 7.1281 10.1781 7.31873 10.4312L7.82185 11.1031C8.14373 11.5312 7.92498 12.15 7.4031 12.2812L6.87185 12.4156C6.63748 12.475 6.44686 12.6406 6.35623 12.8656L5.84373 14.1437C6.51873 14.3719 7.24373 14.5 7.99998 14.5C11.5906 14.5 14.5 11.5906 14.5 7.99998C14.5 7.58123 14.4593 7.17184 14.3843 6.77809ZM1.64375 6.63435C1.83124 6.63435 1.81249 6.68122 1.92499 6.60935L2.41874 6.47185C2.62812 6.41247 2.84999 6.49997 2.96562 6.68122L3.02812 6.77809C3.21562 7.07184 3.54061 7.24997 3.89061 7.24997C4.24061 7.24997 4.56561 7.07184 4.75311 6.77809L4.94374 6.48122C4.98749 6.41247 5.04998 6.3531 5.12186 6.3156L6.24998 5.68435C6.81561 5.36872 7.04685 4.67185 6.78123 4.08123L6.60935 3.69374C6.34061 3.09374 5.64998 2.80311 5.03124 3.03436L4.94999 3.06561C4.63749 3.18123 4.66874 3.08437 4.39999 2.88749L3.96874 2.90311C2.39999 3.68749 1.92187 4.98436 1.6 6.48748L1.64375 6.63435ZM16 7.99998C16 10.1217 15.1571 12.1566 13.6568 13.6568C12.1565 15.1571 10.1217 16 7.99998 16C5.87825 16 3.84343 15.1571 2.34314 13.6568C0.842852 12.1566 0 10.1217 0 7.99998C0 5.87825 0.842852 3.84342 2.34314 2.34314C3.84343 0.842851 5.87825 0 7.99998 0C10.1217 0 12.1565 0.842851 13.6568 2.34314C15.1571 3.84342 16 5.87825 16 7.99998ZM11.4843 5.12185C11.55 4.8531 11.3875 4.58123 11.1218 4.5156L10.1218 4.2656C9.8531 4.19998 9.58122 4.36248 9.5156 4.6281C9.44997 4.89373 9.61247 5.16872 9.8781 5.23435L10.8781 5.48435C11.1468 5.54997 11.4187 5.38747 11.4843 5.12185ZM8.60935 5.74685C8.67497 5.4781 8.51248 5.20622 8.24685 5.1406C7.98123 5.07498 7.70623 5.23747 7.6406 5.5031L7.3906 6.5031C7.32498 6.77184 7.48748 7.04373 7.7531 7.10935C8.01873 7.17497 8.29373 7.01247 8.35935 6.74685L8.60935 5.74685Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M2.45522 6.05254C2.59366 6.24051 2.35423 6.2781 2.22966 6.2781C2.10509 6.2781 2.0041 6.17711 2.0041 6.05254C2.0041 5.92797 2.10509 5.67661 2.22966 5.67661C2.35423 5.67661 2.45522 5.92797 2.45522 6.05254Z\"\r\n fill=\"#475467\" />\r\n <path\r\n d=\"M4.20498 11.8559C4.62113 11.3337 5.57024 10.0682 5.57024 9.35736C5.57024 8.49526 4.87261 7.79579 4.01273 7.79579C3.15285 7.79579 2.45522 8.49526 2.45522 9.35736C2.45522 10.0682 3.40433 11.3337 3.82047 11.8559C3.92025 11.9803 4.10521 11.9803 4.20498 11.8559ZM4.01273 8.83684C4.15042 8.83684 4.28247 8.89168 4.37984 8.98929C4.4772 9.08691 4.5319 9.21931 4.5319 9.35736C4.5319 9.49541 4.4772 9.62781 4.37984 9.72542C4.28247 9.82304 4.15042 9.87788 4.01273 9.87788C3.87504 9.87788 3.74298 9.82304 3.64562 9.72542C3.54826 9.62781 3.49356 9.49541 3.49356 9.35736C3.49356 9.21931 3.54826 9.08691 3.64562 8.98929C3.74298 8.89168 3.87504 8.83684 4.01273 8.83684Z\"\r\n fill=\"#667085\" />\r\n <path\r\n d=\"M13.0419 10.2943C13.9436 9.11946 16 6.27207 16 4.6727C16 2.73295 14.4884 1.1592 12.6253 1.1592C10.7623 1.1592 9.25074 2.73295 9.25074 4.6727C9.25074 6.27207 11.3071 9.11946 12.2088 10.2943C12.425 10.5743 12.8257 10.5743 13.0419 10.2943ZM12.6253 3.50153C12.9237 3.50153 13.2098 3.62492 13.4207 3.84456C13.6317 4.06419 13.7502 4.36208 13.7502 4.6727C13.7502 4.98331 13.6317 5.2812 13.4207 5.50083C13.2098 5.72047 12.9237 5.84386 12.6253 5.84386C12.327 5.84386 12.0409 5.72047 11.8299 5.50083C11.619 5.2812 11.5005 4.98331 11.5005 4.6727C11.5005 4.36208 11.619 4.06419 11.8299 3.84456C12.0409 3.62492 12.327 3.50153 12.6253 3.50153Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title\" data-link=\"\">Tango Trax\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/trax/checklist\">\r\n <span class=\"menu-bullet\">\r\n </span>\r\n <span class=\"menu-title\">Checklist\r\n </span>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n </div>\r\n \r\n</div>\r\n\r\n<div *ngIf=\"!clientData?.featureConfigs?.isNewDashboard || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\" routerLinkActive=\"active\" routerLink=\"/manage/analyse/reports\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/manage/traffic\">REPORTS\r\n </span>\r\n \r\n </span>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/manage\">MANAGE\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_brands_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/brands\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/brands.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Brands\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_overview_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/summary\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/overview.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Summary\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_stores_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/stores\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Stores\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_tickets_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/tickets\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tickets\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_reports_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/reports\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/reports.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Reports\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/client\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Users\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_audit_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/audit\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/audit.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Audit\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.settings_paymentSubscriptions_isView || (gs.userAccess | async)?.settings_activityLog_isView || (gs.userAccess | async)?.settings_brandDetails_isView || (gs.userAccess | async)?.settings_configuration_isView || (gs.userAccess | async)?.settings_contactDirectory_isView || (gs.userAccess | async)?.settings_documents_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/settings\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/settings.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Settings\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.manage_users_isView && (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users/tango\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/users.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tango Users\r\n </span>\r\n </a>\r\n </div>\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/billing\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/billing.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Billing\r\n </span>\r\n </a>\r\n </div> \r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here\">\r\n <span class=\"menu-link px-0\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\">\r\n <span style=\"width: 0px;\" class=\"menu-icon\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/tickets\">MY WORKSPACE\r\n </span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\" >\r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/tickets/stores\">\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/stores.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Stores\r\n </span>\r\n </a>\r\n </div>\r\n \r\n <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" [routerLink]=\"['/tickets/users']\" [queryParams]=\"{ type: 'installation' }\" >\r\n <span class=\"menu-bullet\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tickets.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tickets\r\n </span>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n </div> -->\r\n\r\n\r\n\r\n\r\n\r\n <!-- Tango Traffic -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView && clientData?.featureConfigs?.isNewTraffic && ((gs.userAccess | async)?.userType !== 'tango') || (gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_traffic.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tango Traffic</span>\r\n </a>\r\n </div> -->\r\n\r\n <!-- Tango Zone -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoZone_isView\" class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_zone.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\">Tango Zone</span>\r\n </a>\r\n </div> -->\r\n\r\n <!-- Tango Revop -->\r\n <!-- <div class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n <span class=\"menu-link\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_revop.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/crafted/account\">Tango Revop\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Home\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Tagging\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Pending Action\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Customer Profile\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Control Center -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_controlCenter_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n <span class=\"menu-link\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/control_center.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/crafted/account\">Control Center\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Live & Playback\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Screen Manager\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Store Explore\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <!-- Tango SOP -->\r\n <!-- <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoSop_isView\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n <span class=\"menu-link\">\r\n <span class=\"menu-icon\">\r\n <img class=\"fs-2\" src=\"./assets/tango/sidemenu-icons/tango_sop.svg\" alt=\"\">\r\n </span>\r\n <span class=\"menu-title\" data-link=\"/crafted/account\">Tango SOP\r\n </span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion\" routerLinkActive=\"menu-active-bg\">\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Dashboard\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Create & Manage\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Flag\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Reports\r\n </span>\r\n </a>\r\n </div>\r\n <div class=\"menu-item\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\" (click)=\"oldDashborad()\">\r\n <span class=\"menu-bullet\">\r\n <span class=\"bullet bullet-dot\"></span>\r\n </span>\r\n <span class=\"menu-title\">Incidents\r\n </span>\r\n </a>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n", styles: [".menu-bullet-dot span{display:inline-block;width:6px;height:6px;background-color:#000;border-radius:50%;margin-right:10px;vertical-align:middle}:host::ng-deep .menu-sub .menu-sub-accordion{border-left:2px solid #98A2B3!important}::ng-deep .app-sidebar .menu .menu-item .menu-link.active .menu-title{color:#f5f5f5!important;border-radius:8px!important;border:1px solid var(--text-primary, #FFF)!important;padding:8px!important;color:var(--Primary-500, #33B5FF)!important;font-size:12px!important;font-style:normal;font-weight:600;line-height:18px}::ng-deep .app-sidebar .menu .menu-item .menu-link .menu-title{font-size:12px!important;font-style:normal;font-weight:600;line-height:18px}::ng-deep .app-sidebar .menu .menu-item .menu-link.active{transition:color .2s ease;background-color:#0d0e12!important}\n"] }]
4301
- }], ctorParameters: () => [{ type: AuthService }, { type: i1$1.GlobalStateService }, { type: i1.Router }] });
5045
+ }], ctorParameters: () => [{ type: AuthService }, { type: i1.GlobalStateService }, { type: i2.Router }] });
4302
5046
 
4303
5047
  class SidebarFooterComponent {
4304
5048
  auth;
@@ -4394,13 +5138,13 @@ class SidebarFooterComponent {
4394
5138
  },
4395
5139
  });
4396
5140
  }
4397
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarFooterComponent, deps: [{ token: AuthService }, { token: i1.Router }, { token: i1$1.LayoutService }, { token: i1$1.PageInfoService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
4398
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarFooterComponent, selector: "lib-sidebar-footer", inputs: { toggleButtonClass: "toggleButtonClass", toggleEnabled: "toggleEnabled", toggleType: "toggleType", toggleState: "toggleState", userValuefooter: "userValuefooter" }, ngImport: i0, template: "<div class=\"container-with-overflow\">\r\n <div id=\"kt_app_sidebar_menu_scroll\" class=\"\" data-kt-scroll=\"false\" data-kt-scroll-activate=\"false\"\r\n data-kt-scroll-height=\"auto\" data-kt-scroll-dependencies=\"#kt_app_sidebar_logo, #kt_app_sidebar_footer\"\r\n data-kt-scroll-wrappers=\"#kt_app_sidebar_menu\" data-kt-scroll-offset=\"5px\" data-kt-scroll-save-state=\"true\">\r\n <div class=\"menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6\" id=\"kt_app_sidebar_menu\"\r\n data-kt-menu=\"true\" data-kt-menu-expand=\"false\">\r\n <div class=\"menu-item menu-accordion w-100 px-3\" id=\"#kt_app_sidebar_menu\" [ngClass]=\"{'active': isSubMenuActive}\"\r\n data-kt-menu-trigger=\"click\" (mouseover)=\"setArrowDirection(true)\"\r\n (mouseleave)=\"setArrowDirection(false)\" >\r\n <span class=\"menu-link without-sub\">\r\n <span class=\"menu-icon\">\r\n <img class=\"img-src\" *ngIf=\"userProfileData?.userProfile\" (error)=\"userProfileData.userProfile = null\" [src]=\"userProfileData?.userProfile ? userProfileData?.userProfile :'./assets/tango/Images/userProfile.svg'\" alt=\"Profile Image\">\r\n <img class=\"img-src\" *ngIf=\"!userProfileData?.userProfile\" src=\"assets/tango/Images/userProfile.svg\">\r\n </span>\r\n <span class=\"menu-title overflow-hidden ms-2\" data-link=\"/crafted/account\">{{ userValue.userName | titlecase}}<br>\r\n {{ userValue.email | titlecase}}</span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion w-100\" #accordion [class.show]=\"isSubMenuActive\" [ngClass]=\"{'menu-sub-top': isSubMenuActive}\"\r\n routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-item px-3 border-profile-first\">\r\n <a class=\"menu-link without-sub\" (click)=\"profileUrl()\" >\r\n <span class=\"menu-bullet\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M11.8574 3.83162C11.8574 5.94799 10.0668 7.66324 7.85742 7.66324C5.64805 7.66324 3.85742 5.94799 3.85742 3.83162C3.85742 1.71525 5.64805 0 7.85742 0C10.0668 0 11.8574 1.71525 11.8574 3.83162Z\"\r\n fill=\"#98A2B3\" />\r\n <path\r\n d=\"M6.36786 9.38452C2.85 9.38452 0 11.9226 0 15.0554C0 15.577 0.475 16.0001 1.06071 16.0001H14.9393C15.525 16.0001 16 15.577 16 15.0554C16 11.9226 13.15 9.38452 9.63214 9.38452H6.36786Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title overflow-hidden\">Profile</span>\r\n </a>\r\n </div>\r\n <!-- <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path opacity=\"0.3\"\r\n d=\"M14.2222 11.5556V8C14.2222 4.56356 11.4364 1.77778 8 1.77778C4.56356 1.77778 1.77778 4.56356 1.77778 8V11.5556H14.2222ZM16 11.5556H0V8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8V11.5556Z\"\r\n fill=\"#D0D5DD\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.77778 9.77759H2.66667C3.64851 9.77759 4.44444 10.5735 4.44444 11.5554V14.222C4.44444 15.2039 3.64851 15.9998 2.66667 15.9998H1.77778C0.795938 15.9998 0 15.2039 0 14.222V11.5554C0 10.5735 0.795938 9.77759 1.77778 9.77759ZM13.3333 9.77759H14.2222C15.2041 9.77759 16 10.5735 16 11.5554V14.222C16 15.2039 15.2041 15.9998 14.2222 15.9998H13.3333C12.3515 15.9998 11.5556 15.2039 11.5556 14.222V11.5554C11.5556 10.5735 12.3515 9.77759 13.3333 9.77759Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title overflow-hidden\">Support</span>\r\n </a>\r\n </div> -->\r\n <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n <a class=\"menu-link without-sub\" (click)=\"logout()\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M5 13H2.33333C1.97971 13 1.64057 12.8595 1.39052 12.6095C1.14048 12.3594 1 12.0203 1 11.6667V2.33333C1 1.97971 1.14048 1.64057 1.39052 1.39052C1.64057 1.14048 1.97971 1 2.33333 1H5\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M9.66667 10.3332L13 6.99984M13 6.99984L9.66667 3.6665M13 6.99984H5\" stroke=\"#D0D5DD\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title overflow-hidden\">Logout</span>\r\n </a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".menu{background:var(--Gray-700, #344054)}.menu .menu-item{position:relative;background:var(--Gray-700, #344054)}.menu .border-profile-first{border-top-left-radius:8px;border-top-right-radius:8px}.menu .menu-sub{position:absolute;top:100;bottom:calc(100% + 5px);left:0}.menu .menu-sub-top{bottom:auto;top:calc(100% + 5px)}.menu-sub{transition:max-height .3s ease-out}.menu-sub:not(.show){max-height:0;overflow:hidden}.menu-sub-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}.img-src{width:40px;height:40px;border-radius:30px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] });
5141
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarFooterComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.LayoutService }, { token: i1.PageInfoService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
5142
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarFooterComponent, selector: "lib-sidebar-footer", inputs: { toggleButtonClass: "toggleButtonClass", toggleEnabled: "toggleEnabled", toggleType: "toggleType", toggleState: "toggleState", userValuefooter: "userValuefooter" }, ngImport: i0, template: "<div class=\"container-with-overflow\">\r\n <div id=\"kt_app_sidebar_menu_scroll\" class=\"\" data-kt-scroll=\"false\" data-kt-scroll-activate=\"false\"\r\n data-kt-scroll-height=\"auto\" data-kt-scroll-dependencies=\"#kt_app_sidebar_logo, #kt_app_sidebar_footer\"\r\n data-kt-scroll-wrappers=\"#kt_app_sidebar_menu\" data-kt-scroll-offset=\"5px\" data-kt-scroll-save-state=\"true\">\r\n <div class=\"menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6\" id=\"kt_app_sidebar_menu\"\r\n data-kt-menu=\"true\" data-kt-menu-expand=\"false\">\r\n <div class=\"menu-item menu-accordion w-100 px-3\" id=\"#kt_app_sidebar_menu\" [ngClass]=\"{'active': isSubMenuActive}\"\r\n data-kt-menu-trigger=\"click\" (mouseover)=\"setArrowDirection(true)\"\r\n (mouseleave)=\"setArrowDirection(false)\" >\r\n <span class=\"menu-link without-sub\">\r\n <span class=\"menu-icon\">\r\n <img class=\"img-src\" *ngIf=\"userProfileData?.userProfile\" (error)=\"userProfileData.userProfile = null\" [src]=\"userProfileData?.userProfile ? userProfileData?.userProfile :'./assets/tango/Images/userProfile.svg'\" alt=\"Profile Image\">\r\n <img class=\"img-src\" *ngIf=\"!userProfileData?.userProfile\" src=\"assets/tango/Images/userProfile.svg\">\r\n </span>\r\n <span class=\"menu-title overflow-hidden ms-2\" data-link=\"/crafted/account\">{{ userValue.userName | titlecase}}<br>\r\n {{ userValue.email | titlecase}}</span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion w-100\" #accordion [class.show]=\"isSubMenuActive\" [ngClass]=\"{'menu-sub-top': isSubMenuActive}\"\r\n routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-item px-3 border-profile-first\">\r\n <a class=\"menu-link without-sub\" (click)=\"profileUrl()\" >\r\n <span class=\"menu-bullet\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M11.8574 3.83162C11.8574 5.94799 10.0668 7.66324 7.85742 7.66324C5.64805 7.66324 3.85742 5.94799 3.85742 3.83162C3.85742 1.71525 5.64805 0 7.85742 0C10.0668 0 11.8574 1.71525 11.8574 3.83162Z\"\r\n fill=\"#98A2B3\" />\r\n <path\r\n d=\"M6.36786 9.38452C2.85 9.38452 0 11.9226 0 15.0554C0 15.577 0.475 16.0001 1.06071 16.0001H14.9393C15.525 16.0001 16 15.577 16 15.0554C16 11.9226 13.15 9.38452 9.63214 9.38452H6.36786Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title overflow-hidden\">Profile</span>\r\n </a>\r\n </div>\r\n <!-- <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path opacity=\"0.3\"\r\n d=\"M14.2222 11.5556V8C14.2222 4.56356 11.4364 1.77778 8 1.77778C4.56356 1.77778 1.77778 4.56356 1.77778 8V11.5556H14.2222ZM16 11.5556H0V8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8V11.5556Z\"\r\n fill=\"#D0D5DD\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.77778 9.77759H2.66667C3.64851 9.77759 4.44444 10.5735 4.44444 11.5554V14.222C4.44444 15.2039 3.64851 15.9998 2.66667 15.9998H1.77778C0.795938 15.9998 0 15.2039 0 14.222V11.5554C0 10.5735 0.795938 9.77759 1.77778 9.77759ZM13.3333 9.77759H14.2222C15.2041 9.77759 16 10.5735 16 11.5554V14.222C16 15.2039 15.2041 15.9998 14.2222 15.9998H13.3333C12.3515 15.9998 11.5556 15.2039 11.5556 14.222V11.5554C11.5556 10.5735 12.3515 9.77759 13.3333 9.77759Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title overflow-hidden\">Support</span>\r\n </a>\r\n </div> -->\r\n <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n <a class=\"menu-link without-sub\" (click)=\"logout()\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M5 13H2.33333C1.97971 13 1.64057 12.8595 1.39052 12.6095C1.14048 12.3594 1 12.0203 1 11.6667V2.33333C1 1.97971 1.14048 1.64057 1.39052 1.39052C1.64057 1.14048 1.97971 1 2.33333 1H5\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M9.66667 10.3332L13 6.99984M13 6.99984L9.66667 3.6665M13 6.99984H5\" stroke=\"#D0D5DD\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title overflow-hidden\">Logout</span>\r\n </a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".menu{background:var(--Gray-700, #344054)}.menu .menu-item{position:relative;background:var(--Gray-700, #344054)}.menu .border-profile-first{border-top-left-radius:8px;border-top-right-radius:8px}.menu .menu-sub{position:absolute;top:100;bottom:calc(100% + 5px);left:0}.menu .menu-sub-top{bottom:auto;top:calc(100% + 5px)}.menu-sub{transition:max-height .3s ease-out}.menu-sub:not(.show){max-height:0;overflow:hidden}.menu-sub-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}.img-src{width:40px;height:40px;border-radius:30px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] });
4399
5143
  }
4400
5144
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarFooterComponent, decorators: [{
4401
5145
  type: Component,
4402
5146
  args: [{ selector: "lib-sidebar-footer", template: "<div class=\"container-with-overflow\">\r\n <div id=\"kt_app_sidebar_menu_scroll\" class=\"\" data-kt-scroll=\"false\" data-kt-scroll-activate=\"false\"\r\n data-kt-scroll-height=\"auto\" data-kt-scroll-dependencies=\"#kt_app_sidebar_logo, #kt_app_sidebar_footer\"\r\n data-kt-scroll-wrappers=\"#kt_app_sidebar_menu\" data-kt-scroll-offset=\"5px\" data-kt-scroll-save-state=\"true\">\r\n <div class=\"menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6\" id=\"kt_app_sidebar_menu\"\r\n data-kt-menu=\"true\" data-kt-menu-expand=\"false\">\r\n <div class=\"menu-item menu-accordion w-100 px-3\" id=\"#kt_app_sidebar_menu\" [ngClass]=\"{'active': isSubMenuActive}\"\r\n data-kt-menu-trigger=\"click\" (mouseover)=\"setArrowDirection(true)\"\r\n (mouseleave)=\"setArrowDirection(false)\" >\r\n <span class=\"menu-link without-sub\">\r\n <span class=\"menu-icon\">\r\n <img class=\"img-src\" *ngIf=\"userProfileData?.userProfile\" (error)=\"userProfileData.userProfile = null\" [src]=\"userProfileData?.userProfile ? userProfileData?.userProfile :'./assets/tango/Images/userProfile.svg'\" alt=\"Profile Image\">\r\n <img class=\"img-src\" *ngIf=\"!userProfileData?.userProfile\" src=\"assets/tango/Images/userProfile.svg\">\r\n </span>\r\n <span class=\"menu-title overflow-hidden ms-2\" data-link=\"/crafted/account\">{{ userValue.userName | titlecase}}<br>\r\n {{ userValue.email | titlecase}}</span>\r\n <span class=\"menu-arrow\"></span>\r\n </span>\r\n <div class=\"menu-sub menu-sub-accordion w-100\" #accordion [class.show]=\"isSubMenuActive\" [ngClass]=\"{'menu-sub-top': isSubMenuActive}\"\r\n routerLinkActive=\"menu-active-bg\" >\r\n <div class=\"menu-item px-3 border-profile-first\">\r\n <a class=\"menu-link without-sub\" (click)=\"profileUrl()\" >\r\n <span class=\"menu-bullet\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path\r\n d=\"M11.8574 3.83162C11.8574 5.94799 10.0668 7.66324 7.85742 7.66324C5.64805 7.66324 3.85742 5.94799 3.85742 3.83162C3.85742 1.71525 5.64805 0 7.85742 0C10.0668 0 11.8574 1.71525 11.8574 3.83162Z\"\r\n fill=\"#98A2B3\" />\r\n <path\r\n d=\"M6.36786 9.38452C2.85 9.38452 0 11.9226 0 15.0554C0 15.577 0.475 16.0001 1.06071 16.0001H14.9393C15.525 16.0001 16 15.577 16 15.0554C16 11.9226 13.15 9.38452 9.63214 9.38452H6.36786Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title overflow-hidden\">Profile</span>\r\n </a>\r\n </div>\r\n <!-- <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path opacity=\"0.3\"\r\n d=\"M14.2222 11.5556V8C14.2222 4.56356 11.4364 1.77778 8 1.77778C4.56356 1.77778 1.77778 4.56356 1.77778 8V11.5556H14.2222ZM16 11.5556H0V8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8V11.5556Z\"\r\n fill=\"#D0D5DD\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M1.77778 9.77759H2.66667C3.64851 9.77759 4.44444 10.5735 4.44444 11.5554V14.222C4.44444 15.2039 3.64851 15.9998 2.66667 15.9998H1.77778C0.795938 15.9998 0 15.2039 0 14.222V11.5554C0 10.5735 0.795938 9.77759 1.77778 9.77759ZM13.3333 9.77759H14.2222C15.2041 9.77759 16 10.5735 16 11.5554V14.222C16 15.2039 15.2041 15.9998 14.2222 15.9998H13.3333C12.3515 15.9998 11.5556 15.2039 11.5556 14.222V11.5554C11.5556 10.5735 12.3515 9.77759 13.3333 9.77759Z\"\r\n fill=\"#667085\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title overflow-hidden\">Support</span>\r\n </a>\r\n </div> -->\r\n <div class=\"menu-item px-3\" style=\"border-radius: 0px;\">\r\n <a class=\"menu-link without-sub\" (click)=\"logout()\" routerLinkActive=\"active\">\r\n <span class=\"menu-bullet\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n <path\r\n d=\"M5 13H2.33333C1.97971 13 1.64057 12.8595 1.39052 12.6095C1.14048 12.3594 1 12.0203 1 11.6667V2.33333C1 1.97971 1.14048 1.64057 1.39052 1.39052C1.64057 1.14048 1.97971 1 2.33333 1H5\"\r\n stroke=\"#667085\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path d=\"M9.66667 10.3332L13 6.99984M13 6.99984L9.66667 3.6665M13 6.99984H5\" stroke=\"#D0D5DD\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <span class=\"menu-title overflow-hidden\">Logout</span>\r\n </a>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".menu{background:var(--Gray-700, #344054)}.menu .menu-item{position:relative;background:var(--Gray-700, #344054)}.menu .border-profile-first{border-top-left-radius:8px;border-top-right-radius:8px}.menu .menu-sub{position:absolute;top:100;bottom:calc(100% + 5px);left:0}.menu .menu-sub-top{bottom:auto;top:calc(100% + 5px)}.menu-sub{transition:max-height .3s ease-out}.menu-sub:not(.show){max-height:0;overflow:hidden}.menu-sub-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}.img-src{width:40px;height:40px;border-radius:30px}\n"] }]
4403
- }], ctorParameters: () => [{ type: AuthService }, { type: i1.Router }, { type: i1$1.LayoutService }, { type: i1$1.PageInfoService }, { type: i0.NgZone }], propDecorators: { toggleButtonClass: [{
5147
+ }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.LayoutService }, { type: i1.PageInfoService }, { type: i0.NgZone }], propDecorators: { toggleButtonClass: [{
4404
5148
  type: Input
4405
5149
  }], toggleEnabled: [{
4406
5150
  type: Input
@@ -4532,13 +5276,13 @@ class SidebarComponent {
4532
5276
  ngOnDestroy() {
4533
5277
  this.unsubscribe.forEach((sb) => sb.unsubscribe());
4534
5278
  }
4535
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarComponent, deps: [{ token: i1$1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
5279
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarComponent, deps: [{ token: i1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
4536
5280
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SidebarComponent, selector: "lib-sidebar", ngImport: i0, template: "<!--begin::Logo-->\r\n<lib-sidebar-logo class=\"app-sidebar-logo px-6\" id=\"kt_app_sidebar_logo\"\r\n [toggleButtonClass]=\"toggleButtonClass\" [toggleEnabled]=\"toggleEnabled\" [toggleType]=\"toggleType\"\r\n [toggleState]=\"toggleState\">\r\n</lib-sidebar-logo>\r\n<!--end::Logo-->\r\n\r\n<!--begin::sidebar menu-->\r\n<lib-sidebar-menu class=\"app-sidebar-menu overflow-hidden flex-column-fluid\">\r\n</lib-sidebar-menu>\r\n<!--end::sidebar menu-->\r\n\r\n<!--begin::Footer-->\r\n<lib-sidebar-footer class=\"app-sidebar-footer flex-column-auto pt-2\" id=\"kt_app_sidebar_footer\">\r\n</lib-sidebar-footer>\r\n<!--end::Footer-->\r\n", styles: [".app-sidebar-footer{background:var(--Gray-700, #344054)}\n"], dependencies: [{ kind: "component", type: SidebarLogoComponent, selector: "lib-sidebar-logo", inputs: ["toggleButtonClass", "toggleEnabled", "toggleType", "toggleState"] }, { kind: "component", type: SidebarMenuComponent, selector: "lib-sidebar-menu" }, { kind: "component", type: SidebarFooterComponent, selector: "lib-sidebar-footer", inputs: ["toggleButtonClass", "toggleEnabled", "toggleType", "toggleState", "userValuefooter"] }] });
4537
5281
  }
4538
5282
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidebarComponent, decorators: [{
4539
5283
  type: Component,
4540
5284
  args: [{ selector: 'lib-sidebar', template: "<!--begin::Logo-->\r\n<lib-sidebar-logo class=\"app-sidebar-logo px-6\" id=\"kt_app_sidebar_logo\"\r\n [toggleButtonClass]=\"toggleButtonClass\" [toggleEnabled]=\"toggleEnabled\" [toggleType]=\"toggleType\"\r\n [toggleState]=\"toggleState\">\r\n</lib-sidebar-logo>\r\n<!--end::Logo-->\r\n\r\n<!--begin::sidebar menu-->\r\n<lib-sidebar-menu class=\"app-sidebar-menu overflow-hidden flex-column-fluid\">\r\n</lib-sidebar-menu>\r\n<!--end::sidebar menu-->\r\n\r\n<!--begin::Footer-->\r\n<lib-sidebar-footer class=\"app-sidebar-footer flex-column-auto pt-2\" id=\"kt_app_sidebar_footer\">\r\n</lib-sidebar-footer>\r\n<!--end::Footer-->\r\n", styles: [".app-sidebar-footer{background:var(--Gray-700, #344054)}\n"] }]
4541
- }], ctorParameters: () => [{ type: i1$1.LayoutService }] });
5285
+ }], ctorParameters: () => [{ type: i1.LayoutService }] });
4542
5286
 
4543
5287
  class LayoutScrollTopComponent {
4544
5288
  router;
@@ -4591,13 +5335,13 @@ class LayoutScrollTopComponent {
4591
5335
  ngOnDestroy() {
4592
5336
  this.unsubscribe.forEach((sb) => sb.unsubscribe());
4593
5337
  }
4594
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutScrollTopComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
5338
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutScrollTopComponent, deps: [{ token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
4595
5339
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutScrollTopComponent, selector: "lib-scroll-top", host: { properties: { "class": "this.class", "id": "this.id", "attr.data-kt-scrolltop": "this.dataKtScrolltop" } }, ngImport: i0, template: "<lib-keenicon name=\"arrow-up\" class=\"text-white fw-bold\"></lib-keenicon>\r\n", dependencies: [{ kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
4596
5340
  }
4597
5341
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutScrollTopComponent, decorators: [{
4598
5342
  type: Component,
4599
5343
  args: [{ selector: 'lib-scroll-top', template: "<lib-keenicon name=\"arrow-up\" class=\"text-white fw-bold\"></lib-keenicon>\r\n" }]
4600
- }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { class: [{
5344
+ }], ctorParameters: () => [{ type: i2.Router }], propDecorators: { class: [{
4601
5345
  type: HostBinding,
4602
5346
  args: ['class']
4603
5347
  }], id: [{
@@ -4867,13 +5611,13 @@ class LayoutComponent {
4867
5611
  ngOnDestroy() {
4868
5612
  this.unsubscribe.forEach((sb) => sb.unsubscribe());
4869
5613
  }
4870
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, deps: [{ token: i1$1.LayoutInitService }, { token: i1$1.LayoutService }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: AuthService }, { token: ToastService }, { token: i1$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
5614
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, deps: [{ token: i1.LayoutInitService }, { token: i1.LayoutService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: AuthService }, { token: ToastService }, { token: i1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
4871
5615
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutComponent, selector: "lib-layout", viewQueries: [{ propertyName: "ktSidebar", first: true, predicate: ["ktSidebar"], descendants: true, static: true }, { propertyName: "ktAside", first: true, predicate: ["ktAside"], descendants: true, static: true }, { propertyName: "ktHeaderMobile", first: true, predicate: ["ktHeaderMobile"], descendants: true, static: true }, { propertyName: "ktHeader", first: true, predicate: ["ktHeader"], descendants: true, static: true }], ngImport: i0, template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n <!--begin::Page-->\r\n <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n <ng-container *ngIf=\"appHeaderDisplay\">\r\n <!--begin::Header-->\r\n <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n </lib-header>\r\n <!--end::Header-->\r\n </ng-container>\r\n\r\n <!--begin::Wrapper-->\r\n <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n <ng-container *ngIf=\"appSidebarDisplay\">\r\n <!--begin::sidebar-->\r\n <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n </lib-sidebar>\r\n <!--end::sidebar-->\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n <!-- TODO: app sidebar panel -->\r\n </ng-container>\r\n <!--begin::Main-->\r\n <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n <!--begin::Content wrapper-->\r\n <ng-container *ngIf=\"appToolbarDisplay\">\r\n <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n </ng-container>\r\n <div class=\"d-flex flex-column flex-column-fluid mt-15\">\r\n \r\n <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n [appContentContainerClass]=\"appContentContainerClass\">\r\n </lib-content>\r\n </div>\r\n <!--end::Content wrapper-->\r\n <ng-container *ngIf=\"appFooterDisplay\">\r\n <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n </ng-container>\r\n </div>\r\n <!--end:::Main-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n </div>\r\n <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "lib-header" }, { kind: "component", type: ContentComponent, selector: "lib-content", inputs: ["contentContainerCSSClass", "appContentContiner", "appContentContainerClass"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["appFooterContainerCSSClass"] }, { kind: "component", type: ScriptsInitComponent, selector: "lib-scripts-init" }, { kind: "component", type: ToolbarComponent, selector: "lib-toolbar", inputs: ["currentLayoutType", "appToolbarLayout"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar" }, { kind: "component", type: LayoutScrollTopComponent, selector: "lib-scroll-top" }] });
4872
5616
  }
4873
5617
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, decorators: [{
4874
5618
  type: Component,
4875
5619
  args: [{ selector: 'lib-layout', template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n <!--begin::Page-->\r\n <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n <ng-container *ngIf=\"appHeaderDisplay\">\r\n <!--begin::Header-->\r\n <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n </lib-header>\r\n <!--end::Header-->\r\n </ng-container>\r\n\r\n <!--begin::Wrapper-->\r\n <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n <ng-container *ngIf=\"appSidebarDisplay\">\r\n <!--begin::sidebar-->\r\n <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n </lib-sidebar>\r\n <!--end::sidebar-->\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n <!-- TODO: app sidebar panel -->\r\n </ng-container>\r\n <!--begin::Main-->\r\n <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n <!--begin::Content wrapper-->\r\n <ng-container *ngIf=\"appToolbarDisplay\">\r\n <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n </ng-container>\r\n <div class=\"d-flex flex-column flex-column-fluid mt-15\">\r\n \r\n <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n [appContentContainerClass]=\"appContentContainerClass\">\r\n </lib-content>\r\n </div>\r\n <!--end::Content wrapper-->\r\n <ng-container *ngIf=\"appFooterDisplay\">\r\n <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n </ng-container>\r\n </div>\r\n <!--end:::Main-->\r\n </div>\r\n <!--end::Wrapper-->\r\n\r\n </div>\r\n <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"] }]
4876
- }], ctorParameters: () => [{ type: i1$1.LayoutInitService }, { type: i1$1.LayoutService }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: AuthService }, { type: ToastService }, { type: i1$1.GlobalStateService }], propDecorators: { ktSidebar: [{
5620
+ }], ctorParameters: () => [{ type: i1.LayoutInitService }, { type: i1.LayoutService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: AuthService }, { type: ToastService }, { type: i1.GlobalStateService }], propDecorators: { ktSidebar: [{
4877
5621
  type: ViewChild,
4878
5622
  args: ['ktSidebar', { static: true }]
4879
5623
  }], ktAside: [{
@@ -4962,13 +5706,13 @@ class ErrorsComponent {
4962
5706
  ScrollComponent.bootstrap();
4963
5707
  }, 200);
4964
5708
  }
4965
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
4966
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ErrorsComponent, selector: "lib-errors", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--begin::Authentication - -->\r\n<div class=\"d-flex flex-column flex-center flex-column-fluid\">\r\n <!--begin::Content-->\r\n <div class=\"d-flex flex-column flex-center text-center p-10\">\r\n <!--begin::Wrapper-->\r\n <div class=\"card card-flush w-lg-650px py-5\">\r\n <div class=\"card-body py-15 py-lg-20\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n </div>\r\n <!--end::Wrapper-->\r\n </div>\r\n <!--end::Content-->\r\n</div>\r\n<!--end::Authentication - -->\r\n", styles: [":host{height:100%;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
5709
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorsComponent, deps: [{ token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
5710
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ErrorsComponent, selector: "lib-errors", host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<!--begin::Authentication - -->\r\n<div class=\"d-flex flex-column flex-center flex-column-fluid\">\r\n <!--begin::Content-->\r\n <div class=\"d-flex flex-column flex-center text-center p-10\">\r\n <!--begin::Wrapper-->\r\n <div class=\"card card-flush w-lg-650px py-5\">\r\n <div class=\"card-body py-15 py-lg-20\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n </div>\r\n <!--end::Wrapper-->\r\n </div>\r\n <!--end::Content-->\r\n</div>\r\n<!--end::Authentication - -->\r\n", styles: [":host{height:100%;margin:0}\n"], dependencies: [{ kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
4967
5711
  }
4968
5712
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorsComponent, decorators: [{
4969
5713
  type: Component,
4970
5714
  args: [{ selector: 'lib-errors', template: "<!--begin::Authentication - -->\r\n<div class=\"d-flex flex-column flex-center flex-column-fluid\">\r\n <!--begin::Content-->\r\n <div class=\"d-flex flex-column flex-center text-center p-10\">\r\n <!--begin::Wrapper-->\r\n <div class=\"card card-flush w-lg-650px py-5\">\r\n <div class=\"card-body py-15 py-lg-20\">\r\n <router-outlet></router-outlet>\r\n </div>\r\n </div>\r\n <!--end::Wrapper-->\r\n </div>\r\n <!--end::Content-->\r\n</div>\r\n<!--end::Authentication - -->\r\n", styles: [":host{height:100%;margin:0}\n"] }]
4971
- }], ctorParameters: () => [{ type: i1.Router }], propDecorators: { class: [{
5715
+ }], ctorParameters: () => [{ type: i2.Router }], propDecorators: { class: [{
4972
5716
  type: HostBinding,
4973
5717
  args: ['class']
4974
5718
  }] } });
@@ -5005,13 +5749,13 @@ class Error404Component {
5005
5749
  this.unsubscribe.forEach((sb) => sb.unsubscribe());
5006
5750
  document.body.style.backgroundImage = 'none';
5007
5751
  }
5008
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Error404Component, deps: [{ token: i1.Router }, { token: i1$1.ThemeModeService }], target: i0.ɵɵFactoryTarget.Component });
5752
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Error404Component, deps: [{ token: i2.Router }, { token: i1.ThemeModeService }], target: i0.ɵɵFactoryTarget.Component });
5009
5753
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Error404Component, selector: "lib-error404", ngImport: i0, template: "<!--begin::Title-->\r\n<h1 class=\"fw-bolder fs-2hx text-gray-900 mb-4\">\r\n Oops!\r\n</h1>\r\n<!--end::Title-->\r\n\r\n<!--begin::Text-->\r\n<div class=\"fw-semibold fs-6 text-gray-500 mb-7\">\r\n We can't find that page.\r\n</div>\r\n<!--end::Text-->\r\n\r\n<!--begin::Illustration-->\r\n<div class=\"mb-3\">\r\n <img src=\"./assets/media/auth/404-error.png\" class=\"mw-100 mh-300px theme-light-show\" alt=\"\" />\r\n <!-- <img src=\"./assets/media/auth/404-error-dark.png\" class=\"mw-100 mh-300px theme-dark-show\" alt=\"\" /> -->\r\n</div>\r\n<!--end::Illustration-->\r\n\r\n<!--begin::Link-->\r\n<div class=\"mb-0\">\r\n <a (click)=\"routeToDashboard()\" class=\"btn btn-sm btn-primary\">Return Home</a>\r\n</div>\r\n<!--end::Link-->\r\n", styles: [""] });
5010
5754
  }
5011
5755
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Error404Component, decorators: [{
5012
5756
  type: Component,
5013
5757
  args: [{ selector: 'lib-error404', template: "<!--begin::Title-->\r\n<h1 class=\"fw-bolder fs-2hx text-gray-900 mb-4\">\r\n Oops!\r\n</h1>\r\n<!--end::Title-->\r\n\r\n<!--begin::Text-->\r\n<div class=\"fw-semibold fs-6 text-gray-500 mb-7\">\r\n We can't find that page.\r\n</div>\r\n<!--end::Text-->\r\n\r\n<!--begin::Illustration-->\r\n<div class=\"mb-3\">\r\n <img src=\"./assets/media/auth/404-error.png\" class=\"mw-100 mh-300px theme-light-show\" alt=\"\" />\r\n <!-- <img src=\"./assets/media/auth/404-error-dark.png\" class=\"mw-100 mh-300px theme-dark-show\" alt=\"\" /> -->\r\n</div>\r\n<!--end::Illustration-->\r\n\r\n<!--begin::Link-->\r\n<div class=\"mb-0\">\r\n <a (click)=\"routeToDashboard()\" class=\"btn btn-sm btn-primary\">Return Home</a>\r\n</div>\r\n<!--end::Link-->\r\n" }]
5014
- }], ctorParameters: () => [{ type: i1.Router }, { type: i1$1.ThemeModeService }] });
5758
+ }], ctorParameters: () => [{ type: i2.Router }, { type: i1.ThemeModeService }] });
5015
5759
 
5016
5760
  class Error500Component {
5017
5761
  router;
@@ -5045,13 +5789,13 @@ class Error500Component {
5045
5789
  this.unsubscribe.forEach((sb) => sb.unsubscribe());
5046
5790
  document.body.style.backgroundImage = 'none';
5047
5791
  }
5048
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Error500Component, deps: [{ token: i1.Router }, { token: i1$1.ThemeModeService }], target: i0.ɵɵFactoryTarget.Component });
5792
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Error500Component, deps: [{ token: i2.Router }, { token: i1.ThemeModeService }], target: i0.ɵɵFactoryTarget.Component });
5049
5793
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Error500Component, selector: "lib-error500", ngImport: i0, template: "<!--begin::Title-->\r\n<h1 class=\"fw-bolder fs-2qx text-gray-900 mb-4\">\r\n System Error\r\n</h1>\r\n<!--end::Title-->\r\n\r\n<!--begin::Text-->\r\n<div class=\"fw-semibold fs-6 text-gray-500 mb-7\">\r\n Something went wrong! Please try again later.\r\n</div>\r\n<!--end::Text-->\r\n\r\n<!--begin::Illustration-->\r\n<div class=\"mb-11\">\r\n <img src=\"./assets/media/auth/500-error.png\" class=\"mw-100 mh-300px theme-light-show\" alt=\"\" />\r\n <img src=\"./assets/media/auth/500-error-dark.png\" class=\"mw-100 mh-300px theme-dark-show\" alt=\"\" />\r\n</div>\r\n<!--end::Illustration-->\r\n\r\n<!--begin::Link-->\r\n<div class=\"mb-0\">\r\n <a (click)=\"routeToDashboard()\" class=\"btn btn-sm btn-primary\">Return Home</a>\r\n</div>\r\n<!--end::Link-->\r\n", styles: [""] });
5050
5794
  }
5051
5795
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Error500Component, decorators: [{
5052
5796
  type: Component,
5053
5797
  args: [{ selector: 'lib-error500', template: "<!--begin::Title-->\r\n<h1 class=\"fw-bolder fs-2qx text-gray-900 mb-4\">\r\n System Error\r\n</h1>\r\n<!--end::Title-->\r\n\r\n<!--begin::Text-->\r\n<div class=\"fw-semibold fs-6 text-gray-500 mb-7\">\r\n Something went wrong! Please try again later.\r\n</div>\r\n<!--end::Text-->\r\n\r\n<!--begin::Illustration-->\r\n<div class=\"mb-11\">\r\n <img src=\"./assets/media/auth/500-error.png\" class=\"mw-100 mh-300px theme-light-show\" alt=\"\" />\r\n <img src=\"./assets/media/auth/500-error-dark.png\" class=\"mw-100 mh-300px theme-dark-show\" alt=\"\" />\r\n</div>\r\n<!--end::Illustration-->\r\n\r\n<!--begin::Link-->\r\n<div class=\"mb-0\">\r\n <a (click)=\"routeToDashboard()\" class=\"btn btn-sm btn-primary\">Return Home</a>\r\n</div>\r\n<!--end::Link-->\r\n" }]
5054
- }], ctorParameters: () => [{ type: i1.Router }, { type: i1$1.ThemeModeService }] });
5798
+ }], ctorParameters: () => [{ type: i2.Router }, { type: i1.ThemeModeService }] });
5055
5799
 
5056
5800
  class PaginationComponent {
5057
5801
  collection = [];
@@ -5256,13 +6000,13 @@ class FiltersComponent {
5256
6000
  });
5257
6001
  this.appliedFilters.emit(this.responseArray);
5258
6002
  }
5259
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FiltersComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
6003
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FiltersComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
5260
6004
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FiltersComponent, selector: "lib-filters", inputs: { dataObject: "dataObject" }, outputs: { appliedFilters: "appliedFilters" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n <div class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" *ngIf=\"Opendropdown\">\r\n <div class=\"dropdown-title d-flex justify-content-between\">Filter Options\r\n <!-- <div class=\"text-end\"> -->\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div *ngIf=\"item.type !== 'single'\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between cursor-pointer\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span>{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n <label class=\"form-check-label cursor-pointer px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"dataObject[i].selectedValue\" (input)=\"searchData($event,i)\" [id]=\"i\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2 \">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"issue.checked\"\r\n (change)=\"toggleCheckbox($event,issue.text,i,j)\">\r\n <label class=\"form-check-label cursor-pointer px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.type === 'single'\" class=\"position-relative w-100\">\r\n <button type=\"button\" (click)=\"openDropdown($event,i)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"> {{selectedValuesArray[i]?.text ? selectedValuesArray[i]?.text : item.Description}}\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"item.isOpen\" class=\"card py-1 w-100 dropdown-single position-absolute z-1 top-50px end-0\">\r\n <ul *ngFor=\"let item of item.Issues; let j = index\" class=\"list-unstyled\">\r\n <li [ngClass]=\"selectedValuesArray[i]?.text === item.text ? 'active' : ''\" class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem($event,i,j)\">{{item.text}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div> -->\r\n </div>\r\n</div>", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .items:hover,.dropdown1 .tems.focus,.dropdown1 .items.active,.dropdown1 .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}::ng-deep .dropdown1{z-index:1!important}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.dropdown-single{z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;min-height:auto;max-height:200px;overflow:auto}.dropdown-single label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
5261
6005
  }
5262
6006
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FiltersComponent, decorators: [{
5263
6007
  type: Component,
5264
6008
  args: [{ selector: 'lib-filters', template: "<div class=\"position-relative\">\r\n \r\n <button type=\"button\" (click)=\"opendropdown($event)\"\r\n class=\"btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val\"><svg\r\n class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n <span class=\"ms-2\">Filter</span> </button>\r\n <div class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" *ngIf=\"Opendropdown\">\r\n <div class=\"dropdown-title d-flex justify-content-between\">Filter Options\r\n <!-- <div class=\"text-end\"> -->\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n <!-- </div> -->\r\n </div>\r\n <div class=\"w-100 border border-gray mt-3\"></div>\r\n <div class=\"py-3\" *ngFor=\"let item of dataObject; let i = index\">\r\n <div *ngIf=\"item.type !== 'single'\">\r\n <div class=\"dropdown form-select position-relative d-flex justify-content-between cursor-pointer\" (click)=\"Dropdown(item.Description,i,$event)\">\r\n <!-- <span class=\"\">{{ selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined ? selectedValuesArray[i]?.length + ' ' + item.Description.split(' ').pop() + ' Selected' : item.Description }}</span> -->\r\n <span>{{item.Description}}</span> <span *ngIf=\"selectedValuesArray[i]?.length !== null && selectedValuesArray[i]?.length !== undefined && selectedValuesArray[i]?.length !== 0\" class=\"badge badge-light-default\">{{selectedValuesArray[i]?.length}}</span>\r\n </div>\r\n <div *ngIf=\"item.isOpen\" class=\"dropdown-content position-absolute w-100\">\r\n <div class=\"form-check d-flex align-items-center py-3 pt-3 ps-0\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" value=\"Select All\" id=\"selectall{{i}}\" [checked]=\"selectedValuesArray[i]?.length === item.Issues.length\"\r\n (change)=\"toggleCheckbox($event,'Select All', i,0)\">\r\n <label class=\"form-check-label cursor-pointer px-2\" for=\"selectall{{i}}\">\r\n Select All\r\n </label>\r\n </div>\r\n \r\n <div class=\"border border-gray mt-3 \"></div>\r\n \r\n <div class=\"mt-3 d-flex align-items-center\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3 mt-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n <path d=\"M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z\" stroke=\"#667085\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </span>\r\n <input type=\"text\" [(ngModel)]=\"dataObject[i].selectedValue\" (input)=\"searchData($event,i)\" [id]=\"i\" class=\"form-control searchinput ps-14 py-2 me-2 mt-2\"\r\n placeholder=\"Search\" autocomplete=\"off\" />\r\n </div>\r\n \r\n <div *ngFor=\"let issue of item.Issues;let j=index\" class=\"form-check d-flex align-items-center py-3 pt-3 ps-0 mt-2 \">\r\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" [value]=\"issue.text\" id=\"option{{issue.text}}\" [checked]=\"issue.checked\"\r\n (change)=\"toggleCheckbox($event,issue.text,i,j)\">\r\n <label class=\"form-check-label cursor-pointer px-2\" for=\"option{{issue.text}}\">\r\n {{ issue.text }}\r\n </label>\r\n </div>\r\n <div class=\"mt-5 d-flex justify-content-center\">\r\n <span class=\"form-check-label\" *ngIf=\"noFilter\"> No filters available</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"item.type === 'single'\" class=\"position-relative w-100\">\r\n <button type=\"button\" (click)=\"openDropdown($event,i)\"\r\n class=\"btn btn-default w-100 btn-outline btn-outline-default rounded-3 text-nowrap border-val d-flex justify-content-between\"> {{selectedValuesArray[i]?.text ? selectedValuesArray[i]?.text : item.Description}}\r\n <span><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"#667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </button>\r\n <div *ngIf=\"item.isOpen\" class=\"card py-1 w-100 dropdown-single position-absolute z-1 top-50px end-0\">\r\n <ul *ngFor=\"let item of item.Issues; let j = index\" class=\"list-unstyled\">\r\n <li [ngClass]=\"selectedValuesArray[i]?.text === item.text ? 'active' : ''\" class=\"camera px-5 items fw-semibold cursor-pointer py-2\" (click)=\"selectItem($event,i,j)\">{{item.text}}</li>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div role=\"group\" class=\"d-flex justify-content-between\">\r\n <button class=\"btn btn-outline w-100 me-2\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-100 ms-2\" (click)=\"Apply()\">Apply</button>\r\n </div> -->\r\n </div>\r\n</div>", styles: [".dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.dropdown1 .dropdown-content{width:90%!important;z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;height:200px;overflow:auto}.dropdown1 .dropdown-content label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}.dropdown1 .items:hover,.dropdown1 .tems.focus,.dropdown1 .items.active,.dropdown1 .camera.focus-visible{background:var(--Gray-50, #F9FAFB)}.dropdown1 .dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown1 .dropdown button{padding:10px;font-size:16px;cursor:pointer}.dropdown1 input[type=checkbox]{width:16px!important;height:16px!important;margin:-3px 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}.dropdown1 input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}.dropdown1 input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}::ng-deep .dropdown1{z-index:1!important}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:1px!important}.dropdown-single{z-index:1;padding:10px;background-color:#fff;border-radius:8px;box-shadow:0 8px 16px #0003;min-height:auto;max-height:200px;overflow:auto}.dropdown-single label{color:var(--Gray-700, #344054);font-size:14px;font-weight:500;line-height:20px;text-transform:capitalize}\n"] }]
5265
- }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { dataObject: [{
6009
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { dataObject: [{
5266
6010
  type: Input
5267
6011
  }], appliedFilters: [{
5268
6012
  type: Output
@@ -5324,7 +6068,7 @@ class TranslationService {
5324
6068
  return (localStorage.getItem(LOCALIZATION_LOCAL_STORAGE_KEY) ||
5325
6069
  this.translate.getDefaultLang());
5326
6070
  }
5327
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranslationService, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
6071
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranslationService, deps: [{ token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
5328
6072
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranslationService, providedIn: 'root' });
5329
6073
  }
5330
6074
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TranslationService, decorators: [{
@@ -5332,7 +6076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
5332
6076
  args: [{
5333
6077
  providedIn: 'root',
5334
6078
  }]
5335
- }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
6079
+ }], ctorParameters: () => [{ type: i1$1.TranslateService }] });
5336
6080
 
5337
6081
  // USA
5338
6082
  const locale$5 = {
@@ -6063,11 +6807,11 @@ const Routing = [
6063
6807
  },
6064
6808
  {
6065
6809
  path: 'explore',
6066
- loadChildren: () => import('./tango-app-ui-shared-intro.module-0F5I6zgS.mjs').then((m) => m.IntroModule),
6810
+ loadChildren: () => import('./tango-app-ui-shared-intro.module-D2ZCIIvP.mjs').then((m) => m.IntroModule),
6067
6811
  },
6068
6812
  {
6069
6813
  path: 'notifications',
6070
- loadChildren: () => import('./tango-app-ui-shared-notification.module-DrHpMc3M.mjs').then((m) => m.NotificationModule),
6814
+ loadChildren: () => import('./tango-app-ui-shared-notification.module-DweHaB7D.mjs').then((m) => m.NotificationModule),
6071
6815
  },
6072
6816
  // {
6073
6817
  // path: 'analyse',
@@ -6165,13 +6909,13 @@ class NotificationsInnerComponent {
6165
6909
  this.dataKtMenu = 'false';
6166
6910
  this.router.navigate(['/notifications/alerts']);
6167
6911
  }
6168
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationsInnerComponent, deps: [{ token: i1.Router }, { token: NotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
6912
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationsInnerComponent, deps: [{ token: i2.Router }, { token: NotificationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
6169
6913
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NotificationsInnerComponent, selector: "lib-notifications-inner", host: { properties: { "class": "this.class", "attr.data-kt-menu": "this.dataKtMenu" } }, ngImport: i0, template: "<div class=\"card topbar\" >\r\n <div class=\"card-header\">\r\n <h3 class=\"title-notify mt-10 mb-6\">\r\n Notifications\r\n </h3>\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData && !loading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\" src=\"./assets/tango/Icons/noNotification.svg\" alt=\"\">\r\n <span class=\"notificationAlign mt-10\">No New Notification</span>\r\n <span class=\"noNotification mt-2\">Any new notification will be shown here.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"alertscroll\" *ngIf=\"notification.length\">\r\n <div *ngFor=\"let item of notification\" class=\"mh-300px ng-star-inserted\" style=\"overflow: auto;\">\r\n <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n version=\"1.1\" class=\"ng-star-inserted\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n <path\r\n d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n <path\r\n d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n </g>\r\n </svg></span></span></div>\r\n <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">{{ item._source.logType }}</div>\r\n <div class=\"alt-desc\">{{ item._source.logSubType }}</div>\r\n </div>\r\n </div><span class=\"badge badge-light fs-9\">{{ item._source.date|customDateFormat }}</span>\r\n\r\n \r\n </div>\r\n \r\n </div>\r\n <div class=\"text-center border-top\">\r\n <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary mt-4\">\r\n View All\r\n </a>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n\r\n<!-- <div class=\"d-flex flex-column bgi-no-repeat rounded-top\">\r\n <ul class=\"nav nav-line-tabs nav-line-tabs-2x nav-stretch border-0 fw-bold px-9\">\r\n <li class=\"nav-item w-50 text-center\">\r\n <a class=\"nav-link w-100 opacity-75 opacity-state-100 pb-4 cursor-pointer d-block text-center\"\r\n data-bs-toggle=\"tab\" [ngClass]=\"activeTabId === 'alerts' ? 'active' : ''\" (click)=\"setActiveTabId('alerts')\">\r\n Alerts\r\n </a>\r\n </li>\r\n\r\n\r\n <li class=\"nav-item w-50 text-center\">\r\n <a class=\"\r\n nav-link d-block text-center\r\n text-white w-100\r\n opacity-75 opacity-state-100\r\n pb-4\r\n cursor-pointer\r\n \" data-bs-toggle=\"tab\" [ngClass]=\"activeTabId === 'download' ? 'active' : ''\"\r\n (click)=\"setActiveTabId('download')\">\r\n Download\r\n </a>\r\n </li>\r\n </ul>\r\n</div> -->\r\n\r\n\r\n<!-- <div class=\"tab-content\">\r\n <div class=\"tab-pane fade\" id=\"alerts\" role=\"tabpanel\" [ngClass]=\"activeTabId === 'alerts' ? 'show active' : ''\">\r\n <div>\r\n <div class=\"mh-300px ng-star-inserted\" style=\"overflow: auto;\">\r\n <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n version=\"1.1\" class=\"ng-star-inserted\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n <path\r\n d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n <path\r\n d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n </g>\r\n </svg></span></span></div>\r\n <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">User Added</div>\r\n <div class=\"alt-desc\">rock has been successfully onboarde...</div>\r\n </div>\r\n </div><span class=\"badge badge-light fs-9\">28 May</span>\r\n </div>\r\n <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n version=\"1.1\" class=\"ng-star-inserted\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n <path\r\n d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n <path\r\n d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n </g>\r\n </svg></span></span></div>\r\n <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">User Added</div>\r\n <div class=\"alt-desc\">rock has been successfully onboarde...</div>\r\n </div>\r\n </div><span class=\"badge badge-light fs-9\">28 May</span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"py-3 text-center border-top\">\r\n <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary\">\r\n View All\r\n\r\n </a>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tab-pane fade\" id=\"download\" role=\"tabpanel\" [ngClass]=\"activeTabId === 'download' ? 'show active' : ''\">\r\n <div class=\"scroll-y mh-400px my-5 px-5\">\r\n <div class=\"d-flex flex-stack py-4\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-3\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <g clip-path=\"url(#clip0_9019_100928)\">\r\n <path\r\n d=\"M16.0007 18.6667V16M16.0007 13.3334H16.0073M22.6673 16C22.6673 19.6819 19.6826 22.6667 16.0007 22.6667C12.3188 22.6667 9.33398 19.6819 9.33398 16C9.33398 12.3181 12.3188 9.33337 16.0007 9.33337C19.6826 9.33337 22.6673 12.3181 22.6673 16Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_9019_100928\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"mb-0 me-2\">\r\n\r\n <div class=\"title-desc\">Invited <span class=\"title-name\">Lana Steiner</span> to the team</div>\r\n </div>\r\n </div>\r\n\r\n <span class=\"fs-8\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#12B76A\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n <div class=\"py-3 text-center border-top\">\r\n <a (click)=\"viewAll('download')\" class=\"btn btn-color-gray-600 btn-active-color-primary\">\r\n View All\r\n\r\n </a>\r\n </div>\r\n </div>\r\n</div> -->\r\n", styles: [".nav-line-tabs .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;border-bottom:none!important;width:100%!important}.nav-line-tabs.nav-line-tabs-2x{background:var(--Gray-50, #F9FAFB)!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.title-name{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.title-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.title-notify{color:var(--Gray-900, #101828)!important;font-size:20px!important;font-weight:500!important;line-height:30px}.alert-title{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:28px;text-align:left}.alt-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alertscroll{max-height:300px;overflow:scroll}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.notificationAlign{color:var(--Gray-900, #101828);text-align:center;font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.noNotification{color:var(--Gray-500, #667085);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: CustomDateFormatPipe, name: "customDateFormat" }] });
6170
6914
  }
6171
6915
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationsInnerComponent, decorators: [{
6172
6916
  type: Component,
6173
6917
  args: [{ selector: 'lib-notifications-inner', template: "<div class=\"card topbar\" >\r\n <div class=\"card-header\">\r\n <h3 class=\"title-notify mt-10 mb-6\">\r\n Notifications\r\n </h3>\r\n </div>\r\n <ng-container *ngIf=\"loading\">\r\n <div class=\"row loader d-flex justify-content-center align-items-center\">\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"shimmer\">\r\n <div class=\"wrapper\">\r\n <div class=\"stroke animate title\"></div>\r\n <div class=\"stroke animate link\"></div>\r\n <div class=\"stroke animate description\"></div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"noData && !loading\">\r\n <div class=\"row\">\r\n <div class=\"col-lg-12 mb-3\">\r\n <div class=\"card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-src w-25\" src=\"./assets/tango/Icons/noNotification.svg\" alt=\"\">\r\n <span class=\"notificationAlign mt-10\">No New Notification</span>\r\n <span class=\"noNotification mt-2\">Any new notification will be shown here.</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"alertscroll\" *ngIf=\"notification.length\">\r\n <div *ngFor=\"let item of notification\" class=\"mh-300px ng-star-inserted\" style=\"overflow: auto;\">\r\n <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n version=\"1.1\" class=\"ng-star-inserted\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n <path\r\n d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n <path\r\n d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n </g>\r\n </svg></span></span></div>\r\n <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">{{ item._source.logType }}</div>\r\n <div class=\"alt-desc\">{{ item._source.logSubType }}</div>\r\n </div>\r\n </div><span class=\"badge badge-light fs-9\">{{ item._source.date|customDateFormat }}</span>\r\n\r\n \r\n </div>\r\n \r\n </div>\r\n <div class=\"text-center border-top\">\r\n <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary mt-4\">\r\n View All\r\n </a>\r\n </div>\r\n \r\n </div>\r\n</div>\r\n\r\n<!-- <div class=\"d-flex flex-column bgi-no-repeat rounded-top\">\r\n <ul class=\"nav nav-line-tabs nav-line-tabs-2x nav-stretch border-0 fw-bold px-9\">\r\n <li class=\"nav-item w-50 text-center\">\r\n <a class=\"nav-link w-100 opacity-75 opacity-state-100 pb-4 cursor-pointer d-block text-center\"\r\n data-bs-toggle=\"tab\" [ngClass]=\"activeTabId === 'alerts' ? 'active' : ''\" (click)=\"setActiveTabId('alerts')\">\r\n Alerts\r\n </a>\r\n </li>\r\n\r\n\r\n <li class=\"nav-item w-50 text-center\">\r\n <a class=\"\r\n nav-link d-block text-center\r\n text-white w-100\r\n opacity-75 opacity-state-100\r\n pb-4\r\n cursor-pointer\r\n \" data-bs-toggle=\"tab\" [ngClass]=\"activeTabId === 'download' ? 'active' : ''\"\r\n (click)=\"setActiveTabId('download')\">\r\n Download\r\n </a>\r\n </li>\r\n </ul>\r\n</div> -->\r\n\r\n\r\n<!-- <div class=\"tab-content\">\r\n <div class=\"tab-pane fade\" id=\"alerts\" role=\"tabpanel\" [ngClass]=\"activeTabId === 'alerts' ? 'show active' : ''\">\r\n <div>\r\n <div class=\"mh-300px ng-star-inserted\" style=\"overflow: auto;\">\r\n <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n version=\"1.1\" class=\"ng-star-inserted\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n <path\r\n d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n <path\r\n d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n </g>\r\n </svg></span></span></div>\r\n <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">User Added</div>\r\n <div class=\"alt-desc\">rock has been successfully onboarde...</div>\r\n </div>\r\n </div><span class=\"badge badge-light fs-9\">28 May</span>\r\n </div>\r\n <div class=\"d-flex flex-stack py-3 mx-4 ng-star-inserted\">\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"symbol symbol-35px me-4\"><span class=\"symbol-label bg-light-primary\"><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"></span><span\r\n class=\"svg-icon svg-icon-2 svg-icon-primary\"><svg xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\" viewBox=\"0 0 24 24\"\r\n version=\"1.1\" class=\"ng-star-inserted\">\r\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon points=\"0 0 24 0 24 24 0 24\"></polygon>\r\n <path\r\n d=\"M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\" opacity=\"0.3\"></path>\r\n <path\r\n d=\"M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z\"\r\n fill=\"#009EF7\" fill-rule=\"nonzero\"></path>\r\n </g>\r\n </svg></span></span></div>\r\n <div class=\"mb-0 me-2\" style=\"text-align: left;\"><div class=\"alert-title\">User Added</div>\r\n <div class=\"alt-desc\">rock has been successfully onboarde...</div>\r\n </div>\r\n </div><span class=\"badge badge-light fs-9\">28 May</span>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <div class=\"py-3 text-center border-top\">\r\n <a (click)=\"viewAll('alerts')\" class=\"btn btn-color-gray-600 btn-active-color-primary\">\r\n View All\r\n\r\n </a>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"tab-pane fade\" id=\"download\" role=\"tabpanel\" [ngClass]=\"activeTabId === 'download' ? 'show active' : ''\">\r\n <div class=\"scroll-y mh-400px my-5 px-5\">\r\n <div class=\"d-flex flex-stack py-4\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"me-3\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect width=\"32\" height=\"32\" rx=\"16\" fill=\"#DAF1FF\" />\r\n <g clip-path=\"url(#clip0_9019_100928)\">\r\n <path\r\n d=\"M16.0007 18.6667V16M16.0007 13.3334H16.0073M22.6673 16C22.6673 19.6819 19.6826 22.6667 16.0007 22.6667C12.3188 22.6667 9.33398 19.6819 9.33398 16C9.33398 12.3181 12.3188 9.33337 16.0007 9.33337C19.6826 9.33337 22.6673 12.3181 22.6673 16Z\"\r\n stroke=\"#00A3FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_9019_100928\">\r\n <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(8 8)\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </span>\r\n <div class=\"mb-0 me-2\">\r\n\r\n <div class=\"title-desc\">Invited <span class=\"title-name\">Lana Steiner</span> to the team</div>\r\n </div>\r\n </div>\r\n\r\n <span class=\"fs-8\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"\r\n fill=\"none\">\r\n <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#12B76A\" />\r\n </svg></span>\r\n </div>\r\n </div>\r\n <div class=\"py-3 text-center border-top\">\r\n <a (click)=\"viewAll('download')\" class=\"btn btn-color-gray-600 btn-active-color-primary\">\r\n View All\r\n\r\n </a>\r\n </div>\r\n </div>\r\n</div> -->\r\n", styles: [".nav-line-tabs .nav-item .nav-link.active{border-radius:6px!important;background:var(--Primary-50, #EAF8FF)!important;padding:10px 14px!important;border-bottom:none!important;width:100%!important}.nav-line-tabs.nav-line-tabs-2x{background:var(--Gray-50, #F9FAFB)!important;padding:6px!important;border-radius:8px!important;border:1px solid var(--Gray-100, #F2F4F7)!important}.title-name{color:var(--Primary-700, #009BF3)!important;font-size:14px!important;font-weight:500!important;line-height:20px}.title-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px}.title-notify{color:var(--Gray-900, #101828)!important;font-size:20px!important;font-weight:500!important;line-height:30px}.alert-title{color:var(--Gray-900, #101828);font-size:14px;font-style:normal;font-weight:600;line-height:28px;text-align:left}.alt-desc{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-weight:400!important;line-height:20px;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alertscroll{max-height:300px;overflow:scroll}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.notificationAlign{color:var(--Gray-900, #101828);text-align:center;font-family:Inter;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.noNotification{color:var(--Gray-500, #667085);text-align:center;font-family:Inter;font-size:14px;font-style:normal;font-weight:400;line-height:20px}\n"] }]
6174
- }], ctorParameters: () => [{ type: i1.Router }, { type: NotificationService }, { type: i0.ChangeDetectorRef }], propDecorators: { class: [{
6918
+ }], ctorParameters: () => [{ type: i2.Router }, { type: NotificationService }, { type: i0.ChangeDetectorRef }], propDecorators: { class: [{
6175
6919
  type: HostBinding,
6176
6920
  args: ['class']
6177
6921
  }], dataKtMenu: [{
@@ -6215,7 +6959,8 @@ class LayoutModule {
6215
6959
  SingleStoreComponent,
6216
6960
  NotificationsInnerComponent,
6217
6961
  CsmAssignConfirmationComponent,
6218
- TrafficHeaderComponent], imports: [CommonModule, i1.RouterModule, TranslationModule,
6962
+ TrafficHeaderComponent,
6963
+ TraxHeaderComponent], imports: [CommonModule, i2.RouterModule, TranslationModule,
6219
6964
  InlineSVGModule,
6220
6965
  NgbDropdownModule,
6221
6966
  NgbProgressbarModule,
@@ -6278,7 +7023,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
6278
7023
  SingleStoreComponent,
6279
7024
  NotificationsInnerComponent,
6280
7025
  CsmAssignConfirmationComponent,
6281
- TrafficHeaderComponent
7026
+ TrafficHeaderComponent,
7027
+ TraxHeaderComponent
6282
7028
  ],
6283
7029
  imports: [
6284
7030
  CommonModule,
@@ -6324,13 +7070,13 @@ class Error403Component {
6324
7070
  this.unsubscribe.forEach((sb) => sb.unsubscribe());
6325
7071
  document.body.style.backgroundImage = 'none';
6326
7072
  }
6327
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Error403Component, deps: [{ token: i1.Router }, { token: i1$1.ThemeModeService }], target: i0.ɵɵFactoryTarget.Component });
6328
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Error403Component, selector: "lib-error403", ngImport: i0, template: "<!--begin::Title-->\r\n<h1 class=\"fw-bolder fs-2hx text-gray-900 mb-4\">\r\n !Forbidden\r\n </h1>\r\n <!--end::Title-->\r\n \r\n <!--begin::Text-->\r\n <div class=\"fw-semibold fs-6 text-gray-500 mb-7\">\r\n We can't find that page.\r\n </div>\r\n <!--end::Text-->\r\n \r\n <!--begin::Illustration-->\r\n <div class=\"mb-3\">\r\n <img src=\"./assets/media/auth/404-error.png\" class=\"mw-100 mh-300px theme-light-show\" alt=\"\" />\r\n <img src=\"./assets/media/auth/404-error-dark.png\" class=\"mw-100 mh-300px theme-dark-show\" alt=\"\" />\r\n </div>\r\n <!--end::Illustration-->\r\n \r\n <!--begin::Link-->\r\n <div class=\"mb-0\">\r\n <a routerLink=\"/manage/brands\" class=\"btn btn-sm btn-primary\">Return Home</a>\r\n </div>\r\n <!--end::Link-->\r\n ", styles: [""], dependencies: [{ kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
7073
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Error403Component, deps: [{ token: i2.Router }, { token: i1.ThemeModeService }], target: i0.ɵɵFactoryTarget.Component });
7074
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Error403Component, selector: "lib-error403", ngImport: i0, template: "<!--begin::Title-->\r\n<h1 class=\"fw-bolder fs-2hx text-gray-900 mb-4\">\r\n !Forbidden\r\n </h1>\r\n <!--end::Title-->\r\n \r\n <!--begin::Text-->\r\n <div class=\"fw-semibold fs-6 text-gray-500 mb-7\">\r\n We can't find that page.\r\n </div>\r\n <!--end::Text-->\r\n \r\n <!--begin::Illustration-->\r\n <div class=\"mb-3\">\r\n <img src=\"./assets/media/auth/404-error.png\" class=\"mw-100 mh-300px theme-light-show\" alt=\"\" />\r\n <img src=\"./assets/media/auth/404-error-dark.png\" class=\"mw-100 mh-300px theme-dark-show\" alt=\"\" />\r\n </div>\r\n <!--end::Illustration-->\r\n \r\n <!--begin::Link-->\r\n <div class=\"mb-0\">\r\n <a routerLink=\"/manage/brands\" class=\"btn btn-sm btn-primary\">Return Home</a>\r\n </div>\r\n <!--end::Link-->\r\n ", styles: [""], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
6329
7075
  }
6330
7076
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Error403Component, decorators: [{
6331
7077
  type: Component,
6332
7078
  args: [{ selector: 'lib-error403', template: "<!--begin::Title-->\r\n<h1 class=\"fw-bolder fs-2hx text-gray-900 mb-4\">\r\n !Forbidden\r\n </h1>\r\n <!--end::Title-->\r\n \r\n <!--begin::Text-->\r\n <div class=\"fw-semibold fs-6 text-gray-500 mb-7\">\r\n We can't find that page.\r\n </div>\r\n <!--end::Text-->\r\n \r\n <!--begin::Illustration-->\r\n <div class=\"mb-3\">\r\n <img src=\"./assets/media/auth/404-error.png\" class=\"mw-100 mh-300px theme-light-show\" alt=\"\" />\r\n <img src=\"./assets/media/auth/404-error-dark.png\" class=\"mw-100 mh-300px theme-dark-show\" alt=\"\" />\r\n </div>\r\n <!--end::Illustration-->\r\n \r\n <!--begin::Link-->\r\n <div class=\"mb-0\">\r\n <a routerLink=\"/manage/brands\" class=\"btn btn-sm btn-primary\">Return Home</a>\r\n </div>\r\n <!--end::Link-->\r\n " }]
6333
- }], ctorParameters: () => [{ type: i1.Router }, { type: i1$1.ThemeModeService }] });
7079
+ }], ctorParameters: () => [{ type: i2.Router }, { type: i1.ThemeModeService }] });
6334
7080
 
6335
7081
  class InvalidIpComponent {
6336
7082
  router;
@@ -6363,13 +7109,13 @@ class InvalidIpComponent {
6363
7109
  }
6364
7110
  }));
6365
7111
  }
6366
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InvalidIpComponent, deps: [{ token: i1.Router }, { token: i1$1.ThemeModeService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
7112
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InvalidIpComponent, deps: [{ token: i2.Router }, { token: i1.ThemeModeService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
6367
7113
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InvalidIpComponent, selector: "lib-invalid-ip", ngImport: i0, template: "\r\n \r\n <!--begin::Illustration-->\r\n <div class=\"mb-8\">\r\n <img src=\"./assets/media/auth/invalid-ip-error.png\" class=\"mw-100 mh-300px theme-light-show\" alt=\"\" />\r\n <img src=\"./assets/media/auth/invalid-ip-error.png\" class=\"mw-100 mh-300px theme-dark-show\" alt=\"\" />\r\n </div>\r\n <!--end::Illustration-->\r\n \r\n \r\n <!--begin::Text-->\r\n <div class=\"fw-semibold fs-6 text-gray-500 mb-7\">\r\n Your IP address is not whitelisted. Please connect to an authorized network or contact your administrator to whitelist your IP address.\r\n </div>\r\n <!--end::Text-->\r\n ", styles: [""] });
6368
7114
  }
6369
7115
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InvalidIpComponent, decorators: [{
6370
7116
  type: Component,
6371
7117
  args: [{ selector: 'lib-invalid-ip', template: "\r\n \r\n <!--begin::Illustration-->\r\n <div class=\"mb-8\">\r\n <img src=\"./assets/media/auth/invalid-ip-error.png\" class=\"mw-100 mh-300px theme-light-show\" alt=\"\" />\r\n <img src=\"./assets/media/auth/invalid-ip-error.png\" class=\"mw-100 mh-300px theme-dark-show\" alt=\"\" />\r\n </div>\r\n <!--end::Illustration-->\r\n \r\n \r\n <!--begin::Text-->\r\n <div class=\"fw-semibold fs-6 text-gray-500 mb-7\">\r\n Your IP address is not whitelisted. Please connect to an authorized network or contact your administrator to whitelist your IP address.\r\n </div>\r\n <!--end::Text-->\r\n " }]
6372
- }], ctorParameters: () => [{ type: i1.Router }, { type: i1$1.ThemeModeService }, { type: AuthService }] });
7118
+ }], ctorParameters: () => [{ type: i2.Router }, { type: i1.ThemeModeService }, { type: AuthService }] });
6373
7119
 
6374
7120
  const routes = [
6375
7121
  {
@@ -6399,7 +7145,7 @@ const routes = [
6399
7145
  ];
6400
7146
  class ErrorsRoutingModule {
6401
7147
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
6402
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ErrorsRoutingModule, imports: [i1.RouterModule], exports: [RouterModule] });
7148
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ErrorsRoutingModule, imports: [i2.RouterModule], exports: [RouterModule] });
6403
7149
  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorsRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] });
6404
7150
  }
6405
7151
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ErrorsRoutingModule, decorators: [{
@@ -6571,12 +7317,12 @@ class HttpAuthInterceptor {
6571
7317
  }));
6572
7318
  }
6573
7319
  }
6574
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HttpAuthInterceptor, deps: [{ token: i1$1.GlobalStateService }, { token: AuthService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
7320
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HttpAuthInterceptor, deps: [{ token: i1.GlobalStateService }, { token: AuthService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
6575
7321
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HttpAuthInterceptor });
6576
7322
  }
6577
7323
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HttpAuthInterceptor, decorators: [{
6578
7324
  type: Injectable
6579
- }], ctorParameters: () => [{ type: i1$1.GlobalStateService }, { type: AuthService }, { type: i1.Router }] });
7325
+ }], ctorParameters: () => [{ type: i1.GlobalStateService }, { type: AuthService }, { type: i2.Router }] });
6580
7326
 
6581
7327
  /*
6582
7328
  * Public API Surface of tango-app-shared