tango-app-ui-shared 3.7.3-dev6-copilot4 → 3.7.3-dev6-copilot5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/modules/layout/header/header.component.mjs +2 -2
- package/esm2022/lib/modules/layout/toolbar/traffic-header/traffic-header/traffic-header.component.mjs +130 -32
- package/fesm2022/tango-app-ui-shared.mjs +130 -32
- package/fesm2022/tango-app-ui-shared.mjs.map +1 -1
- package/lib/modules/layout/toolbar/traffic-header/traffic-header/traffic-header.component.d.ts +11 -1
- package/package.json +1 -1
|
@@ -1478,10 +1478,7 @@ class TrafficHeaderComponent {
|
|
|
1478
1478
|
this.getClient();
|
|
1479
1479
|
}
|
|
1480
1480
|
else {
|
|
1481
|
-
this.
|
|
1482
|
-
this.getLocations();
|
|
1483
|
-
this.getGroups();
|
|
1484
|
-
this.getStore();
|
|
1481
|
+
this.getStatus();
|
|
1485
1482
|
const clientFilters = localStorage.getItem("client-details");
|
|
1486
1483
|
if (clientFilters) {
|
|
1487
1484
|
const headerclientFilters = JSON.parse(clientFilters);
|
|
@@ -1611,11 +1608,7 @@ class TrafficHeaderComponent {
|
|
|
1611
1608
|
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
1612
1609
|
// console.log("2")
|
|
1613
1610
|
// Ensure locations and groups are loaded before fetching stores
|
|
1614
|
-
this.
|
|
1615
|
-
this.getLocations();
|
|
1616
|
-
this.getGroups();
|
|
1617
|
-
// Fetch stores only after locations and groups are set
|
|
1618
|
-
this.getStore();
|
|
1611
|
+
this.getStatus();
|
|
1619
1612
|
this.restoreDowntimeFromStorage();
|
|
1620
1613
|
}
|
|
1621
1614
|
else {
|
|
@@ -1635,11 +1628,7 @@ class TrafficHeaderComponent {
|
|
|
1635
1628
|
// console.log("3")
|
|
1636
1629
|
this.cd.detectChanges();
|
|
1637
1630
|
// Ensure locations and groups are loaded before fetching stores
|
|
1638
|
-
this.
|
|
1639
|
-
this.getLocations();
|
|
1640
|
-
this.getGroups();
|
|
1641
|
-
// Fetch stores only after locations and groups are set
|
|
1642
|
-
this.getStore();
|
|
1631
|
+
this.getStatus();
|
|
1643
1632
|
}
|
|
1644
1633
|
}
|
|
1645
1634
|
else {
|
|
@@ -1647,11 +1636,7 @@ class TrafficHeaderComponent {
|
|
|
1647
1636
|
this.selectedFilters.client = this.selectedClient.clientId;
|
|
1648
1637
|
this.selectedFilters.clientName = this.selectedClient.clientName;
|
|
1649
1638
|
// Ensure locations and groups are loaded before fetching stores
|
|
1650
|
-
this.
|
|
1651
|
-
this.getLocations();
|
|
1652
|
-
this.getGroups();
|
|
1653
|
-
// Fetch stores only after locations and groups are set
|
|
1654
|
-
this.getStore();
|
|
1639
|
+
this.getStatus();
|
|
1655
1640
|
localStorage.setItem("header-filters", JSON.stringify(this.selectedFilters));
|
|
1656
1641
|
this.gs.dataRangeValue.next(this.selectedFilters);
|
|
1657
1642
|
// console.log("4")
|
|
@@ -1697,10 +1682,11 @@ class TrafficHeaderComponent {
|
|
|
1697
1682
|
delete headerFilters.country;
|
|
1698
1683
|
delete headerFilters.downtime;
|
|
1699
1684
|
// Fetch new data based on the new client
|
|
1700
|
-
this.getCountry();
|
|
1701
|
-
this.getLocations();
|
|
1702
|
-
this.getStore();
|
|
1703
|
-
this.getGroups();
|
|
1685
|
+
// this.getCountry();
|
|
1686
|
+
// this.getLocations();
|
|
1687
|
+
// this.getStore();
|
|
1688
|
+
// this.getGroups();
|
|
1689
|
+
this.getStatus();
|
|
1704
1690
|
// Update localStorage with the new client selection and empty filter data
|
|
1705
1691
|
localStorage.setItem('header-filters', JSON.stringify(this.selectedFilters));
|
|
1706
1692
|
window.location.reload();
|
|
@@ -1770,6 +1756,8 @@ class TrafficHeaderComponent {
|
|
|
1770
1756
|
country,
|
|
1771
1757
|
city: [],
|
|
1772
1758
|
group: [],
|
|
1759
|
+
status: this.selectedFilters?.status?.length
|
|
1760
|
+
? this.selectedFilters.status : ['active']
|
|
1773
1761
|
};
|
|
1774
1762
|
this.auth.getLocation(obj).subscribe({
|
|
1775
1763
|
next: (res) => {
|
|
@@ -1844,7 +1832,10 @@ class TrafficHeaderComponent {
|
|
|
1844
1832
|
if (!city.length && country.length) {
|
|
1845
1833
|
city = this.locations.map((loc) => loc.city);
|
|
1846
1834
|
}
|
|
1847
|
-
const obj = { country, city, clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId, group: []
|
|
1835
|
+
const obj = { country, city, clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId, group: [],
|
|
1836
|
+
status: this.selectedFilters?.status?.length
|
|
1837
|
+
? this.selectedFilters.status : ['active']
|
|
1838
|
+
};
|
|
1848
1839
|
this.auth.getGroups(obj).subscribe({
|
|
1849
1840
|
next: (res) => {
|
|
1850
1841
|
let checkedGroup = this.selectedFilters?.group?.filter((group) => group.checked).map((group) => group.groupName);
|
|
@@ -1881,6 +1872,9 @@ class TrafficHeaderComponent {
|
|
|
1881
1872
|
else {
|
|
1882
1873
|
// Open the specific dropdown and handle data fetching only if necessary
|
|
1883
1874
|
this.dropdownOpen = type;
|
|
1875
|
+
if (type === "status") {
|
|
1876
|
+
this.getStatus();
|
|
1877
|
+
}
|
|
1884
1878
|
if (type === 'country') {
|
|
1885
1879
|
// Fetch countries only if not already fetched and no search text exists
|
|
1886
1880
|
if ((!this.filteredCountries || this.filteredCountries.length === 0) && !this.searchCountryText.trim()) {
|
|
@@ -1952,7 +1946,9 @@ class TrafficHeaderComponent {
|
|
|
1952
1946
|
country,
|
|
1953
1947
|
city,
|
|
1954
1948
|
clusters: group,
|
|
1955
|
-
clientId: this.users.clientId || this.selectedFilters.client
|
|
1949
|
+
clientId: this.users.clientId || this.selectedFilters.client,
|
|
1950
|
+
status: this.selectedFilters?.status?.length
|
|
1951
|
+
? this.selectedFilters.status : ['active']
|
|
1956
1952
|
};
|
|
1957
1953
|
this.auth.getHeaderStores(data).subscribe({
|
|
1958
1954
|
next: (res) => {
|
|
@@ -2148,10 +2144,11 @@ class TrafficHeaderComponent {
|
|
|
2148
2144
|
this.selectedFilters.country = [];
|
|
2149
2145
|
this.selectedFilters.downtime = [];
|
|
2150
2146
|
// Fetch locations, groups, and stores again
|
|
2151
|
-
this.getCountry();
|
|
2152
|
-
this.getLocations();
|
|
2153
|
-
this.getStore();
|
|
2154
|
-
this.getGroups();
|
|
2147
|
+
// this.getCountry();
|
|
2148
|
+
// this.getLocations();
|
|
2149
|
+
// this.getStore();
|
|
2150
|
+
// this.getGroups();
|
|
2151
|
+
this.getStatus();
|
|
2155
2152
|
// Reset the filters in selectedFilters
|
|
2156
2153
|
// // Once stores are fetched, mark all as checked
|
|
2157
2154
|
// setTimeout(() => {
|
|
@@ -2322,6 +2319,8 @@ class TrafficHeaderComponent {
|
|
|
2322
2319
|
getCountry() {
|
|
2323
2320
|
let obj = {
|
|
2324
2321
|
clientId: this.selectedFilters.client ? this.selectedFilters.client : this.users.clientId,
|
|
2322
|
+
status: this.selectedFilters?.status?.length
|
|
2323
|
+
? this.selectedFilters.status : ['active']
|
|
2325
2324
|
};
|
|
2326
2325
|
this.auth.getCountry(obj).subscribe({
|
|
2327
2326
|
next: (res) => {
|
|
@@ -2466,6 +2465,8 @@ class TrafficHeaderComponent {
|
|
|
2466
2465
|
}
|
|
2467
2466
|
getSelectedCount(type) {
|
|
2468
2467
|
switch (type) {
|
|
2468
|
+
case 'status':
|
|
2469
|
+
return this.selectedStatusLabel1();
|
|
2469
2470
|
case 'country':
|
|
2470
2471
|
return this.selectedCountriesLabel1();
|
|
2471
2472
|
case 'location':
|
|
@@ -2594,12 +2595,109 @@ class TrafficHeaderComponent {
|
|
|
2594
2595
|
this.downtimeApi();
|
|
2595
2596
|
}
|
|
2596
2597
|
}
|
|
2598
|
+
statusVal;
|
|
2599
|
+
searchStatusText = "";
|
|
2600
|
+
filteredStatus = [];
|
|
2601
|
+
getStatus() {
|
|
2602
|
+
// base status list
|
|
2603
|
+
this.statusVal = [
|
|
2604
|
+
{ status: 'active', checked: false },
|
|
2605
|
+
{ status: 'deactive', checked: false }
|
|
2606
|
+
];
|
|
2607
|
+
const storedFilters = localStorage.getItem("header-filters");
|
|
2608
|
+
let statusList = [];
|
|
2609
|
+
if (this.selectedFilters?.status && this.selectedFilters.status.length > 0) {
|
|
2610
|
+
statusList = this.selectedFilters.status;
|
|
2611
|
+
}
|
|
2612
|
+
else if (storedFilters) {
|
|
2613
|
+
const parsed = JSON.parse(storedFilters);
|
|
2614
|
+
statusList = parsed.status && parsed.status.length > 0 ? parsed.status : ['active'];
|
|
2615
|
+
}
|
|
2616
|
+
else {
|
|
2617
|
+
statusList = ['active'];
|
|
2618
|
+
}
|
|
2619
|
+
// update selectedFilters to always have a value
|
|
2620
|
+
this.selectedFilters.status = statusList;
|
|
2621
|
+
// mark checked based on values
|
|
2622
|
+
this.filteredStatus = this.statusVal.map((status) => ({
|
|
2623
|
+
status: status.status,
|
|
2624
|
+
checked: statusList.includes(status.status)
|
|
2625
|
+
}));
|
|
2626
|
+
// if a search text already exists, filter immediately
|
|
2627
|
+
if (this.searchStatusText) {
|
|
2628
|
+
this.filterStatus();
|
|
2629
|
+
}
|
|
2630
|
+
// refresh dependent dropdowns
|
|
2631
|
+
this.getCountry();
|
|
2632
|
+
this.getLocations();
|
|
2633
|
+
this.getGroups();
|
|
2634
|
+
this.getStore();
|
|
2635
|
+
}
|
|
2636
|
+
selectedStatusLabel() {
|
|
2637
|
+
const selectedStatus = this.filteredStatus
|
|
2638
|
+
.filter((status) => status.checked)
|
|
2639
|
+
.map((status) => status.status);
|
|
2640
|
+
if (selectedStatus.length === 0) {
|
|
2641
|
+
return "";
|
|
2642
|
+
}
|
|
2643
|
+
if (selectedStatus.length === 1) {
|
|
2644
|
+
return selectedStatus[0]; // show "active" or "deactive"
|
|
2645
|
+
}
|
|
2646
|
+
return `${selectedStatus.length} status`; // e.g. "2 status"
|
|
2647
|
+
}
|
|
2648
|
+
selectedStatusLabel1() {
|
|
2649
|
+
const selectedStatus = this.filteredStatus
|
|
2650
|
+
.filter((status) => status.checked)
|
|
2651
|
+
.map((status) => status.status);
|
|
2652
|
+
console.log(selectedStatus.length);
|
|
2653
|
+
return `${selectedStatus.length}`; // e.g. "2 status"
|
|
2654
|
+
}
|
|
2655
|
+
filterStatus() {
|
|
2656
|
+
const searchText = this.searchStatusText.toLowerCase();
|
|
2657
|
+
if (searchText) {
|
|
2658
|
+
this.filteredStatus = this.statusVal
|
|
2659
|
+
.map((status) => ({
|
|
2660
|
+
...status,
|
|
2661
|
+
checked: this.selectedFilters.status?.includes(status.status) || false
|
|
2662
|
+
}))
|
|
2663
|
+
.filter((status) => status.status.toLowerCase().includes(searchText));
|
|
2664
|
+
}
|
|
2665
|
+
else {
|
|
2666
|
+
this.filteredStatus = this.statusVal.map((status) => ({
|
|
2667
|
+
...status,
|
|
2668
|
+
checked: this.selectedFilters.status?.includes(status.status) || false
|
|
2669
|
+
}));
|
|
2670
|
+
}
|
|
2671
|
+
}
|
|
2672
|
+
isAllStatusSelected() {
|
|
2673
|
+
return (this.filteredStatus.length > 0 &&
|
|
2674
|
+
this.filteredStatus.every((status) => status.checked));
|
|
2675
|
+
}
|
|
2676
|
+
toggleSelectAllStatus(event) {
|
|
2677
|
+
const isChecked = event.target.checked;
|
|
2678
|
+
// Update UI state
|
|
2679
|
+
this.filteredStatus.forEach((status) => (status.checked = isChecked));
|
|
2680
|
+
// Update selectedFilters with only checked status values
|
|
2681
|
+
this.selectedFilters.status = this.filteredStatus
|
|
2682
|
+
.filter((status) => status.checked)
|
|
2683
|
+
.map((status) => status.status);
|
|
2684
|
+
this.updateSelectedCountries();
|
|
2685
|
+
}
|
|
2686
|
+
updateSelectedStatus() {
|
|
2687
|
+
// keep only the checked statuses
|
|
2688
|
+
const selected = this.filteredStatus
|
|
2689
|
+
.filter((status) => status.checked)
|
|
2690
|
+
.map((status) => status.status); // ✅ pick only the value
|
|
2691
|
+
this.statusVal = selected;
|
|
2692
|
+
this.selectedFilters.status = selected;
|
|
2693
|
+
this.updateSelectedCountries();
|
|
2694
|
+
}
|
|
2597
2695
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2598
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('country', $event)\">{{selectedCountriesLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label (click)=\"showClick('stores', $event)\" class=\"badge badge-light-default mt-1 cursor-pointer\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-7 text-muted my-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'country'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search country\" \r\n [(ngModel)]=\"searchCountryText\" \r\n (ngModelChange)=\"filterCountries()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <span class=\"mb-3 pb-3\"></span>\r\n <!-- <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search from 2000 stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n /> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('country')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'country', \r\n 'text-item': activeDropdown !== 'country'\r\n }\">Country <span *ngIf=\"selectedCountriesLabel1()\" [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'downtime', \r\n 'text-item': activeDropdown !== 'downtime'\r\n }\" >Downtime (In Mins) </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n <!-- Country Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllCountriesFull\" \r\n [checked]=\"isAllCountriesSelected()\" \r\n (change)=\"toggleSelectAllCountries($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'country-full-' + country.country\" \r\n [(ngModel)]=\"country.checked\"\r\n (change)=\"updateSelectedCountries()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n {{ country.country }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllDowntimeFull\" \r\n [checked]=\"isAllDowntimeSelected()\" \r\n (change)=\"toggleSelectAllDowntime($event)\">\r\n <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n Select All \r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'downtime-full-' + downtime.value\" \r\n [(ngModel)]=\"downtime.checked\"\r\n (change)=\"updateSelectedDowntime()\">\r\n <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n {{ downtime.label }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
2696
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('country', $event)\">{{selectedCountriesLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label (click)=\"showClick('stores', $event)\" class=\"badge badge-light-default mt-1 cursor-pointer\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-7 text-muted my-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'status'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search status\" \r\n [(ngModel)]=\"searchStatusText\" \r\n (ngModelChange)=\"filterStatus()\" \r\n />\r\n </div>\r\n\r\n <div *ngIf=\"activeDropdown === 'country'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search country\" \r\n [(ngModel)]=\"searchCountryText\" \r\n (ngModelChange)=\"filterCountries()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <span class=\"mb-5 pb-3\"></span>\r\n <!-- <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search from 2000 stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n /> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('status')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'status', \r\n 'text-item': activeDropdown !== 'status'\r\n }\">Status <span *ngIf=\"selectedStatusLabel1()\" [ngClass]=\"activeDropdown=== 'status' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedStatusLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('country')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'country', \r\n 'text-item': activeDropdown !== 'country'\r\n }\">Country <span *ngIf=\"selectedCountriesLabel1()\" [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'downtime', \r\n 'text-item': activeDropdown !== 'downtime'\r\n }\" >Downtime (In Mins) </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n<div *ngIf=\"activeDropdown === 'status'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStatus\" \r\n [checked]=\"isAllStatusSelected()\" \r\n (change)=\"toggleSelectAllStatus($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let status of filteredStatus\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"status.status\" \r\n [(ngModel)]=\"status.checked\"\r\n (change)=\"updateSelectedStatus()\" \r\n />\r\n <label class=\"form-check-label text-capitalize\" [for]=\"status.status\">\r\n {{ status.status }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Country Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllCountriesFull\" \r\n [checked]=\"isAllCountriesSelected()\" \r\n (change)=\"toggleSelectAllCountries($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'country-full-' + country.country\" \r\n [(ngModel)]=\"country.checked\"\r\n (change)=\"updateSelectedCountries()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n {{ country.country }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllDowntimeFull\" \r\n [checked]=\"isAllDowntimeSelected()\" \r\n (change)=\"toggleSelectAllDowntime($event)\">\r\n <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n Select All \r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'downtime-full-' + downtime.value\" \r\n [(ngModel)]=\"downtime.checked\"\r\n (change)=\"updateSelectedDowntime()\">\r\n <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n {{ downtime.label }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:2px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
2599
2697
|
}
|
|
2600
2698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, decorators: [{
|
|
2601
2699
|
type: Component,
|
|
2602
|
-
args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('country', $event)\">{{selectedCountriesLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label (click)=\"showClick('stores', $event)\" class=\"badge badge-light-default mt-1 cursor-pointer\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-7 text-muted my-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'country'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search country\" \r\n [(ngModel)]=\"searchCountryText\" \r\n (ngModelChange)=\"filterCountries()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <span class=\"mb-3 pb-3\"></span>\r\n <!-- <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search from 2000 stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n /> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('country')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'country', \r\n 'text-item': activeDropdown !== 'country'\r\n }\">Country <span *ngIf=\"selectedCountriesLabel1()\" [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'downtime', \r\n 'text-item': activeDropdown !== 'downtime'\r\n }\" >Downtime (In Mins) </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n <!-- Country Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllCountriesFull\" \r\n [checked]=\"isAllCountriesSelected()\" \r\n (change)=\"toggleSelectAllCountries($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'country-full-' + country.country\" \r\n [(ngModel)]=\"country.checked\"\r\n (change)=\"updateSelectedCountries()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n {{ country.country }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllDowntimeFull\" \r\n [checked]=\"isAllDowntimeSelected()\" \r\n (change)=\"toggleSelectAllDowntime($event)\">\r\n <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n Select All \r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'downtime-full-' + downtime.value\" \r\n [(ngModel)]=\"downtime.checked\"\r\n (change)=\"updateSelectedDowntime()\">\r\n <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n {{ downtime.label }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
|
|
2700
|
+
args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('country', $event)\">{{selectedCountriesLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label (click)=\"showClick('stores', $event)\" class=\"badge badge-light-default mt-1 cursor-pointer\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-7 text-muted my-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'status'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search status\" \r\n [(ngModel)]=\"searchStatusText\" \r\n (ngModelChange)=\"filterStatus()\" \r\n />\r\n </div>\r\n\r\n <div *ngIf=\"activeDropdown === 'country'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search country\" \r\n [(ngModel)]=\"searchCountryText\" \r\n (ngModelChange)=\"filterCountries()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <span class=\"mb-5 pb-3\"></span>\r\n <!-- <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search from 2000 stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n /> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('status')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'status', \r\n 'text-item': activeDropdown !== 'status'\r\n }\">Status <span *ngIf=\"selectedStatusLabel1()\" [ngClass]=\"activeDropdown=== 'status' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedStatusLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('country')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'country', \r\n 'text-item': activeDropdown !== 'country'\r\n }\">Country <span *ngIf=\"selectedCountriesLabel1()\" [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'downtime', \r\n 'text-item': activeDropdown !== 'downtime'\r\n }\" >Downtime (In Mins) </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n<div *ngIf=\"activeDropdown === 'status'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStatus\" \r\n [checked]=\"isAllStatusSelected()\" \r\n (change)=\"toggleSelectAllStatus($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let status of filteredStatus\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"status.status\" \r\n [(ngModel)]=\"status.checked\"\r\n (change)=\"updateSelectedStatus()\" \r\n />\r\n <label class=\"form-check-label text-capitalize\" [for]=\"status.status\">\r\n {{ status.status }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Country Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllCountriesFull\" \r\n [checked]=\"isAllCountriesSelected()\" \r\n (change)=\"toggleSelectAllCountries($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'country-full-' + country.country\" \r\n [(ngModel)]=\"country.checked\"\r\n (change)=\"updateSelectedCountries()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n {{ country.country }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllDowntimeFull\" \r\n [checked]=\"isAllDowntimeSelected()\" \r\n (change)=\"toggleSelectAllDowntime($event)\">\r\n <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n Select All \r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'downtime-full-' + downtime.value\" \r\n [(ngModel)]=\"downtime.checked\"\r\n (change)=\"updateSelectedDowntime()\">\r\n <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n {{ downtime.label }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:2px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
|
|
2603
2701
|
}], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
|
|
2604
2702
|
type: HostListener,
|
|
2605
2703
|
args: ['document:click', ['$event']]
|
|
@@ -8987,7 +9085,7 @@ class HeaderComponent {
|
|
|
8987
9085
|
}
|
|
8988
9086
|
// Case 4: General management pages
|
|
8989
9087
|
if (this.url[1] === 'manage' ||
|
|
8990
|
-
fullPath === '/manage/stores' ||
|
|
9088
|
+
fullPath === '/manage/stores' || fullPath === '/eyetest/start-test' || fullPath === '/eyetest/pre-test-data' ||
|
|
8991
9089
|
fullPath === '/manage/stores/addition-method') {
|
|
8992
9090
|
return 'manage';
|
|
8993
9091
|
}
|