tango-app-ui-shared 3.5.0-alpha.2 → 3.5.0-alpha.3

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

@@ -5251,6 +5251,11 @@ class SingleStoredateComponent {
         this.selectedFilters.clientName = headerFilters.clientName || "";
         this.selectedFilters.store = this.dataUser?.storeId ?? headerFilters.store ?? "";
         this.selectedFilters.storeName = headerFilters.storeName || "";
+        this.selectedFilters.group = headerFilters.group;
+        this.selectedFilters.location = headerFilters.location;
+        this.selectedFilters.country = headerFilters.country;
+        this.selectedFilters.stores = headerFilters.stores ?? "";
+        this.selectedFilters.zoneName = headerFilters.zoneName ?? "";
         // ✅ Handle query param date if present
         if (this.dataUser?.date) {
             const date = this.dataUser.date;
@@ -5317,19 +5322,13 @@ class SingleStoredateComponent {
             const headerFilters = JSON.parse(localStorage.getItem("header-filters") || "{}");
             this.selectedFilters.date = headerFilters.date;
         }
-        if (this.dataUser?.date) {
-            this.selectedFilters.date.startDate = this.dataUser.date;
-            this.selectedFilters.date.endDate = this.dataUser.date;
-        }
-        else {
-            this.selectedFilters.date = this.selectedFilters.date;
-        }
-        const clientId = this.users?.clientId ?? this.dataUser?.client ?? '';
+        const clientId = this.users?.clientId ?? this.dataUser?.client ?? this.selectedFilters.client;
         this.selectedFilters.client = clientId;
-        this.selectedFilters.clients = clientId ? [clientId] : [];
+        this.selectedFilters.clients = clientId ? [clientId] : [this.selectedFilters.client];
+        this.selectedFilters.date = this.selectedFilters.date;
         this.selectedFilters.storeName = this.selectedFilters.storeName || '';
-        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
         this.gs.dataRangeValue.next(this.selectedFilters);
+        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
         this.cd.detectChanges();
     }
     Apply() {
@@ -6861,8 +6860,10 @@ class MetricsHeaderComponent {
         const isValidDate = m > this.dayjs();
         return isValidDate ? "invalid-date" : false;
     };
-    selectedDateRange = { startDate: dayjs().subtract(30, 'days'),
-        endDate: dayjs().subtract(1, "days"), };
+    selectedDateRange = {
+        startDate: dayjs().subtract(30, "days"),
+        endDate: dayjs().subtract(1, "days"),
+    };
     selectedFilters = {
         client: null,
         clientName: null,
@@ -6873,7 +6874,7 @@ class MetricsHeaderComponent {
         group: [],
         location: [],
         country: [],
-        zoneName: []
+        zoneName: [],
     };
     Opendropdown = false;
     dropdownOpen = null; // 'location' or 'group'
@@ -6887,8 +6888,8 @@ class MetricsHeaderComponent {
     filteredZones = [];
     stores = [];
     zones = [];
-    searchStoreText = '';
-    searchZoneText = '';
+    searchStoreText = "";
+    searchZoneText = "";
     clientList = [];
     selectedClient;
     locationLabel = [];
@@ -6907,7 +6908,7 @@ class MetricsHeaderComponent {
     }
     onClick(event) {
         const target = event.target;
-        if (!target.closest('.dropdown2')) {
+        if (!target.closest(".dropdown2")) {
             this.Opendropdown = false;
         }
     }
@@ -6922,12 +6923,12 @@ class MetricsHeaderComponent {
         //     this.setRangesBasedOnRoute();
         //   }
         // });
-        this.url = this.router.url.split("?")[0].split('/');
-        const user = JSON.parse(localStorage.getItem('user-info'));
+        this.url = this.router.url.split("?")[0].split("/");
+        const user = JSON.parse(localStorage.getItem("user-info"));
         this.users = user;
         this.gs?.manageRefreshTrigger?.subscribe((e) => {
             if (e) {
-                if (user.userType === 'tango') {
+                if (user.userType === "tango") {
                     this.getClient();
                 }
                 else {
@@ -6936,18 +6937,18 @@ class MetricsHeaderComponent {
                         const headerFilters = JSON.parse(storedFilters);
                         this.filteredStores = headerFilters?.stores.map((store) => ({
                             ...store,
-                            checked: store.checked
+                            checked: store.checked,
                         }));
                         this.filteredZones = headerFilters?.zoneName.map((store) => ({
                             ...store,
-                            checked: store.checked
+                            checked: store.checked,
                         }));
                     }
                 }
             }
         });
         // Fetch client data if the user is of type 'tango'
-        if (user.userType === 'tango') {
+        if (user.userType === "tango") {
             this.getClient();
         }
         else {
@@ -6959,7 +6960,7 @@ class MetricsHeaderComponent {
             if (clientFilters) {
                 const headerclientFilters = JSON.parse(clientFilters);
                 this.selectedClient = {
-                    trafficDateRange: headerclientFilters.trafficDateRange
+                    trafficDateRange: headerclientFilters.trafficDateRange,
                 };
             }
         }
@@ -6970,7 +6971,7 @@ class MetricsHeaderComponent {
             // Initialize selectedFilters with defaults or existing values
             this.selectedFilters = {
                 client: headerFilters.client || this.users.client,
-                clientName: headerFilters.clientName || '',
+                clientName: headerFilters.clientName || "",
                 clients: headerFilters.clients || [],
                 store: headerFilters.store || null,
                 date: headerFilters.date || {},
@@ -7013,7 +7014,7 @@ class MetricsHeaderComponent {
         return items
             ? items.map((item) => ({
                 ...item,
-                checked: item.checked === true
+                checked: item.checked === true,
             }))
             : [];
     }
@@ -7028,7 +7029,7 @@ class MetricsHeaderComponent {
     resetFilters() {
         this.selectedFilters = {
             client: null,
-            clientName: '',
+            clientName: "",
             clients: [],
             store: null,
             date: {},
@@ -7036,7 +7037,7 @@ class MetricsHeaderComponent {
             group: [],
             location: [],
             country: [],
-            zoneName: []
+            zoneName: [],
         };
         this.filteredLocations = [];
         this.filteredGroups = [];
@@ -7135,13 +7136,13 @@ class MetricsHeaderComponent {
     }
     getUserInfo(client) {
         let obj = {
-            clientId: client ? client : ''
+            clientId: client ? client : "",
         };
         if (client) {
             this.auth.getHeaderUsers(obj).subscribe({
                 next: (e) => {
                     localStorage.setItem("usersEmail-info", JSON.stringify(e?.data?.userEmailData || []));
-                }
+                },
             });
         }
     }
@@ -7174,7 +7175,7 @@ class MetricsHeaderComponent {
         this.getStore();
         this.getGroups();
         // Update localStorage with the new client selection and empty filter data
-        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
         window.location.reload();
         // Emit data to the global service
         // this.gs.dataRangeValue.next(this.selectedFilters);
@@ -7183,16 +7184,16 @@ class MetricsHeaderComponent {
     }
     ranges = {
         Today: [dayjs(), dayjs()],
-        Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
-        'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
-        'Last Week': [
-            dayjs().subtract(14, 'days').startOf('day'),
-            dayjs().subtract(8, 'days').endOf('day'),
+        Yesterday: [dayjs().subtract(1, "days"), dayjs().subtract(1, "days")],
+        "This Week": [dayjs().subtract(7, "days"), dayjs().subtract(1, "days")],
+        "Last Week": [
+            dayjs().subtract(14, "days").startOf("day"),
+            dayjs().subtract(8, "days").endOf("day"),
         ],
-        'This Month': [dayjs().subtract(30, 'days'), dayjs().subtract(1, 'days')],
-        'Last Month': [
-            dayjs().subtract(1, 'month').startOf('month'),
-            dayjs().subtract(1, 'month').endOf('month'),
+        "This Month": [dayjs().subtract(30, "days"), dayjs().subtract(1, "days")],
+        "Last Month": [
+            dayjs().subtract(1, "month").startOf("month"),
+            dayjs().subtract(1, "month").endOf("month"),
         ],
     };
     onStartDateChange(event) {
@@ -7205,7 +7206,8 @@ class MetricsHeaderComponent {
             }
             else {
                 this.isCustomDate = (m) => {
-                    const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(180, "days"));
+                    const isValidDate = m > this.dayjs() ||
+                        m > this.dayjs(event.startDate.add(180, "days"));
                     return isValidDate ? "invalid-date" : false;
                 };
             }
@@ -7234,18 +7236,22 @@ class MetricsHeaderComponent {
     }
     getLocations() {
         const country = this.countries
-            .filter(country => country.checked)
-            .map(country => country.country);
+            .filter((country) => country.checked)
+            .map((country) => country.country);
         // const headerFilters: any = JSON.parse(localStorage.getItem("header-filters") || "{}");
         let obj = {
-            clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
+            clientId: this.selectedFilters.client
+                ? this.selectedFilters.client
+                : this.users.clientId,
             country,
             city: [],
             group: [],
         };
         this.auth.getLocation(obj).subscribe({
             next: (res) => {
-                let cityList = this.selectedFilters?.location?.filter((location) => location.checked).map((loc) => loc.city);
+                let cityList = this.selectedFilters?.location
+                    ?.filter((location) => location.checked)
+                    .map((loc) => loc.city);
                 // Map the fetched locations with default unchecked state
                 this.locations = res?.data?.locationData.map((city) => ({
                     city: city.city,
@@ -7253,19 +7259,26 @@ class MetricsHeaderComponent {
                     checked: cityList?.includes(city.city) ? true : false,
                 }));
                 // Sync the fetched locations with any stored checked values in localStorage
-                if (this.selectedFilters.location && Array.isArray(this.selectedFilters.location)) {
-                    this.filteredLocations = this.locations.map(location => {
+                if (this.selectedFilters.location &&
+                    Array.isArray(this.selectedFilters.location)) {
+                    this.filteredLocations = this.locations.map((location) => {
                         const matchedLocation = this.selectedFilters.location.find((loc) => loc.city === location.city);
-                        return matchedLocation ? { ...location, checked: matchedLocation.checked } : location;
+                        return matchedLocation
+                            ? { ...location, checked: matchedLocation.checked }
+                            : location;
                     });
                 }
                 else {
                     this.filteredLocations = this.locations;
                 }
                 if (this.searchLocationText) {
-                    this.filteredLocations = this.locations.filter((location) => location.city.toLowerCase().includes(this.searchLocationText.toLowerCase()));
+                    this.filteredLocations = this.locations.filter((location) => location.city
+                        .toLowerCase()
+                        .includes(this.searchLocationText.toLowerCase()));
                 }
-                const selectedLocations = this.locations.filter((location) => location.checked).map((location) => location.city);
+                const selectedLocations = this.locations
+                    .filter((location) => location.checked)
+                    .map((location) => location.city);
                 if (selectedLocations.length > 0) {
                     setTimeout(() => {
                         this.getGroups();
@@ -7282,36 +7295,50 @@ class MetricsHeaderComponent {
         });
     }
     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);
+        const selectedLocations = (this.locationLabel = this.searchLocationText
+            .length
+            ? this.locations
+                .filter((location) => location.checked)
+                .map((location) => location.city)
+            : this.filteredLocations
+                .filter((location) => location.checked)
+                .map((location) => location.city));
         return selectedLocations.length === 0
-            ? ''
+            ? ""
             : selectedLocations.length === 1
                 ? selectedLocations[0]
-                : `${selectedLocations.length} locations`;
+                : `${selectedLocations.length} Region`;
     }
     removeLocation() {
         this.Reset();
     }
     getGroups() {
         const country = this.countries
-            .filter(country => country.checked)
-            .map(country => country.country);
+            .filter((country) => country.checked)
+            .map((country) => country.country);
         let city;
         city = this.locations
-            .filter(location => location.checked)
-            .map(location => location.city);
+            .filter((location) => location.checked)
+            .map((location) => location.city);
         if (!city.length && country.length) {
             city = this.locations.map((loc) => loc.city);
         }
-        const obj = { country, city, clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId, group: [] };
+        const obj = {
+            country,
+            city,
+            clientId: this.selectedFilters.client
+                ? this.selectedFilters.client
+                : this.users.clientId,
+            group: [],
+        };
         this.auth.getGroups(obj).subscribe({
             next: (res) => {
-                let checkedGroup = this.selectedFilters?.group?.filter((group) => group.checked).map((group) => group.groupName);
+                let checkedGroup = this.selectedFilters?.group
+                    ?.filter((group) => group.checked)
+                    .map((group) => group.groupName);
                 const combinedGroups = res?.data?.groupData?.map((groupName) => ({
                     groupName: groupName.groupName,
                     checked: checkedGroup?.includes(groupName.groupName) ? true : false,
@@ -7325,7 +7352,9 @@ class MetricsHeaderComponent {
                     this.filteredGroups = combinedGroups;
                 }
                 // Auto-fetch stores when groups are selected
-                const selectedGroups = this.groupsData.filter((group) => group.checked).map((group) => group.groupName);
+                const selectedGroups = this.groupsData
+                    .filter((group) => group.checked)
+                    .map((group) => group.groupName);
                 if (selectedGroups.length > 0) {
                     setTimeout(() => {
                         this.getStore(); // Fetch stores based on selected groups
@@ -7345,51 +7374,57 @@ class MetricsHeaderComponent {
         else {
             // Open the specific dropdown and handle data fetching only if necessary
             this.dropdownOpen = type;
-            if (type === 'country') {
+            if (type === "country") {
                 // Fetch countries only if not already fetched and no search text exists
-                if ((!this.filteredCountries || this.filteredCountries.length === 0) && !this.searchCountryText.trim()) {
+                if ((!this.filteredCountries || this.filteredCountries.length === 0) &&
+                    !this.searchCountryText.trim()) {
                     this.getCountry();
                 }
             }
-            if (type === 'group') {
+            if (type === "group") {
                 // Fetch groups only if there are selected cities and no active search text
                 const selectedCities = this.locations
                     .filter((location) => location.checked)
                     .map((location) => location.city);
                 // Fetch groups only if locations are selected, no search text exists, and dropdown is opened
-                if (this.filteredLocations.length > 0 || (selectedCities.length > 0 && !this.searchGroupText.trim())) {
+                if (this.filteredLocations.length > 0 ||
+                    (selectedCities.length > 0 && !this.searchGroupText.trim())) {
                     this.getGroups();
                 }
                 else {
                     this.filteredGroups = []; // Clear groups if no locations are selected
                 }
             }
-            if (type === 'store') {
+            if (type === "store") {
                 // Fetch stores only if not already fetched and no search text is active
-                if ((!this.filteredStores || this.filteredStores.length === 0) && !this.searchStoreText.trim()) {
+                if ((!this.filteredStores || this.filteredStores.length === 0) &&
+                    !this.searchStoreText.trim()) {
                     this.getStore();
                 }
             }
-            if (type === 'zone') {
+            if (type === "zone") {
                 // Fetch stores only if not already fetched and no search text is active
-                if ((!this.filteredZones || this.filteredZones.length === 0) && !this.searchZoneText.trim()) {
+                if ((!this.filteredZones || this.filteredZones.length === 0) &&
+                    !this.searchZoneText.trim()) {
                     this.getZone();
                 }
             }
         }
     }
     handleGroupDropdownClick() {
-        if (this.dropdownOpen === 'group') {
+        if (this.dropdownOpen === "group") {
             this.resetSelectedGroups();
         }
-        this.toggleDropdown('group');
+        this.toggleDropdown("group");
     }
     resetSelectedGroups() {
         this.filteredGroups.forEach((group) => (group.checked = false));
         this.searchGroupText = "";
     }
     selectedGroupsLabel() {
-        const selectedGroups = this.groupLabel = this.searchGroupText.length ? this.groupsData.filter((group) => group.checked) : this.filteredGroups.filter((group) => group.checked);
+        const selectedGroups = (this.groupLabel = this.searchGroupText.length
+            ? this.groupsData.filter((group) => group.checked)
+            : this.filteredGroups.filter((group) => group.checked));
         return selectedGroups.length === 0
             ? ""
             : selectedGroups.length === 1
@@ -7400,23 +7435,25 @@ class MetricsHeaderComponent {
         this.Reset();
     }
     isAllGroupsSelected() {
-        return this.filteredGroups.length ? this.filteredGroups.every((group) => group.checked) : false;
+        return this.filteredGroups.length
+            ? this.filteredGroups.every((group) => group.checked)
+            : false;
     }
     getStore() {
         const country = this.countries
-            .filter(country => country.checked)
-            .map(country => country.country);
+            .filter((country) => country.checked)
+            .map((country) => country.country);
         const city = this.locations
-            .filter(location => location.checked)
-            .map(location => location.city);
+            .filter((location) => location.checked)
+            .map((location) => location.city);
         const group = this.groupsData
-            .filter(group => group.checked)
-            .map(group => group.groupName);
+            .filter((group) => group.checked)
+            .map((group) => group.groupName);
         const data = {
             country,
             city,
             clusters: group,
-            clientId: this.users.clientId || this.selectedFilters.client
+            clientId: this.users.clientId || this.selectedFilters.client,
         };
         this.auth.getHeaderStores(data).subscribe({
             next: (res) => {
@@ -7425,30 +7462,34 @@ class MetricsHeaderComponent {
                     this.stores = res.data.storesData;
                     // Check if there are previously selected stores
                     const checkedStoreIds = this.selectedFilters?.stores
-                        ? this.selectedFilters.stores.filter((store) => store.checked).map((store) => store.storeId)
+                        ? this.selectedFilters.stores
+                            .filter((store) => store.checked)
+                            .map((store) => store.storeId)
                         : [];
                     // Sync the `checked` state
-                    this.stores.forEach(store => {
+                    this.stores.forEach((store) => {
                         store.checked = checkedStoreIds.length
                             ? checkedStoreIds.includes(store.storeId) // Use previous selection
                             : true; // Default to true if no previous selection
                     });
                     // Apply search filter if search text is present
                     if (this.searchStoreText.length) {
-                        this.filteredStores = this.stores.filter(store => store.storeName.toLowerCase().includes(this.searchStoreText.toLowerCase()));
+                        this.filteredStores = this.stores.filter((store) => store.storeName
+                            .toLowerCase()
+                            .includes(this.searchStoreText.toLowerCase()));
                     }
                     else {
                         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
+                        checked: store.checked,
                     }));
                     // this.selectedFilters.country = country;
                     // Save updated filters to localStorage
-                    localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+                    localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
                     this.getZone();
                     // Trigger UI change detection
                     this.cd.detectChanges();
@@ -7461,93 +7502,108 @@ class MetricsHeaderComponent {
             error: (err) => {
                 console.error("Failed to fetch stores", err);
                 this.clearStoresState();
-            }
+            },
         });
     }
     getZone() {
         const country = this.countries
-            .filter(country => country.checked)
-            .map(country => country.country);
+            .filter((country) => country.checked)
+            .map((country) => country.country);
         const city = this.locations
-            .filter(location => location.checked)
-            .map(location => location.city);
+            .filter((location) => location.checked)
+            .map((location) => location.city);
         const group = this.groupsData
-            .filter(group => group.checked)
-            .map(group => group.groupName);
+            .filter((group) => group.checked)
+            .map((group) => group.groupName);
         const storeId = this.filteredStores
-            .filter(group => group.checked)
-            .map(group => group.storeId);
+            .filter((group) => group.checked)
+            .map((group) => group.storeId);
         const data = {
             country,
             city,
             clusters: group,
             clientId: this.users.clientId || this.selectedFilters.client,
-            storeId: storeId
+            storeId: storeId,
         };
         this.auth.getHeaderZone(data).subscribe({
             next: (res) => {
                 if (res && res.code === 200) {
-                    // Initialize stores from API response
-                    this.zones = res?.data?.zoneData;
-                    // Check if there are previously selected stores
+                    // Initialize zones with Overall Store first, unchecked by default
+                    this.zones = [
+                        { _id: "overall", tagName: "Overall Store", checked: false },
+                        ...(res?.data?.zoneData?.map((zone) => ({
+                            _id: zone._id,
+                            tagName: zone.tagName,
+                            checked: false, // initialize unchecked; will update below
+                        })) || []),
+                    ];
+                    // Get previously selected zone IDs (checked ones)
                     const checkedStoreIds = this.selectedFilters?.zoneName
-                        ? this.selectedFilters?.zoneName.filter((Zone) => Zone.checked).map((zone) => zone._id)
+                        ? this.selectedFilters.zoneName
+                            .filter((zone) => zone.checked)
+                            .map((zone) => zone._id)
                         : [];
-                    // Sync the `checked` state,
-                    this.zones.forEach(zone => {
-                        zone.checked = checkedStoreIds.length
-                            ? checkedStoreIds.includes(zone._id) // Use previous selection
-                            : true; // Default to true if no previous selection
+                    // Sync checked state with previous selections or default:
+                    // If no previous selection, Overall Store unchecked, others checked
+                    this.zones.forEach((zone) => {
+                        if (checkedStoreIds.length) {
+                            zone.checked = checkedStoreIds.includes(zone._id);
+                        }
+                        else {
+                            zone.checked = zone._id !== "overall";
+                        }
                     });
-                    // Apply search filter if search text is present
+                    // Apply search filter if any
                     if (this.searchZoneText.length) {
-                        this.filteredZones = this.zones.filter(zone => zone.tagName.toLowerCase().includes(this.searchZoneText.toLowerCase()));
+                        this.filteredZones = this.zones.filter((zone) => zone.tagName
+                            .toLowerCase()
+                            .includes(this.searchZoneText.toLowerCase()));
                     }
                     else {
                         this.filteredZones = [...this.zones];
                     }
-                    // Update `selectedFilters.stores` to reflect the current state
-                    this.selectedFilters.zoneName = this.filteredZones.map(zone => ({
+                    // Update selectedFilters.zoneName with current checked states
+                    this.selectedFilters.zoneName = this.filteredZones.map((zone) => ({
                         _id: zone._id,
                         tagName: zone.tagName,
-                        checked: zone.checked
+                        checked: zone.checked,
                     }));
-                    // this.selectedFilters.country = couthis.filteredZonesntry;
                     // Save updated filters to localStorage
-                    localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
-                    // Trigger UI change detection
+                    localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
+                    // Trigger change detection if needed
                     this.cd.detectChanges();
                 }
                 else {
-                    // Handle empty or error response
                     this.clearZoneState();
                 }
             },
             error: (err) => {
-                console.error("Failed to fetch stores", err);
+                console.error("Failed to fetch zones", err);
                 this.clearZoneState();
-            }
+            },
         });
     }
     clearZoneState() {
         this.zones = [];
         this.filteredZones = [];
         this.selectedFilters.zonename = [];
-        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
     }
     // Clear stores state and reset filters
     clearStoresState() {
         this.stores = [];
         this.filteredStores = [];
         this.selectedFilters.stores = [];
-        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
     }
     resetSelectedStores() {
         this.filteredStores.forEach((store) => (store.checked = false));
         this.searchStoreText = "";
     }
     selectedStoresLabel() {
-        const selectedStores = this.searchStoreText.length ? this.stores.filter((store) => store.checked) : this.filteredStores.filter((store) => store.checked);
+        const selectedStores = this.searchStoreText.length
+            ? this.stores.filter((store) => store.checked)
+            : this.filteredStores.filter((store) => store.checked);
         return selectedStores.length === 0
             ? "0 Stores"
             : selectedStores.length === 1
@@ -7555,7 +7611,9 @@ class MetricsHeaderComponent {
                 : `${selectedStores.length} Stores`;
     }
     selectedZonesLabel() {
-        const selectedStores = this.searchZoneText.length ? this.zones.filter((zone) => zone.checked) : this.filteredZones.filter((zone) => zone.checked);
+        const selectedStores = this.searchZoneText.length
+            ? this.zones.filter((zone) => zone.checked)
+            : this.filteredZones.filter((zone) => zone.checked);
         return selectedStores.length === 0
             ? "0 Zones"
             : selectedStores.length === 1
@@ -7563,23 +7621,26 @@ class MetricsHeaderComponent {
                 : `${selectedStores.length} Zones`;
     }
     isAllStoresSelected() {
-        return this.filteredStores.length > 0 && this.filteredStores.every(store => store.checked);
+        return (this.filteredStores.length > 0 &&
+            this.filteredStores.every((store) => store.checked));
     }
     isAllZonesSelected() {
-        return this.filteredZones.length > 0 && this.filteredZones.every(zone => zone.checked);
+        return this.filteredZones
+            .filter((zone) => zone._id !== "overall")
+            .every((zone) => zone.checked);
     }
     // Method to handle dropdown item selection
     updateSelectedStores() {
-        this.filteredStores.forEach(store => {
-            const filteredStore = this.stores.findIndex(fStore => fStore.storeId === store.storeId);
+        this.filteredStores.forEach((store) => {
+            const filteredStore = this.stores.findIndex((fStore) => fStore.storeId === store.storeId);
             if (filteredStore != -1) {
                 this.stores[filteredStore].checked = store.checked; // Sync the checked state with full store list
             }
         });
         // Update selectedFilters based on the current store selection
-        this.selectedFilters.stores = this.stores.filter(store => store.checked);
+        this.selectedFilters.stores = this.stores.filter((store) => store.checked);
         // Update localStorage with the latest selection
-        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
         // Emit updated filters via service
         // this.gs.dataRangeValue.next(this.selectedFilters);
         // Trigger change detection if necessary
@@ -7591,20 +7652,30 @@ class MetricsHeaderComponent {
         this.selectedFilters.zoneName = [];
         this.cd.detectChanges();
     }
-    updateSelectedZones() {
-        this.filteredZones.forEach(zone => {
-            const filteredZone = this.zones.findIndex(fStore => fStore._id === zone._id);
-            if (filteredZone != -1) {
-                this.zones[filteredZone].checked = zone.checked; // Sync the checked state with full store list
+    updateSelectedZones(clickedZoneId) {
+        this.filteredZones.forEach((zone) => {
+            const index = this.zones.findIndex((z) => z._id === zone._id);
+            if (index !== -1) {
+                this.zones[index].checked = zone.checked;
             }
         });
-        // Update selectedFilters based on the current store selection
-        this.selectedFilters.zoneName = this.zones.filter(zone => zone.checked);
-        // Update localStorage with the latest selection
-        localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
-        // Emit updated filters via service
-        // this.gs.dataRangeValue.next(this.selectedFilters);
-        // Trigger change detection if necessary
+        const overallZone = this.zones.find((z) => z._id === "overall");
+        const overallChecked = overallZone?.checked ?? false;
+        const othersSelected = this.zones.some((z) => z._id !== "overall" && z.checked);
+        if (clickedZoneId === "overall" && overallChecked) {
+            this.zones = this.zones.map((z) => ({
+                ...z,
+                checked: z._id === "overall",
+            }));
+        }
+        if (clickedZoneId !== "overall" && overallChecked) {
+            if (overallZone) {
+                overallZone.checked = false;
+            }
+        }
+        this.filteredZones = [...this.zones];
+        this.selectedFilters.zoneName = this.zones.filter((z) => z.checked);
+        localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
         this.cd.detectChanges();
     }
     toggleSelectAllLocations(event) {
@@ -7615,9 +7686,9 @@ class MetricsHeaderComponent {
     toggleSelectAllStores(event) {
         const checked = event.target.checked;
         // Apply the selection to both filtered and full list of stores
-        this.filteredStores.forEach(store => store.checked = checked);
-        this.stores.forEach(store => {
-            const filteredStore = this.filteredStores.find(fStore => fStore.storeId === store.storeId);
+        this.filteredStores.forEach((store) => (store.checked = checked));
+        this.stores.forEach((store) => {
+            const filteredStore = this.filteredStores.find((fStore) => fStore.storeId === store.storeId);
             if (filteredStore) {
                 store.checked = checked; // Sync the checked state with full store list
             }
@@ -7627,16 +7698,24 @@ class MetricsHeaderComponent {
     }
     toggleSelectAllZones(event) {
         const checked = event.target.checked;
-        // Apply the selection to both filtered and full list of stores
-        this.filteredZones.forEach(zone => zone.checked = checked);
-        this.zones.forEach(zone => {
-            const filteredStore = this.filteredZones.find(fStore => fStore._id === zone._id);
-            if (filteredStore) {
-                zone.checked = checked; // Sync the checked state with full store list
+        this.filteredZones.forEach((zone) => {
+            if (zone._id !== "overall") {
+                zone.checked = checked;
+            }
+            else {
+                zone.checked = false;
             }
         });
-        // Update the selected stores and persist the selection
-        this.updateSelectedZones();
+        this.zones.forEach((zone) => {
+            const match = this.filteredZones.find((fz) => fz._id === zone._id);
+            if (match) {
+                zone.checked = match.checked;
+            }
+        });
+        // Since this is bulk, pass a dummy value — any non-overall zone is fine
+        const anySelectedZone = this.filteredZones.find((z) => z._id !== "overall");
+        const clickedId = anySelectedZone ? anySelectedZone._id : "";
+        this.updateSelectedZones(clickedId);
     }
     updateSelectedLocations() {
         // When locations are selected, fetch the related groups
@@ -7663,8 +7742,8 @@ class MetricsHeaderComponent {
         }
         this.selectedFilters.group = [];
         this.filteredStores = []; // Reset stores as well
-        this.searchGroupText = '';
-        this.searchStoreText = '';
+        this.searchGroupText = "";
+        this.searchStoreText = "";
         // this.Opendropdown = false;
     }
     toggleSelectAllGroups(event) {
@@ -7694,26 +7773,25 @@ class MetricsHeaderComponent {
             this.filteredStores = [];
             // Also, update localStorage to reflect the cleared store selection
             this.selectedFilters.stores = [];
-            localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
+            localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
             // Emit data via service
             // this.gs.dataRangeValue.next(this.selectedFilters);
         }
         // Clear the search store text when groups are updated
-        this.searchStoreText = '';
+        this.searchStoreText = "";
     }
     Reset() {
         setTimeout(() => {
-            // Clear selected groups, stores, and locations
             this.filteredCountries = [];
             this.filteredGroups = [];
             this.filteredStores = [];
-            this.filteredLocations = []; // Reset locations as well
+            this.filteredLocations = [];
             this.locations = [];
             this.groupsData = [];
             this.stores = [];
             this.filteredZones = [];
             this.zones = [];
-            // Clear search input fields
+            this.countries = [];
             this.searchLocationText = "";
             this.searchGroupText = "";
             this.searchStoreText = "";
@@ -7722,32 +7800,14 @@ class MetricsHeaderComponent {
             this.selectedFilters.location = [];
             this.selectedFilters.country = [];
             this.selectedFilters.zoneName = [];
-            // Fetch locations, groups, and stores again
             this.getCountry();
             this.getLocations();
             this.getStore();
             this.getGroups();
-            // 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));
+            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);
     }
@@ -7756,17 +7816,18 @@ class MetricsHeaderComponent {
         if (searchText) {
             // Preserve the checked state during filtering
             this.filteredLocations = this.locations
-                .map(location => ({
+                .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));
+                .filter((location) => location?.city?.toLowerCase().includes(searchText));
         }
         else {
             // Restore the original checked state when search text is cleared
-            this.filteredLocations = this.locations.map(location => ({
+            this.filteredLocations = this.locations.map((location) => ({
                 ...location,
-                checked: this.selectedFilters.location.find((l) => l.city === location.city)?.checked || false
+                checked: this.selectedFilters.location.find((l) => l.city === location.city)?.checked || false,
             }));
         }
     }
@@ -7775,17 +7836,18 @@ class MetricsHeaderComponent {
         if (searchText) {
             // Preserve the checked state during filtering
             this.filteredGroups = this.groupsData
-                .map(group => ({
+                .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));
+                .filter((group) => group?.groupName?.toLowerCase().includes(searchText));
         }
         else {
             // Restore the original checked state when search text is cleared
-            this.filteredGroups = this.groupsData.map(group => ({
+            this.filteredGroups = this.groupsData.map((group) => ({
                 ...group,
-                checked: this.selectedFilters.group.find((g) => g.groupName === group.groupName)?.checked || false
+                checked: this.selectedFilters.group.find((g) => g.groupName === group.groupName)?.checked || false,
             }));
         }
     }
@@ -7795,19 +7857,23 @@ class MetricsHeaderComponent {
         if (searchText) {
             // Filter based on search text while preserving checked state
             this.filteredStores = this.stores
-                .map(store => ({
+                .map((store) => ({
                 ...store,
                 // Check if the store is already checked in filteredStores, fallback to original stores' checked state
-                checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked || store.checked || false
+                checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked ||
+                    store.checked ||
+                    false,
             }))
-                .filter(store => store.storeName.toLowerCase().includes(searchText));
+                .filter((store) => store.storeName.toLowerCase().includes(searchText));
         }
         else {
             // When the search text is cleared, restore the original list with preserved checked states
-            this.filteredStores = this.stores.map(store => ({
+            this.filteredStores = this.stores.map((store) => ({
                 ...store,
                 // Preserve the checked state based on the selected filters
-                checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked || store.checked || false
+                checked: this.selectedFilters.stores.find((s) => s.storeId === store.storeId)?.checked ||
+                    store.checked ||
+                    false,
             }));
         }
     }
@@ -7817,19 +7883,25 @@ class MetricsHeaderComponent {
         if (searchText) {
             // Filter based on search text while preserving checked state
             this.filteredZones = this.zones
-                .map(zone => ({
+                .map((zone) => ({
                 ...zone,
                 // Check if the store is already checked in filteredStores, fallback to original stores' checked state
-                checked: this.selectedFilters.zoneName.find((s) => s._id === zone._id)?.checked || zone.checked || false
+                checked: this.selectedFilters.zoneName.find((s) => s._id === zone._id)
+                    ?.checked ||
+                    zone.checked ||
+                    false,
             }))
-                .filter(zone => zone.tagName.toLowerCase().includes(searchText));
+                .filter((zone) => zone.tagName.toLowerCase().includes(searchText));
         }
         else {
             // When the search text is cleared, restore the original list with preserved checked states
-            this.filteredZones = this.zones.map(zone => ({
+            this.filteredZones = this.zones.map((zone) => ({
                 ...zone,
                 // Preserve the checked state based on the selected filters
-                checked: this.selectedFilters.zoneName.find((s) => s._id === zone._id)?.checked || zone.checked || false
+                checked: this.selectedFilters.zoneName.find((s) => s._id === zone._id)
+                    ?.checked ||
+                    zone.checked ||
+                    false,
             }));
         }
     }
@@ -7896,7 +7968,7 @@ class MetricsHeaderComponent {
     // isAllCountriesSelected(): boolean {
     //   return this.filteredCountries.every(country => country.checked);
     // }
-    // filterCountries(): void {    
+    // filterCountries(): void {
     //   const searchText = this.searchCountryText.toLowerCase();
     //   if (searchText) {
     //     // Preserve the checked state during filtering
@@ -7918,12 +7990,16 @@ class MetricsHeaderComponent {
     // }
     getCountry() {
         let obj = {
-            clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
+            clientId: this.selectedFilters.client
+                ? this.selectedFilters.client
+                : this.users.clientId,
         };
         this.auth.getCountry(obj).subscribe({
             next: (res) => {
                 // Extract selected countries from existing filters (if any)
-                let countryList = this.selectedFilters?.country?.filter((country) => country.checked).map((loc) => loc.country);
+                let countryList = this.selectedFilters?.country
+                    ?.filter((country) => country.checked)
+                    .map((loc) => loc.country);
                 // Map API response to frontend model
                 this.countries = res?.data?.countryData.map((item) => ({
                     country: item.country,
@@ -7931,10 +8007,13 @@ class MetricsHeaderComponent {
                     // checked: cityList?.length ? cityList.includes(city.city) : true,
                     checked: countryList?.includes(item.country) ? true : false,
                 }));
-                if (this.selectedFilters.country && Array.isArray(this.selectedFilters.country)) {
-                    this.filteredCountries = this.countries.map(location => {
+                if (this.selectedFilters.country &&
+                    Array.isArray(this.selectedFilters.country)) {
+                    this.filteredCountries = this.countries.map((location) => {
                         const matchedLocation = this.selectedFilters.country.find((loc) => loc.country === location.country);
-                        return matchedLocation ? { ...location, checked: matchedLocation.checked } : location;
+                        return matchedLocation
+                            ? { ...location, checked: matchedLocation.checked }
+                            : location;
                     });
                 }
                 else {
@@ -7962,10 +8041,14 @@ class MetricsHeaderComponent {
     }
     selectedCountriesLabel() {
         const selectedCountries = this.searchCountryText.length
-            ? this.filteredCountries.filter(country => country.checked).map(country => country.country)
-            : this.countries.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
-            ? ''
+            ? ""
             : selectedCountries.length === 1
                 ? selectedCountries[0]
                 : `${selectedCountries.length} countries`;
@@ -7975,22 +8058,24 @@ class MetricsHeaderComponent {
         if (searchText) {
             // Filter and preserve checked state
             this.filteredCountries = this.countries
-                .map(country => ({
+                .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));
+                .filter((country) => country.country.toLowerCase().includes(searchText));
         }
         else {
             // Reset to full list
             this.filteredCountries = this.countries.map((country) => ({
                 ...country,
-                checked: this.selectedFilters.country?.find((c) => c.country === country.country)?.checked || false
+                checked: this.selectedFilters.country?.find((c) => c.country === country.country)?.checked || false,
             }));
         }
     }
     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;
@@ -8027,8 +8112,8 @@ class MetricsHeaderComponent {
         this.selectedFilters.group = [];
         this.filteredStores = []; // Reset stores as well
         this.filteredZones = [];
-        this.searchGroupText = '';
-        this.searchStoreText = '';
+        this.searchGroupText = "";
+        this.searchStoreText = "";
         // this.Opendropdown = false;
     }
     removeCountry() {
@@ -8044,8 +8129,12 @@ class MetricsHeaderComponent {
         this.selectedFilters.country = this.filteredCountries;
         this.selectedFilters.location = this.locations;
         this.selectedFilters.group = this.groupsData;
-        this.selectedFilters.stores = headerFilters.stores ? headerFilters.stores : this.stores;
-        this.selectedFilters.zoneName = headerFilters.zoneName ? headerFilters.zoneName : this.zones;
+        this.selectedFilters.stores = headerFilters.stores
+            ? headerFilters.stores
+            : this.stores;
+        this.selectedFilters.zoneName = headerFilters.zoneName
+            ? headerFilters.zoneName
+            : this.zones;
         // this.selectedFilters.zoneName = this.filteredZones;
         // Store updated filters back in localStorage
         localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
@@ -8058,14 +8147,14 @@ class MetricsHeaderComponent {
         this.cd.detectChanges();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MetricsHeaderComponent, 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: MetricsHeaderComponent, selector: "lib-metrics-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\">{{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\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n      <label class=\"badge badge-light-default mx-2\">{{selectedZonesLabel()}} \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</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-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 dropdown2 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             <!-- Country Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('country')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedCountriesLabel()\"\r\n            readonly\r\n            placeholder=\"Select country\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'country'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search country\" \r\n            [(ngModel)]=\"searchCountryText\" \r\n            (ngModelChange)=\"filterCountries()\" \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=\"selectAllCountries\" \r\n                [checked]=\"isAllCountriesSelected()\" \r\n                (change)=\"toggleSelectAllCountries($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllCountries\">\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 country of filteredCountries\"\r\n        >\r\n        <input \r\n        class=\"form-check-input cursor-pointer\" \r\n        type=\"checkbox\" \r\n        [id]=\"country.country\" \r\n        [(ngModel)]=\"country.checked\"\r\n        (change)=\"updateSelectedCountries()\" \r\n      />\r\n      <label class=\"form-check-label\" [for]=\"country.country\">\r\n        {{ country.country }}\r\n      </label>\r\n      \r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (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 Region\"\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 Region\" \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<!-- Zone Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('zone')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\"\r\n            [value]=\"selectedZonesLabel()\"\r\n            readonly\r\n            placeholder=\"Select zones\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'zone'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search \" \r\n            placeholder=\"Search zones\" \r\n            [(ngModel)]=\"searchZoneText\" \r\n            (ngModelChange)=\"filterZones()\" \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=\"selectAllZones\" \r\n                [checked]=\"isAllZonesSelected()\" \r\n                (change)=\"toggleSelectAllZones($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllZones\">\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 zone of filteredZones\"\r\n        >\r\n            <input \r\n                class=\"form-check-input\" \r\n                type=\"checkbox\" \r\n                [id]=\"zone._id\"\r\n                [(ngModel)]=\"zone.checked\"\r\n                (change)=\"updateSelectedZones()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"zone._id\">\r\n                {{ zone.tagName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:70px;min-width:270px!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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: MetricsHeaderComponent, selector: "lib-metrics-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\">{{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\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n      <label class=\"badge badge-light-default mx-2\">{{selectedZonesLabel()}} \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</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-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 dropdown2 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             <!-- Country Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('country')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedCountriesLabel()\"\r\n            readonly\r\n            placeholder=\"Select country\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'country'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search country\" \r\n            [(ngModel)]=\"searchCountryText\" \r\n            (ngModelChange)=\"filterCountries()\" \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=\"selectAllCountries\" \r\n                [checked]=\"isAllCountriesSelected()\" \r\n                (change)=\"toggleSelectAllCountries($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllCountries\">\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 country of filteredCountries\"\r\n        >\r\n        <input \r\n        class=\"form-check-input cursor-pointer\" \r\n        type=\"checkbox\" \r\n        [id]=\"country.country\" \r\n        [(ngModel)]=\"country.checked\"\r\n        (change)=\"updateSelectedCountries()\" \r\n      />\r\n      <label class=\"form-check-label\" [for]=\"country.country\">\r\n        {{ country.country }}\r\n      </label>\r\n      \r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (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 Region\"\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 Region\" \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<!-- Zone Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('zone')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\"\r\n            [value]=\"selectedZonesLabel()\"\r\n            readonly\r\n            placeholder=\"Select zones\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'zone'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search \" \r\n            placeholder=\"Search zones\" \r\n            [(ngModel)]=\"searchZoneText\" \r\n            (ngModelChange)=\"filterZones()\" \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=\"selectAllZones\" \r\n                [checked]=\"isAllZonesSelected()\" \r\n                (change)=\"toggleSelectAllZones($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllZones\">\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 zone of filteredZones\"\r\n        >\r\n            <input \r\n                class=\"form-check-input\" \r\n                type=\"checkbox\" \r\n                [id]=\"zone._id\"\r\n                [(ngModel)]=\"zone.checked\"\r\n              (change)=\"updateSelectedZones(zone._id)\"\r\n            />\r\n            <label class=\"form-check-label\" [for]=\"zone._id\">\r\n                {{ zone.tagName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:70px;min-width:270px!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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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: MetricsHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-metrics-header', template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2\">{{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\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n      <label class=\"badge badge-light-default mx-2\">{{selectedZonesLabel()}} \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</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-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 dropdown2 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             <!-- Country Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('country')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedCountriesLabel()\"\r\n            readonly\r\n            placeholder=\"Select country\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'country'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search country\" \r\n            [(ngModel)]=\"searchCountryText\" \r\n            (ngModelChange)=\"filterCountries()\" \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=\"selectAllCountries\" \r\n                [checked]=\"isAllCountriesSelected()\" \r\n                (change)=\"toggleSelectAllCountries($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllCountries\">\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 country of filteredCountries\"\r\n        >\r\n        <input \r\n        class=\"form-check-input cursor-pointer\" \r\n        type=\"checkbox\" \r\n        [id]=\"country.country\" \r\n        [(ngModel)]=\"country.checked\"\r\n        (change)=\"updateSelectedCountries()\" \r\n      />\r\n      <label class=\"form-check-label\" [for]=\"country.country\">\r\n        {{ country.country }}\r\n      </label>\r\n      \r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (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 Region\"\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 Region\" \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<!-- Zone Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('zone')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\"\r\n            [value]=\"selectedZonesLabel()\"\r\n            readonly\r\n            placeholder=\"Select zones\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'zone'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search \" \r\n            placeholder=\"Search zones\" \r\n            [(ngModel)]=\"searchZoneText\" \r\n            (ngModelChange)=\"filterZones()\" \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=\"selectAllZones\" \r\n                [checked]=\"isAllZonesSelected()\" \r\n                (change)=\"toggleSelectAllZones($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllZones\">\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 zone of filteredZones\"\r\n        >\r\n            <input \r\n                class=\"form-check-input\" \r\n                type=\"checkbox\" \r\n                [id]=\"zone._id\"\r\n                [(ngModel)]=\"zone.checked\"\r\n                (change)=\"updateSelectedZones()\" \r\n            />\r\n            <label class=\"form-check-label\" [for]=\"zone._id\">\r\n                {{ zone.tagName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:70px;min-width:270px!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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
+            args: [{ selector: "lib-metrics-header", template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2\">{{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\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n      <label class=\"badge badge-light-default mx-2\">{{selectedZonesLabel()}} \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</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-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 dropdown2 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             <!-- Country Dropdown -->\r\n<div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('country')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\" \r\n            [value]=\"selectedCountriesLabel()\"\r\n            readonly\r\n            placeholder=\"Select country\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'country'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search\" \r\n            placeholder=\"Search country\" \r\n            [(ngModel)]=\"searchCountryText\" \r\n            (ngModelChange)=\"filterCountries()\" \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=\"selectAllCountries\" \r\n                [checked]=\"isAllCountriesSelected()\" \r\n                (change)=\"toggleSelectAllCountries($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllCountries\">\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 country of filteredCountries\"\r\n        >\r\n        <input \r\n        class=\"form-check-input cursor-pointer\" \r\n        type=\"checkbox\" \r\n        [id]=\"country.country\" \r\n        [(ngModel)]=\"country.checked\"\r\n        (change)=\"updateSelectedCountries()\" \r\n      />\r\n      <label class=\"form-check-label\" [for]=\"country.country\">\r\n        {{ country.country }}\r\n      </label>\r\n      \r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n     <!-- Location Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (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 Region\"\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 Region\" \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<!-- Zone Dropdown -->\r\n<div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n    <div class=\"dropdown-header\" (click)=\"toggleDropdown('zone')\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control dropdown-input cursor-pointer\"\r\n            [value]=\"selectedZonesLabel()\"\r\n            readonly\r\n            placeholder=\"Select zones\"\r\n        />\r\n    </div>\r\n    <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'zone'\">\r\n        <input \r\n            type=\"text\" \r\n            class=\"form-control mb-2 dropdown-search \" \r\n            placeholder=\"Search zones\" \r\n            [(ngModel)]=\"searchZoneText\" \r\n            (ngModelChange)=\"filterZones()\" \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=\"selectAllZones\" \r\n                [checked]=\"isAllZonesSelected()\" \r\n                (change)=\"toggleSelectAllZones($event)\" \r\n            />\r\n            <label class=\"form-check-label\" for=\"selectAllZones\">\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 zone of filteredZones\"\r\n        >\r\n            <input \r\n                class=\"form-check-input\" \r\n                type=\"checkbox\" \r\n                [id]=\"zone._id\"\r\n                [(ngModel)]=\"zone.checked\"\r\n              (change)=\"updateSelectedZones(zone._id)\"\r\n            />\r\n            <label class=\"form-check-label\" [for]=\"zone._id\">\r\n                {{ zone.tagName }}\r\n            </label>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:70px;min-width:270px!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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
-                args: ['document:click', ['$event']]
+                args: ["document:click", ["$event"]]
             }], clickOutside: [{
                 type: HostListener,
                 args: ["document:click", ["$event"]]