tango-app-ui-shared 3.7.3-dev17 → 3.7.3-dev18

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

@@ -191,6 +191,9 @@ class AuthService {
     getDowntimeHeader(data) {
         return this.http.post(`${this.trafficApiUrl}/get-store-list-v2`, data);
     }
+    isLocusAuthorized() {
+        return this.http.get(`${this.traxUrl}/locusorder/user-allowed`);
+    }
     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 +1409,7 @@ class TrafficHeaderComponent {
         group: [],
         location: [],
         country: [],
+        status: [],
         downtime: []
     };
     Opendropdown = false;
@@ -1502,6 +1506,7 @@ class TrafficHeaderComponent {
                 group: headerFilters.group || [],
                 location: headerFilters.location || [],
                 country: headerFilters.country || [],
+                status: headerFilters.status || ["active"],
                 downtime: headerFilters.downtime || []
             };
             // Sync filtered data with stored selections
@@ -1561,6 +1566,7 @@ class TrafficHeaderComponent {
             group: [],
             location: [],
             country: [],
+            status: [],
             downtime: [],
         };
         this.filteredLocations = [];
@@ -1604,6 +1610,7 @@ class TrafficHeaderComponent {
                         this.selectedFilters.group = headerFilters.group;
                         this.selectedFilters.location = headerFilters.location;
                         this.selectedFilters.country = headerFilters.country;
+                        this.selectedFilters.status = headerFilters.status || ["active"];
                         this.selectedFilters.downtime = headerFilters.downtime;
                         this.gs.dataRangeValue.next(this.selectedFilters);
                         // console.log("2")
@@ -1622,6 +1629,7 @@ class TrafficHeaderComponent {
                         this.selectedFilters.group = headerFilters.group;
                         this.selectedFilters.location = headerFilters.location;
                         this.selectedFilters.country = headerFilters.country;
+                        this.selectedFilters.status = headerFilters.status || ["active"];
                         this.selectedFilters.downtime = headerFilters.downtime;
                         localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
                         this.gs.dataRangeValue.next(this.selectedFilters);
@@ -1670,6 +1678,7 @@ class TrafficHeaderComponent {
         this.selectedFilters.location = [];
         this.selectedFilters.country = [];
         this.selectedFilters.downtime = [];
+        this.selectedFilters.status = ['active'];
         // Fetch header filters from localStorage
         const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
         // Update the selected filters with the new client
@@ -1681,6 +1690,7 @@ class TrafficHeaderComponent {
         delete headerFilters.location;
         delete headerFilters.country;
         delete headerFilters.downtime;
+        delete headerFilters.status;
         // Fetch new data based on the new client
         // this.getCountry();
         // this.getLocations();
@@ -1798,12 +1808,12 @@ class TrafficHeaderComponent {
         });
     }
     isAllLocationsSelected() {
-        return this.filteredLocations.every(location => location.checked);
+        return this.filteredLocations.every((location) => location.checked);
     }
     selectedLocationsLabel() {
         const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
             .filter(location => location.checked).map(location => location.city) : this.filteredLocations
-            .filter(location => location.checked).map(location => location.city);
+            .filter((location) => location.checked).map((location) => location.city);
         return selectedLocations.length === 0
             ? ''
             : selectedLocations.length === 1
@@ -1813,7 +1823,7 @@ class TrafficHeaderComponent {
     selectedLocationsLabel1() {
         const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
             .filter(location => location.checked).map(location => location.city) : this.filteredLocations
-            .filter(location => location.checked).map(location => location.city);
+            .filter((location) => location.checked).map((location) => location.city);
         return selectedLocations.length === 0
             ? ''
             : `${selectedLocations.length}`;
@@ -1973,7 +1983,7 @@ class TrafficHeaderComponent {
                         this.filteredStores = [...this.stores];
                     }
                     // Update `selectedFilters.stores` to reflect the current state
-                    this.selectedFilters.stores = this.filteredStores.map(store => ({
+                    this.selectedFilters.stores = this.filteredStores.map((store) => ({
                         storeId: store.storeId,
                         storeName: store.storeName,
                         checked: store.checked
@@ -2022,11 +2032,11 @@ class TrafficHeaderComponent {
             : `${selectedStores.length}`;
     }
     isAllStoresSelected() {
-        return this.filteredStores.length > 0 && this.filteredStores.every(store => store.checked);
+        return this.filteredStores.length > 0 && this.filteredStores.every((store) => store.checked);
     }
     // Method to handle dropdown item selection
     updateSelectedStores() {
-        this.filteredStores.forEach(store => {
+        this.filteredStores.forEach((store) => {
             const filteredStore = this.stores.findIndex(fStore => fStore.storeId === store.storeId);
             if (filteredStore != -1) {
                 this.stores[filteredStore].checked = store.checked; // Sync the checked state with full store list
@@ -2049,9 +2059,9 @@ class TrafficHeaderComponent {
     toggleSelectAllStores(event) {
         const checked = event.target.checked;
         // Apply the selection to both filtered and full list of stores
-        this.filteredStores.forEach(store => store.checked = checked);
+        this.filteredStores.forEach((store) => store.checked = checked);
         this.stores.forEach(store => {
-            const filteredStore = this.filteredStores.find(fStore => fStore.storeId === store.storeId);
+            const filteredStore = this.filteredStores.find((fStore) => fStore.storeId === store.storeId);
             if (filteredStore) {
                 store.checked = checked; // Sync the checked state with full store list
             }
@@ -2128,6 +2138,7 @@ class TrafficHeaderComponent {
             this.filteredCountries = [];
             this.filteredGroups = [];
             this.filteredStores = [];
+            this.filteredStatus = [];
             this.filteredLocations = []; // Reset locations as well
             this.downtimeData = [];
             this.locations = [];
@@ -2138,10 +2149,12 @@ class TrafficHeaderComponent {
             this.searchLocationText = "";
             this.searchGroupText = "";
             this.searchStoreText = "";
+            this.searchStatusText = "";
             this.selectedFilters.stores = [];
             this.selectedFilters.group = [];
             this.selectedFilters.location = [];
             this.selectedFilters.country = [];
+            this.selectedFilters.status = ['active'];
             this.selectedFilters.downtime = [];
             // Fetch locations, groups, and stores again
             // this.getCountry();
@@ -2149,27 +2162,11 @@ class TrafficHeaderComponent {
             // this.getStore();
             // this.getGroups();
             this.getStatus();
-            // Reset the filters in selectedFilters
-            // // Once stores are fetched, mark all as checked
-            // setTimeout(() => {
-            //   this.filteredStores = this.stores.map(store => ({
-            //     ...store,
-            //     checked: true  // Mark all stores as checked
-            //   }));
-            //   // Sync selectedFilters with the updated store state
-            //   this.selectedFilters.stores = this.filteredStores.map(store => ({
-            //     ...store,
-            //     checked: true
-            //   }));
             // Update localStorage with the latest selectedFilters
             localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
             window.location.reload();
-            // Emit the reset filters to update other components if needed
             // this.gs.dataRangeValue.next(this.selectedFilters);
-            // Trigger change detection
             this.cd.detectChanges();
-            // Adding a slight delay to ensure stores are fetched first
-            // Close dropdown after reset if necessary
             this.Opendropdown = false;
         }, 100);
     }
@@ -2180,7 +2177,7 @@ class TrafficHeaderComponent {
             this.filteredLocations = this.locations
                 .map(location => ({
                 ...location,
-                checked: this.filteredLocations.find(l => l.city === location.city)?.checked || false
+                checked: this.filteredLocations.find((l) => l.city === location.city)?.checked || false
             }))
                 .filter(location => location?.city?.toLowerCase().includes(searchText));
         }
@@ -2199,7 +2196,7 @@ class TrafficHeaderComponent {
             this.filteredGroups = this.groupsData
                 .map(group => ({
                 ...group,
-                checked: this.filteredGroups.find(g => g.groupName === group.groupName)?.checked || false
+                checked: this.filteredGroups.find((g) => g.groupName === group.groupName)?.checked || false
             }))
                 .filter(group => group?.groupName?.toLowerCase().includes(searchText));
         }
@@ -2246,76 +2243,6 @@ class TrafficHeaderComponent {
             this.closeDropdown1();
         }
     }
-    // getCountry(): void {
-    //   // const headerFilters: any = JSON.parse(localStorage.getItem("header-filters") || "{}");
-    //   let obj ={
-    //    clientId: this.selectedFilters.client ? this.selectedFilters.client :this.users.clientId,
-    //   }
-    //   this.auth.getCountry(obj).subscribe({
-    //     next: (res: any) => {
-    //       let countryList = this.selectedFilters?.country?.filter((country:any) => country.checked).map((loc:any) => loc.allCountry);
-    //       // Map the fetched countries with default unchecked state
-    //       this.countires = res?.data?.countryData.map((allCountry: any) => ({
-    //         allCountry: allCountry.allCountry,
-    //         checked: countryList?.includes(allCountry.allCountry) ? true : false,
-    //       }));
-    //       // Sync the fetched countries with any stored checked values in localStorage
-    //       if (this.selectedFilters.country && Array.isArray(this.selectedFilters.country)) {
-    //         this.filteredCountries = this.countries.map(country => {
-    //           const matchedLocation = this.selectedFilters.country.find((loc: any) => loc.allCountry === country.allCountry);
-    //           return matchedLocation ? { ...country, checked: matchedLocation.checked } : country;
-    //         });
-    //       } else {
-    //         this.filteredCountries = this.countries;
-    //       }
-    //       if(this.searchLocationText) {
-    //         this.filteredCountries = this.countries.filter((country:any) => country.city.toLowerCase().includes(this.searchLocationText.toLowerCase()))
-    //       }
-    //       const selectedCountries = this.countries.filter((country) => country.checked).map((country) => country.allCountry);
-    //       if (selectedCountries.length > 0) {
-    //         setTimeout(()=>{
-    //           this.getStore(); // Fetch stores based on selected groups
-    //         },1000)
-    //       }
-    //     },
-    //     error: (err) => {
-    //       console.error("Failed to fetch countries", err);
-    //     },
-    //   });
-    // }
-    // selectedCountriesLabel(): string {
-    //   const selectedCountries = this.countryLabel = this.searchLocationText.length ? this.countries
-    //     .filter(country => country.checked).map(country => country.allCountry) :  this.filteredCountries
-    //     .filter(country => country.checked).map(country => country.allCountry);
-    //   return selectedCountries.length === 0
-    //     ? ''
-    //     : selectedCountries.length === 1
-    //     ? selectedCountries[0]
-    //     : `${selectedCountries.length} countries`;
-    // }
-    // isAllCountriesSelected(): boolean {
-    //   return this.filteredCountries.every(country => country.checked);
-    // }
-    // filterCountries(): void {    
-    //   const searchText = this.searchCountryText.toLowerCase();
-    //   if (searchText) {
-    //     // Preserve the checked state during filtering
-    //     this.filteredCountries = this.countires
-    //       .map(country => ({
-    //         ...country,
-    //         checked: this.filteredCountries.find(l => l.allCountry === country.allCountry)?.checked || false
-    //       }))
-    //       .filter(location =>
-    //         location?.allCountry?.toLowerCase().includes(searchText)
-    //       );
-    //   } else {
-    //     // Restore the original checked state when search text is cleared
-    //     this.filteredCountries = this.countires.map(country => ({
-    //       ...country,
-    //       checked: this.selectedFilters.country.find((l:any) => l.allCountry === country.allCountry)?.checked || false
-    //     }));
-    //   }
-    // }
     getCountry() {
         let obj = {
             clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
@@ -2364,7 +2291,7 @@ class TrafficHeaderComponent {
     }
     selectedCountriesLabel() {
         const selectedCountries = this.searchCountryText.length
-            ? this.filteredCountries.filter(country => country.checked).map(country => country.country)
+            ? this.filteredCountries.filter((country) => country.checked).map((country) => country.country)
             : this.countries.filter(country => country.checked).map(country => country.country);
         return selectedCountries.length === 0
             ? ''
@@ -2374,7 +2301,7 @@ class TrafficHeaderComponent {
     }
     selectedCountriesLabel1() {
         const selectedCountries = this.searchCountryText.length
-            ? this.filteredCountries.filter(country => country.checked).map(country => country.country)
+            ? this.filteredCountries.filter((country) => country.checked).map((country) => country.country)
             : this.countries.filter(country => country.checked).map(country => country.country);
         return selectedCountries.length === 0
             ? ''
@@ -2387,7 +2314,7 @@ class TrafficHeaderComponent {
             this.filteredCountries = this.countries
                 .map(country => ({
                 ...country,
-                checked: this.filteredCountries.find(c => c.country === country.country)?.checked || false
+                checked: this.filteredCountries.find((c) => c.country === country.country)?.checked || false
             }))
                 .filter(country => country.country.toLowerCase().includes(searchText));
         }
@@ -2400,7 +2327,7 @@ class TrafficHeaderComponent {
         }
     }
     isAllCountriesSelected() {
-        return this.filteredCountries.length > 0 && this.filteredCountries.every(country => country.checked);
+        return this.filteredCountries.length > 0 && this.filteredCountries.every((country) => country.checked);
     }
     toggleSelectAllCountries(event) {
         const isChecked = event.target.checked;
@@ -2447,6 +2374,9 @@ class TrafficHeaderComponent {
         // Fetch existing filters from localStorage
         const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
         this.selectedFilters.store = null;
+        this.selectedFilters.status = this.filteredStatus
+            .filter((s) => s.checked)
+            .map((s) => s.status);
         // Ensure current selections are reflected
         this.selectedFilters.country = this.filteredCountries;
         this.selectedFilters.location = this.locations;
@@ -2688,16 +2618,16 @@ class TrafficHeaderComponent {
         const selected = this.filteredStatus
             .filter((status) => status.checked)
             .map((status) => status.status); // ✅ pick only the value
-        this.statusVal = selected;
+        // 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 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" }] });
+    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 *ngIf=\"filteredStatus?.length\" 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 *ngIf=\"!filteredStatus?.length\" >\r\n                <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredCountries?.length\" 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 *ngIf=\"!filteredCountries?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredLocations?.length\" 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 *ngIf=\"!filteredLocations?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredGroups?.length\" 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 *ngIf=\"!filteredGroups?.length\" >\r\n                <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredStores?.length\" 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 *ngIf=\"!filteredStores?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 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"] }]
+            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 *ngIf=\"filteredStatus?.length\" 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 *ngIf=\"!filteredStatus?.length\" >\r\n                <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredCountries?.length\" 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 *ngIf=\"!filteredCountries?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredLocations?.length\" 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 *ngIf=\"!filteredLocations?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredGroups?.length\" 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 *ngIf=\"!filteredGroups?.length\" >\r\n                <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredStores?.length\" 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 *ngIf=\"!filteredStores?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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']]
@@ -3131,12 +3061,12 @@ class TraxHeaderComponent {
         });
     }
     isAllLocationsSelected() {
-        return this.filteredLocations.every(location => location.checked);
+        return this.filteredLocations.every((location) => location.checked);
     }
     selectedLocationsLabel() {
         const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
             .filter(location => location.checked).map(location => location.city) : this.filteredLocations
-            .filter(location => location.checked).map(location => location.city);
+            .filter((location) => location.checked).map((location) => location.city);
         return selectedLocations.length === 0
             ? ''
             : selectedLocations.length === 1
@@ -3146,7 +3076,7 @@ class TraxHeaderComponent {
     selectedLocationsLabel1() {
         const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
             .filter(location => location.checked).map(location => location.city) : this.filteredLocations
-            .filter(location => location.checked).map(location => location.city);
+            .filter((location) => location.checked).map((location) => location.city);
         return selectedLocations.length === 0
             ? ''
             : `${selectedLocations.length}`;
@@ -3279,14 +3209,14 @@ class TraxHeaderComponent {
                             store.checked = true; // Sync the checked state with full store list
                         });
                         // No previously selected stores, mark all as checked
-                        this.filteredStores = this.selectedFilters.stores = this.filteredStores.map(store => ({
+                        this.filteredStores = this.selectedFilters.stores = this.filteredStores.map((store) => ({
                             ...store,
                             checked: true
                         }));
                     }
                     else {
                         // Update selectedFilters to reflect current state of stores
-                        this.selectedFilters.stores = this.filteredStores.map(store => ({
+                        this.selectedFilters.stores = this.filteredStores.map((store) => ({
                             ...store,
                             checked: store.checked
                         }));
@@ -3302,7 +3232,7 @@ class TraxHeaderComponent {
                     this.stores = [];
                     this.selectedFilters.stores = [];
                     this.filteredStores = [];
-                    this.selectedFilters.stores = this.filteredStores.map(store => ({
+                    this.selectedFilters.stores = this.filteredStores.map((store) => ({
                         ...store,
                         checked: false
                     }));
@@ -3313,7 +3243,7 @@ class TraxHeaderComponent {
                 this.stores = [];
                 this.selectedFilters.stores = [];
                 this.filteredStores = [];
-                this.selectedFilters.stores = this.filteredStores.map(store => ({
+                this.selectedFilters.stores = this.filteredStores.map((store) => ({
                     ...store,
                     checked: false
                 }));
@@ -3341,11 +3271,11 @@ class TraxHeaderComponent {
             : `${selectedStores.length}`;
     }
     isAllStoresSelected() {
-        return this.filteredStores.length > 0 && this.filteredStores.every(store => store.checked);
+        return this.filteredStores.length > 0 && this.filteredStores.every((store) => store.checked);
     }
     // Method to handle dropdown item selection
     updateSelectedStores() {
-        this.filteredStores.forEach(store => {
+        this.filteredStores.forEach((store) => {
             const filteredStore = this.stores.findIndex(fStore => fStore.storeId === store.storeId);
             if (filteredStore != -1) {
                 this.stores[filteredStore].checked = store.checked; // Sync the checked state with full store list
@@ -3368,9 +3298,9 @@ class TraxHeaderComponent {
     toggleSelectAllStores(event) {
         const checked = event.target.checked;
         // Apply the selection to both filtered and full list of stores
-        this.filteredStores.forEach(store => store.checked = checked);
+        this.filteredStores.forEach((store) => store.checked = checked);
         this.stores.forEach(store => {
-            const filteredStore = this.filteredStores.find(fStore => fStore.storeId === store.storeId);
+            const filteredStore = this.filteredStores.find((fStore) => fStore.storeId === store.storeId);
             if (filteredStore) {
                 store.checked = checked; // Sync the checked state with full store list
             }
@@ -3516,7 +3446,7 @@ class TraxHeaderComponent {
             this.filteredLocations = this.locations
                 .map(location => ({
                 ...location,
-                checked: this.filteredLocations.find(l => l.city === location.city)?.checked || false
+                checked: this.filteredLocations.find((l) => l.city === location.city)?.checked || false
             }))
                 .filter(location => location?.city?.toLowerCase().includes(searchText));
         }
@@ -3535,7 +3465,7 @@ class TraxHeaderComponent {
             this.filteredGroups = this.groupsData
                 .map(group => ({
                 ...group,
-                checked: this.filteredGroups.find(g => g.groupName === group.groupName)?.checked || false
+                checked: this.filteredGroups.find((g) => g.groupName === group.groupName)?.checked || false
             }))
                 .filter(group => group?.groupName?.toLowerCase().includes(searchText));
         }
@@ -3613,11 +3543,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 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" }] });
+    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 *ngIf=\"filteredLocations?.length\" 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 *ngIf=\"!filteredLocations?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredGroups?.length\" 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 *ngIf=\"!filteredGroups?.length\" >\r\n                <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredStores?.length\" 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 *ngIf=\"!filteredStores?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 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"] }]
+            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 *ngIf=\"filteredLocations?.length\" 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 *ngIf=\"!filteredLocations?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredGroups?.length\" 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 *ngIf=\"!filteredGroups?.length\" >\r\n                <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredStores?.length\" 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 *ngIf=\"!filteredStores?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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']]
@@ -4057,12 +3987,12 @@ class TraxWithoutdateComponent {
         });
     }
     isAllLocationsSelected() {
-        return this.filteredLocations.every(location => location.checked);
+        return this.filteredLocations.every((location) => location.checked);
     }
     selectedLocationsLabel() {
         const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
             .filter(location => location.checked).map(location => location.city) : this.filteredLocations
-            .filter(location => location.checked).map(location => location.city);
+            .filter((location) => location.checked).map((location) => location.city);
         return selectedLocations.length === 0
             ? ''
             : selectedLocations.length === 1
@@ -4191,14 +4121,14 @@ class TraxWithoutdateComponent {
                             store.checked = true; // Sync the checked state with full store list
                         });
                         // No previously selected stores, mark all as checked
-                        this.filteredStores = this.selectedFilters.stores = this.filteredStores.map(store => ({
+                        this.filteredStores = this.selectedFilters.stores = this.filteredStores.map((store) => ({
                             ...store,
                             checked: true
                         }));
                     }
                     else {
                         // Update selectedFilters to reflect current state of stores
-                        this.selectedFilters.stores = this.filteredStores.map(store => ({
+                        this.selectedFilters.stores = this.filteredStores.map((store) => ({
                             ...store,
                             checked: store.checked
                         }));
@@ -4214,7 +4144,7 @@ class TraxWithoutdateComponent {
                     this.stores = [];
                     this.selectedFilters.stores = [];
                     this.filteredStores = [];
-                    this.selectedFilters.stores = this.filteredStores.map(store => ({
+                    this.selectedFilters.stores = this.filteredStores.map((store) => ({
                         ...store,
                         checked: false
                     }));
@@ -4225,7 +4155,7 @@ class TraxWithoutdateComponent {
                 this.stores = [];
                 this.selectedFilters.stores = [];
                 this.filteredStores = [];
-                this.selectedFilters.stores = this.filteredStores.map(store => ({
+                this.selectedFilters.stores = this.filteredStores.map((store) => ({
                     ...store,
                     checked: false
                 }));
@@ -4247,11 +4177,11 @@ class TraxWithoutdateComponent {
                 : `${selectedStores.length} Stores`;
     }
     isAllStoresSelected() {
-        return this.filteredStores.length > 0 && this.filteredStores.every(store => store.checked);
+        return this.filteredStores.length > 0 && this.filteredStores.every((store) => store.checked);
     }
     // Method to handle dropdown item selection
     updateSelectedStores() {
-        this.filteredStores.forEach(store => {
+        this.filteredStores.forEach((store) => {
             const filteredStore = this.stores.findIndex(fStore => fStore.storeId === store.storeId);
             if (filteredStore != -1) {
                 this.stores[filteredStore].checked = store.checked; // Sync the checked state with full store list
@@ -4274,9 +4204,9 @@ class TraxWithoutdateComponent {
     toggleSelectAllStores(event) {
         const checked = event.target.checked;
         // Apply the selection to both filtered and full list of stores
-        this.filteredStores.forEach(store => store.checked = checked);
+        this.filteredStores.forEach((store) => store.checked = checked);
         this.stores.forEach(store => {
-            const filteredStore = this.filteredStores.find(fStore => fStore.storeId === store.storeId);
+            const filteredStore = this.filteredStores.find((fStore) => fStore.storeId === store.storeId);
             if (filteredStore) {
                 store.checked = checked; // Sync the checked state with full store list
             }
@@ -4422,7 +4352,7 @@ class TraxWithoutdateComponent {
             this.filteredLocations = this.locations
                 .map(location => ({
                 ...location,
-                checked: this.filteredLocations.find(l => l.city === location.city)?.checked || false
+                checked: this.filteredLocations.find((l) => l.city === location.city)?.checked || false
             }))
                 .filter(location => location?.city?.toLowerCase().includes(searchText));
         }
@@ -4441,7 +4371,7 @@ class TraxWithoutdateComponent {
             this.filteredGroups = this.groupsData
                 .map(group => ({
                 ...group,
-                checked: this.filteredGroups.find(g => g.groupName === group.groupName)?.checked || false
+                checked: this.filteredGroups.find((g) => g.groupName === group.groupName)?.checked || false
             }))
                 .filter(group => group?.groupName?.toLowerCase().includes(searchText));
         }
@@ -4491,7 +4421,7 @@ class TraxWithoutdateComponent {
     selectedLocationsLabel1() {
         const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
             .filter(location => location.checked).map(location => location.city) : this.filteredLocations
-            .filter(location => location.checked).map(location => location.city);
+            .filter((location) => location.checked).map((location) => location.city);
         return selectedLocations.length === 0
             ? ''
             : `${selectedLocations.length}`;
@@ -4539,11 +4469,11 @@ class TraxWithoutdateComponent {
         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 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" }] });
+    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 *ngIf=\"filteredLocations?.length\" 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 *ngIf=\"!filteredLocations?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredGroups?.length\" 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 *ngIf=\"!filteredGroups?.length\" >\r\n                <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredStores?.length\" 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 *ngIf=\"!filteredStores?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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          <!-- 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 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"] }]
+            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 *ngIf=\"filteredLocations?.length\" 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 *ngIf=\"!filteredLocations?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredGroups?.length\" 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 *ngIf=\"!filteredGroups?.length\" >\r\n                <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredStores?.length\" 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 *ngIf=\"!filteredStores?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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          <!-- 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']]
@@ -4892,12 +4822,12 @@ class TrafficNobComponent {
         });
     }
     isAllLocationsSelected() {
-        return this.filteredLocations.every(location => location.checked);
+        return this.filteredLocations.every((location) => location.checked);
     }
     selectedLocationsLabel() {
         const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
             .filter(location => location.checked).map(location => location.city) : this.filteredLocations
-            .filter(location => location.checked).map(location => location.city);
+            .filter((location) => location.checked).map((location) => location.city);
         return selectedLocations.length === 0
             ? ''
             : selectedLocations.length === 1
@@ -5026,14 +4956,14 @@ class TrafficNobComponent {
                             store.checked = true; // Sync the checked state with full store list
                         });
                         // No previously selected stores, mark all as checked
-                        this.filteredStores = this.selectedFilters.stores = this.filteredStores.map(store => ({
+                        this.filteredStores = this.selectedFilters.stores = this.filteredStores.map((store) => ({
                             ...store,
                             checked: true
                         }));
                     }
                     else {
                         // Update selectedFilters to reflect current state of stores
-                        this.selectedFilters.stores = this.filteredStores.map(store => ({
+                        this.selectedFilters.stores = this.filteredStores.map((store) => ({
                             ...store,
                             checked: store.checked
                         }));
@@ -5049,7 +4979,7 @@ class TrafficNobComponent {
                     this.stores = [];
                     this.selectedFilters.stores = [];
                     this.filteredStores = [];
-                    this.selectedFilters.stores = this.filteredStores.map(store => ({
+                    this.selectedFilters.stores = this.filteredStores.map((store) => ({
                         ...store,
                         checked: false
                     }));
@@ -5058,7 +4988,7 @@ class TrafficNobComponent {
             },
             error: (err) => {
                 this.stores = [];
-                this.selectedFilters.stores = this.filteredStores.map(store => ({
+                this.selectedFilters.stores = this.filteredStores.map((store) => ({
                     ...store,
                     checked: false
                 }));
@@ -5082,11 +5012,11 @@ class TrafficNobComponent {
                 : `${selectedStores.length} Stores`;
     }
     isAllStoresSelected() {
-        return this.filteredStores.length > 0 && this.filteredStores.every(store => store.checked);
+        return this.filteredStores.length > 0 && this.filteredStores.every((store) => store.checked);
     }
     // Method to handle dropdown item selection
     updateSelectedStores() {
-        this.filteredStores.forEach(store => {
+        this.filteredStores.forEach((store) => {
             const filteredStore = this.stores.findIndex(fStore => fStore.storeId === store.storeId);
             if (filteredStore != -1) {
                 this.stores[filteredStore].checked = store.checked; // Sync the checked state with full store list
@@ -5109,9 +5039,9 @@ class TrafficNobComponent {
     toggleSelectAllStores(event) {
         const checked = event.target.checked;
         // Apply the selection to both filtered and full list of stores
-        this.filteredStores.forEach(store => store.checked = checked);
+        this.filteredStores.forEach((store) => store.checked = checked);
         this.stores.forEach(store => {
-            const filteredStore = this.filteredStores.find(fStore => fStore.storeId === store.storeId);
+            const filteredStore = this.filteredStores.find((fStore) => fStore.storeId === store.storeId);
             if (filteredStore) {
                 store.checked = checked; // Sync the checked state with full store list
             }
@@ -5257,7 +5187,7 @@ class TrafficNobComponent {
             this.filteredLocations = this.locations
                 .map(location => ({
                 ...location,
-                checked: this.filteredLocations.find(l => l.city === location.city)?.checked || false
+                checked: this.filteredLocations.find((l) => l.city === location.city)?.checked || false
             }))
                 .filter(location => location?.city?.toLowerCase().includes(searchText));
         }
@@ -5276,7 +5206,7 @@ class TrafficNobComponent {
             this.filteredGroups = this.groupsData
                 .map(group => ({
                 ...group,
-                checked: this.filteredGroups.find(g => g.groupName === group.groupName)?.checked || false
+                checked: this.filteredGroups.find((g) => g.groupName === group.groupName)?.checked || false
             }))
                 .filter(group => group?.groupName?.toLowerCase().includes(searchText));
         }
@@ -5326,7 +5256,7 @@ class TrafficNobComponent {
     selectedLocationsLabel1() {
         const selectedLocations = this.locationLabel = this.searchLocationText.length ? this.locations
             .filter(location => location.checked).map(location => location.city) : this.filteredLocations
-            .filter(location => location.checked).map(location => location.city);
+            .filter((location) => location.checked).map((location) => location.city);
         return selectedLocations.length === 0
             ? ''
             : `${selectedLocations.length}`;
@@ -5374,11 +5304,11 @@ class TrafficNobComponent {
         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 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"] }] });
+    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 *ngIf=\"filteredLocations?.length\" 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 *ngIf=\"!filteredLocations?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredGroups?.length\" 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 *ngIf=\"!filteredGroups?.length\" >\r\n                <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredStores?.length\" 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 *ngIf=\"!filteredStores?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 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"] }]
+            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 *ngIf=\"filteredLocations?.length\" 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 *ngIf=\"!filteredLocations?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredGroups?.length\" 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 *ngIf=\"!filteredGroups?.length\" >\r\n                <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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 *ngIf=\"filteredStores?.length\" 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 *ngIf=\"!filteredStores?.length\" >\r\n                 <div class=\"col-lg-12 mt-20 mb-6\">\r\n                    <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n                        <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                        <div class=\"nodata-title\">No data found</div>\r\n                        </div>\r\n                        </div>\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']]
@@ -9869,13 +9799,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class HeaderBannerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderBannerComponent, selector: "lib-header-banner", ngImport: i0, template: " <div class=\"card pt-3\" style=\"border-radius: 0% !important;\">\r\n\r\n     <div  class=\"d-flex overflow-auto1 h-35px mb-2 mx-5\">\r\n                                <ul\r\n                                class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/actioncenter\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6 \">Action Center</a>\r\n                            </li>\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/dashboard\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6 \">Dashboard</a>\r\n                            </li>\r\n                                <li \r\n                                    class=\"nav-item\"><a routerLink=\"/manage/trax/flags\" routerLinkActive=\"active\"\r\n                                         class=\"nav-link text-active-primary me-6\">Flags</a>\r\n                                </li>\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/gallery\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6\">Gallery</a>\r\n                            </li>\r\n                                <li class=\"nav-item\" ><a routerLink=\"/manage/trax/checklist\"\r\n                                    routerLinkActive=\"active\" \r\n                                    class=\"nav-link text-active-primary me-6\">Manage</a>\r\n                                </li>\r\n                                <!-- <li class=\"nav-item\" *ngIf=\"users?.isEyetestUser\"><a routerLink=\"/manage/trax/audit\"\r\n                                    routerLinkActive=\"active\" \r\n                                    class=\"nav-link text-active-primary me-6\">Audit</a>\r\n                                </li> -->\r\n                                <!-- <li  class=\"nav-item cursor-pointer\"><a (click)=\"changes('trax-reports')\"\r\n                                    routerLink=\"/manage/trax/reports\"  routerLinkActive=\"active\" \r\n                                        class=\"nav-link text-active-primary me-6\">Reports</a>\r\n                                </li> -->\r\n                                <!-- <li *ngIf=\"showCreateOrder === 'AUTHORIZED'\"  class=\"nav-item cursor-pointer\"><a (click)=\"changes('trax-create-order')\"\r\n                                    routerLink=\"/manage/trax/create-order\"  routerLinkActive=\"active\" \r\n                                        class=\"nav-link text-active-primary me-6\">Create Order</a>\r\n                                </li> -->\r\n                            </ul>\r\n                            </div>\r\n </div>", styles: [""], dependencies: [{ kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    service;
+    showCreateOrder = 'UNAUTHORIZED';
+    constructor(service) {
+        this.service = service;
+    }
+    users;
+    ngOnInit() {
+        const userData = JSON.parse(localStorage.getItem("user-info") || "{}");
+        this.users = userData;
+        this.service.isLocusAuthorized().subscribe((res) => {
+            this.showCreateOrder = res?.message || 'UNAUTHORIZED';
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderBannerComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderBannerComponent, selector: "lib-header-banner", ngImport: i0, template: " <div class=\"card pt-3\" style=\"border-radius: 0% !important;\">\r\n\r\n     <div  class=\"d-flex overflow-auto1 h-35px mb-2 mx-5\">\r\n                                <ul\r\n                                class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/actioncenter\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6 \">Action Center</a>\r\n                            </li>\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/dashboard\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6 \">Dashboard</a>\r\n                            </li>\r\n                                <li \r\n                                    class=\"nav-item\"><a routerLink=\"/manage/trax/flags\" routerLinkActive=\"active\"\r\n                                         class=\"nav-link text-active-primary me-6\">Flags</a>\r\n                                </li>\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/gallery\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6\">Gallery</a>\r\n                            </li>\r\n                                <li class=\"nav-item\" ><a routerLink=\"/manage/trax/checklist\"\r\n                                    routerLinkActive=\"active\" \r\n                                    class=\"nav-link text-active-primary me-6\">Manage</a>\r\n                                </li>\r\n                                <li class=\"nav-item\" *ngIf=\"users?.isEyetestUser\"><a routerLink=\"/manage/trax/audit\"\r\n                                    routerLinkActive=\"active\" \r\n                                    class=\"nav-link text-active-primary me-6\">Audit</a>\r\n                                </li>\r\n                                <!-- <li  class=\"nav-item cursor-pointer\"><a (click)=\"changes('trax-reports')\"\r\n                                    routerLink=\"/manage/trax/reports\"  routerLinkActive=\"active\" \r\n                                        class=\"nav-link text-active-primary me-6\">Reports</a>\r\n                                </li> -->\r\n                                <li *ngIf=\"showCreateOrder === 'AUTHORIZED'\"  class=\"nav-item cursor-pointer\"><a \r\n                                    routerLink=\"/manage/trax/create-order\"  routerLinkActive=\"active\" \r\n                                        class=\"nav-link text-active-primary me-6\">Create Order</a>\r\n                                </li>\r\n                            </ul>\r\n                            </div>\r\n </div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderBannerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-header-banner', template: " <div class=\"card pt-3\" style=\"border-radius: 0% !important;\">\r\n\r\n     <div  class=\"d-flex overflow-auto1 h-35px mb-2 mx-5\">\r\n                                <ul\r\n                                class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/actioncenter\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6 \">Action Center</a>\r\n                            </li>\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/dashboard\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6 \">Dashboard</a>\r\n                            </li>\r\n                                <li \r\n                                    class=\"nav-item\"><a routerLink=\"/manage/trax/flags\" routerLinkActive=\"active\"\r\n                                         class=\"nav-link text-active-primary me-6\">Flags</a>\r\n                                </li>\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/gallery\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6\">Gallery</a>\r\n                            </li>\r\n                                <li class=\"nav-item\" ><a routerLink=\"/manage/trax/checklist\"\r\n                                    routerLinkActive=\"active\" \r\n                                    class=\"nav-link text-active-primary me-6\">Manage</a>\r\n                                </li>\r\n                                <!-- <li class=\"nav-item\" *ngIf=\"users?.isEyetestUser\"><a routerLink=\"/manage/trax/audit\"\r\n                                    routerLinkActive=\"active\" \r\n                                    class=\"nav-link text-active-primary me-6\">Audit</a>\r\n                                </li> -->\r\n                                <!-- <li  class=\"nav-item cursor-pointer\"><a (click)=\"changes('trax-reports')\"\r\n                                    routerLink=\"/manage/trax/reports\"  routerLinkActive=\"active\" \r\n                                        class=\"nav-link text-active-primary me-6\">Reports</a>\r\n                                </li> -->\r\n                                <!-- <li *ngIf=\"showCreateOrder === 'AUTHORIZED'\"  class=\"nav-item cursor-pointer\"><a (click)=\"changes('trax-create-order')\"\r\n                                    routerLink=\"/manage/trax/create-order\"  routerLinkActive=\"active\" \r\n                                        class=\"nav-link text-active-primary me-6\">Create Order</a>\r\n                                </li> -->\r\n                            </ul>\r\n                            </div>\r\n </div>" }]
-        }] });
+            args: [{ selector: 'lib-header-banner', template: " <div class=\"card pt-3\" style=\"border-radius: 0% !important;\">\r\n\r\n     <div  class=\"d-flex overflow-auto1 h-35px mb-2 mx-5\">\r\n                                <ul\r\n                                class=\"nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bolder flex-nowrap\">\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/actioncenter\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6 \">Action Center</a>\r\n                            </li>\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/dashboard\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6 \">Dashboard</a>\r\n                            </li>\r\n                                <li \r\n                                    class=\"nav-item\"><a routerLink=\"/manage/trax/flags\" routerLinkActive=\"active\"\r\n                                         class=\"nav-link text-active-primary me-6\">Flags</a>\r\n                                </li>\r\n                                <li \r\n                                class=\"nav-item\"><a routerLink=\"/manage/trax/gallery\" routerLinkActive=\"active\"\r\n                                     class=\"nav-link text-active-primary me-6\">Gallery</a>\r\n                            </li>\r\n                                <li class=\"nav-item\" ><a routerLink=\"/manage/trax/checklist\"\r\n                                    routerLinkActive=\"active\" \r\n                                    class=\"nav-link text-active-primary me-6\">Manage</a>\r\n                                </li>\r\n                                <li class=\"nav-item\" *ngIf=\"users?.isEyetestUser\"><a routerLink=\"/manage/trax/audit\"\r\n                                    routerLinkActive=\"active\" \r\n                                    class=\"nav-link text-active-primary me-6\">Audit</a>\r\n                                </li>\r\n                                <!-- <li  class=\"nav-item cursor-pointer\"><a (click)=\"changes('trax-reports')\"\r\n                                    routerLink=\"/manage/trax/reports\"  routerLinkActive=\"active\" \r\n                                        class=\"nav-link text-active-primary me-6\">Reports</a>\r\n                                </li> -->\r\n                                <li *ngIf=\"showCreateOrder === 'AUTHORIZED'\"  class=\"nav-item cursor-pointer\"><a \r\n                                    routerLink=\"/manage/trax/create-order\"  routerLinkActive=\"active\" \r\n                                        class=\"nav-link text-active-primary me-6\">Create Order</a>\r\n                                </li>\r\n                            </ul>\r\n                            </div>\r\n </div>" }]
+        }], ctorParameters: () => [{ type: AuthService }] });
 
 class BrandsHeaderComponent {
     gs;