tango-app-ui-shared 3.7.3-dev18 → 3.7.3-dev19
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/layout/layout.component.mjs +9 -2
- package/esm2022/lib/modules/layout/toolbar/traffic-header/traffic-header/traffic-header.component.mjs +3 -3
- package/esm2022/lib/modules/layout/toolbar/traffic-nob/traffic-nob.component.mjs +3 -3
- package/esm2022/lib/modules/layout/toolbar/trax-header/trax-header.component.mjs +3 -3
- package/esm2022/lib/modules/layout/toolbar/trax-withoutdate/trax-withoutdate.component.mjs +3 -3
- package/fesm2022/tango-app-ui-shared.mjs +16 -9
- package/fesm2022/tango-app-ui-shared.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2623,11 +2623,11 @@ class TrafficHeaderComponent {
|
|
|
2623
2623
|
this.updateSelectedCountries();
|
|
2624
2624
|
}
|
|
2625
2625
|
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 });
|
|
2626
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('country', $event)\">{{selectedCountriesLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label (click)=\"showClick('stores', $event)\" class=\"badge badge-light-default mt-1 cursor-pointer\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-7 text-muted my-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'status'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search status\" \r\n [(ngModel)]=\"searchStatusText\" \r\n (ngModelChange)=\"filterStatus()\" \r\n />\r\n </div>\r\n\r\n <div *ngIf=\"activeDropdown === 'country'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search country\" \r\n [(ngModel)]=\"searchCountryText\" \r\n (ngModelChange)=\"filterCountries()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <span class=\"mb-5 pb-3\"></span>\r\n <!-- <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search from 2000 stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n /> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('status')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'status', \r\n 'text-item': activeDropdown !== 'status'\r\n }\">Status <span *ngIf=\"selectedStatusLabel1()\" [ngClass]=\"activeDropdown=== 'status' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedStatusLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('country')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'country', \r\n 'text-item': activeDropdown !== 'country'\r\n }\">Country <span *ngIf=\"selectedCountriesLabel1()\" [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'downtime', \r\n 'text-item': activeDropdown !== 'downtime'\r\n }\" >Downtime (In Mins) </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n<div *ngIf=\"activeDropdown === 'status'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredStatus?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStatus\" \r\n [checked]=\"isAllStatusSelected()\" \r\n (change)=\"toggleSelectAllStatus($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStatus?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let status of filteredStatus\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"status.status\" \r\n [(ngModel)]=\"status.checked\"\r\n (change)=\"updateSelectedStatus()\" \r\n />\r\n <label class=\"form-check-label text-capitalize\" [for]=\"status.status\">\r\n {{ status.status }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Country Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredCountries?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllCountriesFull\" \r\n [checked]=\"isAllCountriesSelected()\" \r\n (change)=\"toggleSelectAllCountries($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredCountries?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'country-full-' + country.country\" \r\n [(ngModel)]=\"country.checked\"\r\n (change)=\"updateSelectedCountries()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n {{ country.country }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllDowntimeFull\" \r\n [checked]=\"isAllDowntimeSelected()\" \r\n (change)=\"toggleSelectAllDowntime($event)\">\r\n <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n Select All \r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'downtime-full-' + downtime.value\" \r\n [(ngModel)]=\"downtime.checked\"\r\n (change)=\"updateSelectedDowntime()\">\r\n <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n {{ downtime.label }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:2px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
2626
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('country', $event)\">{{selectedCountriesLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label (click)=\"showClick('stores', $event)\" class=\"badge badge-light-default mt-1 cursor-pointer\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-7 text-muted my-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'status'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search status\" \r\n [(ngModel)]=\"searchStatusText\" \r\n (ngModelChange)=\"filterStatus()\" \r\n />\r\n </div>\r\n\r\n <div *ngIf=\"activeDropdown === 'country'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search country\" \r\n [(ngModel)]=\"searchCountryText\" \r\n (ngModelChange)=\"filterCountries()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <span class=\"mb-5 pb-3\"></span>\r\n <!-- <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search from 2000 stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n /> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('status')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'status', \r\n 'text-item': activeDropdown !== 'status'\r\n }\">Status <span *ngIf=\"selectedStatusLabel1()\" [ngClass]=\"activeDropdown=== 'status' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedStatusLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('country')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'country', \r\n 'text-item': activeDropdown !== 'country'\r\n }\">Country <span *ngIf=\"selectedCountriesLabel1()\" [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'downtime', \r\n 'text-item': activeDropdown !== 'downtime'\r\n }\" >Downtime (In Mins) </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n<div *ngIf=\"activeDropdown === 'status'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredStatus?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStatus\" \r\n [checked]=\"isAllStatusSelected()\" \r\n (change)=\"toggleSelectAllStatus($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStatus?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let status of filteredStatus\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"status.status\" \r\n [(ngModel)]=\"status.checked\"\r\n (change)=\"updateSelectedStatus()\" \r\n />\r\n <label class=\"form-check-label text-capitalize\" [for]=\"status.status\">\r\n {{ status.status }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Country Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredCountries?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllCountriesFull\" \r\n [checked]=\"isAllCountriesSelected()\" \r\n (change)=\"toggleSelectAllCountries($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredCountries?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'country-full-' + country.country\" \r\n [(ngModel)]=\"country.checked\"\r\n (change)=\"updateSelectedCountries()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n {{ country.country }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllDowntimeFull\" \r\n [checked]=\"isAllDowntimeSelected()\" \r\n (change)=\"toggleSelectAllDowntime($event)\">\r\n <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n Select All \r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'downtime-full-' + downtime.value\" \r\n [(ngModel)]=\"downtime.checked\"\r\n (change)=\"updateSelectedDowntime()\">\r\n <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n {{ downtime.label }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary 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:#0b0b0b}.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" }] });
|
|
2627
2627
|
}
|
|
2628
2628
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, decorators: [{
|
|
2629
2629
|
type: Component,
|
|
2630
|
-
args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('country', $event)\">{{selectedCountriesLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label (click)=\"showClick('stores', $event)\" class=\"badge badge-light-default mt-1 cursor-pointer\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-7 text-muted my-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'status'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search status\" \r\n [(ngModel)]=\"searchStatusText\" \r\n (ngModelChange)=\"filterStatus()\" \r\n />\r\n </div>\r\n\r\n <div *ngIf=\"activeDropdown === 'country'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search country\" \r\n [(ngModel)]=\"searchCountryText\" \r\n (ngModelChange)=\"filterCountries()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <span class=\"mb-5 pb-3\"></span>\r\n <!-- <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search from 2000 stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n /> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('status')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'status', \r\n 'text-item': activeDropdown !== 'status'\r\n }\">Status <span *ngIf=\"selectedStatusLabel1()\" [ngClass]=\"activeDropdown=== 'status' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedStatusLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('country')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'country', \r\n 'text-item': activeDropdown !== 'country'\r\n }\">Country <span *ngIf=\"selectedCountriesLabel1()\" [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'downtime', \r\n 'text-item': activeDropdown !== 'downtime'\r\n }\" >Downtime (In Mins) </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n<div *ngIf=\"activeDropdown === 'status'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredStatus?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStatus\" \r\n [checked]=\"isAllStatusSelected()\" \r\n (change)=\"toggleSelectAllStatus($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStatus?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let status of filteredStatus\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"status.status\" \r\n [(ngModel)]=\"status.checked\"\r\n (change)=\"updateSelectedStatus()\" \r\n />\r\n <label class=\"form-check-label text-capitalize\" [for]=\"status.status\">\r\n {{ status.status }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Country Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredCountries?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllCountriesFull\" \r\n [checked]=\"isAllCountriesSelected()\" \r\n (change)=\"toggleSelectAllCountries($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredCountries?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'country-full-' + country.country\" \r\n [(ngModel)]=\"country.checked\"\r\n (change)=\"updateSelectedCountries()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n {{ country.country }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllDowntimeFull\" \r\n [checked]=\"isAllDowntimeSelected()\" \r\n (change)=\"toggleSelectAllDowntime($event)\">\r\n <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n Select All \r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'downtime-full-' + downtime.value\" \r\n [(ngModel)]=\"downtime.checked\"\r\n (change)=\"updateSelectedDowntime()\">\r\n <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n {{ downtime.label }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:2px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
|
|
2630
|
+
args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedCountriesLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('country', $event)\">{{selectedCountriesLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeCountry()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 mt-1 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label (click)=\"showClick('stores', $event)\" class=\"badge badge-light-default mt-1 cursor-pointer\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 *ngIf=\"activeDropdown !== 'downtime'\" class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n\r\n </div>\r\n </div>\r\n <div class=\"col-7 text-muted my-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'status'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search status\" \r\n [(ngModel)]=\"searchStatusText\" \r\n (ngModelChange)=\"filterStatus()\" \r\n />\r\n </div>\r\n\r\n <div *ngIf=\"activeDropdown === 'country'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search country\" \r\n [(ngModel)]=\"searchCountryText\" \r\n (ngModelChange)=\"filterCountries()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n <div class=\"mb-3\" *ngIf=\"activeDropdown === 'downtime'\">\r\n <span class=\"mb-5 pb-3\"></span>\r\n <!-- <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search from 2000 stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n /> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('status')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'status', \r\n 'text-item': activeDropdown !== 'status'\r\n }\">Status <span *ngIf=\"selectedStatusLabel1()\" [ngClass]=\"activeDropdown=== 'status' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedStatusLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('country')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'country', \r\n 'text-item': activeDropdown !== 'country'\r\n }\">Country <span *ngIf=\"selectedCountriesLabel1()\" [ngClass]=\"activeDropdown=== 'country' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{selectedCountriesLabel1()}}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('downtime')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'downtime', \r\n 'text-item': activeDropdown !== 'downtime'\r\n }\" >Downtime (In Mins) </div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n<div *ngIf=\"activeDropdown === 'status'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredStatus?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStatus\" \r\n [checked]=\"isAllStatusSelected()\" \r\n (change)=\"toggleSelectAllStatus($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStatus?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let status of filteredStatus\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"status.status\" \r\n [(ngModel)]=\"status.checked\"\r\n (change)=\"updateSelectedStatus()\" \r\n />\r\n <label class=\"form-check-label text-capitalize\" [for]=\"status.status\">\r\n {{ status.status }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Country Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'country'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredCountries?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllCountriesFull\" \r\n [checked]=\"isAllCountriesSelected()\" \r\n (change)=\"toggleSelectAllCountries($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllCountriesFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredCountries?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let country of filteredCountries\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'country-full-' + country.country\" \r\n [(ngModel)]=\"country.checked\"\r\n (change)=\"updateSelectedCountries()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'country-full-' + country.country\">\r\n {{ country.country }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'downtime'\" class=\"dropdown-full-view\">\r\n <div class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllDowntimeFull\" \r\n [checked]=\"isAllDowntimeSelected()\" \r\n (change)=\"toggleSelectAllDowntime($event)\">\r\n <label class=\"form-check-label\" for=\"selectAllDowntimeFull\">\r\n Select All \r\n </label>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let downtime of downtimeOptions\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'downtime-full-' + downtime.value\" \r\n [(ngModel)]=\"downtime.checked\"\r\n (change)=\"updateSelectedDowntime()\">\r\n <label class=\"form-check-label py-1\" [for]=\"'downtime-full-' + downtime.value\">\r\n {{ downtime.label }}\r\n </label>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary 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:#0b0b0b}.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"] }]
|
|
2631
2631
|
}], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
|
|
2632
2632
|
type: HostListener,
|
|
2633
2633
|
args: ['document:click', ['$event']]
|
|
@@ -3543,11 +3543,11 @@ class TraxHeaderComponent {
|
|
|
3543
3543
|
this.filterStores();
|
|
3544
3544
|
}
|
|
3545
3545
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxHeaderComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3546
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxHeaderComponent, selector: "lib-trax-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\"> -->\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <!-- <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div> -->\r\n\r\n <!-- Location Dropdown -->\r\n<!-- <div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('location')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n<!-- Group Dropdown -->\r\n<!-- <div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<!-- <div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n\r\n <!-- </div>\r\n</div> -->", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
3546
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxHeaderComponent, selector: "lib-trax-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\"> -->\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <!-- <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div> -->\r\n\r\n <!-- Location Dropdown -->\r\n<!-- <div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('location')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n<!-- Group Dropdown -->\r\n<!-- <div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<!-- <div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n\r\n <!-- </div>\r\n</div> -->", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
3547
3547
|
}
|
|
3548
3548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxHeaderComponent, decorators: [{
|
|
3549
3549
|
type: Component,
|
|
3550
|
-
args: [{ selector: 'lib-trax-header', template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\"> -->\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <!-- <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div> -->\r\n\r\n <!-- Location Dropdown -->\r\n<!-- <div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('location')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n<!-- Group Dropdown -->\r\n<!-- <div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<!-- <div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n\r\n <!-- </div>\r\n</div> -->", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
|
|
3550
|
+
args: [{ selector: 'lib-trax-header', template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\" (click)=\"resetValidation()\" \r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\"> -->\r\n <!-- <span class=\"me-2\">Filter</span> -->\r\n <!-- <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown1 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n <button class=\"btn btn-primary w-25 btn-resize\" (click)=\"Apply()\">Apply</button>\r\n </div> -->\r\n\r\n <!-- Location Dropdown -->\r\n<!-- <div class=\"dropdown-container\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('location')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedLocationsLabel()\"\r\n readonly\r\n placeholder=\"Select locations...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'location'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search locations...\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocations\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocations\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let location of filteredLocations\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n<!-- Group Dropdown -->\r\n<!-- <div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('group')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\" \r\n [value]=\"selectedGroupsLabel()\" readonly\r\n placeholder=\"Select clusters..\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'group'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search\" \r\n placeholder=\"Search clusters...\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroups\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroups\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let group of filteredGroups\"\r\n >\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"group.groupName\"\r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n\r\n<!-- Store Dropdown -->\r\n<!-- <div class=\"dropdown-container mt-3\" (clickOutside)=\"closeDropdown()\">\r\n <div class=\"dropdown-header\" (click)=\"toggleDropdown('store')\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control dropdown-input cursor-pointer\"\r\n [value]=\"selectedStoresLabel()\"\r\n readonly\r\n placeholder=\"Select stores...\"\r\n />\r\n </div>\r\n <div class=\"dropdown-menu custom-dropdown-menu\" *ngIf=\"dropdownOpen === 'store'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control mb-2 dropdown-search \" \r\n placeholder=\"Search stores...\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n <div class=\"form-check mb-2 dropdown-item custom-dropdown-item\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStores\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStores\">\r\n Select All\r\n </label>\r\n </div>\r\n <div \r\n class=\"dropdown-item form-check custom-dropdown-item\" \r\n *ngFor=\"let store of filteredStores\"\r\n >\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"store.storeId\"\r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label\" [for]=\"store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n</div> -->\r\n\r\n\r\n <!-- </div>\r\n</div> -->", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.dropdown1{position:absolute;top:70px;min-width:270px!important}.dropdown1 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown1 .dropdown{position:relative;display:inline-block}.dropdown1 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}::ng-deep .dropdown1{z-index:1!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
|
|
3551
3551
|
}], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
|
|
3552
3552
|
type: HostListener,
|
|
3553
3553
|
args: ['document:click', ['$event']]
|
|
@@ -4469,11 +4469,11 @@ class TraxWithoutdateComponent {
|
|
|
4469
4469
|
this.activeDropdown = type;
|
|
4470
4470
|
}
|
|
4471
4471
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxWithoutdateComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxWithoutdateComponent, selector: "lib-trax-withoutdate", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
4472
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TraxWithoutdateComponent, selector: "lib-trax-withoutdate", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
|
|
4473
4473
|
}
|
|
4474
4474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TraxWithoutdateComponent, decorators: [{
|
|
4475
4475
|
type: Component,
|
|
4476
|
-
args: [{ selector: 'lib-trax-withoutdate', template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
|
|
4476
|
+
args: [{ selector: 'lib-trax-withoutdate', template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
|
|
4477
4477
|
}], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
|
|
4478
4478
|
type: HostListener,
|
|
4479
4479
|
args: ['document:click', ['$event']]
|
|
@@ -5304,11 +5304,11 @@ class TrafficNobComponent {
|
|
|
5304
5304
|
this.activeDropdown = type;
|
|
5305
5305
|
}
|
|
5306
5306
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficNobComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficNobComponent, selector: "lib-traffic-nob", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
|
|
5307
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficNobComponent, selector: "lib-traffic-nob", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
|
|
5308
5308
|
}
|
|
5309
5309
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficNobComponent, decorators: [{
|
|
5310
5310
|
type: Component,
|
|
5311
|
-
args: [{ selector: 'lib-traffic-nob', template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary text-muted btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
|
|
5311
|
+
args: [{ selector: 'lib-traffic-nob', template: "<div class=\"me-3\">\r\n <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('region', $event)\">{{selectedLocationsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label *ngIf=\"selectedGroupsLabel()\" class=\"badge badge-light-default mx-2 cursor-pointer\" (click)=\"showClick('clusters', $event)\">{{selectedGroupsLabel()}} \r\n <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg></span>\r\n </label>\r\n <label class=\"badge badge-light-default cursor-pointer\" (click)=\"showClick('stores', $event)\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path\r\n d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n </span>\r\n <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n <button type=\"button\" (click)=\"opendropdown($event)\" class=\"btn btn-outline mx-2 rounded-3 text-nowrap border-val\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"17\" viewBox=\"0 0 19 17\" fill=\"none\">\r\n<path d=\"M17.5026 0.835938H0.835938L7.5026 8.71927V14.1693L10.8359 15.8359V8.71927L17.5026 0.835938Z\" stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n <span class=\"ms-2\">Filter</span>\r\n </button>\r\n \r\n <div *ngIf=\"Opendropdown\" class=\"card dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important; min-width: 350px;\" (clickOutside)=\"closeDropdown1()\">\r\n \r\n <!-- Header Section -->\r\n <div class=\"d-flex px-3 justify-content-between pt-1 px-0 border-bottom align-items-center mb-1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-5\">\r\n <h6 class=\"mb-0 header-filter ps-2 my-4\">Filter by</h6>\r\n </div>\r\n <div class=\"col-7 text-muted mt-2\"> \r\n <!-- Search from 2000 stores -->\r\n <div *ngIf=\"activeDropdown === 'region'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search region\" \r\n [(ngModel)]=\"searchLocationText\" \r\n (ngModelChange)=\"filterLocations()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'clusters'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search clusters\" \r\n [(ngModel)]=\"searchGroupText\" \r\n (ngModelChange)=\"filterGroups()\" \r\n />\r\n </div>\r\n <div *ngIf=\"activeDropdown === 'stores'\">\r\n <input \r\n type=\"text\" \r\n class=\"form-control form-control-sm mb-3\" \r\n placeholder=\"Search stores\" \r\n [(ngModel)]=\"searchStoreText\" \r\n (ngModelChange)=\"filterStores()\" \r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"row\">\r\n <!-- Left Side - Filter Categories -->\r\n <div class=\"col-5 border-end pe-3\">\r\n <!-- Filter Stats -->\r\n <div class=\"filter-categories px-3 my-2\">\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('region')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'region', \r\n 'text-item': activeDropdown !== 'region'\r\n }\">Region <span *ngIf=\"selectedLocationsLabel1()\" [ngClass]=\"activeDropdown=== 'region' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedLocationsLabel1() }}</span></div>\r\n <!-- <div class=\"fw-bold\"></div> -->\r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('clusters')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'clusters', \r\n 'text-item': activeDropdown !== 'clusters'\r\n }\">Clusters <span *ngIf=\"selectedGroupsLabel1()\" [ngClass]=\"activeDropdown=== 'clusters' ? 'text-border-priamry' : 'text-border'\" class=\"mx-2\">{{ selectedGroupsLabel1() }}</span></div>\r\n \r\n </div>\r\n <div class=\"filter-category-item cursor-pointer\" (click)=\"showDropdown('stores')\">\r\n <div [ngClass]=\"{\r\n 'active-item': activeDropdown === 'stores', \r\n 'text-item': activeDropdown !== 'stores'\r\n }\" >Stores <span [ngClass]=\"activeDropdown=== 'stores' ? 'text-border-priamry' : 'text-border'\" *ngIf=\"selectedStoresLabel1()\" class=\"mx-2\">{{ selectedStoresLabel1() }}</span></div>\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Downtime Section -->\r\n <!-- <div class=\"mt-4\">\r\n <div class=\"small text-muted mb-2\">Downtime</div>\r\n <div class=\"text-center py-1\">\r\n <span class=\"text-muted\">Downtime section</span>\r\n </div>\r\n </div> -->\r\n </div>\r\n\r\n <!-- Right Side - Dropdown Content -->\r\n <div class=\"col-7 ps-3\">\r\n <div class=\"dropdown-content-area\" style=\"min-height: 200px;\">\r\n \r\n\r\n <!-- Region Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'region'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredLocations?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllLocationsFull\" \r\n [checked]=\"isAllLocationsSelected()\" \r\n (change)=\"toggleSelectAllLocations($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllLocationsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredLocations?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-3\" *ngFor=\"let location of filteredLocations\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'location-full-' + location.city\" \r\n [(ngModel)]=\"location.checked\"\r\n (change)=\"updateSelectedLocations()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'location-full-' + location.city\">\r\n {{ location.city }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Clusters Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'clusters'\" class=\"dropdown-full-view\">\r\n <div *ngIf=\"filteredGroups?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllGroupsFull\" \r\n [checked]=\"isAllGroupsSelected()\" \r\n (change)=\"toggleSelectAllGroups($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllGroupsFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredGroups?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let group of filteredGroups\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n [id]=\"'group-full-' + group.groupName\" \r\n [(ngModel)]=\"group.checked\"\r\n (change)=\"updateSelectedGroups()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'group-full-' + group.groupName\">\r\n {{ group.groupName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Stores Dropdown Content -->\r\n <div *ngIf=\"activeDropdown === 'stores'\" class=\"dropdown-full-view\">\r\n \r\n <div *ngIf=\"filteredStores?.length\" class=\"form-check mb-3\">\r\n <input \r\n class=\"form-check-input cursor-pointer\" \r\n type=\"checkbox\" \r\n id=\"selectAllStoresFull\" \r\n [checked]=\"isAllStoresSelected()\" \r\n (change)=\"toggleSelectAllStores($event)\" \r\n />\r\n <label class=\"form-check-label\" for=\"selectAllStoresFull\">\r\n Select All\r\n </label>\r\n </div>\r\n <div *ngIf=\"!filteredStores?.length\" >\r\n <div class=\"col-lg-12 mt-20 mb-6\">\r\n <div class=\" mt-20 card-body d-flex justify-content-center align-items-center flex-column\">\r\n <img class=\"img-nodata-table\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n <div class=\"nodata-title\">No data found</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"dropdown-list text-nowrap\" style=\"max-height: 250px; overflow-y: auto;\">\r\n <div class=\"form-check mb-2\" *ngFor=\"let store of filteredStores\">\r\n <input \r\n class=\"form-check-input\" \r\n type=\"checkbox\" \r\n [id]=\"'store-full-' + store.storeId\" \r\n [(ngModel)]=\"store.checked\"\r\n (change)=\"updateSelectedStores()\" \r\n />\r\n <label class=\"form-check-label py-1\" [for]=\"'store-full-' + store.storeId\">\r\n {{ store.storeName }}\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Default View when no dropdown selected -->\r\n <div *ngIf=\"!activeDropdown\" class=\"text-center text-muted py-5\">\r\n <div>Select a filter category to see options</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"d-flex justify-content-between p-3 border-top mt-3\">\r\n <button class=\"btn btn-outline-secondary btn-sm ps-2\" (click)=\"Reset()\">Reset Filters</button>\r\n <div>\r\n <button class=\"btn btn-outline btn-sm me-2\" (click)=\"closeDropdown1()\">Cancel</button>\r\n <button class=\"btn btn-primary btn-sm\" (click)=\"Apply()\">Apply</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.form-check-label{color:var(--Gray-700, #344054)!important;font-size:14px;font-style:normal;font-weight:500;line-height:24px}.form-check{display:block;min-height:1.5rem;padding-left:.25rem!important}.dropdown2{position:absolute;top:60px;min-width:470px!important}.dropdown2 .dropdown-title{color:var(--Gray-900, #101828);font-size:14px;font-weight:600;line-height:24px}.dropdown2 .dropdown{position:relative;display:inline-block}.dropdown2 .dropdown span{color:var(--Gray-700, #344054);font-size:14px;font-weight:600;line-height:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:6px 15px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}.filter-category-item{padding:6px 0;border-radius:4px;transition:background-color .2s}.cursor-pointer{cursor:pointer}.dropdown-full-view{height:100%}.header-filter{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#98a2b3}.w-75{width:58%!important}.active-item{border:none;border-radius:6px;font-size:14px;color:var(--Primary-700, #009BF3);background:var(--Primary-50, #EAF8FF);padding:10px 8px}.text-border-priamry{border-radius:30px;background:var(--Primary-50, #EAF8FF);color:var(--Primary-700, #009BF3);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important;mix-blend-mode:multiply!important}.text-border{border-radius:30px;background:var(--Gray-100, #F2F4F7)!important;color:var(--Gray-700, #344054);text-align:center;font-size:14px;font-weight:500;line-height:20px;padding:2px 10px!important}.text-item{font-weight:400;font-size:14px;line-height:20px;letter-spacing:0%;color:#344054!important;padding:10px 8px}\n"] }]
|
|
5312
5312
|
}], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
|
|
5313
5313
|
type: HostListener,
|
|
5314
5314
|
args: ['document:click', ['$event']]
|
|
@@ -10189,7 +10189,14 @@ class LayoutComponent {
|
|
|
10189
10189
|
fullPath === '/manage/traffic' ||
|
|
10190
10190
|
fullPath === '/manage/traffic/explore' ||
|
|
10191
10191
|
fullPath === '/manage/analyse/reports' ||
|
|
10192
|
-
this.url[2] === 'employee-metrics')
|
|
10192
|
+
this.url[2] === 'employee-metrics' || this.url.includes("layout-builder") ||
|
|
10193
|
+
this.url.includes("fixture-template") ||
|
|
10194
|
+
this.url.includes("create-library-vm") ||
|
|
10195
|
+
this.url.includes("create-library-fixture") ||
|
|
10196
|
+
this.url.includes("create-library-product") ||
|
|
10197
|
+
this.url.includes("manage-planogram") || fullPath === "/manage/tickets/list" ||
|
|
10198
|
+
this.url.includes("findAndReplace") ||
|
|
10199
|
+
this.url.includes("manage-rollout")) {
|
|
10193
10200
|
return null;
|
|
10194
10201
|
}
|
|
10195
10202
|
if ((this.url[1] === 'manage' && this.url[2] === 'stores' && this.url.length > 3)) {
|