tango-app-ui-shared 3.0.5 → 3.0.6

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Input, HostBinding, HostListener, ViewChild, Injectable, EventEmitter, ChangeDetectionStrategy, Output, NgModule } from '@angular/core';
+import { Component, Input, HostBinding, HostListener, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, NgModule, Injectable } from '@angular/core';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, NavigationCancel, ResolveEnd, RouterModule } from '@angular/router';
 import * as i1 from 'tango-app-ui-metronics';
@@ -13,19 +13,19 @@ import 'dayjs/locale/en';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import * as i2$1 from 'projects/tango-app-shared/src/lib/services/global-state.service';
-import * as i3$1 from 'projects/tango-app-shared/src/lib/services/auth.service';
-import * as i2$2 from '@angular/forms';
+import * as i1$2 from 'projects/tango-app-shared/src/lib/services/auth.service';
+import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i6 from 'ngx-daterangepicker-material';
+import * as i5 from 'ngx-daterangepicker-material';
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
-import { BehaviorSubject, throwError, map, catchError } from 'rxjs';
-import * as i3$2 from '@angular/common/http';
-import * as i3$3 from 'ngx-pagination';
+import * as i3$1 from 'ngx-pagination';
 import { NgxPaginationModule } from 'ngx-pagination';
-import * as i1$2 from '@ngx-translate/core';
+import * as i1$3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { InlineSVGModule } from 'ng-inline-svg-2';
 import { NgbDropdownModule, NgbProgressbarModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { BehaviorSubject, throwError, map, catchError } from 'rxjs';
+import * as i3$2 from '@angular/common/http';
 import Swal from 'sweetalert2';
 
 class HeaderMenuComponent {
@@ -1592,20 +1592,20 @@ class ClassicComponent {
     layout;
     globalService;
     service;
+    cd;
     unsubscribe = [];
-    dataObject = [
-        { Description: 'Clients', Issues: [] }
-    ];
+    dataObject = [{ Description: "Clients", Issues: [] }];
     isCustomDate;
     dummyArray = [];
     noFilter = false;
     searchValue;
     responseArray = [];
-    getClientList;
-    constructor(layout, globalService, service) {
+    getClientList = [];
+    constructor(layout, globalService, service, cd) {
         this.layout = layout;
         this.globalService = globalService;
         this.service = service;
+        this.cd = cd;
     }
     ngOnDestroy() {
         this.unsubscribe.forEach((sb) => sb.unsubscribe());
@@ -1613,15 +1613,20 @@ class ClassicComponent {
     // @Input() dataObject: any[] = [];
     Opendropdown = false;
     permission = [
-        { group: 'Super Admin', description: 'Lorem ipsum dolor sit amet, consectetur ' },
-        { group: 'Admin', description: 'Lorem ipsum dolor sit amet, consectetur ' },
-        { group: 'User', description: 'Lorem ipsum dolor sit amet, consectetur ' },
+        {
+            group: "Super Admin",
+            description: "Lorem ipsum dolor sit amet, consectetur ",
+        },
+        { group: "Admin", description: "Lorem ipsum dolor sit amet, consectetur " },
+        { group: "User", description: "Lorem ipsum dolor sit amet, consectetur " },
     ];
     showdropdown;
     selectedValues = [];
     selectedValuesArray = [];
     selectedDateRange = {};
     selectedFilters = {
+        client: null,
+        clients: [],
         store: null,
         stores: [],
         date: null,
@@ -1630,12 +1635,42 @@ class ClassicComponent {
         this.service.getClients().subscribe({
             next: (res) => {
                 this.getClientList = res?.data?.result;
-                this.dataObject[0].Issues = this.getClientList;
-            }
+                if ("header-filters" in localStorage) {
+                    // debugger
+                    const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+                    // debugger
+                    if (headerFilters.date) {
+                        // this.selectedFilters.date = headerFilters.date;
+                        this.selectedDateRange.startDate = headerFilters.date.startDate;
+                        this.selectedDateRange.endDate = headerFilters.date.endDate;
+                    }
+                    // console.log( this.selectedDateRange)
+                    this.dataObject[0].Issues = this.getClientList;
+                    this.toggleCheckbox("Select All", 0);
+                    this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
+                    this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
+                    const currentIssues = this.dummyArray[0].Issues.map((item) => item.clientId);
+                    this.selectedFilters.clients = currentIssues;
+                    // }
+                    this.globalService.dataRangeValue.next(this.selectedFilters);
+                    // this.cd.detectChanges();
+                }
+                else {
+                    this.dataObject[0].Issues = this.getClientList;
+                    this.toggleCheckbox("Select All", 0);
+                    this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
+                    this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
+                    // this.selectedDateRange.startDate = dayjs().format("MM-DD-YYYY");
+                    // this.selectedDateRange.endDate = dayjs().format("MM-DD-YYYY");
+                    const currentIssues = this.dummyArray[0].Issues.map((item) => item.clientId);
+                    this.selectedFilters.clients = currentIssues;
+                    // this.selectedFilters.date = this.selectedDateRange;
+                    localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+                    this.cd.detectChanges();
+                }
+                console.log(this.selectedDateRange);
+            },
         });
-        console.log(this.dataObject);
-        this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
-        this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
         // this.updateProps();
         const subscr = this.layout.layoutConfigSubject
             .asObservable()
@@ -1643,32 +1678,23 @@ class ClassicComponent {
             // this.updateProps();
         });
         this.unsubscribe.push(subscr);
-        try {
-            // Parse dates from localStorage and format them
-            const headerFilters = JSON.parse(localStorage.getItem('header-filters') || '{}');
-            if (headerFilters.stores) {
-                this.selectedValuesArray = [headerFilters.stores];
-            }
-            if (headerFilters.date) {
-                this.globalService.dataRangeValue.next(this.selectedFilters);
-                this.selectedDateRange.startDate = headerFilters.date.startDate;
-                this.selectedDateRange.endDate = headerFilters.date.endDate;
+    }
+    getclients() {
+        this.service.getClients().subscribe({
+            next: (res) => {
+                this.getClientList = res?.data?.result;
+                this.toggleCheckbox("Select All", 0);
+                this.dummyArray = JSON.parse(JSON.stringify(this.dataObject));
+                this.responseArray = JSON.parse(JSON.stringify(this.dataObject));
             }
-        }
-        catch (error) {
-            console.error('Error parsing dates from localStorage:', error);
-            // Handle parsing error, e.g., set default dates
-            // Example:
-            this.selectedDateRange.startDate = dayjs().format('MM-DD-YYYY');
-            this.selectedDateRange.endDate = dayjs().format('MM-DD-YYYY');
-        }
+        });
     }
     onClick(event) {
         const target = event.target;
-        if (!target.closest('.dropdown1')) {
+        if (!target.closest(".dropdown1")) {
             this.Opendropdown = false;
         }
-        if (!target.closest('.dropdown-content')) {
+        if (!target.closest(".dropdown-content")) {
             this.dataObject.forEach((item, i) => {
                 item.isOpen = false;
             });
@@ -1703,8 +1729,9 @@ class ClassicComponent {
     //   }
     // }
     searchData(event, i) {
-        const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(event.target.value, 'i').test(item.clientId));
+        const filteredIssues = this.dummyArray[i].Issues.filter((item) => new RegExp(event.target.value, "i").test(item.clientName));
         this.dataObject[i].Issues = filteredIssues;
+        console.log(i);
         if (filteredIssues.length) {
             this.noFilter = false;
         }
@@ -1716,7 +1743,7 @@ class ClassicComponent {
         const currentIssues = this.dataObject[index].Issues;
         this.selectedValuesArray[index] = this.selectedValuesArray[index] || [];
         const selectedValues = this.selectedValuesArray[index]; // Retrieve selected values array for the current dropdown index
-        if (issue === 'Select All') {
+        if (issue === "Select All") {
             const currentIssues = this.dataObject[index].Issues.map((item) => item.clientId);
             if (selectedValues.length === currentIssues.length) {
                 // If all items are already selected, deselect all
@@ -1726,6 +1753,7 @@ class ClassicComponent {
                 // Otherwise, select all items
                 this.selectedValuesArray[index] = [...currentIssues];
             }
+            this.cd.detectChanges();
         }
         else {
             if (selectedValues.includes(issue)) {
@@ -1764,7 +1792,7 @@ class ClassicComponent {
                 this.selectedValuesArray[i] = selectedValues.map((selectedId) => {
                     const issue = issues.find((issueItem) => issueItem.clientId === selectedId);
                     selectedValue.push(issue);
-                    return issue ? issue : ''; // Get the text corresponding to the id
+                    return issue ? issue : ""; // Get the text corresponding to the id
                 });
             }
         }
@@ -1776,29 +1804,34 @@ class ClassicComponent {
             this.selectedValuesArray[index] = item;
         });
         this.responseArray.forEach((item, index) => {
-            item.Issues = this.selectedValuesArray[index] ? this.selectedValuesArray[index] : [];
+            item.Issues = this.selectedValuesArray[index]
+                ? this.selectedValuesArray[index]
+                : [];
         });
         //  this.selectedFilters.stores=this.responseArray
-        this.selectedFilters.stores = this.responseArray[0].Issues;
+        this.selectedFilters.clients = this.responseArray[0].Issues;
         this.selectedFilters.date = this.selectedDateRange;
-        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
     }
     ranges = {
-        'Today': [dayjs(), dayjs()],
-        'Yesterday': [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
-        'This Week': [dayjs().subtract(6, 'days'), dayjs()],
-        'Last Week': [dayjs().subtract(14, 'days').startOf('days'), dayjs().subtract(8, 'days').endOf('days')],
-        'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
-        'Last Month': [
-            dayjs().subtract(1, 'month').startOf('month'),
-            dayjs().subtract(1, 'month').endOf('month')
-        ]
+        Today: [dayjs(), dayjs()],
+        Yesterday: [dayjs().subtract(1, "days"), dayjs().subtract(1, "days")],
+        "This Week": [dayjs().subtract(6, "days"), dayjs()],
+        "Last Week": [
+            dayjs().subtract(14, "days").startOf("days"),
+            dayjs().subtract(8, "days").endOf("days"),
+        ],
+        "This Month": [dayjs().startOf("month"), dayjs().endOf("month")],
+        "Last Month": [
+            dayjs().subtract(1, "month").startOf("month"),
+            dayjs().subtract(1, "month").endOf("month"),
+        ],
     };
     onStartDateChange(event) {
         if (dayjs(event.startDate).isValid()) {
             this.isCustomDate = (m) => {
-                const isValidDate = m > dayjs() || m > dayjs(event.startDate.add(90, 'days'));
-                return isValidDate ? 'invalid-date' : false;
+                const isValidDate = m > dayjs() || m > dayjs(event.startDate.add(90, "days"));
+                return isValidDate ? "invalid-date" : false;
             };
         }
     }
@@ -1806,176 +1839,801 @@ class ClassicComponent {
         if (event && event.startDate && event.endDate) {
             if (dayjs(event.startDate).isValid() && dayjs(event.endDate).isValid()) {
                 // Dates are valid, proceed with formatting
-                this.selectedDateRange.startDate = dayjs(event.startDate).utc().format('DD-MM-YYYY');
-                this.selectedDateRange.endDate = dayjs(event.endDate).utc().format('DD-MM-YYYY');
+                this.selectedDateRange.startDate = dayjs(event.startDate)
+                    .utc()
+                    .format("DD-MM-YYYY");
+                this.selectedDateRange.endDate = dayjs(event.endDate)
+                    .utc()
+                    .format("DD-MM-YYYY");
             }
             else {
                 // Dates are not valid, handle the scenario accordingly
-                console.error('Invalid dates provided:', event.startDate, event.endDate);
-                // If you want to fallback to stored filters when the dates are invalid, you can keep the existing logic
-                const storedFilters = JSON.parse(localStorage.getItem('dateRangeFilters') || '{}');
-                if (storedFilters.startDate && storedFilters.endDate) {
-                    this.selectedDateRange.startDate = dayjs(storedFilters.startDate).format('DD-MM-YYYY');
-                    this.selectedDateRange.endDate = dayjs(storedFilters.endDate).format('DD-MM-YYYY');
-                }
+                console.error("Invalid dates provided:", event.startDate, event.endDate);
             }
         }
         else {
-            // Event object or its properties are null, handle the scenario accordingly
-            console.error('Invalid event object:', event);
-            // Fallback to stored filters or any other handling logic as needed
+            const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+            this.selectedFilters.date = headerFilters.date;
         }
         this.selectedFilters.date = this.selectedDateRange;
-        // this.globalService.sendData(JSON.stringify(this.selectedFilters.date));
-        localStorage.setItem('dateRangeFilters', JSON.stringify(this.selectedDateRange));
-        // this.globalService.sendData(this.selectedDateRange);
+        console.log(this.selectedDateRange);
     }
-    onDateSelect(event) {
-        console.log('Selected date:', event);
-        // Handle the selected date here
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassicComponent, deps: [{ token: i1.LayoutService }, { token: i2$1.GlobalStateService }, { token: i3$1.AuthService }], 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}\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: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClassicComponent, deps: [{ token: i1.LayoutService }, { token: i2$1.GlobalStateService }, { token: i1$2.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}\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}\n"] }]
-        }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i2$1.GlobalStateService }, { type: i3$1.AuthService }], propDecorators: { onClick: [{
+            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}\n"] }]
+        }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i2$1.GlobalStateService }, { type: i1$2.AuthService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
-                args: ['document:click', ['$event']]
+                args: ["document:click", ["$event"]]
             }] } });
 
-class ToolbarComponent {
-    layout;
-    unsubscribe = [];
-    // Public props
-    currentLayoutType;
-    appToolbarLayout;
-    // toolbar
-    appToolbarDisplay;
-    appToolbarContainer;
-    appToolbarContainerCSSClass = '';
-    appToolbarFixedDesktop;
-    appToolbarFixedMobile;
-    appPageTitleDisplay;
-    // page title
-    appPageTitleDirection = '';
-    appPageTitleCSSClass = '';
-    appPageTitleBreadcrumb;
-    appPageTitleDescription;
-    constructor(layout) {
-        this.layout = layout;
+class CustomSelectComponent {
+    cd;
+    onClick(event) {
+        const target = event.target;
+        if (!target.closest('.dropdown')) {
+            this.showDropdown = false;
+        }
     }
-    ngOnInit() {
-        const subscr = this.layout.layoutConfigSubject
-            .asObservable()
-            .subscribe((config) => {
-            this.updateProps(config);
+    items;
+    searchField;
+    multi;
+    idField;
+    selectedValues = [];
+    disabled;
+    label;
+    selected = new EventEmitter();
+    filteredValues = [];
+    showDropdown;
+    searchValue;
+    constructor(cd) {
+        this.cd = cd;
+    }
+    ngOnChanges(changes) {
+        if (changes['items'] && this.items?.length) {
+            this.initializeItems();
+        }
+        if (changes['selectedValues'] && this.selectedValues?.length) {
+            this.updateSelectedValues();
+        }
+    }
+    initializeItems() {
+        this.filteredValues = this.items.map((item) => ({ ...item }));
+        this.updateSelectedValues();
+    }
+    updateSelectedValues() {
+        this.selectedValues?.forEach((selectedItem) => {
+            const item = this.filteredValues?.find((filteredItem) => filteredItem?.[this.idField] === selectedItem?.[this.idField]);
+            if (item) {
+                item.isSelected = true;
+            }
         });
-        this.unsubscribe.push(subscr);
     }
-    updateProps(config) {
-        this.appToolbarDisplay = this.layout.getProp('app.toolbar.display', config);
-        if (!this.appToolbarDisplay) {
-            return;
+    openDropdown(event) {
+        event.stopPropagation();
+        this.showDropdown = !this.showDropdown;
+    }
+    onInput(event) {
+        if (!event.target.value) {
+            this.filteredValues = [...this.items];
         }
-        this.appPageTitleDisplay = this.layout.getProp('app.pageTitle.display', config);
-        this.appToolbarContainer = this.layout.getProp('app.toolbar.container', config);
-        this.appToolbarContainerCSSClass =
-            this.appToolbarContainer === 'fixed'
-                ? 'container-xxl'
-                : 'container-fluid';
-        const containerClass = this.layout.getProp('app.toolbar.containerClass', config);
-        if (containerClass) {
-            this.appToolbarContainerCSSClass += ` ${containerClass}`;
+        else {
+            const searchTerm = event.target.value.toLowerCase();
+            this.filteredValues = this.items.filter((item) => item[this.searchField].toLowerCase().includes(searchTerm));
         }
-        this.appToolbarFixedDesktop = this.layout.getProp('app.toolbar.fixed.desktop', config);
-        if (this.appToolbarFixedDesktop) {
-            document.body.setAttribute('data-kt-app-toolbar-fixed', 'true');
+        this.cd.detectChanges();
+    }
+    onSelect(event, item) {
+        if (this.multi) {
+            if (event.currentTarget.checked) {
+                this.selectedValues.push({ ...item });
+            }
+            else {
+                this.selectedValues = this.selectedValues.filter((elem) => elem[this.idField] !== item[this.idField]);
+            }
         }
-        this.appToolbarFixedMobile = this.layout.getProp('app.toolbar.fixed.mobile', config);
-        if (this.appToolbarFixedMobile) {
-            document.body.setAttribute('data-kt-app-toolbar-fixed-mobile', 'true');
+        else {
+            this.selectedValues = [{ ...item }];
+            this.showDropdown = false;
         }
-        // toolbar
-        this.appPageTitleDirection = this.layout.getProp('app.pageTitle.direction', config);
-        this.appPageTitleCSSClass = this.layout.getProp('app.pageTitle.class', config);
-        this.appPageTitleBreadcrumb = this.layout.getProp('app.pageTitle.breadCrumb', config);
-        this.appPageTitleDescription = this.layout.getProp('app.pageTitle.description', config);
-        document.body.setAttribute('data-kt-app-toolbar-enabled', 'true');
+        const valuesToEmit = this.selectedValues.map((value) => {
+            const { isSelected, ...selectedItem } = value;
+            return selectedItem;
+        });
+        this.cd.detectChanges();
+        this.emitSelectedValues(valuesToEmit);
     }
-    ngOnDestroy() {
-        this.unsubscribe.forEach((sb) => sb.unsubscribe());
+    onSelectAll(event) {
+        const selectAll = event.currentTarget.checked;
+        this.filteredValues.forEach((item) => item.isSelected = selectAll);
+        if (selectAll) {
+            this.selectedValues = [...this.filteredValues];
+        }
+        else {
+            this.selectedValues = [];
+        }
+        const valuesToEmit = this.selectedValues.map((value) => {
+            const { isSelected, ...selectedItem } = value;
+            return selectedItem;
+        });
+        this.cd.detectChanges();
+        this.emitSelectedValues(valuesToEmit);
     }
-    showPageTitle() {
-        const viewsWithPageTitles = ['classic', 'reports', 'saas'];
-        return (this.appPageTitleDisplay &&
-            viewsWithPageTitles.some((t) => t === this.appToolbarLayout));
+    emitSelectedValues(values) {
+        if (this.multi) {
+            this.selected.emit(values);
+        }
+        else {
+            this.selected.emit(values[0]);
+        }
+    }
+    checkIfAllSelected() {
+        return this.filteredValues.every((item) => item.isSelected);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.LayoutService }], 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=\"appToolbarLayout === 'classic'\">\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=\"appToolbarLayout === 'accounting'\">\r\n    <lib-accounting class=\"d-flex align-items-center me-5\"></lib-accounting>\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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CustomSelectComponent, selector: "lib-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    {{selectedValues?.length}} {{label}} Selected    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" 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        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi\">\r\n                <div   class=\"form-check\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                        id=\"selectAll\">\r\n                    <label class=\"form-check-label\" for=\"selectAll\">\r\n                        Select All\r\n                    </label>\r\n                </div>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues; let i = index\" >\r\n                <div [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"i\">\r\n                    <label class=\"form-check-label\" [for]=\"i\">\r\n                        {{item[searchField]}}\r\n                    </label>\r\n                </div>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n    \r\n</div>\r\n    ", styles: [":host{width:100%;height:100%}.outer-container{z-index:1;position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:200px;overflow-y:scroll;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul li{list-style:none;padding:10px 16px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomSelectComponent, 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=\"appToolbarLayout === 'classic'\">\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=\"appToolbarLayout === 'accounting'\">\r\n    <lib-accounting class=\"d-flex align-items-center me-5\"></lib-accounting>\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.LayoutService }], propDecorators: { currentLayoutType: [{
+            args: [{ selector: 'lib-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    {{selectedValues?.length}} {{label}} Selected    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" 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        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi\">\r\n                <div   class=\"form-check\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                        id=\"selectAll\">\r\n                    <label class=\"form-check-label\" for=\"selectAll\">\r\n                        Select All\r\n                    </label>\r\n                </div>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues; let i = index\" >\r\n                <div [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"i\">\r\n                    <label class=\"form-check-label\" [for]=\"i\">\r\n                        {{item[searchField]}}\r\n                    </label>\r\n                </div>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n    \r\n</div>\r\n    ", styles: [":host{width:100%;height:100%}.outer-container{z-index:1;position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:600;border-radius:8px!important;color:var(--Gray-500, #344054);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:200px;overflow-y:scroll;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul li{list-style:none;padding:10px 16px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], items: [{
                 type: Input
-            }], appToolbarLayout: [{
+            }], searchField: [{
                 type: Input
-            }] } });
-
-class SidebarLogoComponent {
-    layout;
-    unsubscribe = [];
-    toggleButtonClass = '';
-    toggleEnabled;
-    toggleType = '';
-    toggleState = '';
-    currentLayoutType;
-    toggleAttr;
-    constructor(layout) {
-        this.layout = layout;
-    }
-    ngOnInit() {
-        this.toggleAttr = `app-sidebar-${this.toggleType}`;
-        const layoutSubscr = this.layout.currentLayoutTypeSubject
-            .asObservable()
-            .subscribe((layout) => {
-            this.currentLayoutType = layout;
-        });
-        this.unsubscribe.push(layoutSubscr);
-    }
-    ngOnDestroy() {
-        this.unsubscribe.forEach((sb) => sb.unsubscribe());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarLogoComponent, deps: [{ token: i1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SidebarLogoComponent, selector: "lib-sidebar-logo", inputs: { toggleButtonClass: "toggleButtonClass", toggleEnabled: "toggleEnabled", toggleType: "toggleType", toggleState: "toggleState" }, ngImport: i0, template: "<!--begin::Logo image-->\r\n<a routerLink=\"/dashboard\">\r\n  <ng-container *ngIf=\"currentLayoutType === 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default\" />\r\n  </ng-container>\r\n  <ng-container *ngIf=\"currentLayoutType !== 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default theme-light-show\" />\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\"\r\n      class=\"h-40px app-sidebar-logo-default theme-dark-show\" />\r\n  </ng-container>\r\n\r\n  <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\" class=\"h-38px app-sidebar-logo-minimize\" />\r\n</a>\r\n<!--end::Logo image-->\r\n\r\n\r\n<ng-container *ngIf=\"toggleEnabled\">\r\n  <!--begin::Sidebar toggle-->\r\n  <div id=\"kt_app_sidebar_toggle\"\r\n    class=\"app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary body-bg h-30px w-30px position-absolute top-50 start-100 translate-middle rotate d-none\"\r\n    [ngClass]=\"toggleButtonClass\" data-kt-toggle=\"true\" [attr.data-kt-toggle-state]=\"toggleState\"\r\n    data-kt-toggle-target=\"body\" [attr.data-kt-toggle-name]=\"toggleAttr\">\r\n    <lib-keenicon name=\"double-left\" class=\"fs-2 rotate-180\"></lib-keenicon>\r\n  </div>\r\n  <!--end::Sidebar toggle-->\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarLogoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-sidebar-logo', template: "<!--begin::Logo image-->\r\n<a routerLink=\"/dashboard\">\r\n  <ng-container *ngIf=\"currentLayoutType === 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default\" />\r\n  </ng-container>\r\n  <ng-container *ngIf=\"currentLayoutType !== 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default theme-light-show\" />\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\"\r\n      class=\"h-40px app-sidebar-logo-default theme-dark-show\" />\r\n  </ng-container>\r\n\r\n  <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\" class=\"h-38px app-sidebar-logo-minimize\" />\r\n</a>\r\n<!--end::Logo image-->\r\n\r\n\r\n<ng-container *ngIf=\"toggleEnabled\">\r\n  <!--begin::Sidebar toggle-->\r\n  <div id=\"kt_app_sidebar_toggle\"\r\n    class=\"app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary body-bg h-30px w-30px position-absolute top-50 start-100 translate-middle rotate d-none\"\r\n    [ngClass]=\"toggleButtonClass\" data-kt-toggle=\"true\" [attr.data-kt-toggle-state]=\"toggleState\"\r\n    data-kt-toggle-target=\"body\" [attr.data-kt-toggle-name]=\"toggleAttr\">\r\n    <lib-keenicon name=\"double-left\" class=\"fs-2 rotate-180\"></lib-keenicon>\r\n  </div>\r\n  <!--end::Sidebar toggle-->\r\n</ng-container>\r\n" }]
-        }], ctorParameters: () => [{ type: i1.LayoutService }], propDecorators: { toggleButtonClass: [{
+            }], multi: [{
                 type: Input
-            }], toggleEnabled: [{
+            }], idField: [{
                 type: Input
-            }], toggleType: [{
+            }], selectedValues: [{
                 type: Input
-            }], toggleState: [{
+            }], disabled: [{
+                type: Input
+            }], label: [{
                 type: Input
+            }], selected: [{
+                type: Output
             }] } });
 
-class SidebarMenuComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarMenuComponent, deps: [], 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 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/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 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 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 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 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 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 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 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 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 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 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 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 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  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->", styles: [""], dependencies: [{ kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+class ClientSettingsComponent {
+    auth;
+    gs;
+    cd;
+    clientList = [];
+    selectedClient;
+    selectedFilters = {
+        client: null,
+        clients: [],
+        store: null,
+        stores: [],
+        date: null,
+    };
+    constructor(auth, gs, cd) {
+        this.auth = auth;
+        this.gs = gs;
+        this.cd = cd;
+        this.auth.getClients().subscribe({
+            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;
+                                }
+                            });
+                        }
+                        else {
+                            this.selectedClient = this.clientList[0];
+                            this.gs.selectedClient.next(this.selectedClient);
+                            this.cd.detectChanges();
+                        }
+                        this.selectedFilters.client = headerFilters.client;
+                        this.gs.dataRangeValue.next(this.selectedFilters);
+                    }
+                }
+                else {
+                }
+            },
+        });
+    }
+    onClientSelect(event) {
+        this.selectedClient = event;
+        this.gs.selectedClient.next(this.selectedClient);
+        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        this.selectedFilters = headerFilters;
+        this.selectedFilters.client = this.selectedClient.clientId;
+        this.gs.dataRangeValue.next(this.selectedFilters);
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClientSettingsComponent, deps: [{ token: i1$2.AuthService }, { token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ClientSettingsComponent, selector: "lib-client-settings", ngImport: i0, template: "    <div class=\"wrapper\" >\r\n        <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n            (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n    </div>\r\n", styles: [".wrapper{min-width:200px}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClientSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-client-settings', template: "    <div class=\"wrapper\" >\r\n        <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n            (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n    </div>\r\n", styles: [".wrapper{min-width:200px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.AuthService }, { type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
+
+class DatepickerComponent {
+    layout;
+    gs;
+    service;
+    cd;
+    unsubscribe = [];
+    isCustomDate;
+    selectedDateRange = {};
+    selectedFilters = {
+        client: null,
+        clients: [],
+        store: null,
+        stores: [],
+        date: null,
+    };
+    constructor(layout, gs, service, cd) {
+        this.layout = layout;
+        this.gs = gs;
+        this.service = service;
+        this.cd = cd;
+    }
+    ngOnDestroy() {
+        this.unsubscribe.forEach((sb) => sb.unsubscribe());
+    }
+    ngOnInit() {
+        if ("header-filters" in localStorage) {
+            const headerFilters = JSON.parse(localStorage.getItem('header-filters') || '{}');
+            // if (headerFilters.date) {
+            this.selectedFilters.date = headerFilters.date;
+            this.selectedDateRange.startDate = headerFilters.date.startDate;
+            this.selectedDateRange.endDate = headerFilters.date.endDate;
+            // this.gs.dataRangeValue.next(this.selectedFilters);
+            this.cd.detectChanges();
+            // } 
+        }
+        else {
+            this.selectedDateRange.startDate = dayjs().format("MM-DD-YYYY");
+            this.selectedDateRange.endDate = dayjs().format("MM-DD-YYYY");
+        }
+    }
+    ranges = {
+        'Today': [dayjs(), dayjs()],
+        'Yesterday': [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+        'This Week': [dayjs().subtract(6, 'days'), dayjs()],
+        'Last Week': [dayjs().subtract(14, 'days').startOf('days'), dayjs().subtract(8, 'days').endOf('days')],
+        'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
+        'Last Month': [
+            dayjs().subtract(1, 'month').startOf('month'),
+            dayjs().subtract(1, 'month').endOf('month')
+        ]
+    };
+    onStartDateChange(event) {
+        if (dayjs(event.startDate).isValid()) {
+            this.isCustomDate = (m) => {
+                const isValidDate = m > dayjs() || m > dayjs(event.startDate.add(90, 'days'));
+                return isValidDate ? 'invalid-date' : false;
+            };
+        }
+    }
+    datechange(event) {
+        // debugger
+        if (event && event.startDate && event.endDate) {
+            if (dayjs(event.startDate).isValid() && dayjs(event.endDate).isValid()) {
+                // Dates are valid, proceed with formatting
+                this.selectedDateRange.startDate = dayjs(event.startDate).utc().format('DD-MM-YYYY');
+                this.selectedDateRange.endDate = dayjs(event.endDate).utc().format('DD-MM-YYYY');
+            }
+            else {
+                // Dates are not valid, handle the scenario accordingly
+                console.error('Invalid dates provided:', event.startDate, event.endDate);
+                // If you want to fallback to stored filters when the dates are invalid, you can keep the existing logic
+                const storedFilters = JSON.parse(localStorage.getItem('header-filters') || '{}');
+                if (storedFilters.startDate && storedFilters.endDate) {
+                    this.selectedDateRange.startDate = dayjs(storedFilters.startDate).format('DD-MM-YYYY');
+                    this.selectedDateRange.endDate = dayjs(storedFilters.endDate).format('DD-MM-YYYY');
+                }
+            }
+        }
+        else {
+            const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+            this.selectedFilters.date = headerFilters.date;
+        }
+        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        this.selectedFilters = headerFilters;
+        this.gs.dataRangeValue.next(this.selectedFilters);
+        this.selectedFilters.date = this.selectedDateRange;
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        // this.globalService.sendData(this.selectedDateRange);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DatepickerComponent, deps: [{ token: i1.LayoutService }, { token: i2$1.GlobalStateService }, { token: i1$2.AuthService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DatepickerComponent, selector: "lib-datepicker", ngImport: i0, template: "<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" 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>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height: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}\n"], dependencies: [{ 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: DatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-datepicker', template: "<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" 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>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height: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}\n"] }]
+        }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i2$1.GlobalStateService }, { type: i1$2.AuthService }, { type: i0.ChangeDetectorRef }] });
+
+class DateSingleSelectComponent {
+    auth;
+    gs;
+    cd;
+    isCustomDate;
+    selectedDateRange = {};
+    clientList = [];
+    selectedClient;
+    selectedFilters = {
+        client: null,
+        clients: [],
+        store: null,
+        stores: [],
+        date: null,
+    };
+    constructor(auth, gs, cd) {
+        this.auth = auth;
+        this.gs = gs;
+        this.cd = cd;
+        this.auth.getClients().subscribe({
+            next: (e) => {
+                if (e) {
+                    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) {
+                                this.selectedClient = obj;
+                                this.gs.dataRangeValue.next(this.selectedFilters);
+                            }
+                        });
+                    }
+                    else {
+                        this.selectedClient = this.clientList[0];
+                        this.gs.selectedClient.next(this.selectedClient);
+                        this.cd.detectChanges();
+                    }
+                }
+            },
+        });
+    }
+    ngOnInit() {
+        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.gs.dataRangeValue.next(this.selectedFilters);
+            this.selectedFilters.client = headerFilters.client;
+            this.selectedFilters.clients = [headerFilters.clients];
+            this.selectedFilters.date = headerFilters.date;
+            this.selectedDateRange.startDate = headerFilters.date.startDate;
+            this.selectedDateRange.endDate = headerFilters.date.endDate;
+        }
+        else {
+            this.selectedDateRange.startDate = dayjs().format('MM-DD-YYYY');
+            this.selectedDateRange.endDate = dayjs().format('MM-DD-YYYY');
+        }
+    }
+    onClientSelect(event) {
+        this.selectedClient = event;
+        this.gs.selectedClient.next(this.selectedClient);
+    }
+    ranges = {
+        'Today': [dayjs(), dayjs()],
+        'Yesterday': [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+        'This Week': [dayjs().subtract(6, 'days'), dayjs()],
+        'Last Week': [dayjs().subtract(14, 'days').startOf('days'), dayjs().subtract(8, 'days').endOf('days')],
+        'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
+        'Last Month': [
+            dayjs().subtract(1, 'month').startOf('month'),
+            dayjs().subtract(1, 'month').endOf('month')
+        ]
+    };
+    onStartDateChange(event) {
+        if (dayjs(event.startDate).isValid()) {
+            this.isCustomDate = (m) => {
+                const isValidDate = m > dayjs() || m > dayjs(event.startDate.add(90, 'days'));
+                return isValidDate ? 'invalid-date' : false;
+            };
+        }
+    }
+    datechange(event) {
+        if (event && event.startDate && event.endDate) {
+            if (dayjs(event.startDate).isValid() && dayjs(event.endDate).isValid()) {
+                // Dates are valid, proceed with formatting
+                this.selectedDateRange.startDate = dayjs(event.startDate).utc().format('DD-MM-YYYY');
+                this.selectedDateRange.endDate = dayjs(event.endDate).utc().format('DD-MM-YYYY');
+            }
+            else {
+                // Dates are not valid, handle the scenario accordingly
+                console.error('Invalid dates provided:', event.startDate, event.endDate);
+                // If you want to fallback to stored filters when the dates are invalid, you can keep the existing logic
+                // const storedFilters = JSON.parse(localStorage.getItem('dateRangeFilters') || '{}');
+                // if (storedFilters.startDate && storedFilters.endDate) {
+                //   this.selectedDateRange.startDate = dayjs(storedFilters.startDate).format('DD-MM-YYYY');
+                //   this.selectedDateRange.endDate = dayjs(storedFilters.endDate).format('DD-MM-YYYY');
+                // }
+            }
+        }
+        else {
+            const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+            this.selectedFilters.date = headerFilters.date;
+        }
+        this.selectedFilters.date = this.selectedDateRange;
+        // this.globalService.sendData(JSON.stringify(this.selectedFilters.date));
+        // localStorage.setItem('dateRangeFilters', JSON.stringify(this.selectedDateRange));
+        // this.globalService.sendData(this.selectedDateRange);
+    }
+    Apply() {
+        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        this.selectedFilters = headerFilters;
+        this.selectedFilters.client = this.selectedClient.clientId;
+        this.selectedFilters.date = this.selectedDateRange;
+        this.gs.dataRangeValue.next(this.selectedFilters);
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DateSingleSelectComponent, deps: [{ token: i1$2.AuthService }, { token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DateSingleSelectComponent, selector: "lib-date-single-select", ngImport: i0, template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" 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<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height: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}.wrapper{min-width:200px}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { 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: DateSingleSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-date-single-select', template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" 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<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height: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}.wrapper{min-width:200px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.AuthService }, { type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
+
+class SingleStoreComponent {
+    auth;
+    gs;
+    cd;
+    isCustomDate;
+    selectedDateRange = {};
+    storeList = [];
+    selectedClient;
+    selectedFilters = {
+        client: null,
+        clients: [],
+        store: null,
+        stores: [],
+        date: null,
+    };
+    constructor(auth, gs, cd) {
+        this.auth = auth;
+        this.gs = gs;
+        this.cd = cd;
+        this.auth.getStores().subscribe({
+            next: (e) => {
+                if (e) {
+                    this.storeList = e.data.result;
+                    const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+                    this.cd.detectChanges();
+                    if (headerFilters.store) {
+                        this.storeList.find((obj) => {
+                            if (obj.storeId === headerFilters.store) {
+                                this.selectedClient = obj;
+                                this.gs.dataRangeValue.next(this.selectedFilters);
+                            }
+                        });
+                    }
+                    else {
+                        this.selectedClient = this.storeList[0];
+                        this.gs.selectedClient.next(this.selectedClient);
+                        this.cd.detectChanges();
+                    }
+                }
+            },
+        });
+    }
+    ngOnInit() {
+        if ("header-filters" in localStorage) {
+            const headerFilters = JSON.parse(localStorage.getItem('header-filters') || '{}');
+            this.cd.detectChanges();
+            if (headerFilters.store) {
+                this.storeList.find((obj) => {
+                    if (obj.storeId === headerFilters.store) {
+                        this.selectedClient = obj;
+                    }
+                });
+            }
+            this.gs.dataRangeValue.next(this.selectedFilters);
+            this.selectedFilters.store = headerFilters.store;
+            this.selectedFilters.client = headerFilters.client;
+            this.selectedFilters.clients = [headerFilters.clients];
+            this.selectedFilters.date = headerFilters.date;
+            this.selectedDateRange.startDate = headerFilters.date.startDate;
+            this.selectedDateRange.endDate = headerFilters.date.endDate;
+        }
+        else {
+            this.selectedDateRange.startDate = dayjs().format('MM-DD-YYYY');
+            this.selectedDateRange.endDate = dayjs().format('MM-DD-YYYY');
+        }
+    }
+    onClientSelect(event) {
+        this.selectedClient = event;
+        this.gs.selectedClient.next(this.selectedClient);
+    }
+    ranges = {
+        'Today': [dayjs(), dayjs()],
+        'Yesterday': [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+        'This Week': [dayjs().subtract(6, 'days'), dayjs()],
+        'Last Week': [dayjs().subtract(14, 'days').startOf('days'), dayjs().subtract(8, 'days').endOf('days')],
+        'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
+        'Last Month': [
+            dayjs().subtract(1, 'month').startOf('month'),
+            dayjs().subtract(1, 'month').endOf('month')
+        ]
+    };
+    onStartDateChange(event) {
+        if (dayjs(event.startDate).isValid()) {
+            this.isCustomDate = (m) => {
+                const isValidDate = m > dayjs() || m > dayjs(event.startDate.add(90, 'days'));
+                return isValidDate ? 'invalid-date' : false;
+            };
+        }
+    }
+    datechange(event) {
+        if (event && event.startDate && event.endDate) {
+            if (dayjs(event.startDate).isValid() && dayjs(event.endDate).isValid()) {
+                // Dates are valid, proceed with formatting
+                this.selectedDateRange.startDate = dayjs(event.startDate).utc().format('DD-MM-YYYY');
+                this.selectedDateRange.endDate = dayjs(event.endDate).utc().format('DD-MM-YYYY');
+            }
+            else {
+                // Dates are not valid, handle the scenario accordingly
+                console.error('Invalid dates provided:', event.startDate, event.endDate);
+                // If you want to fallback to stored filters when the dates are invalid, you can keep the existing logic
+                // const storedFilters = JSON.parse(localStorage.getItem('dateRangeFilters') || '{}');
+                // if (storedFilters.startDate && storedFilters.endDate) {
+                //   this.selectedDateRange.startDate = dayjs(storedFilters.startDate).format('DD-MM-YYYY');
+                //   this.selectedDateRange.endDate = dayjs(storedFilters.endDate).format('DD-MM-YYYY');
+                // }
+            }
+        }
+        else {
+            const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+            this.selectedFilters.date = headerFilters.date;
+        }
+        this.selectedFilters.date = this.selectedDateRange;
+        // this.globalService.sendData(JSON.stringify(this.selectedFilters.date));
+        // localStorage.setItem('dateRangeFilters', JSON.stringify(this.selectedDateRange));
+        // this.globalService.sendData(this.selectedDateRange);
+    }
+    Apply() {
+        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        this.selectedFilters = headerFilters;
+        this.selectedFilters.store = this.selectedClient.store;
+        this.selectedFilters.date = this.selectedDateRange;
+        this.gs.dataRangeValue.next(this.selectedFilters);
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SingleStoreComponent, deps: [{ token: i1$2.AuthService }, { token: i2$1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SingleStoreComponent, selector: "lib-single-store", ngImport: i0, template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" 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<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height: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}.wrapper{min-width:200px}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { 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: SingleStoreComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-single-store', template: "<div class=\"wrapper mx-2\" >\r\n    <lib-select [items]=\"storeList\" [multi]=\"false\" [searchField]=\"'storeName'\" [disabled]=\"false\" [idField]=\"'storeId'\"\r\n        (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n\r\n        \r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" 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<div class=\"btn btn-primary ms-2\" (click)=\"Apply()\">Apply</div>\r\n", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height: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}.wrapper{min-width:200px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.AuthService }, { type: i2$1.GlobalStateService }, { type: i0.ChangeDetectorRef }] });
+
+class ToolbarComponent {
+    layout;
+    router;
+    route;
+    unsubscribe = [];
+    // Public props
+    currentLayoutType;
+    appToolbarLayout;
+    // toolbar
+    appToolbarDisplay;
+    appToolbarContainer;
+    appToolbarContainerCSSClass = "";
+    appToolbarFixedDesktop;
+    appToolbarFixedMobile;
+    appPageTitleDisplay;
+    // page title
+    appPageTitleDirection = "";
+    appPageTitleCSSClass = "";
+    appPageTitleBreadcrumb;
+    appPageTitleDescription;
+    querParams;
+    singleSelect;
+    multiSelect;
+    datepicker;
+    singleSelectdatepicker;
+    singleStore;
+    constructor(layout, router, route) {
+        this.layout = layout;
+        this.router = router;
+        this.route = route;
+    }
+    ngOnInit() {
+        const subscr = this.layout.layoutConfigSubject
+            .asObservable()
+            .subscribe((config) => {
+            this.updateProps(config);
+        });
+        this.unsubscribe.push(subscr);
+        let url = this.router.url.split("/");
+        this.route.queryParams.subscribe((queryParams) => {
+            this.querParams = queryParams;
+        });
+    }
+    updateProps(config) {
+        this.appToolbarDisplay = this.layout.getProp("app.toolbar.display", config);
+        if (!this.appToolbarDisplay) {
+            return;
+        }
+        this.appPageTitleDisplay = this.layout.getProp("app.pageTitle.display", config);
+        this.appToolbarContainer = this.layout.getProp("app.toolbar.container", config);
+        this.appToolbarContainerCSSClass =
+            this.appToolbarContainer === "fixed"
+                ? "container-xxl"
+                : "container-fluid";
+        const containerClass = this.layout.getProp("app.toolbar.containerClass", config);
+        if (containerClass) {
+            this.appToolbarContainerCSSClass += ` ${containerClass}`;
+        }
+        this.appToolbarFixedDesktop = this.layout.getProp("app.toolbar.fixed.desktop", config);
+        if (this.appToolbarFixedDesktop) {
+            document.body.setAttribute("data-kt-app-toolbar-fixed", "true");
+        }
+        this.appToolbarFixedMobile = this.layout.getProp("app.toolbar.fixed.mobile", config);
+        if (this.appToolbarFixedMobile) {
+            document.body.setAttribute("data-kt-app-toolbar-fixed-mobile", "true");
+        }
+        // toolbar
+        this.appPageTitleDirection = this.layout.getProp("app.pageTitle.direction", config);
+        this.appPageTitleCSSClass = this.layout.getProp("app.pageTitle.class", config);
+        this.appPageTitleBreadcrumb = this.layout.getProp("app.pageTitle.breadCrumb", config);
+        this.appPageTitleDescription = this.layout.getProp("app.pageTitle.description", config);
+        document.body.setAttribute("data-kt-app-toolbar-enabled", "true");
+    }
+    ngOnDestroy() {
+        this.unsubscribe.forEach((sb) => sb.unsubscribe());
+    }
+    showPageTitle() {
+        if (this.router.url == "/manage/settings") {
+            this.singleSelect = true;
+            this.multiSelect = false;
+            this.datepicker = false;
+            this.singleStore = false;
+            this.singleSelectdatepicker = false;
+        }
+        else if (this.router.url == "/manage/brands") {
+            this.singleSelect = false;
+            this.multiSelect = false;
+            this.datepicker = false;
+            this.singleStore = false;
+            this.singleSelectdatepicker = false;
+        }
+        else if (this.router.url == "/manage/users") {
+            this.singleSelect = false;
+            this.multiSelect = false;
+            this.datepicker = true;
+            this.singleStore = false;
+            this.singleSelectdatepicker = false;
+        }
+        else if (this.router.url == "/manage/stores") {
+            this.singleSelect = false;
+            this.multiSelect = false;
+            this.datepicker = false;
+            this.singleStore = false;
+            this.singleSelectdatepicker = true;
+        }
+        else if (this.router.url == "/manage/stores/LKST123/infra-ticket") {
+            this.singleSelect = false;
+            this.multiSelect = false;
+            this.datepicker = false;
+            this.singleSelectdatepicker = false;
+            this.singleStore = true;
+        }
+        else {
+            this.singleSelect = false;
+            this.multiSelect = true;
+            this.datepicker = false;
+            this.singleSelectdatepicker = false;
+            this.singleStore = false;
+        }
+        const viewsWithPageTitles = ["classic", "reports", "saas"];
+        return (this.appPageTitleDisplay &&
+            viewsWithPageTitles.some((t) => t === this.appToolbarLayout));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.LayoutService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], 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" }] });
+}
+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.LayoutService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { currentLayoutType: [{
+                type: Input
+            }], appToolbarLayout: [{
+                type: Input
+            }] } });
+
+class SidebarLogoComponent {
+    layout;
+    unsubscribe = [];
+    toggleButtonClass = '';
+    toggleEnabled;
+    toggleType = '';
+    toggleState = '';
+    currentLayoutType;
+    toggleAttr;
+    constructor(layout) {
+        this.layout = layout;
+    }
+    ngOnInit() {
+        this.toggleAttr = `app-sidebar-${this.toggleType}`;
+        const layoutSubscr = this.layout.currentLayoutTypeSubject
+            .asObservable()
+            .subscribe((layout) => {
+            this.currentLayoutType = layout;
+        });
+        this.unsubscribe.push(layoutSubscr);
+    }
+    ngOnDestroy() {
+        this.unsubscribe.forEach((sb) => sb.unsubscribe());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarLogoComponent, deps: [{ token: i1.LayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SidebarLogoComponent, selector: "lib-sidebar-logo", inputs: { toggleButtonClass: "toggleButtonClass", toggleEnabled: "toggleEnabled", toggleType: "toggleType", toggleState: "toggleState" }, ngImport: i0, template: "<!--begin::Logo image-->\r\n<a routerLink=\"/dashboard\">\r\n  <ng-container *ngIf=\"currentLayoutType === 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default\" />\r\n  </ng-container>\r\n  <ng-container *ngIf=\"currentLayoutType !== 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default theme-light-show\" />\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\"\r\n      class=\"h-40px app-sidebar-logo-default theme-dark-show\" />\r\n  </ng-container>\r\n\r\n  <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\" class=\"h-38px app-sidebar-logo-minimize\" />\r\n</a>\r\n<!--end::Logo image-->\r\n\r\n\r\n<ng-container *ngIf=\"toggleEnabled\">\r\n  <!--begin::Sidebar toggle-->\r\n  <div id=\"kt_app_sidebar_toggle\"\r\n    class=\"app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary body-bg h-30px w-30px position-absolute top-50 start-100 translate-middle rotate d-none\"\r\n    [ngClass]=\"toggleButtonClass\" data-kt-toggle=\"true\" [attr.data-kt-toggle-state]=\"toggleState\"\r\n    data-kt-toggle-target=\"body\" [attr.data-kt-toggle-name]=\"toggleAttr\">\r\n    <lib-keenicon name=\"double-left\" class=\"fs-2 rotate-180\"></lib-keenicon>\r\n  </div>\r\n  <!--end::Sidebar toggle-->\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarLogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-sidebar-logo', template: "<!--begin::Logo image-->\r\n<a routerLink=\"/dashboard\">\r\n  <ng-container *ngIf=\"currentLayoutType === 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default\" />\r\n  </ng-container>\r\n  <ng-container *ngIf=\"currentLayoutType !== 'dark-sidebar'\">\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\" class=\"h-40px app-sidebar-logo-default theme-light-show\" />\r\n    <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo_text.svg\"\r\n      class=\"h-40px app-sidebar-logo-default theme-dark-show\" />\r\n  </ng-container>\r\n\r\n  <img alt=\"Logo\" src=\"./assets/tango/sidemenu-icons/tango_logo.svg\" class=\"h-38px app-sidebar-logo-minimize\" />\r\n</a>\r\n<!--end::Logo image-->\r\n\r\n\r\n<ng-container *ngIf=\"toggleEnabled\">\r\n  <!--begin::Sidebar toggle-->\r\n  <div id=\"kt_app_sidebar_toggle\"\r\n    class=\"app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary body-bg h-30px w-30px position-absolute top-50 start-100 translate-middle rotate d-none\"\r\n    [ngClass]=\"toggleButtonClass\" data-kt-toggle=\"true\" [attr.data-kt-toggle-state]=\"toggleState\"\r\n    data-kt-toggle-target=\"body\" [attr.data-kt-toggle-name]=\"toggleAttr\">\r\n    <lib-keenicon name=\"double-left\" class=\"fs-2 rotate-180\"></lib-keenicon>\r\n  </div>\r\n  <!--end::Sidebar toggle-->\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [{ type: i1.LayoutService }], propDecorators: { toggleButtonClass: [{
+                type: Input
+            }], toggleEnabled: [{
+                type: Input
+            }], toggleType: [{
+                type: Input
+            }], toggleState: [{
+                type: Input
+            }] } });
+
+class SidebarMenuComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarMenuComponent, deps: [], 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 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/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 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 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 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 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 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 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 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 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 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 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 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 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  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->", styles: [""], dependencies: [{ kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 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 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/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 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 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 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 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 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 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 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 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 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 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 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 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  </div>\r\n  <!--end::Menu-->\r\n</div>\r\n<!--end::Menu wrapper-->" }]
         }], ctorParameters: () => [] });
 
+class SidebarFooterComponent {
+    auth;
+    router;
+    isSubMenuActive = false;
+    constructor(auth, router) {
+        this.auth = auth;
+        this.router = router;
+    }
+    ngOnInit() { }
+    toggleMenu() {
+        this.isSubMenuActive = !this.isSubMenuActive;
+    }
+    logout() {
+        this.auth.logout();
+        localStorage.clear();
+        localStorage.clear();
+        this.router.navigate(["/auth/login"]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarFooterComponent, deps: [{ token: i1$2.AuthService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SidebarFooterComponent, selector: "lib-sidebar-footer", ngImport: i0, template: "<!-- <div class=\"dropdown \">\r\n  <button  class=\"btn dropdown-toggle btn-flex flex-center btn-custom  overflow-hidden text-nowrap px-0 h-40px w-100\" type=\"button\" id=\"dropdownMenu1\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\" data-bs-toggle=\"tooltip\" data-bs-trigger=\"hover\" data-bs-dismiss=\"click\" title=\"Metronic Docs & Components\">\r\n    <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n    <span class=\"btn-label caret\">\r\n      Olivia Rhye<br>\r\n      oliviatangoeye.com\r\n    </span>\r\n  </button>\r\n  <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu1\">\r\n    <li><a href=\"#\">Action</a></li>\r\n    <li><a href=\"#\">Another action</a></li>\r\n    <li><a href=\"#\">Something else here</a></li>\r\n    <li><a href=\"#\">Separated link</a></li>\r\n  </ul>\r\n</div> -->\r\n<div id=\"kt_app_sidebar_menu_scroll\"  class=\"\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\" (click)=\"logout()\"\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 class=\"menu-item menu-accordion w-100 px-3\" [ngClass]=\"{'active': isSubMenuActive}\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\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\">Tango Revop</span> -->\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <!-- <div class=\"menu-sub menu-sub-accordion w-100\"  [ngClass]=\"{'menu-sub-top': isSubMenuActive}\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item px-3 border-profile-first\">\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 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\" fill=\"#98A2B3\"/>\r\n              <path 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\" 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\" 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\" fill=\"#D0D5DD\"/>\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" 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 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\" 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\" 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\r\n", 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$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+}
+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=\"dropdown \">\r\n  <button  class=\"btn dropdown-toggle btn-flex flex-center btn-custom  overflow-hidden text-nowrap px-0 h-40px w-100\" type=\"button\" id=\"dropdownMenu1\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\" data-bs-toggle=\"tooltip\" data-bs-trigger=\"hover\" data-bs-dismiss=\"click\" title=\"Metronic Docs & Components\">\r\n    <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n    <span class=\"btn-label caret\">\r\n      Olivia Rhye<br>\r\n      oliviatangoeye.com\r\n    </span>\r\n  </button>\r\n  <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu1\">\r\n    <li><a href=\"#\">Action</a></li>\r\n    <li><a href=\"#\">Another action</a></li>\r\n    <li><a href=\"#\">Something else here</a></li>\r\n    <li><a href=\"#\">Separated link</a></li>\r\n  </ul>\r\n</div> -->\r\n<div id=\"kt_app_sidebar_menu_scroll\"  class=\"\" data-kt-scroll=\"true\" data-kt-scroll-activate=\"true\" (click)=\"logout()\"\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 class=\"menu-item menu-accordion w-100 px-3\" [ngClass]=\"{'active': isSubMenuActive}\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\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\">Tango Revop</span> -->\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <!-- <div class=\"menu-sub menu-sub-accordion w-100\"  [ngClass]=\"{'menu-sub-top': isSubMenuActive}\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item px-3 border-profile-first\">\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 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\" fill=\"#98A2B3\"/>\r\n              <path 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\" 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\" 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\" fill=\"#D0D5DD\"/>\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" 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 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\" 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\" 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\r\n", 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: i1$2.AuthService }, { type: i1$1.Router }] });
+
 class SidebarComponent {
     layout;
     unsubscribe = [];
@@ -2096,11 +2754,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.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" }] });
+    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" }] });
 }
 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 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"] }]
         }], ctorParameters: () => [{ type: i1.LayoutService }] });
 
 class LayoutScrollTopComponent {
@@ -2349,363 +3007,132 @@ class LayoutComponent {
                     }
                 }
             }
-        }, 0);
-    }
-    updateFooter(config) {
-        this.appFooterCSSClass = this.layout.getProp('app.footer.class', config);
-        this.appFooterContainer = this.layout.getProp('app.footer.container', config);
-        this.appFooterContainerCSSClass = this.layout.getProp('app.footer.containerClass', config);
-        if (this.appFooterContainer === 'fixed') {
-            this.appFooterContainerCSSClass += ' container-xxl';
-        }
-        else {
-            if (this.appFooterContainer === 'fluid') {
-                this.appFooterContainerCSSClass += ' container-fluid';
-            }
-        }
-        this.appFooterFixedDesktop = this.layout.getProp('app.footer.fixed.desktop', config);
-        if (this.appFooterFixedDesktop) {
-            document.body.setAttribute('data-kt-app-footer-fixed', 'true');
-        }
-        this.appFooterFixedMobile = this.layout.getProp('app.footer.fixed.mobile');
-        if (this.appFooterFixedMobile) {
-            document.body.setAttribute('data-kt-app-footer-fixed-mobile', 'true');
-        }
-    }
-    updateToolbar(config) {
-        this.appToolbarLayout = this.layout.getProp('app.toolbar.layout', config);
-        this.appToolbarSwapEnabled = this.layout.getProp('app.toolbar.swap.enabled', config);
-        if (this.appToolbarSwapEnabled) {
-            this.appToolbarSwapAttributes = this.layout.getProp('app.toolbar.swap.attributes', config);
-        }
-        this.appToolbarStickyEnabled = this.layout.getProp('app.toolbar.sticky.enabled', config);
-        if (this.appToolbarStickyEnabled) {
-            this.appToolbarStickyAttributes = this.layout.getProp('app.toolbar.sticky.attributes', config);
-        }
-        this.appToolbarCSSClass =
-            this.layout.getProp('app.toolbar.class', config) || '';
-        this.appToolbarMinimizeEnabled = this.layout.getProp('app.toolbar.minimize.enabled', config);
-        if (this.appToolbarMinimizeEnabled) {
-            this.appToolbarMinimizeAttributes = this.layout.getProp('app.toolbar.minimize.attributes', config);
-            this.appToolbarCSSClass += ' app-toolbar-minimize';
-        }
-        setTimeout(() => {
-            const toolbarElement = document.getElementById('kt_app_toolbar');
-            // toolbar
-            if (this.appToolbarDisplay && toolbarElement) {
-                const toolbarAttributes = toolbarElement
-                    .getAttributeNames()
-                    .filter((t) => t.indexOf('data-') > -1);
-                toolbarAttributes.forEach((attr) => toolbarElement.removeAttribute(attr));
-                if (this.appToolbarSwapEnabled) {
-                    for (const key in this.appToolbarSwapAttributes) {
-                        if (this.appToolbarSwapAttributes.hasOwnProperty(key)) {
-                            toolbarElement.setAttribute(key, this.appToolbarSwapAttributes[key]);
-                        }
-                    }
-                }
-                if (this.appToolbarStickyEnabled) {
-                    for (const key in this.appToolbarStickyAttributes) {
-                        if (this.appToolbarStickyAttributes.hasOwnProperty(key)) {
-                            toolbarElement.setAttribute(key, this.appToolbarStickyAttributes[key]);
-                        }
-                    }
-                }
-                if (this.appToolbarMinimizeEnabled) {
-                    for (const key in this.appToolbarMinimizeAttributes) {
-                        if (this.appToolbarMinimizeAttributes.hasOwnProperty(key)) {
-                            toolbarElement.setAttribute(key, this.appToolbarMinimizeAttributes[key]);
-                        }
-                    }
-                }
-            }
-        }, 0);
-    }
-    ngOnDestroy() {
-        this.unsubscribe.forEach((sb) => sb.unsubscribe());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LayoutComponent, deps: [{ token: i1.LayoutInitService }, { token: i1.LayoutService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: LayoutComponent, selector: "lib-layout", viewQueries: [{ propertyName: "ktSidebar", first: true, predicate: ["ktSidebar"], descendants: true, static: true }, { propertyName: "ktAside", first: true, predicate: ["ktAside"], descendants: true, static: true }, { propertyName: "ktHeaderMobile", first: true, predicate: ["ktHeaderMobile"], descendants: true, static: true }, { propertyName: "ktHeader", first: true, predicate: ["ktHeader"], descendants: true, static: true }], ngImport: i0, template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <ng-container *ngIf=\"appToolbarDisplay\">\r\n          <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n            [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n        </ng-container>\r\n        <div class=\"d-flex flex-column flex-column-fluid mt-15\">\r\n        \r\n          <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <!-- <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container> -->\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "lib-header" }, { kind: "component", type: ContentComponent, selector: "lib-content", inputs: ["contentContainerCSSClass", "appContentContiner", "appContentContainerClass"] }, { kind: "component", type: ScriptsInitComponent, selector: "lib-scripts-init" }, { kind: "component", type: ToolbarComponent, selector: "lib-toolbar", inputs: ["currentLayoutType", "appToolbarLayout"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar" }, { kind: "component", type: LayoutScrollTopComponent, selector: "lib-scroll-top" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-layout', template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <ng-container *ngIf=\"appToolbarDisplay\">\r\n          <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n            [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n        </ng-container>\r\n        <div class=\"d-flex flex-column flex-column-fluid mt-15\">\r\n        \r\n          <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <!-- <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container> -->\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"] }]
-        }], ctorParameters: () => [{ type: i1.LayoutInitService }, { type: i1.LayoutService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { ktSidebar: [{
-                type: ViewChild,
-                args: ['ktSidebar', { static: true }]
-            }], ktAside: [{
-                type: ViewChild,
-                args: ['ktAside', { static: true }]
-            }], ktHeaderMobile: [{
-                type: ViewChild,
-                args: ['ktHeaderMobile', { static: true }]
-            }], ktHeader: [{
-                type: ViewChild,
-                args: ['ktHeader', { static: true }]
-            }] } });
-
-class FooterComponent {
-    appFooterContainerCSSClass = '';
-    currentDateStr = new Date().getFullYear().toString();
-    constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FooterComponent, selector: "lib-footer", inputs: { appFooterContainerCSSClass: "appFooterContainerCSSClass" }, ngImport: i0, template: "<ng-container *ngIf=\"appFooterContainerCSSClass\">\r\n  <!--begin::Footer container-->\r\n  <div class=\"app-container\" [ngClass]=\"appFooterContainerCSSClass\">\r\n    <ng-container *ngTemplateOutlet=\"footerView\"></ng-container>\r\n  </div>\r\n  <!--end::Footer container-->\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!appFooterContainerCSSClass\">\r\n  <ng-container *ngTemplateOutlet=\"footerView\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #footerView>\r\n  <!--begin::Copyright-->\r\n  <div class=\"text-gray-900 order-2 order-md-1\">\r\n    <span class=\"text-muted fw-semibold me-1\">{{currentDateStr}}&copy;</span>\r\n    <a href=\"https://keenthemes.com/\" target=\"_blank\" class=\"text-gray-800 text-hover-primary\">Keenthemes</a>\r\n  </div>\r\n  <!--end::Copyright-->\r\n\r\n  <!--begin::Menu-->\r\n  <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1\">\r\n    <li class=\"menu-item\"><a href=\"https://keenthemes.com/\" target=\"_blank\" class=\"menu-link px-2\">About</a></li>\r\n\r\n    <li class=\"menu-item\"><a href=\"https://devs.keenthemes.com/\" target=\"_blank\" class=\"menu-link px-2\">Support</a></li>\r\n\r\n    <li class=\"menu-item\"><a href=\"https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469\"\r\n        target=\"_blank\" class=\"menu-link px-2\">Purchase</a></li>\r\n  </ul>\r\n  <!--end::Menu-->\r\n\r\n</ng-template>\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-footer', template: "<ng-container *ngIf=\"appFooterContainerCSSClass\">\r\n  <!--begin::Footer container-->\r\n  <div class=\"app-container\" [ngClass]=\"appFooterContainerCSSClass\">\r\n    <ng-container *ngTemplateOutlet=\"footerView\"></ng-container>\r\n  </div>\r\n  <!--end::Footer container-->\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!appFooterContainerCSSClass\">\r\n  <ng-container *ngTemplateOutlet=\"footerView\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #footerView>\r\n  <!--begin::Copyright-->\r\n  <div class=\"text-gray-900 order-2 order-md-1\">\r\n    <span class=\"text-muted fw-semibold me-1\">{{currentDateStr}}&copy;</span>\r\n    <a href=\"https://keenthemes.com/\" target=\"_blank\" class=\"text-gray-800 text-hover-primary\">Keenthemes</a>\r\n  </div>\r\n  <!--end::Copyright-->\r\n\r\n  <!--begin::Menu-->\r\n  <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1\">\r\n    <li class=\"menu-item\"><a href=\"https://keenthemes.com/\" target=\"_blank\" class=\"menu-link px-2\">About</a></li>\r\n\r\n    <li class=\"menu-item\"><a href=\"https://devs.keenthemes.com/\" target=\"_blank\" class=\"menu-link px-2\">Support</a></li>\r\n\r\n    <li class=\"menu-item\"><a href=\"https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469\"\r\n        target=\"_blank\" class=\"menu-link px-2\">Purchase</a></li>\r\n  </ul>\r\n  <!--end::Menu-->\r\n\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { appFooterContainerCSSClass: [{
-                type: Input
-            }] } });
-
-class SidebarFooterComponent {
-    isSubMenuActive = false;
-    constructor() { }
-    ngOnInit() {
-    }
-    toggleMenu() {
-        this.isSubMenuActive = !this.isSubMenuActive;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SidebarFooterComponent, selector: "lib-sidebar-footer", ngImport: i0, template: "<!-- <div class=\"dropdown \">\r\n  <button  class=\"btn dropdown-toggle btn-flex flex-center btn-custom  overflow-hidden text-nowrap px-0 h-40px w-100\" type=\"button\" id=\"dropdownMenu1\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\" data-bs-toggle=\"tooltip\" data-bs-trigger=\"hover\" data-bs-dismiss=\"click\" title=\"Metronic Docs & Components\">\r\n    <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n    <span class=\"btn-label caret\">\r\n      Olivia Rhye<br>\r\n      oliviatangoeye.com\r\n    </span>\r\n  </button>\r\n  <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu1\">\r\n    <li><a href=\"#\">Action</a></li>\r\n    <li><a href=\"#\">Another action</a></li>\r\n    <li><a href=\"#\">Something else here</a></li>\r\n    <li><a href=\"#\">Separated link</a></li>\r\n  </ul>\r\n</div> -->\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  <!--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 class=\"menu-item menu-accordion w-100 px-3\" [ngClass]=\"{'active': isSubMenuActive}\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\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\">Tango Revop</span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion w-100\"  [ngClass]=\"{'menu-sub-top': isSubMenuActive}\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item px-3 border-profile-first\">\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 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\" fill=\"#98A2B3\"/>\r\n              <path 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\" 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\" 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\" fill=\"#D0D5DD\"/>\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" 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\" 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 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\" 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\" 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\r\n", 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$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
-}
-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=\"dropdown \">\r\n  <button  class=\"btn dropdown-toggle btn-flex flex-center btn-custom  overflow-hidden text-nowrap px-0 h-40px w-100\" type=\"button\" id=\"dropdownMenu1\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"true\" data-bs-toggle=\"tooltip\" data-bs-trigger=\"hover\" data-bs-dismiss=\"click\" title=\"Metronic Docs & Components\">\r\n    <img src=\"./assets/tango/Icons/Avatar.svg\">\r\n    <span class=\"btn-label caret\">\r\n      Olivia Rhye<br>\r\n      oliviatangoeye.com\r\n    </span>\r\n  </button>\r\n  <ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenu1\">\r\n    <li><a href=\"#\">Action</a></li>\r\n    <li><a href=\"#\">Another action</a></li>\r\n    <li><a href=\"#\">Something else here</a></li>\r\n    <li><a href=\"#\">Separated link</a></li>\r\n  </ul>\r\n</div> -->\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  <!--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 class=\"menu-item menu-accordion w-100 px-3\" [ngClass]=\"{'active': isSubMenuActive}\" data-kt-menu-trigger=\"click\" routerLinkActive=\"here show\">\r\n      <span class=\"menu-link\">\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\">Tango Revop</span>\r\n        <span class=\"menu-arrow\"></span>\r\n      </span>\r\n      <div class=\"menu-sub menu-sub-accordion w-100\"  [ngClass]=\"{'menu-sub-top': isSubMenuActive}\" routerLinkActive=\"menu-active-bg\">\r\n        <div class=\"menu-item px-3 border-profile-first\">\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 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\" fill=\"#98A2B3\"/>\r\n              <path 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\" 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\" 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\" fill=\"#D0D5DD\"/>\r\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" 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\" 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\" 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 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\" 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\" 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\r\n", 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: () => [] });
-
-class AccountingComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccountingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AccountingComponent, selector: "lib-accounting", ngImport: i0, template: "<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Actions:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex flex-shrink-0\">\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Add a team member\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"plus-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Create new account\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"gen037.svg\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite friends\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"dots-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Input group-->\r\n\r\n<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Desktop separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Desktop separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block\">Progress:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success\">\r\n    <div class=\"progress-bar rounded bg-success fs-7 fw-bold\" role=\"progressbar\" style=\"width: 72%;\" aria-valuenow=\"72\"\r\n      aria-valuemin=\"0\" aria-valuemax=\"100\">72%</div>\r\n  </div>\r\n</div>\r\n<!--end::Input group-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Input group-->\r\n  <div class=\"me-3\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid\" data-control=\"select2\" data-placeholder=\"Latest\"\r\n      data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Today 16 Feb</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Select-->\r\n  </div>\r\n  <!--end::Input group--->\r\n\r\n  <!--begin::Input group--->\r\n  <div class=\"m-0\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid w-md-125px\" data-control=\"select2\"\r\n      data-placeholder=\"Filters\" data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Filters</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Content-->\r\n  </div>\r\n  <!--end::Input group--->\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccountingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-accounting', template: "<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Actions:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex flex-shrink-0\">\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Add a team member\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"plus-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Create new account\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"gen037.svg\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite friends\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"dots-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Input group-->\r\n\r\n<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Desktop separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Desktop separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block\">Progress:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success\">\r\n    <div class=\"progress-bar rounded bg-success fs-7 fw-bold\" role=\"progressbar\" style=\"width: 72%;\" aria-valuenow=\"72\"\r\n      aria-valuemin=\"0\" aria-valuemax=\"100\">72%</div>\r\n  </div>\r\n</div>\r\n<!--end::Input group-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Input group-->\r\n  <div class=\"me-3\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid\" data-control=\"select2\" data-placeholder=\"Latest\"\r\n      data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Today 16 Feb</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Select-->\r\n  </div>\r\n  <!--end::Input group--->\r\n\r\n  <!--begin::Input group--->\r\n  <div class=\"m-0\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid w-md-125px\" data-control=\"select2\"\r\n      data-placeholder=\"Filters\" data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Filters</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Content-->\r\n  </div>\r\n  <!--end::Input group--->\r\n</div>\r\n" }]
-        }], ctorParameters: () => [] });
-
-class GlobalStateService {
-    userData = new BehaviorSubject(null);
-    environment = new BehaviorSubject(null);
-    dataRangeValue = new BehaviorSubject(null);
-    selectedClient = new BehaviorSubject(null);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class AuthService {
-    router;
-    gs;
-    http;
-    clientApiUrl;
-    constructor(router, gs, http) {
-        this.router = router;
-        this.gs = gs;
-        this.http = http;
-        this.gs.environment.subscribe((env) => {
-            if (env) {
-                this.clientApiUrl = env.clientApiUrl;
-            }
-        });
-    }
-    handleError(res) {
-        return throwError(res.error);
-    }
-    logout() {
-        this.router.navigate(['/auth/login'], {
-            queryParams: {},
-        });
-    }
-    getClients() {
-        return this.http.get(`${this.clientApiUrl}/get-clients`, {})
-            .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$1.Router }, { token: GlobalStateService }, { token: i3$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: GlobalStateService }, { type: i3$2.HttpClient }] });
-
-class CustomSelectComponent {
-    cd;
-    onClick(event) {
-        const target = event.target;
-        if (!target.closest('.dropdown')) {
-            this.showDropdown = false;
-        }
-    }
-    items;
-    searchField;
-    multi;
-    idField;
-    selectedValues = [];
-    disabled;
-    label;
-    selected = new EventEmitter();
-    filteredValues = [];
-    showDropdown;
-    searchValue;
-    constructor(cd) {
-        this.cd = cd;
-    }
-    ngOnChanges(changes) {
-        if (changes['items'] && this.items?.length) {
-            this.initializeItems();
-        }
-        if (changes['selectedValues'] && this.selectedValues?.length) {
-            this.updateSelectedValues();
-        }
-    }
-    initializeItems() {
-        this.filteredValues = this.items.map((item) => ({ ...item }));
-        this.updateSelectedValues();
-    }
-    updateSelectedValues() {
-        this.selectedValues?.forEach((selectedItem) => {
-            const item = this.filteredValues?.find((filteredItem) => filteredItem?.[this.idField] === selectedItem?.[this.idField]);
-            if (item) {
-                item.isSelected = true;
-            }
-        });
-    }
-    openDropdown(event) {
-        event.stopPropagation();
-        this.showDropdown = !this.showDropdown;
+        }, 0);
     }
-    onInput(event) {
-        if (!event.target.value) {
-            this.filteredValues = [...this.items];
+    updateFooter(config) {
+        this.appFooterCSSClass = this.layout.getProp('app.footer.class', config);
+        this.appFooterContainer = this.layout.getProp('app.footer.container', config);
+        this.appFooterContainerCSSClass = this.layout.getProp('app.footer.containerClass', config);
+        if (this.appFooterContainer === 'fixed') {
+            this.appFooterContainerCSSClass += ' container-xxl';
         }
         else {
-            const searchTerm = event.target.value.toLowerCase();
-            this.filteredValues = this.items.filter((item) => item[this.searchField].toLowerCase().includes(searchTerm));
-        }
-        this.cd.detectChanges();
-    }
-    onSelect(event, item) {
-        if (this.multi) {
-            if (event.currentTarget.checked) {
-                this.selectedValues.push({ ...item });
-            }
-            else {
-                this.selectedValues = this.selectedValues.filter((elem) => elem[this.idField] !== item[this.idField]);
+            if (this.appFooterContainer === 'fluid') {
+                this.appFooterContainerCSSClass += ' container-fluid';
             }
         }
-        else {
-            this.selectedValues = [{ ...item }];
-            this.showDropdown = false;
-        }
-        const valuesToEmit = this.selectedValues.map((value) => {
-            const { isSelected, ...selectedItem } = value;
-            return selectedItem;
-        });
-        this.cd.detectChanges();
-        this.emitSelectedValues(valuesToEmit);
-    }
-    onSelectAll(event) {
-        const selectAll = event.currentTarget.checked;
-        this.filteredValues.forEach((item) => item.isSelected = selectAll);
-        if (selectAll) {
-            this.selectedValues = [...this.filteredValues];
+        this.appFooterFixedDesktop = this.layout.getProp('app.footer.fixed.desktop', config);
+        if (this.appFooterFixedDesktop) {
+            document.body.setAttribute('data-kt-app-footer-fixed', 'true');
         }
-        else {
-            this.selectedValues = [];
+        this.appFooterFixedMobile = this.layout.getProp('app.footer.fixed.mobile');
+        if (this.appFooterFixedMobile) {
+            document.body.setAttribute('data-kt-app-footer-fixed-mobile', 'true');
         }
-        const valuesToEmit = this.selectedValues.map((value) => {
-            const { isSelected, ...selectedItem } = value;
-            return selectedItem;
-        });
-        this.cd.detectChanges();
-        this.emitSelectedValues(valuesToEmit);
     }
-    emitSelectedValues(values) {
-        if (this.multi) {
-            this.selected.emit(values);
+    updateToolbar(config) {
+        this.appToolbarLayout = this.layout.getProp('app.toolbar.layout', config);
+        this.appToolbarSwapEnabled = this.layout.getProp('app.toolbar.swap.enabled', config);
+        if (this.appToolbarSwapEnabled) {
+            this.appToolbarSwapAttributes = this.layout.getProp('app.toolbar.swap.attributes', config);
         }
-        else {
-            this.selected.emit(values[0]);
+        this.appToolbarStickyEnabled = this.layout.getProp('app.toolbar.sticky.enabled', config);
+        if (this.appToolbarStickyEnabled) {
+            this.appToolbarStickyAttributes = this.layout.getProp('app.toolbar.sticky.attributes', config);
         }
+        this.appToolbarCSSClass =
+            this.layout.getProp('app.toolbar.class', config) || '';
+        this.appToolbarMinimizeEnabled = this.layout.getProp('app.toolbar.minimize.enabled', config);
+        if (this.appToolbarMinimizeEnabled) {
+            this.appToolbarMinimizeAttributes = this.layout.getProp('app.toolbar.minimize.attributes', config);
+            this.appToolbarCSSClass += ' app-toolbar-minimize';
+        }
+        setTimeout(() => {
+            const toolbarElement = document.getElementById('kt_app_toolbar');
+            // toolbar
+            if (this.appToolbarDisplay && toolbarElement) {
+                const toolbarAttributes = toolbarElement
+                    .getAttributeNames()
+                    .filter((t) => t.indexOf('data-') > -1);
+                toolbarAttributes.forEach((attr) => toolbarElement.removeAttribute(attr));
+                if (this.appToolbarSwapEnabled) {
+                    for (const key in this.appToolbarSwapAttributes) {
+                        if (this.appToolbarSwapAttributes.hasOwnProperty(key)) {
+                            toolbarElement.setAttribute(key, this.appToolbarSwapAttributes[key]);
+                        }
+                    }
+                }
+                if (this.appToolbarStickyEnabled) {
+                    for (const key in this.appToolbarStickyAttributes) {
+                        if (this.appToolbarStickyAttributes.hasOwnProperty(key)) {
+                            toolbarElement.setAttribute(key, this.appToolbarStickyAttributes[key]);
+                        }
+                    }
+                }
+                if (this.appToolbarMinimizeEnabled) {
+                    for (const key in this.appToolbarMinimizeAttributes) {
+                        if (this.appToolbarMinimizeAttributes.hasOwnProperty(key)) {
+                            toolbarElement.setAttribute(key, this.appToolbarMinimizeAttributes[key]);
+                        }
+                    }
+                }
+            }
+        }, 0);
     }
-    checkIfAllSelected() {
-        return this.filteredValues.every((item) => item.isSelected);
+    ngOnDestroy() {
+        this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: CustomSelectComponent, selector: "lib-select", inputs: { items: "items", searchField: "searchField", multi: "multi", idField: "idField", selectedValues: "selectedValues", disabled: "disabled", label: "label" }, outputs: { selected: "selected" }, host: { listeners: { "document:click": "onClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    {{selectedValues?.length}} {{label}} Selected    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" 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        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi\">\r\n                <div   class=\"form-check\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                        id=\"selectAll\">\r\n                    <label class=\"form-check-label\" for=\"selectAll\">\r\n                        Select All\r\n                    </label>\r\n                </div>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues; let i = index\" >\r\n                <div [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"i\">\r\n                    <label class=\"form-check-label\" [for]=\"i\">\r\n                        {{item[searchField]}}\r\n                    </label>\r\n                </div>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n    \r\n</div>\r\n    ", styles: [":host{width:100%;height:100%}.outer-container{z-index:1;position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:200px;overflow-y:scroll;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul li{list-style:none;padding:10px 16px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LayoutComponent, deps: [{ token: i1.LayoutInitService }, { token: i1.LayoutService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: LayoutComponent, selector: "lib-layout", viewQueries: [{ propertyName: "ktSidebar", first: true, predicate: ["ktSidebar"], descendants: true, static: true }, { propertyName: "ktAside", first: true, predicate: ["ktAside"], descendants: true, static: true }, { propertyName: "ktHeaderMobile", first: true, predicate: ["ktHeaderMobile"], descendants: true, static: true }, { propertyName: "ktHeader", first: true, predicate: ["ktHeader"], descendants: true, static: true }], ngImport: i0, template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <ng-container *ngIf=\"appToolbarDisplay\">\r\n          <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n            [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n        </ng-container>\r\n        <div class=\"d-flex flex-column flex-column-fluid mt-15\">\r\n        \r\n          <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <!-- <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container> -->\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "lib-header" }, { kind: "component", type: ContentComponent, selector: "lib-content", inputs: ["contentContainerCSSClass", "appContentContiner", "appContentContainerClass"] }, { kind: "component", type: ScriptsInitComponent, selector: "lib-scripts-init" }, { kind: "component", type: ToolbarComponent, selector: "lib-toolbar", inputs: ["currentLayoutType", "appToolbarLayout"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar" }, { kind: "component", type: LayoutScrollTopComponent, selector: "lib-scroll-top" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: CustomSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"outer-container\">\r\n    <div [ngClass]=\"disabled ? 'disable-input':''\"  (click)=\"openDropdown($event)\"  class=\"form-select\">\r\n    <ng-container *ngIf=\"multi\" >\r\n    {{selectedValues?.length}} {{label}} Selected    \r\n    </ng-container>\r\n    <ng-container *ngIf=\"!multi\" >\r\n        {{selectedValues?.[0]?.[searchField]}}\r\n    </ng-container>\r\n    </div>\r\n    <div [ngClass]=\"showDropdown ? '' : 'd-none'\" class=\"input-container dropdown\" >\r\n        <div class=\"w-100 input-wrapper\">\r\n        <input [(ngModel)]=\"searchValue\" placeholder=\"Search\"  (input)=\"onInput($event)\" type=\"text\">  \r\n        <svg class=\"search-icon\" 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        </div>\r\n        <ul>\r\n            <li *ngIf=\"multi\">\r\n                <div   class=\"form-check\">\r\n                    <input (change)=\"onSelectAll($event)\" [checked]=\"checkIfAllSelected()\" class=\"form-check-input me-3\" type=\"checkbox\"\r\n                        id=\"selectAll\">\r\n                    <label class=\"form-check-label\" for=\"selectAll\">\r\n                        Select All\r\n                    </label>\r\n                </div>\r\n            </li>\r\n            <li *ngFor=\"let item of filteredValues; let i = index\" >\r\n                <div [ngClass]=\"multi  ? '': 'ps-0'\" class=\"form-check\">\r\n                    <input [ngClass]=\"multi  ? '': 'd-none'\" (change)=\"onSelect($event, item)\" [(ngModel)]=\"item.isSelected\" class=\"form-check-input me-3\" type=\"checkbox\" value=\"\"\r\n                        [id]=\"i\">\r\n                    <label class=\"form-check-label\" [for]=\"i\">\r\n                        {{item[searchField]}}\r\n                    </label>\r\n                </div>\r\n            </li>\r\n        </ul>  \r\n    </div>  \r\n    \r\n</div>\r\n    ", styles: [":host{width:100%;height:100%}.outer-container{z-index:1;position:relative;background-color:#fff}.outer-container .form-select{font-size:1.1rem;font-weight:400;border-radius:8px!important;color:var(--Gray-500, #667085);border:1px solid var(--Gray-300, #D0D5DD)!important;height:45px}.outer-container .disable-input{pointer-events:none;background-color:#f9fafb!important}.outer-container .input-container{position:absolute;width:100%}.outer-container .input-container .input-wrapper{padding:8px 10px;background-color:#fff;border-top-right-radius:8px;border-top-left-radius:8px;border-top:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container .input-wrapper input{width:100%;border-radius:8px;border:1px solid var(--Gray-300, #D0D5DD);background:var(--White, #FFF);box-shadow:0 1px 2px #1018280d;padding:10px 14px 10px 30px;outline:none}.outer-container .input-container .input-wrapper input ::placeholder{color:var(--Gray-500, #667085);font-family:Inter;font-size:14px;font-weight:500;line-height:20px}.outer-container .input-container .input-wrapper .search-icon{position:absolute;left:20px;top:20px}.outer-container .input-container ul{position:relative;background-color:#fff;margin:0;padding:0;max-height:200px;min-height:200px;overflow-y:scroll;border-bottom-right-radius:8px;border-bottom-left-radius:8px;border-bottom:1px solid rgba(16,24,40,.08);border-right:1px solid rgba(16,24,40,.08);border-left:1px solid rgba(16,24,40,.08)}.outer-container .input-container ul li{list-style:none;padding:10px 16px}.form-check{display:flex;align-items:center}.form-check-input{height:16px;width:16px;border-radius:4px;border:1px solid var(--Primary-600, #00A3FF)}.form-check-input:checked{--bs-form-check-bg-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=);background-color:#eaf8ff;border-color:#00a3ff}.form-check-label{color:var(--Gray-700, #344054);font-family:Inter;font-size:14px;font-style:normal;font-weight:500;line-height:20px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], items: [{
-                type: Input
-            }], searchField: [{
-                type: Input
-            }], multi: [{
-                type: Input
-            }], idField: [{
-                type: Input
-            }], selectedValues: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], label: [{
+            args: [{ selector: 'lib-layout', template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <ng-container *ngIf=\"appToolbarDisplay\">\r\n          <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n            [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n        </ng-container>\r\n        <div class=\"d-flex flex-column flex-column-fluid mt-15\">\r\n        \r\n          <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <!-- <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container> -->\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"] }]
+        }], ctorParameters: () => [{ type: i1.LayoutInitService }, { type: i1.LayoutService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { ktSidebar: [{
+                type: ViewChild,
+                args: ['ktSidebar', { static: true }]
+            }], ktAside: [{
+                type: ViewChild,
+                args: ['ktAside', { static: true }]
+            }], ktHeaderMobile: [{
+                type: ViewChild,
+                args: ['ktHeaderMobile', { static: true }]
+            }], ktHeader: [{
+                type: ViewChild,
+                args: ['ktHeader', { static: true }]
+            }] } });
+
+class FooterComponent {
+    appFooterContainerCSSClass = '';
+    currentDateStr = new Date().getFullYear().toString();
+    constructor() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: FooterComponent, selector: "lib-footer", inputs: { appFooterContainerCSSClass: "appFooterContainerCSSClass" }, ngImport: i0, template: "<ng-container *ngIf=\"appFooterContainerCSSClass\">\r\n  <!--begin::Footer container-->\r\n  <div class=\"app-container\" [ngClass]=\"appFooterContainerCSSClass\">\r\n    <ng-container *ngTemplateOutlet=\"footerView\"></ng-container>\r\n  </div>\r\n  <!--end::Footer container-->\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!appFooterContainerCSSClass\">\r\n  <ng-container *ngTemplateOutlet=\"footerView\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #footerView>\r\n  <!--begin::Copyright-->\r\n  <div class=\"text-gray-900 order-2 order-md-1\">\r\n    <span class=\"text-muted fw-semibold me-1\">{{currentDateStr}}&copy;</span>\r\n    <a href=\"https://keenthemes.com/\" target=\"_blank\" class=\"text-gray-800 text-hover-primary\">Keenthemes</a>\r\n  </div>\r\n  <!--end::Copyright-->\r\n\r\n  <!--begin::Menu-->\r\n  <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1\">\r\n    <li class=\"menu-item\"><a href=\"https://keenthemes.com/\" target=\"_blank\" class=\"menu-link px-2\">About</a></li>\r\n\r\n    <li class=\"menu-item\"><a href=\"https://devs.keenthemes.com/\" target=\"_blank\" class=\"menu-link px-2\">Support</a></li>\r\n\r\n    <li class=\"menu-item\"><a href=\"https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469\"\r\n        target=\"_blank\" class=\"menu-link px-2\">Purchase</a></li>\r\n  </ul>\r\n  <!--end::Menu-->\r\n\r\n</ng-template>\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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-footer', template: "<ng-container *ngIf=\"appFooterContainerCSSClass\">\r\n  <!--begin::Footer container-->\r\n  <div class=\"app-container\" [ngClass]=\"appFooterContainerCSSClass\">\r\n    <ng-container *ngTemplateOutlet=\"footerView\"></ng-container>\r\n  </div>\r\n  <!--end::Footer container-->\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!appFooterContainerCSSClass\">\r\n  <ng-container *ngTemplateOutlet=\"footerView\"></ng-container>\r\n</ng-container>\r\n\r\n<ng-template #footerView>\r\n  <!--begin::Copyright-->\r\n  <div class=\"text-gray-900 order-2 order-md-1\">\r\n    <span class=\"text-muted fw-semibold me-1\">{{currentDateStr}}&copy;</span>\r\n    <a href=\"https://keenthemes.com/\" target=\"_blank\" class=\"text-gray-800 text-hover-primary\">Keenthemes</a>\r\n  </div>\r\n  <!--end::Copyright-->\r\n\r\n  <!--begin::Menu-->\r\n  <ul class=\"menu menu-gray-600 menu-hover-primary fw-semibold order-1\">\r\n    <li class=\"menu-item\"><a href=\"https://keenthemes.com/\" target=\"_blank\" class=\"menu-link px-2\">About</a></li>\r\n\r\n    <li class=\"menu-item\"><a href=\"https://devs.keenthemes.com/\" target=\"_blank\" class=\"menu-link px-2\">Support</a></li>\r\n\r\n    <li class=\"menu-item\"><a href=\"https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469\"\r\n        target=\"_blank\" class=\"menu-link px-2\">Purchase</a></li>\r\n  </ul>\r\n  <!--end::Menu-->\r\n\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { appFooterContainerCSSClass: [{
                 type: Input
-            }], selected: [{
-                type: Output
             }] } });
 
-class ClientSettingsComponent {
-    auth;
-    gs;
-    cd;
-    clientList = [];
-    selectedClient;
-    constructor(auth, gs, cd) {
-        this.auth = auth;
-        this.gs = gs;
-        this.cd = cd;
-        this.auth.getClients().subscribe({
-            next: (e) => {
-                if (e) {
-                    this.clientList = e.data.result;
-                    this.selectedClient = this.clientList[0];
-                    this.gs.selectedClient.next(this.selectedClient);
-                    this.cd.detectChanges();
-                }
-            }
-        });
-    }
-    onClientSelect(event) {
-        this.selectedClient = event;
-        this.gs.selectedClient.next(this.selectedClient);
+class AccountingComponent {
+    constructor() { }
+    ngOnInit() {
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClientSettingsComponent, deps: [{ token: AuthService }, { token: GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ClientSettingsComponent, selector: "lib-client-settings", ngImport: i0, template: "    <div class=\"wrapper\" >\r\n        <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'brandName'\" [disabled]=\"false\" [idField]=\"'_id'\"\r\n            (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n    </div>\r\n", styles: [".wrapper{min-width:200px}\n"], dependencies: [{ kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccountingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: AccountingComponent, selector: "lib-accounting", ngImport: i0, template: "<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Actions:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex flex-shrink-0\">\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Add a team member\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"plus-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Create new account\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"gen037.svg\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite friends\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"dots-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Input group-->\r\n\r\n<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Desktop separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Desktop separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block\">Progress:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success\">\r\n    <div class=\"progress-bar rounded bg-success fs-7 fw-bold\" role=\"progressbar\" style=\"width: 72%;\" aria-valuenow=\"72\"\r\n      aria-valuemin=\"0\" aria-valuemax=\"100\">72%</div>\r\n  </div>\r\n</div>\r\n<!--end::Input group-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Input group-->\r\n  <div class=\"me-3\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid\" data-control=\"select2\" data-placeholder=\"Latest\"\r\n      data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Today 16 Feb</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Select-->\r\n  </div>\r\n  <!--end::Input group--->\r\n\r\n  <!--begin::Input group--->\r\n  <div class=\"m-0\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid w-md-125px\" data-control=\"select2\"\r\n      data-placeholder=\"Filters\" data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Filters</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Content-->\r\n  </div>\r\n  <!--end::Input group--->\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ClientSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AccountingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-client-settings', template: "    <div class=\"wrapper\" >\r\n        <lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'brandName'\" [disabled]=\"false\" [idField]=\"'_id'\"\r\n            (selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n    </div>\r\n", styles: [".wrapper{min-width:200px}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }, { type: GlobalStateService }, { type: i0.ChangeDetectorRef }] });
+            args: [{ selector: 'lib-accounting', template: "<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Actions:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex flex-shrink-0\">\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Add a team member\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"plus-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Create new account\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"gen037.svg\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n\r\n    <!--begin::Button-->\r\n    <div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite friends\">\r\n      <a href=\"#\" class=\"btn btn-sm btn-icon btn-active-color-success\">\r\n        <lib-keenicon name=\"dots-square\" class=\"fs-2x\"></lib-keenicon>\r\n      </a>\r\n    </div>\r\n    <!--end::Button-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Input group-->\r\n\r\n<!--begin::Input group-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Desktop separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Desktop separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-4 ps-1 d-none d-md-block\">Progress:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"progress w-100px w-xl-150px w-xxl-300px h-25px bg-light-success\">\r\n    <div class=\"progress-bar rounded bg-success fs-7 fw-bold\" role=\"progressbar\" style=\"width: 72%;\" aria-valuenow=\"72\"\r\n      aria-valuemin=\"0\" aria-valuemax=\"100\">72%</div>\r\n  </div>\r\n</div>\r\n<!--end::Input group-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Input group-->\r\n  <div class=\"me-3\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid\" data-control=\"select2\" data-placeholder=\"Latest\"\r\n      data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Today 16 Feb</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Select-->\r\n  </div>\r\n  <!--end::Input group--->\r\n\r\n  <!--begin::Input group--->\r\n  <div class=\"m-0\">\r\n    <!--begin::Select-->\r\n    <select class=\"form-select form-select-sm form-select-solid w-md-125px\" data-control=\"select2\"\r\n      data-placeholder=\"Filters\" data-hide-search=\"true\">\r\n      <option value=\"\"></option>\r\n      <option value=\"1\" selected>Filters</option>\r\n      <option value=\"2\">In Progress</option>\r\n      <option value=\"3\">Done</option>\r\n    </select>\r\n    <!--end::Content-->\r\n  </div>\r\n  <!--end::Input group--->\r\n</div>\r\n" }]
+        }], ctorParameters: () => [] });
 
 class ExtendedComponent {
     constructor() { }
     ngOnInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ExtendedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ExtendedComponent, selector: "lib-extended", ngImport: i0, template: "<!--begin::Label-->\r\n<span class=\"fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block\">Team:</span>\r\n<!--end::Label-->\r\n\r\n<!--begin::Users-->\r\n<div class=\"symbol-group symbol-hover flex-shrink-0 me-2\">\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-warning text-inverse-warning\">A</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-1.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-2.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-primary text-inverse-primary\">S</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-5.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-danger text-inverse-danger\">P</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-20.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n</div>\r\n<!--end::Users-->\r\n\r\n<!--begin::Button-->\r\n<div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite a team member\">\r\n  <a href=\"#\" class=\"btn btn-sm btn-icon\">\r\n    <lib-keenicon name=\"plus-square\" class=\"fs-2hx text-success\"></lib-keenicon>\r\n  </a>\r\n</div>\r\n<!--end::Button-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center overflow-auto\">\r\n  <!--begin::Search-->\r\n  <div class=\"position-relative my-1\">\r\n    <lib-keenicon name=\"magnifier\" class=\"fs-3 text-gray500 position-absolute top-50 translate-middle ps-10\"></lib-keenicon>\r\n    <input type=\"text\" class=\"form-control form-control-sm form-control-solid w-150px ps-10\" name=\"Search Team\" value=\"\"\r\n      placeholder=\"Search Team\" />\r\n  </div>\r\n  <!--end::Search-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-6\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-125px form-select-solid me-6\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-3 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"row-horizontal\" class=\"fs-3 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ExtendedComponent, selector: "lib-extended", ngImport: i0, template: "<!--begin::Label-->\r\n<span class=\"fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block\">Team:</span>\r\n<!--end::Label-->\r\n\r\n<!--begin::Users-->\r\n<div class=\"symbol-group symbol-hover flex-shrink-0 me-2\">\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-warning text-inverse-warning\">A</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-1.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-2.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-primary text-inverse-primary\">S</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-5.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <div class=\"symbol-label fw-bold bg-danger text-inverse-danger\">P</div>\r\n  </div>\r\n  <!--end::User-->\r\n\r\n  <!--begin::User-->\r\n  <div class=\"symbol symbol-circle symbol-35px\">\r\n    <img src=\"./assets/media/avatars/300-20.jpg\" alt=\"\" />\r\n  </div>\r\n  <!--end::User-->\r\n</div>\r\n<!--end::Users-->\r\n\r\n<!--begin::Button-->\r\n<div data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" data-bs-trigger=\"hover\" title=\"Invite a team member\">\r\n  <a href=\"#\" class=\"btn btn-sm btn-icon\">\r\n    <lib-keenicon name=\"plus-square\" class=\"fs-2hx text-success\"></lib-keenicon>\r\n  </a>\r\n</div>\r\n<!--end::Button-->\r\n<!--end::Toolbar start-->\r\n\r\n<!--begin::Toolbar end-->\r\n<div class=\"d-flex align-items-center overflow-auto\">\r\n  <!--begin::Search-->\r\n  <div class=\"position-relative my-1\">\r\n    <lib-keenicon name=\"magnifier\" class=\"fs-3 text-gray500 position-absolute top-50 translate-middle ps-10\"></lib-keenicon>\r\n    <input type=\"text\" class=\"form-control form-control-sm form-control-solid w-150px ps-10\" name=\"Search Team\" value=\"\"\r\n      placeholder=\"Search Team\" />\r\n  </div>\r\n  <!--end::Search-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-6\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-125px form-select-solid me-6\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-3 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"row-horizontal\" class=\"fs-3 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ExtendedComponent, decorators: [{
             type: Component,
@@ -2717,7 +3144,7 @@ class ReportsComponent {
     constructor() { }
     ngOnInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReportsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ReportsComponent, selector: "lib-reports", inputs: { appPageTitleDisplay: "appPageTitleDisplay" }, ngImport: i0, template: "<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Filter By:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"flex-shrink-0 \">\r\n    <ul class=\"nav\">\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light active fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Today</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"\">Week</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Day</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n<!--end::Wrapper-->\r\n\r\n<!--begin::Separartor-->\r\n<div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n<!--end::Separartor-->\r\n\r\n<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-md-125px form-select-solid\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center ms-3\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-2 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"abstract-14\" class=\"fs-2 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Wrapper-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: ReportsComponent, selector: "lib-reports", inputs: { appPageTitleDisplay: "appPageTitleDisplay" }, ngImport: i0, template: "<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center flex-shrink-0\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Filter By:</span>\r\n  <!--end::Label-->\r\n\r\n  <div class=\"flex-shrink-0 \">\r\n    <ul class=\"nav\">\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light active fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Today</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4 me-1\"\r\n          data-bs-toggle=\"tab\" href=\"\">Week</a>\r\n      </li>\r\n\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link btn btn-sm btn-color-muted btn-active-color-primary btn-active-light fw-semibold fs-7 px-4\"\r\n          data-bs-toggle=\"tab\" href=\"#\">Day</a>\r\n      </li>\r\n    </ul>\r\n  </div>\r\n</div>\r\n<!--end::Wrapper-->\r\n\r\n<!--begin::Separartor-->\r\n<div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n<!--end::Separartor-->\r\n\r\n<!--begin::Wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm w-md-125px form-select-solid\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex align-items-center ms-3\">\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light-primary me-3\" data-bs-toggle=\"tooltip\"\r\n      data-bs-placement=\"top\" title=\"Enable grid view\">\r\n      <lib-keenicon name=\"element-11\" class=\"fs-2 text-primary\"></lib-keenicon>\r\n    </button>\r\n\r\n    <button type=\"button\" class=\"btn btn-sm btn-icon btn-light\" data-bs-toggle=\"tooltip\" data-bs-placement=\"top\"\r\n      title=\"Enable row view\">\r\n      <lib-keenicon name=\"abstract-14\" class=\"fs-2 text-gray400\"></lib-keenicon>\r\n    </button>\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Wrapper-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: ReportsComponent, decorators: [{
             type: Component,
@@ -2731,7 +3158,7 @@ class SaasComponent {
     constructor() { }
     ngOnInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SaasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SaasComponent, selector: "lib-saas", inputs: { appPageTitleDisplay: "appPageTitleDisplay" }, ngImport: i0, template: "<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 pe-4 text-nowrap d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm form-select-solid w-100px w-xxl-125px\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold\">Impact Level:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::NoUiSlider-->\r\n  <div class=\"d-flex align-items-center ps-4\">\r\n    <div id=\"kt_app_toolbar_slider\" class=\"noUi-target noUi-target-success w-75px w-xxl-150px noUi-sm\"></div>\r\n\r\n    <span id=\"kt_app_toolbar_slider_value\"\r\n      class=\"d-flex flex-center bg-light-success rounded-circle w-35px h-35px ms-4 fs-7 fw-bold text-success\"\r\n      data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Set impact level\">\r\n    </span>\r\n  </div>\r\n  <!--end::NoUiSlider-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Quick Tools:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex\">\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new page\">\r\n      <lib-keenicon name=\"files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new category\">\r\n      <lib-keenicon name=\"add-files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new section\">\r\n      <lib-keenicon name=\"search-list\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SaasComponent, selector: "lib-saas", inputs: { appPageTitleDisplay: "appPageTitleDisplay" }, ngImport: i0, template: "<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 fw-bold text-gray-700 pe-4 text-nowrap d-none d-md-block\">Sort By:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Select-->\r\n  <select class=\"form-select form-select-sm form-select-solid w-100px w-xxl-125px\" data-control=\"select2\"\r\n    data-placeholder=\"Latest\" data-hide-search=\"true\">\r\n    <option value=\"\"></option>\r\n    <option value=\"1\" selected>Latest</option>\r\n    <option value=\"2\">In Progress</option>\r\n    <option value=\"3\">Done</option>\r\n  </select>\r\n  <!--end::Select-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold\">Impact Level:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::NoUiSlider-->\r\n  <div class=\"d-flex align-items-center ps-4\">\r\n    <div id=\"kt_app_toolbar_slider\" class=\"noUi-target noUi-target-success w-75px w-xxl-150px noUi-sm\"></div>\r\n\r\n    <span id=\"kt_app_toolbar_slider_value\"\r\n      class=\"d-flex flex-center bg-light-success rounded-circle w-35px h-35px ms-4 fs-7 fw-bold text-success\"\r\n      data-bs-toggle=\"tooltip\" data-bs-placement=\"top\" title=\"Set impact level\">\r\n    </span>\r\n  </div>\r\n  <!--end::NoUiSlider-->\r\n\r\n  <!--begin::Separartor-->\r\n  <div class=\"bullet bg-secondary h-35px w-1px mx-5\"></div>\r\n  <!--end::Separartor-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n\r\n<!--begin::Action wrapper-->\r\n<div class=\"d-flex align-items-center\">\r\n  <!--begin::Label-->\r\n  <span class=\"fs-7 text-gray-700 fw-bold pe-3 d-none d-md-block\">Quick Tools:</span>\r\n  <!--end::Label-->\r\n\r\n  <!--begin::Actions-->\r\n  <div class=\"d-flex\">\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new page\">\r\n      <lib-keenicon name=\"files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new category\">\r\n      <lib-keenicon name=\"add-files\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n\r\n    <!--begin::Action-->\r\n    <a href=\"#\" class=\"btn btn-sm btn-icon btn-icon-muted btn-active-icon-success\" data-bs-toggle=\"tooltip\"\r\n      data-bs-trigger=\"hover\" data-bs-placement=\"top\" title=\"Add new section\">\r\n      <lib-keenicon name=\"search-list\" class=\"fs-2x\"></lib-keenicon>\r\n    </a>\r\n    <!--end::Action-->\r\n  </div>\r\n  <!--end::Actions-->\r\n</div>\r\n<!--end::Action wrapper-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: KeeniconComponent, selector: "lib-keenicon", inputs: ["name", "class", "type"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SaasComponent, decorators: [{
             type: Component,
@@ -2873,11 +3300,11 @@ class PaginationComponent {
         this.pageSizeChange.emit(this.pageSize);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PaginationComponent, selector: "lib-pagination", inputs: { collection: "collection", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", directionLinks: "directionLinks", pageSize: "pageSize", paginationSizes: "paginationSizes" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "\r\n<div class=\"row\">\r\n    <div class=\"col-md-3\"></div>\r\n    <div class=\"col-md-3 mt-4 text-end pe-0\"><span class=\"sub-title\">\r\n        <span class=\"me-3\">Displaying</span>\r\n        <select class=\"border-val \" [(ngModel)]=\"pageSize\" (change)=\"onPageSizeChange()\">\r\n            <option value=\"{{ size }}\" *ngFor=\"let size of paginationSizes\">\r\n                {{ size }}\r\n            </option>>\r\n        </select>\r\n        <span class=\"ms-3\">out of {{totalItems}} items</span>\r\n    </span></div>\r\n    <div class=\"col-md-4 text-start ps-0\">\r\n    <ul>\r\n        <li\r\n            *ngFor=\"let item of collection | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }\">\r\n        </li>\r\n    </ul>\r\n    <pagination-controls \r\n        (pageChange)=\"onPageChange($event);currentPage=$event;\" \r\n        [directionLinks]=\"directionLinks\"\r\n        [maxSize]=\"7\"\r\n        [responsive]=\"true\">\r\n    </pagination-controls>\r\n    </div>\r\n    <div class=\"col-md-2\"></div>\r\n</div>\r\n", styles: ["::ng-deep .ngx-pagination .current{padding:12px!important;background:#eaf8ff!important;cursor:default;color:#00a3ff!important;width:40px;height:40px;border-radius:8px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-600, #00A3FF)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a{padding:.1875rem 1rem!important}*{font-family:Inter!important}.border-val{padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M10 12l-6-6h12l-6 6z\" fill=\"%23777\"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;padding-right:20px}.sub-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "pipe", type: i3$3.PaginatePipe, name: "paginate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: PaginationComponent, selector: "lib-pagination", inputs: { collection: "collection", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", directionLinks: "directionLinks", pageSize: "pageSize", paginationSizes: "paginationSizes" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "\r\n<div class=\"row\">\r\n    <div class=\"col-md-3\"></div>\r\n    <div class=\"col-md-3 mt-4 text-end pe-0\"><span class=\"sub-title\">\r\n        <span class=\"me-3\">Displaying</span>\r\n        <select class=\"border-val \" [(ngModel)]=\"pageSize\" (change)=\"onPageSizeChange()\">\r\n            <option value=\"{{ size }}\" *ngFor=\"let size of paginationSizes\">\r\n                {{ size }}\r\n            </option>>\r\n        </select>\r\n        <span class=\"ms-3\">out of {{totalItems}} items</span>\r\n    </span></div>\r\n    <div class=\"col-md-4 text-start ps-0\">\r\n    <ul>\r\n        <li\r\n            *ngFor=\"let item of collection | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }\">\r\n        </li>\r\n    </ul>\r\n    <pagination-controls \r\n        (pageChange)=\"onPageChange($event);currentPage=$event;\" \r\n        [directionLinks]=\"directionLinks\"\r\n        [maxSize]=\"7\"\r\n        [responsive]=\"true\">\r\n    </pagination-controls>\r\n    </div>\r\n    <div class=\"col-md-2\"></div>\r\n</div>\r\n", styles: ["::ng-deep .ngx-pagination .current{padding:12px!important;background:#eaf8ff!important;cursor:default;color:#00a3ff!important;width:50px;height:45px;border-radius:8px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-600, #00A3FF)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a{padding:.1875rem 1rem!important}*{font-family:Inter!important}.border-val{padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M10 12l-6-6h12l-6 6z\" fill=\"%23777\"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;padding-right:20px}.sub-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "component", type: i3$1.PaginationControlsComponent, selector: "pagination-controls", inputs: ["id", "maxSize", "directionLinks", "autoHide", "responsive", "previousLabel", "nextLabel", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], outputs: ["pageChange", "pageBoundsCorrection"] }, { kind: "pipe", type: i3$1.PaginatePipe, name: "paginate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-pagination', template: "\r\n<div class=\"row\">\r\n    <div class=\"col-md-3\"></div>\r\n    <div class=\"col-md-3 mt-4 text-end pe-0\"><span class=\"sub-title\">\r\n        <span class=\"me-3\">Displaying</span>\r\n        <select class=\"border-val \" [(ngModel)]=\"pageSize\" (change)=\"onPageSizeChange()\">\r\n            <option value=\"{{ size }}\" *ngFor=\"let size of paginationSizes\">\r\n                {{ size }}\r\n            </option>>\r\n        </select>\r\n        <span class=\"ms-3\">out of {{totalItems}} items</span>\r\n    </span></div>\r\n    <div class=\"col-md-4 text-start ps-0\">\r\n    <ul>\r\n        <li\r\n            *ngFor=\"let item of collection | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }\">\r\n        </li>\r\n    </ul>\r\n    <pagination-controls \r\n        (pageChange)=\"onPageChange($event);currentPage=$event;\" \r\n        [directionLinks]=\"directionLinks\"\r\n        [maxSize]=\"7\"\r\n        [responsive]=\"true\">\r\n    </pagination-controls>\r\n    </div>\r\n    <div class=\"col-md-2\"></div>\r\n</div>\r\n", styles: ["::ng-deep .ngx-pagination .current{padding:12px!important;background:#eaf8ff!important;cursor:default;color:#00a3ff!important;width:40px;height:40px;border-radius:8px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-600, #00A3FF)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a{padding:.1875rem 1rem!important}*{font-family:Inter!important}.border-val{padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M10 12l-6-6h12l-6 6z\" fill=\"%23777\"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;padding-right:20px}.sub-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}\n"] }]
+            args: [{ selector: 'lib-pagination', template: "\r\n<div class=\"row\">\r\n    <div class=\"col-md-3\"></div>\r\n    <div class=\"col-md-3 mt-4 text-end pe-0\"><span class=\"sub-title\">\r\n        <span class=\"me-3\">Displaying</span>\r\n        <select class=\"border-val \" [(ngModel)]=\"pageSize\" (change)=\"onPageSizeChange()\">\r\n            <option value=\"{{ size }}\" *ngFor=\"let size of paginationSizes\">\r\n                {{ size }}\r\n            </option>>\r\n        </select>\r\n        <span class=\"ms-3\">out of {{totalItems}} items</span>\r\n    </span></div>\r\n    <div class=\"col-md-4 text-start ps-0\">\r\n    <ul>\r\n        <li\r\n            *ngFor=\"let item of collection | paginate: { itemsPerPage: itemsPerPage, currentPage: currentPage, totalItems: totalItems }\">\r\n        </li>\r\n    </ul>\r\n    <pagination-controls \r\n        (pageChange)=\"onPageChange($event);currentPage=$event;\" \r\n        [directionLinks]=\"directionLinks\"\r\n        [maxSize]=\"7\"\r\n        [responsive]=\"true\">\r\n    </pagination-controls>\r\n    </div>\r\n    <div class=\"col-md-2\"></div>\r\n</div>\r\n", styles: ["::ng-deep .ngx-pagination .current{padding:12px!important;background:#eaf8ff!important;cursor:default;color:#00a3ff!important;width:50px;height:45px;border-radius:8px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-600, #00A3FF)!important;text-align:center;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination{color:var(--Gray-500, #667085)!important;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}::ng-deep .ngx-pagination a{padding:.1875rem 1rem!important}*{font-family:Inter!important}.border-val{padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\"><path d=\"M10 12l-6-6h12l-6 6z\" fill=\"%23777\"/></svg>');background-repeat:no-repeat;background-position-x:calc(100% - 12px);background-position-y:50%;padding-right:20px}.sub-title{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:500!important;line-height:20px}\n"] }]
         }], propDecorators: { collection: [{
                 type: Input
             }], itemsPerPage: [{
@@ -3035,7 +3462,7 @@ class FiltersComponent {
         });
     }
     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$1.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" }, 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    \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 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 class=\"\">{{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('Select All', i)\">\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)]=\"searchValue\" (input)=\"searchData($event,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\"  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]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                     (change)=\"toggleCheckbox(issue.text,i)\">\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       \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>\r\n\r\n", 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 .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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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" }, 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    \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 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 class=\"\">{{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('Select All', i)\">\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)]=\"searchValue\" (input)=\"searchData($event,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\"  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]=\"selectedValuesArray[i]?.includes(issue.text)\"\r\n                     (change)=\"toggleCheckbox(issue.text,i)\">\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       \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>\r\n\r\n", 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 .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.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,
@@ -3100,7 +3527,7 @@ class TranslationService {
         return (localStorage.getItem(LOCALIZATION_LOCAL_STORAGE_KEY) ||
             this.translate.getDefaultLang());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationService, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationService, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: TranslationService, decorators: [{
@@ -3108,7 +3535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }] });
+        }], ctorParameters: () => [{ type: i1$3.TranslateService }] });
 
 // USA
 const locale$5 = {
@@ -3856,7 +4283,10 @@ class LayoutModule {
             SaasComponent,
             KeeniconComponent,
             LayoutScrollTopComponent,
-            ClientSettingsComponent], imports: [CommonModule, i1$1.RouterModule, TranslationModule,
+            ClientSettingsComponent,
+            DatepickerComponent,
+            DateSingleSelectComponent,
+            SingleStoreComponent], imports: [CommonModule, i1$1.RouterModule, TranslationModule,
             InlineSVGModule,
             NgbDropdownModule,
             NgbProgressbarModule,
@@ -3869,7 +4299,7 @@ class LayoutModule {
             TranslateModule,
             // ThemeModeModule,
             CommonSharedModule,
-            FormsModule, i6.NgxDaterangepickerMd], exports: [RouterModule] });
+            FormsModule, i5.NgxDaterangepickerMd], exports: [RouterModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: LayoutModule, imports: [CommonModule,
             RouterModule.forChild(routes$1),
             TranslationModule,
@@ -3913,7 +4343,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                         SaasComponent,
                         KeeniconComponent,
                         LayoutScrollTopComponent,
-                        ClientSettingsComponent
+                        ClientSettingsComponent,
+                        DatepickerComponent,
+                        DateSingleSelectComponent,
+                        SingleStoreComponent
                     ],
                     imports: [
                         CommonModule,
@@ -3993,6 +4426,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }] });
 
+class GlobalStateService {
+    userData = new BehaviorSubject(null);
+    environment = new BehaviorSubject(null);
+    dataRangeValue = new BehaviorSubject(null);
+    selectedClient = new BehaviorSubject(null);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: GlobalStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AuthService {
+    router;
+    gs;
+    http;
+    clientApiUrl;
+    authlocalStorageToken;
+    constructor(router, gs, http) {
+        this.router = router;
+        this.gs = gs;
+        this.http = http;
+        this.gs.environment.subscribe((env) => {
+            if (env) {
+                this.clientApiUrl = env.clientApiUrl;
+                this.authlocalStorageToken = `${env.appVersion}-${env.USERDATA_KEY}`;
+            }
+        });
+    }
+    handleError(res) {
+        return throwError(res.error);
+    }
+    logout() {
+        localStorage.removeItem(this.authlocalStorageToken);
+        this.router.navigate(['/auth/login'], {
+            queryParams: {},
+        });
+    }
+    getClients() {
+        return this.http.get(`${this.clientApiUrl}/get-clients`, {})
+            .pipe(map((response) => response), catchError(this.handleError));
+    }
+    getStores() {
+        return this.http.get(`https://devtangoretail-api.tangoeye.ai/v3/store/get-stores?clientId=11`, {})
+            .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$1.Router }, { token: GlobalStateService }, { token: i3$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: GlobalStateService }, { type: i3$2.HttpClient }] });
+
 class AuthGuard {
     authService;
     constructor(authService) {
@@ -4079,22 +4571,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+// import { GlobalStateService } from 'tango-app-ui-shared';
 class HttpAuthInterceptor {
-    constructor() { }
+    gs;
+    authlocalStorageToken = '';
+    constructor(gs) {
+        this.gs = gs;
+        this.gs.environment.subscribe((env) => {
+            if (env) {
+                this.authlocalStorageToken = `${env.appVersion}-${env.USERDATA_KEY}`;
+            }
+        });
+    }
     intercept(request, next) {
+        const user = JSON.parse(localStorage.getItem(this.authlocalStorageToken) || '{}');
         request = request.clone({
             setHeaders: {
-                Authorization: `Bearer 7762ffb2-58be-47ab-be39-99e776bfe78a`
+                Authorization: 'Bearer ' + user.athenticationToken
             }
         });
         return next.handle(request);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HttpAuthInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HttpAuthInterceptor, deps: [{ token: GlobalStateService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HttpAuthInterceptor });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: HttpAuthInterceptor, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: GlobalStateService }] });
 
 /*
  * Public API Surface of tango-app-shared