tango-app-ui-shared 3.3.1-beta.74 → 3.3.1-beta.76

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

@@ -3896,12 +3896,14 @@ class TrafficHeaderComponent {
         this.Opendropdown = false;
         // Fetch existing filters from localStorage
         const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        this.selectedFilters.store = null;
         // Ensure current selections are reflected
         this.selectedFilters.location = this.locations;
         this.selectedFilters.group = this.groupsData;
         this.selectedFilters.stores = headerFilters.stores ? headerFilters.stores : this.stores;
         // Store updated filters back in localStorage
         localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+        // this.gs.dataRangeValue.next(this.selectedFilters);
         window.location.reload();
         // Emit the updated filters via the service
         // this.gs.dataRangeValue.next(this.selectedFilters);
@@ -4697,6 +4699,7 @@ class TraxHeaderComponent {
         this.Opendropdown = false;
         // Fetch existing filters from localStorage
         const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        this.selectedFilters.store = null;
         // Ensure current selections are reflected
         this.selectedFilters.location = this.locations;
         this.selectedFilters.group = this.groupsData;
@@ -5525,6 +5528,7 @@ class TraxWithoutdateComponent {
         this.Opendropdown = false;
         // Fetch existing filters from localStorage
         const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        this.selectedFilters.store = null;
         // Ensure current selections are reflected
         this.selectedFilters.location = this.locations;
         this.selectedFilters.group = this.groupsData;
@@ -5625,225 +5629,1006 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ["document:click", ["$event"]]
             }] } });
 
-class ToolbarComponent {
-    layout;
+class TrafficNobComponent {
+    auth;
     router;
-    route;
     gs;
-    unsubscribe = [];
-    // Public props
-    currentLayoutType;
-    appToolbarLayout;
-    // toolbar
-    appToolbarDisplay;
-    appToolbarContainer;
-    appToolbarContainerCSSClass = "";
-    appToolbarFixedDesktop;
-    appToolbarFixedMobile;
-    appPageTitleDisplay;
-    // page title
-    appPageTitleDirection = "";
-    appPageTitleCSSClass = "";
-    appPageTitleBreadcrumb;
-    appPageTitleDescription;
-    querParams;
-    singleSelect;
-    multiSelect;
-    datepicker;
-    singleSelectdatepicker;
-    singleStore;
-    headervalue;
-    storeId;
-    users;
+    cd;
+    dayjs = dayjs;
+    isCustomDate = (m) => {
+        const isValidDate = m > this.dayjs();
+        return isValidDate ? "invalid-date" : false;
+    };
+    selectedDateRange = { startDate: dayjs().subtract(30, 'days'),
+        endDate: dayjs().subtract(1, "days"), };
     selectedFilters = {
         client: null,
+        clientName: null,
         clients: [],
         store: null,
         stores: [],
         date: null,
+        group: [],
+        location: [],
     };
-    trafficdatepicker;
-    traxdatepicker;
-    urlString;
-    traxwithoutdatepicker;
-    storesSingle;
-    constructor(layout, router, route, gs) {
-        this.layout = layout;
+    Opendropdown = false;
+    dropdownOpen = null; // 'location' or 'group'
+    searchLocationText = "";
+    searchGroupText = "";
+    locations = [];
+    filteredLocations = [];
+    groupsData = [];
+    filteredGroups = [];
+    filteredStores = [];
+    stores = [];
+    searchStoreText = '';
+    clientList = [];
+    selectedClient;
+    locationLabel = [];
+    groupLabel = [];
+    users;
+    url;
+    constructor(auth, router, gs, cd) {
+        this.auth = auth;
         this.router = router;
-        this.route = route;
         this.gs = gs;
+        this.cd = cd;
     }
-    ngOnInit() {
-        if ("user-info" in localStorage) {
-            const userData = JSON.parse(localStorage.getItem("user-info") || "{}");
-            this.users = userData;
-        }
-        this.showPageTitle();
-        const subscr = this.layout.layoutConfigSubject
-            .asObservable()
-            .subscribe((config) => {
-            this.updateProps(config);
-        });
-        this.unsubscribe.push(subscr);
-    }
-    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");
+    onClick(event) {
+        const target = event.target;
+        if (!target.closest('.dropdown1')) {
+            this.Opendropdown = 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");
     }
-    destroy$ = new Subject();
-    ngOnDestroy() {
-        this.unsubscribe.forEach((sb) => sb.unsubscribe());
-        this.destroy$.next(true);
-        this.destroy$.complete();
+    closeDropdown1() {
+        this.Opendropdown = false;
     }
-    showPageTitle() {
-        let URL = "";
-        if ("header-filters" in localStorage) {
-            const data = JSON.parse(localStorage.getItem("header-filters") || "{}");
-            const store = this.route.snapshot.queryParamMap;
-            this.storeId = data?.store;
-            if (store?.params?.['storeId']) {
-                this.storeId = store.params['storeId'];
-                data.store = store.params['storeId'];
-                localStorage.setItem('header-filters', JSON.stringify(data));
-            }
-            const currentUrl = this.router.url;
-            const updatedUrl = currentUrl.replace(/\/manage\/stores\/\d+-\d+\//, `/manage/stores/`);
-            URL = updatedUrl;
-            // this.router.navigate([URL])
-        }
-        const url = URL.split("?")[0].split('/');
-        this.urlString = URL;
-        if (this.users?.userType === "tango") {
-            if (url[2] == "settings" || URL == "/manage/users/client" ||
-                URL == "/manage/stores" || URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" ||
-                URL == "/manage/stores/addition-method" ||
-                URL == "/manage/stores/add-single-store" || URL === "/manage/trax/gallery" || URL == "/notifications/alerts?tab=alert" || URL == "/notifications/alerts?tab=download") {
-                this.setUIProperties(true, false, false, false, false, false, false, false, false);
-            }
-            else if (url[3] == "edge-app") {
-                this.setUIProperties(false, false, false, false, true, false, false, false, false);
-            }
-            else if (URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
-                URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
-                URL == `/manage/stores/zones?storeId=${this.storeId}` ||
-                URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
-                // URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
-                URL == `/manage/stores/mat?storeId=${this.storeId}`) {
-                this.setUIProperties(false, false, false, true, false, false, false, false, false);
-            }
-            else if (url[2] === 'controlcenter') {
-                if (URL == `/manage/controlcenter/playback?storeId=${this.storeId}` || URL == `/manage/controlcenter/playback`) {
-                    this.setUIProperties(false, false, false, false, false, false, false, false, true);
+    ngOnInit() {
+        this.url = this.router.url.split("?")[0].split('/');
+        const user = JSON.parse(localStorage.getItem('user-info'));
+        this.users = user;
+        this.gs?.manageRefreshTrigger?.subscribe((e) => {
+            if (e) {
+                if (user.userType === 'tango') {
+                    this.getClient();
                 }
                 else {
-                    this.setUIProperties(false, false, false, false, true, false, false, false, false);
+                    const storedFilters = localStorage.getItem("header-filters");
+                    if (storedFilters) {
+                        const headerFilters = JSON.parse(storedFilters);
+                        this.filteredStores = headerFilters?.stores.map((store) => ({
+                            ...store,
+                            checked: store.checked
+                        }));
+                    }
                 }
             }
-            else if (URL == "/profile" || url[2] === "data-mismatch" || url[2] === "employeetraining"
-                || URL == "/manage/brands" || URL == "/manage/users/tango" || (url[1] === "tickets" && url[2] === "audit")) {
-                this.setUIProperties(false, false, false, false, false, false, false, false, false);
-            }
-            else if (url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports") {
-                this.setUIProperties(false, false, false, false, false, true, false, false, false);
-            }
-            else if (url[2] == 'trax') {
-                if (url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure') || url.includes('create-order') || url[3] == 'create-task' || url[3] == 'task-configure')) {
-                    this.setUIProperties(false, false, false, false, false, false, false, false, false);
-                }
-                else if (url[2] == 'trax' && (url.includes('taskinfo'))) {
-                    this.setUIProperties(false, false, false, false, false, false, false, true, false);
-                }
-                else if (url[2] == 'trax' && (url.includes('checklist') || url.includes('gallery'))) {
-                    this.setUIProperties(true, false, false, false, false, false, false, false, false);
-                }
-                else {
-                    this.setUIProperties(false, false, false, false, false, false, true, false, false);
-                }
+        });
+        // Fetch client data if the user is of type 'tango'
+        if (user.userType === 'tango') {
+            this.getClient();
+        }
+        else {
+            this.getLocations();
+            this.getGroups();
+            this.getStore();
+            //       this.emitAndStoreFilters();
+            // console.log("1")
+        }
+        // Load filters from localStorage if they exist
+        const storedFilters = localStorage.getItem("header-filters");
+        if (storedFilters) {
+            const headerFilters = JSON.parse(storedFilters);
+            // Initialize selectedFilters with defaults or existing values
+            this.selectedFilters = {
+                client: headerFilters.client || this.users.client,
+                clientName: headerFilters.clientName || '',
+                clients: headerFilters.clients || [],
+                store: headerFilters.store || null,
+                date: headerFilters.date || {},
+                stores: headerFilters.stores || [],
+                group: headerFilters.group || [],
+                location: headerFilters.location || []
+            };
+            // Sync filtered data with stored selections
+            this.filteredLocations = this.syncWithLocalStorage(headerFilters.location);
+            this.filteredGroups = this.syncWithLocalStorage(headerFilters.group);
+            this.filteredStores = this.syncWithLocalStorage(headerFilters.stores);
+            // Format date range if it exists
+            if (headerFilters.date) {
+                this.selectedDateRange = {
+                    startDate: this.dayjs(headerFilters.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+                    endDate: this.dayjs(headerFilters.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+                };
             }
             else {
-                this.setUIProperties(false, false, false, false, true, false, false, false, false);
+                this.selectedDateRange = {
+                    startDate: this.dayjs(this.selectedDateRange.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+                    endDate: this.dayjs(this.selectedDateRange.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+                };
             }
+            // console.log("3")
+            // Emit data via service and update localStorage
+            this.emitAndStoreFilters();
         }
         else {
-            if (url[3] == "edge-app") {
-                this.setUIProperties(false, false, true, false, false, false, false, false, false);
-            }
-            else if (URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
-                URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
-                URL == `/manage/stores/zones?storeId=${this.storeId}` ||
-                URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
-                // URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
-                URL == `/manage/stores/mat?storeId=${this.storeId}`) {
-                this.setUIProperties(false, false, false, true, false, false, false, false, false);
-            }
-            else if (url[2] === 'controlcenter') {
-                if (URL == `/manage/controlcenter/playback?storeId=${this.storeId}` || URL == `/manage/controlcenter/playback`) {
-                    this.setUIProperties(false, false, false, false, false, false, false, false, true);
-                }
-                else {
-                    this.setUIProperties(false, false, false, false, true, false, false, false, false);
-                }
-            }
-            else if (URL == "/profile" || URL == "/manage/users/client" || URL == "/manage/users/tango" ||
-                URL == "/manage/stores" || URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" || url[2] == "settings" ||
-                URL == "/manage/stores/addition-method" ||
-                URL == "/manage/stores/add-single-store" || url[2] === "data-mismatch" || url[2] === "employeetraining" || URL == "/notifications/alerts?tab=alert" || URL == "/notifications/alerts?tab=download"
-                || URL == "/manage/users/tango" || URL === "/manage/controlcenter" || URL === 'manage/controlcenter/template-manager' || url[2] === 'controlcenter') {
-                this.setUIProperties(false, false, false, false, false, false, false, false, false);
+            // Initialize empty states if no header filters are present in localStorage
+            this.resetFilters();
+            // console.log("2")
+        }
+    }
+    syncWithLocalStorage(items) {
+        return items
+            ? items.map((item) => ({
+                ...item,
+                checked: item.checked === true
+            }))
+            : [];
+    }
+    emitAndStoreFilters() {
+        this.gs.dataRangeValue.next(this.selectedFilters);
+        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+        // console.log("1")
+    }
+    /**
+     * Reset selectedFilters and all related arrays to empty states
+     */
+    resetFilters() {
+        this.selectedFilters = {
+            client: null,
+            clientName: '',
+            clients: [],
+            store: null,
+            date: {},
+            stores: [],
+            group: [],
+            location: []
+        };
+        this.filteredLocations = [];
+        this.filteredGroups = [];
+        this.filteredStores = [];
+    }
+    getClient() {
+        this.auth.getClients().subscribe({
+            next: (e) => {
+                if (e) {
+                    this.clientList = e.data.result;
+                    const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+                    if (headerFilters.client) {
+                        this.clientList.find((obj) => {
+                            if (obj.clientId === headerFilters.client) {
+                                this.selectedClient = obj;
+                            }
+                        });
+                        this.selectedFilters.client = headerFilters.client;
+                        this.selectedFilters.clientName = headerFilters.clientName;
+                        this.selectedFilters.clients = headerFilters.clients;
+                        this.selectedFilters.store = headerFilters.store;
+                        this.selectedFilters.date = headerFilters.date;
+                        this.selectedFilters.stores = headerFilters.stores;
+                        this.selectedFilters.group = headerFilters.group;
+                        this.selectedFilters.location = headerFilters.location;
+                        this.gs.dataRangeValue.next(this.selectedFilters);
+                        // console.log("2")
+                        // Ensure locations and groups are loaded before fetching stores
+                        this.getLocations();
+                        this.getGroups();
+                        // Fetch stores only after locations and groups are set
+                        this.getStore();
+                    }
+                    else {
+                        this.selectedClient = this.clientList[0];
+                        this.selectedFilters.client = this.selectedClient.clientId;
+                        this.selectedFilters.clientName = this.selectedClient.clientName;
+                        this.selectedFilters.clients = headerFilters.clients;
+                        this.selectedFilters.store = headerFilters.store;
+                        this.selectedFilters.date = headerFilters.date;
+                        this.selectedFilters.stores = headerFilters.stores;
+                        this.selectedFilters.group = headerFilters.group;
+                        this.selectedFilters.location = headerFilters.location;
+                        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+                        this.gs.dataRangeValue.next(this.selectedFilters);
+                        // console.log("3")
+                        this.cd.detectChanges();
+                        // Ensure locations and groups are loaded before fetching stores
+                        this.getLocations();
+                        this.getGroups();
+                        // Fetch stores only after locations and groups are set
+                        this.getStore();
+                    }
+                }
+                else {
+                    this.selectedClient = this.clientList[0];
+                    this.selectedFilters.client = this.selectedClient.clientId;
+                    this.selectedFilters.clientName = this.selectedClient.clientName;
+                    // Ensure locations and groups are loaded before fetching stores
+                    this.getLocations();
+                    this.getGroups();
+                    // Fetch stores only after locations and groups are set
+                    this.getStore();
+                    localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+                    this.gs.dataRangeValue.next(this.selectedFilters);
+                    // console.log("4")
+                    this.cd.detectChanges();
+                }
+            },
+        });
+    }
+    onClientSelect(event) {
+        // Update the selected client
+        this.selectedClient = event;
+        // Clear previous filtered data and selections
+        this.filteredGroups = [];
+        this.filteredStores = [];
+        this.filteredLocations = [];
+        this.selectedFilters.stores = [];
+        this.selectedFilters.group = [];
+        this.selectedFilters.location = [];
+        // Fetch header filters from localStorage
+        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        // Update the selected filters with the new client
+        this.selectedFilters.client = this.selectedClient.clientId;
+        this.selectedFilters.clientName = this.selectedClient.clientName;
+        // Remove old store, group, and location data from the header filters
+        delete headerFilters.stores;
+        delete headerFilters.groups;
+        delete headerFilters.location;
+        // Fetch new data based on the new client
+        this.getLocations();
+        this.getStore();
+        this.getGroups();
+        // Update localStorage with the new client selection and empty filter data
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        window.location.reload();
+        // Emit data to the global service
+        // this.gs.dataRangeValue.next(this.selectedFilters);
+        // Trigger change detection to reflect UI changes
+        this.cd.detectChanges();
+    }
+    ranges = {
+        Today: [dayjs(), dayjs()],
+        Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+        'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
+        'Last Week': [
+            dayjs().subtract(14, 'days').startOf('day'),
+            dayjs().subtract(8, 'days').endOf('day'),
+        ],
+        'This Month': [dayjs().subtract(30, 'days'), dayjs().subtract(1, 'days')],
+        'Last Month': [
+            dayjs().subtract(1, 'month').startOf('month'),
+            dayjs().subtract(1, 'month').endOf('month'),
+        ],
+    };
+    onStartDateChange(event) {
+        if (this.dayjs(event.startDate).isValid()) {
+            this.isCustomDate = (m) => {
+                const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
+                return isValidDate ? "invalid-date" : false;
+            };
+        }
+    }
+    datechange(event) {
+        if (event && event.startDate && event.endDate) {
+            if (this.dayjs(event.startDate).isValid() &&
+                this.dayjs(event.endDate).isValid()) {
+                this.selectedDateRange.startDate = event.startDate;
+                this.selectedDateRange.endDate = event.endDate;
+                var datetime = {
+                    startDate: this.dayjs(event.startDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+                    endDate: this.dayjs(event.endDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+                };
+                this.selectedFilters.date = datetime;
+                localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+                window.location.reload();
+                // this.gs.dataRangeValue.next(this.selectedFilters);
+            }
+        }
+    }
+    opendropdown(e) {
+        e.stopPropagation();
+        this.Opendropdown = !this.Opendropdown;
+    }
+    getLocations() {
+        // const headerFilters: any = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        let obj = {
+            clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
+            city: [],
+            group: [],
+        };
+        this.auth.getLocation(obj).subscribe({
+            next: (res) => {
+                let cityList = this.selectedFilters?.location?.filter((location) => location.checked).map((loc) => loc.city);
+                // Map the fetched locations with default unchecked state
+                this.locations = res?.data?.locationData.map((city) => ({
+                    city: city.city,
+                    checked: cityList?.includes(city.city) ? true : false,
+                }));
+                // Sync the fetched locations with any stored checked values in localStorage
+                if (this.selectedFilters.location && Array.isArray(this.selectedFilters.location)) {
+                    this.filteredLocations = this.locations.map(location => {
+                        const matchedLocation = this.selectedFilters.location.find((loc) => loc.city === location.city);
+                        return matchedLocation ? { ...location, checked: matchedLocation.checked } : location;
+                    });
+                }
+                else {
+                    this.filteredLocations = this.locations;
+                }
+                if (this.searchLocationText) {
+                    this.filteredLocations = this.locations.filter((location) => location.city.toLowerCase().includes(this.searchLocationText.toLowerCase()));
+                }
+            },
+            error: (err) => {
+                console.error("Failed to fetch locations", err);
+            },
+        });
+    }
+    isAllLocationsSelected() {
+        return this.filteredLocations.every(location => location.checked);
+    }
+    selectedLocationsLabel() {
+        const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
+            .filter(location => location.checked).map(location => location.city) : this.filteredLocations
+            .filter(location => location.checked).map(location => location.city);
+        return selectedLocations.length === 0
+            ? ''
+            : selectedLocations.length === 1
+                ? selectedLocations[0]
+                : `${selectedLocations.length} locations`;
+    }
+    removeLocation() {
+        this.Reset();
+    }
+    getGroups() {
+        const city = this.locations
+            .filter(location => location.checked)
+            .map(location => location.city);
+        const obj = { city, clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId, group: [] };
+        this.auth.getGroups(obj).subscribe({
+            next: (res) => {
+                let checkedGroup = this.selectedFilters?.group?.filter((group) => group.checked).map((group) => group.groupName);
+                const combinedGroups = res?.data?.groupData?.map((groupName) => ({
+                    groupName: groupName.groupName,
+                    checked: checkedGroup?.includes(groupName.groupName) ? true : false,
+                }));
+                this.groupsData = combinedGroups;
+                if (this.searchGroupText.length) {
+                    this.filteredGroups = combinedGroups.filter((item) => item.groupName.toLowerCase().includes(this.searchGroupText));
+                }
+                else {
+                    this.filteredGroups = combinedGroups;
+                }
+                // Auto-fetch stores when groups are selected
+                const selectedGroups = this.groupsData.filter((group) => group.checked).map((group) => group.groupName);
+                if (selectedGroups.length > 0) {
+                    this.getStore(); // Fetch stores based on selected groups
+                }
+            },
+            error: (err) => {
+                console.error("Failed to fetch groups", err);
+            },
+        });
+    }
+    toggleDropdown(type) {
+        if (this.dropdownOpen === type) {
+            // If the dropdown is open, close it and avoid resetting the selected values unnecessarily
+            this.dropdownOpen = null;
+        }
+        else {
+            // Open the specific dropdown and handle data fetching only if necessary
+            this.dropdownOpen = type;
+            if (type === 'group') {
+                // Fetch groups only if there are selected cities and no active search text
+                const selectedCities = this.locations
+                    .filter((location) => location.checked)
+                    .map((location) => location.city);
+                // Fetch groups only if locations are selected, no search text exists, and dropdown is opened
+                if (this.filteredLocations.length > 0 || (selectedCities.length > 0 && !this.searchGroupText.trim())) {
+                    this.getGroups();
+                }
+                else {
+                    this.filteredGroups = []; // Clear groups if no locations are selected
+                }
+            }
+            if (type === 'store') {
+                // Fetch stores only if not already fetched and no search text is active
+                if ((!this.filteredStores || this.filteredStores.length === 0) && !this.searchStoreText.trim()) {
+                    this.getStore();
+                }
+            }
+        }
+    }
+    handleGroupDropdownClick() {
+        if (this.dropdownOpen === 'group') {
+            this.resetSelectedGroups();
+        }
+        this.toggleDropdown('group');
+    }
+    resetSelectedGroups() {
+        this.filteredGroups.forEach((group) => (group.checked = false));
+        this.searchGroupText = "";
+    }
+    selectedGroupsLabel() {
+        const selectedGroups = this.groupLabel = this.searchGroupText.length ? this.groupsData.filter((group) => group.checked) : this.filteredGroups.filter((group) => group.checked);
+        return selectedGroups.length === 0
+            ? ""
+            : selectedGroups.length === 1
+                ? selectedGroups[0].groupName
+                : `${selectedGroups.length} groups`;
+    }
+    removeGroup() {
+        this.Reset();
+    }
+    isAllGroupsSelected() {
+        return this.filteredGroups.length ? this.filteredGroups.every((group) => group.checked) : false;
+    }
+    getStore() {
+        const city = this.locations
+            .filter(location => location.checked)
+            .map(location => location.city);
+        const group = this.groupsData
+            .filter(group => group.checked)
+            .map(group => group.groupName);
+        const data = { city, clusters: group, clientId: this.users.clientId ? this.users.clientId : this.selectedFilters.client };
+        this.auth.getHeaderStores(data).subscribe({
+            next: (res) => {
+                if (res && res.code === 200) {
+                    this.stores = res.data.storesData;
+                    // Retrieve checked store IDs from selectedFilters
+                    const checkedStoreIds = this.selectedFilters?.stores
+                        ? this.selectedFilters.stores.filter((store) => store.checked).map((store) => store.storeId)
+                        : [];
+                    this.stores.forEach(store => {
+                        if (checkedStoreIds.includes(store.storeId)) {
+                            store.checked = true; // Sync the checked state with full store list
+                        }
+                    });
+                    // Map the stores and retain the 'checked' status
+                    if (this.searchStoreText.length) {
+                        this.filteredStores = this.stores?.filter(store => store.storeName.toLowerCase().includes(this.searchStoreText));
+                    }
+                    else {
+                        this.filteredStores = this.stores;
+                    }
+                    // Ensure selectedFilters is in sync with filteredStores
+                    if (!this.selectedFilters.stores || !this.selectedFilters.stores.length) {
+                        this.stores.forEach(store => {
+                            store.checked = true; // Sync the checked state with full store list
+                        });
+                        // No previously selected stores, mark all as checked
+                        this.filteredStores = this.selectedFilters.stores = this.filteredStores.map(store => ({
+                            ...store,
+                            checked: true
+                        }));
+                    }
+                    else {
+                        // Update selectedFilters to reflect current state of stores
+                        this.selectedFilters.stores = this.filteredStores.map(store => ({
+                            ...store,
+                            checked: store.checked
+                        }));
+                    }
+                    // Update localStorage with the latest selectedFilters
+                    localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+                    // Emit data via service
+                    // this.gs.dataRangeValue.next(this.selectedFilters);
+                    // Trigger change detection to reflect changes in the UI
+                    this.cd.detectChanges();
+                }
+                else {
+                    this.stores = [];
+                    this.selectedFilters.stores = [];
+                    this.filteredStores = [];
+                    this.selectedFilters.stores = this.filteredStores.map(store => ({
+                        ...store,
+                        checked: false
+                    }));
+                    localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+                }
+            },
+            error: (err) => {
+                this.stores = [];
+                this.selectedFilters.stores = this.filteredStores.map(store => ({
+                    ...store,
+                    checked: false
+                }));
+                this.filteredStores = [];
+                this.selectedFilters.stores = [];
+                localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+                console.error("Failed to fetch stores", err);
+            },
+        });
+    }
+    resetSelectedStores() {
+        this.filteredStores.forEach((store) => (store.checked = false));
+        this.searchStoreText = "";
+    }
+    selectedStoresLabel() {
+        const selectedStores = this.searchStoreText.length ? this.stores.filter((store) => store.checked) : this.filteredStores.filter((store) => store.checked);
+        return selectedStores.length === 0
+            ? "0 Stores"
+            : selectedStores.length === 1
+                ? selectedStores[0].storeName
+                : `${selectedStores.length} Stores`;
+    }
+    isAllStoresSelected() {
+        return this.filteredStores.length > 0 && this.filteredStores.every(store => store.checked);
+    }
+    // Method to handle dropdown item selection
+    updateSelectedStores() {
+        this.filteredStores.forEach(store => {
+            const filteredStore = this.stores.findIndex(fStore => fStore.storeId === store.storeId);
+            if (filteredStore != -1) {
+                this.stores[filteredStore].checked = store.checked; // Sync the checked state with full store list
+            }
+        });
+        // Update selectedFilters based on the current store selection
+        this.selectedFilters.stores = this.stores.filter(store => store.checked);
+        // Update localStorage with the latest selection
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        // Emit updated filters via service
+        // this.gs.dataRangeValue.next(this.selectedFilters);
+        // Trigger change detection if necessary
+        this.cd.detectChanges();
+    }
+    toggleSelectAllLocations(event) {
+        const isChecked = event.target.checked;
+        this.filteredLocations.forEach((location) => (location.checked = isChecked));
+        this.updateSelectedLocations();
+    }
+    toggleSelectAllStores(event) {
+        const checked = event.target.checked;
+        // Apply the selection to both filtered and full list of stores
+        this.filteredStores.forEach(store => store.checked = checked);
+        this.stores.forEach(store => {
+            const filteredStore = this.filteredStores.find(fStore => fStore.storeId === store.storeId);
+            if (filteredStore) {
+                store.checked = checked; // Sync the checked state with full store list
+            }
+        });
+        // Update the selected stores and persist the selection
+        this.updateSelectedStores();
+    }
+    updateSelectedLocations() {
+        // When locations are selected, fetch the related groups
+        const selectedCities = this.filteredLocations
+            .filter((location) => location.checked)
+            .map((location) => location.city);
+        this.filteredLocations.forEach((location) => {
+            let findLocationIndex = this.locations.findIndex((loc) => loc.city == location.city);
+            if (findLocationIndex != -1) {
+                this.locations[findLocationIndex].checked = location.checked;
+            }
+        });
+        if (selectedCities.length > 0 || !selectedCities.length) {
+            this.selectedFilters.stores = [];
+            this.selectedFilters.location = this.locations;
+            this.getGroups(); // Fetch groups based on selected cities
+            // If there are selected groups, fetch the stores based on selected groups
+            this.getStore();
+        }
+        else {
+            this.filteredGroups = []; // Clear groups if no locations are selected
+            this.selectedFilters.location = [];
+        }
+        this.selectedFilters.group = [];
+        this.filteredStores = []; // Reset stores as well
+        this.searchGroupText = '';
+        this.searchStoreText = '';
+        // this.Opendropdown = false;
+    }
+    toggleSelectAllGroups(event) {
+        const isChecked = event.target.checked;
+        this.filteredGroups.forEach((group) => (group.checked = isChecked));
+        this.updateSelectedGroups();
+        // if (!isChecked) {
+        //   this.selectedFilters.stores =[];
+        //    // If there are selected groups, fetch the stores based on selected groups
+        //    this.getStore();
+        //  }
+    }
+    updateSelectedGroups() {
+        // Fetch the relevant stores after groups are selected
+        const selectedGroups = this.filteredGroups
+            .filter((group) => group.checked)
+            .map((group) => group.groupName);
+        this.filteredGroups.forEach((group) => {
+            let findGroupIndex = this.groupsData.findIndex((item) => item.groupName == group.groupName);
+            if (findGroupIndex != -1) {
+                this.groupsData[findGroupIndex].checked = group.checked;
+            }
+        });
+        if (selectedGroups.length > 0 || !selectedGroups.length) {
+            this.selectedFilters.stores = [];
+            // If there are selected groups, fetch the stores based on selected groups
+            this.getStore();
+            this.selectedFilters.group = this.groupsData;
+        }
+        else {
+            // If no groups are selected, clear the stores list
+            this.filteredStores = [];
+            // Also, update localStorage to reflect the cleared store selection
+            this.selectedFilters.stores = [];
+            localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+            // Emit data via service
+            // this.gs.dataRangeValue.next(this.selectedFilters);
+        }
+        // Clear the search store text when groups are updated
+        this.searchStoreText = '';
+    }
+    Reset() {
+        // Clear selected groups, stores, and locations
+        this.filteredGroups = [];
+        this.filteredStores = [];
+        this.filteredLocations = []; // Reset locations as well
+        // Clear search input fields
+        this.searchLocationText = "";
+        this.searchGroupText = "";
+        this.searchStoreText = "";
+        // Fetch locations, groups, and stores again
+        this.getLocations();
+        this.getStore();
+        this.getGroups();
+        // Reset the filters in selectedFilters
+        this.selectedFilters = {
+            ...this.selectedFilters,
+            stores: [],
+            group: [],
+            location: [] // Clear locations selection
+        };
+        // // Once stores are fetched, mark all as checked
+        // setTimeout(() => {
+        //   this.filteredStores = this.stores.map(store => ({
+        //     ...store,
+        //     checked: true  // Mark all stores as checked
+        //   }));
+        //   // Sync selectedFilters with the updated store state
+        //   this.selectedFilters.stores = this.filteredStores.map(store => ({
+        //     ...store,
+        //     checked: true
+        //   }));
+        // Update localStorage with the latest selectedFilters
+        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        window.location.reload();
+        // Emit the reset filters to update other components if needed
+        // this.gs.dataRangeValue.next(this.selectedFilters);
+        // Trigger change detection
+        this.cd.detectChanges();
+        // Adding a slight delay to ensure stores are fetched first
+        // Close dropdown after reset if necessary
+        this.Opendropdown = false;
+    }
+    Apply() {
+        // Close the dropdown
+        this.Opendropdown = false;
+        // Fetch existing filters from localStorage
+        const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
+        this.selectedFilters.store = null;
+        // Ensure current selections are reflected
+        this.selectedFilters.location = this.locations;
+        this.selectedFilters.group = this.groupsData;
+        this.selectedFilters.stores = headerFilters.stores ? headerFilters.stores : this.stores;
+        // Store updated filters back in localStorage
+        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+        window.location.reload();
+        // Emit the updated filters via the service
+        // this.gs.dataRangeValue.next(this.selectedFilters);
+        // Trigger refresh if necessary
+        // this.gs.manageRefreshTrigger.next(true);
+        this.cd.detectChanges();
+    }
+    filterLocations() {
+        const searchText = this.searchLocationText.toLowerCase();
+        if (searchText) {
+            // Preserve the checked state during filtering
+            this.filteredLocations = this.locations
+                .map(location => ({
+                ...location,
+                checked: this.filteredLocations.find(l => l.city === location.city)?.checked || false
+            }))
+                .filter(location => location?.city?.toLowerCase().includes(searchText));
+        }
+        else {
+            // Restore the original checked state when search text is cleared
+            this.filteredLocations = this.locations.map(location => ({
+                ...location,
+                checked: this.selectedFilters.location.find((l) => l.city === location.city)?.checked || false
+            }));
+        }
+    }
+    filterGroups() {
+        const searchText = this.searchGroupText.toLowerCase();
+        if (searchText) {
+            // Preserve the checked state during filtering
+            this.filteredGroups = this.groupsData
+                .map(group => ({
+                ...group,
+                checked: this.filteredGroups.find(g => g.groupName === group.groupName)?.checked || false
+            }))
+                .filter(group => group?.groupName?.toLowerCase().includes(searchText));
+        }
+        else {
+            // Restore the original checked state when search text is cleared
+            this.filteredGroups = this.groupsData.map(group => ({
+                ...group,
+                checked: this.selectedFilters.group.find((g) => g.groupName === group.groupName)?.checked || false
+            }));
+        }
+    }
+    filterStores() {
+        const searchText = this.searchStoreText.toLowerCase();
+        // Preserve checked states during filtering
+        if (searchText) {
+            // Filter based on search text while preserving checked state
+            this.filteredStores = this.stores
+                .map(store => ({
+                ...store,
+                // Check if the store is already checked in filteredStores, fallback to original stores' checked state
+                checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked || store.checked || false
+            }))
+                .filter(store => store.storeName.toLowerCase().includes(searchText));
+        }
+        else {
+            // When the search text is cleared, restore the original list with preserved checked states
+            this.filteredStores = this.stores.map(store => ({
+                ...store,
+                // Preserve the checked state based on the selected filters
+                checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked || store.checked || false
+            }));
+        }
+    }
+    closeDropdown() {
+        this.dropdownOpen = null;
+    }
+    clickOutside(event) {
+        const clickedInside = event.target.closest(".dropdown-container");
+        const clickedoutSide = event.target.closest(".dropdown1");
+        if (!clickedInside) {
+            this.closeDropdown();
+        }
+        if (!clickedoutSide) {
+            this.closeDropdown1();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficNobComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficNobComponent, selector: "lib-traffic-nob", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n        <!-- <span class=\"me-2\">Filter</span> -->\r\n        <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n\r\n    <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n        <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n            <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n\r\n     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedLocationsLabel()\"\r\n            (focus)=\"toggleDropdown('location')\" \r\n            readonly\r\n            placeholder=\"Select locations...\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search locations...\" \r\n            [(ngModel)]=\"searchLocationText\" \r\n            (ngModelChange)=\"filterLocations()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocations\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n                Select All Locations\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let location of filteredLocations\"\r\n        >\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                [id]=\"location.city\" \r\n                [(ngModel)]=\"location.checked\"\r\n                (change)=\"updateSelectedLocations()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"location.city\">\r\n                {{ location.city }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedGroupsLabel()\" readonly\r\n            placeholder=\"Select clusters..\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search clusters...\" \r\n            [(ngModel)]=\"searchGroupText\" \r\n            (ngModelChange)=\"filterGroups()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroups\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let group of filteredGroups\"\r\n        >\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                [id]=\"group.groupName\"\r\n                [(ngModel)]=\"group.checked\"\r\n                (change)=\"updateSelectedGroups()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n                {{ group.groupName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\"\r\n            [value]=\"selectedStoresLabel()\"\r\n            readonly\r\n            placeholder=\"Select stores...\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search \" \r\n            placeholder=\"Search stores...\" \r\n            [(ngModel)]=\"searchStoreText\" \r\n            (ngModelChange)=\"filterStores()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStores\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllStores\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let store of filteredStores\"\r\n        >\r\n            <input \r\n                class=\"form-check-input\" \r\n                type=\"checkbox\" \r\n                [id]=\"store.storeId\"\r\n                [(ngModel)]=\"store.checked\"\r\n                (change)=\"updateSelectedStores()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n                {{ store.storeName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.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.3.12", ngImport: i0, type: TrafficNobComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-traffic-nob', template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n        <!-- <span class=\"me-2\">Filter</span> -->\r\n        <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n\r\n    <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n        <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n            <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n\r\n     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedLocationsLabel()\"\r\n            (focus)=\"toggleDropdown('location')\" \r\n            readonly\r\n            placeholder=\"Select locations...\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search locations...\" \r\n            [(ngModel)]=\"searchLocationText\" \r\n            (ngModelChange)=\"filterLocations()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocations\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n                Select All Locations\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let location of filteredLocations\"\r\n        >\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                [id]=\"location.city\" \r\n                [(ngModel)]=\"location.checked\"\r\n                (change)=\"updateSelectedLocations()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"location.city\">\r\n                {{ location.city }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<!-- Group Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedGroupsLabel()\" readonly\r\n            placeholder=\"Select clusters..\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search clusters...\" \r\n            [(ngModel)]=\"searchGroupText\" \r\n            (ngModelChange)=\"filterGroups()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroups\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let group of filteredGroups\"\r\n        >\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                [id]=\"group.groupName\"\r\n                [(ngModel)]=\"group.checked\"\r\n                (change)=\"updateSelectedGroups()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n                {{ group.groupName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\"\r\n            [value]=\"selectedStoresLabel()\"\r\n            readonly\r\n            placeholder=\"Select stores...\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search \" \r\n            placeholder=\"Search stores...\" \r\n            [(ngModel)]=\"searchStoreText\" \r\n            (ngModelChange)=\"filterStores()\" \r\n        />\r\n        <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n            <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStores\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllStores\">\r\n                Select All\r\n            </label>\r\n        </div>\r\n        <div \r\n            class=\"dropdown-item form-check custom-dropdown-item\" \r\n            *ngFor=\"let store of filteredStores\"\r\n        >\r\n            <input \r\n                class=\"form-check-input\" \r\n                type=\"checkbox\" \r\n                [id]=\"store.storeId\"\r\n                [(ngModel)]=\"store.checked\"\r\n                (change)=\"updateSelectedStores()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n                {{ store.storeName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], clickOutside: [{
+                type: HostListener,
+                args: ["document:click", ["$event"]]
+            }] } });
+
+class ToolbarComponent {
+    layout;
+    router;
+    route;
+    gs;
+    unsubscribe = [];
+    // Public props
+    currentLayoutType;
+    appToolbarLayout;
+    // toolbar
+    appToolbarDisplay;
+    appToolbarContainer;
+    appToolbarContainerCSSClass = "";
+    appToolbarFixedDesktop;
+    appToolbarFixedMobile;
+    appPageTitleDisplay;
+    // page title
+    appPageTitleDirection = "";
+    appPageTitleCSSClass = "";
+    appPageTitleBreadcrumb;
+    appPageTitleDescription;
+    querParams;
+    singleSelect;
+    multiSelect;
+    datepicker;
+    singleSelectdatepicker;
+    singleStore;
+    headervalue;
+    storeId;
+    users;
+    selectedFilters = {
+        client: null,
+        clients: [],
+        store: null,
+        stores: [],
+        date: null,
+    };
+    trafficdatepicker;
+    traxdatepicker;
+    urlString;
+    traxwithoutdatepicker;
+    storesSingle;
+    nobWithoutClient;
+    constructor(layout, router, route, gs) {
+        this.layout = layout;
+        this.router = router;
+        this.route = route;
+        this.gs = gs;
+    }
+    ngOnInit() {
+        if ("user-info" in localStorage) {
+            const userData = JSON.parse(localStorage.getItem("user-info") || "{}");
+            this.users = userData;
+        }
+        this.showPageTitle();
+        const subscr = this.layout.layoutConfigSubject
+            .asObservable()
+            .subscribe((config) => {
+            this.updateProps(config);
+        });
+        this.unsubscribe.push(subscr);
+    }
+    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");
+    }
+    destroy$ = new Subject();
+    ngOnDestroy() {
+        this.unsubscribe.forEach((sb) => sb.unsubscribe());
+        this.destroy$.next(true);
+        this.destroy$.complete();
+    }
+    showPageTitle() {
+        let URL = "";
+        if ("header-filters" in localStorage) {
+            const data = JSON.parse(localStorage.getItem("header-filters") || "{}");
+            const store = this.route.snapshot.queryParamMap;
+            this.storeId = data?.store;
+            if (store?.params?.['storeId']) {
+                this.storeId = store.params['storeId'];
+                data.store = store.params['storeId'];
+                localStorage.setItem('header-filters', JSON.stringify(data));
+            }
+            const currentUrl = this.router.url;
+            const updatedUrl = currentUrl.replace(/\/manage\/stores\/\d+-\d+\//, `/manage/stores/`);
+            URL = updatedUrl;
+            // this.router.navigate([URL])
+        }
+        const url = URL.split("?")[0].split('/');
+        this.urlString = URL;
+        if (this.users?.userType === "tango") {
+            if (url[2] == "settings" || URL == "/manage/users/client" ||
+                URL == "/manage/stores" || URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" ||
+                URL == "/manage/stores/addition-method" ||
+                URL == "/manage/stores/add-single-store" || URL === "/manage/trax/gallery" || URL == "/notifications/alerts?tab=alert" || URL == "/notifications/alerts?tab=download") {
+                this.setUIProperties(true, false, false, false, false, false, false, false, false, false);
+            }
+            else if (url[3] == "edge-app") {
+                this.setUIProperties(false, false, false, false, true, false, false, false, false, false);
+            }
+            else if (URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
+                URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
+                URL == `/manage/stores/zones?storeId=${this.storeId}` ||
+                URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
+                // URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
+                URL == `/manage/stores/mat?storeId=${this.storeId}`) {
+                this.setUIProperties(false, false, false, true, false, false, false, false, false, false);
+            }
+            else if (url[2] === 'controlcenter') {
+                if (URL == `/manage/controlcenter/playback?storeId=${this.storeId}` || URL == `/manage/controlcenter/playback`) {
+                    this.setUIProperties(false, false, false, false, false, false, false, false, true, false);
+                }
+                else {
+                    this.setUIProperties(false, false, false, false, true, false, false, false, false, false);
+                }
+            }
+            else if (URL == "/profile" || url[2] === "data-mismatch" || url[2] === "employeetraining"
+                || URL == "/manage/brands" || URL == "/manage/users/tango" || (url[1] === "tickets" && url[2] === "audit")) {
+                this.setUIProperties(false, false, false, false, false, false, false, false, false, false);
+            }
+            else if (URL == "/manage/traffic/nob") {
+                this.setUIProperties(false, false, false, false, false, false, false, false, false, true);
+            }
+            else if (url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports") {
+                this.setUIProperties(false, false, false, false, false, true, false, false, false, false);
+            }
+            else if (url[2] == 'trax') {
+                if (url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure') || url.includes('create-order') || url[3] == 'create-task' || url[3] == 'task-configure')) {
+                    this.setUIProperties(false, false, false, false, false, false, false, false, false, false);
+                }
+                else if (url[2] == 'trax' && (url.includes('taskinfo'))) {
+                    this.setUIProperties(false, false, false, false, false, false, false, true, false, false);
+                }
+                else if (url[2] == 'trax' && (url.includes('checklist') || url.includes('gallery'))) {
+                    this.setUIProperties(true, false, false, false, false, false, false, false, false, false);
+                }
+                else {
+                    this.setUIProperties(false, false, false, false, false, false, true, false, false, false);
+                }
+            }
+            else {
+                this.setUIProperties(false, false, false, false, true, false, false, false, false, false);
+            }
+        }
+        else {
+            if (url[3] == "edge-app") {
+                this.setUIProperties(false, false, true, false, false, false, false, false, false, false);
+            }
+            else if (URL == `/manage/stores/infra-ticket?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=infra` ||
+                URL == `/manage/stores/settings?storeId=${this.storeId}` || URL == `/manage/stores/infra-ticket?storeId=${this.storeId}&type=dataMismatch` ||
+                URL == `/manage/stores/zones?storeId=${this.storeId}` ||
+                URL == `/manage/stores/cameras?storeId=${this.storeId}` ||
+                // URL == `/manage/stores/infrastructure?storeId=${this.storeId}` ||
+                URL == `/manage/stores/mat?storeId=${this.storeId}`) {
+                this.setUIProperties(false, false, false, true, false, false, false, false, false, false);
+            }
+            else if (url[2] === 'controlcenter') {
+                if (URL == `/manage/controlcenter/playback?storeId=${this.storeId}` || URL == `/manage/controlcenter/playback`) {
+                    this.setUIProperties(false, false, false, false, false, false, false, false, true, false);
+                }
+                else {
+                    this.setUIProperties(false, false, false, false, true, false, false, false, false, false);
+                }
+            }
+            else if (URL == "/profile" || URL == "/manage/users/client" || URL == "/manage/users/tango" ||
+                URL == "/manage/stores" || URL === "/manage/stores?type=stores" || URL === "/manage/stores?type=clusters" || url[2] == "settings" ||
+                URL == "/manage/stores/addition-method" ||
+                URL == "/manage/stores/add-single-store" || url[2] === "data-mismatch" || url[2] === "employeetraining" || URL == "/notifications/alerts?tab=alert" || URL == "/notifications/alerts?tab=download"
+                || URL == "/manage/users/tango" || URL === "/manage/controlcenter" || URL === 'manage/controlcenter/template-manager' || url[2] === 'controlcenter') {
+                this.setUIProperties(false, false, false, false, false, false, false, false, false, false);
+            }
+            else if (URL == "/manage/traffic/nob") {
+                this.setUIProperties(false, false, false, false, false, false, false, false, false, true);
             }
             else if (url[2] === "traffic" || url[2] === "zones" || URL == "/manage/analyse/reports") {
-                this.setUIProperties(false, false, false, false, false, true, false, false, false);
+                this.setUIProperties(false, false, false, false, false, true, false, false, false, false);
             }
             else if (url[2] == 'trax') {
                 if (url[2] == 'trax' && (url.includes('createChecklist') || url.includes('configure') || url.includes('create-order') || url[3] == 'create-task' || url[3] == 'task-configure')) {
-                    this.setUIProperties(false, false, false, false, false, false, false, false, false);
+                    this.setUIProperties(false, false, false, false, false, false, false, false, false, false);
                 }
                 else if (url[2] == 'trax' && (url.includes('taskinfo'))) {
-                    this.setUIProperties(false, false, false, false, false, false, false, true, false);
+                    this.setUIProperties(false, false, false, false, false, false, false, true, false, false);
                 }
                 else if (url[2] == 'trax' && (url.includes('checklist') || url.includes('gallery'))) {
-                    this.setUIProperties(true, false, false, false, false, false, false, false, false);
+                    this.setUIProperties(true, false, false, false, false, false, false, false, false, false);
                 }
                 else {
-                    this.setUIProperties(false, false, false, false, false, false, true, false, false);
+                    this.setUIProperties(false, false, false, false, false, false, true, false, false, false);
                 }
             }
             else {
-                this.setUIProperties(false, false, true, false, false, false, false, false, false);
+                this.setUIProperties(false, false, true, false, false, false, false, false, false, false);
             }
         }
         const viewsWithPageTitles = ["classic", "reports", "saas"];
         return (this.appPageTitleDisplay &&
             viewsWithPageTitles.some((t) => t === this.appToolbarLayout));
     }
-    setUIProperties(singleSelect, multiSelect, datepicker, singleStore, singleSelectdatepicker, trafficdatepicker, traxdatepicker, traxwithoutdatepicker, storesSingle) {
+    setUIProperties(singleSelect, multiSelect, datepicker, singleStore, singleSelectdatepicker, trafficdatepicker, traxdatepicker, traxwithoutdatepicker, storesSingle, nobWithoutClient) {
         this.singleSelect = singleSelect;
         this.multiSelect = multiSelect;
         this.datepicker = datepicker;
@@ -5853,13 +6638,14 @@ class ToolbarComponent {
         this.traxdatepicker = traxdatepicker;
         this.traxwithoutdatepicker = traxwithoutdatepicker;
         this.storesSingle = storesSingle;
+        this.nobWithoutClient = nobWithoutClient;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1.LayoutService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: i1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, selector: "lib-toolbar", inputs: { currentLayoutType: "currentLayoutType", appToolbarLayout: "appToolbarLayout" }, ngImport: i0, template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n  <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\"  >\r\n  <ng-container *ngIf=\"showPageTitle()\">\r\n    <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n      [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n      [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n    </lib-page-title>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n    <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n    <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n    <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleStore\">\r\n    <lib-single-store class=\"d-flex align-items-center me-5\"></lib-single-store>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"trafficdatepicker\">\r\n    <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxdatepicker\">\r\n    <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxwithoutdatepicker\">\r\n    <lib-trax-withoutdate class=\"d-flex align-items-center me-5\"></lib-trax-withoutdate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"storesSingle\">\r\n    <lib-single-storedate class=\"d-flex align-items-center me-5\"></lib-single-storedate>\r\n   </ng-container>\r\n   \r\n   \r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n    <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n    <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n    </lib-reports>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n    <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n  </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageTitleComponent, selector: "lib-page-title", inputs: ["appPageTitleDirection", "appPageTitleBreadcrumb", "appPageTitleDescription"] }, { kind: "component", type: ClassicComponent, selector: "lib-classic" }, { kind: "component", type: ClientSettingsComponent, selector: "lib-client-settings" }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker" }, { kind: "component", type: DateSingleSelectComponent, selector: "lib-date-single-select" }, { kind: "component", type: SingleStoreComponent, selector: "lib-single-store", inputs: ["urlString"] }, { kind: "component", type: TrafficHeaderComponent, selector: "lib-traffic-header" }, { kind: "component", type: TraxHeaderComponent, selector: "lib-trax-header" }, { kind: "component", type: SingleStoredateComponent, selector: "lib-single-storedate" }, { kind: "component", type: TraxWithoutdateComponent, selector: "lib-trax-withoutdate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ToolbarComponent, selector: "lib-toolbar", inputs: { currentLayoutType: "currentLayoutType", appToolbarLayout: "appToolbarLayout" }, ngImport: i0, template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n  <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\"  >\r\n  <ng-container *ngIf=\"showPageTitle()\">\r\n    <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n      [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n      [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n    </lib-page-title>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n    <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n    <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n    <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleStore\">\r\n    <lib-single-store class=\"d-flex align-items-center me-5\"></lib-single-store>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"trafficdatepicker\">\r\n    <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxdatepicker\">\r\n    <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxwithoutdatepicker\">\r\n    <lib-trax-withoutdate class=\"d-flex align-items-center me-5\"></lib-trax-withoutdate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"storesSingle\">\r\n    <lib-single-storedate class=\"d-flex align-items-center me-5\"></lib-single-storedate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"nobWithoutClient\">\r\n    <lib-traffic-nob class=\"d-flex align-items-center me-5\"></lib-traffic-nob>\r\n   </ng-container>\r\n   \r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n    <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n    <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n    </lib-reports>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n    <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n  </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PageTitleComponent, selector: "lib-page-title", inputs: ["appPageTitleDirection", "appPageTitleBreadcrumb", "appPageTitleDescription"] }, { kind: "component", type: ClassicComponent, selector: "lib-classic" }, { kind: "component", type: ClientSettingsComponent, selector: "lib-client-settings" }, { kind: "component", type: DatepickerComponent, selector: "lib-datepicker" }, { kind: "component", type: DateSingleSelectComponent, selector: "lib-date-single-select" }, { kind: "component", type: SingleStoreComponent, selector: "lib-single-store", inputs: ["urlString"] }, { kind: "component", type: TrafficHeaderComponent, selector: "lib-traffic-header" }, { kind: "component", type: TraxHeaderComponent, selector: "lib-trax-header" }, { kind: "component", type: SingleStoredateComponent, selector: "lib-single-storedate" }, { kind: "component", type: TraxWithoutdateComponent, selector: "lib-trax-withoutdate" }, { kind: "component", type: TrafficNobComponent, selector: "lib-traffic-nob" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\"  >\r\n  <ng-container *ngIf=\"showPageTitle()\">\r\n    <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n      [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n      [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n    </lib-page-title>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n    <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n    <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n    <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleStore\">\r\n    <lib-single-store class=\"d-flex align-items-center me-5\"></lib-single-store>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"trafficdatepicker\">\r\n    <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxdatepicker\">\r\n    <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxwithoutdatepicker\">\r\n    <lib-trax-withoutdate class=\"d-flex align-items-center me-5\"></lib-trax-withoutdate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"storesSingle\">\r\n    <lib-single-storedate class=\"d-flex align-items-center me-5\"></lib-single-storedate>\r\n   </ng-container>\r\n   \r\n   \r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n    <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n    <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n    </lib-reports>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n    <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n  </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n" }]
+            args: [{ selector: "lib-toolbar", template: "<!--begin::Toolbar container-->\r\n<div id=\"kt_app_toolbar_container\" class=\"app-container\" [ngClass]=\"appToolbarContainerCSSClass\">\r\n  <ng-container *ngIf=\"(gs.userAccess | async)?.userType === 'tango' || (gs.userAccess | async)?.userType === 'client' || (gs.userAccess | async)?.userType === 'lead'\"  >\r\n  <ng-container *ngIf=\"showPageTitle()\">\r\n    <lib-page-title [appPageTitleDirection]=\"appPageTitleDirection\" [appPageTitleBreadcrumb]=\"appPageTitleBreadcrumb\"\r\n      [appPageTitleDescription]=\"appPageTitleDescription\" class=\"page-title d-flex flex-wrap me-3\"\r\n      [ngClass]=\"{'flex-column justify-content-center': appPageTitleDirection === 'column', 'align-items-center': appPageTitleDirection !== 'column', appPageTitleCSSClass}\">\r\n    </lib-page-title>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"multiSelect && users.userType ==='tango'\">\r\n    <lib-classic class=\"d-flex align-items-center gap-2 gap-lg-3\"></lib-classic>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"singleSelect && users.userType ==='tango'\">\r\n    <lib-client-settings class=\"d-flex align-items-center me-5\"></lib-client-settings>\r\n   </ng-container>\r\n\r\n   <ng-container *ngIf=\"datepicker && users.userType ==='client'\">\r\n    <lib-datepicker class=\"d-flex align-items-center me-5\"></lib-datepicker>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleSelectdatepicker && users.userType ==='tango'\">\r\n    <lib-date-single-select class=\"d-flex align-items-center me-5\"></lib-date-single-select>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"singleStore\">\r\n    <lib-single-store class=\"d-flex align-items-center me-5\"></lib-single-store>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"trafficdatepicker\">\r\n    <lib-traffic-header class=\"d-flex align-items-center me-5\"></lib-traffic-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxdatepicker\">\r\n    <lib-trax-header class=\"d-flex align-items-center me-5\"></lib-trax-header>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"traxwithoutdatepicker\">\r\n    <lib-trax-withoutdate class=\"d-flex align-items-center me-5\"></lib-trax-withoutdate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"storesSingle\">\r\n    <lib-single-storedate class=\"d-flex align-items-center me-5\"></lib-single-storedate>\r\n   </ng-container>\r\n   <ng-container *ngIf=\"nobWithoutClient\">\r\n    <lib-traffic-nob class=\"d-flex align-items-center me-5\"></lib-traffic-nob>\r\n   </ng-container>\r\n   \r\n <!-- <ng-container *ngIf=\"appToolbarLayout === 'extended'\">\r\n    <lib-extended class=\"d-flex align-items-center flex-shrink-0 me-5\"></lib-extended>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'reports'\">\r\n    <lib-reports class=\"d-flex align-items-center overflow-auto\" [appPageTitleDisplay]=\"appPageTitleDisplay\">\r\n    </lib-reports>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"appToolbarLayout === 'saas'\">\r\n    <lib-saas class=\"d-flex align-items-center gap-2\" [appPageTitleDisplay]=\"appPageTitleDisplay\"></lib-saas>\r\n  </ng-container> -->\r\n</ng-container>\r\n</div>\r\n<!--end::Toolbar container-->\r\n" }]
         }], ctorParameters: () => [{ type: i1.LayoutService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: i1.GlobalStateService }], propDecorators: { currentLayoutType: [{
                 type: Input
             }], appToolbarLayout: [{
@@ -8009,7 +8795,8 @@ class LayoutModule {
             TraxHeaderComponent,
             SingleStoredateComponent,
             StoresingleComponent,
-            TraxWithoutdateComponent], imports: [CommonModule, i2.RouterModule, TranslationModule,
+            TraxWithoutdateComponent,
+            TrafficNobComponent], imports: [CommonModule, i2.RouterModule, TranslationModule,
             InlineSVGModule,
             NgbDropdownModule,
             NgbProgressbarModule,
@@ -8076,7 +8863,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         TraxHeaderComponent,
                         SingleStoredateComponent,
                         StoresingleComponent,
-                        TraxWithoutdateComponent
+                        TraxWithoutdateComponent,
+                        TrafficNobComponent
                     ],
                     imports: [
                         CommonModule,