npm - tango-app-ui-shared - Versions diffs - 3.0.27-dev → 3.0.29-dev - Mend

tango-app-ui-shared 3.0.27-dev → 3.0.29-dev

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 (36) hide show

package/fesm2022/tango-app-ui-shared.mjs CHANGED Viewed

@@ -4,7 +4,7 @@ import * as i1 from '@angular/router';
 import { NavigationEnd, NavigationCancel, ResolveEnd, Router, RouterModule } from '@angular/router';
 import * as i1$1 from 'tango-app-ui-global';
 import { MenuComponent, ToggleComponent, ScrollTopComponent, DrawerComponent, StickyComponent, ScrollComponent, GlobalStateService } from 'tango-app-ui-global';
-import { throwError, map, catchError, takeUntil, Subject, take } from 'rxjs';
+import { throwError, map, catchError, takeUntil, Subject, take, BehaviorSubject, switchMap } from 'rxjs';
 import * as i3 from '@angular/common/http';
 import { HttpErrorResponse } from '@angular/common/http';
 import Swal from 'sweetalert2';
@@ -28,7 +28,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { InlineSVGModule } from 'ng-inline-svg-2';
 import { NgbDropdownModule, NgbProgressbarModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-// import { GlobalStateService } from './global-state.service';
 class AuthService {
     router;
     gs;
@@ -87,6 +86,17 @@ class AuthService {
             return response;
         }), catchError(this.handleError));
     }
+    refreshToken() {
+        const userId = JSON.parse(localStorage.getItem("user-info") || "")?._id;
+        const refreshToken = JSON.parse(localStorage.getItem(this.authlocalStorageToken) || "")?.refreshToken;
+        let params = {
+            userId: userId,
+            refreshToken: refreshToken,
+        };
+        return this.http
+            .get(`${this.userApiUrl}/refresh-token`, { params: params })
+            .pipe(map((response) => response), catchError(this.handleError));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, deps: [{ token: i1.Router }, { token: i1$1.GlobalStateService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, providedIn: 'root' });
 }
@@ -1778,6 +1788,7 @@ class ClassicComponent {
                         const currentIssues = this.dummyArray[0].Issues.map((item) => item.clientId);
                         this.selectedFilters.clients = currentIssues;
                         this.selectedFilters.client = headerFilters.client;
+                        this.selectedFilters.store = headerFilters.store;
                         this.selectedFilters.date = headerFilters.date;
                         this.selectedDateRange = {
                             startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
@@ -1796,6 +1807,7 @@ class ClassicComponent {
                         const currentIssues = this.dummyArray[0].Issues.map((item) => item.clientId);
                         this.selectedFilters.clients = currentIssues;
                         this.selectedFilters.client = headerFilters.client;
+                        this.selectedFilters.store = headerFilters.store;
                         this.selectedFilters.date = this.selectedDateRange;
                         localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
                         this.globalService.dataRangeValue.next(this.selectedFilters);
@@ -1810,6 +1822,7 @@ class ClassicComponent {
                     this.selectedDateRange.endDate = this.dayjs().format("YYYY-MM-DD");
                     const currentIssues = this.dummyArray[0].Issues.map((item) => item.clientId);
                     this.selectedFilters.clients = currentIssues;
+                    this.selectedFilters.client = currentIssues[0];
                     this.selectedFilters.date = this.selectedDateRange;
                     localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
                     this.globalService.dataRangeValue.next(this.selectedFilters);
@@ -1817,6 +1830,7 @@ class ClassicComponent {
                 }
             },
         });
+        console.log(this.selectedDateRange);
         const subscr = this.layout.layoutConfigSubject
             .asObservable()
             .subscribe(() => {
@@ -2004,11 +2018,11 @@ class ClassicComponent {
         this.selectedFilters.date = this.selectedDateRange;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassicComponent, deps: [{ token: i1$1.LayoutService }, { token: i1$1.GlobalStateService }, { token: AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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\" *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\" 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\"\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\" />\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;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 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}: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}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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\" 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\"\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\" />\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 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}: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}.btn-primary{line-height:18px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassicComponent, decorators: [{
             type: Component,
-            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\" *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\" 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\"\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\" />\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;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 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}: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}.btn-primary{line-height:18px!important}\n"] }]
+            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\" 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\"\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\" />\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 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}: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}.btn-primary{line-height:18px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.LayoutService }, { type: i1$1.GlobalStateService }, { type: AuthService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ["document:click", ["$event"]]
@@ -2166,29 +2180,26 @@ class ClientSettingsComponent {
             next: (e) => {
                 if (e) {
                     this.clientList = e.data.result;
-                    if ("header-filters" in localStorage) {
-                        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
-                        this.cd.detectChanges();
-                        if (headerFilters.client) {
-                            this.clientList.find((obj) => {
-                                if (obj.clientId === headerFilters.client) {
-                                    this.selectedClient = obj;
-                                }
-                            });
-                            this.selectedFilters.client = headerFilters.client;
-                            this.gs.dataRangeValue.next(this.selectedFilters);
-                        }
-                        else {
-                            this.selectedClient = this.clientList[0];
-                            this.selectedFilters.client = headerFilters.client;
-                            localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
-                            this.gs.dataRangeValue.next(this.selectedFilters);
-                            this.cd.detectChanges();
-                        }
+                    const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+                    console.log(headerFilters.client);
+                    if (headerFilters.client) {
+                        this.clientList.find((obj) => {
+                            if (obj.clientId === headerFilters.client) {
+                                this.selectedClient = obj;
+                            }
+                        });
+                        this.selectedFilters.client = headerFilters.client;
+                        this.selectedFilters.clients = headerFilters.clients;
+                        this.selectedFilters.date = headerFilters.date;
+                        this.selectedFilters.store = headerFilters.store;
+                        this.gs.dataRangeValue.next(this.selectedFilters);
                     }
                     else {
                         this.selectedClient = this.clientList[0];
                         this.selectedFilters.client = this.selectedClient.clientId;
+                        this.selectedFilters.clients = headerFilters.clients;
+                        this.selectedFilters.store = headerFilters.store;
+                        this.selectedFilters.date = headerFilters.date;
                         localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
                         this.gs.dataRangeValue.next(this.selectedFilters);
                         this.cd.detectChanges();
@@ -2338,7 +2349,6 @@ class DateSingleSelectComponent {
                     // debugger
                     this.clientList = e.data.result;
                     const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
-                    this.cd.detectChanges();
                     if (headerFilters.client) {
                         this.clientList.find((obj) => {
                             if (obj.clientId === headerFilters.client) {
@@ -2347,6 +2357,7 @@ class DateSingleSelectComponent {
                         });
                         this.selectedFilters.client = headerFilters.client;
                         this.selectedFilters.clients = [headerFilters.clients];
+                        this.selectedFilters.store = headerFilters.store;
                         this.selectedFilters.date = headerFilters.date;
                         this.selectedDateRange = {
                             startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
@@ -2393,7 +2404,11 @@ class DateSingleSelectComponent {
     onStartDateChange(event) {
         if (this.dayjs(event.startDate).isValid()) {
             this.isCustomDate = (m) => {
-                const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
+                const isFutureDate = m.isAfter(this.dayjs());
+                const isMoreThan90DaysAfter = m.isAfter(this.dayjs(event.startDate).add(90, "days"));
+                // Check if the date is today
+                const isToday = m.isSame(this.dayjs(), 'day');
+                const isValidDate = !isFutureDate && !isMoreThan90DaysAfter && !isToday;
                 return isValidDate ? "invalid-date" : false;
             };
         }
@@ -2468,7 +2483,11 @@ class SingleStoreComponent {
                     if (e) {
                         this.storeList = e.data.result;
                         const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
-                        if (headerFilters.store) {
+                        this.selectedDateRange = {
+                            startDate: this.dayjs(headerFilters?.date?.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+                            endDate: this.dayjs(headerFilters.date.endDate, "DD-MM-YYYY").format("YYYY-MM-DD")
+                        };
+                        if (headerFilters?.store) {
                             this.storeList.find((obj) => {
                                 if (obj.storeId === headerFilters.store) {
                                     this.selectedClient = obj;
@@ -2557,7 +2576,7 @@ class ToolbarComponent {
     layout;
     router;
     route;
-    pageInfo;
+    gs;
     unsubscribe = [];
     // Public props
     currentLayoutType;
@@ -2582,11 +2601,11 @@ class ToolbarComponent {
     singleStore;
     headervalue;
     storeId;
-    constructor(layout, router, route, pageInfo) {
+    constructor(layout, router, route, gs) {
         this.layout = layout;
         this.router = router;
         this.route = route;
-        this.pageInfo = pageInfo;
+        this.gs = gs;
     }
     ngOnInit() {
         this.route.queryParams.subscribe((queryParams) => {
@@ -2673,13 +2692,13 @@ class ToolbarComponent {
         this.singleStore = singleStore;
         this.singleSelectdatepicker = singleSelectdatepicker;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$1.LayoutService }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.PageInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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=\"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\">\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\">\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\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker\">\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=\"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</div>\r\n<!--end::Toolbar container-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$1.LayoutService }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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'\" >\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\">\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\">\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\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker\">\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=\"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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            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=\"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\">\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\">\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\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker\">\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=\"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</div>\r\n<!--end::Toolbar container-->\r\n" }]
-        }], ctorParameters: () => [{ type: i1$1.LayoutService }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.PageInfoService }], propDecorators: { currentLayoutType: [{
+            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'\" >\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\">\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\">\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\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker\">\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=\"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" }]
+        }], ctorParameters: () => [{ type: i1$1.LayoutService }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.GlobalStateService }], propDecorators: { currentLayoutType: [{
                 type: Input
             }], appToolbarLayout: [{
                 type: Input
@@ -2767,11 +2786,11 @@ class SidebarMenuComponent {
         this.router.navigate([`tickets/users`], { queryParams: { type: 'installation' } });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarMenuComponent, deps: [{ token: AuthService }, { token: i1$1.GlobalStateService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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=\"(gs.userAccess | async)?.analytics_birdsEye_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/birds_eye.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Birds Eye</span>\r\n      </a>\r\n    </div>\r\n\r\n    <!-- Tango Traffic -->\r\n    <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\" routerLink=\"/crafted/account/settings\">\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        <!-- Manage -->\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 style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\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/overview\">\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\">Overview\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_users_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users\">\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_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\" 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_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>\r\n        </div>\r\n\r\n         <!-- Manage -->\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 style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/tickets\">My Worksplace\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)?.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\" (click)=\"ticketsUsers()\" >\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  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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=\"(gs.userAccess | async)?.analytics_birdsEye_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/birds_eye.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Birds Eye</span>\r\n      </a>\r\n    </div>\r\n\r\n    <!-- Tango Traffic -->\r\n    <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\" routerLink=\"/crafted/account/settings\">\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        <!-- Manage -->\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 show\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\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/overview\">\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\">Overview\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_users_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users\">\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_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\" 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_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>\r\n        </div>\r\n\r\n         <!-- Manage -->\r\n         <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/tickets\">My Worksplace\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)?.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\" (click)=\"ticketsUsers()\" >\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  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarMenuComponent, decorators: [{
             type: Component,
-            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=\"(gs.userAccess | async)?.analytics_birdsEye_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/birds_eye.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Birds Eye</span>\r\n      </a>\r\n    </div>\r\n\r\n    <!-- Tango Traffic -->\r\n    <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\" routerLink=\"/crafted/account/settings\">\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        <!-- Manage -->\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 style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\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/overview\">\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\">Overview\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_users_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users\">\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_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\" 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_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>\r\n        </div>\r\n\r\n         <!-- Manage -->\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 style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/tickets\">My Worksplace\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)?.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\" (click)=\"ticketsUsers()\" >\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  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->" }]
+            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=\"(gs.userAccess | async)?.analytics_birdsEye_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/birds_eye.svg\" alt=\"\">\r\n        </span>\r\n        <span class=\"menu-title\">Birds Eye</span>\r\n      </a>\r\n    </div>\r\n\r\n    <!-- Tango Traffic -->\r\n    <div *ngIf=\"(gs.userAccess | async)?.analytics_tangoTraffic_isView\" class=\"menu-item\">\r\n      <a class=\"menu-link without-sub\" routerLinkActive=\"active\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\">\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\" routerLink=\"/crafted/account/settings\">\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        <!-- Manage -->\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 show\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\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/overview\">\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\">Overview\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_users_isView\" class=\"menu-item\">\r\n              <a class=\"menu-link without-sub\" routerLinkActive=\"active\" routerLink=\"/manage/users\">\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_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\" 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_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>\r\n        </div>\r\n\r\n         <!-- Manage -->\r\n         <div *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\" class=\"menu-item menu-accordion\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n          <span  class=\"menu-link\">\r\n            <span style=\"width: 0px;\" class=\"menu-icon\">\r\n              <!-- <lib-keenicon name=\"profile-circle\" class=\"fs-2\"></lib-keenicon> -->\r\n            </span>\r\n            <span class=\"menu-title\" data-link=\"/tickets\">My Worksplace\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)?.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\" (click)=\"ticketsUsers()\" >\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  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->" }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i1$1.GlobalStateService }, { type: i1.Router }] });
 class SidebarFooterComponent {
@@ -2789,15 +2808,23 @@ class SidebarFooterComponent {
     currentLayoutType;
     userValuefooter = '';
     toggleAttr;
+    shouldShowMenuTop = true;
+    destroy$ = new Subject();
     constructor(auth, router, layout) {
         this.auth = auth;
         this.router = router;
         this.layout = layout;
     }
+    // isSubMenuActive: boolean = false;
+    isArrowReversed = false;
+    setArrowDirection(isMouseOver) {
+        // console.log(isMouseOver)
+        this.isArrowReversed = isMouseOver;
+    }
     ngOnInit() {
         this.toggleAttr = `app-sidebar-${this.toggleType}`;
         const layoutSubscr = this.layout.currentLayoutTypeSubject
-            .asObservable()
+            .asObservable().pipe(takeUntil(this.destroy$))
             .subscribe((layout) => {
             this.currentLayoutType = layout;
         });
@@ -2831,20 +2858,23 @@ class SidebarFooterComponent {
         // }
     }
     logout() {
-        this.auth.logout().subscribe((res) => {
-            this.router.navigate(["/auth/login"]);
-        });
+        this.auth.logout();
+        // .pipe(takeUntil(this.destroy$)).subscribe((res:any)=>{
+        this.router.navigate(["/auth/login"]);
+        // })
         localStorage.clear();
     }
     ngOnDestroy() {
-        this.unsubscribe.forEach((sb) => sb.unsubscribe());
+        // this.unsubscribe.forEach((sb) => sb.unsubscribe());
+        this.destroy$.next(true);
+        this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarFooterComponent, deps: [{ token: AuthService }, { token: i1.Router }, { token: i1$1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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=\"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    <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\" routerLinkActive=\"here show\">\r\n        <span class=\"menu-link without-sub\">\r\n          <span class=\"menu-icon\">\r\n            <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n          </span>\r\n          <span class=\"menu-title\" 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 [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\" href=\"/profile\" >\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\">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\">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\">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-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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 src=\"./assets/tango/Icons/Avatar.svg\">\r\n          </span>\r\n          <span class=\"menu-title overflow-hidden\" 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\" href=\"/profile\" >\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-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-sidebar-footer", template: "<div class=\"container-with-overflow\">\r\n  <div id=\"kt_app_sidebar_menu_scroll\" class=\"\" 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    <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\" routerLinkActive=\"here show\">\r\n        <span class=\"menu-link without-sub\">\r\n          <span class=\"menu-icon\">\r\n            <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n          </span>\r\n          <span class=\"menu-title\" 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 [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\" href=\"/profile\" >\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\">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\">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\">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-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}\n"] }]
+            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 src=\"./assets/tango/Icons/Avatar.svg\">\r\n          </span>\r\n          <span class=\"menu-title overflow-hidden\" 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\" href=\"/profile\" >\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-indention .menu-sub{margin-left:0rem!important}.custom-scroll{max-height:300px}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i1.Router }, { type: i1$1.LayoutService }], propDecorators: { toggleButtonClass: [{
                 type: Input
             }], toggleEnabled: [{
@@ -2978,11 +3008,11 @@ class SidebarComponent {
         this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarComponent, deps: [{ token: i1$1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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 pb-6\" 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            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 pb-6\" 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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: i1$1.LayoutService }] });
 class LayoutScrollTopComponent {
@@ -3318,6 +3348,9 @@ class LayoutComponent {
             next: (res) => {
                 if (res && res.code == 200) {
                     this.gs.userAccess.next(res.data?.permission);
+                    if (res.data?.permission?.userType === 'lead') {
+                        this.router.navigateByUrl('/explore');
+                    }
                 }
             },
             error: (err) => {
@@ -3464,15 +3497,16 @@ class Error404Component {
         this.unsubscribe.push(subscr);
     }
     routeToDashboard() {
-        this.router.navigate(['dashboard']);
-        setTimeout(() => {
-            ToggleComponent.reinitialization();
-            ScrollTopComponent.reinitialization();
-            DrawerComponent.reinitialization();
-            StickyComponent.bootstrap();
-            MenuComponent.reinitialization();
-            ScrollComponent.reinitialization();
-        }, 200);
+        console.log("dfdf");
+        this.router.navigate(['/manage/brands']);
+        // setTimeout(() => {
+        //   ToggleComponent.reinitialization();
+        //   ScrollTopComponent.reinitialization();
+        //   DrawerComponent.reinitialization();
+        //   StickyComponent.bootstrap();
+        //   MenuComponent.reinitialization();
+        //   ScrollComponent.reinitialization();
+        // }, 200);
     }
     ngOnDestroy() {
         this.unsubscribe.forEach((sb) => sb.unsubscribe());
@@ -3700,11 +3734,11 @@ class FiltersComponent {
         this.appliedFilters.emit(this.responseArray);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\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\" (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\" 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 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\" 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 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: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{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}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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-2\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\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\" (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\" 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 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\" 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 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: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{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}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
-            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\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\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\" (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\" 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 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\" 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 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: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{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}\n"] }]
+            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-2\" *ngIf=\"Opendropdown\">\r\n        <span class=\"dropdown-title\">Filter Options</span>\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\" (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\" 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 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\" 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 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: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{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}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.Router }], propDecorators: { dataObject: [{
                 type: Input
             }], appliedFilters: [{
@@ -4455,20 +4489,45 @@ const storesGuard = (route, state) => {
     }));
 };
+const ticketsGuard = (route, state) => {
+    const gs = inject(GlobalStateService);
+    const router = inject(Router);
+    return gs.userAccess.pipe(map((e) => {
+        if (e && e?.manage_tickets_isView) {
+            router.navigateByUrl('/manage');
+            return false;
+        }
+        return true;
+    }));
+};
+const leadGuard = (route, state) => {
+    const gs = inject(GlobalStateService);
+    const router = inject(Router);
+    return gs.userAccess.pipe(take(1), map((e) => {
+        if (e && e?.userType === 'lead') {
+            router.navigateByUrl('/explore');
+            return false;
+        }
+        return true;
+    }));
+};
 const Routing = [
     {
         path: 'manage',
         loadChildren: () => import('./tango-app-ui-shared-manage-wrapper.module-B6GJQNQZ.mjs').then((m) => m.ManageWrapperModule),
+        canActivate: [leadGuard]
     },
     {
         path: 'manage/stores/edge-app',
         loadChildren: () => import('./tango-app-ui-shared-edge-wrapper.module-DM8Er_Bd.mjs').then((m) => m.TangoEdgeAppWrapperModule),
-        canActivate: [storesGuard]
+        canActivate: [leadGuard, storesGuard]
     },
     {
         path: 'manage/stores/:id',
         loadChildren: () => import('./tango-app-ui-shared-store-wrapper.module-UYYC9an_.mjs').then((m) => m.StoreWrapperModule),
-        canActivate: [storesGuard]
+        canActivate: [leadGuard, storesGuard]
     },
     {
         path: 'profile',
@@ -4477,7 +4536,11 @@ const Routing = [
     {
         path: 'tickets',
         loadChildren: () => import('./tango-app-ui-shared-ticket-wrapper.module-BLrWsK0B.mjs').then((m) => m.TicketWrapperModule),
-        // canActivate:[ticketsGuard]
+        canActivate: [leadGuard, ticketsGuard]
+    },
+    {
+        path: 'explore',
+        loadChildren: () => import('./tango-app-ui-shared-intro.module-DT8p6wBf.mjs').then((m) => m.IntroModule),
     },
     {
         path: '',
@@ -4649,11 +4712,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }] });
+class Error403Component {
+    router;
+    modeService;
+    unsubscribe = [];
+    constructor(router, modeService) {
+        this.router = router;
+        this.modeService = modeService;
+    }
+    ngOnInit() {
+        const subscr = this.modeService.mode.asObservable().subscribe((mode) => {
+            document.body.style.backgroundImage =
+                mode === 'dark'
+                    ? 'url(./assets/media/auth/bg1-dark.jpg)'
+                    : 'url(./assets/media/auth/bg1.jpg)';
+        });
+        this.unsubscribe.push(subscr);
+    }
+    ngOnDestroy() {
+        this.unsubscribe.forEach((sb) => sb.unsubscribe());
+        document.body.style.backgroundImage = 'none';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Error403Component, deps: [{ token: i1.Router }, { token: i1$1.ThemeModeService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", 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", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: Error403Component, decorators: [{
+            type: Component,
+            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  " }]
+        }], ctorParameters: () => [{ type: i1.Router }, { type: i1$1.ThemeModeService }] });
 const routes = [
     {
         path: '',
         component: ErrorsComponent,
         children: [
+            {
+                path: '403',
+                component: Error403Component,
+            },
             {
                 path: '404',
                 component: Error404Component,
@@ -4684,7 +4780,8 @@ class ErrorsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ErrorsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: ErrorsModule, declarations: [ErrorsComponent,
             Error404Component,
-            Error500Component], imports: [CommonModule,
+            Error500Component,
+            Error403Component], imports: [CommonModule,
             ErrorsRoutingModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ErrorsModule, imports: [CommonModule,
             ErrorsRoutingModule] });
@@ -4695,7 +4792,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                     declarations: [
                         ErrorsComponent,
                         Error404Component,
-                        Error500Component
+                        Error500Component,
+                        Error403Component
                     ],
                     imports: [
                         CommonModule,
@@ -4729,12 +4827,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
 class HttpAuthInterceptor {
     gs;
-    auth;
+    authService;
     router;
     authlocalStorageToken = '';
-    constructor(gs, auth, router) {
+    isRefreshingToken = false;
+    tokenRefreshed = new BehaviorSubject(false);
+    constructor(gs, authService, router) {
         this.gs = gs;
-        this.auth = auth;
+        this.authService = authService;
         this.router = router;
         this.gs.environment.subscribe((env) => {
             if (env) {
@@ -4749,18 +4849,60 @@ class HttpAuthInterceptor {
                 Authorization: 'Bearer ' + user.authenticationToken
             }
         });
-        return next.handle(request).pipe(catchError(err => {
-            if (err instanceof HttpErrorResponse) {
-                if (err.status === 402 || err.status === 401) {
-                    this.auth.logout().subscribe((res) => {
-                        this.router.navigate(["/auth/login"]);
-                    });
-                    localStorage.clear();
-                }
+        return next.handle(request).pipe(catchError((error) => {
+            if (error instanceof HttpErrorResponse && error.status === 401) {
+                // If the error is due to unauthorized access, try to refresh the token
+                return this.handle401Error(request, next);
             }
-            return throwError(err);
+            else if (error instanceof HttpErrorResponse && error.status === 403) {
+                // If the error is due to unauthorized access, try to refresh the token
+                this.router.navigate(['/manage/brands']);
+            }
+            return throwError(error);
         }));
     }
+    handle401Error(request, next) {
+        if (!this.isRefreshingToken) {
+            this.isRefreshingToken = true;
+            return this.authService.refreshToken().pipe(switchMap((res) => {
+                if (res && res.code == 200 && res.data.result) {
+                    // Update local storage with the new token
+                    localStorage.setItem(this.authlocalStorageToken, JSON.stringify(res.data.result));
+                    // Clone the request with the new token
+                    request = request.clone({
+                        setHeaders: {
+                            Authorization: `Bearer ${res.data.result.authenticationToken}`
+                        }
+                    });
+                    // Reset the flag for token refreshing
+                    this.isRefreshingToken = false;
+                    // Retry the original request with the new token
+                    return next.handle(request);
+                }
+                else {
+                    // Logout user if refresh token fails
+                    this.authService.logout();
+                    return throwError('Token Expired Please Login Again!');
+                }
+            }), catchError((error) => {
+                // Logout user if refresh token fails
+                this.authService.logout();
+                return throwError(error);
+            }));
+        }
+        else {
+            // If already refreshing the token, queue the request and wait
+            return this.tokenRefreshed.pipe(switchMap(() => {
+                const tokens = JSON.parse(localStorage.getItem(this.authlocalStorageToken) || '{}');
+                request = request.clone({
+                    setHeaders: {
+                        Authorization: 'Bearer ' + tokens.authenticationToken
+                    }
+                });
+                return next.handle(request);
+            }));
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HttpAuthInterceptor, deps: [{ token: i1$1.GlobalStateService }, { token: AuthService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HttpAuthInterceptor });
 }