tango-app-ui-shared 3.7.3-dev6-copilot3 → 3.7.3-dev6-copilot5

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

@@ -189,7 +189,7 @@ class AuthService {
         return this.http.get(`${this.clientApiUrl}/detailed-all-client-count`);
     }
     getDowntimeHeader(data) {
-        return this.http.post(`${this.trafficApiUrl}/downtimeHeader_v2`, data);
+        return this.http.post(`${this.trafficApiUrl}/get-store-list-v2`, data);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuthService, deps: [{ token: i2.Router }, { token: i1.GlobalStateService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AuthService, providedIn: 'root' });
@@ -1406,6 +1406,7 @@ class TrafficHeaderComponent {
         group: [],
         location: [],
         country: [],
+        downtime: []
     };
     Opendropdown = false;
     dropdownOpen = null; // 'location' or 'group'
@@ -1468,6 +1469,7 @@ class TrafficHeaderComponent {
                             checked: store.checked
                         }));
                     }
+                    this.restoreDowntimeFromStorage();
                 }
             }
         });
@@ -1476,10 +1478,7 @@ class TrafficHeaderComponent {
             this.getClient();
         }
         else {
-            this.getCountry();
-            this.getLocations();
-            this.getGroups();
-            this.getStore();
+            this.getStatus();
             const clientFilters = localStorage.getItem("client-details");
             if (clientFilters) {
                 const headerclientFilters = JSON.parse(clientFilters);
@@ -1502,13 +1501,15 @@ class TrafficHeaderComponent {
                 stores: headerFilters.stores || [],
                 group: headerFilters.group || [],
                 location: headerFilters.location || [],
-                country: headerFilters.country || []
+                country: headerFilters.country || [],
+                downtime: headerFilters.downtime || []
             };
             // Sync filtered data with stored selections
             this.filteredCountries = this.syncWithLocalStorage(headerFilters.country);
             this.filteredLocations = this.syncWithLocalStorage(headerFilters.location);
             this.filteredGroups = this.syncWithLocalStorage(headerFilters.group);
             this.filteredStores = this.syncWithLocalStorage(headerFilters.stores);
+            this.downtimeData = this.syncWithLocalStorage(headerFilters.downtime);
             // Format date range if it exists
             if (headerFilters.date) {
                 this.selectedDateRange = {
@@ -1559,12 +1560,14 @@ class TrafficHeaderComponent {
             stores: [],
             group: [],
             location: [],
-            country: []
+            country: [],
+            downtime: [],
         };
         this.filteredLocations = [];
         this.filteredGroups = [];
         this.filteredStores = [];
         this.filteredCountries = [];
+        this.downtimeData = [];
     }
     getClient() {
         this.auth.getClients().subscribe({
@@ -1601,14 +1604,12 @@ class TrafficHeaderComponent {
                         this.selectedFilters.group = headerFilters.group;
                         this.selectedFilters.location = headerFilters.location;
                         this.selectedFilters.country = headerFilters.country;
+                        this.selectedFilters.downtime = headerFilters.downtime;
                         this.gs.dataRangeValue.next(this.selectedFilters);
                         // console.log("2")
                         // Ensure locations and groups are loaded before fetching stores
-                        this.getCountry();
-                        this.getLocations();
-                        this.getGroups();
-                        // Fetch stores only after locations and groups are set
-                        this.getStore();
+                        this.getStatus();
+                        this.restoreDowntimeFromStorage();
                     }
                     else {
                         this.selectedClient = this.clientList[0];
@@ -1621,16 +1622,13 @@ class TrafficHeaderComponent {
                         this.selectedFilters.group = headerFilters.group;
                         this.selectedFilters.location = headerFilters.location;
                         this.selectedFilters.country = headerFilters.country;
+                        this.selectedFilters.downtime = headerFilters.downtime;
                         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.getCountry();
-                        this.getLocations();
-                        this.getGroups();
-                        // Fetch stores only after locations and groups are set
-                        this.getStore();
+                        this.getStatus();
                     }
                 }
                 else {
@@ -1638,11 +1636,7 @@ class TrafficHeaderComponent {
                     this.selectedFilters.client = this.selectedClient.clientId;
                     this.selectedFilters.clientName = this.selectedClient.clientName;
                     // Ensure locations and groups are loaded before fetching stores
-                    this.getCountry();
-                    this.getLocations();
-                    this.getGroups();
-                    // Fetch stores only after locations and groups are set
-                    this.getStore();
+                    this.getStatus();
                     localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
                     this.gs.dataRangeValue.next(this.selectedFilters);
                     // console.log("4")
@@ -1675,6 +1669,7 @@ class TrafficHeaderComponent {
         this.selectedFilters.group = [];
         this.selectedFilters.location = [];
         this.selectedFilters.country = [];
+        this.selectedFilters.downtime = [];
         // Fetch header filters from localStorage
         const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
         // Update the selected filters with the new client
@@ -1685,11 +1680,13 @@ class TrafficHeaderComponent {
         delete headerFilters.groups;
         delete headerFilters.location;
         delete headerFilters.country;
+        delete headerFilters.downtime;
         // Fetch new data based on the new client
-        this.getCountry();
-        this.getLocations();
-        this.getStore();
-        this.getGroups();
+        // this.getCountry();
+        // this.getLocations();
+        // this.getStore();
+        // this.getGroups();
+        this.getStatus();
         // Update localStorage with the new client selection and empty filter data
         localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
         window.location.reload();
@@ -1759,6 +1756,8 @@ class TrafficHeaderComponent {
             country,
             city: [],
             group: [],
+            status: this.selectedFilters?.status?.length
+                ? this.selectedFilters.status : ['active']
         };
         this.auth.getLocation(obj).subscribe({
             next: (res) => {
@@ -1833,7 +1832,10 @@ class TrafficHeaderComponent {
         if (!city.length && country.length) {
             city = this.locations.map((loc) => loc.city);
         }
-        const obj = { country, city, clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId, group: [] };
+        const obj = { country, city, clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId, group: [],
+            status: this.selectedFilters?.status?.length
+                ? this.selectedFilters.status : ['active']
+        };
         this.auth.getGroups(obj).subscribe({
             next: (res) => {
                 let checkedGroup = this.selectedFilters?.group?.filter((group) => group.checked).map((group) => group.groupName);
@@ -1870,6 +1872,9 @@ class TrafficHeaderComponent {
         else {
             // Open the specific dropdown and handle data fetching only if necessary
             this.dropdownOpen = type;
+            if (type === "status") {
+                this.getStatus();
+            }
             if (type === 'country') {
                 // Fetch countries only if not already fetched and no search text exists
                 if ((!this.filteredCountries || this.filteredCountries.length === 0) && !this.searchCountryText.trim()) {
@@ -1941,7 +1946,9 @@ class TrafficHeaderComponent {
             country,
             city,
             clusters: group,
-            clientId: this.users.clientId || this.selectedFilters.client
+            clientId: this.users.clientId || this.selectedFilters.client,
+            status: this.selectedFilters?.status?.length
+                ? this.selectedFilters.status : ['active']
         };
         this.auth.getHeaderStores(data).subscribe({
             next: (res) => {
@@ -1972,6 +1979,7 @@ class TrafficHeaderComponent {
                         checked: store.checked
                     }));
                     // this.selectedFilters.country = country;
+                    this.downtimeApi();
                     // Save updated filters to localStorage
                     localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
                     // Trigger UI change detection
@@ -2121,6 +2129,7 @@ class TrafficHeaderComponent {
             this.filteredGroups = [];
             this.filteredStores = [];
             this.filteredLocations = []; // Reset locations as well
+            this.downtimeData = [];
             this.locations = [];
             this.groupsData = [];
             this.stores = [];
@@ -2133,11 +2142,13 @@ class TrafficHeaderComponent {
             this.selectedFilters.group = [];
             this.selectedFilters.location = [];
             this.selectedFilters.country = [];
+            this.selectedFilters.downtime = [];
             // Fetch locations, groups, and stores again
-            this.getCountry();
-            this.getLocations();
-            this.getStore();
-            this.getGroups();
+            // this.getCountry();
+            // this.getLocations();
+            // this.getStore();
+            // this.getGroups();
+            this.getStatus();
             // Reset the filters in selectedFilters
             // // Once stores are fetched, mark all as checked
             // setTimeout(() => {
@@ -2308,6 +2319,8 @@ class TrafficHeaderComponent {
     getCountry() {
         let obj = {
             clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
+            status: this.selectedFilters?.status?.length
+                ? this.selectedFilters.status : ['active']
         };
         this.auth.getCountry(obj).subscribe({
             next: (res) => {
@@ -2439,6 +2452,7 @@ class TrafficHeaderComponent {
         this.selectedFilters.location = this.locations;
         this.selectedFilters.group = this.groupsData;
         this.selectedFilters.stores = headerFilters.stores ? headerFilters.stores : this.stores;
+        this.selectedFilters.downtime = this.selectedDowntimeValues ? this.selectedDowntimeValues : headerFilters?.downtime ? headerFilters?.downtime : [];
         // Store updated filters back in localStorage
         localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
         // this.gs.dataRangeValue.next(this.selectedFilters);
@@ -2451,6 +2465,8 @@ class TrafficHeaderComponent {
     }
     getSelectedCount(type) {
         switch (type) {
+            case 'status':
+                return this.selectedStatusLabel1();
             case 'country':
                 return this.selectedCountriesLabel1();
             case 'location':
@@ -2478,6 +2494,11 @@ class TrafficHeaderComponent {
         this.filterGroups();
         this.filterStores();
     }
+    showClick(type, e) {
+        this.opendropdown(e);
+        this.Opendropdown = true;
+        this.activeDropdown = type;
+    }
     downtimeOptions = [
         { label: '0-120 mins', value: '0-120', checked: false },
         { label: '121-360 mins', value: '121-360', checked: false },
@@ -2504,30 +2525,51 @@ class TrafficHeaderComponent {
     }
     // 3. When any single checkbox is changed
     updateSelectedDowntime() {
-        // collect all checked values (you can use this for API/filter)
         this.selectedDowntimeValues = this.downtimeOptions
             .filter(opt => opt.checked)
             .map(opt => opt.value);
-        // optional: debug
-        // console.log('Selected downtime:', this.selectedDowntimeValues);
+        // ⬇ call downtime API whenever user changes downtime filter
+        this.downtimeApi();
     }
     downtimeData = [];
     downtimeApi() {
-        let obj = {
-            clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
+        const obj = {
+            clientId: this.selectedFilters.client
+                ? this.selectedFilters.client
+                : this.users.clientId,
             storeId: this.selectedFilters?.stores
-                ? this.selectedFilters.stores.filter((store) => store.checked).map((store) => store.storeId)
+                ? this.selectedFilters.stores
+                    .filter((store) => store.checked)
+                    .map((store) => store.storeId)
                 : [],
-            "downtime": [
-                ...this.selectedDowntimeValues
-            ],
-            fromDate: this.selectedFilters.fromDate,
-            toDate: this.selectedFilters.toDate,
+            downtime: this.selectedDowntimeValues ? [...this.selectedDowntimeValues] : this.selectedFilters?.downtime ? this.selectedFilters?.downtime : [],
+            fromDate: this.selectedFilters?.date?.startDate,
+            toDate: this.selectedFilters?.date?.endDate,
         };
         this.auth.getDowntimeHeader(obj).subscribe({
             next: (res) => {
                 if (res && res.code === 200) {
-                    this.downtimeData = res.data.downtimeData;
+                    this.downtimeData = res.data.storesData || [];
+                    // ✅ 1) get storeIds that match downtime filter
+                    const downtimeStoreIds = this.downtimeData.map((d) => d.storeId);
+                    // ✅ 2) update stores.checked based on downtime result
+                    // 1) mark stores as checked based on downtime results
+                    this.stores.forEach((store) => {
+                        store.checked = downtimeStoreIds.includes(store.storeId);
+                    });
+                    console.log("Stores after downtime filter:", this.stores);
+                    // 2) filteredStores → only checked stores
+                    this.filteredStores = this.stores.filter((s) => true === s.checked);
+                    console.log("Filtered stores after downtime filter:", this.filteredStores);
+                    // 3) selectedFilters.stores → all stores, preserve checked flag
+                    this.selectedFilters.stores = this.stores.map((store) => ({
+                        storeId: store.storeId,
+                        storeName: store.storeName,
+                        checked: store.checked
+                    }));
+                    console.log("Selected filters after downtime filter:", this.selectedFilters.stores);
+                    // optional: save to localStorage if you want
+                    localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
                 }
                 else {
                     this.downtimeData = [];
@@ -2535,15 +2577,127 @@ class TrafficHeaderComponent {
             },
             error: (err) => {
                 console.error("Failed to fetch downtime data", err);
-            }
+            },
         });
     }
+    restoreDowntimeFromStorage() {
+        const storedDowntime = this.selectedFilters?.downtime || [];
+        console.log("Restoring downtime from storage:", storedDowntime);
+        // mark downtimeOptions as checked based on stored values
+        this.downtimeOptions = this.downtimeOptions.map(opt => ({
+            ...opt,
+            checked: storedDowntime.includes(opt.value)
+        }));
+        // sync selectedDowntimeValues
+        this.selectedDowntimeValues = [...storedDowntime];
+        // if you want to immediately load downtime data:
+        if (this.selectedDowntimeValues.length) {
+            this.downtimeApi();
+        }
+    }
+    statusVal;
+    searchStatusText = "";
+    filteredStatus = [];
+    getStatus() {
+        // base status list
+        this.statusVal = [
+            { status: 'active', checked: false },
+            { status: 'deactive', checked: false }
+        ];
+        const storedFilters = localStorage.getItem("header-filters");
+        let statusList = [];
+        if (this.selectedFilters?.status && this.selectedFilters.status.length > 0) {
+            statusList = this.selectedFilters.status;
+        }
+        else if (storedFilters) {
+            const parsed = JSON.parse(storedFilters);
+            statusList = parsed.status && parsed.status.length > 0 ? parsed.status : ['active'];
+        }
+        else {
+            statusList = ['active'];
+        }
+        // update selectedFilters to always have a value
+        this.selectedFilters.status = statusList;
+        // mark checked based on values
+        this.filteredStatus = this.statusVal.map((status) => ({
+            status: status.status,
+            checked: statusList.includes(status.status)
+        }));
+        // if a search text already exists, filter immediately
+        if (this.searchStatusText) {
+            this.filterStatus();
+        }
+        // refresh dependent dropdowns
+        this.getCountry();
+        this.getLocations();
+        this.getGroups();
+        this.getStore();
+    }
+    selectedStatusLabel() {
+        const selectedStatus = this.filteredStatus
+            .filter((status) => status.checked)
+            .map((status) => status.status);
+        if (selectedStatus.length === 0) {
+            return "";
+        }
+        if (selectedStatus.length === 1) {
+            return selectedStatus[0]; // show "active" or "deactive"
+        }
+        return `${selectedStatus.length} status`; // e.g. "2 status"
+    }
+    selectedStatusLabel1() {
+        const selectedStatus = this.filteredStatus
+            .filter((status) => status.checked)
+            .map((status) => status.status);
+        console.log(selectedStatus.length);
+        return `${selectedStatus.length}`; // e.g. "2 status"
+    }
+    filterStatus() {
+        const searchText = this.searchStatusText.toLowerCase();
+        if (searchText) {
+            this.filteredStatus = this.statusVal
+                .map((status) => ({
+                ...status,
+                checked: this.selectedFilters.status?.includes(status.status) || false
+            }))
+                .filter((status) => status.status.toLowerCase().includes(searchText));
+        }
+        else {
+            this.filteredStatus = this.statusVal.map((status) => ({
+                ...status,
+                checked: this.selectedFilters.status?.includes(status.status) || false
+            }));
+        }
+    }
+    isAllStatusSelected() {
+        return (this.filteredStatus.length > 0 &&
+            this.filteredStatus.every((status) => status.checked));
+    }
+    toggleSelectAllStatus(event) {
+        const isChecked = event.target.checked;
+        // Update UI state
+        this.filteredStatus.forEach((status) => (status.checked = isChecked));
+        // Update selectedFilters with only checked status values
+        this.selectedFilters.status = this.filteredStatus
+            .filter((status) => status.checked)
+            .map((status) => status.status);
+        this.updateSelectedCountries();
+    }
+    updateSelectedStatus() {
+        // keep only the checked statuses
+        const selected = this.filteredStatus
+            .filter((status) => status.checked)
+            .map((status) => status.status); // ✅ pick only the value
+        this.statusVal = selected;
+        this.selectedFilters.status = selected;
+        this.updateSelectedCountries();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1\">{{selectedCountriesLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><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=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1\">{{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 mt-1\">{{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 mt-1\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n           <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n          <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n        <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n      </div>\r\n      </div>\r\n      <div class=\"col-7 text-muted my-2\"> \r\n        <!-- Search from 2000 stores -->\r\n          <div *ngIf=\"activeDropdown === 'country'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search country\" \r\n              [(ngModel)]=\"searchCountryText\" \r\n              (ngModelChange)=\"filterCountries()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n             <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n              <span class=\"mb-3 pb-3\"></span>\r\n            <!-- <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search from 2000 stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            /> -->\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div  class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('country')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'country', \r\n    'text-item': activeDropdown !== 'country'\r\n  }\">Country <span *ngIf=\"selectedCountriesLabel1()\"  [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n\r\n               <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'downtime', \r\n    'text-item': activeDropdown !== 'downtime'\r\n  }\" >Downtime in Mins </div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n          <!-- Country Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllCountriesFull\" \r\n                [checked]=\"isAllCountriesSelected()\" \r\n                (change)=\"toggleSelectAllCountries($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'country-full-' + country.country\" \r\n                  [(ngModel)]=\"country.checked\"\r\n                  (change)=\"updateSelectedCountries()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n                  {{ country.country }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Downtime Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllDowntimeFull\" \r\n                [checked]=\"isAllDowntimeSelected()\" \r\n                (change)=\"toggleSelectAllDowntime($event)\">\r\n              <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n                Select All  \r\n              </label>\r\n              </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'downtime-full-' + downtime.value\" \r\n                  [(ngModel)]=\"downtime.checked\"\r\n                  (change)=\"updateSelectedDowntime()\">\r\n                <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n                  {{ downtime.label }}\r\n                </label>\r\n                </div>\r\n                </div>\r\n\r\n          </div>\r\n\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:0 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { 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"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('country', $event)\">{{selectedCountriesLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><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=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('region', $event)\">{{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 mt-1 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{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 (click)=\"showClick('stores', $event)\" class=\"badge badge-light-default mt-1 cursor-pointer\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n           <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n          <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n        <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n      </div>\r\n      </div>\r\n      <div class=\"col-7 text-muted my-2\"> \r\n        <!-- Search from 2000 stores -->\r\n          <div *ngIf=\"activeDropdown === 'status'\">\r\n           <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search status\" \r\n            [(ngModel)]=\"searchStatusText\" \r\n            (ngModelChange)=\"filterStatus()\" \r\n        />\r\n            </div>\r\n\r\n          <div *ngIf=\"activeDropdown === 'country'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search country\" \r\n              [(ngModel)]=\"searchCountryText\" \r\n              (ngModelChange)=\"filterCountries()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n             <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n              <span class=\"mb-5 pb-3\"></span>\r\n            <!-- <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search from 2000 stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            /> -->\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n           <div  class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('status')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'status', \r\n    'text-item': activeDropdown !== 'status'\r\n        }\">Status <span *ngIf=\"selectedStatusLabel1()\"  [ngClass]=\"activeDropdown=== 'status' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedStatusLabel1()}}</span></div>\r\n            \r\n          </div>\r\n          <div  class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('country')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'country', \r\n    'text-item': activeDropdown !== 'country'\r\n  }\">Country <span *ngIf=\"selectedCountriesLabel1()\"  [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n\r\n               <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'downtime', \r\n    'text-item': activeDropdown !== 'downtime'\r\n  }\" >Downtime (In Mins) </div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n<div *ngIf=\"activeDropdown === 'status'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n             <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStatus\" \r\n                [checked]=\"isAllStatusSelected()\" \r\n                (change)=\"toggleSelectAllStatus($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\"  *ngFor=\"let status of filteredStatus\">\r\n                  <input \r\n        class=\"form-check-input cursor-pointer\" \r\n        type=\"checkbox\" \r\n        [id]=\"status.status\" \r\n        [(ngModel)]=\"status.checked\"\r\n        (change)=\"updateSelectedStatus()\" \r\n      />\r\n      <label class=\"form-check-label text-capitalize\" [for]=\"status.status\">\r\n        {{ status.status }}\r\n      </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Country Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllCountriesFull\" \r\n                [checked]=\"isAllCountriesSelected()\" \r\n                (change)=\"toggleSelectAllCountries($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'country-full-' + country.country\" \r\n                  [(ngModel)]=\"country.checked\"\r\n                  (change)=\"updateSelectedCountries()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n                  {{ country.country }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Downtime Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllDowntimeFull\" \r\n                [checked]=\"isAllDowntimeSelected()\" \r\n                (change)=\"toggleSelectAllDowntime($event)\">\r\n              <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n                Select All  \r\n              </label>\r\n              </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'downtime-full-' + downtime.value\" \r\n                  [(ngModel)]=\"downtime.checked\"\r\n                  (change)=\"updateSelectedDowntime()\">\r\n                <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n                  {{ downtime.label }}\r\n                </label>\r\n                </div>\r\n                </div>\r\n\r\n          </div>\r\n\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:2px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { 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"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1\">{{selectedCountriesLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><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=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1\">{{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 mt-1\">{{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 mt-1\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n           <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n          <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n        <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n      </div>\r\n      </div>\r\n      <div class=\"col-7 text-muted my-2\"> \r\n        <!-- Search from 2000 stores -->\r\n          <div *ngIf=\"activeDropdown === 'country'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search country\" \r\n              [(ngModel)]=\"searchCountryText\" \r\n              (ngModelChange)=\"filterCountries()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n             <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n              <span class=\"mb-3 pb-3\"></span>\r\n            <!-- <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search from 2000 stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            /> -->\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div  class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('country')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'country', \r\n    'text-item': activeDropdown !== 'country'\r\n  }\">Country <span *ngIf=\"selectedCountriesLabel1()\"  [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n\r\n               <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'downtime', \r\n    'text-item': activeDropdown !== 'downtime'\r\n  }\" >Downtime in Mins </div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n          <!-- Country Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllCountriesFull\" \r\n                [checked]=\"isAllCountriesSelected()\" \r\n                (change)=\"toggleSelectAllCountries($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'country-full-' + country.country\" \r\n                  [(ngModel)]=\"country.checked\"\r\n                  (change)=\"updateSelectedCountries()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n                  {{ country.country }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Downtime Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllDowntimeFull\" \r\n                [checked]=\"isAllDowntimeSelected()\" \r\n                (change)=\"toggleSelectAllDowntime($event)\">\r\n              <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n                Select All  \r\n              </label>\r\n              </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'downtime-full-' + downtime.value\" \r\n                  [(ngModel)]=\"downtime.checked\"\r\n                  (change)=\"updateSelectedDowntime()\">\r\n                <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n                  {{ downtime.label }}\r\n                </label>\r\n                </div>\r\n                </div>\r\n\r\n          </div>\r\n\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:0 8px}\n"] }]
+            args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('country', $event)\">{{selectedCountriesLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><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=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('region', $event)\">{{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 mt-1 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{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 (click)=\"showClick('stores', $event)\" class=\"badge badge-light-default mt-1 cursor-pointer\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n           <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n          <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n        <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n      </div>\r\n      </div>\r\n      <div class=\"col-7 text-muted my-2\"> \r\n        <!-- Search from 2000 stores -->\r\n          <div *ngIf=\"activeDropdown === 'status'\">\r\n           <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search status\" \r\n            [(ngModel)]=\"searchStatusText\" \r\n            (ngModelChange)=\"filterStatus()\" \r\n        />\r\n            </div>\r\n\r\n          <div *ngIf=\"activeDropdown === 'country'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search country\" \r\n              [(ngModel)]=\"searchCountryText\" \r\n              (ngModelChange)=\"filterCountries()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n             <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n              <span class=\"mb-5 pb-3\"></span>\r\n            <!-- <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search from 2000 stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            /> -->\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n           <div  class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('status')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'status', \r\n    'text-item': activeDropdown !== 'status'\r\n        }\">Status <span *ngIf=\"selectedStatusLabel1()\"  [ngClass]=\"activeDropdown=== 'status' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedStatusLabel1()}}</span></div>\r\n            \r\n          </div>\r\n          <div  class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('country')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'country', \r\n    'text-item': activeDropdown !== 'country'\r\n  }\">Country <span *ngIf=\"selectedCountriesLabel1()\"  [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n\r\n               <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'downtime', \r\n    'text-item': activeDropdown !== 'downtime'\r\n  }\" >Downtime (In Mins) </div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n<div *ngIf=\"activeDropdown === 'status'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n             <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStatus\" \r\n                [checked]=\"isAllStatusSelected()\" \r\n                (change)=\"toggleSelectAllStatus($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\"  *ngFor=\"let status of filteredStatus\">\r\n                  <input \r\n        class=\"form-check-input cursor-pointer\" \r\n        type=\"checkbox\" \r\n        [id]=\"status.status\" \r\n        [(ngModel)]=\"status.checked\"\r\n        (change)=\"updateSelectedStatus()\" \r\n      />\r\n      <label class=\"form-check-label text-capitalize\" [for]=\"status.status\">\r\n        {{ status.status }}\r\n      </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Country Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllCountriesFull\" \r\n                [checked]=\"isAllCountriesSelected()\" \r\n                (change)=\"toggleSelectAllCountries($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'country-full-' + country.country\" \r\n                  [(ngModel)]=\"country.checked\"\r\n                  (change)=\"updateSelectedCountries()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n                  {{ country.country }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Downtime Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllDowntimeFull\" \r\n                [checked]=\"isAllDowntimeSelected()\" \r\n                (change)=\"toggleSelectAllDowntime($event)\">\r\n              <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n                Select All  \r\n              </label>\r\n              </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'downtime-full-' + downtime.value\" \r\n                  [(ngModel)]=\"downtime.checked\"\r\n                  (change)=\"updateSelectedDowntime()\">\r\n                <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n                  {{ downtime.label }}\r\n                </label>\r\n                </div>\r\n                </div>\r\n\r\n          </div>\r\n\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:2px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -3415,6 +3569,11 @@ class TraxHeaderComponent {
             }));
         }
     }
+    showClick(type, e) {
+        this.opendropdown(e);
+        this.Opendropdown = true;
+        this.activeDropdown = type;
+    }
     closeDropdown() {
         this.dropdownOpen = null;
     }
@@ -3454,11 +3613,11 @@ class TraxHeaderComponent {
         this.filterStores();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxHeaderComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxHeaderComponent, selector: "lib-trax-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\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\r\n\r\n\r\n\r\n\r\n\r\n\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\" (click)=\"toggleDropdown('location')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedLocationsLabel()\"\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\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    <!-- </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:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:0 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { 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"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxHeaderComponent, selector: "lib-trax-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{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 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{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 cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\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\r\n\r\n\r\n\r\n\r\n\r\n\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\" (click)=\"toggleDropdown('location')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedLocationsLabel()\"\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\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    <!-- </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:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { 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"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-trax-header', template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\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\r\n\r\n\r\n\r\n\r\n\r\n\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\" (click)=\"toggleDropdown('location')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedLocationsLabel()\"\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\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    <!-- </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:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:0 8px}\n"] }]
+            args: [{ selector: 'lib-trax-header', template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{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 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{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 cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\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\r\n\r\n\r\n\r\n\r\n\r\n\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\" (click)=\"toggleDropdown('location')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedLocationsLabel()\"\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\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    <!-- </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:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -4374,12 +4533,17 @@ class TraxWithoutdateComponent {
         this.filterGroups();
         this.filterStores();
     }
+    showClick(type, e) {
+        this.opendropdown(e);
+        this.Opendropdown = true;
+        this.activeDropdown = type;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxWithoutdateComponent, 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: TraxWithoutdateComponent, selector: "lib-trax-withoutdate", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:0 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { 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: "pipe", type: i4.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxWithoutdateComponent, selector: "lib-trax-withoutdate", 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 cursor-pointer\" (click)=\"showClick('region', $event)\">{{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 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{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 cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { 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: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxWithoutdateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-trax-withoutdate', template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:0 8px}\n"] }]
+            args: [{ selector: 'lib-trax-withoutdate', template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{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 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{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 cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n  <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -5204,12 +5368,17 @@ class TrafficNobComponent {
         this.filterGroups();
         this.filterStores();
     }
+    showClick(type, e) {
+        this.opendropdown(e);
+        this.Opendropdown = true;
+        this.activeDropdown = type;
+    }
     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-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:0 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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"] }] });
+    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 cursor-pointer\" (click)=\"showClick('region', $event)\">{{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 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{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 cursor-pointer\" (click)=\"showClick('stores', $event)\">{{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-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: 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-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item mb-3 cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:0 8px}\n"] }]
+            args: [{ selector: 'lib-traffic-nob', template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{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 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{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 cursor-pointer\" (click)=\"showClick('stores', $event)\">{{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-outline mx-2 rounded-3 text-nowrap border-val\">\r\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n    <span class=\"ms-2\">Filter</span>\r\n  </button>\r\n  \r\n  <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n    \r\n    <!-- Header Section -->\r\n    <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n      <div class=\"row w-100\">\r\n        <div class=\"col-5\">\r\n      <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n      </div>\r\n      <div class=\"col-7 text-muted mt-2\"> \r\n        <!-- Search from 2000 stores -->\r\n            <div *ngIf=\"activeDropdown === 'region'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search region\" \r\n              [(ngModel)]=\"searchLocationText\" \r\n              (ngModelChange)=\"filterLocations()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'clusters'\">\r\n            <input \r\n              type=\"text\" \r\n              class=\"form-control form-control-sm mb-3\" \r\n              placeholder=\"Search clusters\" \r\n              [(ngModel)]=\"searchGroupText\" \r\n              (ngModelChange)=\"filterGroups()\" \r\n            />\r\n            </div>\r\n            <div *ngIf=\"activeDropdown === 'stores'\">\r\n            <input \r\n              type=\"text\" \r\n                class=\"form-control form-control-sm mb-3\" \r\n                placeholder=\"Search stores\" \r\n                [(ngModel)]=\"searchStoreText\" \r\n                (ngModelChange)=\"filterStores()\" \r\n            />\r\n            </div>\r\n    </div>\r\n    </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"row\">\r\n      <!-- Left Side - Filter Categories -->\r\n      <div class=\"col-5 border-end pe-3\">\r\n        <!-- Filter Stats -->\r\n        <div class=\"filter-categories px-3 my-2\">\r\n          <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'region', \r\n    'text-item': activeDropdown !== 'region'\r\n  }\">Region <span *ngIf=\"selectedLocationsLabel1()\"  [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n            <!-- <div class=\"fw-bold\"></div> -->\r\n          </div>\r\n          <div class=\"filter-category-item  cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'clusters', \r\n    'text-item': activeDropdown !== 'clusters'\r\n  }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\"  [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n            \r\n          </div>\r\n          <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n            <div [ngClass]=\"{\r\n    'active-item': activeDropdown === 'stores', \r\n    'text-item': activeDropdown !== 'stores'\r\n  }\" >Stores <span  [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n            \r\n          </div>\r\n        </div>\r\n\r\n        <!-- Downtime Section -->\r\n        <!-- <div class=\"mt-4\">\r\n          <div class=\"small text-muted mb-2\">Downtime</div>\r\n          <div class=\"text-center py-1\">\r\n            <span class=\"text-muted\">Downtime section</span>\r\n          </div>\r\n        </div> -->\r\n      </div>\r\n\r\n      <!-- Right Side - Dropdown Content -->\r\n      <div class=\"col-7 ps-3\">\r\n        <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n          \r\n\r\n          <!-- Region Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllLocationsFull\" \r\n                [checked]=\"isAllLocationsSelected()\" \r\n                (change)=\"toggleSelectAllLocations($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'location-full-' + location.city\" \r\n                  [(ngModel)]=\"location.checked\"\r\n                  (change)=\"updateSelectedLocations()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n                  {{ location.city }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Clusters Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllGroupsFull\" \r\n                [checked]=\"isAllGroupsSelected()\" \r\n                (change)=\"toggleSelectAllGroups($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n                <input \r\n                  class=\"form-check-input cursor-pointer\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'group-full-' + group.groupName\" \r\n                  [(ngModel)]=\"group.checked\"\r\n                  (change)=\"updateSelectedGroups()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n                  {{ group.groupName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Stores Dropdown Content -->\r\n          <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n          \r\n            <div class=\"form-check mb-3\">\r\n              <input \r\n                class=\"form-check-input cursor-pointer\" \r\n                type=\"checkbox\" \r\n                id=\"selectAllStoresFull\" \r\n                [checked]=\"isAllStoresSelected()\" \r\n                (change)=\"toggleSelectAllStores($event)\" \r\n              />\r\n              <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n                Select All\r\n              </label>\r\n            </div>\r\n            <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n              <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n                <input \r\n                  class=\"form-check-input\" \r\n                  type=\"checkbox\" \r\n                  [id]=\"'store-full-' + store.storeId\" \r\n                  [(ngModel)]=\"store.checked\"\r\n                  (change)=\"updateSelectedStores()\" \r\n                />\r\n                <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n                  {{ store.storeName }}\r\n                </label>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Default View when no dropdown selected -->\r\n          <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n            <div>Select a filter category to see options</div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Action Buttons -->\r\n    <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n      <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n      <div>\r\n        <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n        <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n      </div>\r\n    </div>\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}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;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}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -8811,7 +8980,7 @@ class HeaderComponent {
             next: (data) => {
                 if (data) {
                     this.headerFilter = data;
-                    this.storeIdarray = this.headerFilter?.stores.filter((store) => store.checked).map((store) => store.storeId);
+                    this.storeIdarray = this.headerFilter?.stores?.filter((store) => store.checked).map((store) => store.storeId);
                     this.getClientInfo();
                     this.getStoreMap();
                 }
@@ -8849,7 +9018,7 @@ class HeaderComponent {
         const obj = {
             clientId: this.headerFilter?.client,
             storeDate: this.headerFilter?.date?.endDate,
-            storeId: this.storeIdarray?.length ? this.storeIdarray : [this.headerFilter?.store],
+            storeId: this.storeIdarray?.length ? this.storeIdarray : [],
         };
         this.service?.getStoreMapData(obj)?.pipe(takeUntil(this.destroy$))
             .subscribe({
@@ -8916,7 +9085,7 @@ class HeaderComponent {
         }
         // Case 4: General management pages
         if (this.url[1] === 'manage' ||
-            fullPath === '/manage/stores' ||
+            fullPath === '/manage/stores' || fullPath === '/eyetest/start-test' || fullPath === '/eyetest/pre-test-data' ||
             fullPath === '/manage/stores/addition-method') {
             return 'manage';
         }